修改回显问题
于肖磊
parent
45a03d6042
commit
eb8c03d23c
|
|
@ -9,7 +9,7 @@
|
|||
</el-select>
|
||||
<div v-if="!isEmpty(form.source_list)" class="flex-row mt-20 gap-20">
|
||||
<div class="re flex align-c">
|
||||
<image-empty v-model="form.source_list[img_key]" style="width: 10rem; height: 10rem;"></image-empty>
|
||||
<image-empty v-model="form.source_list[form.img_key]" style="width: 10rem; height: 10rem;"></image-empty>
|
||||
<div class="plr-15 bg-f abs replace-data size-14" @click="replace_data">替换数据</div>
|
||||
</div>
|
||||
<div class="flex-1 size-14 text-line-3">{{ form.source_list.title || form.source_list.name }}</div>
|
||||
|
|
@ -40,7 +40,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</Dialog>
|
||||
<url-value-dialog v-model:dialog-visible="url_value_dialog_visible" :type="dialog_type" @update:model-value="url_value_dialog_call_back" @close="url_value_close"></url-value-dialog>
|
||||
<url-value-dialog v-model:dialog-visible="url_value_dialog_visible" :type="[ form.data_source ]" @update:model-value="url_value_dialog_call_back" @close="url_value_close"></url-value-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
|
|
@ -81,6 +81,8 @@ const getCustominit = () => {
|
|||
const { data_source } = res.data;
|
||||
options.value = data_source;
|
||||
data_source_store.set_data_source(data_source);
|
||||
// 数据处理
|
||||
processing_data(form.data_source);
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -95,6 +97,7 @@ onBeforeMount(() => {
|
|||
}
|
||||
});
|
||||
// 处理显示的图片和传递到下去的数据结构
|
||||
const model_data_source = ref<data_list[]>([])
|
||||
const processing_data = (key: string) => {
|
||||
const list = options.value.filter(item => item.type == key);
|
||||
if (list.length > 0) {
|
||||
|
|
@ -103,14 +106,11 @@ const processing_data = (key: string) => {
|
|||
const field_list = list[0].data.filter(item => item.type == 'images');
|
||||
// 取出图片的key
|
||||
if (field_list.length > 0) {
|
||||
img_key.value = field_list[0].field;
|
||||
form.img_key = field_list[0].field;
|
||||
}
|
||||
} else {
|
||||
model_data_source.value = [];
|
||||
}
|
||||
if (!isEmpty(key)) {
|
||||
dialog_type.value = [ key ];
|
||||
}
|
||||
};
|
||||
//#endregion
|
||||
//#region 自定义编辑的内部处理逻辑
|
||||
|
|
@ -152,9 +152,6 @@ const accomplish = () => {
|
|||
};
|
||||
//#endregion
|
||||
//#region 数据源更新逻辑处理
|
||||
const model_data_source = ref<data_list[]>([])
|
||||
const dialog_type = ref<string[]>([]);
|
||||
const img_key = ref('');
|
||||
// 打开弹出框
|
||||
const url_value_dialog_visible = ref(false);
|
||||
const changeDataSource = (key: string) => {
|
||||
|
|
@ -181,7 +178,7 @@ const url_value_close = () => {
|
|||
}
|
||||
// 替换数据
|
||||
const replace_data = () => {
|
||||
if (!isEmpty(dialog_type.value)) {
|
||||
if (!isEmpty(form.data_source)) {
|
||||
url_value_dialog_visible.value = true;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -149,6 +149,57 @@ const percentage = (num: number) => {
|
|||
};
|
||||
//#endregion
|
||||
//#region 组装页面显示的数据
|
||||
// 指示器的样式
|
||||
const indicator_style = (item: any) => {
|
||||
let styles = '';
|
||||
if (!isEmpty(item.indicator_radius)) {
|
||||
styles += radius_computer(item.indicator_radius)
|
||||
}
|
||||
const size = item?.indicator_size || 5;
|
||||
if (item.indicator_style == 'num') {
|
||||
styles += `color: ${item?.color || '#DDDDDD'};`;
|
||||
styles += `font-size: ${size}px;`;
|
||||
} else if (item.indicator_style == 'elliptic') {
|
||||
styles += `background: ${item?.color || '#DDDDDD'};`;
|
||||
styles += `width: ${size * 3}px; height: ${size}px;`;
|
||||
} else {
|
||||
styles += `background: ${item?.color || '#DDDDDD'};`;
|
||||
styles += `width: ${size}px; height: ${size}px;`;
|
||||
}
|
||||
return styles;
|
||||
};
|
||||
const background_style = (item: any) => {
|
||||
return gradient_computer(item) + background_computer(item);
|
||||
};
|
||||
const style_actived_color = (item: any, index: number) => {
|
||||
return item.actived_index == index ? `background: ${ item.data_style.actived_color };` : ''
|
||||
}
|
||||
/*
|
||||
** 组装产品的数据
|
||||
** @param {Array} list 商品列表
|
||||
** @param {Number} num 显示数量
|
||||
** @return {Array}
|
||||
*/
|
||||
const commodity_list = (list: any[], num: number) => {
|
||||
if (list.length > 0) {
|
||||
// 深拷贝一下，确保不会出现问题
|
||||
const goods_list = cloneDeep(list).map((item: any) => ({
|
||||
...item.data,
|
||||
title: !isEmpty(item.new_title) ? item.new_title : item.data.title,
|
||||
new_cover: item.new_cover,
|
||||
}));
|
||||
// 存储数据显示
|
||||
let nav_list = [];
|
||||
// 拆分的数量
|
||||
const split_num = Math.ceil(goods_list.length / num);
|
||||
for (let i = 0; i < split_num; i++) {
|
||||
nav_list.push({ split_list: goods_list.slice(i * num, (i + 1) * num) });
|
||||
}
|
||||
return nav_list;
|
||||
} else {
|
||||
return [];
|
||||
}
|
||||
}
|
||||
const old_list = ref<any>({});
|
||||
const data_magic_list = ref<data_magic[]>([]);
|
||||
watch(props.value.content, (val) => {
|
||||
|
|
@ -195,33 +246,7 @@ watch(props.value.content, (val) => {
|
|||
}
|
||||
});
|
||||
data_magic_list.value = data;
|
||||
})
|
||||
|
||||
const background_style = (item: any) => {
|
||||
return gradient_computer(item) + background_computer(item);
|
||||
};
|
||||
// 指示器的样式
|
||||
const indicator_style = (item: any) => {
|
||||
let indicator_styles = '';
|
||||
if (!isEmpty(item.indicator_radius)) {
|
||||
indicator_styles += radius_computer(item.indicator_radius)
|
||||
}
|
||||
const size = item?.indicator_size || 5;
|
||||
if (item.indicator_style == 'num') {
|
||||
indicator_styles += `color: ${item?.color || '#DDDDDD'};`;
|
||||
indicator_styles += `font-size: ${size}px;`;
|
||||
} else if (item.indicator_style == 'elliptic') {
|
||||
indicator_styles += `background: ${item?.color || '#DDDDDD'};`;
|
||||
indicator_styles += `width: ${size * 3}px; height: ${size}px;`;
|
||||
} else {
|
||||
indicator_styles += `background: ${item?.color || '#DDDDDD'};`;
|
||||
indicator_styles += `width: ${size}px; height: ${size}px;`;
|
||||
}
|
||||
return indicator_styles;
|
||||
};
|
||||
const style_actived_color = (item: any, index: number) => {
|
||||
return item.actived_index == index ? `background: ${ item.data_style.actived_color };` : ''
|
||||
}
|
||||
}, {immediate: true, deep: true})
|
||||
//#endregion
|
||||
const carousel_change = (index: number, key: number) => {
|
||||
if (data_magic_list.value[key]) {
|
||||
|
|
@ -235,32 +260,7 @@ const trends_config = (style: any, key: string) => {
|
|||
const text_style = (typeface: string, size: number, color: string) => {
|
||||
return `font-weight:${ typeface }; font-size: ${ size }px; color: ${ color };`;
|
||||
}
|
||||
/*
|
||||
** 组装产品的数据
|
||||
** @param {Array} list 商品列表
|
||||
** @param {Number} num 显示数量
|
||||
** @return {Array}
|
||||
*/
|
||||
const commodity_list = (list: any[], num: number) => {
|
||||
if (list.length > 0) {
|
||||
// 深拷贝一下，确保不会出现问题
|
||||
const goods_list = cloneDeep(list).map((item: any) => ({
|
||||
...item.data,
|
||||
title: !isEmpty(item.new_title) ? item.new_title : item.data.title,
|
||||
new_cover: item.new_cover,
|
||||
}));
|
||||
// 存储数据显示
|
||||
let nav_list = [];
|
||||
// 拆分的数量
|
||||
const split_num = Math.ceil(goods_list.length / num);
|
||||
for (let i = 0; i < split_num; i++) {
|
||||
nav_list.push({ split_list: goods_list.slice(i * num, (i + 1) * num) });
|
||||
}
|
||||
return nav_list;
|
||||
} else {
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
// 不属于第9个，并且第9个的第一个和第二个
|
||||
const spacing_processing = (index: number) => {
|
||||
return form.value.style_actived !== 8 || (form.value.style_actived === 8 && [0, 1].includes(index))
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div class="auxiliary-line common-content-height">
|
||||
<el-form :model="form" label-width="60">
|
||||
<el-form :model="form" label-width="80">
|
||||
<card-container class="mb-8">
|
||||
<div class="mb-12">展示风格</div>
|
||||
<el-form-item label="选择风格">
|
||||
|
|
|
|||
|
|
@ -2,8 +2,8 @@
|
|||
<div class="w">
|
||||
<el-form :model="form" label-width="70">
|
||||
<card-container class="mb-8">
|
||||
<div class="mb-12">图片魔方</div>
|
||||
<el-form-item label="图片间距">
|
||||
<div class="mb-12">数据魔方</div>
|
||||
<el-form-item label="数据间距">
|
||||
<slider v-model="form.image_spacing" :max="100"></slider>
|
||||
</el-form-item>
|
||||
<el-form-item label="数据圆角">
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ import defaultCommon from "./index";
|
|||
interface defaultSearch {
|
||||
content: {
|
||||
height: number;
|
||||
img_key: string;
|
||||
data_source: string;
|
||||
source_list: string[];
|
||||
custom_list: string[];
|
||||
|
|
@ -14,6 +15,7 @@ interface defaultSearch {
|
|||
const defaultSearch: defaultSearch = {
|
||||
content: {
|
||||
height: 390,
|
||||
img_key: '',
|
||||
source_list: [],
|
||||
data_source:'',
|
||||
custom_list: []
|
||||
|
|
|
|||
Loading…
Reference in New Issue