dm-manage-web/src/views/zs/clue/components/UploadDialog.vue

<template>
  <el-dialog :title="title" :close-on-click-modal="false" append-to-body :visible.sync="visible" width="400px">
    <el-upload ref="upload" accept=".xlsx, .xls" :headers="upload.headers" :action="upload.url + '?ydtData=' + ydtData+ '&dYData=' + dYData" :disabled="upload.isUploading" :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false" drag>
      <i class="el-icon-upload" />
      <div class="el-upload__text">
        将文件拖到此处，或
        <em>点击上传</em>
      </div>
      <div slot="tip" class="el-upload__tip">
        <el-link type="info" style="font-size: 12px" @click="importTemplate">下载模板</el-link>
      </div>
      <div slot="tip" class="el-upload__tip" style="color: red">提示：仅允许导入“xls”或“xlsx”格式文件！</div>
    </el-upload>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitFileForm">确 定</el-button>
      <el-button @click="visible = false">取 消</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { getToken } from '@/utils/auth';

export default {
  name: 'UploadDialog',
  data() {
    return {
      visible: false,
      canSubmit: true,
      isUploading: true,
      ydtData: false,
      dYData: false,
      title: '学员信息导入',
      upload: {
        // 是否禁用上传
        isUploading: false,
        // 设置上传的请求头部
        headers: { Authorization: 'Bearer ' + getToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + '/zs/clue/importData'
      }
    };
  },
  methods: {
    init(info = {}) {
      this.visible = true;
      this.ydtData = false;
      this.ydtData = false;
      this.canSubmit = true;
      this.$nextTick(() => {
        if (info) {
          this.ydtData = info.ydtData;
          this.dYData = info.dYData;
          if(this.ydtData){
            this.title = "一点通" + this.title;

          }
          if(this.dYData){
            this.title = "抖音" + this.title;

          }
        }
      });
    },
    /** 下载模板操作 */
    importTemplate() {
      debugger
      this.download('zs/clue/importTemplate?ydtData=' + this.ydtData + '&dYData=' + this.dYData, {}, `clue_template_${new Date().getTime()}.xlsx`);
    },
    // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true;
    },
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      this.visible = false;
      this.upload.isUploading = false;
      this.$refs.upload.clearFiles();
      this.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + '</div>', '导入结果', {
        dangerouslyUseHTMLString: true
      });
      this.$emit('refreshDataList');
    },
    // 提交上传文件
    submitFileForm() {
      this.$refs.upload.submit();
    }
  }
};
</script>