|
@@ -5,13 +5,11 @@
|
|
|
:width="dialogWidth"
|
|
|
:before-close="handleClose"
|
|
|
append-to-body
|
|
|
-
|
|
|
class="tree-copy-modal"
|
|
|
>
|
|
|
<!-- 提示信息 -->
|
|
|
<div class="alert-message">
|
|
|
- <span>温馨提示:允许单对多、多对单、多对多的关联关系。关联后可在对应节点查看。【关联并继续】可以继续续进行关联。</span>
|
|
|
-
|
|
|
+ <span>温馨提示:允许单对多、多对单、多对多的关联关系。关联后可在对应节点查看。【关联并继续】可以继续进行关联。</span>
|
|
|
</div>
|
|
|
|
|
|
<!-- 树形结构容器 -->
|
|
@@ -20,7 +18,7 @@
|
|
|
<div class="tree-wrapper left-tree">
|
|
|
<div class="tree-title">复制源</div>
|
|
|
<el-tree
|
|
|
- v-if="isShowTree"
|
|
|
+ v-if="isShowTree"
|
|
|
ref="sourceTree"
|
|
|
:data="sourceTreeData"
|
|
|
:props="treeProps"
|
|
@@ -31,9 +29,7 @@
|
|
|
:expand-on-click-node="false"
|
|
|
@check="handleSourceCheck"
|
|
|
check-strictly
|
|
|
- :default-expanded-keys="defaultExpandedKeys"
|
|
|
-
|
|
|
-
|
|
|
+ :default-expanded-keys="defaultExpandedKeys"
|
|
|
></el-tree>
|
|
|
</div>
|
|
|
|
|
@@ -46,8 +42,8 @@
|
|
|
<div class="tree-wrapper right-tree">
|
|
|
<div class="tree-title">复制到</div>
|
|
|
<el-tree
|
|
|
- v-if="isShowRight"
|
|
|
- check-strictly
|
|
|
+ v-if="isShowRight"
|
|
|
+ check-strictly
|
|
|
ref="targetTree"
|
|
|
:data="targetTreeData"
|
|
|
:props="treeProps"
|
|
@@ -57,9 +53,7 @@
|
|
|
lazy
|
|
|
:expand-on-click-node="false"
|
|
|
@check="handleTargetCheck"
|
|
|
- :default-expanded-keys="defaultExpandedKeys"
|
|
|
-
|
|
|
-
|
|
|
+ :default-expanded-keys="defaultExpandedKeys"
|
|
|
></el-tree>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -74,25 +68,19 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import {
|
|
|
- getLazytree,
|
|
|
-
|
|
|
-} from "@/api/manager/wbstree";
|
|
|
+import { getLazytree } from "@/api/manager/wbstree";
|
|
|
|
|
|
export default {
|
|
|
name: 'TreeCopyModal',
|
|
|
props: {
|
|
|
- // 弹窗标题
|
|
|
title: {
|
|
|
type: String,
|
|
|
default: '复制节点'
|
|
|
},
|
|
|
- // 弹窗宽度
|
|
|
dialogWidth: {
|
|
|
type: String,
|
|
|
default: '80%'
|
|
|
},
|
|
|
- // 源树和目标树的ID参数
|
|
|
sourceId: {
|
|
|
type: [String, Number],
|
|
|
required: true
|
|
@@ -101,7 +89,6 @@ export default {
|
|
|
type: [String, Number],
|
|
|
required: true
|
|
|
},
|
|
|
- // 用户信息,包含tenant_id
|
|
|
userInfo: {
|
|
|
type: Object,
|
|
|
required: true
|
|
@@ -114,23 +101,18 @@ export default {
|
|
|
type: Array,
|
|
|
default: () => []
|
|
|
},
|
|
|
- checkId:{
|
|
|
- type: [String, Number],
|
|
|
+ checkId: {
|
|
|
+ type: [String, Number],
|
|
|
required: true
|
|
|
}
|
|
|
-
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
- // 弹窗显示状态
|
|
|
visible: false,
|
|
|
- // 源树数据
|
|
|
sourceTreeData: [],
|
|
|
- // 目标树数据
|
|
|
targetTreeData: [],
|
|
|
- // 树的配置项
|
|
|
treeProps: {
|
|
|
- children: "children",
|
|
|
+ children: "children",
|
|
|
label: "title",
|
|
|
isLeaf: function (data) {
|
|
|
if (data.hasChildren && data.isExistForm != 1) {
|
|
@@ -142,23 +124,20 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
},
|
|
|
-
|
|
|
- // 选中的源节点
|
|
|
selectedSourceNodes: [],
|
|
|
- // 选中的目标节点
|
|
|
selectedTargetNodes: [],
|
|
|
- isShowTree:true,
|
|
|
- isShowRight:true
|
|
|
+ isShowTree: true,
|
|
|
+ isShowRight: true
|
|
|
};
|
|
|
},
|
|
|
- watch:{
|
|
|
- linkLoading(val){
|
|
|
+ watch: {
|
|
|
+ linkLoading(val) {
|
|
|
this.linkLoading = val;
|
|
|
},
|
|
|
- defaultExpandedKeys(val){
|
|
|
+ defaultExpandedKeys(val) {
|
|
|
this.defaultExpandedKeys = val;
|
|
|
},
|
|
|
- checkId(val){
|
|
|
+ checkId(val) {
|
|
|
this.checkId = val;
|
|
|
}
|
|
|
},
|
|
@@ -178,12 +157,12 @@ export default {
|
|
|
// 设置默认选中的源节点
|
|
|
if (this.checkId && this.$refs.sourceTree) {
|
|
|
this.$refs.sourceTree.setCheckedKeys([this.checkId]);
|
|
|
-
|
|
|
- setTimeout(() => {
|
|
|
- const checkedNodes = this.$refs.sourceTree.getCheckedNodes();
|
|
|
- this.selectedSourceNodes = checkedNodes;
|
|
|
- console.log('选中的节点:', this.selectedSourceNodes);
|
|
|
- }, 3000);
|
|
|
+
|
|
|
+ setTimeout(() => {
|
|
|
+ const checkedNodes = this.$refs.sourceTree.getCheckedNodes();
|
|
|
+ this.selectedSourceNodes = checkedNodes;
|
|
|
+ console.log('选中的节点:', this.selectedSourceNodes);
|
|
|
+ }, 3000);
|
|
|
}
|
|
|
|
|
|
// 重置目标树
|
|
@@ -193,15 +172,14 @@ export default {
|
|
|
});
|
|
|
},
|
|
|
|
|
|
-
|
|
|
// 关闭弹窗
|
|
|
handleClose() {
|
|
|
this.visible = false;
|
|
|
this.$emit('close');
|
|
|
- this.isShowTree=false
|
|
|
- this.isShowRight=false
|
|
|
- this.checkId = ''
|
|
|
-
|
|
|
+ this.isShowTree = false;
|
|
|
+ this.isShowRight = false;
|
|
|
+ this.checkId = '';
|
|
|
+ this.clearSelections();
|
|
|
},
|
|
|
|
|
|
// 加载源树节点
|
|
@@ -211,13 +189,11 @@ export default {
|
|
|
pid = node.data.id;
|
|
|
}
|
|
|
getLazytree(this.sourceId, pid, this.userInfo.tenant_id)
|
|
|
-
|
|
|
.then(res => {
|
|
|
let arr = [];
|
|
|
if (Array.isArray(res.data.data)) {
|
|
|
arr = res.data.data.map(item => ({
|
|
|
...item,
|
|
|
- // 如果后端没有返回isLeaf,这里可以根据实际业务逻辑判断
|
|
|
isLeaf: item.isLeaf !== undefined ? item.isLeaf : false
|
|
|
}));
|
|
|
}
|
|
@@ -253,11 +229,8 @@ export default {
|
|
|
},
|
|
|
|
|
|
// 处理源树节点选择
|
|
|
- // 处理源树节点选择
|
|
|
handleSourceCheck(data, checked, indeterminate) {
|
|
|
- // 确保树组件已渲染
|
|
|
if (this.$refs.sourceTree) {
|
|
|
- // 只获取叶子节点,根据你的业务逻辑调整
|
|
|
this.selectedSourceNodes = this.$refs.sourceTree.getCheckedNodes(false, true);
|
|
|
console.log('选中的源节点:', this.selectedSourceNodes);
|
|
|
}
|
|
@@ -265,9 +238,7 @@ export default {
|
|
|
|
|
|
// 处理目标树节点选择
|
|
|
handleTargetCheck(data, checked, indeterminate) {
|
|
|
- // 确保树组件已渲染
|
|
|
if (this.$refs.targetTree) {
|
|
|
- // 只获取叶子节点,根据你的业务逻辑调整
|
|
|
this.selectedTargetNodes = this.$refs.targetTree.getCheckedNodes(false, true);
|
|
|
console.log('选中的目标节点:', this.selectedTargetNodes);
|
|
|
}
|
|
@@ -283,61 +254,68 @@ export default {
|
|
|
// 关联并退出
|
|
|
handleLinkAndExit() {
|
|
|
this.handleLink(true);
|
|
|
-
|
|
|
},
|
|
|
|
|
|
// 关联并继续
|
|
|
handleLinkAndContinue() {
|
|
|
this.handleLink(false);
|
|
|
-
|
|
|
},
|
|
|
|
|
|
// 处理关联操作
|
|
|
- handleLink(exitAfterLink) {
|
|
|
- if (this.selectedSourceNodes.length === 0 || this.selectedTargetNodes.length === 0) {
|
|
|
- this.$message.warning('请至少选择一个源节点和一个目标节点');
|
|
|
- return;
|
|
|
- }
|
|
|
-
|
|
|
- // 准备关联数据
|
|
|
- const linkData = {
|
|
|
- sourceNodes: this.selectedSourceNodes.map(node => node.id),
|
|
|
- targetNodes: this.selectedTargetNodes.map(node => node.id)
|
|
|
- };
|
|
|
+ handleLink(exitAfterLink) {
|
|
|
+ if (this.selectedSourceNodes.length === 0 || this.selectedTargetNodes.length === 0) {
|
|
|
+ this.$message.warning('请至少选择一个源节点和一个目标节点');
|
|
|
+ return;
|
|
|
+ }
|
|
|
|
|
|
- // 触发父组件的关联事件,将刷新操作移到回调中
|
|
|
- this.$emit('link', linkData, () => {
|
|
|
- this.$message.success('复制成功');
|
|
|
-
|
|
|
- // 接口调用成功后执行的操作
|
|
|
- this.isShowTree = false;
|
|
|
- setTimeout(() => {
|
|
|
- this.isShowTree = true;
|
|
|
- }, 1000);
|
|
|
-
|
|
|
- this.isShowRight = false;
|
|
|
- setTimeout(() => {
|
|
|
- this.isShowRight = true;
|
|
|
- this.selectedSourceNodes = [];
|
|
|
- this.selectedTargetNodes = [];
|
|
|
- this.checkId = '';
|
|
|
- }, 1000);
|
|
|
+ // 准备关联数据
|
|
|
+ const linkData = {
|
|
|
+ sourceNodes: this.selectedSourceNodes.map(node => node.id),
|
|
|
+ targetNodes: this.selectedTargetNodes.map(node => node.id)
|
|
|
+ };
|
|
|
+
|
|
|
+ // 触发父组件的关联事件
|
|
|
+ this.$emit('link', linkData, (success) => {
|
|
|
+ if (success) {
|
|
|
+ if (exitAfterLink) {
|
|
|
+ // 复制并退出:关闭弹窗并清空选择
|
|
|
+ this.handleClose();
|
|
|
+ } else {
|
|
|
+ // 复制并继续:清空选择并重新加载树
|
|
|
+ this.reloadTrees();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
|
|
|
- if (exitAfterLink) {
|
|
|
- this.handleClose();
|
|
|
- } else {
|
|
|
- // 清空选择但不关闭弹窗
|
|
|
+ // 重新加载树
|
|
|
+ reloadTrees() {
|
|
|
+ // 先隐藏树
|
|
|
+ this.isShowTree = false;
|
|
|
+ this.isShowRight = false;
|
|
|
+
|
|
|
+ // 清空选择
|
|
|
this.clearSelections();
|
|
|
- }
|
|
|
- });
|
|
|
-},
|
|
|
- // 新增清空选择的方法
|
|
|
+
|
|
|
+ // 延迟显示树,触发重新渲染
|
|
|
+ setTimeout(() => {
|
|
|
+ this.isShowTree = true;
|
|
|
+ this.isShowRight = true;
|
|
|
+
|
|
|
+ // 确保DOM更新后再操作
|
|
|
+ this.$nextTick(() => {
|
|
|
+ // 如果有默认选中的节点,重新选中
|
|
|
+ if (this.checkId && this.$refs.sourceTree) {
|
|
|
+ // this.$refs.sourceTree.setCheckedKeys([this.checkId]);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }, 300);
|
|
|
+ },
|
|
|
+
|
|
|
+ // 清空选择
|
|
|
clearSelections() {
|
|
|
- // 确保组件已加载
|
|
|
if (this.$refs.sourceTree) {
|
|
|
- // 对于懒加载树,先获取所有已勾选的节点ID
|
|
|
const sourceCheckedKeys = this.$refs.sourceTree.getCheckedKeys();
|
|
|
- // 逐个取消勾选
|
|
|
sourceCheckedKeys.forEach(key => {
|
|
|
this.$refs.sourceTree.setChecked(key, false, true);
|
|
|
});
|
|
@@ -353,8 +331,7 @@ export default {
|
|
|
// 手动清空数据
|
|
|
this.selectedSourceNodes = [];
|
|
|
this.selectedTargetNodes = [];
|
|
|
-
|
|
|
- this.checkId = ''
|
|
|
+ this.checkId = '';
|
|
|
}
|
|
|
}
|
|
|
};
|
|
@@ -437,7 +414,6 @@ export default {
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
padding-top: 15px;
|
|
|
-
|
|
|
}
|
|
|
}
|
|
|
</style>
|