From c7d80c6822e97950cff8b3f73ca35d051cb15079 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, 6 Jan 2025 10:32:04 +0800
Subject: [PATCH] =?UTF-8?q?=E8=87=AA=E5=AE=9A=E4=B9=89=E9=80=BB=E8=BE=91?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../custom-module/data-rendering/index.vue    | 18 ++++--
 .../custom-tabs-content.vue                   |  1 -
 .../model-custom-group/index.vue              | 25 +++-----
 .../common/custom-module/model-icon/index.vue | 18 +-----
 .../custom-module/model-image/index.vue       | 18 +-----
 .../custom-module/model-lines/index.vue       | 18 +-----
 .../custom-module/model-panel/index.vue       | 18 +-----
 .../common/custom-module/model-text/index.vue | 26 ++++----
 .../model-custom/model-custom-content.vue     |  3 +-
 src/utils/index.ts                            | 63 ++++++++++++++++++-
 10 files changed, 107 insertions(+), 101 deletions(-)

diff --git a/src/components/common/custom-module/data-rendering/index.vue b/src/components/common/custom-module/data-rendering/index.vue
index 30f05f62..3c75041f 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 flex-row" :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"  :is-custom="isCustom" :title-params="showData?.data_name || 'name'" :is-display-panel="true"></model-text>
+                <model-text :key="item.id" :value="item.com_data" :scale="scale" :source-list="sourceList"  :is-custom="isCustom" :custom-group-field-id="customGroupFieldId" :is-custom-group="isCustomGroup" :title-params="showData?.data_name || 'name'" :is-display-panel="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" :is-custom="isCustom" :img-params="showData?.data_logo || ''" :is-display-panel="true"></model-image>
+                <model-image :key="item.id" :value="item.com_data" :scale="scale" :source-list="sourceList" :is-custom="isCustom" :custom-group-field-id="customGroupFieldId" :img-params="showData?.data_logo || ''" :is-display-panel="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" :is-custom="isCustom"  :is-display-panel="true"></model-lines>
+                <model-lines :key="item.id" :value="item.com_data" :scale="scale" :source-list="sourceList" :is-custom="isCustom"  :custom-group-field-id="customGroupFieldId" :is-display-panel="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" :is-custom="isCustom"  :is-display-panel="true"></model-icon>
+                <model-icon :key="item.id" :value="item.com_data" :scale="scale" :source-list="sourceList" :is-custom="isCustom"  :custom-group-field-id="customGroupFieldId" :is-display-panel="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" :is-custom="isCustom" :is-display-panel="true"></model-panel>
+                <model-panel :key="item.id" :value="item.com_data" :scale="scale" :source-list="sourceList" :is-custom="isCustom" :custom-group-field-id="customGroupFieldId" :is-display-panel="true"></model-panel>
             </template>
             <template v-else-if="item.key == 'custom-group'">
                 <model-custom-group :key="item.id" :value="item.com_data" :scale="scale" :source-list="sourceList" :data-height="item.com_data.custom_height" :data-width="item.com_data.com_width" :is-custom="isCustom" :is-display-panel="true"></model-custom-group>
@@ -62,6 +62,14 @@ const props = defineProps({
         type: Boolean,
         default: false
     },
+    isCustomGroup: {
+        type: Boolean,
+        default: false
+    },
+    customGroupFieldId: {
+        type: String,
+        default: ''
+    },
     showData: {
         type: Object as PropType<{
             data_key: string;
diff --git a/src/components/common/custom-module/model-custom-group/custom-tabs-config/custom-tabs-content.vue b/src/components/common/custom-module/model-custom-group/custom-tabs-config/custom-tabs-content.vue
index b9457d8a..ee8a2b0d 100644
--- a/src/components/common/custom-module/model-custom-group/custom-tabs-config/custom-tabs-content.vue
+++ b/src/components/common/custom-module/model-custom-group/custom-tabs-config/custom-tabs-content.vue
@@ -1,6 +1,5 @@
 <template>
     <card-container>
-        <div class="mb-20">显示设置</div>
         <el-form-item label="数据来源">
             <el-select v-model="form.data_source_field.id" value-key="id" clearable filterable placeholder="请选择数据字段" size="default" class="flex-1" @change="group_change">
                 <el-option v-for="item in options.filter(item => item.type == 'custom-data-list')" :key="item.field" :label="item.name" :value="item.field" />
diff --git a/src/components/common/custom-module/model-custom-group/index.vue b/src/components/common/custom-module/model-custom-group/index.vue
index 4adbbd6a..5fb41a45 100644
--- a/src/components/common/custom-module/model-custom-group/index.vue
+++ b/src/components/common/custom-module/model-custom-group/index.vue
@@ -8,7 +8,7 @@
                             <div v-for="(item1, index1) in data_source_content_list" :key="index1" :style="`width: ${ gap_width }`">
                                 <div :style="style_chunk_container">
                                     <div class="w h oh" :style="style_chunk_img_container">
-                                        <data-rendering :custom-list="form.custom_list" :source-list="item1" :data-height="dataHeight" :scale="custom_scale"></data-rendering>
+                                        <data-rendering :custom-list="form.custom_list" :source-list="item1" :data-height="dataHeight" :scale="custom_scale" :custom-group-field-id="form?.data_source_field?.id || ''" :is-custom-group="true"></data-rendering>
                                     </div>
                                 </div>
                             </div>
@@ -19,7 +19,7 @@
                             <swiper-slide v-for="(item1, index1) in data_source_content_list" :key="index1">
                                 <div :style="style_chunk_container">
                                     <div class="w h oh" :style="style_chunk_img_container">
-                                        <data-rendering :custom-list="form.custom_list" :source-list="item1" :data-height="dataHeight" :scale="custom_scale"></data-rendering>
+                                        <data-rendering :custom-list="form.custom_list" :source-list="item1" :data-height="dataHeight" :scale="custom_scale" :custom-group-field-id="form?.data_source_field?.id || ''" :is-custom-group="true"></data-rendering>
                                     </div>
                                 </div>
                             </swiper-slide>
@@ -38,7 +38,7 @@
                     <template v-else>
                         <div :style="style_chunk_container">
                             <div class="w h oh" :style="style_chunk_img_container">
-                                <data-rendering :custom-list="form.custom_list" :data-height="form.height" :scale="custom_scale"></data-rendering>
+                                <data-rendering :custom-list="form.custom_list" :data-height="form.height" :scale="custom_scale" :is-custom-group="true"></data-rendering>
                             </div>
                         </div>
                     </template>
@@ -48,7 +48,7 @@
     </div>
 </template>
 <script setup lang="ts">
-import { border_width, common_img_computer, common_styles_computer, get_math, radius_computer, custom_condition_data, custom_condition_judg } from '@/utils';
+import { border_width, common_img_computer, common_styles_computer, get_math, radius_computer, get_is_eligible } from '@/utils';
 import { isEmpty } from 'lodash';
 import { Swiper, SwiperSlide } from 'swiper/vue';
 import { Autoplay } from 'swiper/modules';
@@ -96,20 +96,8 @@ const new_style = computed(() => props.value.data_style);
 const field_list: any[] | undefined = inject('field_list', []);
 const is_show = computed(() => {
     // 取出条件判断的内容
-    const condition = form.value?.condition || { field: '', type: '', value: ''};
-    // 获取对应条件字段的字段数据
-    let option: any[] = [];
-    if (field_list) {
-        option = field_list.filter((item: any) => item.field === condition.field);
-    }
-    // 获取到字段的真实数据
-    const field_value = custom_condition_data(condition?.field || '', option[0] || {}, props.sourceList, props.isCustom);
-    // 判断条件字段是否为空并且是显示面板才会生效，则直接返回true
-    if (!isEmpty(condition.field) && !isEmpty(condition.type) && props.isDisplayPanel) {
-        return custom_condition_judg(field_value, condition.type, condition.value);
-    } else {
-        return true;
-    }
+    const condition = form.value?.condition || { field: '', type: '', value: '' };
+    return get_is_eligible(field_list, condition, props);
 });
 
 const data_source_content_list = computed(() => {
@@ -240,6 +228,7 @@ const indicator_style = computed(() => {
     }
     return indicator_styles;
 });
+// 指示器选中效果
 const actived_index = ref(0);
 const slideChange = (swiper: { realIndex: number }) => {
     // 轮播图滚动时，更新当前激活的下标， 如果不是平移的时候，需要除以列数，否则就是当前的下标
diff --git a/src/components/common/custom-module/model-icon/index.vue b/src/components/common/custom-module/model-icon/index.vue
index bb2fe793..43fcb803 100644
--- a/src/components/common/custom-module/model-icon/index.vue
+++ b/src/components/common/custom-module/model-icon/index.vue
@@ -9,7 +9,7 @@
     </div>
 </template>
 <script setup lang="ts">
-import { radius_computer, padding_computer, gradient_handle, get_nested_property, custom_condition_judg, custom_condition_data } from '@/utils';
+import { radius_computer, padding_computer, gradient_handle, get_nested_property, get_is_eligible } from '@/utils';
 import { isEmpty } from 'lodash';
 const props = defineProps({
     value: {
@@ -44,20 +44,8 @@ const form = computed(() => props.value);
 const field_list: any[] | undefined = inject('field_list', []);
 const is_show = computed(() => {
     // 取出条件判断的内容
-    const condition = form.value?.condition || { field: '', type: '', value: ''};
-    // 获取对应条件字段的字段数据
-    let option: any[] = [];
-    if (field_list) {
-        option = field_list.filter((item: any) => item.field === condition.field);
-    }
-    // 获取到字段的真实数据
-    const field_value = custom_condition_data(condition?.field || '', option[0] || {}, props.sourceList, props.isCustom);
-    // 判断条件字段是否为空并且是显示面板才会生效，则直接返回true
-    if (!isEmpty(condition.field) && !isEmpty(condition.type) && props.isDisplayPanel) {
-        return custom_condition_judg(field_value, condition.type, condition.value);
-    } else {
-        return true;
-    }
+    const condition = form.value?.condition || { field: '', type: '', value: '' };
+    return get_is_eligible(field_list, condition, props);
 });
 // 图标样式
 const icon_class = computed(() => {
diff --git a/src/components/common/custom-module/model-image/index.vue b/src/components/common/custom-module/model-image/index.vue
index 8ca78694..207fb390 100644
--- a/src/components/common/custom-module/model-image/index.vue
+++ b/src/components/common/custom-module/model-image/index.vue
@@ -4,7 +4,7 @@
     </div>
 </template>
 <script setup lang="ts">
-import { percentage_count, radius_computer, get_nested_property, custom_condition_judg, custom_condition_data } from '@/utils';
+import { percentage_count, radius_computer, get_nested_property, get_is_eligible } from '@/utils';
 import { isEmpty } from 'lodash';
 const props = defineProps({
     value: {
@@ -43,20 +43,8 @@ const form = computed(() => props.value);
 const field_list: any[] | undefined = inject('field_list', []);
 const is_show = computed(() => {
     // 取出条件判断的内容
-    const condition = form.value?.condition || { field: '', type: '', value: ''};
-    // 获取对应条件字段的字段数据
-    let option: any[] = [];
-    if (field_list) {
-        option = field_list.filter((item: any) => item.field === condition.field);
-    }
-    // 获取到字段的真实数据
-    const field_value = custom_condition_data(condition?.field || '', option[0] || {}, props.sourceList, props.isCustom);
-    // 判断条件字段是否为空并且是显示面板才会生效，则直接返回true
-    if (!isEmpty(condition.field) && !isEmpty(condition.type) && props.isDisplayPanel) {
-        return custom_condition_judg(field_value, condition.type, condition.value);
-    } else {
-        return true;
-    }
+    const condition = form.value?.condition || { field: '', type: '', value: '' };
+    return get_is_eligible(field_list, condition, props);
 });
 // 图片地址
 const img = computed(() => {
diff --git a/src/components/common/custom-module/model-lines/index.vue b/src/components/common/custom-module/model-lines/index.vue
index fea5c4c3..d80d2ac4 100644
--- a/src/components/common/custom-module/model-lines/index.vue
+++ b/src/components/common/custom-module/model-lines/index.vue
@@ -2,7 +2,7 @@
     <div v-if="is_show" :style="border_style"></div>
 </template>
 <script setup lang="ts">
-import { custom_condition_judg, custom_condition_data } from '@/utils';
+import { get_is_eligible } from '@/utils';
 import { isEmpty } from 'lodash';
 const props = defineProps({
     value: {
@@ -37,20 +37,8 @@ const form = computed(() => props.value);
 const field_list: any[] | undefined = inject('field_list', []);
 const is_show = computed(() => {
     // 取出条件判断的内容
-    const condition = form.value?.condition || { field: '', type: '', value: ''};
-    // 获取对应条件字段的字段数据
-    let option: any[] = [];
-    if (field_list) {
-        option = field_list.filter((item: any) => item.field === condition.field);
-    }
-    // 获取到字段的真实数据
-    const field_value = custom_condition_data(condition?.field || '', option[0] || {}, props.sourceList, props.isCustom);
-    // 判断条件字段是否为空并且是显示面板才会生效，则直接返回true
-    if (!isEmpty(condition.field) && !isEmpty(condition.type) && props.isDisplayPanel) {
-        return custom_condition_judg(field_value, condition.type, condition.value);
-    } else {
-        return true;
-    }
+    const condition = form.value?.condition || { field: '', type: '', value: '' };
+    return get_is_eligible(field_list, condition, props);
 });
 // 边框样式
 const border_style = computed(() => {
diff --git a/src/components/common/custom-module/model-panel/index.vue b/src/components/common/custom-module/model-panel/index.vue
index 36b1afc3..1ced10c1 100644
--- a/src/components/common/custom-module/model-panel/index.vue
+++ b/src/components/common/custom-module/model-panel/index.vue
@@ -4,7 +4,7 @@
     </div>
 </template>
 <script setup lang="ts">
-import { radius_computer, gradient_handle, background_computer, custom_condition_judg, custom_condition_data } from '@/utils';
+import { radius_computer, gradient_handle, background_computer, get_is_eligible } from '@/utils';
 import { isEmpty } from 'lodash';
 const props = defineProps({
     value: {
@@ -39,20 +39,8 @@ const form = computed(() => props.value);
 const field_list: any[] | undefined = inject('field_list', []);
 const is_show = computed(() => {
     // 取出条件判断的内容
-    const condition = form.value?.condition || { field: '', type: '', value: ''};
-    // 获取对应条件字段的字段数据
-    let option: any[] = [];
-    if (field_list) {
-        option = field_list.filter((item: any) => item.field === condition.field);
-    }
-    // 获取到字段的真实数据
-    const field_value = custom_condition_data(condition?.field || '', option[0] || {}, props.sourceList, props.isCustom);
-    // 判断条件字段是否为空并且是显示面板才会生效，则直接返回true
-    if (!isEmpty(condition.field) && !isEmpty(condition.type) && props.isDisplayPanel) {
-        return custom_condition_judg(field_value, condition.type, condition.value);
-    } else {
-        return true;
-    }
+    const condition = form.value?.condition || { field: '', type: '', value: '' };
+    return get_is_eligible(field_list, condition, props);
 });
 // 外层样式
 const com_style = computed(() => {
diff --git a/src/components/common/custom-module/model-text/index.vue b/src/components/common/custom-module/model-text/index.vue
index d7b11c9a..868e24ea 100644
--- a/src/components/common/custom-module/model-text/index.vue
+++ b/src/components/common/custom-module/model-text/index.vue
@@ -11,7 +11,7 @@
     </div>
 </template>
 <script setup lang="ts">
-import { radius_computer, padding_computer, gradient_handle, get_nested_property, custom_condition_judg, custom_condition_data } from '@/utils';
+import { radius_computer, padding_computer, gradient_handle, get_nested_property, custom_condition_data, get_is_eligible } from '@/utils';
 import { cloneDeep, isEmpty } from 'lodash';
 const props = defineProps({
     value: {
@@ -39,6 +39,14 @@ const props = defineProps({
         type: Boolean,
         default: false
     },
+    isCustomGroup: {
+        type: Boolean,
+        default: false
+    },
+    customGroupFieldId: {
+        type: String,
+        default: ''
+    },
     titleParams: {
         type: String,
         default: ''
@@ -55,20 +63,8 @@ const form = computed(() => props.value);
 const field_list: any[] | undefined = inject('field_list', []);
 const is_show = computed(() => {
     // 取出条件判断的内容
-    const condition = form.value?.condition || { field: '', type: '', value: ''};
-    // 获取对应条件字段的字段数据
-    let option: any[] = [];
-    if (field_list) {
-        option = field_list.filter((item: any) => item.field === condition.field);
-    }
-    // 获取到字段的真实数据
-    const field_value = custom_condition_data(condition?.field || '', option[0] || {}, props.sourceList, props.isCustom);
-    // 判断条件字段是否为空并且是显示面板才会生效，则直接返回true
-    if (!isEmpty(condition.field) && !isEmpty(condition.type) && props.isDisplayPanel) {
-        return custom_condition_judg(field_value, condition.type, condition.value);
-    } else {
-        return true;
-    }
+    const condition = form.value?.condition || { field: '', type: '', value: '' };
+    return get_is_eligible(field_list, condition, props);
 });
 
 const text_title = computed(() => {
diff --git a/src/components/model-custom/model-custom-content.vue b/src/components/model-custom/model-custom-content.vue
index 1c2b09ef..f4276c61 100644
--- a/src/components/model-custom/model-custom-content.vue
+++ b/src/components/model-custom/model-custom-content.vue
@@ -137,6 +137,7 @@ const custom_edit = (type: string, id?: string, father_list?: any, list?: any, w
         // 设置是否是子页面
         data_source_store.set_is_children_custom(false);
     } else {
+        // 自定义组的弹出框显示
         drag_group_key.value = Math.random().toString(36).substring(2);
         // 自定义组的弹出框
         dialogVisible_group.value = true;
@@ -156,7 +157,7 @@ const custom_edit = (type: string, id?: string, father_list?: any, list?: any, w
         data_source_store.set_is_children_custom(true);
     }
 };
-// 处理获取真实数据
+// 处理获取自定义组内的真实数据
 const new_group_source_list_handle = (data_source_id: string) => {
     const source_list = !isEmpty(data_source_content_list.value) ? data_source_content_list.value[0] : {};
     if (!isEmpty(source_list)) {
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 4854e352..68c3f7a6 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -218,24 +218,85 @@ const compare_numbers = (a: number, b: number, type: string): boolean => {
     }
 }
 
+/**
+ * 判断给定条件是否符合资格，主要用于自定义内部各个组件是否符合显示条件
+ * @param field_list 字段列表，包含各个字段的数据
+ * @param condition 条件数据，包括字段、类型和值
+ * @param props 额外属性，包含自定义组和数据源等信息
+ * @returns 返回一个布尔值，表示是否符合条件
+ */
+type condition_data = { field: string, type: string, value: string  };
+export const get_is_eligible = (field_list: any[], condition: condition_data, props: any) => {
+    try {
+        // 获取对应条件字段的字段数据
+        let option: any = {};
+        if (field_list) {
+            // 判断是否是自定义组并且 自定义组选则了对应的数据源
+            if (props.isCustomGroup && !isEmpty(props.customGroupFieldId)) {
+                // 取出对应自定义组的内容
+                const group_option_list = field_list.find((item: any) => item.field === props.customGroupFieldId);
+                // 取出自定义组内部数据源参数的详细数据
+                const new_field_list = group_option_list?.data || [];
+                // 通过对应条件，筛选出对应的数据
+                option = new_field_list.find((item: any) => item.field === condition.field);
+            } else {
+                option = field_list.find((item: any) => item.field === condition.field);
+            }
+        }
+        // 获取到字段的真实数据, option的使用主要是为了获取的他的中间参数和前缀，后缀等拼接在一起
+        const field_value = custom_condition_data(condition.field || '', option || {}, props.sourceList, props.isCustom);
+        // 判断条件字段是否为空并且是显示面板才会生效，则直接返回true
+        if (!isEmpty(condition.field) && !isEmpty(condition.type) && props.isDisplayPanel) {
+            return custom_condition_judg(field_value, condition.type, condition.value);
+        } else {
+            return true;
+        }
+    } catch (error) {
+        return true; // 或者根据业务需求返回适当的默认值
+    }
+}
+
+/**
+ * 根据数据源ID和配置选项来处理和返回特定格式的数据
+ * 
+ * @param data_source_id 数据源ID字符串，可以包含多个用分号分隔的ID
+ * @param option 配置选项，包含数据处理的额外参数
+ * @param sourceList 数据源列表，用于查找和处理数据
+ * @param isCustom 是否为自定义模式，用于确定数据处理的方式
+ * @returns 返回处理后的数据字符串
+ */
 export const custom_condition_data = (data_source_id: string, option: any, sourceList: any, isCustom: boolean) => {
     let data_value = '';
     if (data_source_id.includes(';')) {
+        // 当数据源ID包含多个用分号分隔的ID时
         // 取出所有的字段，使用;分割
         const ids = data_source_id.split(';');
         let text = '';
+        // 遍历每个ID，处理数据并合并
         ids.forEach((item: string, index: number) => {
             text += data_handling(item, sourceList, isCustom) + (index != ids.length - 1 ? (option?.join || '') : '');
         });
         data_value = text;
     } else {
         // 不输入商品， 文章和品牌时，从外层处理数据
+        // 当数据源ID不包含分号时，直接处理数据
         data_value = data_handling(data_source_id, sourceList, isCustom);
     }
+    // 根据配置选项，添加前缀和后缀到处理后的数据
     return (option?.first || '') + data_value + (option?.last || '');
 }
 
-// 数据处理
+/**
+ * 数据处理函数
+ * 该函数根据数据源ID和一个数据对象，返回对应的图标路径
+ * 主要用于从复杂的数据结构中提取图标信息，根据是否是自定义图标，
+ * 从不同的数据层级中获取信息
+ * 
+ * @param data_source_id 数据源ID，用于定位图标在数据结构中的位置
+ * @param sourceList 包含图标数据的对象，可以是多层嵌套结构
+ * @param isCustom 布尔值，指示是否为自定义图标，影响数据获取的方式
+ * @returns 返回找到的图标路径，如果没有找到或数据为空，则返回空值
+ */
 const data_handling = (data_source_id: string, sourceList: any, isCustom: boolean) => {
     // 不输入商品， 文章和品牌时，从外层处理数据
     let icon = get_nested_property(sourceList, data_source_id);