sileya-ai
/
vr-uniapp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

新增条件判断内容

v1.2.0
于肖磊 2025-01-03 10:43:06 +08:00
parent 462bd52038
commit aa7918127b
20 changed files with 318 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
src/components/common/custom-module/model-custom-group/index.vue
View File

@ -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;
// 获得对应宽度的比例

2
src/components/common/custom-module/model-custom-group/model-custom-group-style.vue
View File

@ -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>

23
src/components/common/custom-module/model-icon/index.vue
View File

@ -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)) {

2
src/components/common/custom-module/model-icon/model-icon-style.vue
View File

@ -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="边框显示">

25
src/components/common/custom-module/model-image/index.vue
View File

@ -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])) {

2
src/components/common/custom-module/model-image/model-image-style.vue
View File

@ -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="边框显示">

33
src/components/common/custom-module/model-lines/index.vue
View File

@ -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') {

8
src/components/common/custom-module/model-lines/model-lines-style.vue
View File

@ -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({

28
src/components/common/custom-module/model-panel/index.vue
View File

@ -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);`;

2
src/components/common/custom-module/model-panel/model-panel-style.vue
View File

@ -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="边框显示">

25
src/components/common/custom-module/model-text/index.vue
View File

@ -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);

2
src/components/common/custom-module/model-text/model-text-style.vue
View File

@ -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="边框显示">

2
src/components/model-custom/components/custom-config/index.vue
View File

@ -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>

41
src/components/model-custom/components/index-default.ts
View File

@ -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', // 铺满方式

1
src/components/model-custom/components/index.vue
View File

@ -444,6 +444,7 @@ watch(() => center_height.value, () => {
},
},
}));
console.log(diy_data.value);
// 容器高度变化时，组件不绑定右侧数据
emits('rightUpdate', {});
draggable_container.value = true;

3
src/components/model-custom/index.vue
View File

@ -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')) {

2
src/components/model-custom/model-custom-content.vue
View File

@ -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

5
src/config/const/custom.ts
View File

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

104
src/utils/index.ts
View File

@ -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; }
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;
}
/**