标签代码优化

linwe

2023-11-20 e5c21244bd817fc2dd62ef38facc9b959bde9ee3

 src/views/userHouse/lable/household.vue

@@ -1,11 +1,164 @@
<template>
  <div id="">
    222222222222
  <div style="width:400px">

    <el-row>
      <el-col style="color: red;" :span="24">
        注意：仅导入未添加过标签的住户
        EXCEL格式：小区id，姓名，手机，身份证，标签id，
        颜色（1-绿 2-黄 3-红），备注
      </el-col>
    </el-row>
    <basicContainer>
      <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>

      <el-button type="primary" @click="handleExcel">标签住户导入 excel</el-button>

    </basicContainer>


  </div>
</template>

<script>
</script>
  import {
    exportBlob
  } from "@/api/common";
  import {
    getToken
  } from '@/util/auth';
  import {
    downloadXls
  } from "@/util/util";
  export default {
    data() {
      return {
        excelBox: false,
        excelForm: {},
        excelOption: {
          submitBtn: false,
          emptyBtn: false,
          column: [{
              label: '模板上传',
              prop: 'excelFile',
              type: 'upload',
              drag: true,
              loadText: '模板上传中，请稍等',
              span: 24,
              propsHttp: {
                res: 'data'
              },
              tip: '请上传 .xls,.xlsx 标准格式文件',
              action: "/api/blade-householdLabel/householdLabel/import-userHouseLabel"
            },
            // {
            //   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,
            }
          ]
        }
      }
    },
    methods: {
      handleExcel() {
        this.excelBox = true;

<style>
</style>
        // let opt = {
        //   title: '标签住户导入',
        //   column: [{
        //     label: '门牌地址编码',
        //     prop: 'title'
        //   }, {
        //     label: '标签ID',
        //     prop: 'title'
        //   }, {
        //     label: '标签名称',
        //     prop: 'title'
        //   }, {
        //     label: '颜色',
        //     prop: 'title'
        //   }, {
        //     label: '备注',
        //     prop: 'title'
        //   }, {
        //     label: '用户id',
        //     prop: 'title'
        //   }, {
        //     label: '住户id',
        //     prop: 'title'
        //   }],
        //   data: []
        // }
        // this.$Export.excel({
        //   title: opt.title,
        //   columns: opt.column,
        //   data: opt.data
        // });
      },
      handleExcel1() {
        let opt = {
          title: '文档标题',
          column: [{
            label: '多级表头',
            prop: 'header',
            children: [{
              label: '标题1',
              prop: 'title1'
            }, {
              label: '标题2',
              prop: 'title2'
            }]
          }],
          data: [{
            title1: "测试数据1",
            title2: "测试数据2"
          }, {
            title1: "测试数据2",
            title2: "测试数据2"
          }]
        }
        this.$Export.excel({
          title: opt.title,
          columns: opt.column,
          data: opt.data
        });
      },
      handleTemplate() {
        exportBlob(`/api/blade-householdLabel/householdLabel/export-userHouseLabel?${this.website.tokenHeader}=${getToken()}`).then(res => {
          downloadXls(res.data, "标签住户数据模板.xlsx");
        })
      },
    }
  }
</script>