From b9cdd09fc40ac4fec6041e6375021088d4c33056 Mon Sep 17 00:00:00 2001
From: sws <1141121512@qq.com>
Date: Wed, 18 Sep 2024 13:44:59 +0800
Subject: [PATCH] =?UTF-8?q?1.=E4=BB=A3=E7=A0=81=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/tabs-view/index.vue     | 36 ++++++++------
 src/components/common/upload/index.vue        |  6 +--
 src/components/model-article-tabs/index.vue   | 48 +++++++++++--------
 .../model-article-tabs-content.vue            |  5 +-
 src/components/model-goods-tabs/index.vue     | 46 ++++++++++--------
 .../model-goods-tabs-content.vue              |  6 +--
 .../components/main/default/article-tabs.ts   |  2 +
 .../components/main/default/goods-tabs.ts     |  2 +
 8 files changed, 82 insertions(+), 69 deletions(-)

diff --git a/src/components/common/tabs-view/index.vue b/src/components/common/tabs-view/index.vue
index d5b076b5..b457b583 100644
--- a/src/components/common/tabs-view/index.vue
+++ b/src/components/common/tabs-view/index.vue
@@ -1,8 +1,8 @@
 <template>
     <div class="flex-row gap-10 jc-sb align-c">
-        <div class="tabs flex-row oh" :style="`column-gap: ${ new_style.tabs_spacing }px;`">
+        <div class="tabs flex-row oh" :style="`column-gap: ${new_style.tabs_spacing}px;`">
             <template v-for="(item, index) in form.tabs_list" :key="index">
-                <div class="item nowrap flex-col jc-c gap-4" :class="tabs_theme + (index == 0 ? ' active' : '')">
+                <div class="item nowrap flex-col jc-c gap-4" :class="tabs_theme + (index == activeIndex ? ' active' : '')">
                     <template v-if="!isEmpty(item.img)">
                         <image-empty v-model="item.img[0]" class="img" error-img-style="width:2rem;height:2rem;"></image-empty>
                     </template>
@@ -10,7 +10,7 @@
                         <image-empty class="img" error-img-style="width:2rem;height:2rem;"></image-empty>
                     </template>
                     <div class="title" :style="title_style(index)">{{ item.title }}</div>
-                    <div class="desc" :style="tabs_theme_index == '1' && index == 0 ? tabs_check : ''">{{ item.desc }}</div>
+                    <div class="desc" :style="tabs_theme_index == '1' && index == activeIndex ? tabs_check : ''">{{ item.desc }}</div>
                     <icon name="checked-1" class="icon" :style="tabs_theme_index == '3' ? icon_tabs_check() : ''"></icon>
                     <div class="bottom_line" :style="tabs_check"></div>
                 </div>
@@ -23,6 +23,7 @@
 <script lang="ts" setup>
 import { gradient_computer } from '@/utils';
 import { isEmpty } from 'lodash';
+import { active } from 'sortablejs';
 const props = defineProps({
     value: {
         type: Object,
@@ -31,7 +32,11 @@ const props = defineProps({
     isTabs: {
         type: Boolean,
         default: false,
-    }
+    },
+    activeIndex: {
+        type: Number,
+        default: 0,
+    },
 });
 // const tabs = ref(props.value);
 // 用于页面判断显示
@@ -67,14 +72,14 @@ const tabs_check = computed(() => {
 // 选中的内部样式
 const tabs_theme_style = computed(() => {
     return {
-        tabs_title_checked: `font-weight: ${ new_style.value.tabs_weight_checked };font-size: ${ new_style.value.tabs_size_checked}px;color:${ new_style.value.tabs_color_checked };`,
-        tabs_title: `font-weight: ${ new_style.value.tabs_weight };font-size: ${ new_style.value.tabs_size}px;color:${ new_style.value.tabs_color };`,
+        tabs_title_checked: `font-weight: ${new_style.value.tabs_weight_checked};font-size: ${new_style.value.tabs_size_checked}px;color:${new_style.value.tabs_color_checked};`,
+        tabs_title: `font-weight: ${new_style.value.tabs_weight};font-size: ${new_style.value.tabs_size}px;color:${new_style.value.tabs_color};`,
     };
 });
 
 const title_style = (index: number) => {
     // 默认是未选中的状态
-    let style = `${ tabs_theme_style.value.tabs_title }`;
+    let style = `${tabs_theme_style.value.tabs_title}`;
     if (index == 0) {
         let checked_style = tabs_theme_style.value.tabs_title_checked;
         if (['2', '4'].includes(tabs_theme_index.value)) {
@@ -86,8 +91,8 @@ const title_style = (index: number) => {
 };
 // icon的渐变色处理
 const icon_tabs_check = () => {
-    return `${ tabs_check.value };line-height: 1;background-clip: text;-webkit-background-clip: text;-webkit-text-fill-color: transparent;`;
-}
+    return `${tabs_check.value};line-height: 1;background-clip: text;-webkit-background-clip: text;-webkit-text-fill-color: transparent;`;
+};
 </script>
 <style lang="scss" scoped>
 .tabs {
@@ -96,6 +101,7 @@ const icon_tabs_check = () => {
         padding: 0 0 0.5rem 0;
         // margin: 0 1rem;
         position: relative;
+        transition: all 0.3s ease-in-out;
         &:first-of-type {
             margin-left: 0;
         }
@@ -149,7 +155,7 @@ const icon_tabs_check = () => {
         &.tabs-style-2 {
             &.active {
                 .desc {
-                    background: #FF5E5E;
+                    background: #ff5e5e;
                     color: #fff;
                 }
             }
@@ -162,7 +168,7 @@ const icon_tabs_check = () => {
         &.tabs-style-3 {
             &.active {
                 .title {
-                    background: #FF2222;
+                    background: #ff2222;
                     border-radius: 2rem;
                     padding: 0.2rem 1.2rem;
                     color: #fff;
@@ -173,10 +179,10 @@ const icon_tabs_check = () => {
             padding-bottom: 1.8rem;
             &.active {
                 .title {
-                    color: #FF2222;
+                    color: #ff2222;
                 }
                 .icon {
-                    color: #FF2222;
+                    color: #ff2222;
                     display: block;
                 }
             }
@@ -186,13 +192,13 @@ const icon_tabs_check = () => {
             &.active {
                 .title {
                     font-size: 1.1rem;
-                    background: #FF5E5E;
+                    background: #ff5e5e;
                     border-radius: 2rem;
                     padding: 0.2rem 0.7rem;
                     color: #fff;
                 }
                 .img {
-                    border-color: #FF5E5E;
+                    border-color: #ff5e5e;
                 }
             }
             .img {
diff --git a/src/components/common/upload/index.vue b/src/components/common/upload/index.vue
index 49f876e9..badef15b 100644
--- a/src/components/common/upload/index.vue
+++ b/src/components/common/upload/index.vue
@@ -446,10 +446,6 @@ const edit_type_event = (data: Tree) => {
 const remove_type_event = (node: any, data: Tree) => {
     app?.appContext.config.globalProperties.$common.message_box('删除后不可恢复，确定继续吗?', 'warning').then(() => {
         UploadAPI.delTree({ id: data.id }).then((res) => {
-            // const parent = node.parent;
-            // const children: Tree[] = parent.data.items || parent.data;
-            // const index = children.findIndex((d) => d.id === data.id);
-            // children.splice(index, 1);
             get_tree(true);
             ElMessage({
                 type: 'success',
@@ -484,7 +480,7 @@ const get_attachment_list = (type?: string) => {
         page_size: page_size.value,
         type: upload_type.value == 'img' ? 'image' : upload_type.value == 'video' ? 'video' : upload_type.value == 'file' ? 'file' : '',
         keywords: search_name.value,
-        category_id: category_id.value,
+        category_id: category_id.value == 'all' ? '' : category_id.value,
     };
     UploadAPI.getAttachmentList(new_data).then((res) => {
         const data = res.data;
diff --git a/src/components/model-article-tabs/index.vue b/src/components/model-article-tabs/index.vue
index cdee5f34..5b5a2256 100644
--- a/src/components/model-article-tabs/index.vue
+++ b/src/components/model-article-tabs/index.vue
@@ -1,6 +1,6 @@
 <template>
     <div :style="style_container">
-        <tabs-view ref="tabs" :value="article_tabs"></tabs-view>
+        <tabs-view ref="tabs" :value="article_tabs" :active-index="tabs_active_index"></tabs-view>
         <div class="pt-10">
             <model-article-list :value="article_tabs" :is-common-style="false"></model-article-list>
         </div>
@@ -18,25 +18,31 @@ const props = defineProps({
 });
 const style_container = ref('');
 const article_tabs = ref({});
-watch(() => props.value, (val) => {
-    const newVal = cloneDeep(val);
-    const new_style = newVal?.style;
-    let new_data = newVal;
-    new_data.content.theme = new_data.content.article_theme;
-    new_data.content.data_type = new_data.content.tabs_list[0].data_type;
-    new_data.content.category_ids = new_data.content.tabs_list[0].category_ids;
-    new_data.content.carousel_col = new_data.content.article_carousel_col;
-    new_data.content.data_list = new_data.content.tabs_list[0].data_list;
-    new_data.content.data_auto_list = new_data.content.tabs_list[0].data_auto_list;
-    new_data.content.data_ids = new_data.content.tabs_list[0].data_ids;
-    new_data.content.number = new_data.content.tabs_list[0].number;
-    new_data.content.order_by_type = new_data.content.tabs_list[0].order_by_type;
-    new_data.content.order_by_rule = new_data.content.tabs_list[0].order_by_rule;
-    new_data.content.field_show = new_data.content.field_show;
-    new_data.content.is_cover = new_data.content.tabs_list[0].is_cover;
-    article_tabs.value = new_data;
-    
-    style_container.value += common_styles_computer(new_style.common_style);
-}, { immediate: true, deep: true });
+const tabs_active_index = ref(0);
+watch(
+    () => props.value,
+    (val) => {
+        const newVal = cloneDeep(val);
+        const new_style = newVal?.style;
+        let new_data = newVal;
+        tabs_active_index.value = new_data.content.tabs_list.length - 1 >= new_data.content.tabs_active_index ? new_data.content.tabs_active_index : new_data.content.tabs_list.length - 1;
+        new_data.content.theme = new_data.content.article_theme;
+        new_data.content.data_type = new_data.content.tabs_list[tabs_active_index.value].data_type;
+        new_data.content.category_ids = new_data.content.tabs_list[tabs_active_index.value].category_ids;
+        new_data.content.carousel_col = new_data.content.article_carousel_col;
+        new_data.content.data_list = new_data.content.tabs_list[tabs_active_index.value].data_list;
+        new_data.content.data_auto_list = new_data.content.tabs_list[tabs_active_index.value].data_auto_list;
+        new_data.content.data_ids = new_data.content.tabs_list[tabs_active_index.value].data_ids;
+        new_data.content.number = new_data.content.tabs_list[tabs_active_index.value].number;
+        new_data.content.order_by_type = new_data.content.tabs_list[tabs_active_index.value].order_by_type;
+        new_data.content.order_by_rule = new_data.content.tabs_list[tabs_active_index.value].order_by_rule;
+        new_data.content.field_show = new_data.content.field_show;
+        new_data.content.is_cover = new_data.content.tabs_list[tabs_active_index.value].is_cover;
+        article_tabs.value = new_data;
+
+        style_container.value += common_styles_computer(new_style.common_style);
+    },
+    { immediate: true, deep: true }
+);
 </script>
 <style lang="scss" scoped></style>
diff --git a/src/components/model-article-tabs/model-article-tabs-content.vue b/src/components/model-article-tabs/model-article-tabs-content.vue
index 5cc4d900..9e05bf5d 100644
--- a/src/components/model-article-tabs/model-article-tabs-content.vue
+++ b/src/components/model-article-tabs/model-article-tabs-content.vue
@@ -32,7 +32,7 @@
                                 <el-form-item label="显示标题">
                                     <el-input v-model="row.title" placeholder="请输入标题文字" clearable />
                                 </el-form-item>
-                                <template v-if="active_index == index">
+                                <template v-if="form.tabs_active_index == index">
                                     <el-form-item v-if="form.tabs_theme == '1'" label="简介配置">
                                         <el-input v-model="row.desc" placeholder="请输入简介" clearable />
                                     </el-form-item>
@@ -188,9 +188,8 @@ const article_theme_change = (val: any) => {
 
 // 开启关闭链接
 const url_value_dialog_visible = ref(false);
-const active_index = ref(0);
 const tabs_list_click = (item: any, index: number) => {
-    active_index.value = index;
+    form.tabs_active_index = index;
 };
 // 选项卡设置
 const tabs_list_remove = (index: number) => {
diff --git a/src/components/model-goods-tabs/index.vue b/src/components/model-goods-tabs/index.vue
index c1cf8d45..b59ee564 100644
--- a/src/components/model-goods-tabs/index.vue
+++ b/src/components/model-goods-tabs/index.vue
@@ -1,6 +1,6 @@
 <template>
     <div :style="style_container">
-        <tabs-view ref="tabs" :value="props.value"></tabs-view>
+        <tabs-view ref="tabs" :value="props.value" :active-index="tabs_active_index"></tabs-view>
         <div class="pt-10">
             <model-goods-list :value="tabs_list" :is-common-style="false"></model-goods-list>
         </div>
@@ -21,25 +21,29 @@ const props = defineProps({
 
 const style_container = ref('');
 const tabs_list = ref({});
+const tabs_active_index = ref(0);
+watch(
+    () => props.value,
+    (val) => {
+        const new_val = cloneDeep(val);
+        const new_style = new_val?.style;
+        let new_data = new_val;
+        tabs_active_index.value = new_data.content.tabs_list.length - 1 >= new_data.content.tabs_active_index ? new_data.content.tabs_active_index : new_data.content.tabs_list.length - 1;
+        // 产品的值
+        new_data.content.data_type = new_data.content.tabs_list[tabs_active_index.value].data_type;
+        new_data.content.category_ids = new_data.content.tabs_list[tabs_active_index.value].category_ids;
+        new_data.content.brand_ids = new_data.content.tabs_list[tabs_active_index.value].brand_ids;
+        new_data.content.number = new_data.content.tabs_list[tabs_active_index.value].number;
+        new_data.content.order_by_type = new_data.content.tabs_list[tabs_active_index.value].order_by_type;
+        new_data.content.order_by_rule = new_data.content.tabs_list[tabs_active_index.value].order_by_rule;
+        new_data.content.data_list = new_data.content.tabs_list[tabs_active_index.value].data_list;
+        new_data.content.data_auto_list = new_data.content.tabs_list[tabs_active_index.value].data_auto_list;
 
-watch(() => props.value, (val) => {
-    const new_val = cloneDeep(val);
-    const new_style = new_val?.style;
-    let new_data = new_val;
-    // 产品的值
-    new_data.content.data_type = new_data.content.tabs_list[0].data_type;
-    new_data.content.category_ids = new_data.content.tabs_list[0].category_ids;
-    new_data.content.brand_ids = new_data.content.tabs_list[0].brand_ids;
-    new_data.content.number = new_data.content.tabs_list[0].number;
-    new_data.content.order_by_type = new_data.content.tabs_list[0].order_by_type;
-    new_data.content.order_by_rule = new_data.content.tabs_list[0].order_by_rule;
-    new_data.content.data_list = new_data.content.tabs_list[0].data_list;
-    new_data.content.data_auto_list = new_data.content.tabs_list[0].data_auto_list;
-
-    tabs_list.value = new_data;
-    // 公共样式
-    style_container.value += common_styles_computer(new_style.common_style);
-},{ immediate: true, deep: true });
+        tabs_list.value = new_data;
+        // 公共样式
+        style_container.value += common_styles_computer(new_style.common_style);
+    },
+    { immediate: true, deep: true }
+);
 </script>
-<style lang="scss" scoped>
-</style>
+<style lang="scss" scoped></style>
diff --git a/src/components/model-goods-tabs/model-goods-tabs-content.vue b/src/components/model-goods-tabs/model-goods-tabs-content.vue
index 9007d07d..a9d98d16 100644
--- a/src/components/model-goods-tabs/model-goods-tabs-content.vue
+++ b/src/components/model-goods-tabs/model-goods-tabs-content.vue
@@ -35,7 +35,7 @@
                                 <el-form-item label="显示标题">
                                     <el-input v-model="row.title" placeholder="请输入标题文字" clearable />
                                 </el-form-item>
-                                <template v-if="active_index == index">
+                                <template v-if="form.tabs_active_index == index">
                                     <el-form-item v-if="form.tabs_theme == '4'" label="上传图片">
                                         <upload v-model="row.img" :limit="1" size="40" styles="2"></upload>
                                     </el-form-item>
@@ -174,10 +174,8 @@ onBeforeMount(() => {
         }, 1000);
     });
 });
-
-const active_index = ref(0);
 const tabs_list_click = (item: any, index: number) => {
-    active_index.value = index;
+    form.value.tabs_active_index = index;
 };
 // 选项卡设置
 const tabs_list_remove = (index: number) => {
diff --git a/src/views/layout/components/main/default/article-tabs.ts b/src/views/layout/components/main/default/article-tabs.ts
index 6e0b4666..6837c197 100644
--- a/src/views/layout/components/main/default/article-tabs.ts
+++ b/src/views/layout/components/main/default/article-tabs.ts
@@ -26,6 +26,7 @@ interface DefaultArticleTabs {
         article_theme: string;
         article_carousel_col: string;
         tabs_list: articleTabsList[];
+        tabs_active_index: number;
         field_show: string[];
     };
     style: {
@@ -72,6 +73,7 @@ const defaultArticleTabs: DefaultArticleTabs = {
             { id: '5', title: '测试四', desc: '简介', data_type: '0', category_ids: [], data_ids: '', number: 4, order_by_type: '0', order_by_rule: '0', is_cover: '1', data_list: [], data_auto_list: [] },
             { id: '6', title: '测试五', desc: '简介', data_type: '0', category_ids: [], data_ids: '', number: 4, order_by_type: '0', order_by_rule: '0', is_cover: '1', data_list: [], data_auto_list: [] },
         ],
+        tabs_active_index: 0,
         field_show: ['0', '1'],
     },
     style: {
diff --git a/src/views/layout/components/main/default/goods-tabs.ts b/src/views/layout/components/main/default/goods-tabs.ts
index c3d0146f..daf68ad8 100644
--- a/src/views/layout/components/main/default/goods-tabs.ts
+++ b/src/views/layout/components/main/default/goods-tabs.ts
@@ -21,6 +21,7 @@ interface DefaultProductList {
         theme: string;
         carousel_col: number;
         tabs_list: articleTabsList[];
+        tabs_active_index: number;
         is_show: string[];
         is_shop_show: string;
         is_price_solo: string;
@@ -81,6 +82,7 @@ const defaultProductList: DefaultProductList = {
             { id: '3', title: '测试二', img: [], desc: '简介', data_type: '0', category_ids: [], brand_ids: [], data_ids: [], number: 4, order_by_type: '0', order_by_rule: '0', data_list: [], data_auto_list: [] },
             { id: '4', title: '测试三', img: [], desc: '简介', data_type: '0', category_ids: [], brand_ids: [], data_ids: [], number: 4, order_by_type: '0', order_by_rule: '0', data_list: [], data_auto_list: [] },
         ],
+        tabs_active_index: 0,
         is_show: ['title', 'plugins_view_icon', 'price', 'sales_count', 'original_price'],
         is_shop_show: '1',
         is_price_solo: '1',