improvement：自定义全局变量列表由接口获取 (#165)

frontend/desktop/src/api/index.js

@@ -153,6 +153,17 @@ const api = {
         }
         return request(opts)
     },
+    /**
+     * 获取自定义全局变量列表
+     */
+    getCustomVarCollection () {
+        const prefixUrl = this.getPrefix('query_custom_variables_collection')
+        const opts = {
+            method: 'GET',
+            url: prefixUrl
+        }
+        return request(opts)
+    },
     /**
      * 获取子流程列表
      */

frontend/desktop/src/api/urls.js

@@ -81,6 +81,7 @@ export function getUrlSetting (SITE_URL, BIZ_CC_ID) {
         taskCreateMethod: SITE_URL + 'taskflow/api/get_task_create_method/',
         cc_search_host: SITE_URL + 'pipeline/cc_search_host/' + BIZ_CC_ID + '/',
         cc_search_topo_tree: SITE_URL + 'pipeline/cc_search_topo_tree/' + BIZ_CC_ID + '/',
-        cc_get_mainline_object_topo: SITE_URL + 'pipeline/cc_get_mainline_object_topo/' + BIZ_CC_ID + '/'
+        cc_get_mainline_object_topo: SITE_URL + 'pipeline/cc_get_mainline_object_topo/' + BIZ_CC_ID + '/',
+        query_custom_variables_collection: SITE_URL + 'pipeline/query_custom_variables_collection/'
     }
 }

frontend/desktop/src/components/common/RenderForm/FormGroup.vue

@@ -24,7 +24,7 @@
                 </i>
             </div>
         </div>
-        <div v-if="hook" class="rf-form-item rf-has-hook">
+        <div v-if="hook" class="rf-form-item rf-has-hook show-label">
             <label v-if="option.showLabel" class="rf-tag-label">
                 {{scheme.attrs.name}}
             </label>

frontend/desktop/src/pages/task/TaskParamEdit.vue

@@ -109,7 +109,7 @@
                     let tagCode = ''
                     let classify = ''
                     if (custom_type) {
-                        atomType = custom_type
+                        atomType = tagCode = custom_type
                         classify = 'variable'
                     } else {
                         [atomType, tagCode] = source_tag.split('.')
@@ -122,6 +122,7 @@
                     }
                     const atomConfig = this.atomFormConfig[atomType]
                     let currentFormConfig = tools.deepClone(atomFilter.formFilter(tagCode, atomConfig))
+                    
                     if (currentFormConfig) {
                         // 若该变量是元变量则进行转换操作
                         if (variable.is_meta || currentFormConfig.meta_transform) {

frontend/desktop/src/pages/template/TemplateEdit/NodeConfig.vue

@@ -527,7 +527,7 @@
                         let tagCode = ''
                         let classify = ''
                         if (custom_type) {
-                            atomType = form.custom_type
+                            atomType = tagCode = form.custom_type
                             classify = 'variable'
                         } else {
                             [atomType, tagCode] = source_tag.split('.')
@@ -538,12 +538,7 @@
                             this.setAtomConfig({ atomType, configData: $.atoms[atomType] })
                         }
                         const atomConfig = this.atomFormConfig[atomType]
-                        let currentFormConfig = {}
-                        if (custom_type) {
-                            currentFormConfig = atomConfig && atomConfig[0]
-                        } else {
-                            currentFormConfig = tools.deepClone(atomFilter.formFilter(tagCode, atomConfig))
-                        }
+                        let currentFormConfig = tools.deepClone(atomFilter.formFilter(tagCode, atomConfig))
                         
                         if (currentFormConfig) {
                             if (form.is_meta || currentFormConfig.meta_transform) {

frontend/desktop/src/pages/template/TemplateEdit/TemplateSetting/TabGlobalVariables.vue

@@ -93,6 +93,7 @@
                             <VariableEdit
                                 ref="editVariablePanel"
                                 :variable-data="variableData"
+                                :variable-type-list="variableTypeList"
                                 :is-new-variable="false"
                                 @scrollPanelToView="scrollPanelToView"
                                 @onChangeEdit="onChangeEdit">
@@ -104,6 +105,7 @@
                     <VariableEdit
                         ref="addVariablePanel"
                         :variable-data="variableData"
+                        :variable-type-list="variableTypeList"
                         :is-new-variable="true"
                         @scrollPanelToView="scrollPanelToView"
                         @onChangeEdit="onChangeEdit">
@@ -144,7 +146,7 @@
             draggable,
             NoData
         },
-        props: ['isVariableEditing'],
+        props: ['isVariableEditing', 'variableTypeList'],
         data () {
             return {
                 i18n: {

frontend/desktop/src/pages/template/TemplateEdit/TemplateSetting/TemplateSetting.vue

@@ -35,6 +35,7 @@
                     ref="globalVariable"
                     class="panel-item"
                     :is-variable-editing="isVariableEditing"
+                    :variable-type-list="variableTypeList"
                     @changeVariableEditing="onVariableEditingChange"
                     @variableDataChanged="onVariableDataChange"
                     @onDeleteConstant="onDeleteConstant">
@@ -73,7 +74,7 @@
             TabTemplateConfig,
             TabLocalDraft
         },
-        props: ['businessInfoLoading', 'isTemplateConfigValid', 'isSettingPanelShow', 'draftArray'],
+        props: ['businessInfoLoading', 'isTemplateConfigValid', 'isSettingPanelShow', 'draftArray', 'variableTypeList'],
         data () {
             return {
                 i18n: {

frontend/desktop/src/pages/template/TemplateEdit/TemplateSetting/VariableEdit.vue

@@ -47,6 +47,7 @@
                 <label class="required">{{ i18n.type }}</label>
                 <div class="form-content">
                     <bk-selector
+                        setting-key="key"
                         :list="valTypeList"
                         :has-children="true"
                         :selected.sync="currentValType"
@@ -136,51 +137,20 @@
     import RenderForm from '@/components/common/RenderForm/RenderForm.vue'
     import BaseInput from '@/components/common/base/BaseInput.vue'
     import VariableEditDialog from './VariableEditDialog.vue'
-    const ATOM_FORM = {
-        'ip': 'var_ip_picker.ip_picker',
-        'password': 'password.password',
-        'select': 'select.select',
-        'ip_selector': 'var_cmdb_ip_selector.ip_selector'
-    }
-    const META_ATOM_FORM = {
-        'select': 'select_meta'
-    }
-    // const META_FORM_TYPE = {
-    //     'var_ip_picker': 'var_ip_picker',
-    //     'password': 'password',
-    //     'select': 'select_meta'
-    // }
-    const VAL_TYPE_LIST = [
-        {
-            name: gettext('普通变量'),
-            children: [
-                { id: 'input', name: gettext('输入框') },
-                { id: 'textarea', name: gettext('文本框') },
-                { id: 'datetime', name: gettext('日期时间') },
-                { id: 'int', name: gettext('整数') },
-                { id: 'ip', name: gettext('IP选择器(简单版)') },
-                { id: 'password', name: gettext('密码') }
-            ]
-        },
-        {
-            name: gettext('元变量'),
-            children: [
-                { id: 'select', name: gettext('下拉框') }
-            ]
-        }
-    ]
+
     const SHOW_TYPE_LIST = [
         { id: 'show', name: gettext('显示') },
         { id: 'hide', name: gettext('隐藏') }
     ]
+
     export default {
         name: 'VariableEdit',
         components: {
             RenderForm,
             VariableEditDialog,
             BaseInput
         },
-        props: ['variableData', 'isNewVariable'],
+        props: ['variableData', 'isNewVariable', 'variableTypeList'],
         data () {
             const theEditingData = tools.deepClone(this.variableData)
             const renderData = ('value' in theEditingData) ? { 'customVariable': theEditingData.value } : {}
@@ -201,6 +171,8 @@
                 bkMessageInstance: null,
                 showTypeList: [...SHOW_TYPE_LIST],
                 theEditingData,
+                metaTag: undefined, // 元变量tag名称
+                varType: '', // 变量类型，general、meta
                 renderData,
                 renderConfig: [],
                 renderOption: {
@@ -259,9 +231,9 @@
                 }
             },
             valTypeList () {
-                return this.isDisabledValType ? [{ id: 'component', name: gettext('组件') }] : [...VAL_TYPE_LIST]
+                return this.isDisabledValType ? [{ key: 'component', name: gettext('组件') }] : [...this.variableTypeList]
             },
-            atomType () {
+            atomType () { // 变量的tag类型，input、select、int等
                 const { custom_type, source_tag } = this.theEditingData
                 if (source_tag) {
                     return source_tag.split('.')[0]
@@ -348,8 +320,8 @@
              * 加载表单标准插件配置文件
              */
             async getAtomConfig () {
-                const realAtomType = META_ATOM_FORM[this.atomType] || this.atomType
-                const isMeta = META_ATOM_FORM[this.atomType] ? 1 : 0
+                const realAtomType = this.metaTag ? this.metaTag.split('.')[0] : this.atomType
+                const isMeta = this.varType === 'meta' ? 1 : 0
                 if ($.atoms[realAtomType]) {
                     this.getRenderConfig()
                     return
@@ -373,11 +345,11 @@
             },
             getRenderConfig () {
                 const { source_tag, custom_type } = this.theEditingData
-                const realAtomType = META_ATOM_FORM[this.atomType] || this.atomType
+                const realAtomType = this.metaTag ? this.metaTag.split('.')[0] : this.atomType
                 const atom = this.atomFormConfig[realAtomType]
                 let config = {}
                 if (custom_type) {
-                    config = tools.deepClone(atom[0])
+                    config = tools.deepClone(atomFilter.formFilter(custom_type, atom))
                 } else {
                     const tag_code = source_tag.split('.')[1]
                     config = tools.deepClone(atomFilter.formFilter(tag_code, atom))
@@ -388,26 +360,20 @@
             /**
              * 切换变量类型
              */
-            onValTypeChange (id, data) {
+            onValTypeChange (key, data) {
                 this.renderData = {}
                 // input 类型需要正则校验
-                if (id === 'input') {
+                if (key === 'input') {
                     this.theEditingData.validation = '^.+$'
                 } else {
                     this.theEditingData.validation = ''
                 }
-                // 普通原子类型变量需要增加 source_tag 字段
-                if (ATOM_FORM[this.theEditingData.custom_type]) {
-                    this.theEditingData.source_tag = ATOM_FORM[this.theEditingData.custom_type]
-                } else {
-                    this.theEditingData.source_tag = ''
-                }
-                // 元变量需要增加 meta 字段
-                if (META_ATOM_FORM[this.theEditingData.custom_type]) {
-                    this.theEditingData.is_meta = true
-                } else {
-                    this.theEditingData.is_meta = false
-                }
+
+                this.theEditingData.source_tag = data.tag
+                this.theEditingData.is_meta = data.type === 'meta'
+                this.metaTag = data.meta_tag
+                this.varType = data.type
+
                 this.getAtomConfig()
             },
             /**

frontend/desktop/src/pages/template/TemplateEdit/index.vue

@@ -57,6 +57,7 @@
                 :business-info-loading="businessInfoLoading"
                 :is-template-config-valid="isTemplateConfigValid"
                 :is-setting-panel-show="isSettingPanelShow"
+                :variable-type-list="variableTypeList"
                 :local-template-data="localTemplateData"
                 :is-click-draft="isClickDraft"
                 @toggleSettingPanel="toggleSettingPanel"
@@ -137,6 +138,8 @@
                 isSettingPanelShow: true,
                 isNodeConfigPanelShow: false,
                 isLeaveDialogShow: false,
+                variableTypeList: [], // 自定义变量类型列表
+                customVarCollectionLoading: false,
                 allowLeave: false,
                 leaveToPath: '',
                 idOfNodeInConfigPanel: '',
@@ -260,6 +263,7 @@
         mounted () {
             this.getSingleAtomList()
             this.getBusinessBaseInfo()
+            this.getCustomVarCollection()
         },
         beforeDestroy () {
             this.resetTemplateData()
@@ -273,7 +277,8 @@
                 'loadBusinessBaseInfo',
                 'loadTemplateData',
                 'saveTemplateData',
-                'loadCommonTemplateData'
+                'loadCommonTemplateData',
+                'loadCustomVarCollection'
             ]),
             ...mapActions('atomForm/', [
                 'loadAtomConfig',
@@ -348,6 +353,38 @@
                     this.subAtomListLoading = false
                 }
             },
+            async getCustomVarCollection () {
+                this.customVarCollectionLoading = true
+                try {
+                    const customVarCollection = await this.loadCustomVarCollection()
+                    if (customVarCollection.result) {
+                        const listData = [
+                            {
+                                name: gettext('普通变量'),
+                                children: []
+                            },
+                            {
+                                name: gettext('元变量'),
+                                children: []
+                            }
+                        ]
+                        customVarCollection.data.forEach(item => {
+                            if (item.type === 'general') {
+                                listData[0].children.push(item)
+                            } else {
+                                listData[1].children.push(item)
+                            }
+                        })
+                        this.variableTypeList = listData
+                    } else {
+                        errorHandler(customVarCollection, this)
+                    }
+                } catch (e) {
+                    errorHandler(e, this)
+                } finally {
+                    this.customVarCollectionLoading = false
+                }
+            },
             async getTemplateData () {
                 this.templateDataLoading = true
                 try {
@@ -360,10 +397,6 @@
                         templateData.name = templateData.name.slice(0, STRING_LENGTH.TEMPLATE_NAME_MAX_LENGTH - 6) + '_clone'
                     }
                     this.setTemplateData(templateData)
-                // const business = data.business
-                // if (business !== undefined) {
-                //     this.businessTimeZone = data.business.timezone
-                // }
                 } catch (e) {
                     errorHandler(e, this)
                 } finally {

frontend/desktop/src/store/modules/template.js

@@ -740,6 +740,9 @@ const template = {
         loadTemplateData ({ commit }, data) {
             return api.getTemplateData(data).then(response => response.data)
         },
+        loadCustomVarCollection () {
+            return api.getCustomVarCollection().then(response => response.data)
+        },
         // 保存模板数据
         saveTemplateData ({ state }, { templateId, ccId, common }) {
             const { activities, constants, end_event, flows, gateways, line,