From caedfac09a080804fb38447d0c7db23600d327c7 Mon Sep 17 00:00:00 2001
From: yiwenZhou <67539158+ywywZhou@users.noreply.github.com>
Date: Wed, 13 Mar 2024 14:56:21 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E9=94=81=E6=AD=BBvue=E7=89=88=E6=9C=AC?=
 =?UTF-8?q?=20&&=20=E8=8A=82=E7=82=B9=E8=AF=A6=E6=83=85loading=E5=8A=A0?=
 =?UTF-8?q?=E8=BD=BD=E9=80=BB=E8=BE=91=E8=B0=83=E6=95=B4=20&&=20=E9=BB=98?=
 =?UTF-8?q?=E8=AE=A4=E5=88=86=E6=94=AF=E6=9D=A1=E4=BB=B6=E9=80=89=E4=B8=AD?=
 =?UTF-8?q?=E5=BC=82=E5=B8=B8=E4=BF=AE=E5=A4=8D=20--ignore=20(#7389)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix: 锁死vue版本 --ignore

* fix: 默认网关分支选中展示异常修复 --ignore

* fix: 子画布默认网关分支缺少默认样式问题修复 --ignore

* fix: 节点详情loading加载逻辑调整 #7386
# Reviewed, transaction id: 3786
---
 frontend/desktop/package.json                 |   2 +-
 .../common/TemplateCanvas/index.vue           |   3 +-
 .../pages/task/TaskExecute/ExecuteInfo.vue    |   0
 .../components/NodeCanvas/index.vue           |   1 +
 .../components/TaskCondition.vue              | 113 ++----------------
 .../components/NodeExecuteInfo/index.vue      |  40 +++----
 .../ExecuteInfo/components/NodeTree/index.vue |   1 -
 .../task/TaskExecute/ExecuteInfo/index.vue    |  28 ++---
 .../pages/task/TaskExecute/TaskOperation.vue  |  44 ++-----
 9 files changed, 50 insertions(+), 182 deletions(-)
 delete mode 100644 frontend/desktop/src/pages/task/TaskExecute/ExecuteInfo.vue

diff --git a/frontend/desktop/package.json b/frontend/desktop/package.json
index 8ad6a6ec3a..fad8cfa4d3 100644
--- a/frontend/desktop/package.json
+++ b/frontend/desktop/package.json
@@ -36,7 +36,7 @@
     "qs": "^6.5.2",
     "serialize-javascript": "^3.0.0",
     "vee-validate": "^2.1.0-beta.6",
-    "vue": "^2.7.14",
+    "vue": "2.7.14",
     "vue-i18n": "^8.17.5",
     "vue-router": "^3.0.1",
     "vuedraggable": "^2.16.0",
diff --git a/frontend/desktop/src/components/common/TemplateCanvas/index.vue b/frontend/desktop/src/components/common/TemplateCanvas/index.vue
index 2663214d04..b889e0f23c 100644
--- a/frontend/desktop/src/components/common/TemplateCanvas/index.vue
+++ b/frontend/desktop/src/components/common/TemplateCanvas/index.vue
@@ -924,7 +924,8 @@
                         // 兼容旧数据，分支条件里没有 name 属性的情况
                         const labelName = conditionInfo.name || labelValue
                         const loc = ('loc' in conditionInfo) ? conditionInfo.loc : -70
-                        const gatewayInfo = this.$store.state.template.gateways[line.source.id]
+                        const gateways = this.canvasData.gateways || this.$store.state.template.gateways
+                        const gatewayInfo = gateways[line.source.id]
                         let defaultCls = conditionInfo.default_condition ? 'default-branch' : ''
                         if (gatewayInfo && gatewayInfo.default_condition && gatewayInfo.default_condition.flow_id === lineId) {
                             defaultCls = 'default-branch'
diff --git a/frontend/desktop/src/pages/task/TaskExecute/ExecuteInfo.vue b/frontend/desktop/src/pages/task/TaskExecute/ExecuteInfo.vue
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/frontend/desktop/src/pages/task/TaskExecute/ExecuteInfo/components/NodeCanvas/index.vue b/frontend/desktop/src/pages/task/TaskExecute/ExecuteInfo/components/NodeCanvas/index.vue
index a9843280a5..8aed215cf7 100644
--- a/frontend/desktop/src/pages/task/TaskExecute/ExecuteInfo/components/NodeCanvas/index.vue
+++ b/frontend/desktop/src/pages/task/TaskExecute/ExecuteInfo/components/NodeCanvas/index.vue
@@ -92,6 +92,7 @@
                         const code = item.type === 'tasknode' ? activities[item.id].component.code : ''
                         return { ...item, mode: 'execute', checked: true, code, ready: true }
                     }),
+                    gateways,
                     branchConditions
                 }
             }
diff --git a/frontend/desktop/src/pages/task/TaskExecute/ExecuteInfo/components/NodeExecuteInfo/components/TaskCondition.vue b/frontend/desktop/src/pages/task/TaskExecute/ExecuteInfo/components/NodeExecuteInfo/components/TaskCondition.vue
index 09c8794440..99958989b3 100644
--- a/frontend/desktop/src/pages/task/TaskExecute/ExecuteInfo/components/NodeExecuteInfo/components/TaskCondition.vue
+++ b/frontend/desktop/src/pages/task/TaskExecute/ExecuteInfo/components/NodeExecuteInfo/components/TaskCondition.vue
@@ -17,8 +17,8 @@
                     {{ $t('分支类型') }}
                 </label>
                 <bk-radio-group v-model="branchType">
-                    <bk-radio :value="'customize'" :disabled="isReadonly">{{ $t('自定义分支') }}</bk-radio>
-                    <bk-radio :value="'default'" :disabled="isReadonly || hasDefaultBranch">
+                    <bk-radio :value="'customize'" disabled>{{ $t('自定义分支') }}</bk-radio>
+                    <bk-radio :value="'default'" disabled>
                         {{ $t('默认分支') }}
                         <i v-bk-tooltips="defaultTipsConfig" class="common-icon-info"></i>
                     </bk-radio>
@@ -47,14 +47,11 @@
                         <p>{{ $t('包含：') }}<code class="code">${key} in (1,2,3)</code></p>
                     </div>
                     <full-code-editor
-                        v-validate="expressionRule"
                         name="expression"
                         :value="expression"
-                        :options="{ language: 'python', readOnly: isReadonly }"
-                        @input="onDataChange">
+                        :options="{ language: 'python', readOnly: true }">
                     </full-code-editor>
                 </div>
-                <span v-show="veeErrors.has('expression')" class="common-error-tip error-msg">{{ veeErrors.first('expression') }}</span>
             </div>
         </div>
     </div>
@@ -62,8 +59,6 @@
 
 <script>
     import i18n from '@/config/i18n/index.js'
-    import { mapMutations } from 'vuex'
-    import { NAME_REG } from '@/constants/index.js'
     import FullCodeEditor from '@/components/common/FullCodeEditor.vue'
 
     export default {
@@ -72,107 +67,21 @@
             FullCodeEditor
         },
         props: {
-            isShow: Boolean,
-            gateways: Object,
-            conditionData: Object,
-            isReadonly: {
-                type: Boolean,
-                default: false
-            }
+            conditionData: Object
         },
         data () {
-            const { name, value, id, nodeId } = this.conditionData
-            const gwConfig = this.gateways[nodeId]
-            const defaultCondition = gwConfig && gwConfig.default_condition // 默认分支配置
-            const isDefaultBranch = defaultCondition && defaultCondition.flow_id === id // 当前分支是否为默认分支
-            const branchType = isDefaultBranch ? 'default' : 'customize'
-            let hasDefaultBranch = false
-            if (defaultCondition && defaultCondition.flow_id !== id) {
-                hasDefaultBranch = true
-            }
             return {
-                branchType, // 当前分支类型
-                hasDefaultBranch, // 是否存在默认分支(不包含当前分支)
                 defaultTipsConfig: {
                     width: 216,
                     content: i18n.t('所有分支均不匹配时执行，类似switch-case-default里面的default'),
                     placements: ['bottom-start']
                 },
-                conditionName: name,
-                expression: value,
-                conditionRule: {
-                    required: true,
-                    max: 20,
-                    regex: NAME_REG
-                },
-                expressionRule: {
-                    required: true
-                }
-            }
-        },
-        watch: {
-            conditionData (val) {
-                const { name, value } = val
-                this.conditionName = name
-                this.expression = value
-            },
-            branchType: {
-                handler (val) {
-                    if (val === 'default') {
-                        this.conditionName = i18n.t('默认')
-                    } else {
-                        this.conditionName = this.conditionData.name
-                    }
-                }
+                expression: this.conditionData.value
             }
         },
-        methods: {
-            ...mapMutations('template/', [
-                'setBranchCondition'
-            ]),
-            onDataChange (val) {
-                this.expression = val
-            },
-            // 关闭配置面板
-            onBeforeClose () {
-                if (this.isReadonly) {
-                    this.close()
-                    return true
-                }
-                const { name, value } = this.conditionData
-                if (this.conditionName === name && this.expression === value) {
-                    this.close()
-                    return true
-                }
-                this.$emit('onBeforeClose')
-            },
-            confirm () {
-                this.$validator.validateAll().then(result => {
-                    if (result) {
-                        const { id, nodeId, tag, overlayId, loc } = this.conditionData
-                        const data = {
-                            id,
-                            nodeId,
-                            overlayId,
-                            loc,
-                            value: this.branchType === 'default' ? undefined : this.expression.trim(),
-                            name: this.conditionName
-                        }
-                        if (this.branchType === 'default') {
-                            data.default_condition = {
-                                name: this.conditionName,
-                                tag,
-                                flow_id: id
-                            }
-                        }
-                        this.setBranchCondition(data)
-                        this.$emit('updataCanvasCondition', data)
-                        this.close()
-                    }
-                })
-            },
-            close (openVariablePanel) {
-                this.$emit('close', openVariablePanel)
+        computed: {
+            branchType () {
+                return this.conditionData.conditionType === 'default' ? 'default' : 'customize'
             }
         }
     }
@@ -248,12 +157,6 @@
                 margin-left: 0px;
             }
         }
-        .btn-wrap {
-            position: relative;
-            padding: 8px 20px;
-            border-top: 1px solid #cacedb;
-            background: #fff;
-        }
     }
     .code-wrapper .full-code-editor {
         height: 300px;
diff --git a/frontend/desktop/src/pages/task/TaskExecute/ExecuteInfo/components/NodeExecuteInfo/index.vue b/frontend/desktop/src/pages/task/TaskExecute/ExecuteInfo/components/NodeExecuteInfo/index.vue
index 9a7b4d40b5..36c0353e72 100644
--- a/frontend/desktop/src/pages/task/TaskExecute/ExecuteInfo/components/NodeExecuteInfo/index.vue
+++ b/frontend/desktop/src/pages/task/TaskExecute/ExecuteInfo/components/NodeExecuteInfo/index.vue
@@ -1,27 +1,20 @@
 <template>
-    <div
-        :class="['node-execute-info', { 'loading': loading || isRecordLoading }]"
-        v-bkloading="{ isLoading: loading || isRecordLoading, opacity: 1, zIndex: 100 }"
-        :key="randomKey">
+    <div :class="['node-execute-info', { 'loading': loading || isRecordLoading }]" :key="randomKey">
         <bk-tab
             :active.sync="curActiveTab"
             type="unborder-card"
             ext-cls="execute-info-tab"
             @tab-change="onTabChange">
-            <bk-tab-panel name="record" v-if="!isCondition" :label="$t('执行详情')"></bk-tab-panel>
-            <bk-tab-panel name="config" v-if="isCondition || ['ServiceActivity', 'SubProcess'].includes(nodeDetailConfig.type)" :label="$t('配置快照')"></bk-tab-panel>
-            <bk-tab-panel name="history" v-if="!isCondition" :label="$t('操作历史')"></bk-tab-panel>
-            <bk-tab-panel name="log" v-if="!isCondition" :label="$t('调用日志')"></bk-tab-panel>
+            <bk-tab-panel name="record" v-if="!isBranchCondition" :label="$t('执行详情')"></bk-tab-panel>
+            <bk-tab-panel name="config" v-if="isBranchCondition || ['ServiceActivity', 'SubProcess'].includes(nodeDetailConfig.type)" :label="$t('配置快照')"></bk-tab-panel>
+            <bk-tab-panel name="history" v-if="!isBranchCondition" :label="$t('操作历史')"></bk-tab-panel>
+            <bk-tab-panel name="log" v-if="!isBranchCondition" :label="$t('调用日志')"></bk-tab-panel>
         </bk-tab>
         <div class="scroll-area">
             <TaskCondition
-                v-if="isCondition"
+                v-if="isBranchCondition"
                 ref="conditionEdit"
-                :is-readonly="true"
-                :is-show.sync="isShow"
-                :gateways="gateways"
-                :condition-data="conditionData"
-                @close="$emit('close')">
+                :condition-data="conditionData">
             </TaskCondition>
             <template v-else>
                 <section class="execute-time-section" v-if="isExecuteTimeShow">
@@ -132,18 +125,6 @@
                 type: Boolean,
                 default: false
             },
-            isCondition: {
-                type: Boolean,
-                default: false
-            },
-            isShow: {
-                type: Boolean,
-                default: false
-            },
-            gateways: {
-                type: Object,
-                default: () => ({})
-            },
             conditionData: {
                 type: Object,
                 default: () => ({})
@@ -223,6 +204,10 @@
                 if (!this.isThirdPartyNode) return ''
                 const nodeInfo = this.pipelineTree.activities[this.nodeDetailConfig.node_id]
                 return nodeInfo ? nodeInfo.component.data?.plugin_code?.value : ''
+            },
+            isBranchCondition () {
+                const { conditionType } = this.conditionData
+                return conditionType && conditionType !== 'parallel'
             }
         },
         watch: {
@@ -239,6 +224,9 @@
                     }
                 },
                 deep: true
+            },
+            isRecordLoading (val) {
+                this.$emit('updateExecuteInfoLoading', val)
             }
         },
         methods: {
diff --git a/frontend/desktop/src/pages/task/TaskExecute/ExecuteInfo/components/NodeTree/index.vue b/frontend/desktop/src/pages/task/TaskExecute/ExecuteInfo/components/NodeTree/index.vue
index e1c181fa7a..444825da43 100644
--- a/frontend/desktop/src/pages/task/TaskExecute/ExecuteInfo/components/NodeTree/index.vue
+++ b/frontend/desktop/src/pages/task/TaskExecute/ExecuteInfo/components/NodeTree/index.vue
@@ -856,7 +856,6 @@
                     code = nodeInfo.component.code
                     version = nodeInfo.component.version || 'legacy'
                 }
-                this.isCondition = false
                 const subprocessStack = parentId && !taskId ? parentId.split('-') : []
                 return {
                     component_code: code,
diff --git a/frontend/desktop/src/pages/task/TaskExecute/ExecuteInfo/index.vue b/frontend/desktop/src/pages/task/TaskExecute/ExecuteInfo/index.vue
index 228fc35cc9..a689fd100d 100644
--- a/frontend/desktop/src/pages/task/TaskExecute/ExecuteInfo/index.vue
+++ b/frontend/desktop/src/pages/task/TaskExecute/ExecuteInfo/index.vue
@@ -28,7 +28,7 @@
             </NodeTree>
             <div slot="main" class="execute-content">
                 <div class="execute-head">
-                    <span class="node-name">{{isCondition ? conditionData.name : nodeActivity.name}}</span>
+                    <span class="node-name">{{conditionData.name || nodeActivity.name}}</span>
                     <bk-divider direction="vertical"></bk-divider>
                     <div class="node-state">
                         <span :class="displayState"></span>
@@ -48,11 +48,9 @@
                     </NodeCanvas>
                     <NodeExecuteInfo
                         v-if="nodeActivity"
-                        :key="nodeDetailConfig.node_id"
+                        v-bkloading="{ isLoading: loading || executeInfoLoading, opacity: 1, zIndex: 100 }"
+                        :key="executeInfoRandomKey"
                         :loading="loading"
-                        :is-condition="isCondition"
-                        :is-show="isShow"
-                        :gateways="gateways"
                         :condition-data="conditionData"
                         :node-activity="nodeActivity"
                         :node-detail-config="nodeDetailConfig"
@@ -64,12 +62,12 @@
                         :subprocess-pipeline="subprocessPipeline"
                         :real-time-state="realTimeState"
                         :auto-retry-info="autoRetryInfo"
-                        @onSelectExecuteTime="onSelectExecuteTime"
-                        @close="$emit(close)">
+                        @updateExecuteInfoLoading="executeInfoLoading = $event"
+                        @onSelectExecuteTime="onSelectExecuteTime">
                     </NodeExecuteInfo>
                 </div>
                 <NodeAction
-                    v-if="!loading"
+                    v-if="!loading && !executeInfoLoading"
                     :real-time-state="realTimeState"
                     :node-detail-config="nodeDetailConfig"
                     :node-state-mapping="nodeStateMapping"
@@ -129,10 +127,6 @@
                 type: String,
                 default: ''
             },
-            isCondition: {
-                type: Boolean,
-                default: false
-            },
             instanceFlow: {
                 type: String,
                 required: true
@@ -155,19 +149,19 @@
                 type: Object,
                 required: true
             },
-            isShow: Boolean,
-            gateways: Object,
             conditionData: Object,
             sidebarWidth: Number
         },
         data () {
             return {
                 canvasRandomKey: null,
+                executeInfoRandomKey: null,
                 loading: true,
                 executeInfo: {},
                 theExecuteTime: undefined,
                 timer: null,
                 subprocessLoading: true,
+                executeInfoLoading: true,
                 subprocessTasks: {},
                 subprocessNodesState: {},
                 notPerformedSubNode: false // 是否为未执行的独立子流程节点
@@ -316,10 +310,13 @@
                 handler (val) {
                     if (val.node_id !== undefined) {
                         this.theExecuteTime = undefined
+                        // 节点切换时重新加载执行详情
+                        this.executeInfoRandomKey = new Date().getTime()
                         // 未执行的独立子流程节点
                         if (this.notPerformedSubNode) {
                             this.loading = false
                             this.subprocessLoading = false
+                            this.executeInfoLoading = false
                         } else {
                             this.executeInfo.state = ''
                             this.loadNodeInfo()
@@ -383,9 +380,6 @@
                     this.loading = false
                 }
             },
-            close () {
-                this.$emit('close')
-            },
             async getTaskNodeDetail (nodeConfig = this.nodeDetailConfig) {
                 try {
                     let query = Object.assign({}, nodeConfig, { loop: this.theExecuteTime })
diff --git a/frontend/desktop/src/pages/task/TaskExecute/TaskOperation.vue b/frontend/desktop/src/pages/task/TaskExecute/TaskOperation.vue
index 2f1cda8fc2..cb7c6e0a03 100644
--- a/frontend/desktop/src/pages/task/TaskExecute/TaskOperation.vue
+++ b/frontend/desktop/src/pages/task/TaskExecute/TaskOperation.vue
@@ -107,14 +107,10 @@
                     :admin-view="adminView"
                     :pipeline-data="nodePipelineData"
                     :default-active-id="defaultActiveId"
-                    :is-condition="isCondition"
                     :node-detail-config="nodeDetailConfig"
-                    :is-show.sync="isShowConditionEdit"
-                    :gateways="pipelineData.gateways"
                     :condition-data="conditionData"
                     :sidebar-width="sidebarWidth"
                     :instance-flow="instanceFlow"
-                    @close="onCloseConfigPanel"
                     @onRetryClick="onRetryClick"
                     @onSkipClick="onSkipClick"
                     @onTaskNodeResumeClick="onTaskNodeResumeClick"
@@ -175,15 +171,6 @@
             @onConfirmInjectVar="onConfirmInjectVar"
             @onCancelInjectVar="onCancelInjectVar">
         </injectVariableDialog>
-        <!-- <condition-edit
-            v-if="isShowConditionEdit"
-            ref="conditionEdit"
-            :is-readonly="true"
-            :is-show.sync="isShowConditionEdit"
-            :gateways="pipelineData.gateways"
-            :condition-data="conditionData"
-            @close="onCloseConfigPanel">
-        </condition-edit> -->
         <bk-dialog
             width="600"
             :theme="'primary'"
@@ -366,7 +353,6 @@
                 operateLoading: false,
                 retrievedCovergeGateways: [], // 遍历过的汇聚节点
                 pollErrorTimes: 0, // 任务状态查询异常连续三次后，停止轮询
-                isShowConditionEdit: false, // 条件分支侧栏
                 conditionData: {},
                 tabIconState: '',
                 approval: { // 节点审批
@@ -394,7 +380,6 @@
                 isInjectVarDialogShow: false,
                 nodeDisplayStatus: {},
                 showNodeList: [0, 1, 2],
-                isCondition: false,
                 conditionOutgoing: [],
                 unrenderedCoverNode: [],
                 subProcessTaskId: null,
@@ -1570,9 +1555,6 @@
                     console.warn(error)
                 }
             },
-            onCloseConfigPanel () {
-                this.isShowConditionEdit = false
-            },
             async onSubflowPauseResumeClick (id, value) {
                 if (this.pending.subflowPause) return
                 try {
@@ -1643,11 +1625,10 @@
                 this.openNodeInfoPanel(type, name)
             },
             // 打开节点参数信息面板
-            openNodeInfoPanel (type, name, isCondition = false) {
+            openNodeInfoPanel (type, name) {
                 this.sideSliderTitle = name
                 this.isNodeInfoPanelShow = true
                 this.nodeInfoType = type
-                this.isCondition = isCondition
             },
             // 注入全局变量
             onInjectGlobalVariable () {
@@ -1774,16 +1755,17 @@
                 }
                 this.openNodeInfoPanel('executeInfo', i18n.t('节点详情'))
             },
-            onOpenConditionEdit (data, isCondition = true) {
-                if (isCondition && data) {
-                    this.onNodeClick(data.nodeId)
-                    // 生成网关添加id 网关id + 分支条件outgoning + 特殊标识
-                    this.defaultActiveId = data.nodeId + '-' + data.id + '-condition'
-                    this.isCondition = true
-                    this.isShowConditionEdit = true
-                    this.conditionData = { ...data }
+            onOpenConditionEdit (data) {
+                this.onNodeClick(data.nodeId)
+                // 生成网关添加id 网关id + 分支条件outgoning + 特殊标识
+                this.defaultActiveId = data.nodeId + '-' + data.id + '-condition'
+                const { gateways } = this.pipelineData
+                const isDefaultBranch = gateways[data.nodeId]?.default_condition?.flow_id === data.id
+                this.conditionData = {
+                    ...data,
+                    id: `${data.nodeId}-${data.id}`,
+                    conditionType: isDefaultBranch ? 'default' : 'condition'
                 }
-                this.isCondition = isCondition
             },
             /**
              * 切换为子流程画布
@@ -1923,10 +1905,9 @@
                     version = (nodeInfo.type === 'ServiceActivity' ? nodeInfo.component.version : nodeInfo.version) || 'legacy'
                 }
                 let nodeId = id
-                this.isCondition = false
+                this.conditionData = {}
                 if (conditionType) {
                     nodeId = id.split('-')[0]
-                    this.isCondition = true
                     this.conditionData = { ...node }
                 }
                 this.nodeDetailConfig = {
@@ -2161,6 +2142,7 @@
                 this.nodeInfoType = ''
                 this.retryNodeName = ''
                 this.sidebarWidth = 960
+                this.conditionData = {}
                 this.updateNodeActived(this.nodeDetailConfig.node_id, false)
             },
             // 判断RUNNING的节点是否有暂停节点，若有，则将当前任务状态标记为暂停状态