From 42d7c62b941d716e77abddb3447053c5c796f732 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8E=E8=82=96=E7=A3=8A?= <18851179580@163.com>
Date: Tue, 10 Dec 2024 16:34:15 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E8=87=AA=E5=AE=9A=E4=B9=89?=
 =?UTF-8?q?=E6=95=B0=E6=8D=AE=E6=8B=BC=E6=8E=A5=E5=86=85=E5=AE=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../common/custom-module/model-icon/index.vue | 40 ++++++++-----
 .../model-icon/model-icon-style.vue           | 12 ++--
 .../custom-module/model-image/index.vue       | 50 +++++++++-------
 .../model-image/model-image-style.vue         | 12 ++--
 .../model-panel/model-panel-style.vue         |  7 ++-
 .../common/custom-module/model-text/index.vue | 59 +++++++++++--------
 .../model-text/model-text-style.vue           | 17 ++++--
 .../model-custom/components/index-default.ts  | 32 +++++++++-
 .../model-custom/components/index.vue         |  8 +++
 src/utils/index.ts                            | 40 +++++++++++++
 10 files changed, 194 insertions(+), 83 deletions(-)

diff --git a/src/components/common/custom-module/model-icon/index.vue b/src/components/common/custom-module/model-icon/index.vue
index 57f4f8eb..82645434 100644
--- a/src/components/common/custom-module/model-icon/index.vue
+++ b/src/components/common/custom-module/model-icon/index.vue
@@ -47,29 +47,39 @@ const icon_class = computed(() => {
     } else {
         if (!isEmpty(props.sourceList)) {
             let icon = '';
-            // 获取数据源ID
-            const data_source_id = form.value.data_source_id;
-            if (!data_source_id.includes('.')) {
-                // 不输入商品， 文章和品牌时，从外层处理数据
-                icon = props.sourceList[data_source_id];
-                // 如果是商品,品牌，文章的图片， 其他的切换为从data中取数据
-                if (!isEmpty(props.sourceList.data) && props.isCustom) {
-                    icon = props.sourceList.data[data_source_id];
-                }
+            // 取出数据源ID
+            const data_source_id = !isEmpty(form.value?.data_source_field?.id || '') ? form.value?.data_source_field?.id : form.value.data_source_id;
+            // 数据源内容
+            const option = form.value?.data_source_field?.option || {};
+            if (data_source_id.includes(';')) {
+                // 取出所有的字段，使用;分割
+                const ids = data_source_id.split(';');
+                let text = '';
+                ids.forEach((item: string, index: number) => {
+                    text += data_handling(item) + (index != ids.length - 1 ? (option?.join || '') : '');
+                });
+                icon = text;
             } else {
                 // 不输入商品， 文章和品牌时，从外层处理数据
-                icon = get_nested_property(props.sourceList, data_source_id);
-                // 如果是商品,品牌，文章的图片， 其他的切换为从data中取数据
-                if (!isEmpty(props.sourceList.data) && props.isCustom) {
-                    icon = get_nested_property(props.sourceList.data, data_source_id);
-                }
+                icon = data_handling(data_source_id);
             }
-            return icon;
+            return (option?.first || '') + icon + (option?.last || '');
         } else {
             return '';
         }
     }
 });
+
+const data_handling = (data_source_id: string) => {
+    // 不输入商品， 文章和品牌时，从外层处理数据
+    let icon = get_nested_property(props.sourceList, data_source_id);
+    // 如果是商品,品牌，文章的图片， 其他的切换为从data中取数据
+    if (!isEmpty(props.sourceList.data) && props.isCustom) {
+        icon = get_nested_property(props.sourceList.data, data_source_id);
+    }
+    return icon;
+}
+
 const com_style = computed(() => {
     let style = `${ set_count() } ${ gradient_handle(form.value.color_list, form.value.direction) } ${ radius_computer(form.value.bg_radius, props.scale) };transform: rotate(${form.value.icon_rotate}deg);${ padding_computer(form.value.icon_padding, props.scale) };`;
     if (form.value.border_show == '1') {
diff --git a/src/components/common/custom-module/model-icon/model-icon-style.vue b/src/components/common/custom-module/model-icon/model-icon-style.vue
index ea7d71bf..5da69ba8 100644
--- a/src/components/common/custom-module/model-icon/model-icon-style.vue
+++ b/src/components/common/custom-module/model-icon/model-icon-style.vue
@@ -17,7 +17,7 @@
                     <upload v-model:icon-value="form.icon_class" :limit="1" size="50" is-icon type="icon" @update:model-value="icon_change('1')"></upload>
                 </el-form-item>
                 <el-form-item label="数据字段">
-                    <el-select v-model="form.data_source_id" value-key="id" clearable filterable placeholder="请选择数据字段" size="default" class="flex-1" @change="icon_change('2')">
+                    <el-select v-model="form.data_source_field.id" value-key="id" clearable filterable placeholder="请选择数据字段" size="default" class="flex-1" @change="icon_change('2')">
                         <el-option v-for="item in options.filter((item) => item.type == 'icon')" :key="item.field" :label="item.name" :value="item.field" />
                     </el-select>
                 </el-form-item>
@@ -25,7 +25,7 @@
                     <url-value v-model="form.icon_link" @update:model-value="link_change('1')"></url-value>
                 </el-form-item>
                 <el-form-item label="数据链接">
-                    <el-select v-model="form.data_source_link" value-key="id" clearable filterable placeholder="请选择数据链接字段" size="default" class="flex-1" @change="link_change('2')">
+                    <el-select v-model="form.data_source_link_field.id" value-key="id" clearable filterable placeholder="请选择数据链接字段" size="default" class="flex-1" @change="link_change('2')">
                         <el-option v-for="item in options.filter((item) => item.type == 'link')" :key="item.field" :label="item.name" :value="item.field" />
                     </el-select>
                 </el-form-item>
@@ -100,7 +100,7 @@
     </div>
 </template>
 <script setup lang="ts">
-import { location_compute } from '@/utils';
+import { get_data_fields, location_compute } from '@/utils';
 import { pick, cloneDeep } from 'lodash';
 const props = defineProps({
     value: {
@@ -131,15 +131,17 @@ const bg_radius_change = (radius: any) => {
 const icon_change = (key: string) => {
     if (key == '2') {
         form.value.icon_title = '';
+        form.value.data_source_field = get_data_fields(props.options, 'icon', form.value.data_source_field.id);
     } else {
-        form.value.data_source_id = '';
+        form.value.data_source_field = get_data_fields([], 'icon', '');
     }
 };
 const link_change = (key: string) => {
     if (key == '2') {
         form.value.icon_link = {};
+        form.value.data_source_link_field = get_data_fields(props.options, 'icon', form.value.data_source_link_field.id);
     } else {
-        form.value.data_source_link = '';
+        form.value.data_source_link_field = get_data_fields([], 'icon', '');
     }
 };
 const mult_color_picker_event = (arry: color_list[], type: number) => {
diff --git a/src/components/common/custom-module/model-image/index.vue b/src/components/common/custom-module/model-image/index.vue
index 0a0f0d01..57fb9e1c 100644
--- a/src/components/common/custom-module/model-image/index.vue
+++ b/src/components/common/custom-module/model-image/index.vue
@@ -47,37 +47,43 @@ const img = computed(() => {
         if (!isEmpty(props.sourceList)) {
             let image_url = '';
             // 取出数据源ID
-            const data_source_id = form.value.data_source_id;
-            if (!data_source_id.includes('.')) {
-                // 不输入商品， 文章和品牌时，从外层处理数据
-                image_url = props.sourceList[data_source_id];
-                // 如果是商品,品牌，文章的图片， 其他的切换为从data中取数据
-                if (!isEmpty(props.sourceList.data) && props.isCustom) {
-                    if (data_source_id == props.imgParams) {
-                        image_url = !isEmpty(props.sourceList.new_cover)? props.sourceList.new_cover[0]?.url || '' : props.sourceList.data[data_source_id];
-                    } else {
-                        image_url = props.sourceList.data[data_source_id];
-                    }
-                }
+            const data_source_id = !isEmpty(form.value?.data_source_field?.id || '') ? form.value?.data_source_field?.id : form.value.data_source_id;
+            // 数据源内容
+            const option = form.value?.data_source_field?.option || {};
+            // 如果是商品,品牌，文章的图片， 其他的切换为从data中取数据
+            if (data_source_id.includes(';')) {
+                // 取出所有的字段，使用;分割
+                const ids = data_source_id.split(';');
+                let url = '';
+                ids.forEach((item: string, index: number) => {
+                    url += data_handling(item) + (index != ids.length - 1 ? (option?.join || '') : '');
+                });
+                image_url = url;
             } else {
                 // 循环取值,使用reduce 累加函数循环取值
-                image_url = get_nested_property(props.sourceList, data_source_id);
-                // 如果是商品,品牌，文章的图片， 其他的切换为从data中取数据
-                if (!isEmpty(props.sourceList.data) && props.isCustom) {
-                    if (data_source_id == props.imgParams) {
-                        image_url = !isEmpty(props.sourceList.new_cover)? props.sourceList.new_cover[0]?.url || '' : get_nested_property(props.sourceList.data, data_source_id);
-                    } else {
-                        image_url = get_nested_property(props.sourceList.data, data_source_id);
-                    }
-                }
+                image_url = data_handling(data_source_id);
             }
-            return image_url;
+            return (option?.first || '') + image_url + (option?.last || '');
         } else {
             return '';
         }
     }
 });
 
+const data_handling = (data_source_id: string) => {
+    // 循环取值,使用reduce 累加函数循环取值
+    let image_url = get_nested_property(props.sourceList, data_source_id);
+    // 如果是商品,品牌，文章的图片， 其他的切换为从data中取数据
+    if (!isEmpty(props.sourceList.data) && props.isCustom) {
+        if (data_source_id == props.imgParams) {
+            image_url = !isEmpty(props.sourceList.new_cover)? props.sourceList.new_cover[0]?.url || '' : get_nested_property(props.sourceList.data, data_source_id);
+        } else {
+            image_url = get_nested_property(props.sourceList.data, data_source_id);
+        }
+    }
+    return image_url;
+}
+
 const image_style = computed(() => {
     return `${ set_count() };transform: rotate(${form.value.img_rotate}deg); ${ radius_computer(form.value.img_radius, props.scale) };`;
 });
diff --git a/src/components/common/custom-module/model-image/model-image-style.vue b/src/components/common/custom-module/model-image/model-image-style.vue
index 4c84de3c..169785b9 100644
--- a/src/components/common/custom-module/model-image/model-image-style.vue
+++ b/src/components/common/custom-module/model-image/model-image-style.vue
@@ -17,7 +17,7 @@
                     <upload v-model="form.img" :limit="1" size="50" @update:model-value="img_src_change('1')"></upload>
                 </el-form-item>
                 <el-form-item label="数据字段">
-                    <el-select v-model="form.data_source_id" value-key="id" clearable filterable placeholder="请选择数据字段" size="default" class="flex-1" @change="img_src_change('2')">
+                    <el-select v-model="form.data_source_field.id" value-key="id" clearable filterable placeholder="请选择数据字段" size="default" class="flex-1" @change="img_src_change('2')">
                         <el-option v-for="item in options.filter(item => item.type == 'images')" :key="item.field" :label="item.name" :value="item.field" />
                     </el-select>
                 </el-form-item>
@@ -25,7 +25,7 @@
                     <url-value v-model="form.link" @update:model-value="img_link_change('1')"></url-value>
                 </el-form-item>
                 <el-form-item label="数据链接">
-                    <el-select v-model="form.data_source_link" value-key="id" clearable filterable placeholder="请选择数据链接字段" size="default" class="flex-1" @change="img_link_change('2')">
+                    <el-select v-model="form.data_source_link_field.id" value-key="id" clearable filterable placeholder="请选择数据链接字段" size="default" class="flex-1" @change="img_link_change('2')">
                         <el-option v-for="item in options.filter((item) => item.type == 'link')" :key="item.field" :label="item.name" :value="item.field" />
                     </el-select>
                 </el-form-item>
@@ -74,7 +74,7 @@
     </div>
 </template>
 <script setup lang="ts">
-import { location_compute } from '@/utils';
+import { get_data_fields, location_compute } from '@/utils';
 import { pick } from 'lodash';
 const props = defineProps({
     value: {
@@ -105,16 +105,18 @@ const border_radius_change = (radius: any) => {
 const img_src_change = (key: string) => {
     if (key == '2') {
         form.value.img = [];
+        form.value.data_source_field = get_data_fields(props.options, 'images', form.value.data_source_field.id);
     } else {
-        form.value.data_source_id = '';
+        form.value.data_source_field = get_data_fields([], 'images', '');
     }
 }
 // 数据链接字段切换时，更新另外一个数据
 const img_link_change = (key: string) => {
     if (key == '2') {
         form.value.link = {};
+        form.value.data_source_link_field = get_data_fields(props.options, 'link', form.value.data_source_link_field.id);
     } else {
-        form.value.data_source_link = '';
+        form.value.data_source_link_field = get_data_fields([], 'link', '');
     }
 }
 
diff --git a/src/components/common/custom-module/model-panel/model-panel-style.vue b/src/components/common/custom-module/model-panel/model-panel-style.vue
index 98ff1db8..7bcd246e 100644
--- a/src/components/common/custom-module/model-panel/model-panel-style.vue
+++ b/src/components/common/custom-module/model-panel/model-panel-style.vue
@@ -17,7 +17,7 @@
                     <url-value v-model="form.link"></url-value>
                 </el-form-item>
                 <el-form-item label="数据链接">
-                    <el-select v-model="form.data_source_link" value-key="id" clearable filterable placeholder="请选择数据链接字段" size="default" class="flex-1" @change="img_link_change('2')">
+                    <el-select v-model="form.data_source_link_field.id" value-key="id" clearable filterable placeholder="请选择数据链接字段" size="default" class="flex-1" @change="img_link_change('2')">
                         <el-option v-for="item in options.filter((item) => item.type == 'link')" :key="item.field" :label="item.name" :value="item.field" />
                     </el-select>
                 </el-form-item>
@@ -80,7 +80,7 @@
     </div>
 </template>
 <script setup lang="ts">
-import { location_compute } from '@/utils';
+import { get_data_fields, location_compute } from '@/utils';
 import { pick, cloneDeep } from 'lodash';
 const props = defineProps({
     value: {
@@ -124,8 +124,9 @@ const location_y_change = (val: number) => {
 const img_link_change = (key: string) => {
     if (key == '2') {
         form.value.link = {};
+        form.value.data_source_link_field = get_data_fields(props.options, 'link', form.value.data_source_link_field.id);
     } else {
-        form.value.data_source_link = '';
+        form.value.data_source_link_field = get_data_fields([], 'link', '');
     }
 }
 
diff --git a/src/components/common/custom-module/model-text/index.vue b/src/components/common/custom-module/model-text/index.vue
index 1d8eeccc..1f0f86b4 100644
--- a/src/components/common/custom-module/model-text/index.vue
+++ b/src/components/common/custom-module/model-text/index.vue
@@ -73,35 +73,31 @@ const text_title = computed(() => {
         }
     }
     // 获取数据源ID
-    const data_source_id = formValue.data_source_id;
+    const data_source_id = !isEmpty(formValue?.data_source_field?.id || '') ? formValue?.data_source_field?.id : [ formValue.data_source_id ];
+    // 数据源内容
+    const option = formValue?.data_source_field?.option || {};
+    // 文本信息
     let text_title = '';
     try {
-        // 根据数据源ID是否包含点号来区分处理方式
-        if (!data_source_id.includes('.')) {
-            // 从数据源列表中获取标题
-            text_title = props.sourceList[data_source_id];
-            // 如果是自定义标题，进一步处理
-            if (props.sourceList.data && props.isCustom) {
-                if (data_source_id === props.titleParams) {
-                    text_title = props.sourceList.new_title || props.sourceList.data[data_source_id];
+        // 多选判断
+        if (data_source_id.length > 0) {
+            // 遍历取出所有的值
+            data_source_id.forEach((source_id: string) => {
+                const sourceList = option.filter((item: any) => item.field == source_id);
+                // 根据数据源ID是否包含点号来区分处理方式
+                if (source_id.includes(';')) {
+                    const ids = source_id.split(';');
+                    let text = '';
+                    ids.forEach((item: string, index: number) => {
+                        text += data_handling(item) + (index != ids.length - 1 ? (sourceList?.join || '') : '');
+                    });
+                    text_title += (sourceList?.first || '') + text + (sourceList?.last || '');
                 } else {
-                    text_title = props.sourceList.data[data_source_id];
+                    text_title += (sourceList?.first || '') + data_handling(source_id) + (sourceList?.last || '');
                 }
-            }
-        } else {
-            text_title = get_nested_property(props.sourceList, data_source_id);
-            // 如果是自定义标题，进一步处理嵌套对象中的数据
-            if (props.sourceList.data && props.isCustom) {
-                if (data_source_id === props.titleParams) {
-                    text_title = props.sourceList.new_title || get_nested_property(props.sourceList.data, data_source_id);
-                } else {
-                    text_title = get_nested_property(props.sourceList.data, data_source_id);
-                }
-            }
+            });
         }
     } catch (error) {
-        // 错误处理：打印错误信息，并根据是否显示面板返回默认文本
-        console.error('Error in getTextTitle:', error);
         if (!props.isDisplayPanel) {
             return '请在此输入文字';
         } else {
@@ -109,13 +105,26 @@ const text_title = computed(() => {
         }
     }
     // 确定最终返回的文本，优先使用表单值中的文本标题，如果为空则使用之前获取的标题或默认文本
-    let text = formValue.text_title || text_title;
-    if (text === '' && !props.isDisplayPanel) {
+    let text = formValue.text_title || text_title || '';
+    if (text == '' && !props.isDisplayPanel) {
         text = props.options.find((item: any) => item.field === data_source_id)?.name || '请在此输入文字';
     }
     return text;
 }
 
+const data_handling = (data_source_id: string) => {
+    let text_title = get_nested_property(props.sourceList, data_source_id);
+    // 如果是自定义标题，进一步处理嵌套对象中的数据
+    if (props.sourceList.data && props.isCustom) {
+        if (data_source_id === props.titleParams) {
+            text_title = props.sourceList.new_title || get_nested_property(props.sourceList.data, data_source_id);
+        } else {
+            text_title = get_nested_property(props.sourceList.data, data_source_id);
+        }
+    }
+    return text_title;
+}
+
 const text_style = computed(() => {
     let style = `font-size: ${ form.value.text_size * props.scale }px;line-height: ${ (typeof form.value.line_text_size === "number" ? form.value.line_text_size : form.value.text_size) * props.scale}px;color: ${ form.value.text_color }; text-align: ${ form.value.text_location }; transform: rotate(${form.value.text_rotate}deg);text-decoration: ${ form.value.text_option };${ padding_computer(form.value.text_padding, props.scale) };`;
     if (form.value.text_weight == 'italic') {
diff --git a/src/components/common/custom-module/model-text/model-text-style.vue b/src/components/common/custom-module/model-text/model-text-style.vue
index ec6fee0e..ce3ff211 100644
--- a/src/components/common/custom-module/model-text/model-text-style.vue
+++ b/src/components/common/custom-module/model-text/model-text-style.vue
@@ -17,7 +17,7 @@
                     <el-input v-model="form.text_title" placeholder="请输入文本内容" type="textarea" clearable :rows="3" @input="text_change('1')"></el-input>
                 </el-form-item>
                 <el-form-item label="数据字段">
-                    <el-select v-model="form.data_source_id" value-key="id" clearable filterable placeholder="请选择数据字段" size="default" class="flex-1" @change="text_change('2')">
+                    <el-select v-model="form.data_source_field.id" value-key="id" multiple collapse-tags clearable filterable placeholder="请选择数据字段" size="default" class="flex-1" @change="text_change('2')">
                         <el-option v-for="item in options.filter((item) => item.type == 'text')" :key="item.field" :label="item.name" :value="item.field" />
                     </el-select>
                 </el-form-item>
@@ -25,7 +25,7 @@
                     <url-value v-model="form.text_link" @update:model-value="text_link_change('1')"></url-value>
                 </el-form-item>
                 <el-form-item label="数据链接">
-                    <el-select v-model="form.data_source_link" value-key="id" clearable filterable placeholder="请选择数据链接字段" size="default" class="flex-1" @change="text_link_change('2')">
+                    <el-select v-model="form.data_source_link_field.id" value-key="id" clearable filterable placeholder="请选择数据链接字段" size="default" class="flex-1" @change="text_link_change('2')">
                         <el-option v-for="item in options.filter((item) => item.type == 'link')" :key="item.field" :label="item.name" :value="item.field" />
                     </el-select>
                 </el-form-item>
@@ -123,7 +123,7 @@
     </div>
 </template>
 <script setup lang="ts">
-import { location_compute } from '@/utils';
+import { location_compute, get_data_fields } from '@/utils';
 import { pick, cloneDeep } from 'lodash';
 const props = defineProps({
     value: {
@@ -160,16 +160,23 @@ onBeforeMount(() => {
 const text_change = (key: string) => {
     if (key == '2') {
         form.value.text_title = '';
+        if (form.value.data_source_field.id.length > 0) {
+            form.value.data_source_field.option = props.options.filter((item) => item.type == 'text' && form.value.data_source_field.id.includes(item.field))
+        } else {
+            form.value.data_source_field = get_data_fields([], 'text', '');
+        }
     } else {
-        form.value.data_source_id = '';
+        // 如果没有数据，就赋值为空
+        form.value.data_source_field = get_data_fields([], 'text', '');
     }
 };
 // 数据字段切换时，更新另外一个数据
 const text_link_change = (key: string) => {
     if (key == '2') {
         form.value.text_link = {};
+        form.value.data_source_link_field = get_data_fields(props.options, 'link', form.value.data_source_link_field.id);
     } else {
-        form.value.data_source_link = '';
+        form.value.data_source_link_field = get_data_fields([], 'link', '');
     }
 };
 // 文字大小变化时，同步更新行间距
diff --git a/src/components/model-custom/components/index-default.ts b/src/components/model-custom/components/index-default.ts
index eb73e353..d47fcc01 100644
--- a/src/components/model-custom/components/index-default.ts
+++ b/src/components/model-custom/components/index-default.ts
@@ -1,3 +1,4 @@
+import { id } from "element-plus/es/locale"
 
 // 文本的默认值
 const text_com_data = {
@@ -5,9 +6,16 @@ const text_com_data = {
     com_height: 17,
     staging_height: 17,
     text_title: '文本',
-    data_source_id: '',
+    data_source_field: {
+        id: [],
+        option: []
+    },
     data_source_list: {},
     text_link: {},
+    data_source_link_field: {
+        id: '',
+        option: {}
+    },
     is_rich_text: '0',
     is_up_down: '1',
     text_color: '#000',
@@ -45,9 +53,16 @@ const img_com_data = {
     com_height: 50,
     staging_height: 50,
     img: [],
-    data_source_id: '',
+    data_source_field: {
+        id: '',
+        option: {}
+    },
     data_source_list: {},
     link: {},
+    data_source_link_field: {
+        id: '',
+        option: {}
+    },
     img_radius: {
         radius: 0,
         radius_top_left: 0,
@@ -90,9 +105,16 @@ const icon_com_data = {
     com_height: 36,
     staging_height: 36,
     icon_class: '',
-    data_source_id: '',
+   data_source_field: {
+        id: '',
+        option: {}
+    },
     data_source_list: {},
     icon_link: {},
+    data_source_link_field: {
+        id: '',
+        option: {}
+    },
     is_rich_icon: '0',
     is_up_down: '1',
     icon_color: '#000',
@@ -130,6 +152,10 @@ const panel_com_data = {
     com_height: 100,
     staging_height: 100,
     link: {},
+    data_source_link_field: {
+        id: '',
+        option: {}
+    },
     icon_rotate: 0,
     background_img_style: '2',
     background_img: [],
diff --git a/src/components/model-custom/components/index.vue b/src/components/model-custom/components/index.vue
index bda6f084..0733c214 100644
--- a/src/components/model-custom/components/index.vue
+++ b/src/components/model-custom/components/index.vue
@@ -418,6 +418,14 @@ watch(() => center_height.value, () => {
                 // 规整历史数据，避免有新增字段丢失
                 ...Object.assign({}, cloneDeep((defaultComData as any)[`${item.key}_com_data`]), item.com_data),
                 com_height: item.com_data.staging_height,
+                data_source_field: {
+                    ...item.com_data?.data_source_field ?? { id:'', option: {} },
+                    id: !isEmpty(item.com_data?.data_source_field?.id || '')? item.com_data.data_source_field.id : item.com_data.data_source_id,
+                },
+                data_source_link_field: {
+                    ...item.com_data?.data_source_link_field ?? { id: '', option: {} },
+                    id: !isEmpty(item.com_data?.data_source_link_field?.id || '')? item.com_data.data_source_link_field.id : item.com_data.data_source_link,
+                },
             },
         }));
         // 容器高度变化时，组件不绑定右侧数据
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 93cbd056..6e007791 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -45,6 +45,46 @@ export function get_nested_property(obj: any, path: string): string {
     // 如果当前对象存在且拥有下一个属性键，则继续访问；否则返回空字符串
     return keys.reduce((o, key) => (o && o[key] ? o[key] : ''), obj) || '';
 }
+
+/**
+ * 定义一个ListItem类型，用于描述列表项的结构
+ */
+type ListItem = { type: string; field: string; option?: Record<string, any> };
+
+/**
+ * 根据指定的类型和字段从列表中获取数据字段
+ * 
+ * @param list 列表项数组，每个项包含type和field属性
+ * @param type 要匹配的类型
+ * @param field 要匹配的字段名称
+ * @returns 返回一个包含id和option的对象，id为匹配的字段名，option为匹配项的option属性
+ */
+export const get_data_fields = (list: Array<ListItem>, type: string, field: string) => {
+    // 定义默认返回结果
+    const defaultResult = { id: '', option: {} };
+    try {
+        // 如果列表为空，直接返回默认结果
+        if (list.length === 0) {
+            return defaultResult;
+        }
+        // 过滤列表，找出类型和字段都匹配的项
+        const new_list = list.filter((item) => item.type === type && item.field === field);
+        // 如果找到匹配的项，返回第一个匹配项的字段名和全部信息
+        if (new_list.length > 0) {
+            return {
+                id: new_list[0].field,
+                option: new_list[0],
+            };
+        } else {
+            // 如果没有找到匹配的项，返回默认结果
+            return defaultResult;
+        }
+    } catch (error) {
+        // 捕获异常，返回默认结果
+        return defaultResult;
+    }
+}
+
 /**
  * 将对象或数组中的字符串转换为数字
  * 此函数递归地遍历给定对象或数组，将所有能转换为数字的字符串转换成数字类型