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

@@ -1,85 +1,154 @@
<template>

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

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

    <ul>

      <li v-for="(item, index) in tipInfo" :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"

    >

      <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">下载导入模板</el-button>

      <el-button size="small">关闭</el-button>

    </template>

  </el-dialog>

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

</template>



<script>

import { downloadTemplate } from '../../api/batchImport/index'

import ShowImportData from "./ShowImportData.vue";

import {

  downloadHistoryImportTemplate,

  downloadErrorFile,

  importDataShow

} from "../../api/batchImport/index";

import { getToken } from "@/util/auth";

export default {

  name: "",

  name: "BatchImport",

  components: { ShowImportData },

  props: {

    title: {

      type: String,

      default: "批量申请编码",

    },

    tipInfo: {

      type: Array,

      default: () => [],

    },

    visible: {

      type: Boolean,

      default: false,

    },

    accept: {

      type: String,

      default: '.xlsx, .xls'

      default: ".xlsx, .xls",

    },

    codeClassifyOid: {

      type: String,

      default: ''

      default: "",

    },

    downloadTemplateFun: {

      type: Function

    }

    type: {

      type: String,

      default: "",

    },

  },

  data() {

    return {

      classType: "classCode",

      classifyAttr: "id",

      uploadParams: {},

      downloadLoading: false,

      showVisible: false,

    };

  },

  computed: {

    action() {

      console.log(process, 'process');

      return '/api/ubcs-code/mdmEngineController/mdmEngineController/batchTopImportCode'

    }

    uploadHeaders() {

      return {

        "Blade-Auth": "bearer " + getToken(),

      };

    },

  },

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

      const fileType = file.name.split('.').pop()

      if (fileType !== 'xlsx' && fileType !== 'xls') {

      const fileType = file.name.split(".").pop();

      if (fileType !== "xlsx" && fileType !== "xls") {

        // 上传格式不符合要求，提示错误信息并取消上传

        this.$message.error('只允许上传xlsx、xls格式的文件');

        this.$message.error("只允许上传xlsx、xls格式的文件");

        return false;

      }

      return true;

    },

    // 下载导入模板

    downloadTemplateFun() {

      this.downloadLoading = true;

      downloadHistoryImportTemplate({

        codeClassifyOid: this.codeClassifyOid,

      })

        .then((res) => {

          this.downloadLoading = false;

          this.$utilFunc.downloadFileByBlob(res.data, "历史数据导入模板.xls");

        })

        .catch(() => {

          this.downloadLoading = false;

        });

    },

    onSuccess(res) {

      if (res.code === 400) {

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

      }

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

    },

  },

  watch: {

    visible: {

      immediate: true,

      handler() {

        this.getDataByType();

      },

    },

  },

};

</script>