From aa7918127b16d9e6d1f51aff48b437700ac9a908 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8E=E8=82=96=E7=A3=8A?= <18851179580@163.com>
Date: Fri, 3 Jan 2025 10:43:06 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E6=9D=A1=E4=BB=B6=E5=88=A4?=
 =?UTF-8?q?=E6=96=AD=E5=86=85=E5=AE=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../custom-module/data-rendering/index.vue    |   2 +-
 .../model-custom-group/index.vue              |  29 ++++-
 .../model-custom-group-style.vue              |   2 +
 .../common/custom-module/model-icon/index.vue |  23 +++-
 .../model-icon/model-icon-style.vue           |   2 +
 .../custom-module/model-image/index.vue       |  25 +++-
 .../model-image/model-image-style.vue         |   2 +
 .../custom-module/model-lines/index.vue       |  33 +++++-
 .../model-lines/model-lines-style.vue         |   8 +-
 .../custom-module/model-panel/index.vue       |  28 ++++-
 .../model-panel/model-panel-style.vue         |   2 +
 .../common/custom-module/model-text/index.vue |  25 +++-
 .../model-text/model-text-style.vue           |   2 +
 .../components/custom-config/index.vue        |   2 +-
 .../model-custom/components/index-default.ts  |  41 ++++++-
 .../model-custom/components/index.vue         |   1 +
 src/components/model-custom/index.vue         |   3 +
 .../model-custom/model-custom-content.vue     |   2 +
 src/config/const/custom.ts                    |   5 +-
 src/utils/index.ts                            | 108 +++++++++++++++++-
 20 files changed, 318 insertions(+), 27 deletions(-)

diff --git a/src/components/common/custom-module/data-rendering/index.vue b/src/components/common/custom-module/data-rendering/index.vue
index 0c2b9173..d2b0a1e2 100644
--- a/src/components/common/custom-module/data-rendering/index.vue
+++ b/src/components/common/custom-module/data-rendering/index.vue
@@ -2,7 +2,7 @@
     <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" :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>
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 def6151b..95231f84 100644
--- a/src/components/common/custom-module/model-custom-group/index.vue
+++ b/src/components/common/custom-module/model-custom-group/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="flex-1" :style="style_container">
+    <div v-if="is_show" class="flex-1" :style="style_container">
         <div :style="style_img_container">
             <div :style="style_content_container">
                 <div class="w h re" :style="style_content_img_container">
@@ -48,7 +48,7 @@
     </div>
 </template>
 <script setup lang="ts">
-import { common_img_computer, common_styles_computer, get_math, radius_computer } from '@/utils';
+import { border_width, common_img_computer, common_styles_computer, get_math, radius_computer, custom_condition_data, custom_condition_judg } from '@/utils';
 import { isEmpty } from 'lodash';
 import { Swiper, SwiperSlide } from 'swiper/vue';
 import { Autoplay } from 'swiper/modules';
@@ -92,6 +92,25 @@ const props = defineProps({
 // 用于页面判断显示
 const form = computed(() => props.value);
 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) && !props.isDisplayPanel) {
+        return custom_condition_judg(field_value, condition.type, condition.value);
+    } else {
+        return true;
+    }
+});
 // 公共样式
 const style_container = computed(() => common_styles_computer(new_style.value.common_style) + 'overflow: auto;');
 const style_img_container = computed(() => common_img_computer(new_style.value.common_style));
@@ -109,11 +128,11 @@ watchEffect(() => {
     const { common_style, data_style, data_content_style } = new_style.value;
     const old_width = props.dataWidth * props.scale;
     // 外层左右间距
-    const outer_spacing = common_style.margin_left + common_style.margin_right + common_style.padding_left + common_style.padding_right;
+    const outer_spacing = common_style.margin_left + common_style.margin_right + common_style.padding_left + common_style.padding_right + border_width(common_style);
     // 内容左右间距
-    const content_spacing = data_content_style.margin_left + data_content_style.margin_right + data_content_style.padding_left + data_content_style.padding_right;
+    const content_spacing = data_content_style.margin_left + data_content_style.margin_right + data_content_style.padding_left + data_content_style.padding_right + border_width(data_content_style);
     // 数据左右间距
-    const internal_spacing = data_style.margin_left + data_style.margin_right + data_style.padding_left + data_style.padding_right;
+    const internal_spacing = data_style.margin_left + data_style.margin_right + data_style.padding_left + data_style.padding_right + border_width(data_style);
     // 根据容器宽度来计算内部大小
     const new_width = old_width - outer_spacing - internal_spacing - content_spacing;
     // 获得对应宽度的比例
diff --git a/src/components/common/custom-module/model-custom-group/model-custom-group-style.vue b/src/components/common/custom-module/model-custom-group/model-custom-group-style.vue
index 555ab531..44149472 100644
--- a/src/components/common/custom-module/model-custom-group/model-custom-group-style.vue
+++ b/src/components/common/custom-module/model-custom-group/model-custom-group-style.vue
@@ -13,6 +13,8 @@
                 </el-form-item>
             </card-container>
             <div class="bg-f5 divider-line" />
+            <condition-config :value="form" :options="options"></condition-config>
+            <div class="bg-f5 divider-line" />
             <el-tabs v-model="tabs_name" class="content-tabs">
                 <el-tab-pane label="内容设置" name="content">
                     <custom-tabs-content :value="form" @custom_edit="custom_edit"></custom-tabs-content>
diff --git a/src/components/common/custom-module/model-icon/index.vue b/src/components/common/custom-module/model-icon/index.vue
index 6046831d..32847ddc 100644
--- a/src/components/common/custom-module/model-icon/index.vue
+++ b/src/components/common/custom-module/model-icon/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="img-outer re oh flex-row w h" :style="com_style">
+    <div v-if="is_show" class="img-outer re oh flex-row w h" :style="com_style">
         <template v-if="!isEmpty(icon_class)">
             <icon :name="icon_class" :color="form.icon_color" :size="form.icon_size + ''"></icon>
         </template>
@@ -9,7 +9,7 @@
     </div>
 </template>
 <script setup lang="ts">
-import { radius_computer, padding_computer, gradient_handle, get_nested_property } from '@/utils';
+import { radius_computer, padding_computer, gradient_handle, get_nested_property, custom_condition_judg, custom_condition_data } from '@/utils';
 import { isEmpty } from 'lodash';
 const props = defineProps({
     value: {
@@ -40,6 +40,25 @@ const props = defineProps({
 });
 // 用于页面判断显示
 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 icon_class = computed(() => {
     if (!isEmpty(form.value.icon_class)) {
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 b4bdcca6..a32f937e 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
@@ -67,6 +67,8 @@
                 </el-form-item>
             </card-container>
             <div class="bg-f5 divider-line" />
+            <condition-config :value="form" :options="options"></condition-config>
+            <div class="bg-f5 divider-line" />
             <card-container>
                 <div class="mb-12">边框设置</div>
                 <el-form-item label="边框显示">
diff --git a/src/components/common/custom-module/model-image/index.vue b/src/components/common/custom-module/model-image/index.vue
index 8f24a680..65fd7f6f 100644
--- a/src/components/common/custom-module/model-image/index.vue
+++ b/src/components/common/custom-module/model-image/index.vue
@@ -1,10 +1,10 @@
 <template>
-    <div class="img-outer re w h" :style="border_style">
+    <div v-if="is_show" class="img-outer re w h" :style="border_style">
         <image-empty v-model="img" :style="image_style"></image-empty>
     </div>
 </template>
 <script setup lang="ts">
-import { percentage_count, radius_computer, get_nested_property } from '@/utils';
+import { percentage_count, radius_computer, get_nested_property, custom_condition_judg, custom_condition_data } from '@/utils';
 import { isEmpty } from 'lodash';
 const props = defineProps({
     value: {
@@ -39,6 +39,27 @@ const props = defineProps({
 });
 // 用于页面判断显示
 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) {
+        console.log(condition, !props.isDisplayPanel);
+        console.log(custom_condition_judg(field_value, condition.type, condition.value));
+        return custom_condition_judg(field_value, condition.type, condition.value);
+    } else {
+        return true;
+    }
+});
 // 图片地址
 const img = computed(() => {
     if (!isEmpty(form.value.img[0])) {
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 9aad77c2..80f66a49 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
@@ -38,6 +38,8 @@
                 </el-form-item> -->
             </card-container>
             <div class="bg-f5 divider-line" />
+            <condition-config :value="form" :options="options"></condition-config>
+            <div class="bg-f5 divider-line" />
             <card-container class="h">
                 <div class="mb-12">边框设置</div>
                 <el-form-item label="边框显示">
diff --git a/src/components/common/custom-module/model-lines/index.vue b/src/components/common/custom-module/model-lines/index.vue
index be204a99..5b9b82a9 100644
--- a/src/components/common/custom-module/model-lines/index.vue
+++ b/src/components/common/custom-module/model-lines/index.vue
@@ -1,7 +1,9 @@
 <template>
-    <div :style="border_style"></div>
+    <div v-if="is_show" :style="border_style"></div>
 </template>
 <script setup lang="ts">
+import { custom_condition_judg, custom_condition_data } from '@/utils';
+import { isEmpty } from 'lodash';
 const props = defineProps({
     value: {
         type: Object,
@@ -14,6 +16,16 @@ const props = defineProps({
         type: Boolean,
         default: false,
     },
+    sourceList: {
+        type: Object,
+        default: () => {
+            return {};
+        }
+    },
+    isCustom: {
+        type: Boolean,
+        default: false
+    },
     scale: {
         type: Number,
         default: 1,
@@ -21,6 +33,25 @@ const props = defineProps({
 });
 // 用于页面判断显示
 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) && !props.isDisplayPanel) {
+        return custom_condition_judg(field_value, condition.type, condition.value);
+    } else {
+        return true;
+    }
+});
 // 边框样式
 const border_style = computed(() => {
     if (form.value.line_settings === 'horizontal') {
diff --git a/src/components/common/custom-module/model-lines/model-lines-style.vue b/src/components/common/custom-module/model-lines/model-lines-style.vue
index 581961ab..bc817d75 100644
--- a/src/components/common/custom-module/model-lines/model-lines-style.vue
+++ b/src/components/common/custom-module/model-lines/model-lines-style.vue
@@ -37,6 +37,8 @@
                     <el-switch v-model="form.bottom_up" active-value="1" inactive-value="0" />
                 </el-form-item> -->
             </card-container>
+            <div class="bg-f5 divider-line" />
+            <condition-config :value="form" :options="options"></condition-config>
         </el-form>
     </div>
 </template>
@@ -47,7 +49,11 @@ const props = defineProps({
     value: {
         type: Object,
         default: () => ({}),
-    }
+    },
+    options: {
+        type: Array<any>,
+        default: () => [],
+    },
 });
 // 默认值
 const state = reactive({
diff --git a/src/components/common/custom-module/model-panel/index.vue b/src/components/common/custom-module/model-panel/index.vue
index 8b9a9357..9997cd4b 100644
--- a/src/components/common/custom-module/model-panel/index.vue
+++ b/src/components/common/custom-module/model-panel/index.vue
@@ -1,10 +1,11 @@
 <template>
-    <div class="w h re oh" :style="com_style">
+    <div v-if="is_show" class="w h re oh" :style="com_style">
         <div class="w h" :style="com_img_style"></div>
     </div>
 </template>
 <script setup lang="ts">
-import { radius_computer, gradient_handle, background_computer } from '@/utils';
+import { radius_computer, gradient_handle, background_computer, custom_condition_judg, custom_condition_data } from '@/utils';
+import { isEmpty } from 'lodash';
 const props = defineProps({
     value: {
         type: Object,
@@ -23,6 +24,10 @@ const props = defineProps({
         type: Boolean,
         default: false
     },
+    isCustom: {
+        type: Boolean,
+        default: false
+    },
     scale: {
         type: Number,
         default: 1
@@ -30,6 +35,25 @@ const props = defineProps({
 });
 // 用于页面判断显示
 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) && !props.isDisplayPanel) {
+        return custom_condition_judg(field_value, condition.type, condition.value);
+    } else {
+        return true;
+    }
+});
 // 外层样式
 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.panel_rotate}deg);`;
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 3e595fa8..be0e04a0 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
@@ -33,6 +33,8 @@
                 </el-form-item>
             </card-container>
             <div class="bg-f5 divider-line" />
+            <condition-config :value="form" :options="options"></condition-config>
+            <div class="bg-f5 divider-line" />
             <card-container>
                 <div class="mb-12">边框设置</div>
                 <el-form-item label="边框显示">
diff --git a/src/components/common/custom-module/model-text/index.vue b/src/components/common/custom-module/model-text/index.vue
index 71aa8c6c..274b2738 100644
--- a/src/components/common/custom-module/model-text/index.vue
+++ b/src/components/common/custom-module/model-text/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="img-outer w h re oh" :style="com_style">
+    <div v-if="is_show" class="img-outer w h re oh" :style="com_style">
         <div :style="text_style" class="text-word-break">
             <template v-if="form.is_rich_text == '1'">
                 <div class="rich-text-content" :innerHTML="text_title"></div>
@@ -11,7 +11,7 @@
     </div>
 </template>
 <script setup lang="ts">
-import { radius_computer, padding_computer, gradient_handle, get_nested_property } from '@/utils';
+import { radius_computer, padding_computer, gradient_handle, get_nested_property, custom_condition_judg, custom_condition_data } from '@/utils';
 import { isEmpty } from 'lodash';
 const props = defineProps({
     value: {
@@ -51,6 +51,26 @@ const props = defineProps({
 
 // 用于页面判断显示
 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) && !props.isDisplayPanel) {
+        return custom_condition_judg(field_value, condition.type, condition.value);
+    } else {
+        return true;
+    }
+});
+
 const text_title = computed(() => {
     return getTextTitle(form.value, props);
 });
@@ -111,6 +131,7 @@ const text_title = computed(() => {
     }
     return text;
 }
+
 // 数据处理
 const data_handling = (data_source_id: string) => {
     let text_title = get_nested_property(props.sourceList, data_source_id);
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 c6beb45b..e8cece57 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
@@ -90,6 +90,8 @@
                 </el-form-item>
             </card-container>
             <div class="bg-f5 divider-line" />
+            <condition-config :value="form" :options="options"></condition-config>
+            <div class="bg-f5 divider-line" />
             <card-container>
                 <div class="mb-12">边框设置</div>
                 <el-form-item label="边框显示">
diff --git a/src/components/model-custom/components/custom-config/index.vue b/src/components/model-custom/components/custom-config/index.vue
index 0f9df700..ced10b4e 100644
--- a/src/components/model-custom/components/custom-config/index.vue
+++ b/src/components/model-custom/components/custom-config/index.vue
@@ -12,7 +12,7 @@
                     <model-text-style :key="key" v-model:height="center_height" :options="options" :value="diy_data"></model-text-style>
                 </template>
                 <template v-else-if="diy_data.key == 'auxiliary-line'">
-                    <model-lines-style :key="key" v-model:height="center_height" :value="diy_data"></model-lines-style>
+                    <model-lines-style :key="key" v-model:height="center_height" :options="options" :value="diy_data"></model-lines-style>
                 </template>
                 <template v-else-if="diy_data.key == 'icon'">
                     <model-icon-style :key="key" v-model:height="center_height" :options="options" :value="diy_data"></model-icon-style>
diff --git a/src/components/model-custom/components/index-default.ts b/src/components/model-custom/components/index-default.ts
index 441c3b9f..5c36335f 100644
--- a/src/components/model-custom/components/index-default.ts
+++ b/src/components/model-custom/components/index-default.ts
@@ -44,7 +44,12 @@ const text_com_data = {
     border_size: 1,
     direction: '90deg',
     color_list: [{ color: '', color_percentage: undefined }],
-    z_index: 0
+    // 条件判断
+    condition: {
+        field: '', // 字段id
+        type: '', // 条件类型
+        value: '', // 值
+    }
 }
 // 图片的默认值
 const img_com_data = {
@@ -83,7 +88,12 @@ const img_com_data = {
         radius_bottom_right: 0,
     },
     border_size: 1,
-    z_index: 0
+    // 条件判断
+    condition: {
+        field: '', // 字段id
+        type: '', // 条件类型
+        value: '', // 值
+    }
 }
 // 线条的默认值
 const line_com_data = {
@@ -95,7 +105,12 @@ const line_com_data = {
     line_width: 306,
     line_size: 1,
     line_color: '#000',
-    z_index: 0,
+    // 条件判断
+    condition: {
+        field: '', // 字段id
+        type: '', // 条件类型
+        value: '', // 值
+    }
 }
 
 // icon的默认值
@@ -142,7 +157,12 @@ const icon_com_data = {
     border_size: 1,
     direction: '90deg',
     color_list: [{ color: '', color_percentage: undefined }],
-    z_index: 0
+    // 条件判断
+    condition: {
+        field: '', // 字段id
+        type: '', // 条件类型
+        value: '', // 值
+    }
 }
 
 // 面板的默认值
@@ -171,7 +191,12 @@ const panel_com_data = {
     border_size: 1,
     direction: '90deg',
     color_list: [{ color: '#fff', color_percentage: undefined }],
-    z_index: 0
+    // 条件判断
+    condition: {
+        field: '', // 字段id
+        type: '', // 条件类型
+        value: '', // 值
+    }
 }
 
 const custom_group_com_data = {
@@ -179,6 +204,12 @@ const custom_group_com_data = {
     com_width: 100,
     com_height: 100,
     staging_height: 100,
+    // 条件判断
+    condition: {
+        field: '', // 字段id
+        type: '', // 条件类型
+        value: '', // 值
+    },
     custom_list: [], // 自定义内容处理
     custom_height: 100, // 自定义高度
     data_source_direction: 'vertical', // 铺满方式
diff --git a/src/components/model-custom/components/index.vue b/src/components/model-custom/components/index.vue
index 2e5ead01..8fc4f8de 100644
--- a/src/components/model-custom/components/index.vue
+++ b/src/components/model-custom/components/index.vue
@@ -444,6 +444,7 @@ watch(() => center_height.value, () => {
                 },
             },
         }));
+        console.log(diy_data.value);
         // 容器高度变化时，组件不绑定右侧数据
         emits('rightUpdate', {});
         draggable_container.value = true;
diff --git a/src/components/model-custom/index.vue b/src/components/model-custom/index.vue
index d9c5c8bd..7638760f 100644
--- a/src/components/model-custom/index.vue
+++ b/src/components/model-custom/index.vue
@@ -67,6 +67,7 @@ const props = defineProps({
         default: 0,
     }
 });
+
 // 用于页面判断显示
 const state = reactive({
     form: props.value.content,
@@ -74,6 +75,8 @@ const state = reactive({
 });
 // 如果需要解构，确保使用toRefs
 const { form, new_style } = toRefs(state);
+// 将顶级的字段暴露给孙子组件, 避免传递层级太深
+provide('field_list', form.value.field_list);
 onBeforeMount(() => {
     // 历史数据处理
     if (!Object.keys(form.value.data_source_content).includes('data_auto_list') && !Object.keys(form.value.data_source_content).includes('data_list')) {
diff --git a/src/components/model-custom/model-custom-content.vue b/src/components/model-custom/model-custom-content.vue
index 90696953..dd498760 100644
--- a/src/components/model-custom/model-custom-content.vue
+++ b/src/components/model-custom/model-custom-content.vue
@@ -303,8 +303,10 @@ const processing_data = (key: string) => {
     const list = options.value.filter((item) => item.type == key);
     if (list.length > 0) {
         model_data_source.value = list[0].data;
+        form.value.field_list = list[0].data;
     } else {
         model_data_source.value = [];
+        form.value.field_list = [];
     }
 };
 //#endregion
diff --git a/src/config/const/custom.ts b/src/config/const/custom.ts
index ba2bf4f7..d1444ca1 100644
--- a/src/config/const/custom.ts
+++ b/src/config/const/custom.ts
@@ -84,6 +84,7 @@ interface defaultSearch {
         data_source_direction: string;
         data_source_carousel_col: number;
         custom_list: string[];
+        field_list: string[];
     };
     style: {
         is_roll: string;
@@ -133,7 +134,9 @@ const defaultSearch: defaultSearch = {
         // 滑动时的显示 轮播数量
         data_source_carousel_col: 1,
         // 自定义内容列表
-        custom_list: []
+        custom_list: [],
+        // 存放所有的数据字段
+        field_list: [],
     },
     style: {
         is_roll: '1',
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 2e89118f..4854e352 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -1,4 +1,5 @@
 import CommonAPI from '@/api/common';
+import { isEmpty } from 'lodash';
 // 定义一组预定义的颜色数组，用于在各种场景中轻松引用这些颜色
 // 这些颜色包括从白色到黑色的不同灰度，以及一些鲜艳的颜色，格式有十六进制、RGB、RGBA、HSV、HSL等
 export const predefine_colors = ['#fff', '#ddd', '#ccc', '#999', '#666', '#333', '#000', '#ff4500', '#ff8c00', '#ffd700', '#90ee90', '#00ced1', '#c71585', 'rgba(255, 69, 0, 0.68)', 'rgb(255, 120, 0)', 'hsv(51, 100, 98)', 'hsva(120, 40, 94, 0.5)', 'hsl(181, 100%, 37%)', '#1F93FF', '#c7158577'];
@@ -137,13 +138,112 @@ export function convert_strings_to_numbers(obj: any, maxDepth: number = 100, cur
 
 type PaddingStyle = { padding_left: number; padding_right: number;};
 
-type BorderStyle = { border_is_show: boolean; border_size?: PaddingStyle; };
+type BorderStyle = { border_is_show: string; border_size?: PaddingStyle; };
 
 export const border_width = (style: BorderStyle): number => {
     if (!style) { return 0; }
-    if (!style.border_is_show) { return 0; }
-    const { padding_left = 0, padding_right = 0 } = style.border_size || {};
-    return padding_left + padding_right;
+    if (style.border_is_show == '1') {
+        const { padding_left = 0, padding_right = 0 } = style.border_size || {};
+        return padding_left + padding_right; 
+    } else { 
+        return 0;
+    }
+}
+
+/**
+ * 根据指定的条件类型和值，判断字段值是否满足条件
+ * @param fieldValue 字段值，可以是任何类型
+ * @param type 条件类型，如'contains', 'is-empty', 'greater-than'等
+ * @param value 用于比较的值，可以是数字或字符串
+ * @returns 返回一个布尔值，表示字段值是否满足指定的条件
+ */
+export const custom_condition_judg = (fieldValue: any, type: string, value: number | string): boolean => {
+    // 处理 null 或 undefined 的情况
+    if (fieldValue == null) {
+        return true;
+    }
+
+    // 提前计算并缓存转换结果
+    const stringValue = String(fieldValue);
+    const valueStr = String(value);
+    const numberValue = Number(value);
+    switch (type) {
+        case 'contains':
+        case 'does-not-contain':
+            // 处理包含和不包含的逻辑, 如果值为空，直接返回为空
+            if (!isEmpty(valueStr)) {
+                const result = stringValue.includes(valueStr);
+                return type === 'contains' ? result : !result;
+            } else {
+                return true;
+            }
+        case 'is-empty':
+        case 'is-not-empty':
+            // 处理为空和不为空的逻辑
+            const is_Empty = ['', '{}', '[]'].includes(stringValue.trim()) || (Array.isArray(fieldValue) && fieldValue.length === 0);
+            return type === 'is-empty' ? is_Empty : !is_Empty;
+        case 'greater-than':
+        case 'less-than':
+        case 'equal':
+            // 根据字段值的类型，进行数字间的比较
+            if (typeof fieldValue === 'number') {
+                return compare_numbers(fieldValue, numberValue, type);
+            } else if (Array.isArray(fieldValue)) {
+                // 如果字段值是数组，比较数组长度和指定值
+                const valueLength = fieldValue.length;
+                return compare_numbers(valueLength, numberValue, type);
+            } else {
+                // 将字段值转换为数字进行比较, 如果是字符串的话，直接为NAN，比对不会成功，为空的时候会转为0 == 0会成功，其他情况下不会成功
+                const numericFieldValue = +stringValue;
+                return compare_numbers(numericFieldValue, numberValue, type);
+            }
+        default:
+            return true;
+    }
+}
+
+/**
+ * 比较两个数字的大小
+ * @param a 第一个数字
+ * @param b 第二个数字
+ * @param type 比较类型，如'greater-than', 'less-than', 'equal'等
+ * @returns 根据比较类型返回比较结果
+ */
+const compare_numbers = (a: number, b: number, type: string): boolean => {
+    switch (type) {
+        case 'greater-than': return a > b;
+        case 'less-than': return a < b;
+        case 'equal': return a === b;
+        default: return false;
+    }
+}
+
+export const custom_condition_data = (data_source_id: string, option: any, sourceList: any, isCustom: boolean) => {
+    let data_value = '';
+    if (data_source_id.includes(';')) {
+        // 取出所有的字段，使用;分割
+        const ids = data_source_id.split(';');
+        let text = '';
+        ids.forEach((item: string, index: number) => {
+            text += data_handling(item, sourceList, isCustom) + (index != ids.length - 1 ? (option?.join || '') : '');
+        });
+        data_value = text;
+    } else {
+        // 不输入商品， 文章和品牌时，从外层处理数据
+        data_value = data_handling(data_source_id, sourceList, isCustom);
+    }
+    return (option?.first || '') + data_value + (option?.last || '');
+}
+
+// 数据处理
+const data_handling = (data_source_id: string, sourceList: any, isCustom: boolean) => {
+    // 不输入商品， 文章和品牌时，从外层处理数据
+    let icon = get_nested_property(sourceList, data_source_id);
+    // 如果是商品,品牌，文章的图片， 其他的切换为从data中取数据
+    if (!isEmpty(sourceList.data) && isCustom) {
+        icon = get_nested_property(sourceList.data, data_source_id);
+    }
+    return icon;
 }
 
 /**