子流程交互优化 (#7182)

* bugfix: 线上测试问题修复 * optimization: 子流程交互优化
TencentBlueKing · Nov 23, 2023 · e88ec66 · e88ec66
1 parent 96a59b1
commit e88ec66
Show file tree

Hide file tree

Showing 8 changed files with 173 additions and 73 deletions.
diff --git a/frontend/desktop/src/components/common/RenderForm/tags/TagInput.vue b/frontend/desktop/src/components/common/RenderForm/tags/TagInput.vue
@@ -171,7 +171,7 @@
                         const divInputDom = this.$el.querySelector('.div-input')
                         if (divInputDom) {
                             divInputDom.innerText = this.value
-                            this.handleInputBlur()
+                            this.updateInputHtml()
                         }
                     })
                 }
@@ -182,15 +182,15 @@
                     const divInputDom = this.$el.querySelector('.div-input')
                     divInputDom.innerText = this.value
                 } else {
-                    this.handleInputBlur()
+                    this.updateInputHtml()
                 }
             },
             formMode (val) {
                 if (val) {
                     this.$nextTick(() => {
                         const divInputDom = this.$el.querySelector('.div-input')
                         divInputDom.innerText = this.value
-                        this.handleInputBlur()
+                        this.updateInputHtml()
                     })
                 } else {
                     this.validate()
@@ -205,7 +205,7 @@
             if (divInputDom) {
                 divInputDom.innerText = this.value
                 if (this.render && this.value) {
-                    this.handleInputBlur()
+                    this.updateInputHtml()
                 }
                 divInputDom.addEventListener('paste', this.handlePaste)
             }

diff --git a/frontend/desktop/src/components/common/RenderForm/tags/TagTextarea.vue b/frontend/desktop/src/components/common/RenderForm/tags/TagTextarea.vue
@@ -138,7 +138,7 @@
                         const divInputDom = this.$el.querySelector('.div-input')
                         if (divInputDom) {
                             divInputDom.innerText = this.value
-                            this.handleInputBlur()
+                            this.updateInputHtml()
                         }
                     })
                 }
@@ -149,7 +149,7 @@
                     const divInputDom = this.$el.querySelector('.div-input')
                     divInputDom.innerText = this.value
                 } else {
-                    this.handleInputBlur()
+                    this.updateInputHtml()
                 }
             }
         },
@@ -162,7 +162,7 @@
                 const value = typeof this.value === 'string' ? this.value : JSON.stringify(this.value)
                 divInputDom.innerText = value
                 if (this.render && value) {
-                    this.handleInputBlur()
+                    this.updateInputHtml()
                 }
                 divInputDom.addEventListener('paste', this.handlePaste)
             }

diff --git a/frontend/desktop/src/pages/task/TaskExecute/ExecuteInfo.vue b/frontend/desktop/src/pages/task/TaskExecute/ExecuteInfo.vue
@@ -168,7 +168,7 @@
                         </div>
                     </div>
                 </div>
-                <div class="action-wrapper" v-if="isShowActionWrap">
+                <div class="action-wrapper" v-if="isShowActionWrap && !loading">
                     <template v-if="executeInfo.state === 'RUNNING' && !isSubProcessNode">
                         <bk-button
                             v-if="nodeDetailConfig.component_code === 'pause_node'"
@@ -227,7 +227,7 @@
 <script>
     import i18n from '@/config/i18n/index.js'
     import TemplateCanvas from '@/components/common/TemplateCanvas/index.vue'
-    import { mapState, mapMutations, mapActions } from 'vuex'
+    import { mapState, mapActions } from 'vuex'
     import axios from 'axios'
     import tools from '@/utils/tools.js'
     import atomFilter from '@/utils/atomFilter.js'
@@ -332,8 +332,6 @@
                 loop: 1,
                 theExecuteTime: undefined,
                 isReadyStatus: true,
-                isShowSkipBtn: false,
-                isShowRetryBtn: false,
                 curActiveTab: 'record',
                 theExecuteRecord: 0,
                 executeRecord: {},
@@ -350,9 +348,6 @@
             }
         },
         computed: {
-            ...mapMutations('template/', [
-                'setLine'
-            ]),
             ...mapState({
                 'atomFormConfig': state => state.atomForm.config,
                 'atomOutputConfig': state => state.atomForm.outputConfig,
@@ -441,6 +436,22 @@
             isShowContinueBtn () {
                 return this.isLegacySubProcess && this.executeInfo.state === 'SUSPENDED'
             },
+            isShowSkipBtn () {
+                let isShow = false
+                if (this.realTimeState.state === 'FAILED') {
+                    const activity = this.pipelineData.activities[this.nodeDetailConfig.node_id]
+                    isShow = this.location.type === 'tasknode' && activity.skippable
+                }
+                return isShow
+            },
+            isShowRetryBtn () {
+                let isShow = false
+                if (this.realTimeState.state === 'FAILED') {
+                    const activity = this.pipelineData.activities[this.nodeDetailConfig.node_id]
+                    isShow = this.location.type === 'tasknode' ? activity.retryable : false
+                }
+                return isShow
+            },
             isShowActionWrap () {
                 // 任务终止时禁止节点操作
                 if (this.state === 'REVOKED') return false
@@ -508,7 +519,10 @@
                             this.loading = false
                             this.subprocessLoading = false
                             this.randomKey = new Date().getTime()
+                            const nodeInfo = this.getNodeInfo(this.nodeData, val.root_node, val.node_id)
+                            nodeInfo.dynamicLoad = false
                         } else {
+                            this.executeInfo.state = ''
                             this.loadNodeInfo()
                         }
                     }
@@ -625,15 +639,6 @@
                         const pluginInfo = this.atomFormInfo[componentCode][version]
                         this.executeInfo.plugin_name = `${pluginInfo.group_name}-${pluginInfo.name}`
                     }
-                    // 获取执行失败节点是否允许跳过，重试状态
-                    if (this.realTimeState.state === 'FAILED') {
-                        const activity = this.pipelineData.activities[this.nodeDetailConfig.node_id]
-                        this.isShowSkipBtn = this.location.type === 'tasknode' && activity.skippable
-                        this.isShowRetryBtn = this.location.type === 'tasknode' ? activity.retryable : false
-                    } else {
-                        this.isShowSkipBtn = false
-                        this.isShowRetryBtn = false
-                    }
                 } catch (e) {
                     this.theExecuteTime = undefined
                     this.executeInfo = {}
@@ -970,7 +975,14 @@
                 this.randomKey = new Date().getTime()
             },
             onNodeClick (node) {
-                const nodeInfo = this.getNodeInfo(this.nodeData, '', node)
+                let parentId = ''
+                const { node_id: nodeId, root_node: rootNode } = this.nodeDetailConfig
+                if (nodeId === this.subProcessPipeline.id) {
+                    parentId = rootNode ? `${rootNode}-${nodeId}` : nodeId
+                } else {
+                    parentId = rootNode
+                }
+                const nodeInfo = this.getNodeInfo(this.nodeData, parentId, node)
                 if (nodeInfo) {
                     nodeInfo && this.onSelectNode(nodeInfo)
                     const parentInstance = this.$parent.$parent
@@ -1500,6 +1512,9 @@
     }
     .bk-resize-layout-border {
         border: none;
+        .bk-resize-layout-aside {
+            overflow: hidden;
+        }
     }
     .action-wrapper {
         width: 100%;

diff --git a/frontend/desktop/src/pages/task/TaskExecute/ExecuteInfo/ExecuteRecord.vue b/frontend/desktop/src/pages/task/TaskExecute/ExecuteInfo/ExecuteRecord.vue
@@ -113,7 +113,7 @@
                 if (state === 'CREATED') return this.$t('未执行')
                 // 如果整体任务执行完毕但有的节点没执行的话不展示描述
                 if (['FAILED', 'FINISHED'].includes(state) && state === 'READY') return this.$t('未执行')
-                return skip || error_ignored ? this.$t.t('失败后跳过') : state && TASK_STATE_DICT[state]
+                return skip || error_ignored ? this.$t('失败后跳过') : state && TASK_STATE_DICT[state]
             }
         },
         mounted () {

diff --git a/frontend/desktop/src/pages/task/TaskExecute/ModifyParams.vue b/frontend/desktop/src/pages/task/TaskExecute/ModifyParams.vue
@@ -44,7 +44,7 @@
                         {{ confirmBtnText }}
                     </bk-button>
                 </span>
-                <bk-button theme="default" data-test-id="taskExecute_form_cancelBtn" @click="onCancelRetry">{{ $t('取消') }}</bk-button>
+                <bk-button theme="default" :disabled="pending" data-test-id="taskExecute_form_cancelBtn" @click="onCancelRetry">{{ $t('取消') }}</bk-button>
             </div>
 
             <bk-button v-else theme="default" data-test-id="taskExecute_form_closeBtn" @click="onCancelRetry">{{ $t('关闭') }}</bk-button>

diff --git a/frontend/desktop/src/pages/task/TaskExecute/NodeTree.vue b/frontend/desktop/src/pages/task/TaskExecute/NodeTree.vue
@@ -55,7 +55,20 @@
                         nodeId = val.split('-').slice(0, -1).join('-')
                         this.activeId = nodeId
                     }
-                    this.setDefaultActiveId(this.treeData, nodeId)
+                    // 根据父节点过滤节点树
+                    let nodes = this.treeData
+                    const parentId = val.split('-').slice(1)
+                    if (parentId.length) {
+                        parentId.forEach(id => {
+                            nodes.some(item => {
+                                if (item.id === id) {
+                                    nodes = item.children
+                                    return true
+                                }
+                            })
+                        })
+                    }
+                    this.setDefaultActiveId(nodes, nodeId)
                 },
                 deep: true,
                 immediate: true

diff --git a/frontend/desktop/src/pages/task/TaskExecute/NodeTreeItem.vue b/frontend/desktop/src/pages/task/TaskExecute/NodeTreeItem.vue
@@ -65,8 +65,8 @@
                     <span v-else-if="!node.conditionType" class="default-node" :class="nodeStateMap[node.state]"></span>
                 </div>
                 <!-- 节点名称 -->
-                <span v-bk-overflow-tips class="node-name">
-                    <span>{{ node.title }}</span>
+                <span class="node-name">
+                    <span class="name" v-bk-overflow-tips>{{ node.title }}</span>
                     <span v-if="node.conditionType && (!node.children || !node.children.length)" class="empty-branch">
                         {{ $t('（') + $t('空分支') + $t('）') }}
                     </span>
@@ -283,9 +283,13 @@
                 display: flex;
                 align-items: center;
                 overflow: hidden;
-                text-overflow: ellipsis;
-                white-space: nowrap;
+                .name {
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
+                }
                 .empty-branch {
+                    flex-shrink: 0;
                     font-size: 12px;
                     color: #979ba5;
                 }