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

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,192 @@
<template>

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

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

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

  </el-dialog>

</template>



<script>

import ShowImportData from "./ShowImportData.vue";

import {

  downloadHistoryImportTemplate,

  downloadErrorFile,

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

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

export default {

  name: "BatchImport",

  components: { ShowImportData },

  props: {

    visible: {

      type: Boolean,

      default: false,

    },

    accept: {

      type: String,

      default: ".xlsx, .xls",

    },

    codeClassifyOid: {

      type: String,

      default: "",

    },

    type: {

      type: String,

      default: "",

    },

  },

  data() {

    return {

      classifyAttr: "id",

      uploadParams: {},

      downloadLoading: false,

      showVisible: false,

    };

  },

  computed: {

    uploadHeaders() {

      return {

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

      };

    },

    dialogVisible: {

      get() {

        return this.visible;

      },

      set(val) {

        this.$emit("update:visible", val);

      },

    },

  },

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

        // ä¸Šä¼ æ ¼å¼ä¸ç¬¦åˆè¦æ±‚，提示错误信息并取消上传

        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>



<style lang="scss" scoped>

ul {

  color: rgb(188, 188, 188);

  margin: 20px 0 0 0;

  padding: 0;

  padding-left: 30px;

  list-style: none;

  li {

    margin-bottom: 5px;

    font-size: 12px;

  }

}

.radio_box {

  padding-left: 30px;

  margin: 20px 0 25px 0;

  display: flex;

  align-items: center;

  span {

    margin-right: 20px;

  }

}

.upload {

  padding-left: 30px;

  margin-top: 30px;

}

</style>