文件导入组件上传

文件导入组件

• 使用示例

<template>
  <el-dialog
    :title="dialog.title"
    :close-on-click-modal="false"
    :visible.sync="dialog.visible"
    width="70%"
    class="batch-dialog"
    @close="onClose"
  >
    <!-- <div class="title-style">信息导入</div> -->
    <slot name="form"></slot>
    <div class="flex-container align-start">
      <div class="kuang1 flex-container start">
        <span class="m-l-16 text-style2 textcut ">{{fileName}}</span>
      </div>
      <el-upload
        class="upload-demo"
        ref="upload"
        :file-list="fileList"
        :name="name || 'file'"
        :data="extraData"
        :action="action"
        :before-upload="beforeUpload"
        :on-change="onChange"
        :on-success="uploadSuccess"
        :on-error="uploadFail"
        :multiple="false"
      >
        <el-button type="primary" >选择文件</el-button>
      </el-upload>
    </div>

    <div class="m-t-10 text-style3">
      <el-link
        type="danger"
        :underline="false"
        >提示：请按模板字段正确填写信息后导入。</el-link
      >
      <div class="p-t-10">
        <el-link type="info" :underline="false"
          >导入模板.xlsx</el-link
        >
        <el-button type="primary" size="mini" @click="download">下载</el-button>
      </div>
    </div>
    <div class="flex-container" v-loading="loadingResult">
      <div class="import-result m-t-25 p-10" v-if="showImportResult">
        <div class="result-title">数据导入结果</div>
        <div class="m-t-10 m-b-25 result-list">
          <div v-if="showImportResult.successCount" class="green-color t-c m-b-5">
            成功导入{{showImportResult.successCount || 0}}条数据!
          </div>
          <div v-if="showImportResult.failCount" class="danger-color t-c m-b-5">{{showImportResult.failCount || 0}}条数据导入失败，请修改后重新导入：</div>
          <template v-if="showImportResult.failCount">
            <div class="m-t-5" v-for="(item,index) in (showImportResult.errorMessageList || [])" :key="index">
              <!-- 第{{item.rowNum}}行，{{item.errorMsg}}，未导入 -->
              {{ item }}
            </div>
          </template>
        </div>
        <div class="t-r gray-color" v-if="showImportResult.failCount" @click="downloadErrLog">日志下载</div>
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <!-- <el-button @click="dialog.visible = false">取 消</el-button> -->
      <el-button  @click="dialog.visible = false"
        >关 闭</el-button
      >
    </div>
  </el-dialog>
</template>

<script>
import { downloadFile } from '../utils'
export default {
  name: 'batchImport',
  props: {
    dialog: {
      type: Object,
      default: () => ({
        visible: false,
        data: {},
      })
    },

    action: String,
    name: String, // 上传文件的字段名
    templateUrl: String, // 下载模板的地址
    showTemplate: {
      type: Boolean,
      default: true,
    },
    templateTitle: String,
    formData: {
      type: Object,
      default: () => ({}),
    },
    extraData: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      loadingResult: false,
      showImportResult: false,
      fileList: [],
      fileName: '',
    }
  },
  methods: {
    beforeUpload(file) {
      this.fileName = file.name
      let fileName = file.name
      let fileend = fileName.substring(fileName.indexOf("."))
      if(fileend !== '.xls' && fileend !== '.xlsx'){
        this.$message.warning(`请上传xls格式或xlsx格式文件`);
        this.clearFiles();
        return false;
      }
      this.loadingResult = true;
      return true;
    },
    onChange(file) {
      this.fileList = [file];
    },
    downloadErrLog(){
      const aLog = document.createElement("a")
      const fileName = "日志.txt"
      aLog.download = fileName;
      aLog.style.display = "none";
      const blob = new Blob([JSON.stringify(this.showImportResult)])
      aLog.href = URL.createObjectURL(blob);
      document.body.appendChild(aLog);
      aLog.click();
      document.body.removeChild(aLog);
    },

    // 下载模版
    download() {
      downloadFile(this.templateUrl, this.formData, this.templateTitle || '单元模板.xlsx');
    },

    // 文件上传成功
    uploadSuccess(res) {
      console.log('res: ', res);
      if (res.code == 0) {
        this.showImportResult = res.data;
        this.loadingResult = false;
        this.$emit('updateList')
      } else {
        this.$message.error(res.message);
        this.list = []
        this.loadingResult = false;
      }
    },

    uploadFail(err) {
      this.$message.error(err.message);
      this.loadingResult = false;
      this.clearFiles();
    },

    clearFiles() {
      this.fileName = '';
      this.fileList = [];
      if (this.$refs.upload) this.$refs.upload.clearFiles()
    },

    onClose() {
      this.clearFiles();
      this.showImportResult = false;
    },
  },
}
</script>

<style lang="scss" scoped>
.batch-dialog {
  .kuang1 {
    width: 60%;
    height: 40px;
    line-height: 40px;
    background: rgba(255, 255, 255, 1);
    background-blend-mode: normal;
    border: 1px solid rgba(217, 225, 236, 1);
    border-radius: 4px;
    mix-blend-mode: normal;
    .text-style2 {
      color: rgba(112, 112, 112, 1);
      font-size: 16px;
    }
  }
  .text-style3 {
    color: rgba(112, 112, 112, 1);
    font-size: 16px;
    // width: 60%;
    margin-left: 14%;
  }
  .import-result{
    border: 1px solid rgba(217, 225, 236, 1);
    border-radius: 4px;
    width: calc(60% + 98px);
  }
  .result-title{
    color: rgba(19, 21, 35, 1);
    font-size: 16px;
    line-height: 22px;
    text-align: center;
  }
  .result-list {
    max-height: 500px;
    overflow: auto;
  }
}

</style>