任务详情小画布网关选中和节点树联动 (TencentBlueKing#7186)

* optimization: 任务详情小画布网关选中和节点树联动 * bugfix: 子流程操作bug修复
normal-wls · Nov 27, 2023 · 58bcb73 · 58bcb73
1 parent 5021247
commit 58bcb73
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 18 deletions.
diff --git a/frontend/desktop/src/pages/task/TaskExecute/ExecuteInfo.vue b/frontend/desktop/src/pages/task/TaskExecute/ExecuteInfo.vue
@@ -340,7 +340,7 @@
                 subCanvasData: {},
                 timer: null,
                 subprocessLoading: true,
-                subprocessTasks: [],
+                subprocessTasks: {},
                 subprocessNodeStatus: {},
                 subNodesExpanded: [], // 节点树展开的独立子流程节点
                 subProcessHeight: 160,
@@ -363,9 +363,9 @@
                 const { root_node, node_id, taskId } = this.nodeDetailConfig
                 let nodes = this.nodeDisplayStatus.children || {}
                 // 独立子流程节点状态特殊处理
-                if (taskId && Object.keys(this.subprocessNodeStatus).length) {
+                if (taskId) {
                     nodes = this.subprocessNodeStatus[taskId]
-                    nodes = nodes && nodes.data.children
+                    nodes = nodes ? nodes.data.children : {}
                 }
                 if (this.subProcessPipeline) {
                     const parentId = root_node?.split('-') || []
@@ -622,7 +622,7 @@
                     } else if (this.subProcessPipeline) {
                         this.subprocessLoading = false
                     }
-                    this.historyInfo = respData.skip ? [] : [respData]
+                    this.historyInfo = [respData]
                     if (respData.histories) {
                         this.historyInfo.unshift(...respData.histories)
                     }
@@ -1029,8 +1029,15 @@
                     this.toggleNodeActive(this.nodeDetailConfig.node_id, false)
                 }
                 // 如果点击的是子流程节点或者是不属于当前所选中节点树的节点，需要重新刷新子流程画布
-                const updateCanvas = node.parentId && (!this.subProcessPipeline || !this.subProcessPipeline.location.find(item => item.id === node.id))
-                if (node.isSubProcess || updateCanvas) {
+                let updateCanvas = false
+                if (node.isSubProcess) {
+                    updateCanvas = node.id !== this.nodeDetailConfig.node_id
+                }
+                if (!updateCanvas && node.parentId) {
+                    const nodeId = node.conditionType ? node.id.split('-')[0] : node.id
+                    updateCanvas = !this.subProcessPipeline?.location.find(item => item.id === nodeId)
+                }
+                if (updateCanvas) {
                     this.canvasRandomKey = new Date().getTime()
                     this.$nextTick(() => {
                         this.setCanvasZoomPosition()
@@ -1384,7 +1391,7 @@
                     }
                     const resp = await this.getBatchInstanceStatus(data)
                     if (!resp.result) return
-                    Object.assign(this.subprocessNodeStatus, resp.data)
+                    this.subprocessNodeStatus = resp.data
                     for (const [key, value] of Object.entries(resp.data)) {
                         const { root_node, node_id } = this.subprocessTasks[key]
                         const nodeInfo = this.getNodeInfo(this.nodeData, root_node, node_id)

diff --git a/frontend/desktop/src/pages/task/TaskExecute/NodeTree.vue b/frontend/desktop/src/pages/task/TaskExecute/NodeTree.vue
@@ -86,7 +86,7 @@
             setDefaultActiveId (treeData = [], id) {
                 return treeData.some(item => {
                     if (item.id === id) {
-                        item.expanded = !!item.isSubProcess || !!item.conditionType
+                        item.expanded = !!item.isSubProcess || !!item.conditionType || item.isGateway
                         return true
                     } else if (item.children?.length) {
                         if (item.expanded) {

diff --git a/frontend/desktop/src/pages/task/TaskExecute/NodeTreeItem.vue b/frontend/desktop/src/pages/task/TaskExecute/NodeTreeItem.vue
@@ -83,7 +83,7 @@
                 :active-id="activeId"
                 :node-list="node.children"
                 @dynamicLoad="$emit('dynamicLoad', $event)"
-                @click="handleClickNode">
+                @click="$emit('click', $event)">
             </NodeTreeItem>
         </li>
     </ul>
@@ -142,7 +142,10 @@
                     node.expanded = true
                     return
                 }
-                if (!node.expanded) {
+                if (node.expanded) {
+                    const activeId = node.parentId ? node.id + '-' + node.parentId : node.id
+                    node.expanded = activeId !== this.activeId
+                } else {
                     node.expanded = true
                 }
                 this.$emit('click', node)

diff --git a/frontend/desktop/src/pages/task/TaskExecute/TaskOperation.vue b/frontend/desktop/src/pages/task/TaskExecute/TaskOperation.vue
@@ -1240,6 +1240,7 @@
                             Promise.resolve(this.loadTaskStatus()).then(() => {
                                 this.onNodeClick(data.node_id)
                                 this.retryNodeId = undefined
+                                this.isSourceDetailSideBar = false
                             })
                         }, 1000)
                     } else {
@@ -1596,7 +1597,8 @@
                                     expanded: false,
                                     target: flows[key].target,
                                     gatewayId: id,
-                                    children: []
+                                    children: [],
+                                    taskId
                                 }
                             })
                             // 添加条件分支默认节点
@@ -1614,7 +1616,8 @@
                                     expanded: false,
                                     target: flows[flow_id].target,
                                     gatewayId: id,
-                                    children: []
+                                    children: [],
+                                    taskId
                                 })
                             }
                         } else if (nodeConfig.type === 'ParallelGateway') {
@@ -1633,7 +1636,8 @@
                                     conditionType: 'parallel',
                                     target: flows[key].target,
                                     gatewayId: id,
-                                    children: []
+                                    children: [],
+                                    taskId
                                 }
                             })
                             if (this.nodeIds[flowId]) {
@@ -2354,6 +2358,7 @@
                             Promise.resolve(this.loadTaskStatus()).then(() => {
                                 this.onNodeClick(data.node_id)
                                 this.retryNodeId = undefined
+                                this.isSourceDetailSideBar = false
                             })
                         }, 1000)
                     } else {
@@ -2374,6 +2379,7 @@
                 // 重新打开详情面板
                 if (this.isSourceDetailSideBar) {
                     this.onNodeClick(id)
+                    this.isSourceDetailSideBar = false
                 }
             },
             onModifyTimeSuccess (id) {
@@ -2435,6 +2441,7 @@
                 // 重新打开详情面板
                 if (this.isSourceDetailSideBar) {
                     this.onNodeClick(this.retryNodeId)
+                    this.isSourceDetailSideBar = false
                 }
                 this.retryNodeId = undefined
             },
@@ -2533,13 +2540,27 @@
                     const execInfoInstance = this.$refs.executeInfo
                     execInfoInstance.loading = true
                     execInfoInstance.subprocessLoading = !!execInfoInstance.subProcessPipeline
-                    setTimeout(() => {
-                        Promise.resolve(this.loadTaskStatus()).then(() => {
-                            execInfoInstance.loadNodeInfo()
-                        }).catch(() => {
+                    setTimeout(async () => {
+                        try {
+                            const { root_node, component_code, taskId } = this.nodeDetailConfig
+                            // 重新拉取父流程状态
+                            await this.loadTaskStatus()
+                            // 更新节点详情
+                            await execInfoInstance.loadNodeInfo()
+                            // 拉取独立子流程状态
+                            if (taskId && component_code !== 'subprocess_plugin') {
+                                const nodes = root_node.split('-')
+                                execInfoInstance.subprocessTasks[taskId] = {
+                                    root_node: nodes.slice(0, -1).join('-'),
+                                    node_id: nodes.slice(-1)[0]
+                                }
+                                // 获取独立子流程任务状态
+                                execInfoInstance.loadSubprocessStatus()
+                            }
+                        } catch (error) {
                             execInfoInstance.loading = false
                             execInfoInstance.subprocessLoading = false
-                        })
+                        }
                     }, 1000)
                 } else {
                     this.isNodeInfoPanelShow = false