skl-admin/admin-frame/src/components/exports.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>
    <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="请选输入导出文件名"></el-input>
        <div style="margin: 30px 0;"></div>
      </div>
      <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: '' }
  },
  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(['exports', 'progressInfo']),
    // 点击上传按钮
    upload() {
      this.dialogVisible = true;
    },
    // 确定
    async uploadFile() {
      this.dialogVisible = false;
      this.summary = null;
      const res = await this.exports({ type: this.type, fileType: this.fileType });
      if (res && !res.errcode) {
        this.progress = true;
        this.timeout(res.taskId);
      } else {
        this.$message.error(res.errmsg);
      }
    },
    timeout(res) {
      const Interval = setTimeout(async () => {
        const info = await this.progressInfo({ taskId: res });
        console.log(info);
        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);
            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/importandexport/handle/exportsDownload?fileName=${this.typeName}&taskId=${this.id}`);
    },
    // 关闭窗口
    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>