vue-apps/com.actionsoft.apps.coe.pal.datamigration/src/components/Performance-import.vue

<template>
  <div class="data-import">
    <div class="top-box">
      <div class="title-box">流程属性导入</div>
      <div class="step-box">
        <el-steps :active="info.activeStep" finish-status="success">
          <el-step :title="item.title" v-for="item in info.steps" />
        </el-steps>
      </div>
    </div>
    <div class="bottom-box">
      <div class="empty-box" v-if="info.fileList.length === 0">
        <el-empty></el-empty>
        <div class="upload-box">
          <el-upload
              class="upload-demo"
              :action="info.uploadAction"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :before-remove="beforeRemove"
              :on-success="handleSuccess"
              :limit="1"
              :on-exceed="handleExceed"
              :show-file-list="false"
          >
            <el-button type="primary" @click="handleUploadBtn">导入Word文件</el-button>
            <template #tip>
              <div class="el-upload__tip">
                仅支持Word格式文本
              </div>
            </template>
          </el-upload>
        </div>
      </div>
      <div class="file-list-box" v-else>
        <el-scrollbar height="400px">
          <div v-for="item in info.fileList" :key="item" class="scrollbar-demo-item">
            <div>{{ item.name }}</div>
          </div>
        </el-scrollbar>
      </div>
      <div class="action-box">
        <el-button style="cursor: pointer" type="primary" @click="next">下一步</el-button>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent,getCurrentInstance,reactive,ref } from 'vue';

export default defineComponent({
  name: "performance-import",
  setup() {
    const { proxy: $this } = getCurrentInstance();
    let info = reactive({
      activeStep: 0,
      steps: [{title:"上传"},{title:"校验"},{title:"结果"}],
      fileList: [],
      uploadAction: '',
      repositoryName: 'migration',
      groupValue: 'yili',
      fileValue: '',
      appId: 'com.actionsoft.apps.coe.pal.datamigration',
      fileName: ''
    });
    const handlePreview = () => {}
    const handleRemove = () => {}
    const beforeRemove = () => {}
    const handleExceed = () => {}
    const handleSuccess = (res: any,uploadFile: any,uploadFiles: any) => {
      console.log(res,'---',uploadFile,'----',uploadFiles)
      info.fileName = res.files.name
      let tempFileObj = {id: uploadFile.uid,name: res.files.name,downloadUrl: res.data.data.attrs.downloadUrl}
      info.fileList.push(tempFileObj)
      console.info('fileList',info.fileList)
    }
    const next = () => {
      if (info.fileList.length === 0) {
        $this.$message({type:'warning',message:'请上传文件'});
        return;
      }
      let param = {
        url: './jd',
        data: {
          cmd: 'com.actionsoft.apps.coe.pal.performanceImport_process_attribute_import',
          sid: settingParam.sessionId,
          wsId: settingParam.wsId ? settingParam.wsId : '6f4e292c-1b90-4dd2-8c20-7da159cb20a5',
          groupValue: info.groupValue,
          fileValue: info.fileValue,
          fileName: info.fileName
        }
      }
      $this.awsuiaxios.post(param)
          .then((ro: any) => {
            console.log(ro)
            if (ro.result === 'ok') {
              $this.$message({type:'warning',message:'流程数据导入成功'});
            }
          })
          .catch((err: any) => {})
    }
    const handleUploadBtn = () => {
      info.fileValue = 'performanceType' + new Date().getTime()
      info.uploadAction = axiosBaseUrl +'uf?sid='+settingParam.sessionId+'&repositoryName='+info.repositoryName+'&groupValue='
          + info.groupValue+'&fileValue='+info.fileValue+'&appId='+ info.appId;
    }
    return {
      info,
      handlePreview,
      handleRemove,
      beforeRemove,
      handleExceed,
      handleUploadBtn,
      handleSuccess,
      next
    }
  }
})
</script>

<style  lang="less" scoped>
.data-import {
  width: 100%;
  height: 100%;
  background-color: #F7F7FB;
.top-box {
  height: 75px;
  margin: 0 35px 0 35px;
  display: flex;
  justify-content: space-between;
.title-box {
  line-height: 75px;
  font-size: 18px;
}
.step-box {
  width: 45%;
  padding: 15px 0;
}
}
.bottom-box {
  height: 650px;
  margin: 0 35px 0 35px;
  background-color: rgb(255,255,255);
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-direction: column;
.empty-box {
  width: 500px;
  height: 500px;
.upload-box {
  text-align: center;
}
}
.file-list-box {
  width: 100%;
:deep(.el-scrollbar) {
  padding: 0 25px;
}
.scrollbar-demo-item {
  font-size: 16px;
  height: 35px;
  margin: 10px;
  border-radius: 4px;
  background: var(--el-color-primary-light-9);
  color: var(--el-color-primary);
  line-height: 35px;
}
}
}
}
</style>