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