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

数据选项卡问题修复，新增内容区域字段

v1.2.0
于肖磊 2025-02-07 11:52:51 +08:00
parent c7d110774a
commit a70b8cca3c
7 changed files with 107 additions and 412 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

195
src/components/common/data-tabs-common/data-article-content.vue
View File

@ -1,195 +0,0 @@
<template>
<card-container class="card-container">
<div class="mb-12">展示设置</div>
<el-form-item label="选择风格">
<el-radio-group v-model="form.theme" @change="theme_change">
<el-radio v-for="item in base_list.theme_list" :key="item.value" :value="item.value">{{ item.name }}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item v-if="form.theme == '4'" label="轮播列数">
<el-radio-group v-model="form.carousel_col">
<el-radio v-for="item in base_list.carousel_col_list" :key="item.value" :value="item.value">{{ item.name }}</el-radio>
</el-radio-group>
</el-form-item>
</card-container>
<div class="divider-line data-tabs-line"></div>
<card-container class="card-container">
<div class="mb-12">列表设置</div>
<el-form-item label="是否显示">
<el-checkbox-group v-model="form.field_show">
<el-checkbox v-for="item in base_list.field_show_list" :key="item.value" :value="item.value">{{ item.name }}</el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item v-if="form.field_show.includes('2')" label="描述行数">
<el-radio-group v-model="form.field_desc_row">
<el-radio v-for="item in base_list.field_desc_row" :key="item.value" :value="item.value">{{ item.name }}</el-radio>
</el-radio-group>
</el-form-item>
<template v-if="form.theme == '4'">
<el-form-item label="标题浮起">
<el-switch v-model="form.name_float" active-value="1" inactive-value="0" @change="switch_chage"></el-switch>
</el-form-item>
</template>
</card-container>
<div class="divider-line data-tabs-line"></div>
<card-container class="card-container">
<div class="mb-12">角标设置</div>
<!-- 角标设置 -->
<subscript-content :value="form"></subscript-content>
</card-container>
<div class="divider-line data-tabs-line"></div>
<!-- 数据筛选组件, 根据数据源类型显示不同的筛选组件 -->
<data-filter type="article" :value="form" :list="form.data_list" :base-list="base_list" @add="add" @data_list_replace="data_list_replace" @data_list_remove="data_list_remove" @data_list_sort="data_list_sort"></data-filter>
<url-value-dialog v-model:dialog-visible="url_value_dialog_visible" :type="['article']" :multiple="url_value_multiple_bool" @update:model-value="url_value_dialog_call_back"></url-value-dialog>
</template>
<script lang="ts" setup>
import { get_math } from '@/utils';
const props = defineProps({
value: {
type: Object,
default: () => ({}),
},
tabStyle: {
type: Object,
default: () => ({}),
},
defaultConfig: {
type: Object,
default: () => ({
// 图片不同风格下的圆角
img_radius_0: 4,
img_radius_1: 0,
}),
},
});
const base_list = reactive({
theme_list: [
{ name: '单列展示', value: '0', width:110, height: 83 },
{ name: '两列展示（纵向）', value: '1', width:180, height: 180 },
{ name: '大图展示', value: '2', width:0, height: 180 },
{ name: '无图模式', value: '3', width:0, height: 0 },
{ name: '左右滑动展示', value: '4', width:0, height: 0 },
],
carousel_col_list: [
{ name: '单列展示', value: '0' },
{ name: '两列展示', value: '1' },
{ name: '三列展示', value: '2' },
{ name: '四列展示', value: '3' },
],
data_type_list: [
{ name: '选择文章', value: '0' },
{ name: '筛选文章', value: '1' },
],
field_show_list: [
{ name: '文章标题', value: '3' },
{ name: '日期时间', value: '0' },
{ name: '浏览量', value: '1' },
{ name: '描述', value: '2' },
],
field_desc_row: [
{ name: '一行', value: '1' },
{ name: '两行', value: '2' }
]
});
// 默认值
const state = reactive({
form: props.value,
data: props.tabStyle,
});
// 如果需要解构，确保使用toRefs
const { form, data } = toRefs(state);
watch(() => props.value, (value) => {
form.value = value;
},{deep: true, immediate: true });
watch(() => props.tabStyle, (value) => {
data.value = value;
},{deep: true, immediate: true });
// 主题改变
const theme_change = (val: any) => {
if (val == '3' || val == '4') {
form.value.field_show = ['1', '3'];
} else {
form.value.field_show = ['0', '1', '3'];
}
if (val == '0') {
if (data.value.img_radius.radius == props.defaultConfig.img_radius_0 || (data.value.img_radius.radius_bottom_left == props.defaultConfig.img_radius_1 && data.value.img_radius.radius_bottom_right == props.defaultConfig.img_radius_1 && data.value.img_radius.radius_top_left == props.defaultConfig.img_radius_1 && data.value.img_radius.radius_top_right == props.defaultConfig.img_radius_1)) {
data.value.img_radius.radius = props.defaultConfig.img_radius_0;
data.value.img_radius.radius_bottom_left = props.defaultConfig.img_radius_0;
data.value.img_radius.radius_bottom_right = props.defaultConfig.img_radius_0;
data.value.img_radius.radius_top_left = props.defaultConfig.img_radius_0;
data.value.img_radius.radius_top_right = props.defaultConfig.img_radius_0;
}
} else {
if (data.value.img_radius.radius == props.defaultConfig.img_radius_0 || (data.value.img_radius.radius_bottom_left == props.defaultConfig.img_radius_1 && data.value.img_radius.radius_bottom_right == props.defaultConfig.img_radius_1 && data.value.img_radius.radius_top_left == props.defaultConfig.img_radius_1 && data.value.img_radius.radius_top_right == props.defaultConfig.img_radius_1)) {
data.value.img_radius.radius = props.defaultConfig.img_radius_1;
data.value.img_radius.radius_bottom_left = props.defaultConfig.img_radius_1;
data.value.img_radius.radius_bottom_right = props.defaultConfig.img_radius_1;
data.value.img_radius.radius_top_left = props.defaultConfig.img_radius_1;
data.value.img_radius.radius_top_right = props.defaultConfig.img_radius_1;
}
}
// 切换风格时，将对应图片的默认值宽度和高度赋值
const list = base_list.theme_list.filter(item => item.value == form.value.theme);
if (list.length > 0) {
data.value.style.content_img_width = list[0].width;
data.value.style.content_img_height = list[0].height;
}
};
// 移除
const data_list_remove = (index: number) => {
form.value.data_list.splice(index, 1);
};
const url_value_multiple_bool = ref(true);
const data_list_replace_index = ref(0);
// 替换
const data_list_replace = (index: number) => {
data_list_replace_index.value = index;
url_value_multiple_bool.value = false;
url_value_dialog_visible.value = true;
};
// 拖动排序
const data_list_sort = (item: any) => {
form.value.data_list = item;
};
// 新增
const add = () => {
url_value_multiple_bool.value = true;
url_value_dialog_visible.value = true;
};
// 开启关闭链接
const url_value_dialog_visible = ref(false);
const url_value_dialog_call_back = (item: any[]) => {
if (url_value_multiple_bool.value) {
item.forEach((child: any) => {
form.value.data_list.push({
id: get_math(),
new_title: '',
new_cover: [],
data: child,
});
});
} else {
form.value.data_list[data_list_replace_index.value] = {
id: get_math(),
new_title: '',
new_cover: form.value.data_list[data_list_replace_index.value]?.new_cover || [],
data: item[0],
};
}
};
// 标题浮起之后文章标题的颜色和字体更新
const switch_chage = (val: string | number | boolean) => {
if (val == '1') {
data.value.name_color = '#fff';
data.value.name_weight = '400';
} else {
data.value.name_color = '#333';
data.value.name_weight = 'bold';
}
};
</script>

1
src/components/common/data-tabs-common/data-custom-content.vue
View File

@ -68,7 +68,6 @@
</card-container>
</template>
</template>
<div class="divider-line data-tabs-line"></div>
<el-button class="w custom-button size-14" size="large" @click="custom_edit('custom')"><icon name="edit" size="14"></icon>自定义编辑</el-button>
</el-form>
<!-- 自定义内容处理 -->

168
src/components/common/data-tabs-common/data-goods-content.vue
View File

@ -1,168 +0,0 @@
<template>
<card-container class="card-container">
<el-form-item label="商品风格">
<el-radio-group v-model="form.theme" @change="change_style">
<el-radio v-for="item in base_list.product_style_list" :key="item.value" :value="item.value">{{ item.name }}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item v-if="form.theme == '5'" label="轮播列数">
<el-radio-group v-model="form.carousel_col">
<el-radio :value="1">单列展示</el-radio>
<el-radio :value="2">两列展示</el-radio>
<el-radio :value="3">三列展示</el-radio>
<el-radio :value="4">四列展示</el-radio>
</el-radio-group>
</el-form-item>
</card-container>
<div class="divider-line data-tabs-line"></div>
<!-- 商品显示的配置信息 -->
<product-show-config :value="form" @change_shop_type="change_shop_type"></product-show-config>
<div class="divider-line data-tabs-line"></div>
<card-container class="card-container">
<div class="mb-12">角标设置</div>
<!-- 角标设置 -->
<subscript-content :value="form"></subscript-content>
</card-container>
<div class="divider-line data-tabs-line"></div>
<!-- 数据筛选组件, 根据数据源类型显示不同的筛选组件 -->
<data-filter type="goods" :value="form" :list="form.data_list" :base-list="base_list" @add="product_add" @data_list_replace="data_list_replace" @data_list_remove="goods_list_remove" @data_list_sort="goods_list_sort"></data-filter>
<url-value-dialog v-model:dialog-visible="url_value_dialog_visible" :type="['goods']" :multiple="url_value_multiple_bool" @update:model-value="url_value_dialog_call_back"></url-value-dialog>
</template>
<script lang="ts" setup>
import { get_math } from '@/utils';
const props = defineProps({
value: {
type: Object,
default: () => ({}),
},
tabStyle: {
type: Object,
default: () => ({}),
},
defaultConfig: {
type: Object,
default: () => ({
// 图片不同风格下的圆角
img_radius_0: 4,
img_radius_1: 0,
}),
},
});
const base_list = reactive({
product_style_list: [
{ name: '单列展示', value: '0', width: 110, height: 120 },
{ name: '大图展示', value: '2', width: 166, height: 166 },
{ name: '无图模式', value: '6', width: 0, height: 0 },
{ name: '两列展示(纵向)', value: '1', width: 180, height: 180 },
{ name: '两列展示(横向)', value: '4', width: 70, height: 70 },
{ name: '三列展示', value: '3', width: 116, height: 114 },
{ name: '左右滑动展示', value: '5', width: 0, height: 0 },
],
product_list: [
{ name: '指定商品', value: '0' },
{ name: '筛选商品', value: '1' },
],
});
const state = reactive({
form: props.value,
styles: props.tabStyle,
});
// 如果需要解构，确保使用toRefs
const { form, styles } = toRefs(state);
watch(() => props.value, (value) => {
form.value = value;
},{deep: true, immediate: true });
watch(() => props.tabStyle, (value) => {
styles.value = value;
},{deep: true, immediate: true });
const is_revise = ref(false);
const change_shop_type = () => {
is_revise.value = true;
};
// 选择某些风格时， 切换到对应的按钮
const change_style = (val: any): void => {
form.value.theme = val;
if (!is_revise.value) {
if (['3', '4', '5'].includes(val) && form.value.shop_type == 'text') {
form.value.shop_type = 'icon';
} else if (['0', '1', '2'].includes(val) && form.value.shop_type == 'icon') {
form.value.shop_type = 'text';
}
}
if (['0', '4'].includes(val)) {
if (styles.value.shop_img_radius.radius == props.defaultConfig.img_radius_0 || (styles.value.shop_img_radius.radius_bottom_left == props.defaultConfig.img_radius_1 && styles.value.shop_img_radius.radius_bottom_right == props.defaultConfig.img_radius_1 && styles.value.shop_img_radius.radius_top_left == props.defaultConfig.img_radius_1 && styles.value.shop_img_radius.radius_top_right == props.defaultConfig.img_radius_1)) {
styles.value.shop_img_radius.radius = props.defaultConfig.img_radius_0;
styles.value.shop_img_radius.radius_bottom_left = props.defaultConfig.img_radius_0;
styles.value.shop_img_radius.radius_bottom_right = props.defaultConfig.img_radius_0;
styles.value.shop_img_radius.radius_top_left = props.defaultConfig.img_radius_0;
styles.value.shop_img_radius.radius_top_right = props.defaultConfig.img_radius_0;
}
} else {
if (styles.value.shop_img_radius.radius == props.defaultConfig.img_radius_0 || (styles.value.shop_img_radius.radius_bottom_left == props.defaultConfig.img_radius_1 && styles.value.shop_img_radius.radius_bottom_right == props.defaultConfig.img_radius_1 && styles.value.shop_img_radius.radius_top_left == props.defaultConfig.img_radius_1 && styles.value.shop_img_radius.radius_top_right == props.defaultConfig.img_radius_1)) {
styles.value.shop_img_radius.radius = props.defaultConfig.img_radius_1;
styles.value.shop_img_radius.radius_bottom_left = props.defaultConfig.img_radius_1;
styles.value.shop_img_radius.radius_bottom_right = props.defaultConfig.img_radius_1;
styles.value.shop_img_radius.radius_top_left = props.defaultConfig.img_radius_1;
styles.value.shop_img_radius.radius_top_right = props.defaultConfig.img_radius_1;
}
}
// 切换风格时，将对应图片的默认值宽度和高度赋值
const list = base_list.product_style_list.filter(item => item.value == form.value.theme);
if (list.length > 0) {
styles.value.content_img_width = list[0].width;
styles.value.content_img_height = list[0].height;
}
};
const url_value_multiple_bool = ref(true);
const data_list_replace_index = ref(0);
const data_list_replace = (index: number) => {
data_list_replace_index.value = index;
url_value_multiple_bool.value = false;
url_value_dialog_visible.value = true;
};
const product_add = () => {
url_value_multiple_bool.value = true;
url_value_dialog_visible.value = true;
};
// 打开弹出框
const url_value_dialog_visible = ref(false);
// 弹出框选择的内容
const url_value_dialog_call_back = (item: any[]) => {
if (url_value_multiple_bool.value) {
item.forEach((item: any) => {
form.value.data_list.push({
id: get_math(),
new_cover: [],
new_title: '',
data: item,
});
});
} else {
form.value.data_list[data_list_replace_index.value] = {
id: get_math(),
new_cover: form.value.data_list[data_list_replace_index.value]?.new_cover || [],
new_title: '',
data: item[0],
};
}
};
// 指定商品
const goods_list_remove = (index: number) => {
form.value.data_list.splice(index, 1);
};
const goods_list_sort = (item: any) => {
form.value.data_list = item;
};
</script>
<style lang="scss" scoped>
</style>

20
src/components/model-data-tabs/index.vue
View File

@ -9,10 +9,18 @@
<div class="oh" :style="data_container">
<div class="oh" :style="data_img_container">
<template v-if="tabs_data_type == 'goods'">
<div class="oh" :style="data_content_container">
<div class="oh" :style="data_content_img_container">
<model-goods-list :value="tabs_list" :is-common-style="false"></model-goods-list>
</div>
</div>
</template>
<template v-else-if="tabs_data_type == 'article'">
<div class="oh" :style="data_content_container">
<div class="oh" :style="data_content_img_container">
<model-article-list :value="tabs_list" :is-common-style="false"></model-article-list>
</div>
</div>
</template>
<template v-else-if="tabs_data_type == 'custom'">
<model-custom :value="tabs_list" :outer_container_padding="outer_container_width" :is-common-style="false"></model-custom>
@ -25,6 +33,7 @@
<script setup lang="ts">
import { background_computer, border_computer, box_shadow_computer, common_img_computer, common_styles_computer, gradient_computer, margin_computer, padding_computer, radius_computer } from '@/utils';
import { cloneDeep } from 'lodash';
import { data_content_style } from '@/config/const/data-tabs';
const props = defineProps({
value: {
@ -48,6 +57,9 @@ const data_container = ref('');
const data_img_container = ref('');
// 外层容器的间距
const outer_container_width = ref(0);
// 数据内容样式
const data_content_container = ref('');
const data_content_img_container = ref('');
watch(
() => props.value,
(val) => {
@ -81,8 +93,16 @@ watch(
tabs_data_type.value = tabs_data_list?.tabs_data_type || '';
if (tabs_data_list.tabs_data_type === 'goods') {
tabs_list.value = tabs_data_list.goods_config;
const new_style = tabs_data_list.goods_config.style;
// 内容样式
data_content_container.value = common_styles_computer(new_style?.data_content_style || data_content_style);
data_content_img_container.value = common_img_computer(new_style?.data_content_style || data_content_style);
} else if (tabs_data_list.tabs_data_type === 'article') {
tabs_list.value = tabs_data_list.article_config;
const new_style = tabs_data_list.article_config.style;
// 内容样式
data_content_container.value = common_styles_computer(new_style?.data_content_style || data_content_style);
data_content_img_container.value = common_img_computer(new_style?.data_content_style || data_content_style);
} else if (tabs_data_list.tabs_data_type === 'custom') {
tabs_list.value = tabs_data_list.custom_config;
}

20
src/components/model-data-tabs/model-data-tabs-content.vue
View File

@ -71,10 +71,10 @@
</el-tab-pane>
<el-tab-pane label="样式设置" name="styles">
<div v-show="row.tabs_data_type == 'goods'" class="data-tabs-style">
<model-goods-list-styles :value="row.goods_config.style" :content="row.goods_config.content" :is-common-style="false"></model-goods-list-styles>
<data-goods-styles :value="row.goods_config.style" :content="row.goods_config.content"></data-goods-styles>
</div>
<div v-show="row.tabs_data_type == 'article'" class="data-tabs-style">
<model-article-list-styles :value="row.article_config.style" :content="row.article_config.content" :is-common-style="false" />
<data-article-styles :value="row.article_config.style" :content="row.article_config.content"></data-article-styles>
</div>
<div v-show="row.tabs_data_type == 'custom'" class="data-tabs-style">
<model-custom-styles :value="row.custom_config.style" :content="row.custom_config.content" :is-common-style="false"></model-custom-styles>
@ -97,7 +97,9 @@
</div>
</template>
<script setup lang="ts">
import { isEmpty } from 'lodash';
import { cloneDeep } from 'lodash';
import { article_default_parameter, goods_default_parameter } from "@/config/const/data-tabs";
import defaultCustom from '@/config/const/custom';
import { get_math, tabs_style } from '@/utils';
import { commonStore } from '@/store';
const common_store = commonStore();
@ -170,13 +172,11 @@ const tabs_add = () => {
title: '',
img: [],
desc: '',
data_type: '0',
category: [],
data_ids: [],
number: 4,
order_by_type: '0',
order_by_rule: '0',
data_list: [],
tabs_data_type: 'goods',
tabs_name: 'content',
goods_config: cloneDeep(goods_default_parameter),
article_config: cloneDeep(article_default_parameter),
custom_config: cloneDeep(defaultCustom)
});
form.value.tabs_active_index = form.value.tabs_list.length - 1;
};

68
src/config/const/data-tabs.ts
View File

@ -75,6 +75,66 @@ interface DefaultProductList {
common_style: object;
};
}
// 内容区域的参数
export const data_content_style = {
color_list: [{ color: '', color_percentage: undefined }],
direction: '180deg',
background_img_style: '2',
background_img: [],
radius: 0,
radius_top_left: 0,
radius_top_right: 0,
radius_bottom_left: 0,
radius_bottom_right: 0,
padding: 0,
padding_top: 0,
padding_bottom: 0,
padding_left: 0,
padding_right: 0,
margin: 0,
margin_top: 0,
margin_bottom: 0,
margin_left: 0,
margin_right: 0,
// 边框样式
border_is_show: '0',
border_color: '#FF3F3F',
border_style: 'solid',
border_size: {
padding: 1,
padding_top: 1,
padding_right: 1,
padding_bottom: 1,
padding_left: 1,
},
// 阴影
box_shadow_color: '',
box_shadow_x: 0,
box_shadow_y: 0,
box_shadow_blur: 0,
box_shadow_spread: 0,
};
export const goods_default_parameter = {
content: {
...cloneDeep(defaultGoodsList.content),
},
style: {
...cloneDeep(defaultGoodsList.style),
data_content_style: cloneDeep(data_content_style)
}
}
export const article_default_parameter = {
content: {
...cloneDeep(defaultArticleList.content),
},
style: {
...cloneDeep(defaultArticleList.style),
data_content_style: cloneDeep(data_content_style)
}
}
const defaultProductList: DefaultProductList = {
content: {
content_top: {
@ -89,10 +149,10 @@ const defaultProductList: DefaultProductList = {
tabs_top_up: '0',
// 选项卡数据
tabs_list: [
{ id: '1', tabs_type: '0', tabs_img: [], tabs_icon: '', title: '热门推荐', img: [], desc: '简介', data_type: '0', tabs_data_type: 'goods', tabs_name: 'content', goods_config: cloneDeep(defaultGoodsList), article_config: cloneDeep(defaultArticleList), custom_config: cloneDeep(defaultCustom) },
{ id: '2', tabs_type: '0', tabs_img: [], tabs_icon: '', title: '测试一', img: [], desc: '简介', data_type: '0', tabs_data_type: 'goods', tabs_name: 'content', goods_config: cloneDeep(defaultGoodsList), article_config: cloneDeep(defaultArticleList), custom_config: cloneDeep(defaultCustom) },
{ id: '3', tabs_type: '0', tabs_img: [], tabs_icon: '', title: '测试二', img: [], desc: '简介', data_type: '0', tabs_data_type: 'goods', tabs_name: 'content', goods_config: cloneDeep(defaultGoodsList), article_config: cloneDeep(defaultArticleList), custom_config: cloneDeep(defaultCustom) },
{ id: '4', tabs_type: '0', tabs_img: [], tabs_icon: '', title: '测试三', img: [], desc: '简介', data_type: '0', tabs_data_type: 'goods', tabs_name: 'content', goods_config: cloneDeep(defaultGoodsList), article_config: cloneDeep(defaultArticleList), custom_config: cloneDeep(defaultCustom) },
{ id: '1', tabs_type: '0', tabs_img: [], tabs_icon: '', title: '热门推荐', img: [], desc: '简介', data_type: '0', tabs_data_type: 'goods', tabs_name: 'content', goods_config: cloneDeep(goods_default_parameter), article_config: cloneDeep(article_default_parameter), custom_config: cloneDeep(defaultCustom) },
{ id: '2', tabs_type: '0', tabs_img: [], tabs_icon: '', title: '测试一', img: [], desc: '简介', data_type: '0', tabs_data_type: 'goods', tabs_name: 'content', goods_config: cloneDeep(goods_default_parameter), article_config: cloneDeep(article_default_parameter), custom_config: cloneDeep(defaultCustom) },
{ id: '3', tabs_type: '0', tabs_img: [], tabs_icon: '', title: '测试二', img: [], desc: '简介', data_type: '0', tabs_data_type: 'goods', tabs_name: 'content', goods_config: cloneDeep(goods_default_parameter), article_config: cloneDeep(article_default_parameter), custom_config: cloneDeep(defaultCustom) },
{ id: '4', tabs_type: '0', tabs_img: [], tabs_icon: '', title: '测试三', img: [], desc: '简介', data_type: '0', tabs_data_type: 'goods', tabs_name: 'content', goods_config: cloneDeep(goods_default_parameter), article_config: cloneDeep(article_default_parameter), custom_config: cloneDeep(defaultCustom) },
],
// 选中的内容索引
tabs_active_index: 0,

41
src/views/layout/index.vue
View File

@ -23,6 +23,8 @@ import { Settings, AppMain } from './components/index';
import defaultSettings from './components/main/index';
import defaultConfigSetting from '@/config/setting';
import defaultConfigConst from '@/config/const/index';
import { article_default_parameter, goods_default_parameter } from '@/config/const/data-tabs';
import defaultCustom from '@/config/const/custom';
import { cloneDeep, isEmpty, omit } from 'lodash';
import DiyAPI, { diyData, headerAndFooter, diyConfig } from '@/api/diy';
import CommonAPI from '@/api/common';
@ -326,20 +328,22 @@ const save_formmat_form_data = (data: diy_data_item, close: boolean = false, is_
} else if (new_array_6.includes(item.key)) {
item.com_data.content.nav_content_list = item.com_data.content.nav_content_list.map((item0: any) => ({...omit(item0, 'tabs_name') }));
} else if (['data-tabs'].includes(item.key)) {
item.com_data.content.tabs_active_index = 0;
const new_tabs_list = item?.com_data?.content?.tabs_list || [];
new_tabs_list.forEach((item: any) => {
item.tabs_name = 'content';
if (item.tabs_data_type == 'goods' || item.tabs_data_type == 'article') {
const new_com_data = item.tabs_data_type == 'goods' ? item.goods_config : item.article_config;
// 商品或文章的数据处理
goods_or_article_data_processing(new_com_data.content, item.tabs_data_type == 'goods');
// 是商品的时候需要将其他的两个数据清楚掉，避免下次切换时出现问题
if (item.tabs_data_type == 'goods') {
goods_or_article_data_clear(item.article_config.content, false);
clear_custom_data(item.custom_config.content);
item.article_config = cloneDeep(article_default_parameter);
item.custom_config = cloneDeep(defaultCustom)
} else {
// 是文章时清除掉其他的内容
goods_or_article_data_clear(item.goods_config.content, true);
clear_custom_data(item.custom_config.content);
item.goods_config = cloneDeep(goods_default_parameter);
item.custom_config = cloneDeep(defaultCustom)
}
} else if (item.tabs_data_type == 'custom') {
const new_com_data = item.custom_config;
@ -348,8 +352,8 @@ const save_formmat_form_data = (data: diy_data_item, close: boolean = false, is_
// 自定义数据处理
custom_data_processing(new_com_data.content);
// 是自定义的时候清除掉其他的内容，避免下次点击时出现问题
goods_or_article_data_clear(item.goods_config.content, true);
goods_or_article_data_clear(item.article_config.content, false);
item.goods_config = cloneDeep(goods_default_parameter);
item.article_config = cloneDeep(article_default_parameter);
}
});
}
@ -440,32 +444,7 @@ const save_formmat_form_data = (data: diy_data_item, close: boolean = false, is_
// 清空自动数据列表，为后续的数据处理或展示做准备
new_com_data_content.data_auto_list = [];
};
// 清空其他组件的内容
const goods_or_article_data_clear = (new_com_data_content: any, is_goods: boolean) => {
new_com_data_content.data_ids = '';
new_com_data_content.data_list = [];
// 清空自动数据列表，为后续的数据处理或展示做准备
new_com_data_content.data_auto_list = [];
// 设置分类ID、数量、排序规则等默认值，确保数据的一致性和完整性
new_com_data_content.category_ids = defaultConfigSetting.category_ids;
new_com_data_content.number = defaultConfigSetting.page_size;
new_com_data_content.order_by_rule = defaultConfigSetting.order_by_rule;
new_com_data_content.order_by_type = defaultConfigSetting.order_by_type;
// 根据是否为商品，决定是否设置品牌ID或封面标志
if (is_goods) {
new_com_data_content.brand_ids = defaultConfigSetting.brand_ids;
} else {
new_com_data_content.is_cover = defaultConfigSetting.is_cover;
}
}
const clear_custom_data = (new_com_data_content: any) => {
// 如果数据不是自定义或数据类型不是0，清空相关数据字段
new_com_data_content.data_source_content.data_ids = [];
new_com_data_content.data_source_content.data_list = [];
// 自动数据清空
new_com_data_content.data_source_content.data_auto_list = [];
}
/**
* 自定义数据处理函数
* 该函数用于处理新组件数据内容，根据数据是否为自定义以及数据类型，对数据进行相应的处理和格式化