From 14f9595cc1c1e22c4d7fcb705853706e83609f8b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8E=E8=82=96=E7=A3=8A?= <18851179580@163.com>
Date: Fri, 7 Feb 2025 15:58:50 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=86=85=E5=AE=B9=E5=8C=BA?=
 =?UTF-8?q?=E5=9F=9F=E7=9A=84=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../article/data-article-content.vue          |  7 -----
 .../article/data-article-styles.vue           |  8 -----
 .../data-tabs-common/data-custom-content.vue  |  1 +
 .../goods/data-goods-content.vue              |  8 -----
 .../goods/data-goods-styles.vue               |  8 -----
 .../model-data-tabs-content.vue               | 31 ++++++++++++++++---
 src/views/layout/index.vue                    | 18 +++++++----
 7 files changed, 39 insertions(+), 42 deletions(-)

diff --git a/src/components/common/data-tabs-common/article/data-article-content.vue b/src/components/common/data-tabs-common/article/data-article-content.vue
index 426cb762..b992d96c 100644
--- a/src/components/common/data-tabs-common/article/data-article-content.vue
+++ b/src/components/common/data-tabs-common/article/data-article-content.vue
@@ -102,13 +102,6 @@ const state = reactive({
 });
 // 如果需要解构，确保使用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') {
diff --git a/src/components/common/data-tabs-common/article/data-article-styles.vue b/src/components/common/data-tabs-common/article/data-article-styles.vue
index 312cf31f..68cc522a 100644
--- a/src/components/common/data-tabs-common/article/data-article-styles.vue
+++ b/src/components/common/data-tabs-common/article/data-article-styles.vue
@@ -41,14 +41,6 @@ const state = reactive({
 // 如果需要解构，确保使用toRefs
 const { form, data } = toRefs(state);
 
-watch(() => props.value, (value) => {
-    form.value = value;
-},{deep: true, immediate: true });
-
-watch(() => props.content, (value) => {
-    data.value = value;
-},{deep: true, immediate: true });
-
 // 内容样式
 const mult_content_color_picker_event = (arry: color_list[], type: number) => {
     form.value.data_content_style.color_list = arry;
diff --git a/src/components/common/data-tabs-common/data-custom-content.vue b/src/components/common/data-tabs-common/data-custom-content.vue
index d2087f31..8e10af33 100644
--- a/src/components/common/data-tabs-common/data-custom-content.vue
+++ b/src/components/common/data-tabs-common/data-custom-content.vue
@@ -68,6 +68,7 @@
                     </card-container>
                 </template>
             </template>
+            <div class="mb-10 mt-10"></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>
         <!-- 自定义内容处理 -->
diff --git a/src/components/common/data-tabs-common/goods/data-goods-content.vue b/src/components/common/data-tabs-common/goods/data-goods-content.vue
index 5d072c3b..c497453c 100644
--- a/src/components/common/data-tabs-common/goods/data-goods-content.vue
+++ b/src/components/common/data-tabs-common/goods/data-goods-content.vue
@@ -73,14 +73,6 @@ const state = reactive({
 // 如果需要解构，确保使用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;
diff --git a/src/components/common/data-tabs-common/goods/data-goods-styles.vue b/src/components/common/data-tabs-common/goods/data-goods-styles.vue
index 5ba9e379..cf88d1e6 100644
--- a/src/components/common/data-tabs-common/goods/data-goods-styles.vue
+++ b/src/components/common/data-tabs-common/goods/data-goods-styles.vue
@@ -41,14 +41,6 @@ const state = reactive({
 // 如果需要解构，确保使用toRefs
 const { form, data } = toRefs(state);
 
-watch(() => props.value, (value) => {
-    form.value = value;
-},{deep: true, immediate: true });
-
-watch(() => props.content, (value) => {
-    data.value = value;
-},{deep: true, immediate: true });
-
 // 内容样式
 const mult_content_color_picker_event = (arry: color_list[], type: number) => {
     form.value.data_content_style.color_list = arry;
diff --git a/src/components/model-data-tabs/model-data-tabs-content.vue b/src/components/model-data-tabs/model-data-tabs-content.vue
index daaa4c6b..31eb8998 100644
--- a/src/components/model-data-tabs/model-data-tabs-content.vue
+++ b/src/components/model-data-tabs/model-data-tabs-content.vue
@@ -38,9 +38,7 @@
                                         <template v-if="row.tabs_type == '1'">
                                             <upload v-model="row.tabs_img" v-model:icon-value="row.tabs_icon" is-icon :limit="1" size="50"></upload>
                                         </template>
-                                        <template v-else>
-                                            <el-input v-model="row.title" placeholder="请输入标题文字" clearable />
-                                        </template>
+                                        <el-input v-else v-model="row.title" placeholder="请输入标题文字" clearable />
                                     </div>
                                 </el-form-item>
                                 <template v-if="form.tabs_active_index == index">
@@ -57,7 +55,7 @@
                                             <el-radio value="custom">自定义</el-radio>
                                         </el-radio-group>
                                     </el-form-item>
-                                    <el-tabs v-model="row.tabs_name" class="content-tabs">
+                                    <el-tabs v-model="row.tabs_name" class="content-tabs" @tab-change="tabs_change">
                                         <el-tab-pane label="内容设置" name="content">
                                             <div v-show="row.tabs_data_type == 'goods'" class="data-tabs-style">
                                                 <data-goods-content :value="row.goods_config.content" :tab-style="row.goods_config.style"></data-goods-content>
@@ -128,7 +126,23 @@ const state = reactive({
 });
 // 如果需要解构，确保使用toRefs
 const { form, styles } = toRefs(state);
-
+onBeforeMount(() => {
+    const arry_list = form.value.tabs_list;
+    // 历史数据处理
+    arry_list.forEach((item: any) => {
+        item.tabs_name = `content`;
+        if (item.tabs_data_type == 'goods') {
+            item.article_config = cloneDeep(article_default_parameter);
+            item.custom_config = cloneDeep(defaultCustom);
+        } else if (item.tabs_data_type == 'article') {
+            item.goods_config = cloneDeep(goods_default_parameter);
+            item.custom_config = cloneDeep(defaultCustom);
+        } else if (item.tabs_data_type == 'custom') {
+            item.goods_config = cloneDeep(goods_default_parameter);
+            item.article_config = cloneDeep(article_default_parameter);
+        }
+    })
+})
 const base_list = reactive({
     tabs_style_list: [
         { name: '样式一', value: '0' },
@@ -184,6 +198,10 @@ const tabs_theme_change = (val: string | number | boolean | undefined): void =>
     styles.value.tabs_color_checked = tabs_style(styles.value.tabs_color_checked, val);
 };
 const is_immersion_model = computed(() => common_store.is_immersion_model);
+
+const tabs_change = (val: string | number | boolean | undefined) => {
+    console.log(val);
+}
 watchEffect(() => {
     if (is_immersion_model.value) {
         form.value.tabs_top_up = '0';
@@ -202,4 +220,7 @@ watchEffect(() => {
         text-align: left;
     }
 }
+.tabs-animation {
+    transition: 0.8s ease;
+}
 </style>
diff --git a/src/views/layout/index.vue b/src/views/layout/index.vue
index 78fca49c..9646cdfa 100644
--- a/src/views/layout/index.vue
+++ b/src/views/layout/index.vue
@@ -338,12 +338,16 @@ const save_formmat_form_data = (data: diy_data_item, close: boolean = false, is_
                     goods_or_article_data_processing(new_com_data.content, item.tabs_data_type == 'goods');
                     // 是商品的时候需要将其他的两个数据清楚掉，避免下次切换时出现问题
                     if (item.tabs_data_type == 'goods') {
-                        item.article_config = cloneDeep(article_default_parameter);
-                        item.custom_config = cloneDeep(defaultCustom)
+                        // item.article_config = cloneDeep(article_default_parameter);
+                        // item.custom_config = cloneDeep(defaultCustom)
+                        delete item.article_config;
+                        delete item.custom_config;
                     } else {
                         // 是文章时清除掉其他的内容
-                        item.goods_config = cloneDeep(goods_default_parameter);
-                        item.custom_config = cloneDeep(defaultCustom)
+                        // item.goods_config = cloneDeep(goods_default_parameter);
+                        // item.custom_config = cloneDeep(defaultCustom)
+                        delete item.goods_config;
+                        delete item.custom_config;
                     }
                 } else if (item.tabs_data_type == 'custom') {
                     const new_com_data = item.custom_config;
@@ -352,8 +356,10 @@ const save_formmat_form_data = (data: diy_data_item, close: boolean = false, is_
                     // 自定义数据处理
                     custom_data_processing(new_com_data.content);
                     // 是自定义的时候清除掉其他的内容，避免下次点击时出现问题
-                    item.goods_config = cloneDeep(goods_default_parameter);
-                    item.article_config = cloneDeep(article_default_parameter);
+                    delete item.goods_config;
+                    delete item.article_config;
+                    // item.goods_config = cloneDeep(goods_default_parameter);
+                    // item.article_config = cloneDeep(article_default_parameter);
                 }
             });
         }