kd-aiot-frontend-eom/src/components/upload/import-dialog.vue

<template>
  <!-- 上传 -->
  <el-dialog title="导入文件上传" :visible.sync="dialogVisible" width="40%">
    <el-form label-width="110px" class="zw-criterion">
      <el-form-item label="选择文件">
        <el-upload
          class="avatar-uploader"
          action="#"
          :show-file-list="false"
          :http-request="handlSuccess"
          :multiple="true"
        >
          <el-button icon="el-icon-plus" size="small" type="primary"
            >文件上传</el-button
          >
          <div slot="tip" class="el-upload__tip" v-if="fileUrl">
            只能上传excel文件，点击
            <el-link
              type="primary"
              :underline="false"
              @click="downLoadTemplate()"
            >
              下载模板</el-link
            >
          </div>
        </el-upload>
      </el-form-item>
      <el-form-item label="上传列表">
        <div class="imgs-box">
          <p v-for="(item, index) in attaments" :key="index" class="imgs-p">
            <span> {{ item.name }}</span>
            <el-link @click="delFileList(index)" type="primary">删除</el-link>
          </p>
        </div>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button size="small" @click="dialogVisible = false">关 闭</el-button>
      <el-button size="small" @click="upload" type="primary">上 传</el-button>
    </div>
    <div id="progress" v-if="isProgress">
      <el-progress
        type="circle"
        :percentage="percentage"
        text-color="#fff"
      ></el-progress>
    </div>
  </el-dialog>
</template>

<script>
  import { importBatch,downLoadTemplate } from '@/api/system/file/index.js';
  import { download1 } from '@/utils/file';
  import { number } from 'echarts';

  export default {
    props: {
      // eslint-disable-next-line vue/require-prop-type-constructor
      defModule: '',
      fileUrl: '',
      fileName: '',
      apiUrl: '',
      isWeb: {
        type: Boolean,
        default: true
      } ,
      fileKeyName:'file'
    },
    //注册组件
    data() {
      return {
        showViewer: false, // 显示查看器
        dialogVisible: false,
        uploadShow: false,
        isProgress: false,
        module: '',
        percentage: 0,
        attaments: [], //上传文件
        file: ''
      };
    },

    created() {},
    methods: {
      open() {
        this.attaments = [];
        this.module = '';
        this.dialogVisible = true;
      },
      //删除附件
      delFileList(index) {
        this.attaments.splice(index, 1);
      },
      //上传限制
      beforeUpload(file) {
        const isLt10M = file.size / 1024 / 1024 < 10;
        if (!isLt10M) {
          this.$message.error('导入单文件大小不能超过 10MB!');
        }
        return isLt10M;
      },
      //图片上传
      handlSuccess(param) {
        this.file = param.file;
        this.attaments.push(param.file);
      },
      // 文件上传
      async upload() {
        if (this.attaments.length == 0) {
          return this.$message.warning('文件不能为空！');
        }
        this.module = this.$props.defModule;
        this.isProgress = true;
        this.percentage = 0;
        await importBatch(
          {
            module: this.module,
            multiPartFiles: this.attaments
          },
          this.apiUrl,
          (data) => {
            console.log(data, 'data');
            this.percentage = parseFloat(
              ((data.loaded * 100) / data.total).toFixed(2)
            );
            if (this.percentage >= 100) {
              setTimeout(() => {
                this.isProgress = false;
              }, 500);
            }
          },
          this.fileKeyName
        )
          .then((res) => {
            this.$message.success('操作成功！');
            this.dialogVisible = false;
            this.isProgress = false;
            this.$emit('success');
          })
          .catch(() => {
            this.isProgress = false;
          });
      },
      //下载模板
      downLoadTemplate() {
        if(this.isWeb){
          download1(window.location.origin + this.fileUrl, this.fileName);
        }else{
          downLoadTemplate(this.fileUrl,this.fileName);
        }

      }
    }
  };
</script>

<style lang="scss">
  .zw-table-header {
    float: right;
  }

  .imgs-box .imgs-p {
    height: 30px;
    background: #f0f3f3;
    line-height: 30px;
    width: 372px;
    margin-bottom: 5px;
    padding: 0 10px;
    display: flex;
    justify-content: space-between;
  }
  .zw-criterion-normal {
    padding: 20px 0 0 0;
  }
  .el-main {
    overflow: hidden;
  }
  #progress {
    background: rgba($color: #000000, $alpha: 0.5);
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }
</style>