自定义逻辑优化
于肖磊
parent
c83bb75dfe
commit
c7d80c6822
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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" />
|
||||
|
|
|
|||
|
|
@ -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 }) => {
|
||||
// 轮播图滚动时，更新当前激活的下标， 如果不是平移的时候，需要除以列数，否则就是当前的下标
|
||||
|
|
|
|||
|
|
@ -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(() => {
|
||||
|
|
|
|||
|
|
@ -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(() => {
|
||||
|
|
|
|||
|
|
@ -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(() => {
|
||||
|
|
|
|||
|
|
@ -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(() => {
|
||||
|
|
|
|||
|
|
@ -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(() => {
|
||||
|
|
|
|||
|
|
@ -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)) {
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
Loading…
Reference in New Issue