fix: 锁死vue版本 && 节点详情loading加载逻辑调整 && 默认分支条件选中异常修复 --ignore (TencentBl…

…ueKing#7389) * fix: 锁死vue版本 --ignore * fix: 默认网关分支选中展示异常修复 --ignore * fix: 子画布默认网关分支缺少默认样式问题修复 --ignore * fix: 节点详情loading加载逻辑调整 TencentBlueKing#7386 # Reviewed, transaction id: 3786
normal-wls · Mar 13, 2024 · caedfac · caedfac
1 parent 42ebea8
commit caedfac
Show file tree

Hide file tree

Showing 9 changed files with 50 additions and 182 deletions.
diff --git 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
@@ -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
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
@@ -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/...ages/task/TaskExecute/ExecuteInfo/components/NodeExecuteInfo/components/TaskCondition.vue b/...ages/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,23 +47,18 @@
                         <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>
 </template>
 
 <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
@@ -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
@@ -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
@@ -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 })