小区管理新增导入

zhongrj

2023-05-06 c0624aaa2cd08fae14fb25914a5a9468a96227a7

小区管理新增导入

 src/views/community/community.vue

@@ -18,26 +18,41 @@
               @size-change="sizeChange"
               @refresh-change="refreshChange"
               @on-load="onLoad">
      <!-- <template slot="menuLeft">
        <el-button
      <template slot="menuLeft">
        <el-button type="success"
                   size="small"
                   icon="el-icon-delete"
                   plain
                   v-if="permission.community_delete"
                   @click="handleDelete">删 除
                   icon="el-icon-upload2"
                   @click="handleImport">导入
        </el-button>
      </template> -->
      </template>
    </avue-crud>
    <el-dialog title="小区数据导入"
               append-to-body
               :visible.sync="excelBox"
               width="555px">
      <avue-form :option="excelOption" v-model="excelForm" :upload-after="uploadAfter">
        <template slot="excelTemplate">
          <el-button type="primary" @click="handleTemplate">
            点击下载<i class="el-icon-download el-icon--right"></i>
          </el-button>
        </template>
      </avue-form>
    </el-dialog>
  </basic-container>
</template>

<script>
  import {getPage, getDetails, add, update, remove} from "@/api/villageInfo/villageInfo";
  import {mapGetters} from "vuex";
  import {exportBlob} from "@/api/common";
  import {getToken} from "@/util/auth";
  import {downloadXls} from "@/util/util";

  export default {
    data() {
      return {
        excelBox:false,
        form: {},
        query: {},
        loading: true,
@@ -45,6 +60,57 @@
          pageSize: 10,
          currentPage: 1,
          total: 0
        },
        excelOption: {
          submitBtn: false,
          emptyBtn: false,
          column: [
            {
              label: '模板上传',
              prop: 'excelFile',
              type: 'upload',
              drag: true,
              loadText: '模板上传中，请稍等',
              span: 24,
              propsHttp: {
                res: 'data'
              },
              tip: '请上传 .xls,.xlsx 标准格式文件',
              action: "/api/villageInfo/villageInfo/import-village-info"
            },
            {
              label: "数据覆盖",
              prop: "isCovered",
              type: "switch",
              align: "center",
              width: 80,
              dicData: [
                {
                  label: "否",
                  value: 0
                },
                {
                  label: "是",
                  value: 1
                }
              ],
              value: 0,
              slot: true,
              rules: [
                {
                  required: true,
                  message: "请选择是否覆盖",
                  trigger: "blur"
                }
              ]
            },
            {
              label: '模板下载',
              prop: 'excelTemplate',
              formslot: true,
              span: 24,
            }
          ]
        },
        selectionList: [],
        option: {
@@ -319,7 +385,22 @@
          this.loading = false;
          this.selectionClear();
        });
      }
      },
      //下面为导入操作
      handleImport() {
        this.excelBox = true;
      },
      uploadAfter(res, done, loading, column) {
        window.console.log(column);
        this.excelBox = false;
        this.refreshChange();
        done();
      },
      handleTemplate() {
        exportBlob(`/api/villageInfo/villageInfo/export-template?${this.website.tokenHeader}=${getToken()}`).then(res => {
          downloadXls(res.data, "小区数据模板.xlsx");
        })
      },
    }
  };
</script>