From 6418ff75135a01d1497ea9737d5c1128f04ed280 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8E=E8=82=96=E7=A3=8A?= <18851179580@163.com>
Date: Mon, 9 Dec 2024 13:58:51 +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=E7=9A=84=E5=A4=84=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../custom-module/data-rendering/index.vue    |  29 ++--
 .../common/custom-module/model-icon/index.vue |   8 +-
 .../custom-module/model-image/index.vue       |  21 ++-
 .../common/custom-module/model-text/index.vue |  17 +-
 .../model-custom/components/index.vue         |  15 +-
 src/components/model-custom/index.vue         |  12 +-
 .../model-custom/model-custom-content.vue     | 151 ++++++++++--------
 .../components/custom/index.vue               |   4 +-
 .../model-data-magic-content.vue              |   5 +-
 src/config/const/custom.ts                    |   7 +-
 src/views/layout/index.vue                    |   8 +-
 11 files changed, 149 insertions(+), 128 deletions(-)

diff --git a/src/components/common/custom-module/data-rendering/index.vue b/src/components/common/custom-module/data-rendering/index.vue
index 4a34b2d3..e02baec0 100644
--- a/src/components/common/custom-module/data-rendering/index.vue
+++ b/src/components/common/custom-module/data-rendering/index.vue
@@ -2,19 +2,19 @@
     <div class="w h re custom-other">
         <div v-for="(item, index) in list" :key="item.id" class="main-content" :style="{'left': percentage_count(item.location.x) , 'top': percentage_count(item.location.y), 'width': percentage_count(item.com_data.com_width), 'height': percentage_count(item.com_data.com_height), 'z-index': (customList.length - 1) - index}">
             <template v-if="item.key == 'text'">
-                <model-text :key="item.id" :value="item.com_data" :scale="scale" :source-list="sourceList" :source-type="sourceType" :is-percentage="true"></model-text>
+                <model-text :key="item.id" :value="item.com_data" :scale="scale" :source-list="sourceList" :is-custom="isCustom" :title-params="showData?.data_name || 'name'" :is-percentage="true"></model-text>
             </template>
             <template v-else-if="item.key == 'img'">
-                <model-image :key="item.id" :value="item.com_data" :scale="scale" :source-list="sourceList" :source-type="sourceType" :is-percentage="true"></model-image>
+                <model-image :key="item.id" :value="item.com_data" :scale="scale" :source-list="sourceList" :is-custom="isCustom" :img-params="showData?.data_logo || ''" :is-percentage="true"></model-image>
             </template>
             <template v-else-if="item.key == 'auxiliary-line'">
-                <model-lines :key="item.id" :value="item.com_data" :scale="scale" :source-list="sourceList" :source-type="sourceType" :is-percentage="true"></model-lines>
+                <model-lines :key="item.id" :value="item.com_data" :scale="scale" :source-list="sourceList" :is-custom="isCustom"  :is-percentage="true"></model-lines>
             </template>
             <template v-else-if="item.key == 'icon'">
-                <model-icon :key="item.id" :value="item.com_data" :scale="scale" :source-list="sourceList" :source-type="sourceType" :is-percentage="true"></model-icon>
+                <model-icon :key="item.id" :value="item.com_data" :scale="scale" :source-list="sourceList" :is-custom="isCustom"  :is-percentage="true"></model-icon>
             </template>
             <template v-else-if="item.key == 'panel'">
-                <model-panel :key="item.id" :value="item.com_data" :scale="scale" :source-list="sourceList" :source-type="sourceType" :is-percentage="true"></model-panel>
+                <model-panel :key="item.id" :value="item.com_data" :scale="scale" :source-list="sourceList" :is-custom="isCustom"  :is-percentage="true"></model-panel>
             </template>
         </div>
     </div>
@@ -47,10 +47,6 @@ const props = defineProps({
             return {};
         }
     },
-    sourceType: {
-        type: String,
-        default: ''
-    },
     dataHeight: {
         type: Number,
         default: 0,
@@ -58,6 +54,21 @@ const props = defineProps({
     scale: {
         type: Number,
         default: 1,
+    },
+    isCustom: {
+        type: Boolean,
+        default: false
+    },
+    showData: {
+        type: Object as PropType<{
+            data_key: string;
+            data_name: string;
+            data_logo?: string;
+        }>,
+        default: () => ({
+            data_key: 'id',
+            data_name: 'name',
+        })
     }
 });
 
diff --git a/src/components/common/custom-module/model-icon/index.vue b/src/components/common/custom-module/model-icon/index.vue
index 8ff9f267..0e524da0 100644
--- a/src/components/common/custom-module/model-icon/index.vue
+++ b/src/components/common/custom-module/model-icon/index.vue
@@ -33,9 +33,9 @@ const props = defineProps({
         type: Number,
         default: 1
     },
-    sourceType: {
-        type: String,
-        default: ''
+    isCustom: {
+        type: Boolean,
+        default: false
     }
 });
 // 用于页面判断显示
@@ -49,7 +49,7 @@ const icon_class = computed(() => {
             // 不输入商品， 文章和品牌时，从外层处理数据
             let icon = props.sourceList[form.value.data_source_id];
             // 如果是商品,品牌，文章的图片， 其他的切换为从data中取数据
-            if (['goods', 'article', 'brand'].includes(props.sourceType) && !isEmpty(props.sourceList.data)) {
+            if (!isEmpty(props.sourceList.data) && props.isCustom) {
                 icon = props.sourceList.data[form.value.data_source_id];
             }
             return icon;
diff --git a/src/components/common/custom-module/model-image/index.vue b/src/components/common/custom-module/model-image/index.vue
index 397e221f..5035cc76 100644
--- a/src/components/common/custom-module/model-image/index.vue
+++ b/src/components/common/custom-module/model-image/index.vue
@@ -28,18 +28,15 @@ const props = defineProps({
         type: Number,
         default: 1
     },
-    sourceType: {
+    isCustom: {
+        type: Boolean,
+        default: false
+    },
+    imgParams: {
         type: String,
-        default: '',
+        default: ''
     }
 });
-
-const keyMap: { [key: string]: string } = {
-    goods: 'images',
-    article: 'cover',
-    brand: 'logo'
-};
-
 // 用于页面判断显示
 const form = computed(() => props.value);
 
@@ -51,9 +48,9 @@ const img = computed(() => {
             // 不输入商品， 文章和品牌时，从外层处理数据
             let image_url = props.sourceList[form.value.data_source_id];
             // 如果是商品,品牌，文章的图片， 其他的切换为从data中取数据
-            if (['goods', 'article', 'brand'].includes(props.sourceType) && !isEmpty(props.sourceList.data)) {
-                if (form.value.data_source_id == keyMap[props.sourceType]) {
-                    image_url = !isEmpty(props.sourceList.new_cover)? props.sourceList.new_cover[0]?.url || '' : props.sourceList.data[keyMap[props.sourceType]];
+            if (!isEmpty(props.sourceList.data) && props.isCustom) {
+                if (form.value.data_source_id == props.imgParams) {
+                    image_url = !isEmpty(props.sourceList.new_cover)? props.sourceList.new_cover[0]?.url || '' : props.sourceList.data[props.imgParams];
                 } else {
                     image_url = props.sourceList.data[form.value.data_source_id];
                 }
diff --git a/src/components/common/custom-module/model-text/index.vue b/src/components/common/custom-module/model-text/index.vue
index be897eaf..4136a4c5 100644
--- a/src/components/common/custom-module/model-text/index.vue
+++ b/src/components/common/custom-module/model-text/index.vue
@@ -35,16 +35,15 @@ const props = defineProps({
         type: Number,
         default: 1
     },
-    sourceType: {
+    isCustom: {
+        type: Boolean,
+        default: false
+    },
+    titleParams: {
         type: String,
         default: ''
     }
 });
-const keyMap: { [key: string]: string } = {
-    goods: 'title',
-    article: 'title',
-    brand: 'name'
-};
 
 // 用于页面判断显示
 const form = computed(() => props.value);
@@ -52,10 +51,10 @@ const text_title = computed(() => {
     let text = '';
     let text_title = props.sourceList[form.value.data_source_id];
     // 如果是商品的标题或者是品牌的名称，需要判断是否有新的标题，没有的话就取原来的标题
-    if (['goods', 'article', 'brand'].includes(props.sourceType) && !isEmpty(props.sourceList.data)) {
+    if (!isEmpty(props.sourceList.data) && props.isCustom) {
         // 其他的切换为从data中取数据
-        if (form.value.data_source_id == keyMap[props.sourceType]) {
-            text_title = !isEmpty(props.sourceList.new_title) ? props.sourceList.new_title : props.sourceList.data[keyMap[props.sourceType]];
+        if (form.value.data_source_id == props.titleParams) {
+            text_title = !isEmpty(props.sourceList.new_title) ? props.sourceList.new_title : props.sourceList.data[props.titleParams];
         } else {
             text_title = props.sourceList.data[form.value.data_source_id];
         }
diff --git a/src/components/model-custom/components/index.vue b/src/components/model-custom/components/index.vue
index 824b5f63..49a7bcc3 100644
--- a/src/components/model-custom/components/index.vue
+++ b/src/components/model-custom/components/index.vue
@@ -70,19 +70,19 @@
                                 <Vue3DraggableResizable v-for="(item, index) in diy_data" :key="item.id" v-model:w="item.com_data.com_width" v-model:h="item.com_data.com_height" :min-w="0" :min-h="0" :class="{'plug-in-show-component-line': is_show_component_line, 'plug-in-show-tabs': item.show_tabs == '1', 'vdr-handle-z-index': item.com_data.bottom_up == '1' }" :style="{ 'z-index': (diy_data.length - 1) - index }" :init-w="item.com_data.com_width" :init-h="item.com_data.com_height" :x="item.location.x" :y="item.location.y" :parent="true" :draggable="is_draggable" @mousedown.stop="on_choose(index, item.show_tabs)" @click.stop="on_choose(index, item.show_tabs)" @drag-end="dragEndHandle($event, index)" @resizing="resizingHandle($event, item.key, index)" @resize-end="resizingHandle($event, item.key, index)">
                                     <div :class="['main-content', { 'plug-in-border': item.show_tabs == '1' }]">
                                         <template v-if="item.key == 'text'">
-                                            <model-text :key="item.id" :value="item.com_data" :source-list="props.sourceList" :source-type="sourceType"></model-text>
+                                            <model-text :key="item.id" :value="item.com_data" :source-list="props.sourceList" :is-custom="isCustom" :title-params="showData?.data_name || 'name'"></model-text>
                                         </template>
                                         <template v-else-if="item.key == 'img'">
-                                            <model-image :key="item.id" :value="item.com_data" :source-list="props.sourceList" :source-type="sourceType"></model-image>
+                                            <model-image :key="item.id" :value="item.com_data" :source-list="props.sourceList" :is-custom="isCustom" :img-params="showData?.data_logo || ''"></model-image>
                                         </template>
                                         <template v-else-if="item.key == 'auxiliary-line'">
-                                            <model-lines :key="item.id" :value="item.com_data" :source-list="props.sourceList" :source-type="sourceType"></model-lines>
+                                            <model-lines :key="item.id" :value="item.com_data" :source-list="props.sourceList" :is-custom="isCustom"></model-lines>
                                         </template>
                                         <template v-else-if="item.key == 'icon'">
-                                            <model-icon :key="item.id" :value="item.com_data" :source-list="props.sourceList" :source-type="sourceType"></model-icon>
+                                            <model-icon :key="item.id" :value="item.com_data" :source-list="props.sourceList" :is-custom="isCustom"></model-icon>
                                         </template>
                                         <template v-else-if="item.key == 'panel'">
-                                            <model-panel :key="item.id" :value="item.com_data" :source-list="props.sourceList" :source-type="sourceType"></model-panel>
+                                            <model-panel :key="item.id" :value="item.com_data" :source-list="props.sourceList" :is-custom="isCustom"></model-panel>
                                         </template>
                                     </div>
                                 </Vue3DraggableResizable>
@@ -107,7 +107,7 @@
     </div>
 </template>
 <script setup lang="ts">
-import { cloneDeep, isEmpty } from 'lodash';
+import { cloneDeep, isEmpty, property } from 'lodash';
 import { get_math } from '@/utils';
 import { defaultComData, isRectangleIntersecting } from "./index-default";
 import { SortableEvent, VueDraggable } from 'vue-draggable-plus';
@@ -120,7 +120,8 @@ const emits = defineEmits(['rightUpdate']);
 interface Props {
     list: diy_content[];
     sourceList: object;
-    sourceType: string;
+    isCustom: boolean;
+    showData: any;
 }
 const props = defineProps<Props>();
 //#endregion
diff --git a/src/components/model-custom/index.vue b/src/components/model-custom/index.vue
index 4e5da090..21ca53b9 100644
--- a/src/components/model-custom/index.vue
+++ b/src/components/model-custom/index.vue
@@ -4,7 +4,7 @@
             <template v-if="data_source_content_list.length > 0 && form.data_source_direction == 'vertical'">
                 <div v-for="(item1, index1) in data_source_content_list" :key="index1" :style="style_chunk_container">
                     <div class="w h" :style="style_chunk_img_container">
-                        <data-rendering :custom-list="form.custom_list" :source-list="item1" :source-type="form?.data_source || ''" :data-height="form.height" :scale="scale"></data-rendering>
+                        <data-rendering :custom-list="form.custom_list" :source-list="item1" :data-height="form.height" :scale="scale" :is-custom="form.is_custom_data == '1'" :show-data="form?.show_data || { data_key: 'id', data_name: 'name' }"></data-rendering>
                     </div>
                 </div>
             </template>
@@ -13,7 +13,7 @@
                     <swiper-slide v-for="(item1, index1) in data_source_content_list" :key="index1">
                         <div :style="style_chunk_container">
                             <div class="w h" :style="style_chunk_img_container">
-                                <data-rendering :custom-list="form.custom_list" :source-list="item1" :source-type="form?.data_source || ''" :data-height="form.height" :scale="scale"></data-rendering>
+                                <data-rendering :custom-list="form.custom_list" :source-list="item1" :data-height="form.height" :scale="scale" :is-custom="form.is_custom_data == '1'" :show-data="form?.show_data || { data_key: 'id', data_name: 'name' }"></data-rendering>
                             </div>
                         </div>
                     </swiper-slide>
@@ -67,17 +67,11 @@ const state = reactive({
 });
 // 如果需要解构，确保使用toRefs
 const { form, new_style } = toRefs(state);
-
 onBeforeMount(() => {
     // 历史数据处理
     if (!Object.keys(form.value.data_source_content).includes('data_auto_list') && !Object.keys(form.value.data_source_content).includes('data_list')) {
         const data = cloneDeep(form.value.data_source_content);
-        const new_list = cloneDeep(source_list[form.value.data_source as keyof typeof source_list]);
-        if (!isEmpty(new_list)) {
-            form.value.data_source_content = new_list;
-        } else {
-            form.value.data_source_content = cloneDeep(source_list['common']);
-        }
+        form.value.data_source_content = cloneDeep(source_list['common']);
         if (!isEmpty(data)) {
             form.value.data_source_content.data_list = [ data ];
         }
diff --git a/src/components/model-custom/model-custom-content.vue b/src/components/model-custom/model-custom-content.vue
index 76f762fa..b2bc23f1 100644
--- a/src/components/model-custom/model-custom-content.vue
+++ b/src/components/model-custom/model-custom-content.vue
@@ -41,7 +41,7 @@
                             </el-form-item>
                             <template v-if="Number(form.data_source_content.data_type) === 0">
                                 <div class="nav-list">
-                                    <drag-group :list="form.data_source_content.data_list" :img-params="default_type_data?.appoint_config?.show_data?.data_logo || ''" :title-params="default_type_data?.appoint_config?.show_data?.data_name || 'name'" type="custom" @onsort="data_list_sort" @remove="data_list_remove" @replace="data_list_replace"></drag-group>
+                                    <drag-group :list="form.data_source_content.data_list" :img-params="form.show_data?.data_logo || ''" :title-params="form.show_data?.data_name || 'name'" type="custom" @onsort="data_list_sort" @remove="data_list_remove" @replace="data_list_replace"></drag-group>
                                     <el-button class="mt-20 w" @click="add">+添加</el-button>
                                 </div>
                             </template>
@@ -61,7 +61,7 @@
         <Dialog ref="dialog" @accomplish="accomplish">
             <div class="flex-row h w">
                 <!-- 左侧和中间区域 -->
-                <DragIndex ref="draglist" :key="dragkey" v-model:height="center_height" v-model:width="custom_width" :source-list="!isEmpty(data_source_content_list) ? data_source_content_list[0] : {}" :source-type="form?.data_source || ''" :list="custom_list" @right-update="right_update"></DragIndex>
+                <DragIndex ref="draglist" :key="dragkey" v-model:height="center_height" v-model:width="custom_width" :source-list="!isEmpty(data_source_content_list) ? data_source_content_list[0] : {}" :is-custom="form.is_custom_data == '1'" :show-data="form?.show_data || { data_key: 'id', data_name: 'name' }"  :list="custom_list" @right-update="right_update"></DragIndex>
                 <!-- 右侧配置区域 -->
                 <div class="settings">
                     <template v-if="diy_data.key === 'img'">
@@ -87,7 +87,7 @@
                 </div>
             </div>
         </Dialog>
-        <custom-dialog v-model:dialog-visible="url_value_dialog_visible" :data-list-key="form.data_list_key" :config="default_type_data.appoint_config" :multiple="url_value_multiple_bool" @confirm_event="url_value_dialog_call_back"></custom-dialog>
+        <custom-dialog v-model:dialog-visible="url_value_dialog_visible" :data-list-key="form.show_data?.data_key || 'id'" :config="default_type_data.appoint_config" :multiple="url_value_multiple_bool" @confirm_event="url_value_dialog_call_back"></custom-dialog>
     </div>
 </template>
 <script setup lang="ts">
@@ -115,7 +115,7 @@ const dialog = ref<expose | null>(null);
 const draglist = ref<diy_data | null>(null);
 const form = ref(props.value);
 const center_width = ref(props.magicWidth);
-
+// 可拖拽区域的宽度
 const custom_width = computed(() => {
     // 如果是横向展示，那么就需要根据每屏显示的数量来计算宽度 data_source_direction == horizontal 为横向滑动
     if (form.value.is_custom_data == '1' && form.value.data_source_direction == 'horizontal') {
@@ -124,6 +124,44 @@ const custom_width = computed(() => {
         return center_width.value;
     }
 })
+//#region 自定义编辑的内部处理逻辑
+const diy_data = ref<diy>({
+    key: '',
+    location: {
+        x: 0,
+        y: 0,
+        record_x: 0,
+        record_y: 0,
+        staging_y: 0,
+    },
+    com_data: {},
+});
+const key = ref('');
+const dragkey = ref('');
+
+const right_update = (item: any) => {
+    diy_data.value = item;
+    // 生成随机id
+    key.value = Math.random().toString(36).substring(2);
+};
+// 自定义编辑的逻辑
+const custom_edit = () => {
+    if (!dialog.value) return;
+    dialog.value.dialogVisible = true;
+    dragkey.value = Math.random().toString(36).substring(2);
+    custom_list = cloneDeep(form.value.custom_list);
+    center_height.value = cloneDeep(form.value.height);
+};
+// 点击完成的处理逻辑
+const accomplish = () => {
+    if (!draglist.value) {
+        return;
+    } else {
+        form.value.custom_list = draglist.value.diy_data;
+    }
+    form.value.height = center_height.value;
+};
+//#endregion
 // 弹出框里的内容
 let custom_list = reactive([]);
 const center_height = ref(0);
@@ -178,13 +216,14 @@ const data_processing = () => {
         // 是自定义数据类型
         form.value.is_custom_data = '1';
         const custom_config = type_data[0].custom_config;
-        // 将数据赋值给默认数据
+        // 将数据赋值给默认数据，不存在时需要显示全部
         default_type_data.value = {
             ...custom_config,
             show_type: custom_config?.show_type || ['vertical', 'vertical-scroll', 'horizontal'],
             show_number: custom_config?.show_number || [1, 2, 3, 4],
             data_type: custom_config?.data_type || [0, 1],
         };
+        filter_data_handling('old');
         default_data();
     }
 };
@@ -222,8 +261,43 @@ const default_data = () => {
         form.value.data_source_content.data_type = 0;
     }
     // 如果不存在的时候，默认取id
-    form.value.data_list_key = default_type_data.value?.appoint_config?.show_data?.data_key || 'id';
+    form.value.show_data = default_type_data.value?.appoint_config?.show_data || { data_key: 'id', data_name: 'name' };
 }
+// data_source_content 中的数据处理，历史数据有可能不存在当前的某些字段，所以每次都会进行判断，需要处理一下数据 type old 代表历史数据， new 新数据
+const filter_data_handling = (type: string = 'old') => {
+    // 处理之后的读取方式
+    const data_type = default_type_data.value.data_type.length > 0 ? default_type_data.value.data_type[0] : 0;
+    // 处理数据
+    const staging_data : any = {
+        // 存放手动输入的id
+        data_ids: type == 'old' ? form.value.data_source_content?.data_ids ?? [] : [],
+        // 手动输入
+        data_list: type == 'old' ? form.value.data_source_content?.data_list ?? [] : [],
+        // 自动
+        data_auto_list: type == 'old' ? form.value.data_source_content?.data_auto_list ?? [] : [],
+        // 类型 历史的如果不存在，就使用第一个，否则的话，使用第一个
+        data_type: type == 'old'? (form.value.data_source_content?.data_type ?? data_type) : data_type,
+    };
+    // 根据不同的类型，初始化不同的数据, 并将对象处理成对应的值
+    default_type_data.value?.filter_config?.filter_form_config.forEach((item: any) => {
+        let value : number | string | Array<any> = '';
+        if (item.type == 'checkbox' || (item.type == 'select' && +item?.config?.is_multiple == 1)) { // 多选
+            value = item?.config?.default ?? [];
+        } else if ((item.type == 'input' && item?.config?.type == 'number') || item.type == 'switch') { // 数字/开关
+            value = Number(item?.config?.default ?? 0);
+        } else {
+            value = item?.config?.default ?? '';
+        }
+        // 历史数据的话，需要判断一下，如果历史数据没有，那么就使用默认数据
+        if (type == 'old') {
+            staging_data[item.form_name] = form.value.data_source_content[item.form_name] == undefined ? value : form.value.data_source_content[item.form_name];
+        } else {
+            staging_data[item.form_name] = value;
+        }
+    })
+    // 循环完之后赋值，避免多次赋值，传递给子组件出现多次调用和回调问题
+    form.value.data_source_content = staging_data;
+};
 // 处理显示的图片和传递到下去的数据结构
 const model_data_source = ref<data_list[]>([]);
 const processing_data = (key: string) => {
@@ -235,44 +309,6 @@ const processing_data = (key: string) => {
     }
 };
 //#endregion
-//#region 自定义编辑的内部处理逻辑
-const diy_data = ref<diy>({
-    key: '',
-    location: {
-        x: 0,
-        y: 0,
-        record_x: 0,
-        record_y: 0,
-        staging_y: 0,
-    },
-    com_data: {},
-});
-const key = ref('');
-const dragkey = ref('');
-
-const right_update = (item: any) => {
-    diy_data.value = item;
-    // 生成随机id
-    key.value = Math.random().toString(36).substring(2);
-};
-// 自定义编辑的逻辑
-const custom_edit = () => {
-    if (!dialog.value) return;
-    dialog.value.dialogVisible = true;
-    dragkey.value = Math.random().toString(36).substring(2);
-    custom_list = cloneDeep(form.value.custom_list);
-    center_height.value = cloneDeep(form.value.height);
-};
-// 点击完成的处理逻辑
-const accomplish = () => {
-    if (!draglist.value) {
-        return;
-    } else {
-        form.value.custom_list = draglist.value.diy_data;
-    }
-    form.value.height = center_height.value;
-};
-//#endregion
 //#region 数据源更新逻辑处理
 // 打开弹出框
 const url_value_dialog_visible = ref(false);
@@ -310,31 +346,8 @@ const changeDataSource = (key: string) => {
         };
         // 默认数据处理
         default_data();
-        // 处理数据
-        const staging_data : any = {
-            // 存放手动输入的id
-            data_ids: [],
-            // 手动输入
-            data_list: [],
-            // 自动
-            data_auto_list: [],
-            // 类型
-            data_type: default_type_data.value.data_type.length > 0 ? default_type_data.value.data_type[0] : 0,
-        };
-        // 根据不同的类型，初始化不同的数据, 并将对象处理成对应的值
-        default_type_data.value?.filter_config?.filter_form_config.forEach((item: any) => {
-            let value : number | string | Array<any> = '';
-            if (item.type == 'checkbox' || (item.type == 'select' && +item?.config?.is_multiple == 1)) { // 多选
-                value = item?.config?.default ?? [];
-            } else if ((item.type == 'input' && item?.config?.type == 'number') || item.type == 'switch') { // 数字/开关
-                value = Number(item?.config?.default ?? 0);
-            } else {
-                value = item?.config?.default ?? '';
-            }
-            staging_data[item.form_name] = value;
-        })
-        // 循环完之后赋值，避免多次赋值，传递给子组件出现多次调用和回调问题
-        form.value.data_source_content = staging_data;
+        // 筛选数据处理
+        filter_data_handling('new');
     }
 };
 const filter_form_change = (val: any) => {
diff --git a/src/components/model-data-magic/components/custom/index.vue b/src/components/model-data-magic/components/custom/index.vue
index dda57b7d..41d3f028 100644
--- a/src/components/model-data-magic/components/custom/index.vue
+++ b/src/components/model-data-magic/components/custom/index.vue
@@ -2,7 +2,7 @@
     <template v-if="data_source_content_list.length > 0 && form.data_source_direction == 'vertical'">
         <div v-for="(item1, index1) in data_source_content_list" :key="index1" class="oh" :style="style_container">
             <div class="w h oh" :style="style_img_container">
-                <data-rendering :custom-list="form.custom_list" :source-list="item1" :source-type="form?.data_source || ''" :data-height="form.height" :scale="scale"></data-rendering>
+                <data-rendering :custom-list="form.custom_list" :source-list="item1" :is-custom="form.is_custom_data == '1'" :show-data="form?.show_data || { data_key: 'id', data_name: 'name' }" :data-height="form.height" :scale="scale"></data-rendering>
             </div>
         </div>
     </template>
@@ -11,7 +11,7 @@
             <swiper-slide v-for="(item1, index1) in data_source_content_list" :key="index1">
                 <div :style="style_container">
                     <div class="w h" :style="style_img_container">
-                        <data-rendering :custom-list="form.custom_list" :source-list="item1" :source-type="form?.data_source || ''" :data-height="form.height" :scale="scale"></data-rendering>
+                        <data-rendering :custom-list="form.custom_list" :source-list="item1" :is-custom="form.is_custom_data == '1'" :show-data="form?.show_data || { data_key: 'id', data_name: 'name' }" :data-height="form.height" :scale="scale"></data-rendering>
                     </div>
                 </div>
             </swiper-slide>
diff --git a/src/components/model-data-magic/model-data-magic-content.vue b/src/components/model-data-magic/model-data-magic-content.vue
index c41d1ee4..5faf8c71 100644
--- a/src/components/model-data-magic/model-data-magic-content.vue
+++ b/src/components/model-data-magic/model-data-magic-content.vue
@@ -232,7 +232,10 @@ const data_content = {
     // 容器基础的宽度
     width: 0,
     // 手动模式下的唯一标识
-    data_list_key: '',
+    show_data: {
+        data_key: 'id',
+        data_name: 'name'
+    },
     // 是否是自定义数据类型
     is_custom_data: '0',
     // 数据源类型 商品(goods) 文章(article) 品牌(brand) 用户信息(user-info)
diff --git a/src/config/const/custom.ts b/src/config/const/custom.ts
index 8b263a92..baa7513f 100644
--- a/src/config/const/custom.ts
+++ b/src/config/const/custom.ts
@@ -78,7 +78,7 @@ interface defaultSearch {
     content: {
         height: number;
         is_custom_data: string;
-        data_list_key: string;
+        show_data: object;
         data_source: string;
         data_source_content: content;
         data_source_direction: string;
@@ -117,7 +117,10 @@ const defaultSearch: defaultSearch = {
             data_auto_list: [],
         },
         // 手动模式下的唯一标识
-        data_list_key: '',
+        show_data: {
+            data_key: 'id',
+            data_name: 'name'
+        },
         // 是否是自定义数据类型
         is_custom_data: '0',
         // 数据源类型 商品(goods) 文章(article) 品牌(brand) 用户信息(user-info)
diff --git a/src/views/layout/index.vue b/src/views/layout/index.vue
index 0575fbb7..2909f947 100644
--- a/src/views/layout/index.vue
+++ b/src/views/layout/index.vue
@@ -337,13 +337,13 @@ const save_formmat_form_data = (data: diy_data_item, close: boolean = false, is_
                     if (item1.data_content.is_custom_data == '1' && item1.data_content.data_source_content.data_type === 0) {
                         const data_list = cloneDeep(item1.data_content.data_source_content.data_list);
                         // 数据改造,存放手动的id
-                        item1.data_content.data_source_content.data_ids = data_list.map((item4: any) => item4.data[item1.data_content?.data_list_key || 'id']).join(',') || '';
+                        item1.data_content.data_source_content.data_ids = data_list.map((item4: any) => item4.data[item1.data_content?.show_data.data_key || 'id']).join(',') || '';
                         // 数据改造,存放手动的清除里边的data
                         item1.data_content.data_source_content.data_list = data_list.map((item5: any) => {
                             return {
                                 ...item5,
                                 data: [],
-                                data_id: item5.data[item1.data_content?.data_list_key || 'id'],
+                                data_id: item5.data[item1.data_content?.show_data.data_key || 'id'],
                             };
                         });
                     } else {
@@ -379,13 +379,13 @@ const save_formmat_form_data = (data: diy_data_item, close: boolean = false, is_
                 // 手动的数据内容
                 const data_list = cloneDeep(item.com_data.content.data_source_content.data_list);
                 // 数据改造,存放手动的id
-                item.com_data.content.data_source_content.data_ids = data_list.map((list_item: any) => list_item.data[item.com_data.content?.data_list_key || 'id'] || '').join(',') || '';
+                item.com_data.content.data_source_content.data_ids = data_list.map((list_item: any) => list_item.data[item.com_data.content?.show_data.data_key || 'id'] || '').join(',') || '';
                 // 数据改造,存放手动的清除里边的data
                 item.com_data.content.data_source_content.data_list = data_list.map((list_item: any) => {
                     return {
                         ...list_item,
                         data: [],
-                        data_id: list_item.data[item.data_content?.data_list_key || 'id'],
+                        data_id: list_item.data[item.data_content?.show_data.data_key || 'id'],
                     };
                 });
             } else {