skl-admin/admin-frame/src/components/upload.vue

<template>
  <div class="upload_box">
    <el-button :disabled="existence" type="text" @click="upload"><i class="el-dropdown-link el-icon-download"></i>{{ typeName || '文件导入' }}</el-button>
    <input type="file" @change="fileChang" class="filesName" />
    <el-dialog :close-on-click-modal="false" :title="typeName" :visible.sync="dialogVisible" width="400px" @close="closes">
      <div>
        <el-input size="small" v-model="fileName" placeholder="请选择数据文件" disabled>
          <el-button slot="append" @click="selectFile">选择文件</el-button>
        </el-input>
        <div style="margin: 30px 0;"></div>
        <!-- <label v-if="strategy">数据处理策略：</label>
        <el-radio v-if="strategy" v-model="option" label="skip">跳过</el-radio>
        <el-radio v-if="strategy" v-model="option" label="overwrite">覆盖</el-radio> -->
      </div>
      <el-dropdown slot="footer" class="left-footer" size="small" trigger="click" @command="templates" v-if="template">
        <span class="el-dropdown-link"> 下载数据模板<i class="el-icon-arrow-down el-icon--right"></i> </span>
        <el-dropdown-menu slot="dropdown">
          <!-- <el-dropdown-item command="csv">文本文件(.csv)</el-dropdown-item> -->
          <el-dropdown-item command="excel">Excel文件(.xls)</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogVisible = false">取 消</el-button>
        <el-button size="small" type="primary" @click="uploadFile">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog :close-on-click-modal="false" :title="successDate ? '数据导入进度' : '数据导入结果'" :visible.sync="progress" width="400px">
      <!-- 显示进度 -->
      <div v-if="successDate">
        <h3>{{ typeName }}</h3>
        <div style="margin: 30px 0;"></div>
        <el-progress :percentage="percentage"></el-progress>
        <div style="margin: 30px 0;"></div>
      </div>
      <!-- 显示成功后信息下载日志 -->
      <div v-else>
        <h3 class="success">{{ summary }}</h3>
        <div style="margin: 30px 0;"></div>
        <!-- <span slot="footer" class="dialog-footer">
          <el-button type="text" @click="btn">数据导入日志下载</el-button>
        </span> -->
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { mapActions } from 'vuex';
export default {
  props: {
    // 数据导入类型 (user,vip)
    type: String,
    // 业务名称
    typeName: { type: String, default: '' },
    template: { type: Boolean, default: true },
    strategy: { type: Boolean, default: true }
  },
  data() {
    return {
      // 下载文件类型
      fileType: 'excel',
      // 选择信息弹出
      dialogVisible: false,
      // 按钮禁用
      existence: false,
      // 进度
      percentage: 0,
      // 上传前选择
      option: 'overwrite',
      // 进度弹出
      progress: false,
      // 成功后切换
      successDate: true,
      // 成功后文字
      summary: null,
      // 任务id
      id: null,
      // 导入模板命名
      fileName: null,
      // 文件流
      file: null
    };
  },
  methods: {
    ...mapActions(['uploads', 'progressInfo']),
    // 点击上传按钮
    upload() {
      this.dialogVisible = true;
    },
    // 选择完弹出信息确定
    selectFile() {
      document.getElementsByClassName('filesName')[0].value = '';
      document.getElementsByClassName('filesName')[0].click();
    },
    // 选择文件改变
    async fileChang() {
      this.file = document.getElementsByClassName('filesName')[0].files[0];
      this.fileName = this.file.name;
    },
    // 文件上传
    async uploadFile() {
      if (this.file == null) {
        this.$message.warning('请选择数据文件');
        return;
      }
      this.dialogVisible = false;
      this.summary = null;
      // 上传文件获取任务id参数format  this.progress = true;弹出进度窗口成功后提示成功 切换显示成功后信息successDate = false
      const data = new FormData();
      data.append('file', this.file);
      data.append('type', this.type);
      data.append('option', this.option);
      const res = await this.uploads(data);
      if (res && !res.errcode) {
        this.progress = true;
        this.timeout(res.taskId);
      } else {
        document.getElementsByClassName('filesName')[0].value = '';
        this.$message.error(res.errmsg);
      }
    },
    timeout(res) {
      const Interval = setTimeout(async () => {
        const info = await this.progressInfo({ taskId: res });
        if (info && info.status !== 'error') {
          this.percentage = info.progress || 0;
          if (info.progress == 100) {
            this.id = info.taskId;
            this.successDate = false;
            this.summary = '导入成功';
            clearInterval(Interval);
            document.getElementsByClassName('filesName')[0].value = '';
            this.$emit('refreshData');
            this.percentage = 0;
          } else {
            this.timeout(info.taskId);
          }
        } else {
          clearInterval(Interval);
          this.$message.error(info?.errmsg || '错误');
        }
      }, 1000);
    },
    // 详情下载
    async btn() {
      window.open(`/api/xms/task/${this.id}/log?fileName=${this.typeName}日志`);
    },
    // 上传模板下载
    async templates(fileType) {
      // type 上传类型（user,vip）、fileType文件类型（现在只有excel）、fileName文件名称
      window.open(`/api/importandexport/handle/template?type=${this.type}&fileType=${fileType}&fileName=${this.typeName}模板`);
    },
    // 关闭窗口
    closes() {
      this.successDate = true;
      this.file = null;
      this.fileName = null;
      this.$emit('closes');
    }
  }
};
</script>
<style lang="scss" scoped>
input {
  display: none;
}
.el-button--text {
  padding: 0;
}
.upload_box {
  line-height: 0;
}
.success {
  width: 100%;
  color: #67c23a;
}
.error {
  width: 100%;
  color: #f56c6c;
}
.jump {
  width: 100%;
  color: #e6a23c;
}
.left-footer {
  float: left;
  margin-top: 10px;
}
</style>