drp-ui/src/components/BatchImport/index.vue

<script>
export default {
  name:'BatchImport',
  props:{
    disabled:{
      type:Boolean,
      default:false,
    },
    limit:{
      type:Number,
      default:1,
    },
    fileType:{
      type:Array,
      default:()=>['xls', 'xlsx'],
    },
    size:{
      type:String,
      default:'mini',
    },
    isShowTip:{
      type:Boolean,
      default:true,
    },
    isTemplate:{
      type:Boolean,
      default:true,
    },
    fileSize: {
      type: Number,
      default: 100,
    },
  },
  computed:{
     // 是否显示提示
     showTip() {
      return this.isShowTip && (this.fileType || this.fileSize);
    },
    accept(){
      return this.fileType.map(item =>(`.${item}`)).join(',');
    }
  },
  data(){
    return {
      title:'批量导入',
      visible:false,
      loading:false,
      fileList:[],
      number: 0,

    }
  },
  methods:{
    // 确认上传
    async submitUpload(){
      if(this.fileList.length){
        this.$emit('import',this.fileList);
      }else{
      this.$notify.warning({
        title:'警告',
        message: '请上传文件之后在确认！',
      });

      }
      
    },
    // 模板下载
    async templateDownload(){
      this.$emit('temDownload')
      // 放父组件
      // this.download('/system/material/download', {}, `物料基本信息模板.xlsx`);
    },
    // 
    beforeClose(done){
      this.fileList = [];
      // 关闭前清空
      done();
    },
    // 预览
    handlePreview(){},
    // 移除
    handleRemove(file, fileList){
      this.fileList = fileList;
    },
    // 文件改变
    onChange(file, fileList){
      this.fileList = fileList;
    },
    setVisible(prop){
      this.visible = prop;
      if(!prop){
        this.fileList = [];
      }
    },
    open(){
      this.setVisible(true);
    },
    // 取消
    cancal(){
      this.setVisible(false);
    },
     // 上传前校检格式和大小
     handleBeforeUpload(file) {
      // 校检文件类型
      if (this.fileType) {
        const fileName = file.name.split(".");
        const fileExt = fileName[fileName.length - 1];
        const isTypeOk = this.fileType.indexOf(fileExt) >= 0;
        if (!isTypeOk) {
          this.$modal.msgError(
            `文件格式不正确, 请上传${this.fileType.join("/")}格式文件!`
          );
          return false;
        }
      }
      // 校检文件大小
      if (this.fileSize) {
        const isLt = file.size / 1024 / 1024 < this.fileSize;
        if (!isLt) {
          this.$modal.msgError(`上传文件大小不能超过 ${this.fileSize} MB!`);
          return false;
        }
      }
      this.$modal.loading("正在上传文件，请稍候...");
      this.number++;
      return true;
    },
    
  },
  created(){},
}
</script>

<template>
  <el-button 
    :disabled="disabled"
    :size="size"
    @click="open"
    type="primary"
    v-bind="$attrs"
    v-on="$listeners"
  >
    {{ title }}
    <el-dialog 
      :title="title" 
      :visible.sync="visible"
      v-loading="loading"
      width="35%" 
      center
      :before-close="beforeClose"
      append-to-body
    >
      <el-upload
        ref="upload"
        action="#"
        :on-preview="handlePreview"
        :accept="accept"
        :before-upload="handleBeforeUpload"
        :on-remove="handleRemove"
        :file-list="fileList"
        :auto-upload="false"
        :on-change="onChange" 
        :limit="limit"
        :disabled="disabled"
        style="text-align: center;"
      >
        <el-button 
          slot="trigger" 
          :size="size" 
          type="primary"
        >选取文件</el-button>
        <el-button
          v-if="isTemplate"
          style="margin-left: 10px;" 
          :size="size" 
          type="success" 
          @click="templateDownload"
        >下载模板</el-button>
        <div slot="tip" class="el-upload__tip" v-if="isShowTip">
          请上传
          <template v-if="fileSize">
            大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b>
          </template>
          <template v-if="fileType">
            格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b>
          </template>
        </div>
      </el-upload>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitUpload" :size="size">确 定</el-button>
        <el-button @click="cancal" :size="size">取 消</el-button>
      </div>
    </el-dialog>
  </el-button>
</template>