From cd0911c4f4331af788974915422f6e1b3996c5d9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8E=E8=82=96=E7=A3=8A?= <18851179580@163.com>
Date: Sat, 8 Feb 2025 11:41:20 +0800
Subject: [PATCH] =?UTF-8?q?=E6=95=B0=E6=8D=AE=E9=80=89=E9=A1=B9=E5=8D=A1?=
 =?UTF-8?q?=E6=80=A7=E8=83=BD=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../model-data-tabs-content.vue               | 132 +++++++++++++-----
 1 file changed, 95 insertions(+), 37 deletions(-)

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 31eb8998..7f9c9e8a 100644
--- a/src/components/model-data-tabs/model-data-tabs-content.vue
+++ b/src/components/model-data-tabs/model-data-tabs-content.vue
@@ -50,33 +50,17 @@
                                     </el-form-item>
                                     <el-form-item label="数据类型">
                                         <el-radio-group v-model="row.tabs_data_type">
-                                            <el-radio value="goods">商品</el-radio>
-                                            <el-radio value="article">文章</el-radio>
-                                            <el-radio value="custom">自定义</el-radio>
+                                            <el-radio value="goods" @click="radio_click('goods', index)">商品</el-radio>
+                                            <el-radio value="article" @click="radio_click('article', index)">文章</el-radio>
+                                            <el-radio value="custom" @click="radio_click('custom', index)">自定义</el-radio>
                                         </el-radio-group>
                                     </el-form-item>
                                     <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>
-                                            </div>
-                                            <div v-show="row.tabs_data_type == 'article'" class="data-tabs-style">
-                                                <data-article-content :value="row.article_config.content" :tab-style="row.article_config.style"></data-article-content>
-                                            </div>
-                                            <div v-show="row.tabs_data_type == 'custom'" class="data-tabs-style">
-                                                <data-custom-content :value="row.custom_config.content" :is-subcomponent="true"></data-custom-content>
-                                            </div>
+                                            <component :is="getContentComponent(row.tabs_data_type)" v-bind="getContentProps(row)"></component>
                                         </el-tab-pane>
                                         <el-tab-pane label="样式设置" name="styles">
-                                            <div v-show="row.tabs_data_type == 'goods'" class="data-tabs-style">
-                                                <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">
-                                                <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>
-                                            </div>
+                                            <component :is="getStylesComponent(row.tabs_data_type)" v-bind="getStylesProps(row)"></component>
                                         </el-tab-pane>
                                     </el-tabs>
                                 </template>
@@ -95,6 +79,14 @@
     </div>
 </template>
 <script setup lang="ts">
+// 引入需要的组件
+import defaultDataGoodsContent from '@/components/common/data-tabs-common/goods/data-goods-content.vue';
+import defaultDataArticleContent from '@/components/common/data-tabs-common/article/data-article-content.vue';
+import defaultDataCustomContent from '@/components/common/data-tabs-common/data-custom-content.vue';
+import defaultDataGoodsStyles from '@/components/common/data-tabs-common/goods/data-goods-styles.vue';
+import defaultDataArticleStyles from '@/components/common/data-tabs-common/article/data-article-styles.vue';
+import defaultDataCustomStyles from '@/components/model-custom/model-custom-styles.vue';
+
 import { cloneDeep } from 'lodash';
 import { article_default_parameter, goods_default_parameter } from "@/config/const/data-tabs";
 import defaultCustom from '@/config/const/custom';
@@ -126,23 +118,89 @@ 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 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 getConfig = (tabs_data_type: string, row: any, ) => {
+    switch (tabs_data_type) {
+        case 'goods':
+            return row.goods_config || {};
+        case 'article':
+            return row.article_config || {};
+        case 'custom':
+            return row.custom_config || {};
+        default:
+            return {};
+    }
+}
+
+const getContentComponent = computed(() => {
+    return (tabs_data_type: string) => {
+        switch (tabs_data_type) {
+            case 'goods':
+                return defaultDataGoodsContent;
+            case 'article':
+                return defaultDataArticleContent;
+            case 'custom':
+                return defaultDataCustomContent;
+            default:
+                return defaultDataGoodsContent; // 默认组件
+        }
+    }
+})
+const getContentProps = computed(() => {
+    return (row: any) => {
+        const config = getConfig(row.tabs_data_type, row);
+        return {
+            value: config.content,
+            tabStyle: config.style,
+            ...(row.tabs_data_type == 'custom' ? { isSubcomponent: true } : {})
+        };
+    }
+});
+
+const getStylesComponent = computed(() => {
+    return (tabs_data_type: string) => {
+        switch (tabs_data_type) {
+            case 'goods':
+                return defaultDataGoodsStyles;
+            case 'article':
+                return defaultDataArticleStyles;
+            case 'custom':
+                return defaultDataCustomStyles;
+            default:
+                return defaultDataGoodsStyles; // 默认组件
+        }
+    }
+})
+const getStylesProps = computed(() => {
+    return (row: any) => {
+        const config = getConfig(row.tabs_data_type, row);
+        return {
+            value: config.style,
+            content: config.content,
+            ...(row.tabs_data_type == 'custom' ? { isCommonStyle: false } : {})
+        };
+    }
+});
+// 层级太深了，导致radio切换出现问题，所以需要在每个里边加一个点击事件
+const radio_click = (val: any, index: number) => {
+    nextTick(() => {
+        form.value.tabs_list[index].tabs_data_type = val;
+    })
+}
 const base_list = reactive({
     tabs_style_list: [
         { name: '样式一', value: '0' },