主题库导入 导出功能

 Source/UBCS-WEB/src/api/GetItem.js

@@ -75,3 +75,4 @@
    data
  })
}


 Source/UBCS-WEB/src/api/template/templateAttr.js

@@ -58,13 +58,7 @@
  })
}

export const  importClassify = (data) =>{
  return request({
    url:'/api/ubcs-code/codeClassify/importClassify',
    method: 'post',
    data:data
  })
}


//主键获取分类模板属性
export const  gridCodeClassifyTemplate = (params) =>{
@@ -227,6 +221,33 @@
    }
  })
}

//导入
export const  importClassify = (data) =>{
  return request({
    url:'/api/ubcs-code/codeClassify/importClassify',
    method: 'post',
    data:data
  })
}
//主题库导入下载错误信息
export const  downloadErrorFile = (params) =>{
  return request({
    url:'/api/ubcs-code/codeClassify/downloadErrorFile',
    method: 'get',
    responseType: 'blob',
    params:{
      ...params
    }
  })
}
//下载模板
export const downloadBatchImportApplyTemplate = (params) => {
  return request({
    url: '/api/ubcs-code/mdmEngineController/downloadImportExcel',
    method: 'get',
    params,
    responseType: 'blob'
  })
}



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

@@ -1,334 +1,336 @@
<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"

      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 && currentTypeObj[type]['upParams'] === 'codeApply'"

    >

      <Divider

        text="编码规则的码段信息，请先选择后再导入"

        left="30px"

      ></Divider>

      <FormTemplate

        v-loading="!showCodeApply"

        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"

      :on-error="onError"

      :show-file-list="false"

      :on-change="uploadChange"

      :data="upParams"

    >

      <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="dialogVisible = false">关闭</el-button>

    </template>

    <ShowImportData

      :visible.sync="showVisible"

      v-if="showVisible"

      :leftTree="leftTree"

      :classifyAttr="classifyAttr"

      :codeClassifyOid="codeClassifyOid"

      :redisOid="redisOid"

      :type="type"

      :title="title"

      :secDTOList="secDTOList"

      :resetTable="resetTable"

    ></ShowImportData>

  </el-dialog>

</template>



<script>

import ShowImportData from "./ShowImportData.vue";

import {

  downloadHistoryImportTemplate,

  downloadErrorFile,

  importDataShow,

  downloadBatchImportApplyTemplate,

  downloadBatchApplyCodeTemplate,

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

  mixins: [codeApply],

  components: { ShowImportData, FormTemplate },

  props: {

    visible: {

      type: Boolean,

      default: false,

    },

    accept: {

      type: String,

      default: ".xlsx, .xls",

    },

    codeClassifyOid: {

      type: String,

      default: "",

    },

    type: {

      type: String,

      default: "",

    },

    resetTable: Function

  },

  computed: {

    uploadHeaders() {

      return {

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

      console.log(this.currentTypeObj[this.type], "this.type");

      return this.currentTypeObj[this.type]["downloadTemplateFun"];

    },

    action() {

      return this.currentTypeObj[this.type]["action"];

    },

    upParams() {

      if (this.type === "historyImport" || this.type === "batchApplyCode") {

        return {

          codeClassifyOid: this.codeClassifyOid,

          classifyAttr: this.classifyAttr,

        };

      } else if (this.type === "batchImportApply") {

        // eslint-disable-next-line vue/no-side-effects-in-computed-properties

        this.secDTOList = this.localSecVOList.map((item) => {

          return {

            secOid: item.oid,

            secValue: this.codeApplyForm[item.oid],

          };

        });

        return {

          codeClassifyOid: this.codeClassifyOid,

          secDTOList: JSON.stringify(this.secDTOList),

          ...this.codeApplyForm,

        };

      }

    },

  },

  data() {

    return {

      classifyAttr: "id",

      downloadLoading: false,

      showVisible: false,

      leftTree: [],

      redisOid: "",

      pageLoading: null,

      showCodeApply: true,

      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: "codeApply",

        },

        batchApplyCode: {

          title: "批量申请编码",

          tipList: [

            "1.标题带五角星的表示关键属性，带星号表示必输项",

            "2.分类的路径需要用#分隔。从当前选择分类节点的下级开始填写，直到最末尾节点，如 产品#主机产品#主机产品",

          ],

          action: "/api/ubcs-code/mdmEngineController/batchTopImportCode",

          downloadTemplateFun: downloadBatchApplyCodeTemplate,

          upParams: "classifyAttr",

        },

      },

      secDTOList: [],

    };

  },

  methods: {

    async beforeUpload(file) {

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

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

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

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

        return Promise.reject(false);

      }

      if (this.type === "batchImportApply" && this.showCodeApply) {

        const flag = await this.$refs.CodeApply.validate();

        if (!flag) {

          return Promise.reject(false);

        }

      }

      this.pageLoading = this.$loading({

        lock: true,

        text: "文件上传中",

        spinner: "el-icon-loading",

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

      });

      return true;

    },

    // 下载导入模板

    downloadTemplateFun() {

      this.downloadLoading = true;

      this.downloadTemplateApi({

        codeClassifyOid: this.codeClassifyOid,

      })

        .then((res) => {

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

          this.downloadLoading = false;

        })

        .catch(() => {

          this.downloadLoading = false;

        });

    },

    onSuccess(res) {

      if (Object.keys(res.data).length === 0) {

        this.$message.success(this.title + "导入成功！");

        this.dialogVisible = false;

        return;

      }

      if (res.data.fileOid) {

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

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

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

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

        });

      }

      if (res.data.redisUuid) {

        this.redisOid = res.data.redisUuid;

        importDataShow(res.data.redisUuid).then((res2) => {

          this.leftTree = res2.data.data.map((item) => {

            if (this.type === 'batchApplyCode') {

              return {

                cloNamesList: item.cloNamesList,

                oid: item.codeTemplateOid,

                codeClassifyOid: item.codeClassifyOid,

                codeRuleOid: item.codeRuleOid,

                name: item.codeRuleVO.name

              }

            } else {

              return {

              ...item.codeClassifyTemplateVO,

              cloNamesList: item.cloNamesList,

              codeClassifyOid: item.codeClassifyTemplateVO.codeclassifyoid

            };

            }

          });

          this.showVisible = true;

        });

      }

    },

    onError(err) {

      console.log(err, "err");

      this.pageLoading.close();

    },

    uploadChange(file) {

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

        this.pageLoading.close();

      }

    },

  },

  watch: {},

};

</script>



<style lang="scss" scoped>

ul {

  color: rgb(188, 188, 188);

  margin: 20px 0 20px 0;

  padding: 0;

  padding-left: 30px;

  list-style: none;

  li {

    margin-bottom: 5px;

    font-size: 12px;

  }

}

.radio_box {

  padding-left: 30px;

  margin: 0px 0 25px 0;

  display: flex;

  align-items: center;

  span {

    margin-right: 20px;

  }

}

.upload {

  padding-left: 30px;

  margin-top: 30px;

}

/deep/ .no-print {

  display: none !important;

}

</style>

<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"
      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 && currentTypeObj[type]['upParams'] === 'codeApply'"
    >
      <Divider
        text="编码规则的码段信息，请先选择后再导入"
        left="30px"
      ></Divider>
      <FormTemplate
        v-loading="!showCodeApply"
        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"
      :on-error="onError"
      :show-file-list="false"
      :on-change="uploadChange"
      :data="upParams"
    >
      <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="dialogVisible = false">关闭</el-button>
    </template>
    <ShowImportData
      :visible.sync="showVisible"
      v-if="showVisible"
      :leftTree="leftTree"
      :classifyAttr="classifyAttr"
      :codeClassifyOid="codeClassifyOid"
      :redisOid="redisOid"
      :type="type"
      :title="title"
      :secDTOList="secDTOList"
      :resetTable="resetTable"
    ></ShowImportData>
  </el-dialog>
</template>

<script>
import ShowImportData from "./ShowImportData.vue";
import {
  downloadHistoryImportTemplate,
  downloadErrorFile,
  importDataShow,
  downloadBatchImportApplyTemplate,
  downloadBatchApplyCodeTemplate,
} 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",
  mixins: [codeApply],
  components: { ShowImportData, FormTemplate },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    accept: {
      type: String,
      default: ".xlsx, .xls",
    },
    codeClassifyOid: {
      type: String,
      default: "",
    },
    type: {
      type: String,
      default: "",
    },
    resetTable: Function
  },
  computed: {
    uploadHeaders() {
      return {
        "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() {
      console.log(this.currentTypeObj[this.type], "this.type");
      return this.currentTypeObj[this.type]["downloadTemplateFun"];
    },
    action() {
      return this.currentTypeObj[this.type]["action"];
    },
    upParams() {
      if (this.type === "historyImport" || this.type === "batchApplyCode") {
        return {
          codeClassifyOid: this.codeClassifyOid,
          classifyAttr: this.classifyAttr,
        };
      } else if (this.type === "batchImportApply") {
        // eslint-disable-next-line vue/no-side-effects-in-computed-properties
        this.secDTOList = this.localSecVOList.map((item) => {
          return {
            secOid: item.oid,
            secValue: this.codeApplyForm[item.oid],
          };
        });
        return {
          codeClassifyOid: this.codeClassifyOid,
          secDTOList: JSON.stringify(this.secDTOList),
          ...this.codeApplyForm,
        };
      }
    },
  },
  data() {
    return {
      classifyAttr: "id",
      downloadLoading: false,
      showVisible: false,
      leftTree: [],
      redisOid: "",
      pageLoading: null,
      showCodeApply: true,
      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: "codeApply",
        },
        batchApplyCode: {
          title: "批量申请编码",
          tipList: [
            "1.标题带五角星的表示关键属性，带星号表示必输项",
            "2.分类的路径需要用#分隔。从当前选择分类节点的下级开始填写，直到最末尾节点，如 产品#主机产品#主机产品",
          ],
          action: "/api/ubcs-code/mdmEngineController/batchTopImportCode",
          downloadTemplateFun: downloadBatchApplyCodeTemplate,
          upParams: "classifyAttr",
        },
      },
      secDTOList: [],
    };
  },
  methods: {
    async beforeUpload(file) {
      const fileType = file.name.split(".").pop();
      if (fileType !== "xlsx" && fileType !== "xls") {
        // 上传格式不符合要求，提示错误信息并取消上传
        this.$message.error("只允许上传xlsx、xls格式的文件");
        return Promise.reject(false);
      }
      if (this.type === "batchImportApply" && this.showCodeApply) {
        const flag = await this.$refs.CodeApply.validate();
        if (!flag) {
          return Promise.reject(false);
        }
      }
      this.pageLoading = this.$loading({
        lock: true,
        text: "文件上传中",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      return true;
    },
    // 下载导入模板
    downloadTemplateFun() {
      this.downloadLoading = true;
      this.downloadTemplateApi({
        codeClassifyOid: this.codeClassifyOid,
      })
        .then((res) => {
          this.$utilFunc.downloadFileByBlob(res.data, this.title + "模板.xls");
          this.downloadLoading = false;
        })
        .catch(() => {
          this.downloadLoading = false;
        });
    },
    onSuccess(res) {
      console.log('res',res)
      if (Object.keys(res.data).length === 0) {
        this.$message.success(this.title + "导入成功！");
        this.dialogVisible = false;
        return;
      }
      if (res.data.fileOid) {
        const fileName = res.data.filePath.split("/").pop();
        this.$message.error("请下载错误信息文件进行查看！");
        downloadErrorFile({ uuid: res.data.fileOid }).then((res2) => {
          console.log('res2',res2)
          this.$utilFunc.downloadFileByBlob(res2.data, fileName);
        });
      }
      if (res.data.redisUuid) {
        this.redisOid = res.data.redisUuid;
        importDataShow(res.data.redisUuid).then((res2) => {
          this.leftTree = res2.data.data.map((item) => {
            if (this.type === 'batchApplyCode') {
              return {
                cloNamesList: item.cloNamesList,
                oid: item.codeTemplateOid,
                codeClassifyOid: item.codeClassifyOid,
                codeRuleOid: item.codeRuleOid,
                name: item.codeRuleVO.name
              }
            } else {
              return {
              ...item.codeClassifyTemplateVO,
              cloNamesList: item.cloNamesList,
              codeClassifyOid: item.codeClassifyTemplateVO.codeclassifyoid
            };
            }
          });
          this.showVisible = true;
        });
      }
    },
    onError(err) {
      console.log(err, "err");
      this.pageLoading.close();
    },
    uploadChange(file) {
      if (file.status === "success" || file.status === "error") {
        this.pageLoading.close();
      }
    },
  },
  watch: {},
};
</script>

<style lang="scss" scoped>
ul {
  color: rgb(188, 188, 188);
  margin: 20px 0 20px 0;
  padding: 0;
  padding-left: 30px;
  list-style: none;
  li {
    margin-bottom: 5px;
    font-size: 12px;
  }
}
.radio_box {
  padding-left: 30px;
  margin: 0px 0 25px 0;
  display: flex;
  align-items: center;
  span {
    margin-right: 20px;
  }
}
.upload {
  padding-left: 30px;
  margin-top: 30px;
}
/deep/ .no-print {
  display: none !important;
}
</style>

 Source/UBCS-WEB/src/components/Master/MasterTransfer.vue

@@ -188,7 +188,7 @@
          exportCode({ codeClassifyOid: this.codeClassifyOid, ...this.exportArr, limit: this.limit, page: start, endPage: end }).then((res) => {
            // console.log('res',res)
            if (res) {
              func.downloadFileByBlob(res);
              func.downloadFileByBlobHandler(res);
              this.escHandler()
            }
          });

 Source/UBCS-WEB/src/components/Theme/ThemeClassifyTrees.vue

@@ -16,7 +16,7 @@
            <div style="display: flex; margin-top: 10px">
              <el-button plain size="small" type="primary" @click="Enable">启用</el-button>
              <el-button plain size="small" type="primary" @click="Deactivate">停用</el-button>
              <el-button plain size="small" type="primary" @click="ImportExcel">导入</el-button>
              <el-button plain size="small" type="primary" @click.native="ImportExcel">导入</el-button>
              <el-button plain size="small" type="primary" @click="ExportExcel">导出</el-button>
            </div>
          </div>
@@ -312,7 +312,7 @@
            </div>
          </div>
        </el-dialog>
          <ThemeImport :visible.sync="ThemeImportVisible"></ThemeImport>
          <ThemeImport :visible.sync="ThemeImportVisible" :codeClassifyOid="this.codeClassifyOid"></ThemeImport>
      </basic-container>
    </el-main>
  </el-container>
@@ -682,7 +682,7 @@
            label: '',
            prop: 'radio',
            width: 60,
            hide: false,
            display: false
          },
          {
            label: "模板编号",
@@ -731,11 +731,7 @@
  methods: {
    /** 导入 */
    ImportExcel(){
      // debugger
      // this.batchImportData.visible = true
      // this.batchImportData.codeClassifyOid = this.codeClassifyOid
      this.ThemeImportVisible=true;
      console.log('ThemeImportVisible',this.ThemeImportVisible)
    },
    /** 导出 */
    ExportExcel(){

 Source/UBCS-WEB/src/components/Theme/ThemeImport.vue

@@ -1,33 +1,160 @@
<template>
  <el-dialog
    title="主题库导入"
    title="主题库分类导入"
    :visible.sync="dialogVisible"
    append-to-body
    v-dialogDrag
  ></el-dialog>
  >
    <Divider text="导入提示" left="30px"></Divider>
    <ul>
      <li>
        1.红色字体表示必输项
      </li>
      <li>
        2.分类的路径需要用#分隔
      </li>
      <li>
        3.每次仅能最多导入10000条数据
      </li>
    </ul>
    <Divider text="excel文件，选择文件后会自动上传" left="30px"></Divider>
    <el-upload
      accept=".xlsx, .xls"
      action="/api/ubcs-code/codeClassify/importClassify"
      :on-success="onSuccess"
      :on-error="onError"
      :headers="uploadHeaders"
      :show-file-list="false"
      :before-upload="beforeUpload"
      :on-change="uploadChange"
      class="upload-demo">
      <el-button size="small" type="primary" style="margin: 15px 35px">浏览文件</el-button>
    </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>
  </el-dialog>
</template>

<script>
import {downloadErrorFile,downloadBatchImportApplyTemplate} from '@/api/template/templateAttr'
import {getToken} from "@/util/auth";
import func from "@/util/func";
export default {
  name: "ThemeImport",
  props:{
    dialogVisible: {
      get() {
        return this.dialogVisible;
      },
      set(val) {
        this.$emit("update:dialogVisible", val);
      },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    codeClassifyOid: {
      type: String,
      default: "",
    },
  },
  data(){
    return{

      flga:true,
      pageLoading: null,
      downloadLoading: false,
    }
  },
  watch:{
    visible:{
      handler(newval,oldval){
        console.log('newval',newval)
      }
    }
  },
  computed:{
    uploadHeaders() {
      return {
        "Blade-Auth": "bearer " + getToken(),
      };
    },
    dialogVisible: {
      get() {
        return this.visible;
      },
      set(val) {
        this.$emit("update:visible", val);
      },
    },
  },
  methods:{
    //文件上传前
    async beforeUpload(file) {
      const fileType = file.name.split(".").pop();
      if (fileType !== "xlsx" && fileType !== "xls") {
        // 上传格式不符合要求，提示错误信息并取消上传
        this.$message.error("只允许上传xlsx、xls格式的文件");
        return Promise.reject(false);
      }
      this.pageLoading = this.$loading({
        lock: true,
        text: "文件上传中",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      return true;
    },
    // 文件上传成功
    onSuccess(resbonse){
      if (Object.keys(resbonse.data).length === 0) {
        this.$message.success( "主题库分类导入成功！");
        this.dialogVisible = false;
        return;
      }
      if (resbonse.data.fileOid) {
        const fileName = resbonse.data.filePath.split("/").pop();
        this.$message.error("请下载错误信息文件进行查看！");
        downloadErrorFile({ uuid: resbonse.data.fileOid }).then((res) => {
          func.downloadFileByBlobHandler(res);
        });
      }
    },
    //点击下载模板
    downloadTemplateFun(){
      this.downloadLoading = true;
      downloadBatchImportApplyTemplate({codeClassifyOid: this.codeClassifyOid}).then(res=>{
        console.log(res)
        this.$utilFunc.downloadFileByBlob(res.data,  "主题库分类模板.xls");
        this.downloadLoading = false;
      }).catch((res)=>{
        this.$message.warning(res)
        this.downloadLoading = false;
      })
    },
    //文件上传失败
    onError(res){
      console.log(res)
      this.pageLoading.close();
    },
    //文件状态改变
    uploadChange(file){
      if (file.status === "success" || file.status === "error") {
        this.pageLoading.close();
      }
    }
  }
}
</script>

<style scoped>

<style scoped lang="scss">
ul {
  color: rgb(188, 188, 188);
  margin: 20px 0 20px 0;
  padding: 0 0 0 30px;
  list-style: none;
  li {
    margin-bottom: 5px;
    font-size: 13px;
  }
}
</style>

 Source/UBCS-WEB/src/components/file/main.vue

@@ -395,7 +395,7 @@
      download(data).then(res=>{
        // console.log(res);
        if(res){
          func.downloadFileByBlob(res);
          func.downloadFileByBlobHandler(res);
        }
      });
    },

 Source/UBCS-WEB/src/util/func.js

@@ -115,7 +115,7 @@
   * @param value
   * @returns {Boolean}
   */
  static downloadFileByBlob(res) {
  static downloadFileByBlobHandler(res) {
    const fileNames = res.headers['content-disposition'].split(";");
    let characterSet = fileNames[2].split("filename*=")[1];
    let fileName = decodeURI(fileNames[1].split("filename=")[1],characterSet);  // 下载的文件名
@@ -131,4 +131,20 @@
    document.body.removeChild(link); //删除下载
    window.URL.revokeObjectURL(url); //释放掉blob对象
  }

  /**
   * 获取流文件进行文件下
   * @param value
   * @returns {Boolean}
   */
  static downloadFileByBlob(blobData, name) {
    const url = URL.createObjectURL(blobData); // 生成下载链接
    const link = document.createElement("a");
    link.href = url;
    link.download = name; // 指定文件名和格式
    document.body.appendChild(link); // 添加下载链接到页面
    link.click(); // 触发下载
    document.body.removeChild(link); //删除下载
  }

}

 Source/UBCS-WEB/vue.config.js

@@ -28,8 +28,8 @@
        //本地服务接口地址
        // target: 'http://localhost:37000',
        // target: 'http://192.168.1.51:37000',
        // target: 'http://192.168.0.102:37000',
        target: 'http://dev.vci-tech.com:37000',
        target: 'http://192.168.0.102:37000',
        // target: 'http://dev.vci-tech.com:37000',
        // target: 'http://192.168.1.104:37000',
        // target: 'http://192.168.1.63:37000',
        // target: 'http://192.168.3.7:37000',