Merge pull request '组批次规则图节点显示不全bug' (#50) from master-客户管理 into master

Reviewed-on: http://git.xdadan.loc/tanex/emis-frontend/pulls/50

src/views/emis/emisTransPlanRuleTopoGraph/index.vue

@@ -42,6 +42,9 @@ export default {
             treeData: {},
             showMinimap:false,
             graph: null,
+            resizeTimer: null,
+             // 记录节点的展开状态
+            nodeStates: {},
             queryParams: {
                 pageNum: 1,
                 pageSize: 50,
@@ -108,6 +111,18 @@ export default {
             },
         });
         this.drawTreeGraph();
+        //监听窗口大小变化
+        window.addEventListener('resize', this.handleResize);
+    },
+    // 组件销毁时移除事件监听
+    beforeDestroy() {
+        window.removeEventListener('resize', this.handleResize);
+        if (this.resizeTimer) {
+            clearTimeout(this.resizeTimer);
+        }
+        if (this.graph) {
+            this.graph.destroy();
+        }
     },
     beforeRouteEnter(to, from, next) {
         // 组件创建前 保存当前背景颜色
@@ -237,27 +252,9 @@ export default {
                 },
                 modes: {
                     default: [
-                        {
-                            type: "collapse-expand",
-                            onChange: function onChange(item, collapsed) {
-                                const data = item?.get("model");
-                                data.collapsed = collapsed;
-                                const model = {
-                                    id: data.id,
-                                    // labelCfg: { position: !collapsed ? "top" : "right" },
-                                };
-                                item.update(model);
-                                item.refresh();
-                                return true;
-                            },
-                        },
                         "drag-canvas",
                         "fixed-zoom-canvas",
                         "drag-node",
-                        // {
-                        //     type: 'drag-node',
-                        //     enableDelegate: true,
-                        // }
                     ],
                 },
                 layout: {
@@ -353,27 +350,30 @@ export default {
 
             this.graph.on("node:mouseleave", (evt) => {
                 const { item } = evt;
-                // this.graph.setItemState(item, "active", false);
             });
 
-            const animateCfg = { duration: 200, easing: "easeCubic" };
             this.graph.on("node:click", (evt) => {
-                const { item } = evt;
+                const node = evt.item;
-                const node = item?.get("model");
+                const model = node.getModel();
-                //点击更多 显示锁起来的下一层节点
+                if (model.id.includes("expand")) {
-                if (node.id.includes("expand")) {
+                    const parentNode = this.graph.getNeighbors(node, "source")[0].get("model");
-                    const parentNode = this.graph.getNeighbors(item, "source")[0].get("model");
                     this.graph.updateChildren(parentNode.childrenBak, parentNode.id);
+                } else {
+                    if (model.children && model.children.length > 0) {
+                        // 切换节点状态
+                        model.collapsed = !model.collapsed;
+                        this.nodeStates[model.id] = model.collapsed;
                     }
-                setTimeout(() => {
-                    if (!node.id.includes("expand")) {
-                        this.graph.focusItem(item, true, animateCfg);
-                        this.graph.getNodes().forEach((node) => {
-                            this.graph.clearItemStates(node);
-                        });
-                        this.graph.setItemState(item, "selected", true);
                 }
-                }, 500);
+                this.selectedNodeId = model.id;
+                this.graph.setItemState(node, 'selected', true);               
+                this.graph.render();
+                this.graph.fitCenter();
+                //重新渲染之后 恢复选中状态
+                const reRenderedNode = this.graph.findById(this.selectedNodeId);
+                if (reRenderedNode) {
+                    this.graph.setItemState(reRenderedNode, 'selected', true);
+                }
             });
 
             this.graph.on("canvas:click", () => {
@@ -618,7 +618,22 @@ export default {
         onLineChange(value) {
             this.queryParams.lineName = value.lineName;
         },
-
+        //防抖处理 窗口大小变化时触发 响应式画布大小
+        handleResize() {
+            if (this.resizeTimer) {
+                clearTimeout(this.resizeTimer);
+            }
+            this.resizeTimer = setTimeout(() => {
+                if (!this.graph) return;
+                const container = document.getElementById('container');
+                const width = container.clientWidth;
+                const height = container.clientHeight;
+                // 更新画布大小
+                this.graph.changeSize(width, height);
+                // 重新适应视图
+                this.graph.fitCenter();
+            }, 100);
+        },
     }
 }