田源
2023-06-27 14c6b513f25fad2546d2e4366b73d220777c5624
Source/UBCS-WEB/src/components/BatchImport/index.vue
@@ -12,12 +12,24 @@
        {{ item }}
      </li>
    </ul>
    <div class="radio_box">
    <div class="radio_box" v-show="currentTypeObj[type]['upParams'] === 'classifyAttr'">
      <span>分类的路径使用的属性:</span>
      <el-radio-group v-model="classifyAttr">
        <el-radio label="id">分类编号</el-radio>
        <el-radio label="name">分类名称</el-radio>
      </el-radio-group>
    </div>
    <div style="margin-top: 20px;" v-if="showCodeApply && type === 'batchImportApply'">
      <Divider text="编码规则的码段信息,请先选择后再导入" left="30px"></Divider>
      <FormTemplate
        style="margin-top: 30px;"
        type="add"
        :selfColumnType="selfColumnType"
        :selfColumnConfig="selfColumnConfig"
        ref="CodeApply"
        @getFormData="getCodeApplyFormData"
        @referConfigDataUpdate="referConfigDataUpdate"
      ></FormTemplate>
    </div>
    <Divider text="excel文件,选择文件后会自动上传" left="30px"></Divider>
    <el-upload
@@ -30,10 +42,7 @@
      :on-success="onSuccess"
      :show-file-list="false"
      :on-change="uploadChange"
      :data="{
        codeClassifyOid: this.codeClassifyOid,
        classifyAttr: this.classifyAttr,
      }"
      :data="upParams"
    >
      <el-button size="small" type="primary"
        ><i class="el-icon-upload"></i> 点击上传</el-button
@@ -51,11 +60,12 @@
    </template>
    <ShowImportData
      :visible.sync="showVisible"
      v-if="dialogVisible"
      v-if="showVisible"
      :leftTree="leftTree"
      :classifyAttr="classifyAttr"
      :codeClassifyOid="codeClassifyOid"
      :redisOid="redisOid"
      :type="type"
    ></ShowImportData>
  </el-dialog>
</template>
@@ -65,12 +75,16 @@
import {
  downloadHistoryImportTemplate,
  downloadErrorFile,
  getHistoryLeftTree
  getHistoryLeftTree,
  downloadBatchImportApplyTemplate
} from "../../api/batchImport/index";
import FormTemplate from "../FormTemplate/FormTemplate.vue";
import { getToken } from "@/util/auth";
import codeApply from '@/mixins/codeApply.js'
export default {
  name: "BatchImport",
  components: { ShowImportData },
  mixins: [codeApply],
  components: { ShowImportData, FormTemplate },
  props: {
    visible: {
      type: Boolean,
@@ -89,17 +103,6 @@
      default: "",
    },
  },
  data() {
    return {
      classifyAttr: "id",
      uploadParams: {},
      downloadLoading: false,
      showVisible: false,
      leftTree: [],
      redisOid:'',
      pageLoading: null
    };
  },
  computed: {
    uploadHeaders() {
      return {
@@ -114,44 +117,94 @@
        this.$emit("update:visible", val);
      },
    },
    title() {
      return this.currentTypeObj[this.type]['title']
    },
    tipList() {
      return this.currentTypeObj[this.type]['tipList']
    },
    downloadTemplateApi() {
      return this.currentTypeObj[this.type]['downloadTemplateFun']
    },
    action() {
      return this.currentTypeObj[this.type]['action']
    },
    upParams() {
      if (this.type === 'historyImport') {
        return {
        codeClassifyOid: this.codeClassifyOid,
        classifyAttr: this.classifyAttr,
      }
      } else if(this.type === 'batchImportApply') {
        return {
          codeClassifyOid: this.codeClassifyOid,
          secDTOList: this.secDTOList,
          ...this.codeApplyForm
        }
      }
    }
  },
  data() {
    return {
      classifyAttr: "id",
      downloadLoading: false,
      showVisible: false,
      leftTree: [],
      redisOid: "",
      pageLoading: null,
      currentTypeObj: {
        historyImport: {
          title: "历史数据导入",
          tipList: [
            "1.标题带五角星的表示关键属性,带星号表示必输项",
            "2.企业编码,集团码和状态都需要导入",
            "3.每次仅能最多导入10000条数据,如果出错会返回错误的数据和原因,但是正确的数据会保存",
            "4.分类的路径需要用#分隔。仅填写当前选的分类树上的下级分类的路径,如果当前分类已经是叶子节点,则不填写",
          ],
          action: "/api/ubcs-code/mdmEngineController/batchImportHistoryData",
          downloadTemplateFun: downloadHistoryImportTemplate,
          upParams: 'classifyAttr'
        },
        batchImportApply: {
          title: "批量申请编码",
          tipList: [
            "1.标题带五角星的表示关键属性,带星号表示必输项",
            "2.请一定先选择/输入编码规则的码段值后再选择excel文件",
            "3.每次仅能最多导入10000条数据,如果出错会返回错误的数据和原因,但是正确的数据会保存",
            "4.如果属性为参照,在参照配置中设置多个属性时,优先使用name属性的值,否则填写第一个属性的值。",
          ],
          action: "/api/ubcs-code/mdmEngineController/batchImportCode",
          downloadTemplateFun: downloadBatchImportApplyTemplate,
          upParams: false
        }
      },
    };
  },
  methods: {
    getDataByType() {
      if (this.type === "historyImport") {
        this.title = "历史数据导入";
        this.tipList = [
          "1.标题带五角星的表示关键属性,带星号表示必输项",
          "2.企业编码,集团码和状态都需要导入",
          "3.每次仅能最多导入10000条数据,如果出错会返回错误的数据和原因,但是正确的数据会保存",
          "4.分类的路径需要用#分隔。仅填写当前选的分类树上的下级分类的路径,如果当前分类已经是叶子节点,则不填写",
        ];
        this.action =
          "/api/ubcs-code/mdmEngineController/batchImportHistoryData";
      } else if (this.type === "codeApply") {
        this.title = "批量编码申请";
        this.tipList = [
          "1.标题带五角星的表示关键属性,带星号表示必输项",
          "2.分类的路径需要用#分隔。从当前选择分类节点的下级开始填写,直到最末尾节点,如 产品#主机产品#主机产品",
        ];
      }
    },
    beforeUpload(file) {
    async beforeUpload(file) {
      console.log(223344);
      const fileType = file.name.split(".").pop();
      if (fileType !== "xlsx" && fileType !== "xls") {
        // 上传格式不符合要求,提示错误信息并取消上传
        this.$message.error("只允许上传xlsx、xls格式的文件");
        return false;
        return Promise.reject(false)
      }
      if (this.type === 'batchImportApply') {
        const flag = await this.$refs.CodeApply.validate()
        if (!flag) {
          return Promise.reject(false)
        }
      }
      return true;
    },
    // 下载导入模板
    downloadTemplateFun() {
      this.downloadLoading = true;
      downloadHistoryImportTemplate({
      this.downloadTemplateApi({
        codeClassifyOid: this.codeClassifyOid,
      })
        .then((res) => {
          this.$utilFunc.downloadFileByBlob(res.data, "历史数据导入模板.xls");
          this.$utilFunc.downloadFileByBlob(res.data, this.title + "模板.xls");
          this.downloadLoading = false;
        })
        .catch(() => {
@@ -159,7 +212,7 @@
        });
    },
    onSuccess(res) {
      let fileName = res.data.filePath.split('/').pop()
      let fileName = res.data.filePath.split("/").pop();
      if (res.data.fileOid) {
        this.$message.error("请下载错误信息文件进行查看!");
        downloadErrorFile({ uuid: res.data.fileOid }).then((res2) => {
@@ -167,39 +220,33 @@
        });
      }
      if (res.data.redisUuid) {
        this.redisOid = res.data.redisUuid
        getHistoryLeftTree(res.data.redisUuid).then(res => {
          this.leftTree = res.obj.map(item => {
        this.redisOid = res.data.redisUuid;
        getHistoryLeftTree(res.data.redisUuid).then((res) => {
          this.leftTree = res.obj.map((item) => {
            return {
              ...item.codeClassifyTemplateVO,
              cloNamesList: item.cloNamesList
            }
          })
          this.showVisible = true
        })
              cloNamesList: item.cloNamesList,
            };
          });
          this.showVisible = true;
        });
      }
    },
    uploadChange(file) {
      if (file.status === 'ready') {
      if (file.status === "uploadin") {
        this.pageLoading = this.$loading({
          lock: true,
          text: '文件上传中',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
          text: "文件上传中",
          spinner: "el-icon-loading",
          background: "rgba(0, 0, 0, 0.7)",
        });
      }
      if (file.status === 'success' || file.status === 'error') {
        this.pageLoading.close()
      if (file.status === "success" || file.status === "error") {
        this.pageLoading.close();
      }
    }
    },
  },
  watch: {
    visible: {
      immediate: true,
      handler() {
        this.getDataByType();
      },
    },
  },
};
</script>
@@ -207,7 +254,7 @@
<style lang="scss" scoped>
ul {
  color: rgb(188, 188, 188);
  margin: 20px 0 0 0;
  margin: 20px 0 20px 0;
  padding: 0;
  padding-left: 30px;
  list-style: none;
@@ -218,7 +265,7 @@
}
.radio_box {
  padding-left: 30px;
  margin: 20px 0 25px 0;
  margin: 0px 0 25px 0;
  display: flex;
  align-items: center;
  span {
@@ -229,4 +276,7 @@
  padding-left: 30px;
  margin-top: 30px;
}
/deep/ .no-print {
  display: none !important;
}
</style>