feat:bkvue2组件,时间轴&树 组件配置对应获取反馈key

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

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: {

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>' },

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值'
         }
     }
 }

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>