zcdsj
/
factory_web
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix route flow tabs layout

This commit is contained in:
caoqianming 2026-07-27 14:13:45 +08:00
parent 3dc25fef2a
commit 16546fd5fd
1 changed files with 30 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
src/views/mtm/route_show.vue
View File

@ -22,7 +22,7 @@
<div class="rs-card__title">工艺路线流程图</div> <div class="rs-card__title">工艺路线流程图</div>
<el-tabs v-if="tabsTitle.length > 1" v-model="activeName" class="rs-tabs" <el-tabs v-if="tabsTitle.length > 1" v-model="activeName" class="rs-tabs"
@tab-click="tabshandleClick"> @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> </el-tabs>
<xtFlowViewer v-if="limitedWatch" :nodes="nodes" :edges="edges" class="rs-flow__canvas" <xtFlowViewer v-if="limitedWatch" :nodes="nodes" :edges="edges" class="rs-flow__canvas"
style="min-height: 0"> style="min-height: 0">
@ -124,6 +124,13 @@ export default {
setData(data) { setData(data) {
let that = this; let that = this;
Object.assign(that.form, data); Object.assign(that.form, data);
that.nodes = [];
that.edges = [];
that.tabsTitle = ['总图'];
that.tabsData = {};
that.activeName = "总图";
// 先挂载查看器显示加载后的空状态，避免子图列表先返回时整块区域空白
that.limitedWatch = true;
that.getRoute(that.form.material); that.getRoute(that.form.material);
that.getDEGdatas(data.id); that.getDEGdatas(data.id);
this.getTabsList(data.id); this.getTabsList(data.id);
@ -135,11 +142,10 @@ export default {
getDEGdatas(id) { getDEGdatas(id) {
let that = this; let that = this;
that.$API.mtm.routepack.dag.req(id).then((res) => { that.$API.mtm.routepack.dag.req(id).then((res) => {
that.nodes = res.nodes;
that.edges = res.edges;
that.tabsData['总图'] = res; 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]; 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) { getRoute(id) {
this.$API.mtm.route.list this.$API.mtm.route.list
@ -168,12 +181,10 @@ export default {
}); });
}, },
tabshandleClick(val) { tabshandleClick(val) {
let that = this; const graph = this.tabsData[val.props.name || val.props.label];
let label = val.props.label; if (graph) {
that.$nextTick(() => { this.showGraph(graph);
that.nodes = that.tabsData[label].nodes; }
that.edges = that.tabsData[label].edges;
})
}, },
}, },
}; };
@ -256,9 +267,16 @@ export default {
flex: 1; flex: 1;
min-height: 0; min-height: 0;
} }
.rs-tabs {
/* el-tabs 的空 content 默认会 flex-grow，多个流程图时会把下方画布挤出可视区 */
flex: 0 0 auto;
}
.rs-tabs :deep(.el-tabs__header) { .rs-tabs :deep(.el-tabs__header) {
margin: 0 0 8px; margin: 0 0 8px;
} }
.rs-tabs :deep(.el-tabs__content) {
display: none;
}
.rs-steps { .rs-steps {
flex: 1; flex: 1;
min-width: 0; min-width: 0;