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:{
    tips:{
      get(){
        // this.accept.
      },
      set(){},
    },
     // 是否显示提示
     showTip() {
      return this.isShowTip && (this.fileType || this.fileSize);
    },
  },
  data(){
    return {
      title:'批量导入',
      visible:false,
      loading:false,
      fileList:[],

    }
  },
  methods:{
    // 确认上传
    async submitUpload(){

    },
    // 模板下载
    async templateDownload(){
      // 放父组件
      // this.download('/system/material/download', {}, `物料基本信息模板.xlsx`);
    },
    // 
    beforeClose(done){
      // 关闭前清空
      done();
    },
    // 预览
    handlePreview(){},
    // 移除
    handleRemove(file, fileList){
      this.fileList = fileList;
    },
    // 文件改变
    onChange(file, fileList){
      this.fileList = fileList;
    },
    // 取消
    cancal(){
      this.visible = false;
    },
    
  },
  created(){},
}
</script>

<template>
  <el-button :disabled="disabled">
    {{ title }}
    <el-dialog 
      :title="title" 
      :visible.sync="visible"
      v-loading="loading"
      width="35%" 
      center
      :before-close="beforeClose"
    >
      <el-upload
        ref="upload"
        :accept="accept"
        action="#"
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        :file-list="fileList"
        :auto-upload="false"
        :on-change="onChange" 
        :limit="limit"
        append-to-body
      >
        <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 @click="cancal">取 消</el-button>
        <el-button type="primary" @click="submitUpload">确 定</el-button>
      </div>
    </el-dialog>
  </el-button>
</template>