修改自定义数据的处理

v1.1.0
于肖磊 2024-12-09 13:58:51 +08:00
parent 363c61bf3f
commit 6418ff7513
11 changed files with 149 additions and 128 deletions

View File

@ -2,19 +2,19 @@
<div class="w h re custom-other">
<div v-for="(item, index) in list" :key="item.id" class="main-content" :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" :source-type="sourceType" :is-percentage="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-percentage="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" :source-type="sourceType" :is-percentage="true"></model-image>
<model-image :key="item.id" :value="item.com_data" :scale="scale" :source-list="sourceList" :is-custom="isCustom" :img-params="showData?.data_logo || ''" :is-percentage="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" :source-type="sourceType" :is-percentage="true"></model-lines>
<model-lines :key="item.id" :value="item.com_data" :scale="scale" :source-list="sourceList" :is-custom="isCustom" :is-percentage="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" :source-type="sourceType" :is-percentage="true"></model-icon>
<model-icon :key="item.id" :value="item.com_data" :scale="scale" :source-list="sourceList" :is-custom="isCustom" :is-percentage="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" :source-type="sourceType" :is-percentage="true"></model-panel>
<model-panel :key="item.id" :value="item.com_data" :scale="scale" :source-list="sourceList" :is-custom="isCustom" :is-percentage="true"></model-panel>
</template>
</div>
</div>
@ -47,10 +47,6 @@ const props = defineProps({
return {};
}
},
sourceType: {
type: String,
default: ''
},
dataHeight: {
type: Number,
default: 0,
@ -58,6 +54,21 @@ const props = defineProps({
scale: {
type: Number,
default: 1,
},
isCustom: {
type: Boolean,
default: false
},
showData: {
type: Object as PropType<{
data_key: string;
data_name: string;
data_logo?: string;
}>,
default: () => ({
data_key: 'id',
data_name: 'name',
})
}
});

View File

@ -33,9 +33,9 @@ const props = defineProps({
type: Number,
default: 1
},
sourceType: {
type: String,
default: ''
isCustom: {
type: Boolean,
default: false
}
});
//
@ -49,7 +49,7 @@ const icon_class = computed(() => {
//
let icon = props.sourceList[form.value.data_source_id];
// , data
if (['goods', 'article', 'brand'].includes(props.sourceType) && !isEmpty(props.sourceList.data)) {
if (!isEmpty(props.sourceList.data) && props.isCustom) {
icon = props.sourceList.data[form.value.data_source_id];
}
return icon;

View File

@ -28,18 +28,15 @@ const props = defineProps({
type: Number,
default: 1
},
sourceType: {
isCustom: {
type: Boolean,
default: false
},
imgParams: {
type: String,
default: '',
default: ''
}
});
const keyMap: { [key: string]: string } = {
goods: 'images',
article: 'cover',
brand: 'logo'
};
//
const form = computed(() => props.value);
@ -51,9 +48,9 @@ const img = computed(() => {
//
let image_url = props.sourceList[form.value.data_source_id];
// , data
if (['goods', 'article', 'brand'].includes(props.sourceType) && !isEmpty(props.sourceList.data)) {
if (form.value.data_source_id == keyMap[props.sourceType]) {
image_url = !isEmpty(props.sourceList.new_cover)? props.sourceList.new_cover[0]?.url || '' : props.sourceList.data[keyMap[props.sourceType]];
if (!isEmpty(props.sourceList.data) && props.isCustom) {
if (form.value.data_source_id == props.imgParams) {
image_url = !isEmpty(props.sourceList.new_cover)? props.sourceList.new_cover[0]?.url || '' : props.sourceList.data[props.imgParams];
} else {
image_url = props.sourceList.data[form.value.data_source_id];
}

View File

@ -35,16 +35,15 @@ const props = defineProps({
type: Number,
default: 1
},
sourceType: {
isCustom: {
type: Boolean,
default: false
},
titleParams: {
type: String,
default: ''
}
});
const keyMap: { [key: string]: string } = {
goods: 'title',
article: 'title',
brand: 'name'
};
//
const form = computed(() => props.value);
@ -52,10 +51,10 @@ const text_title = computed(() => {
let text = '';
let text_title = props.sourceList[form.value.data_source_id];
//
if (['goods', 'article', 'brand'].includes(props.sourceType) && !isEmpty(props.sourceList.data)) {
if (!isEmpty(props.sourceList.data) && props.isCustom) {
// data
if (form.value.data_source_id == keyMap[props.sourceType]) {
text_title = !isEmpty(props.sourceList.new_title) ? props.sourceList.new_title : props.sourceList.data[keyMap[props.sourceType]];
if (form.value.data_source_id == props.titleParams) {
text_title = !isEmpty(props.sourceList.new_title) ? props.sourceList.new_title : props.sourceList.data[props.titleParams];
} else {
text_title = props.sourceList.data[form.value.data_source_id];
}

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', { '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" :source-type="sourceType"></model-text>
<model-text :key="item.id" :value="item.com_data" :source-list="props.sourceList" :is-custom="isCustom" :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" :source-type="sourceType"></model-image>
<model-image :key="item.id" :value="item.com_data" :source-list="props.sourceList" :is-custom="isCustom" :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" :source-type="sourceType"></model-lines>
<model-lines :key="item.id" :value="item.com_data" :source-list="props.sourceList" :is-custom="isCustom"></model-lines>
</template>
<template v-else-if="item.key == 'icon'">
<model-icon :key="item.id" :value="item.com_data" :source-list="props.sourceList" :source-type="sourceType"></model-icon>
<model-icon :key="item.id" :value="item.com_data" :source-list="props.sourceList" :is-custom="isCustom"></model-icon>
</template>
<template v-else-if="item.key == 'panel'">
<model-panel :key="item.id" :value="item.com_data" :source-list="props.sourceList" :source-type="sourceType"></model-panel>
<model-panel :key="item.id" :value="item.com_data" :source-list="props.sourceList" :is-custom="isCustom"></model-panel>
</template>
</div>
</Vue3DraggableResizable>
@ -107,7 +107,7 @@
</div>
</template>
<script setup lang="ts">
import { cloneDeep, isEmpty } from 'lodash';
import { cloneDeep, isEmpty, property } from 'lodash';
import { get_math } from '@/utils';
import { defaultComData, isRectangleIntersecting } from "./index-default";
import { SortableEvent, VueDraggable } from 'vue-draggable-plus';
@ -120,7 +120,8 @@ const emits = defineEmits(['rightUpdate']);
interface Props {
list: diy_content[];
sourceList: object;
sourceType: string;
isCustom: boolean;
showData: any;
}
const props = defineProps<Props>();
//#endregion

View File

@ -4,7 +4,7 @@
<template v-if="data_source_content_list.length > 0 && form.data_source_direction == 'vertical'">
<div v-for="(item1, index1) in data_source_content_list" :key="index1" :style="style_chunk_container">
<div class="w h" :style="style_chunk_img_container">
<data-rendering :custom-list="form.custom_list" :source-list="item1" :source-type="form?.data_source || ''" :data-height="form.height" :scale="scale"></data-rendering>
<data-rendering :custom-list="form.custom_list" :source-list="item1" :data-height="form.height" :scale="scale" :is-custom="form.is_custom_data == '1'" :show-data="form?.show_data || { data_key: 'id', data_name: 'name' }"></data-rendering>
</div>
</div>
</template>
@ -13,7 +13,7 @@
<swiper-slide v-for="(item1, index1) in data_source_content_list" :key="index1">
<div :style="style_chunk_container">
<div class="w h" :style="style_chunk_img_container">
<data-rendering :custom-list="form.custom_list" :source-list="item1" :source-type="form?.data_source || ''" :data-height="form.height" :scale="scale"></data-rendering>
<data-rendering :custom-list="form.custom_list" :source-list="item1" :data-height="form.height" :scale="scale" :is-custom="form.is_custom_data == '1'" :show-data="form?.show_data || { data_key: 'id', data_name: 'name' }"></data-rendering>
</div>
</div>
</swiper-slide>
@ -67,17 +67,11 @@ const state = reactive({
});
// 使toRefs
const { form, new_style } = toRefs(state);
onBeforeMount(() => {
//
if (!Object.keys(form.value.data_source_content).includes('data_auto_list') && !Object.keys(form.value.data_source_content).includes('data_list')) {
const data = cloneDeep(form.value.data_source_content);
const new_list = cloneDeep(source_list[form.value.data_source as keyof typeof source_list]);
if (!isEmpty(new_list)) {
form.value.data_source_content = new_list;
} else {
form.value.data_source_content = cloneDeep(source_list['common']);
}
form.value.data_source_content = cloneDeep(source_list['common']);
if (!isEmpty(data)) {
form.value.data_source_content.data_list = [ data ];
}

View File

@ -41,7 +41,7 @@
</el-form-item>
<template v-if="Number(form.data_source_content.data_type) === 0">
<div class="nav-list">
<drag-group :list="form.data_source_content.data_list" :img-params="default_type_data?.appoint_config?.show_data?.data_logo || ''" :title-params="default_type_data?.appoint_config?.show_data?.data_name || 'name'" type="custom" @onsort="data_list_sort" @remove="data_list_remove" @replace="data_list_replace"></drag-group>
<drag-group :list="form.data_source_content.data_list" :img-params="form.show_data?.data_logo || ''" :title-params="form.show_data?.data_name || 'name'" type="custom" @onsort="data_list_sort" @remove="data_list_remove" @replace="data_list_replace"></drag-group>
<el-button class="mt-20 w" @click="add">+</el-button>
</div>
</template>
@ -61,7 +61,7 @@
<Dialog ref="dialog" @accomplish="accomplish">
<div class="flex-row h w">
<!-- 左侧和中间区域 -->
<DragIndex ref="draglist" :key="dragkey" v-model:height="center_height" v-model:width="custom_width" :source-list="!isEmpty(data_source_content_list) ? data_source_content_list[0] : {}" :source-type="form?.data_source || ''" :list="custom_list" @right-update="right_update"></DragIndex>
<DragIndex ref="draglist" :key="dragkey" v-model:height="center_height" v-model:width="custom_width" :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' }" :list="custom_list" @right-update="right_update"></DragIndex>
<!-- 右侧配置区域 -->
<div class="settings">
<template v-if="diy_data.key === 'img'">
@ -87,7 +87,7 @@
</div>
</div>
</Dialog>
<custom-dialog v-model:dialog-visible="url_value_dialog_visible" :data-list-key="form.data_list_key" :config="default_type_data.appoint_config" :multiple="url_value_multiple_bool" @confirm_event="url_value_dialog_call_back"></custom-dialog>
<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>
</template>
<script setup lang="ts">
@ -115,7 +115,7 @@ const dialog = ref<expose | null>(null);
const draglist = ref<diy_data | null>(null);
const form = ref(props.value);
const center_width = ref(props.magicWidth);
//
const custom_width = computed(() => {
// data_source_direction == horizontal
if (form.value.is_custom_data == '1' && form.value.data_source_direction == 'horizontal') {
@ -124,6 +124,44 @@ const custom_width = computed(() => {
return center_width.value;
}
})
//#region
const diy_data = ref<diy>({
key: '',
location: {
x: 0,
y: 0,
record_x: 0,
record_y: 0,
staging_y: 0,
},
com_data: {},
});
const key = ref('');
const dragkey = ref('');
const right_update = (item: any) => {
diy_data.value = item;
// id
key.value = Math.random().toString(36).substring(2);
};
//
const custom_edit = () => {
if (!dialog.value) return;
dialog.value.dialogVisible = true;
dragkey.value = Math.random().toString(36).substring(2);
custom_list = cloneDeep(form.value.custom_list);
center_height.value = cloneDeep(form.value.height);
};
//
const accomplish = () => {
if (!draglist.value) {
return;
} else {
form.value.custom_list = draglist.value.diy_data;
}
form.value.height = center_height.value;
};
//#endregion
//
let custom_list = reactive([]);
const center_height = ref(0);
@ -178,13 +216,14 @@ const data_processing = () => {
//
form.value.is_custom_data = '1';
const custom_config = type_data[0].custom_config;
//
//
default_type_data.value = {
...custom_config,
show_type: custom_config?.show_type || ['vertical', 'vertical-scroll', 'horizontal'],
show_number: custom_config?.show_number || [1, 2, 3, 4],
data_type: custom_config?.data_type || [0, 1],
};
filter_data_handling('old');
default_data();
}
};
@ -222,8 +261,43 @@ const default_data = () => {
form.value.data_source_content.data_type = 0;
}
// id
form.value.data_list_key = default_type_data.value?.appoint_config?.show_data?.data_key || 'id';
form.value.show_data = default_type_data.value?.appoint_config?.show_data || { data_key: 'id', data_name: 'name' };
}
// data_source_content type old new
const filter_data_handling = (type: string = 'old') => {
//
const data_type = default_type_data.value.data_type.length > 0 ? default_type_data.value.data_type[0] : 0;
//
const staging_data : any = {
// id
data_ids: type == 'old' ? form.value.data_source_content?.data_ids ?? [] : [],
//
data_list: type == 'old' ? form.value.data_source_content?.data_list ?? [] : [],
//
data_auto_list: type == 'old' ? form.value.data_source_content?.data_auto_list ?? [] : [],
// 使使
data_type: type == 'old'? (form.value.data_source_content?.data_type ?? data_type) : data_type,
};
// ,
default_type_data.value?.filter_config?.filter_form_config.forEach((item: any) => {
let value : number | string | Array<any> = '';
if (item.type == 'checkbox' || (item.type == 'select' && +item?.config?.is_multiple == 1)) { //
value = item?.config?.default ?? [];
} else if ((item.type == 'input' && item?.config?.type == 'number') || item.type == 'switch') { // /
value = Number(item?.config?.default ?? 0);
} else {
value = item?.config?.default ?? '';
}
// 使
if (type == 'old') {
staging_data[item.form_name] = form.value.data_source_content[item.form_name] == undefined ? value : form.value.data_source_content[item.form_name];
} else {
staging_data[item.form_name] = value;
}
})
//
form.value.data_source_content = staging_data;
};
//
const model_data_source = ref<data_list[]>([]);
const processing_data = (key: string) => {
@ -235,44 +309,6 @@ const processing_data = (key: string) => {
}
};
//#endregion
//#region
const diy_data = ref<diy>({
key: '',
location: {
x: 0,
y: 0,
record_x: 0,
record_y: 0,
staging_y: 0,
},
com_data: {},
});
const key = ref('');
const dragkey = ref('');
const right_update = (item: any) => {
diy_data.value = item;
// id
key.value = Math.random().toString(36).substring(2);
};
//
const custom_edit = () => {
if (!dialog.value) return;
dialog.value.dialogVisible = true;
dragkey.value = Math.random().toString(36).substring(2);
custom_list = cloneDeep(form.value.custom_list);
center_height.value = cloneDeep(form.value.height);
};
//
const accomplish = () => {
if (!draglist.value) {
return;
} else {
form.value.custom_list = draglist.value.diy_data;
}
form.value.height = center_height.value;
};
//#endregion
//#region
//
const url_value_dialog_visible = ref(false);
@ -310,31 +346,8 @@ const changeDataSource = (key: string) => {
};
//
default_data();
//
const staging_data : any = {
// id
data_ids: [],
//
data_list: [],
//
data_auto_list: [],
//
data_type: default_type_data.value.data_type.length > 0 ? default_type_data.value.data_type[0] : 0,
};
// ,
default_type_data.value?.filter_config?.filter_form_config.forEach((item: any) => {
let value : number | string | Array<any> = '';
if (item.type == 'checkbox' || (item.type == 'select' && +item?.config?.is_multiple == 1)) { //
value = item?.config?.default ?? [];
} else if ((item.type == 'input' && item?.config?.type == 'number') || item.type == 'switch') { // /
value = Number(item?.config?.default ?? 0);
} else {
value = item?.config?.default ?? '';
}
staging_data[item.form_name] = value;
})
//
form.value.data_source_content = staging_data;
//
filter_data_handling('new');
}
};
const filter_form_change = (val: any) => {

View File

@ -2,7 +2,7 @@
<template v-if="data_source_content_list.length > 0 && form.data_source_direction == 'vertical'">
<div v-for="(item1, index1) in data_source_content_list" :key="index1" class="oh" :style="style_container">
<div class="w h oh" :style="style_img_container">
<data-rendering :custom-list="form.custom_list" :source-list="item1" :source-type="form?.data_source || ''" :data-height="form.height" :scale="scale"></data-rendering>
<data-rendering :custom-list="form.custom_list" :source-list="item1" :is-custom="form.is_custom_data == '1'" :show-data="form?.show_data || { data_key: 'id', data_name: 'name' }" :data-height="form.height" :scale="scale"></data-rendering>
</div>
</div>
</template>
@ -11,7 +11,7 @@
<swiper-slide v-for="(item1, index1) in data_source_content_list" :key="index1">
<div :style="style_container">
<div class="w h" :style="style_img_container">
<data-rendering :custom-list="form.custom_list" :source-list="item1" :source-type="form?.data_source || ''" :data-height="form.height" :scale="scale"></data-rendering>
<data-rendering :custom-list="form.custom_list" :source-list="item1" :is-custom="form.is_custom_data == '1'" :show-data="form?.show_data || { data_key: 'id', data_name: 'name' }" :data-height="form.height" :scale="scale"></data-rendering>
</div>
</div>
</swiper-slide>

View File

@ -232,7 +232,10 @@ const data_content = {
//
width: 0,
//
data_list_key: '',
show_data: {
data_key: 'id',
data_name: 'name'
},
//
is_custom_data: '0',
// (goods) (article) (brand) (user-info)

View File

@ -78,7 +78,7 @@ interface defaultSearch {
content: {
height: number;
is_custom_data: string;
data_list_key: string;
show_data: object;
data_source: string;
data_source_content: content;
data_source_direction: string;
@ -117,7 +117,10 @@ const defaultSearch: defaultSearch = {
data_auto_list: [],
},
// 手动模式下的唯一标识
data_list_key: '',
show_data: {
data_key: 'id',
data_name: 'name'
},
// 是否是自定义数据类型
is_custom_data: '0',
// 数据源类型 商品(goods) 文章(article) 品牌(brand) 用户信息(user-info)

View File

@ -337,13 +337,13 @@ const save_formmat_form_data = (data: diy_data_item, close: boolean = false, is_
if (item1.data_content.is_custom_data == '1' && item1.data_content.data_source_content.data_type === 0) {
const data_list = cloneDeep(item1.data_content.data_source_content.data_list);
// ,id
item1.data_content.data_source_content.data_ids = data_list.map((item4: any) => item4.data[item1.data_content?.data_list_key || 'id']).join(',') || '';
item1.data_content.data_source_content.data_ids = data_list.map((item4: any) => item4.data[item1.data_content?.show_data.data_key || 'id']).join(',') || '';
// ,data
item1.data_content.data_source_content.data_list = data_list.map((item5: any) => {
return {
...item5,
data: [],
data_id: item5.data[item1.data_content?.data_list_key || 'id'],
data_id: item5.data[item1.data_content?.show_data.data_key || 'id'],
};
});
} else {
@ -379,13 +379,13 @@ const save_formmat_form_data = (data: diy_data_item, close: boolean = false, is_
//
const data_list = cloneDeep(item.com_data.content.data_source_content.data_list);
// ,id
item.com_data.content.data_source_content.data_ids = data_list.map((list_item: any) => list_item.data[item.com_data.content?.data_list_key || 'id'] || '').join(',') || '';
item.com_data.content.data_source_content.data_ids = data_list.map((list_item: any) => list_item.data[item.com_data.content?.show_data.data_key || 'id'] || '').join(',') || '';
// ,data
item.com_data.content.data_source_content.data_list = data_list.map((list_item: any) => {
return {
...list_item,
data: [],
data_id: list_item.data[item.data_content?.data_list_key || 'id'],
data_id: list_item.data[item.data_content?.show_data.data_key || 'id'],
};
});
} else {