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

修改自定义显示逻辑

v1.2.0
于肖磊 2025-01-06 14:00:32 +08:00
parent 18418737ce
commit f3923f7466
14 changed files with 81 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/common/custom-module/data-rendering/index.vue
View File

@ -5,16 +5,16 @@
<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" :custom-group-field-id="customGroupFieldId" :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" :is-custom-group="isCustomGroup" :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" :custom-group-field-id="customGroupFieldId" :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-custom-group="isCustomGroup" :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" :custom-group-field-id="customGroupFieldId" :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-custom-group="isCustomGroup" :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" :custom-group-field-id="customGroupFieldId" :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-custom-group="isCustomGroup" :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>

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

@ -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" :custom-group-field-id="form?.data_source_field?.id || ''" :is-custom-group="true"></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 || ''"></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" :custom-group-field-id="form?.data_source_field?.id || ''" :is-custom-group="true"></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 || ''"></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" :is-custom-group="true"></data-rendering>
<data-rendering :custom-list="form.custom_list" :data-height="form.height" :scale="custom_scale"></data-rendering>
</div>
</div>
</template>
@ -93,11 +93,11 @@ 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 field_list: any = toRef(inject('field_list', []));
const is_show = computed(() => {
// 取出条件判断的内容
const condition = form.value?.condition || { field: '', type: '', value: '' };
return get_is_eligible(field_list, condition, props);
return get_is_eligible(field_list.value, condition, props);
});
//#region 自定义组真实数据
@ -140,7 +140,7 @@ const style_chunk_img_container = computed(() => common_img_computer(new_style.v
const custom_scale = ref(1);
// 计算整体宽度和比例
watchEffect(() => {
const { common_style, data_style, data_content_style } = new_style.value;
const { common_style, data_style, data_content_style, column_gap = 0 } = 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 + border_width(common_style);
@ -148,10 +148,12 @@ watchEffect(() => {
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 + border_width(data_style);
// 数据间距
const data_spacing = ['vertical', 'horizontal'].includes(form.value.data_source_direction) ? column_gap * (form.value.data_source_carousel_col - 1) : 0;
// 根据容器宽度来计算内部大小
const new_width = old_width - outer_spacing - internal_spacing - content_spacing;
const new_width = old_width - outer_spacing - internal_spacing - content_spacing - data_spacing;
// 获得对应宽度的比例
custom_scale.value = new_width / old_width;
custom_scale.value = new_width / props.dataWidth;
});
//#endregion
// 计算纵向显示的宽度

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

@ -36,16 +36,20 @@ const props = defineProps({
isCustom: {
type: Boolean,
default: false
}
},
customGroupFieldId: {
type: String,
default: ''
},
});
// 用于页面判断显示
const form = computed(() => props.value);
// 从组件的顶层获取数据，避免多层组件传值导致数据遗漏和多余代码
const field_list: any[] | undefined = inject('field_list', []);
const field_list: any = toRef(inject('field_list', []));
const is_show = computed(() => {
// 取出条件判断的内容
const condition = form.value?.condition || { field: '', type: '', value: '' };
return get_is_eligible(field_list, condition, props);
return get_is_eligible(field_list.value, condition, props);
});
// 图标样式
const icon_class = computed(() => {

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

@ -32,6 +32,10 @@ const props = defineProps({
type: Boolean,
default: false
},
customGroupFieldId: {
type: String,
default: ''
},
imgParams: {
type: String,
default: ''
@ -40,11 +44,11 @@ const props = defineProps({
// 用于页面判断显示
const form = computed(() => props.value);
// 从组件的顶层获取数据，避免多层组件传值导致数据遗漏和多余代码
const field_list: any[] | undefined = inject('field_list', []);
const field_list: any = toRef(inject('field_list', []));
const is_show = computed(() => {
// 取出条件判断的内容
const condition = form.value?.condition || { field: '', type: '', value: '' };
return get_is_eligible(field_list, condition, props);
return get_is_eligible(field_list.value, condition, props);
});
// 图片地址
const img = computed(() => {

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

@ -26,6 +26,10 @@ const props = defineProps({
type: Boolean,
default: false
},
customGroupFieldId: {
type: String,
default: ''
},
scale: {
type: Number,
default: 1,
@ -34,11 +38,11 @@ const props = defineProps({
// 用于页面判断显示
const form = computed(() => props.value);
// 从组件的顶层获取数据，避免多层组件传值导致数据遗漏和多余代码
const field_list: any[] | undefined = inject('field_list', []);
const field_list: any = toRef(inject('field_list', []));
const is_show = computed(() => {
// 取出条件判断的内容
const condition = form.value?.condition || { field: '', type: '', value: '' };
return get_is_eligible(field_list, condition, props);
return get_is_eligible(field_list.value, condition, props);
});
// 边框样式
const border_style = computed(() => {

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

@ -28,6 +28,10 @@ const props = defineProps({
type: Boolean,
default: false
},
customGroupFieldId: {
type: String,
default: ''
},
scale: {
type: Number,
default: 1
@ -36,11 +40,11 @@ const props = defineProps({
// 用于页面判断显示
const form = computed(() => props.value);
// 从组件的顶层获取数据，避免多层组件传值导致数据遗漏和多余代码
const field_list: any[] | undefined = inject('field_list', []);
const field_list: any = toRef(inject('field_list', []));
const is_show = computed(() => {
// 取出条件判断的内容
const condition = form.value?.condition || { field: '', type: '', value: '' };
return get_is_eligible(field_list, condition, props);
return get_is_eligible(field_list.value, condition, props);
});
// 外层样式
const com_style = computed(() => {

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

@ -39,10 +39,6 @@ const props = defineProps({
type: Boolean,
default: false
},
isCustomGroup: {
type: Boolean,
default: false
},
customGroupFieldId: {
type: String,
default: ''
@ -50,21 +46,17 @@ const props = defineProps({
titleParams: {
type: String,
default: ''
},
options: {
type: Array<any>,
default: () => [],
}
});
// 用于页面判断显示
const form = computed(() => props.value);
// 从组件的顶层获取数据，避免多层组件传值导致数据遗漏和多余代码
const field_list: any[] | undefined = inject('field_list', []);
const field_list: any = toRef(inject('field_list', []));
const is_show = computed(() => {
// 取出条件判断的内容
const condition = form.value?.condition || { field: '', type: '', value: '' };
return get_is_eligible(field_list, condition, props);
return get_is_eligible(field_list.value, condition, props);
});
const text_title = computed(() => {
@ -93,9 +85,17 @@ const text_title = computed(() => {
if (!isEmpty(formValue.text_title)) {
// 存储待处理的文本标题
let new_title = cloneDeep(formValue.text_title);
let new_field_list = field_list.value;
// 判断是否是自定义组
if (!props.isCustom && !isEmpty(props.customGroupFieldId)) {
// 取出对应自定义组的内容
const group_option_list = new_field_list.find((item: any) => item.field === props.customGroupFieldId);
// 取出自定义组内部数据源参数的详细数据
new_field_list = group_option_list?.data || [];
}
// 遍历字段列表，替换文本标题中的占位符
if (field_list) {
field_list.forEach((item: any) => {
if (!isEmpty(new_field_list)) {
new_field_list.forEach((item: any) => {
const new_field = '${' + item.field + '}';
if (formValue.text_title.includes(new_field)) {
// 获取到字段的真实数据

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

@ -2,7 +2,7 @@
<Dialog v-model:visible="dialogVisible" :title="configType == 'custom' ? '编辑自定义' : '编辑自定义组'" @accomplish="accomplish">
<div class="flex-row h w">
<!-- 左侧和中间区域 -->
<DragIndex ref="draglist" :key="dragkey" v-model:height="center_height" v-model:width="center_width" :config-type="configType" :source-list="sourceList" :options="options" :is-custom="isCustom" :show-data="showData" :list="customList" @right-update="right_update"></DragIndex>
<DragIndex ref="draglist" :key="dragkey" v-model:height="center_height" v-model:width="center_width" :config-type="configType" :source-list="sourceList" :custom-group-field-id="customGroupFieldId" :is-custom="configType == 'custom'? isCustom : false" :show-data="showData" :list="customList" @right-update="right_update"></DragIndex>
<!-- 右侧配置区域 -->
<div class="settings">
<template v-if="diy_data.key === 'img'">
@ -64,6 +64,10 @@ const props = defineProps({
type: String,
default: '',
},
customGroupFieldId: {
type: String,
default: '',
},
customList: {
type: Array<any>,
default: () => [],

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

@ -70,19 +70,19 @@
<Vue3DraggableResizable v-for="(item, index) in diy_data" :key="item.id" v-model:w="item.com_data.com_width" v-model:h="item.com_data.com_height" :min-w="0" :min-h="0" :class="{'plug-in-show-component-line': is_show_component_line, 'plug-in-show-tabs': item.show_tabs == '1', 'vdr-handle-z-index': item.com_data.bottom_up == '1' }" :style="{ 'z-index': (diy_data.length - 1) - index }" :init-w="item.com_data.com_width" :init-h="item.com_data.com_height" :x="item.location.x" :y="item.location.y" :parent="true" :draggable="is_draggable" @mousedown.stop="on_choose(index, item.show_tabs)" @click.stop="on_choose(index, item.show_tabs)" @drag-end="dragEndHandle($event, index)" @resizing="resizingHandle($event, item.key, index)" @resize-end="resizingHandle($event, item.key, index)">
<div :class="['main-content flex-row', { 'plug-in-border': item.show_tabs == '1' }]">
<template v-if="item.key == 'text'">
<model-text :key="item.id" :value="item.com_data" :source-list="props.sourceList" :is-custom="isCustom" :title-params="showData?.data_name || 'name'" :options="options"></model-text>
<model-text :key="item.id" :value="item.com_data" :source-list="props.sourceList" :is-custom="isCustom" :custom-group-field-id="customGroupFieldId" :title-params="showData?.data_name || 'name'"></model-text>
</template>
<template v-else-if="item.key == 'img'">
<model-image :key="item.id" :value="item.com_data" :source-list="props.sourceList" :is-custom="isCustom" :img-params="showData?.data_logo || ''"></model-image>
<model-image :key="item.id" :value="item.com_data" :source-list="props.sourceList" :is-custom="isCustom" :custom-group-field-id="customGroupFieldId" :img-params="showData?.data_logo || ''"></model-image>
</template>
<template v-else-if="item.key == 'auxiliary-line'">
<model-lines :key="item.id" :value="item.com_data" :source-list="props.sourceList" :is-custom="isCustom"></model-lines>
<model-lines :key="item.id" :value="item.com_data" :source-list="props.sourceList" :is-custom="isCustom" :custom-group-field-id="customGroupFieldId"></model-lines>
</template>
<template v-else-if="item.key == 'icon'">
<model-icon :key="item.id" :value="item.com_data" :source-list="props.sourceList" :is-custom="isCustom"></model-icon>
<model-icon :key="item.id" :value="item.com_data" :source-list="props.sourceList" :is-custom="isCustom" :custom-group-field-id="customGroupFieldId"></model-icon>
</template>
<template v-else-if="item.key == 'panel'">
<model-panel :key="item.id" :value="item.com_data" :source-list="props.sourceList" :is-custom="isCustom"></model-panel>
<model-panel :key="item.id" :value="item.com_data" :source-list="props.sourceList" :is-custom="isCustom" :custom-group-field-id="customGroupFieldId"></model-panel>
</template>
<template v-else-if="item.key == 'custom-group'">
<model-custom-group :key="item.id" :value="item.com_data" :source-list="props.sourceList" :data-height="item.com_data.custom_height" :data-width="item.com_data.com_width" :is-custom="isCustom"></model-custom-group>
@ -126,7 +126,7 @@ interface Props {
sourceList: object;
isCustom: boolean;
showData: any;
options: any;
customGroupFieldId: string;
}
const props = defineProps<Props>();
//#endregion

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

@ -76,7 +76,7 @@ const state = reactive({
// 如果需要解构，确保使用toRefs
const { form, new_style } = toRefs(state);
// 将顶级的字段暴露给孙子组件, 避免传递层级太深
provide('field_list', form.value.field_list);
provide('field_list', computed(() => 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')) {
@ -98,15 +98,17 @@ const gap_width = computed(() => {
const scale = ref(1);
// 计算整体宽度和比例
watchEffect(() => {
const { common_style, data_style, data_content_style } = new_style.value;
const { common_style, data_style, data_content_style, column_gap } = new_style.value;
// 外层左右间距
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 + border_width(data_content_style);
// 数据左右间距
const internal_spacing = data_style.margin_left + data_style.margin_right + data_style.padding_left + data_style.padding_right + border_width(data_style);
// 数据间距
const data_spacing = ['vertical', 'horizontal'].includes(form.value.data_source_direction) ? column_gap * (form.value.data_source_carousel_col - 1) : 0;
// 根据容器宽度来计算内部大小
const width = 390 - outer_spacing - internal_spacing - content_spacing - props.outerContainerPadding;
const width = 390 - outer_spacing - internal_spacing - content_spacing - data_spacing - props.outerContainerPadding;
// 获得对应宽度的比例
scale.value = width / 390;
});

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

@ -61,7 +61,7 @@
<!-- 自定义内容处理 -->
<custom-config :key="dragkey + 'custom'" v-model:visible="dialogVisible" v-model:width="custom_width" v-model:height="center_height" :dragkey="dragkey + 'custom'" :options="model_data_source" :source-list="!isEmpty(data_source_content_list) ? data_source_content_list[0] : {}" :is-custom="form.is_custom_data == '1'" :show-data="form?.show_data || { data_key: 'id', data_name: 'name' }" :custom-list="custom_list" @accomplish="accomplish" @custom_edit="custom_edit"></custom-config>
<!-- 自定义内部数据内容处理 -->
<custom-config :key="drag_group_key + 'custom-group'" v-model:visible="dialogVisible_group" v-model:width="center_group_width" v-model:height="center_group_height" v-model:father-list="custom_group_father_list" config-type="custom-group" :dragkey="drag_group_key + 'custom-group'" :options="custom_group_option_list" :source-list="!isEmpty(new_group_source_list) ? new_group_source_list : {}" :is-custom="form.is_custom_data == '1'" :show-data="form?.show_data || { data_key: 'id', data_name: 'name' }" :custom-id="center_group_id" :custom-list="custom_group_list" @accomplish="accomplish"></custom-config>
<custom-config :key="drag_group_key + 'custom-group'" v-model:visible="dialogVisible_group" v-model:width="center_group_width" v-model:height="center_group_height" v-model:father-list="custom_group_father_list" config-type="custom-group" :dragkey="drag_group_key + 'custom-group'" :options="custom_group_option_list" :source-list="!isEmpty(new_group_source_list) ? new_group_source_list : {}" :is-custom="form.is_custom_data == '1'" :show-data="form?.show_data || { data_key: 'id', data_name: 'name' }" :custom-id="center_group_id" :custom-list="custom_group_list" :custom-group-field-id="custom_group_field_id" @accomplish="accomplish"></custom-config>
<!-- 手动筛选数据弹出框 -->
<custom-dialog v-model:dialog-visible="url_value_dialog_visible" :data-list-key="form.show_data?.data_key || 'id'" :config="default_type_data.appoint_config" :multiple="url_value_multiple_bool" @confirm_event="url_value_dialog_call_back"></custom-dialog>
</div>
@ -100,7 +100,6 @@ const custom_width = computed(() => {
}
})
const form = ref(props.value);
provide('field_list', form.value.field_list);
// 外层的内容
// 外层自定义的弹出框
const dragkey = ref('');
@ -121,7 +120,9 @@ const center_group_id = ref('');
const custom_group_father_list = ref([]);
// 自定义组的弹出框的key值
const drag_group_key = ref('');
// 数据源id
const custom_group_field_id = ref('');
// 获取到真实数据和选项值
const custom_group_option_list = ref<any[]>([]);
const new_group_source_list = ref({});
// 自定义编辑的逻辑
@ -151,6 +152,7 @@ const custom_edit = (type: string, id?: string, father_list?: any, list?: any, w
center_group_width.value = width || 0;
center_group_height.value = height || 0;
// 获取到真实数据和选项值
custom_group_field_id.value = data_source_field?.id || '';
new_group_source_list.value = new_group_source_list_handle(data_source_field?.id || '');
custom_group_option_list.value = data_source_field?.option || [];
// 设置是否是子页面
@ -331,6 +333,8 @@ const processing_data = (key: string) => {
form.value.field_list = [];
}
};
// 将内容传递给子组件
provide('field_list', computed(() => form.value.field_list));
//#endregion
//#region 数据源更新逻辑处理
// 打开弹出框

5
src/components/model-data-magic/components/custom/index.vue
View File

@ -64,6 +64,7 @@ const state = reactive({
// 如果需要解构，确保使用toRefs
const { form, new_style } = toRefs(state);
const scale = ref(1);
provide('field_list', computed(() => form.value.field_list));
// 数据来源的内容
let data_source_content_list = computed(() => {
if (form.value.is_custom_data == '1') {
@ -171,8 +172,10 @@ watchEffect(() => {
// 内容左右间距
const data_content_style = new_style.value?.data_content_style || {};
const content_spacing = (data_content_style?.margin_left || 0) + (data_content_style?.margin_right || 0) + (data_content_style?.padding_left || 0) + (data_content_style?.padding_right || 0) + border_width(data_content_style);
// 数据间距
const data_spacing = ['vertical', 'horizontal'].includes(form.value.data_source_direction) ? new_style.value.column_gap * (form.value.data_source_carousel_col - 1) : 0;
// 当前容器的宽度 减去 左右两边的padding值 再减去 数据间距的一半 再除以 容器的宽度 得到比例 再乘以数据魔方的比例
const width = old_width - data_style - content_spacing - common_styles - (props.dataSpacing / 2);
const width = old_width - data_style - content_spacing - common_styles - data_spacing - (props.dataSpacing / 2);
scale.value = width / form.value.width;
})

2
src/components/model-data-magic/model-data-magic-content.vue
View File

@ -365,6 +365,8 @@ const data_content = {
custom_mark_name: '',
// 自定义内容列表
custom_list: [],
// 存放所有的数据字段
field_list: [],
//视频信息
video: [],
video_img: [],

2
src/utils/index.ts
View File

@ -273,7 +273,7 @@ export const get_is_eligible = (field_list: any[], condition: condition_data, pr
let option: any = {};
if (field_list) {
// 判断是否是自定义组并且 自定义组选则了对应的数据源
if (props.isCustomGroup && !isEmpty(props.customGroupFieldId)) {
if (!props.isCustom && !isEmpty(props.customGroupFieldId)) {
// 取出对应自定义组的内容
const group_option_list = field_list.find((item: any) => item.field === props.customGroupFieldId);
// 取出自定义组内部数据源参数的详细数据