修改自定义数据的处理
parent
363c61bf3f
commit
6418ff7513
|
|
@ -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',
|
||||
})
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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];
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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];
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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 ];
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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) => {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
Loading…
Reference in New Issue