optimization: 子流程节点执行详情输入参数展示异常问题优化

TencentBlueKing · Sep 7, 2023 · a18bb9d · a18bb9d
1 parent d8ce1bc
commit a18bb9d
Show file tree

Hide file tree

Showing 14 changed files with 185 additions and 207 deletions.
diff --git a/frontend/desktop/src/components/common/RenderForm/FormItem.vue b/frontend/desktop/src/components/common/RenderForm/FormItem.vue
@@ -117,6 +117,7 @@
                 :hook="hook"
                 :render="render"
                 :constants="constants"
+                :scheme="scheme"
                 :atom-events="scheme.events"
                 :atom-methods="scheme.methods"
                 :value="formValue"
@@ -162,7 +163,7 @@
 <script>
     import '@/utils/i18n.js'
     import tools from '@/utils/tools.js'
-    import { checkDataType } from '@/utils/checkDataType.js'
+    import { checkDataType, getDefaultValueFormat } from '@/utils/checkDataType.js'
     import FormGroup from './FormGroup.vue'
 
     // 导入 tag 文件注册为组件
@@ -373,6 +374,10 @@
                 return { ...attrs }
             },
             getFormValue (val) {
+                // 不使用默认值
+                if (this.scheme.attrs.usedValue) {
+                    return tools.deepClone(val)
+                }
                 const valueType = checkDataType(val)
 
                 if (valueType === 'Undefined') {
@@ -388,7 +393,7 @@
                         value: ''
                     }
                 } else {
-                    defaultValueFormat = this.getDefaultValueFormat()
+                    defaultValueFormat = getDefaultValueFormat(this.scheme)
                 }
 
                 const isTypeValid = Array.isArray(defaultValueFormat.type)
@@ -404,118 +409,6 @@
 
                 return formValue
             },
-            getDefaultValueFormat () {
-                let valueFormat
-                switch (this.scheme.type) {
-                    case 'input':
-                    case 'textarea':
-                    case 'radio':
-                    case 'text':
-                    case 'datetime':
-                    case 'password':
-                    case 'memberSelector':
-                    case 'logDisplay':
-                    case 'code_editor':
-                    case 'section':
-                        valueFormat = {
-                            type: ['String', 'Number', 'Boolean'],
-                            value: ''
-                        }
-                        break
-                    case 'checkbox':
-                    case 'datatable':
-                    case 'tree':
-                    case 'upload':
-                    case 'cascader':
-                        valueFormat = {
-                            type: 'Array',
-                            value: []
-                        }
-                        break
-                    case 'select':
-                        if (this.scheme.attrs.multiple) {
-                            valueFormat = {
-                                type: 'Array',
-                                value: []
-                            }
-                        } else {
-                            valueFormat = {
-                                type: ['String', 'Number', 'Boolean'],
-                                value: ''
-                            }
-                        }
-                        break
-                    case 'time':
-                        if (this.scheme.attrs.isRange) {
-                            valueFormat = {
-                                type: 'Array',
-                                value: ['00:00:00', '23:59:59']
-                            }
-                        } else {
-                            valueFormat = {
-                                type: 'String',
-                                value: ''
-                            }
-                        }
-                        break
-                    case 'int':
-                        valueFormat = {
-                            type: 'Number',
-                            value: 0
-                        }
-                        break
-                    case 'ip_selector':
-                        valueFormat = {
-                            type: 'Object',
-                            value: {
-                                static_ip_table_config: [],
-                                selectors: [],
-                                ip: [],
-                                topo: [],
-                                group: [],
-                                filters: [],
-                                excludes: []
-                            }
-                        }
-                        break
-                    case 'set_allocation':
-                        valueFormat = {
-                            type: 'Object',
-                            value: {
-                                config: {
-                                    set_count: 1,
-                                    set_template_id: '',
-                                    host_resources: [],
-                                    module_detail: []
-                                },
-                                data: [],
-                                separator: ','
-                            }
-                        }
-                        break
-                    case 'host_allocation':
-                        valueFormat = {
-                            type: 'Object',
-                            value: {
-                                config: {
-                                    host_count: 0,
-                                    host_screen_value: '',
-                                    host_resources: [],
-                                    host_filter_detail: []
-                                },
-                                data: [],
-                                separator: ','
-                            }
-                        }
-                        break
-                    default:
-                        valueFormat = {
-                            type: 'String',
-                            value: ''
-                        }
-                }
-                return valueFormat
-            },
             isRequired () {
                 let required = false
                 if (this.option.showRequired === true && 'validation' in this.scheme.attrs) {

diff --git a/frontend/desktop/src/components/common/RenderForm/formMixins.js b/frontend/desktop/src/components/common/RenderForm/formMixins.js
@@ -14,6 +14,10 @@ import { checkDataType } from '@/utils/checkDataType.js'
 import i18n from '@/config/i18n/index.js'
 
 export const COMMON_ATTRS = {
+    scheme: {
+        type: Object,
+        default: () => ({})
+    },
     tagCode: {
         type: String,
         required: true,

diff --git a/frontend/desktop/src/components/common/RenderForm/tags/TagDatatable.vue b/frontend/desktop/src/components/common/RenderForm/tags/TagDatatable.vue
@@ -51,7 +51,7 @@
                 </el-upload>
             </template>
         </div>
-        <span v-if="constants.subflow_detail_var" class="rf-view-value">{{ constants[tagCode] }}</span>
+        <span v-if="scheme.attrs.usedValue" class="rf-view-value">{{ value }}</span>
         <template v-else-if="Array.isArray(value) && !loading">
             <el-table
                 ref="tableEl"

diff --git a/frontend/desktop/src/components/common/RenderForm/tags/TagHostAllocation.vue b/frontend/desktop/src/components/common/RenderForm/tags/TagHostAllocation.vue
@@ -11,7 +11,7 @@
 */
 <template>
     <div class="tag-host-allocation">
-        <span v-if="constants.subflow_detail_var" class="rf-view-value">{{ constants[tagCode] }}</span>
+        <span v-if="scheme.attrs.usedValue" class="rf-view-value">{{ value }}</span>
         <div class="tag-host-allocation-wrap" v-else>
             <host-allocation
                 ref="hostAllocation"

diff --git a/frontend/desktop/src/components/common/RenderForm/tags/TagIpSelector.vue b/frontend/desktop/src/components/common/RenderForm/tags/TagIpSelector.vue
@@ -11,7 +11,8 @@
 */
 <template>
     <div class="tag-ip-selector" v-bkloading="{ isLoading: loading, opacity: 0.8, zIndex: 100 }">
-        <div v-if="formMode && typeof ipValue === 'object'" class="tag-ip-selector-wrap">
+        <span v-if="scheme.attrs.usedValue" class="rf-view-value">{{ value }}</span>
+        <div v-else-if="typeof ipValue === 'object'" class="tag-ip-selector-wrap">
             <ip-selector
                 ref="ipSelector"
                 :editable="editable && !disabled"
@@ -25,7 +26,6 @@
                 v-model="ipValue">
             </ip-selector>
         </div>
-        <span v-else class="rf-view-value">{{ constants.subflow_detail_var ? constants[tagCode] : viewValue }}</span>
     </div>
 </template>
 <script>
@@ -140,7 +140,9 @@
             }
         },
         mounted () {
-            this.getData()
+            if (!this.scheme.attrs.usedValue) {
+                this.getData()
+            }
         },
         methods: {
             ...mapActions([

diff --git a/frontend/desktop/src/components/common/RenderForm/tags/TagMemberSelector.vue b/frontend/desktop/src/components/common/RenderForm/tags/TagMemberSelector.vue
@@ -18,7 +18,7 @@
                 :placeholder="placeholder">
             </member-select>
         </div>
-        <span v-else class="rf-view-value">{{ constants.subflow_detail_var ? constants[tagCode] : viewValue }}</span>
+        <span v-else class="rf-view-value">{{ viewValue }}</span>
         <span v-show="!validateInfo.valid" class="common-error-tip error-info">{{validateInfo.message}}</span>
     </div>
 </template>

diff --git a/frontend/desktop/src/components/common/RenderForm/tags/TagSelect.vue b/frontend/desktop/src/components/common/RenderForm/tags/TagSelect.vue
@@ -83,7 +83,7 @@
 
     export const attrs = {
         value: {
-            type: [String, Array, Boolean, Number],
+            type: [String, Array, Object, Boolean, Number],
             required: false,
             default: '',
             desc: i18n.t('下拉框的选中值，可输入 String、Boolean、Number 类型的值，若为多选请输入包含上述类型的数组格式数据')

diff --git a/frontend/desktop/src/components/common/RenderForm/tags/TagSetAllocation.vue b/frontend/desktop/src/components/common/RenderForm/tags/TagSetAllocation.vue
@@ -11,7 +11,7 @@
 */
 <template>
     <div class="tag-set-allocation">
-        <span v-if="constants.subflow_detail_var" class="rf-view-value">{{ constants[tagCode] }}</span>
+        <span v-if="scheme.attrs.usedValue" class="rf-view-value">{{ value }}</span>
         <div class="tag-set-allocation-wrap" v-else>
             <set-allocation
                 ref="setAllocation"

diff --git a/frontend/desktop/src/components/common/RenderForm/tags/TagTextarea.vue b/frontend/desktop/src/components/common/RenderForm/tags/TagTextarea.vue
@@ -11,7 +11,7 @@
 */
 <template>
     <div class="tag-textarea">
-        <div class="rf-form-wrapper">
+        <div class="rf-form-wrapper" v-if="formMode">
             <div class="rf-form-wrap" :class="{ 'input-focus': input.focus, 'input-disable': isDisabled, 'text-view-mode': !formMode }">
                 <div
                     ref="input"
@@ -47,6 +47,7 @@
                 </div>
             </transition>
         </div>
+        <div v-else class="rf-view-value">{{ value || '--' }}</div>
         <span v-show="!validateInfo.valid" class="common-error-tip error-info">{{validateInfo.message}}</span>
     </div>
 </template>
@@ -59,7 +60,7 @@
 
     export const attrs = {
         value: {
-            type: String,
+            type: [String, Object],
             required: false,
             default: ''
         },

diff --git a/frontend/desktop/src/pages/task/TaskExecute/ExecuteInfo.vue b/frontend/desktop/src/pages/task/TaskExecute/ExecuteInfo.vue
@@ -228,6 +228,7 @@
     import tools from '@/utils/tools.js'
     import atomFilter from '@/utils/atomFilter.js'
     import { TASK_STATE_DICT, NODE_DICT } from '@/constants/index.js'
+    import { checkDataType, getDefaultValueFormat } from '@/utils/checkDataType.js'
     import NodeTree from './NodeTree'
     import NodeOperationFlow from './ExecuteInfo/NodeOperationFlow.vue'
     import ExecuteRecord from './ExecuteInfo/ExecuteRecord.vue'
@@ -667,7 +668,7 @@
                 }
                 let outputsInfo = []
                 const renderData = {}
-                let constants = {}
+                const constants = {}
                 let inputsInfo = inputs
                 let failInfo = ''
                 // 添加插件输出表单所需上下文
@@ -677,36 +678,32 @@
                 // 获取子流程配置详情
                 if (componentCode === 'subprocess_plugin' || this.isLegacySubProcess) {
                     const { constants } = this.isLegacySubProcess ? this.pipelineData : this.componentValue.pipeline
-                    this.renderConfig = await this.getSubflowInputsConfig(constants)
+                    const renderConfig = await this.getSubflowInputsConfig(constants)
+                    const keys = Object.keys(inputs)
+                    this.renderConfig = renderConfig.filter(item => keys.includes(item.tag_code))
                 } else if (componentCode) { // 任务节点需要加载标准插件
                     await this.getNodeConfig(componentCode, version, inputs.plugin_version)
                 }
-                if (this.isSubProcessNode) { // 新版子流程任务节点输入参数处理
-                    inputsInfo = Object.keys(inputs).reduce((acc, cur) => {
-                        const value = inputs[cur]
-                        if (cur === 'subprocess') {
-                            Object.keys(value.pipeline.constants).forEach(key => {
-                                const data = value.pipeline.constants[key]
-                                acc[key] = data.value
-                            })
-                        } else {
-                            acc[cur] = value
-                        }
-                        return acc
-                    }, {})
-                } else if (this.isLegacySubProcess) {
-                    /**
-                     * 兼容旧版本子流程节点输入数据
-                     * 获取子流程输入参数 (subflow_detail_var 标识当前为子流程节点详情)
-                     */
-                    constants = { subflow_detail_var: true, ...inputsInfo }
-                    inputsInfo = Object.values(this.pipelineData.constants).reduce((acc, cur) => {
-                        if (cur.show_type === 'show') {
-                            acc[cur.key] = cur.value
+                inputsInfo = Object.keys(inputs).reduce((acc, cur) => {
+                    const scheme = this.renderConfig.find(item => item.tag_code === cur)
+                    if (scheme) {
+                        const defaultValueFormat = getDefaultValueFormat(scheme)
+                        const valueType = checkDataType(inputs[cur])
+                        const isTypeValid = Array.isArray(defaultValueFormat.type)
+                            ? defaultValueFormat.type.indexOf(valueType) > -1
+                            : defaultValueFormat.type === valueType
+                        // 标记数据类型不同的表单项并原样展示数据
+                        if (!isTypeValid) {
+                            if ('attrs' in scheme) {
+                                scheme.attrs.usedValue = true
+                            } else {
+                                scheme.attrs = { usedValue: true }
+                            }
                         }
-                        return acc
-                    }, {})
-                }
+                    }
+                    acc[cur] = inputs[cur]
+                    return acc
+                }, {})
                 for (const key in inputsInfo) {
                     renderData[key] = inputsInfo[key]
                 }
@@ -897,7 +894,7 @@
                     if (variable.custom_type === 'select') {
                         formItemConfig.attrs.allowCreate = true
                     }
-                    formItemConfig.tag_code = key
+                    formItemConfig.tag_code = key.slice(2, -1)
                     formItemConfig.attrs.name = variable.name
                     // 自定义输入框变量正则校验添加到插件配置项
                     if (['input', 'textarea'].includes(variable.custom_type) && variable.validation !== '') {