Source/UBCS-WEB/src/components/BatchImport/index.vue

@@ -1,51 +1,73 @@
<template>

  <div>

    <el-dialog :title="title" :visible="visible" append-to-body>

      <Divider text="导入提示" left="30px"></Divider>

      <ul>

        <li v-for="(item, index) in tipList" :key="index">

          {{ item }}

        </li>

      </ul>

      <div class="radio_box">

        <span>分类的路径使用的属性:</span>

        <el-radio-group v-model="classifyAttr">

          <el-radio label="id">分类编号</el-radio>

          <el-radio label="name">分类名称</el-radio>

        </el-radio-group>

      </div>

      <Divider text="excel文件，选择文件后会自动上传" left="30px"></Divider>

      <el-upload

        class="upload"

        :accept="accept"

        :action="action"

        :before-upload="beforeUpload"

        :on-exceed="handleExceed"

        :headers="uploadHeaders"

        :on-success="onSuccess"

        :show-file-list="false"

        :data="{

          codeClassifyOid: this.codeClassifyOid,

          classifyAttr: this.classifyAttr,

        }"

  <el-dialog

    v-if="dialogVisible"

    :title="title"

    :visible.sync="dialogVisible"

    append-to-body

    v-dialogDrag

  >

    <Divider text="导入提示" left="30px"></Divider>

    <ul>

      <li v-for="(item, index) in tipList" :key="index">

        {{ item }}

      </li>

    </ul>

    <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

      class="upload"

      :accept="accept"

      :action="action"

      :before-upload="beforeUpload"

      :on-exceed="handleExceed"

      :headers="uploadHeaders"

      :on-success="onSuccess"

      :show-file-list="false"

      :on-change="uploadChange"

      :data="upParams"

    >

      <el-button size="small" type="primary"

        ><i class="el-icon-upload"></i> 点击上传</el-button

      >

        <el-button size="small" type="primary"

          ><i class="el-icon-upload"></i> 点击上传</el-button

        >

      </el-upload>

      <template #footer>

        <el-button

          type="primary"

          size="small"

          @click="downloadTemplateFun"

          :loading="downloadLoading"

          >下载导入模板</el-button

        >

        <el-button size="small" @click="visible = false">关闭</el-button>

      </template>

    </el-dialog>

    <ShowImportData :visible="showVisible" v-if="showVisible"></ShowImportData>

  </div>

    </el-upload>

    <template #footer>

      <el-button

        type="primary"

        size="small"

        @click="downloadTemplateFun"

        :loading="downloadLoading"

        >下载导入模板</el-button

      >

      <el-button size="small" @click="dialogVisible = false">关闭</el-button>

    </template>

    <ShowImportData

      :visible.sync="showVisible"

      v-if="showVisible"

      :leftTree="leftTree"

      :classifyAttr="classifyAttr"

      :codeClassifyOid="codeClassifyOid"

      :redisOid="redisOid"

      :type="type"

    ></ShowImportData>

  </el-dialog>

</template>



<script>

@@ -53,11 +75,16 @@
import {

  downloadHistoryImportTemplate,

  downloadErrorFile,

  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,

@@ -69,20 +96,12 @@
    },

    codeClassifyOid: {

      type: String,

      default: "535FC9B6-FE27-241F-5FCA-ED4DC17CF95B",

      default: "",

    },

    type: {

      type: String,

      default: "",

    },

  },

  data() {

    return {

      classifyAttr: "id",

      uploadParams: {},

      downloadLoading: false,

      showVisible: false,

    };

  },

  computed: {

    uploadHeaders() {

@@ -90,64 +109,144 @@
        "Blade-Auth": "bearer " + getToken(),

      };

    },

    dialogVisible: {

      get() {

        return this.visible;

      },

      set(val) {

        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({

        codeClassifyOid: "535FC9B6-FE27-241F-5FCA-ED4DC17CF95B",

      this.downloadTemplateApi({

        codeClassifyOid: this.codeClassifyOid,

      })

        .then((res) => {

          this.$utilFunc.downloadFileByBlob(res.data, this.title + "模板.xls");

          this.downloadLoading = false;

          console.log(res);

        })

        .catch(() => {

          this.downloadLoading = false;

        });

    },

    onSuccess(res) {

      if (res.code === 400) {

        this.$message.error(`${res.msg}，请下载错误信息进行查看！`);

      let fileName = res.data.filePath.split("/").pop();

      if (res.data.fileOid) {

        this.$message.error("请下载错误信息文件进行查看！");

        downloadErrorFile({ uuid: res.data.fileOid }).then((res2) => {

          this.$utilFunc.downloadFileByBlob(res2.data, fileName);

        });

      }

      downloadErrorFile({ uuid: res.data.fileOid });

      if (res.data.redisUuid) {

        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;

        });

      }

    },

    uploadChange(file) {

      if (file.status === "uploadin") {

        this.pageLoading = this.$loading({

          lock: true,

          text: "文件上传中",

          spinner: "el-icon-loading",

          background: "rgba(0, 0, 0, 0.7)",

        });

      }

      if (file.status === "success" || file.status === "error") {

        this.pageLoading.close();

      }

    },

  },

  watch: {

    visible: {

      immediate: true,

      handler() {

        this.getDataByType();

      },

    },

  },

};

</script>

@@ -155,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;

@@ -166,7 +265,7 @@
}

.radio_box {

  padding-left: 30px;

  margin: 20px 0 25px 0;

  margin: 0px 0 25px 0;

  display: flex;

  align-items: center;

  span {

@@ -177,4 +276,7 @@
  padding-left: 30px;

  margin-top: 30px;

}

/deep/ .no-print {

  display: none !important;

}

</style>