<template>
|
<el-dialog
|
:title="title"
|
:visible.sync="dialogVisible"
|
width="1300px"
|
append-to-body
|
top="5vh"
|
>
|
<div class="flex_box">
|
<div
|
class="left"
|
:style="{ width: leftWidth + 'px' }"
|
v-show="type !== 'batchImportApply'"
|
>
|
<div class="isExpand_box">
|
<el-link type="primary" @click="hideTree">
|
<i
|
:class="isExpand ? 'el-icon-arrow-left' : 'el-icon-arrow-right'"
|
></i>
|
{{ isExpand ? "收缩" : "展开" }}
|
</el-link>
|
</div>
|
<el-input
|
placeholder="输入关键字进行过滤"
|
v-model="filterText"
|
size="small"
|
v-show="isExpand"
|
>
|
</el-input>
|
<el-tree
|
v-show="isExpand"
|
class="filter_tree"
|
:data="leftTree"
|
node-key="codeClassifyOid"
|
default-expand-all
|
highlight-current
|
:filter-node-method="filterNode"
|
@node-click="treeNodeClick"
|
ref="tree"
|
:props="{
|
label: 'name',
|
}"
|
>
|
</el-tree>
|
</div>
|
<div class="right" :style="{ width: 1280 - leftWidth - 60 + 'px' }">
|
<div class="tab_box" style="width: 100%">
|
<el-tabs
|
style="width: 100%"
|
v-model="activeTab"
|
type="card"
|
@tab-click="handleClick"
|
size="small"
|
>
|
<el-tab-pane :label="tab1Name" name="tab1">
|
<el-table
|
border
|
:data="tab1Table"
|
style="width: 100%"
|
height="40vh"
|
highlight-current-row
|
@current-change="resembleRowChange"
|
@selection-change="tab1TableSelectChange"
|
v-if="cloNamesList.length > 1"
|
v-loading="tab1Loading"
|
>
|
<el-table-column
|
v-if="type !== 'batchApplyCode'"
|
type="selection"
|
width="100px"
|
align="center"
|
></el-table-column>
|
<el-table-column
|
v-else
|
type="operate"
|
width="100px"
|
align="center"
|
>
|
<template #default="{ row }">
|
<el-button type="text" @click="reEdit(row)"
|
>重新编辑</el-button
|
>
|
</template>
|
</el-table-column>
|
<el-table-column
|
type="index"
|
label="序号"
|
width="100px"
|
align="center"
|
></el-table-column>
|
<el-table-column
|
v-for="item in cloNamesList"
|
:key="item.field"
|
:prop="item.field"
|
:label="item.title"
|
:width="item.width"
|
align="center"
|
>
|
</el-table-column>
|
</el-table>
|
<div v-else style="height: 400px"></div>
|
<div>
|
<el-table
|
border
|
:data="currentSelectedResemble"
|
style="width: 100%"
|
height="20vh"
|
v-loading="tab1BottomTableLoading"
|
>
|
<el-table-column
|
v-for="item in resembleColumList"
|
:key="item.field"
|
:prop="item.field"
|
:label="item.title"
|
:minWidth="item.minWidth"
|
align="center"
|
>
|
<template #default="{ row }">
|
<span v-if="item.field === 'id'">
|
<el-link
|
type="primary"
|
@click="openFormTemlpate(row)"
|
>{{ row[item.field] }}</el-link
|
>
|
</span>
|
<span v-else>
|
{{ row[item.field] }}
|
</span>
|
</template>
|
</el-table-column>
|
<el-table-column
|
v-show="resembleColumList.length > 0"
|
prop="rowIndex"
|
label="excel行数"
|
align="center"
|
></el-table-column>
|
</el-table>
|
</div>
|
</el-tab-pane>
|
<el-tab-pane :label="tab2Name" name="tab2">
|
<el-table
|
border
|
v-loading="tab2Loading"
|
:data="tab2Table"
|
height="60vh"
|
>
|
<el-table-column
|
v-for="item in successTableColumns"
|
:key="item.field"
|
:prop="item.field"
|
:label="item.title"
|
:width="item.width"
|
align="center"
|
>
|
</el-table-column>
|
</el-table>
|
<el-card
|
style="min-height: 200px; margintop: 10px"
|
v-if="type === 'batchApplyCode' && tab2Table.length > 0"
|
>
|
<div slot="header" class="clearfix">
|
<h4>编码申请</h4>
|
</div>
|
<FormTemplate
|
v-if="type === 'batchApplyCode'"
|
type="add"
|
:selfColumnType="selfColumnType"
|
:selfColumnConfig="selfColumnConfig"
|
ref="CodeApply"
|
@getFormData="getCodeApplyFormData"
|
@referConfigDataUpdate="referConfigDataUpdate"
|
></FormTemplate>
|
</el-card>
|
</el-tab-pane>
|
</el-tabs>
|
</div>
|
</div>
|
</div>
|
<template #footer>
|
<div>
|
<el-button size="small" type="primary" @click="submit" :loading="submitLoading"
|
>确定导入</el-button
|
>
|
<el-button size="small" @click="dialogVisible = false">取消</el-button>
|
</div>
|
</template>
|
<FormTemplateDialog
|
ref="FormTemplateDialog"
|
v-bind="currentSelectedResembleRow"
|
:visible.sync="currentSelectedResembleRow.formTemplateVisible"
|
@submit="FormTemplateSubmit"
|
></FormTemplateDialog>
|
</el-dialog>
|
</template>
|
|
<script>
|
import {
|
getSuccessTable,
|
getResembleTable,
|
getFormTemplate,
|
getCurretnSelectedRowResemble,
|
submitHistoryimport,
|
addSaveCode,
|
} from "../../api/batchImport/index";
|
import ResembleQuery from "../FormTemplate/ResembleQuery.vue";
|
import FormTemplate from "../FormTemplate/FormTemplate.vue";
|
import codeApply from "@/mixins/codeApply.js";
|
|
export default {
|
name: "ShowImportData",
|
components: { ResembleQuery, FormTemplate },
|
mixins: [codeApply],
|
props: {
|
title: {
|
type: String,
|
default: "历史数据导入",
|
},
|
visible: false,
|
leftTree: {
|
type: Array,
|
default: () => [],
|
},
|
redisOid: {
|
type: String,
|
default: "",
|
},
|
classifyAttr: {
|
type: String,
|
default: "id",
|
},
|
codeClassifyOid: {
|
type: String,
|
default: "",
|
},
|
type: String,
|
secDTOList: {
|
type: Array,
|
default: () => ({}),
|
},
|
},
|
computed: {
|
dialogVisible: {
|
get() {
|
return this.visible;
|
},
|
set(val) {
|
this.$emit("update:visible", val);
|
},
|
},
|
successTableColumns() {
|
if (this.type === "batchApplyCode") {
|
return this.cloNamesList.slice(1);
|
} else {
|
return this.cloNamesList;
|
}
|
},
|
},
|
data() {
|
return {
|
isExpand: true,
|
filterText: "",
|
leftWidth: 200,
|
templateOid: null,
|
tab1Name: "相似项",
|
tab2Name: "正确数据",
|
tab1Table: [],
|
selectedTab1Table: [],
|
tab2Table: [],
|
activeTab: "tab1",
|
cloNamesList: [], //列表头部字段
|
localCodeClassifyOid: "",
|
codeRuleOid: "",
|
resembleColumList: [], //相似项查出来的列表字段
|
currentSelectedResemble: [],
|
currentSelectedResembleRow: {
|
templateOid: "",
|
codeClassifyOid: "",
|
rowOid: "",
|
formTemplateVisible: false,
|
type: "detail",
|
title: "查看详细信息",
|
setForm: {},
|
},
|
batchSelectTableData: {},
|
savedList: [],
|
tab1Loading: false,
|
tab2Loading: false,
|
tab1BottomTableLoading: false,
|
submitLoading: false
|
};
|
},
|
|
methods: {
|
filterNode(value, data) {
|
if (!value) return true;
|
return data.name.indexOf(value) !== -1;
|
},
|
hideTree() {
|
if (this.isExpand) {
|
this.leftWidth = 50;
|
} else {
|
this.leftWidth = 200;
|
}
|
this.isExpand = !this.isExpand;
|
},
|
async treeNodeClick(data, first) {
|
if (this.type === "batchApplyCode") {
|
if (first === true) {
|
this.codeRuleOid = data.codeRuleOid;
|
// 第一次打开直接赋值不校验
|
this.batchSelectTableData[data.codeRuleOid] = {
|
name: data.name,
|
templateOid: data.oid,
|
cloNamesList: data.cloNamesList,
|
codeClassifyOid: data.codeClassifyOid,
|
codeRuleOid: data.codeRuleOid,
|
};
|
// 不是第一次打开需要优先校验
|
} else if (this.localCodeClassifyOid === data.codeClassifyOid) {
|
console.log("重复点击");
|
} else {
|
if (this.$refs.CodeApply) {
|
if (!(await this.$refs.CodeApply.validate())) {
|
this.$message.warning("请填写便编码申请！");
|
this.activeTab = "tab2";
|
this.$refs.tree.setCurrentKey(this.localCodeClassifyOid);
|
return false;
|
}
|
}
|
}
|
if (!this.batchSelectTableData[data.codeRuleOid]) {
|
this.batchSelectTableData[data.codeRuleOid] = {
|
name: data.name,
|
templateOid: data.oid,
|
cloNamesList: data.cloNamesList,
|
codeClassifyOid: data.codeClassifyOid,
|
codeRuleOid: data.codeRuleOid,
|
};
|
}
|
}
|
if (this.type === 'historyImport') {
|
if (first === true) {
|
// 第一次打开直接赋值不校验
|
this.batchSelectTableData[data.codeClassifyOid] = {
|
name: data.name,
|
templateOid: data.oid,
|
cloNamesList: data.cloNamesList,
|
codeClassifyOid: data.codeClassifyOid,
|
codeRuleOid: data.codeRuleOid,
|
};
|
// 不是第一次打开需要优先校验
|
}else if (this.localCodeClassifyOid === data.codeClassifyOid) {
|
console.log("重复点击");
|
}
|
if (!this.batchSelectTableData[data.codeClassifyOid]) {
|
this.batchSelectTableData[data.codeClassifyOid] = {
|
name: data.name,
|
templateOid: data.oid,
|
cloNamesList: data.cloNamesList,
|
codeClassifyOid: data.codeClassifyOid,
|
tab1Selected: []
|
};
|
}
|
this.selection = this.batchSelectTableData[this.localCodeClassifyOid]['tab1Selected']
|
}
|
this.localCodeClassifyOid = data.codeClassifyOid;
|
this.cloNamesList = data.cloNamesList;
|
this.templateOid = data.oid;
|
this.tab1Loading = true
|
getResembleTable({
|
codeClassifyOid:
|
this.type === "batchApplyCode" ? data.codeRuleOid : this.templateOid,
|
redisOid: this.redisOid + "-resemble",
|
}).then((res) => {
|
this.tab1Loading = false
|
this.tab1Table = res.data.data.filter(
|
(item) => !this.savedList.includes(item.oid)
|
);
|
if (this.type === "batchApplyCode") {
|
this.batchSelectTableData[data.codeRuleOid]["tab1"] =
|
this.tab1Table;
|
}
|
if (this.type === "historyImport") {
|
this.batchSelectTableData[data.codeClassifyOid]["tab1"] =
|
this.tab1Table;
|
}
|
});
|
this.tab2Loading = true
|
// 获取正确数据
|
getSuccessTable({
|
codeClassifyOid:
|
this.type === "batchApplyCode" ? data.codeRuleOid : this.templateOid,
|
redisOid: this.redisOid + "-ok",
|
}).then((res) => {
|
this.tab2Loading = false
|
this.tab2Table = res.data.data;
|
if (this.tab2Table.length > 0 && this.type === "batchApplyCode") {
|
this.batchSelectTableData[data.codeRuleOid]["codeApply"] = {};
|
this.batchSelectTableData[data.codeRuleOid]["tab2"] =
|
this.tab2Table
|
if (this.$refs.CodeApply) {
|
this.$refs.CodeApply.loading = true;
|
}
|
this.getCodeRule();
|
}
|
if (this.type === "historyImport") {
|
this.batchSelectTableData[data.codeClassifyOid]["tab2"] =
|
this.tab2Table
|
}
|
});
|
getFormTemplate({
|
templateOid: data.oid,
|
codeClassifyOid: this.localCodeClassifyOid,
|
}).then((res) => {
|
this.resembleColumList = res.data.resembleTableVO.cols[0];
|
});
|
},
|
tab1TableSelectChange(selection) {
|
this.selectedTab1Table = selection;
|
if (this.batchSelectTableData[this.localCodeClassifyOid]) {
|
this.batchSelectTableData[this.localCodeClassifyOid]['tab1Selected'] = selection
|
}
|
},
|
resembleRowChange(row) {
|
if (!row || !row.oid) {
|
return;
|
}
|
this.tab1BottomTableLoading = true
|
getCurretnSelectedRowResemble({
|
redisOid: this.redisOid + "-resemble-data",
|
dataOid: row.oid,
|
}).then((res) => {
|
this.tab1BottomTableLoading = false
|
this.currentSelectedResemble = res.data.data;
|
});
|
},
|
openFormTemlpate(row) {
|
this.currentSelectedResembleRow = {
|
formTemplateVisible: true,
|
templateOid: row.codetemplateoid,
|
codeClassifyOid: this.localCodeClassifyOid,
|
rowOid: row.rowOid,
|
type: "detail",
|
title: "查看详细信息",
|
setForm: {},
|
};
|
},
|
async submit() {
|
let params = {
|
classifyAttr:
|
this.type === "historyImport" || this.type === "batchApplyCode"
|
? this.classifyAttr
|
: undefined,
|
improt: this.type === "historyImport" ? true : false,
|
};
|
if (this.type === "batchApplyCode") {
|
if (this.$refs.CodeApply) {
|
if (!(await this.$refs.CodeApply.validate())) {
|
this.$message.warning("请填写便编码申请！");
|
this.activeTab = "tab2";
|
return false;
|
}
|
}
|
let lookedCodeRuleOidList = Object.keys(this.batchSelectTableData);
|
let noLookCodeRuleOidList = this.leftTree.filter(
|
(item) => !lookedCodeRuleOidList.includes(item.codeRuleOid)
|
);
|
let noLookName = noLookCodeRuleOidList.map((item) => item.name);
|
if (noLookName.length > 0) {
|
this.$message.warning(`数据${noLookName}还未曾查看，请先查看！`);
|
return false;
|
}
|
let errorData = [];
|
let successData = [];
|
for (const key in this.batchSelectTableData) {
|
if (Object.hasOwnProperty.call(this.batchSelectTableData, key)) {
|
const element = this.batchSelectTableData[key];
|
if (element.tab1.length > 0) {
|
errorData.push(element);
|
}
|
if (element.tab2.length > 0) {
|
successData.push(element);
|
}
|
}
|
}
|
if (successData.length === 0) {
|
this.$message.warning("导入的数据中没有正确的数据！");
|
return;
|
}
|
if (errorData.length > 0) {
|
await this.$confirm(
|
errorData.map((item) => item.name).join("、") +
|
"，这几个编码规则下的有错误数据和相似项数据没有处理，您如果继续保存的话，这些数据将会被自动舍弃，是否继续？",
|
"提示",
|
{
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning",
|
}
|
);
|
}
|
params.codeImprotSaveDatVOList = successData.map((item) => {
|
return {
|
Clos: item.cloNamesList,
|
dataList: item.tab2,
|
orderDTO: {
|
codeClassifyOid: item.codeClassifyOid,
|
templateOid: item.templateOid,
|
secDTOList: item.localSecVOList.map((itm) => {
|
return {
|
secOid: itm.oid,
|
secValue: item.codeApply[itm.oid],
|
};
|
}),
|
},
|
};
|
});
|
} else if (this.type === 'historyImport') {
|
let lookedCodeRuleOidList = Object.keys(this.batchSelectTableData);
|
let noLookCodeRuleOidList = this.leftTree.filter(
|
(item) => !lookedCodeRuleOidList.includes(item.codeClassifyOid)
|
);
|
let noLookName = noLookCodeRuleOidList.map((item) => item.name);
|
if (noLookName.length > 0) {
|
this.$message.warning(`数据${noLookName}还未曾查看，请先查看！`);
|
return false;
|
}
|
params.codeImprotSaveDatVOList = this.batchSelectTableData.map(item => {
|
return {
|
Clos: item.cloNamesList,
|
dataList: item.tab2.concat(item.tab1Selected),
|
orderDTO: {
|
codeClassifyOid: item.codeClassifyOid,
|
templateOid: item.templateOid,
|
secDTOList: this.secDTOList,
|
},
|
}
|
})
|
} else {
|
params.codeImprotSaveDatVOList = [
|
{
|
Clos: this.cloNamesList.map((item) => item.title),
|
dataList: this.tab2Table.concat(this.selectedTab1Table),
|
orderDTO: {
|
codeClassifyOid: this.codeClassifyOid,
|
templateOid: this.templateOid,
|
secDTOList: this.secDTOList,
|
},
|
},
|
];
|
}
|
this.submitLoading = true
|
submitHistoryimport(params).then((res) => {
|
this.submitLoading = false
|
if (res.data.code === 200) {
|
this.$message.success(res.data.msg);
|
}
|
});
|
},
|
// 重新编辑
|
reEdit(row) {
|
this.currentSelectedResembleRow = {
|
templateOid: row.codetemplateoid,
|
codeClassifyOid: row.codeclassifyid,
|
rowOid: row.oid,
|
formTemplateVisible: true,
|
type: "add",
|
title: "编辑数据后重新入库",
|
setForm: row,
|
};
|
},
|
// 直接编辑后保存
|
FormTemplateSubmit(form) {
|
addSaveCode(form).then((res) => {
|
if (res.data.code === 200) {
|
this.savedList.push(form.oid);
|
this.$message.success("新增成功！");
|
this.treeNodeClick(
|
this.leftTree.find((item) => item.codeRuleOid === this.codeRuleOid)
|
);
|
this.currentSelectedResembleRow = {
|
templateOid: "",
|
codeClassifyOid: "",
|
rowOid: "",
|
formTemplateVisible: false,
|
type: "detail",
|
title: "查看详细信息",
|
setForm: {},
|
};
|
}
|
});
|
},
|
},
|
watch: {
|
filterText(val) {
|
this.$refs.tree.filter(val);
|
},
|
leftTree: {
|
immediate: true,
|
deep: true,
|
handler(arr) {
|
if (arr.length > 0) {
|
this.treeNodeClick(arr[0], true);
|
this.$nextTick(() => {
|
this.$refs.tree.setCurrentKey(arr[0]["codeClassifyOid"]);
|
});
|
if (this.type === "batchImportApply") {
|
this.leftWidth = 0;
|
} else if (this.type === "batchApplyCode") {
|
this.tab1Name = "有相似项或错误数据";
|
this.tab2Name = "正确数据";
|
this.leftWidth = 200;
|
}
|
}
|
},
|
},
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.flex_box {
|
display: flex;
|
width: 1280px;
|
.left {
|
transition: all 0.5s;
|
.isExpand_box {
|
margin-bottom: 10px;
|
text-align: right;
|
}
|
.filter_tree {
|
margin-top: 15px;
|
max-height: 400px;
|
overflow-y: scroll;
|
}
|
}
|
.right {
|
transition: all 0.5s;
|
margin-left: 20px;
|
margin-top: 30px;
|
}
|
}
|
</style>
|
