From 16546fd5fdc0174d7b3e9216c34c19419a0252dc Mon Sep 17 00:00:00 2001
From: caoqianming <caoqianming@foxmail.com>
Date: Mon, 27 Jul 2026 14:13:45 +0800
Subject: [PATCH] Fix route flow tabs layout

---
 src/views/mtm/route_show.vue | 42 +++++++++++++++++++++++++-----------
 1 file changed, 30 insertions(+), 12 deletions(-)

diff --git a/src/views/mtm/route_show.vue b/src/views/mtm/route_show.vue
index 95663b62..dd5789dd 100644
--- a/src/views/mtm/route_show.vue
+++ b/src/views/mtm/route_show.vue
@@ -22,7 +22,7 @@
 					<div class="rs-card__title">工艺路线流程图</div>
 					<el-tabs v-if="tabsTitle.length > 1" v-model="activeName" class="rs-tabs"
 						@tab-click="tabshandleClick">
-						<el-tab-pane :label="item" v-for="item in tabsTitle" :key="item"></el-tab-pane>
+						<el-tab-pane :label="item" :name="item" v-for="item in tabsTitle" :key="item"></el-tab-pane>
 					</el-tabs>
 					<xtFlowViewer v-if="limitedWatch" :nodes="nodes" :edges="edges" class="rs-flow__canvas"
 						style="min-height: 0">
@@ -124,6 +124,13 @@ export default {
 		setData(data) {
 			let that = this;
 			Object.assign(that.form, data);
+			that.nodes = [];
+			that.edges = [];
+			that.tabsTitle = ['总图'];
+			that.tabsData = {};
+			that.activeName = "总图";
+			// 先挂载查看器显示加载后的空状态，避免子图列表先返回时整块区域空白
+			that.limitedWatch = true;
 			that.getRoute(that.form.material);
 			that.getDEGdatas(data.id);
 			this.getTabsList(data.id);
@@ -135,11 +142,10 @@ export default {
 		getDEGdatas(id) {
 			let that = this;
 			that.$API.mtm.routepack.dag.req(id).then((res) => {
-				that.nodes = res.nodes;
-				that.edges = res.edges;
 				that.tabsData['总图'] = res;
-				if (!that.limitedWatch) {
-					that.limitedWatch = true;
+				// 子图列表与总图并行加载；用户已切到子图时不能再被迟到的总图覆盖
+				if (that.activeName === "总图") {
+					that.showGraph(res);
 				}
 			})
 		},
@@ -156,9 +162,16 @@ export default {
 						that.tabsData[res[key].name] = res[key];
 					}
 				}
-				console.log(that.tabsData);
+				const activeGraph = that.tabsData[that.activeName];
+				if (activeGraph) {
+					that.showGraph(activeGraph);
+				}
 			})
 		},
+		showGraph(graph) {
+			this.nodes = graph?.nodes || [];
+			this.edges = graph?.edges || [];
+		},
 		//文件列表加载
 		getRoute(id) {
 			this.$API.mtm.route.list
@@ -168,12 +181,10 @@ export default {
 				});
 		},
 		tabshandleClick(val) {
-			let that = this;
-			let label = val.props.label;
-			that.$nextTick(() => {
-				that.nodes = that.tabsData[label].nodes;
-				that.edges = that.tabsData[label].edges;
-			})
+			const graph = this.tabsData[val.props.name || val.props.label];
+			if (graph) {
+				this.showGraph(graph);
+			}
 		},
 	},
 };
@@ -256,9 +267,16 @@ export default {
 	flex: 1;
 	min-height: 0;
 }
+.rs-tabs {
+	/* el-tabs 的空 content 默认会 flex-grow，多个流程图时会把下方画布挤出可视区 */
+	flex: 0 0 auto;
+}
 .rs-tabs :deep(.el-tabs__header) {
 	margin: 0 0 8px;
 }
+.rs-tabs :deep(.el-tabs__content) {
+	display: none;
+}
 .rs-steps {
 	flex: 1;
 	min-width: 0;