From 511b6df9d4fff237dc58c2cc2fc81331ffd4acbc Mon Sep 17 00:00:00 2001
From: miaomiao <13407923955@163.com>
Date: Wed, 25 Oct 2023 18:32:05 +0800
Subject: [PATCH] =?UTF-8?q?feat:bkvue2=E7=BB=84=E4=BB=B6,=E6=97=B6?=
 =?UTF-8?q?=E9=97=B4=E8=BD=B4&=E6=A0=91=20=E7=BB=84=E4=BB=B6=E9=85=8D?=
 =?UTF-8?q?=E7=BD=AE=E5=AF=B9=E5=BA=94=E8=8E=B7=E5=8F=96=E5=8F=8D=E9=A6=88?=
 =?UTF-8?q?key?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../render/pc/tools/lesscode-loading/index.js |  17 ++
 .../materials/vue2/bk/search-select/index.js  |   2 +
 .../materials/vue2/bk/timeline/index.js       |   4 +
 .../materials/vue2/bk/tree/index.js           |  15 +-
 .../props/components/common/select-key.vue    | 159 ++++++++++++++++++
 .../props/components/render-prop.vue          |  82 +++++++--
 .../components/strategy/value-key-option.vue  |   2 +-
 lib/shared/page-code/common/modelMethods.js   |   9 +-
 lib/shared/page-code/index.js                 |   4 +-
 lib/shared/page-code/script/vue2/methods.js   |  14 ++
 lib/shared/page-code/template/page/prop.js    |   4 +-
 11 files changed, 286 insertions(+), 26 deletions(-)
 create mode 100644 lib/client/src/element-materials/modifier/component/props/components/common/select-key.vue

diff --git a/lib/client/src/components/render/pc/tools/lesscode-loading/index.js b/lib/client/src/components/render/pc/tools/lesscode-loading/index.js
index 1d98f42b5..4a37541ec 100644
--- a/lib/client/src/components/render/pc/tools/lesscode-loading/index.js
+++ b/lib/client/src/components/render/pc/tools/lesscode-loading/index.js
@@ -81,6 +81,18 @@ export default {
             }
         }
 
+        const processChildren = (obj, valueKeys) => {
+            if (obj.children && Array.isArray(obj.children)) {
+                obj.children = obj.children.map(child => processChildren(child, valueKeys))
+            }
+            const newObj = { ...obj }
+            for (const key in valueKeys) {
+                newObj[key] = valueKeys[key] ? obj[valueKeys[key]] : obj[key]
+            }
+
+            return newObj
+        }
+
         // 监听变量的变化
         const watchVariable = (data, key, staticValue) => {
             const {
@@ -127,6 +139,11 @@ export default {
                 if (typeof val === typeof data.renderValue || typeof val === typeof data.code) {
                     data.renderValue = val
                     data.code = val
+                    if (Object.keys(data.valueKeys).length > 0) {
+                        const valResult = val.map(item => processChildren(item, data.valueKeys))
+                        data.renderValue = valResult
+                        data.code = valResult
+                    }
                 }
             })
             // 更新event
diff --git a/lib/client/src/element-materials/materials/vue2/bk/search-select/index.js b/lib/client/src/element-materials/materials/vue2/bk/search-select/index.js
index 8ccf2539a..a20473764 100644
--- a/lib/client/src/element-materials/materials/vue2/bk/search-select/index.js
+++ b/lib/client/src/element-materials/materials/vue2/bk/search-select/index.js
@@ -131,11 +131,13 @@ export default {
         'display-key': {
             type: 'value-key-item',
             dataOrigin: 'data',
+            val: 'name',
             tips: '显示的字段名称'
         },
         'primary-key': {
             type: 'value-key-item',
             dataOrigin: 'data',
+            val: 'id',
             tips: '应用的唯一id字段名称'
         },
         values: {
diff --git a/lib/client/src/element-materials/materials/vue2/bk/timeline/index.js b/lib/client/src/element-materials/materials/vue2/bk/timeline/index.js
index dff9ccd67..2fda41ef9 100644
--- a/lib/client/src/element-materials/materials/vue2/bk/timeline/index.js
+++ b/lib/client/src/element-materials/materials/vue2/bk/timeline/index.js
@@ -47,6 +47,10 @@ export default {
             remoteValidate (data) {
                 if (!Array.isArray(data)) return '返回值需要是数组'
             },
+            keys: [
+                { id: 'tag', label: '标题', tips: '选项的值，不填取 tag 字段' },
+                { id: 'content', label: '内容', tips: '选项展示的名称，不填取 content 字段' }
+            ],
             val: [
                 { tag: '一天前', content: '由<strong>张三</strong>上线到蓝鲸市场' },
                 { tag: '16:59', content: '<div style="color: #ff5656;">由<strong>李四</strong>部署到生产环境并发布至应用市场</div>' },
diff --git a/lib/client/src/element-materials/materials/vue2/bk/tree/index.js b/lib/client/src/element-materials/materials/vue2/bk/tree/index.js
index ba4eb4069..92d7ba507 100644
--- a/lib/client/src/element-materials/materials/vue2/bk/tree/index.js
+++ b/lib/client/src/element-materials/materials/vue2/bk/tree/index.js
@@ -58,11 +58,7 @@ export default {
         // }
     ],
     props: {
-        'node-key': {
-            type: 'string',
-            val: 'id',
-            tips: '具有唯一标识的key值'
-        },
+        
         'show-icon': {
             type: 'boolean',
             val: true,
@@ -83,6 +79,9 @@ export default {
             remoteValidate (data) {
                 if (!Array.isArray(data)) return '返回值需要是数组'
             },
+            keys: [
+                { id: 'name', label: '名称', tips: '选项的值，不填取 name字段' }
+            ],
             val: [
                 {
                     name: 'tree node1',
@@ -108,6 +107,12 @@ export default {
                 }
             ],
             tips: 'tree 数据源'
+        },
+        'node-key': {
+            type: 'value-key-item',
+            dataOrigin: 'data',
+            val: 'id',
+            tips: '具有唯一标识的key值'
         }
     }
 }
diff --git a/lib/client/src/element-materials/modifier/component/props/components/common/select-key.vue b/lib/client/src/element-materials/modifier/component/props/components/common/select-key.vue
new file mode 100644
index 000000000..2edc86f69
--- /dev/null
+++ b/lib/client/src/element-materials/modifier/component/props/components/common/select-key.vue
@@ -0,0 +1,159 @@
+<template>
+    <section>
+        <div
+            class="g-prop-sub-title g-mb4 select-key"
+        >
+            <span
+                class="subline"
+                v-bk-tooltips="{
+                    content: $t('可以设置字段的映射关系，来做数据转换。注意：值改变下拉选项会自动改变'),
+                    placements: ['left-start'],
+                    boundary: 'window',
+                    maxWidth: 400
+                }"
+            >
+                {{ $t('字段映射') }}
+            </span>
+        </div>
+        <template v-for="key in keys">
+            <div
+                class="g-prop-sub-title g-mb4 g-mt8 subline"
+                :key="key.id + 'label'"
+                v-bk-tooltips="{
+                    content: $t(key.tips),
+                    placements: ['left-start'],
+                    boundary: 'window',
+                    maxWidth: 400
+                }"
+            >{{ $t(key.label) }}</div>
+            <bk-tag-input
+                class="g-mb8 h32"
+                trigger="focus"
+                :max-data="1"
+                :allow-create="true"
+                :key="key.id"
+                :value="[valueKeys[key.id]].filter(v => v)"
+                :loading="isLoading"
+                :list="options.map(x => ({ id: x, name: x }))"
+                @change="([val]) => changeParams(key.id, val)">
+            </bk-tag-input>
+        </template>
+    </section>
+</template>
+
+<script>
+    export default {
+        props: {
+            keys: {
+                type: Array,
+                default: () => ([])
+            },
+            value: {
+                type: [Object, Array],
+                default: () => ([])
+            },
+            isLoading: {
+                type: Boolean,
+                default: false
+            },
+            valueKeys: {
+                type: Object,
+                default: () => ({})
+            },
+            valueType: {
+                type: String
+            },
+            payload: {
+                type: Object
+            },
+            type: {
+                type: String
+            },
+            name: {
+                type: String
+            }
+        },
+        data () {
+            return {
+                options: [],
+                valueKeyTypeValueMemo: {}
+            }
+        },
+        computed: {
+            listenChange () {
+                const { value, type, payload } = this
+                return { value, type, payload }
+            }
+        },
+        watch: {
+            listenChange: {
+                handler (newVal, oldVal) {
+                    this.options = Object.keys(this.value?.[0] || {})
+                    // 数据源
+                    if (this.valueType.includes('data-source') && this.payload?.sourceData?.dataSourceType === 'preview') {
+                        const tables = this.$store.state?.dataSource?.tableList || []
+                        const table = tables.find(table => table.tableName === this.payload.sourceData.tableName)
+                        this.options = table.columns.map(column => column.name)
+                    }
+                    if (newVal.value) {
+                        this.valueChange()
+                    }
+                },
+                immediate: true,
+                deep: true
+            }
+           
+        },
+        methods: {
+            changeParams  (key, value) {
+                this.$emit('changeVal', 'valueKeys', Object.assign(this.valueKeys, { [key]: value }))
+                this.valueChange()
+            },
+            valueChange () {
+                if (Object.keys(this.valueKeys).length === 0) {
+                    return
+                }
+                const list = JSON.parse(JSON.stringify(this.value))
+                const val = list.map(item => this.processChildren(item, this.valueKeys))
+                this.$emit('change', this.name, val, this.valueType, this.payload, false)
+            },
+            processChildren (obj, valueKeys) {
+                if (obj.children && Array.isArray(obj.children)) {
+                    obj.children = obj.children.map(child => this.processChildren(child, valueKeys))
+                }
+                // 对当前对象进行处理
+                const newObj = { ...obj }
+                for (const key in valueKeys) {
+                    newObj[key] = valueKeys[key] ? obj[valueKeys[key]] : obj[key]
+                }
+
+                return newObj
+            }
+
+        }
+    }
+
+</script>
+
+<style lang="postcss" scoped>
+    @import "@/css/mixins/ellipsis";
+    .select-key {
+        display: block;
+        margin-top: 14px;
+    }
+    .inline-block {
+        display: inline-block;
+    }
+    .subline {
+        cursor: pointer;
+        border-bottom: 1px dashed #63656E;
+    }
+    .h32 {
+        height: 32px;
+    }
+    .display-value {
+        @mixin ellipsis 100%, inline-block;
+        line-height: 32px;
+        padding: 0 36px 0 10px;
+    }
+</style>
diff --git a/lib/client/src/element-materials/modifier/component/props/components/render-prop.vue b/lib/client/src/element-materials/modifier/component/props/components/render-prop.vue
index 01a00db71..69a1f19d1 100644
--- a/lib/client/src/element-materials/modifier/component/props/components/render-prop.vue
+++ b/lib/client/src/element-materials/modifier/component/props/components/render-prop.vue
@@ -78,7 +78,7 @@
                             :name="name"
                             :type="renderCom.type"
                             :describe="describe"
-                            :default-value="propTypeValueMemo[selectValueType].val"
+                            :default-value="(propTypeValueMemo[selectValueType] || {}).val"
                             :payload="formData.payload"
                             :remote-validate="describe.remoteValidate"
                             :key="`${renderCom.type}_${index}`"
@@ -89,6 +89,17 @@
                     </template>
                 </template>
             </div>
+            <select-key
+                v-if="showInnerVariable && isShowValueKeys"
+                :name="name"
+                :keys="describe.keys"
+                :value="propsVal.val"
+                :value-keys="formData.valueKeys"
+                :value-type="formData.valueType"
+                @saveValueKeys="updateCacheValueHandle"
+                @changeVal="handleValChange"
+                @change="handleCodeChange">
+            </select-key>
             <template v-if="showUpdateColumn">
                 <div
                     v-bk-tooltips="{
@@ -162,6 +173,7 @@
     import TypeRequestSelect from './strategy/request-select.vue'
     import TypeValueKeyOption from './strategy/value-key-option.vue'
     import TypeValueKeyItem from './strategy/value-key-item.vue'
+    import selectKey from './common/select-key.vue'
 
     const getRealValue = (type, target) => {
         if (type === 'object') {
@@ -197,7 +209,8 @@
         name: 'render-prop-modifier',
         components: {
             variableSelect,
-            chooseBuildInVariable
+            chooseBuildInVariable,
+            selectKey: selectKey
         },
         filters: {
             valueTypeTextFormat (valueType) {
@@ -248,7 +261,8 @@
                 formData: {},
                 isRenderValueCom: false,
                 isShowProp: true,
-                isSyncing: false
+                isSyncing: false,
+                isUpdateCacheValue: true
             }
         },
         computed: {
@@ -435,6 +449,20 @@
                     'widget-bk-table',
                     'widget-el-table'
                 ].includes(this.componentType)
+            },
+            /**
+             * props 类型组件需要完整的props值
+             */
+            propsVal () {
+                return {
+                    val: (this.propTypeValueMemo[this.formData.valueType] || {}).val
+                }
+            },
+            /**
+             * 是否展示 valueKey
+             */
+            isShowValueKeys () {
+                return this.describe?.keys?.length
             }
         },
         watch: {
@@ -457,10 +485,14 @@
                                 valueType: getPropValueType(lastValueType),
                                 buildInVariableType: lastValue.buildInVariableType,
                                 payload: lastValue.payload || {},
-                                renderValue: lastValue.renderValue
+                                renderValue: lastValue.renderValue,
+                                valueKeys: lastValue.valueKeys || {},
+                                valueKeysMemo: lastValue.valueKeysMemo || {}
                             })
-                            this.propTypeValueMemo[this.formData.valueType] = {
-                                val: lastValue.renderValue
+                            if (this.isUpdateCacheValue) {
+                                this.propTypeValueMemo[this.formData.valueType] = {
+                                    val: (this.formData.valueKeysMemo[this.formData.valueType] || {}).val || lastValue.renderValue
+                                }
                             }
                         }
                         this.selectValueType = this.formData.valueType
@@ -499,6 +531,8 @@
                 valueType: valueTypes[0],
                 renderValue: defaultValue,
                 buildInVariableType: '',
+                valueKeys: {},
+                valueKeysMemo: {},
                 payload: this.lastValue.payload || {}
             })
 
@@ -517,8 +551,10 @@
             triggerChange (formData = this.formData) {
                 this.isInnerChange = true
                 // 缓存用户本地编辑值
-                this.propTypeValueMemo[formData.valueType] = {
-                    val: formData.renderValue
+                if (this.isUpdateCacheValue) {
+                    this.propTypeValueMemo[this.formData.valueType] = {
+                        val: (this.formData.valueKeysMemo[this.formData.valueType] || {}).val || this.formData.renderValue
+                    }
                 }
 
                 const props = {
@@ -610,23 +646,23 @@
              * @param { String } type
              * @param { Object } payload prop 配置附带的额外信息(eq: type 为 remote 时接口函数相关的配置)
              */
-            handleCodeChange (name, value, type, payload = {}) {
+            handleCodeChange (name, value, type, payload = {}, isUpdate = true) {
                 // 快速切换的情况下，如果type对不上，就不更新
                 if (this.formData.valueType !== getPropValueType(type)) return
                 try {
                     let code = null
+                    this.isUpdateCacheValue = isUpdate
                     let renderValue = this.formData.renderValue
 
                     let val = getRealValue(type, value)
-
                     if (this.formData.valueType === 'remote') {
                         // 配置的是远程函数、数据源
                         // code 此时无效，设置为 null
                         // api 返回数据不为空时在画布编辑区才应用 api 数据
-                        if (!isEmpty(val)) {
-                            renderValue = val
-                            code = val
-                        }
+                        // if (!isEmpty(val)) {
+                        renderValue = val
+                        code = val
+                        // }
                     } else {
                         code = val
                         renderValue = val
@@ -638,6 +674,12 @@
                         payload: Object.assign(this.formData.payload, payload),
                         renderValue
                     })
+                    if (isUpdate) {
+                        this.propTypeValueMemo[this.formData.valueType] = {
+                            val: this.formData.renderValue
+                        }
+                    }
+                    this.updateCacheValueHandle()
                     this.triggerChange()
                     this.triggerUpdateVariable()
                 } catch {
@@ -699,8 +741,20 @@
                 this.syncSlot(this.name).finally(() => {
                     this.isSyncing = false
                 })
+            },
+            handleValChange (key, val) {
+                this.formData = Object.freeze({
+                    ...this.formData,
+                    [key]: val
+                })
+                this.triggerChange()
+            },
+            updateCacheValueHandle  () {
+                const valueKeysMemo = JSON.parse(JSON.stringify(this.propTypeValueMemo))
+                this.handleValChange('valueKeysMemo', valueKeysMemo)
             }
         }
+       
     }
 </script>
 <style lang="postcss">
diff --git a/lib/client/src/element-materials/modifier/component/props/components/strategy/value-key-option.vue b/lib/client/src/element-materials/modifier/component/props/components/strategy/value-key-option.vue
index 3f4b2b2ca..4f142b127 100644
--- a/lib/client/src/element-materials/modifier/component/props/components/strategy/value-key-option.vue
+++ b/lib/client/src/element-materials/modifier/component/props/components/strategy/value-key-option.vue
@@ -90,7 +90,7 @@
         },
         methods: {
             trigger (value) {
-                this.change(this.name, value, this.type, this.payload)
+                this.change(this.name, JSON.parse(JSON.stringify(value)), this.type, this.payload)
             },
             changeParams (val, key) {
                 this.trigger({
diff --git a/lib/shared/page-code/common/modelMethods.js b/lib/shared/page-code/common/modelMethods.js
index 5e955223e..105c190fa 100644
--- a/lib/shared/page-code/common/modelMethods.js
+++ b/lib/shared/page-code/common/modelMethods.js
@@ -39,7 +39,7 @@ export function dataTemplate (code, key, value) {
  * @param { Object } payload 放置远程函数相关的信息
  * @param { Boolean } isChartType 是否是图表组件相关函数
  */
-export function remoteMethodsTemplate (code, key, payload, chartType = false) {
+export function remoteMethodsTemplate (code, key, payload, chartType = false, valueKeys) {
     const [method, params] = getMethodByCode(payload, code.funcGroups)
     if (method.id) {
         let newValue = code.remoteDataStr
@@ -48,7 +48,12 @@ export function remoteMethodsTemplate (code, key, payload, chartType = false) {
                 ? `const ${key}Remote = await this.${method.funcName}(${getFuncParamStr(code, method, params, `${sharedI18n().t('远程函数')}【${method.funcName}】`, true)})\nthis.$set(this, '${key}', ${key}Remote)\n`
                 : `const ${key}Remote = await this.${method.funcName}(${getFuncParamStr(code, method, params, `${sharedI18n().t('远程函数')}【${method.funcName}】`, true)})\nObject.assign(this.${key}, ${key}Remote)\n`
         } else {
-            newValue += `this.${key} = await this.${method.funcName}(${getFuncParamStr(code, method, params, `${sharedI18n().t('远程函数')}【${method.funcName}】`, true)})\n`
+            if (Object.keys(valueKeys).length > 0) {
+                const valueKeysObj = JSON.stringify(valueKeys)
+                newValue += `this.${key} = (await this.${method.funcName}(${getFuncParamStr(code, method, params, `${sharedI18n().t('远程函数')}【${method.funcName}】`, true)})).map(item => this.processChildren(item, ${valueKeysObj}))\n`
+            } else {
+                newValue += `this.${key} = await this.${method.funcName}(${getFuncParamStr(code, method, params, `${sharedI18n().t('远程函数')}【${method.funcName}】`, true)})\n`
+            }
         }
         setProperty(code, 'remoteDataStr', newValue)
     }
diff --git a/lib/shared/page-code/index.js b/lib/shared/page-code/index.js
index b12c7ea44..b05d96b7a 100644
--- a/lib/shared/page-code/index.js
+++ b/lib/shared/page-code/index.js
@@ -149,8 +149,8 @@ class NewPageCode {
      * @param { Object } payload 放置远程函数相关的信息
      * @param { Boolean } isChartType 是否是图表组件相关函数
      */
-    remoteMethodsTemplate (key, payload, isChartType = false) {
-        remoteMethodsTemplate(this, key, payload, isChartType)
+    remoteMethodsTemplate (key, payload, isChartType = false, valueKeys) {
+        remoteMethodsTemplate(this, key, payload, isChartType, valueKeys)
     }
 
     /**
diff --git a/lib/shared/page-code/script/vue2/methods.js b/lib/shared/page-code/script/vue2/methods.js
index 21643a46f..2d69c68ec 100644
--- a/lib/shared/page-code/script/vue2/methods.js
+++ b/lib/shared/page-code/script/vue2/methods.js
@@ -29,6 +29,20 @@ export default function (code) {
                 },
             `
         }
+        // 数据源字段映射处理方法
+        if (code.remoteDataStr.includes('processChildren')) {
+            methodsCon += `processChildren (obj, valueKeys) {
+                if (obj.children && Array.isArray(obj.children)) {
+                    obj.children = obj.children.map(child => this.processChildren(child, valueKeys))
+                }
+                const newObj = { ...obj }
+                for (const key in valueKeys) {
+                    newObj[key] = valueKeys[key] ? obj[valueKeys[key]] : obj[key]
+                }
+
+                return newObj
+            },`
+        }
 
         // 事件描述
         if (code.eventActionList?.length > 0) {
diff --git a/lib/shared/page-code/template/page/prop.js b/lib/shared/page-code/template/page/prop.js
index 17d5cf1e6..910173dd1 100644
--- a/lib/shared/page-code/template/page/prop.js
+++ b/lib/shared/page-code/template/page/prop.js
@@ -58,7 +58,7 @@ function getPropsStr (code, type, compId, props, dirProps, slots) {
             compId = `${preCompId}${camelCase(i, { transform: camelCaseTransformMerge })}`
             if (i === 'value') modelComId = compId
             
-            const { valueType: type, modifiers = [], renderValue, buildInVariableType, payload = {}, directive = '' } = props[i]
+            const { valueType: type, valueKeys, modifiers = [], renderValue, buildInVariableType, payload = {}, directive = '' } = props[i]
             const { sourceData = {}, customVariableCode = '' } = payload
             let { format, code: val } = props[i]
 
@@ -140,7 +140,7 @@ function getPropsStr (code, type, compId, props, dirProps, slots) {
             } else if (type === 'remote' && payload.methodCode) {
                 const curDir = dirProps.find((directive) => (directive.prop === i))
                 const key = (curDir || {}).code || propVar
-                code.remoteMethodsTemplate(key, payload || {})
+                code.remoteMethodsTemplate(key, payload || {}, false, valueKeys)
                 if (!curDir) {
                     !useCustomVariable && code.dataTemplate(propVar, JSON.stringify([]))
                     propsStr += curPropStr