<template>
|
<div class="gooderstage-center-div">
|
<el-transfer
|
:titles="['可合并列', '已选中']"
|
v-model="selected"
|
:props="{
|
key: 'id',
|
label: 'label'
|
}"
|
:data="data"
|
/>
|
<el-button @click="ok" type="primary" class="ok-style">下一步</el-button>
|
</div>
|
</template>
|
<script>
|
export default {
|
props: {
|
tableHeader: {
|
type: Array,
|
default: () => []
|
}
|
},
|
mounted() {
|
this.initData();
|
},
|
data() {
|
return {
|
data: [],
|
selected: []
|
};
|
},
|
methods: {
|
ok() {
|
this.$emit(
|
'selected-gooder',
|
this.data.filter((item) => this.selected.indexOf(item.id) != -1)
|
);
|
},
|
initData() {
|
let obj = this.processElements(this.tableHeader);
|
this.selected = obj.mergedElements;
|
this.data = obj.canMergePairs;
|
},
|
processElements(elements) {
|
const canMergePairs = [];
|
const mergedElements = [];
|
const seenPairs = new Set(); // 用于跟踪已处理的 ID 对
|
|
// 创建一个用于查找元素的映射，以便根据 ID 快速访问
|
const elementMap = new Map(elements.map((el) => [el.id, el]));
|
|
for (const element of elements) {
|
// 检查是否有 merge 属性
|
if (element.merge) {
|
const targetElement = elementMap.get(element.merge);
|
if (targetElement) {
|
// 找到目标元素，生成新的合并对
|
const id1 = element.id;
|
const id2 = targetElement.id;
|
const prop1 = element.prop;
|
const prop2 = targetElement.prop;
|
const smallerId = Math.min(id1, id2);
|
const largerId = Math.max(id1, id2);
|
const title = element.prop + targetElement.prop;
|
|
// 创建一个唯一的 ID 对，确保不会重复
|
const pairKey = `${smallerId}-${largerId}`;
|
if (!seenPairs.has(pairKey)) {
|
canMergePairs.push({
|
id1,
|
id2,
|
prop1,
|
prop2,
|
id: smallerId,
|
label: `${element.label}/${targetElement.label}`,
|
prop: title,
|
merged: false
|
// children: [element, targetElement]
|
});
|
seenPairs.add(pairKey); // 标记为已处理
|
}
|
}
|
// 将当前元素标记为已合并
|
if (element.merged) {
|
mergedElements.push(element);
|
}
|
}
|
}
|
|
return { canMergePairs, mergedElements };
|
},
|
getSelected() {
|
return this.selected;
|
}
|
}
|
};
|
</script>
|
<style scoped>
|
.gooderstage-center-div {
|
display: block;
|
text-align: center;
|
}
|
.ok-style {
|
margin-top: 2px;
|
}
|
</style>
|
