From 2838ee89d993d0db7bdf8100ecef8523b2f8a618 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8E=E8=82=96=E7=A3=8A?= <18851179580@163.com>
Date: Mon, 4 Nov 2024 15:28:50 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AF=BC=E8=88=AA=E7=BB=84=E6=96=B0=E5=A2=9E?=
 =?UTF-8?q?=E5=88=86=E7=B1=BB=E5=AF=BC=E5=85=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../common/category-dialog/index.vue          | 109 ++++++++++++++++++
 .../footer-nav/footer-nav-content.vue         |   2 +-
 .../model-nav-group-content.vue               |  33 +++++-
 .../tabbar/components/settings/index.vue      |   2 +-
 4 files changed, 143 insertions(+), 3 deletions(-)
 create mode 100644 src/components/common/category-dialog/index.vue

diff --git a/src/components/common/category-dialog/index.vue b/src/components/common/category-dialog/index.vue
new file mode 100644
index 00000000..ca1619ea
--- /dev/null
+++ b/src/components/common/category-dialog/index.vue
@@ -0,0 +1,109 @@
+<template>
+    <el-dialog v-model="dialogVisible" class="radius-lg" width="1168" draggable append-to-body :close-on-click-modal="false" @close="close_event">
+        <template #header>
+            <div class="title center re">
+                <div class="tc size-16 fw">商品分类</div>
+            </div>
+        </template>
+        <div class="container">
+            <div class="flex-row jc-e gap-20 mb-20">
+                <el-input v-model="search_value" placeholder="请输入搜索内容" class="search-w" @input="handle_search">
+                    <template #suffix>
+                        <icon name="search" size="16" color="9" class="c-pointer" @click="handle_search"></icon>
+                    </template>
+                </el-input>
+            </div>
+            <div class="content">
+                <el-table ref="multipleTableRef" v-loading="loading" :data="table_data" class="w" :header-cell-style="{ background: '#f7f7f7' }" row-key="id" height="438" fixed @selection-change="selection_change">
+                    <el-table-column type="selection" width="55" />
+                    <el-table-column prop="id" label="ID" type="" />
+                    <el-table-column prop="name" label="分类名称"></el-table-column>
+                    <el-table-column prop="image" label="分类图标">
+                        <template #default="scope">
+                            <image-empty v-if="scope.row.image" v-model="scope.row.image" class="img"></image-empty>
+                        </template>
+                    </el-table-column>
+                    <template #empty>
+                        <no-data></no-data>
+                    </template>
+                </el-table>
+            </div>
+        </div>
+        <template #footer>
+            <span class="dialog-footer">
+                <el-button class="plr-28 ptb-10" @click="close_event">取消</el-button>
+                <el-button class="plr-28 ptb-10" type="primary" :disabled="select_all.length <= 0" @click="confirm_event">确定</el-button>
+            </span>
+        </template>
+    </el-dialog>
+</template>
+
+<script lang="ts" setup>
+import { isEmpty } from 'lodash';
+import { commonStore } from '@/store';
+import { ElTable } from 'element-plus';
+const common_store = commonStore();
+const dialogVisible = defineModel('dialogVisible', { type: Boolean, default: false });
+const search_value = ref('');
+interface categoryList extends pageLinkList {
+    image: string;
+}
+const table_data = ref<categoryList[]>([]);
+const loading = ref(false);
+// 使用 map 方法来遍历数组并返回新的数组
+const goods_category_list: categoryList[] = common_store.common.goods_category.map(item => {
+    if (!isEmpty(item.realistic_images)) {
+        return { ...item, image: item.realistic_images };
+    } else {
+        return { ...item, image: item.icon };
+    }
+});
+onMounted(() => {
+    search_value.value = '';
+    table_data.value = goods_category_list;
+});
+const handle_search = () => {
+    loading.value = true;
+    // 从分类中取出对应的数据
+    const list = goods_category_list.filter(item => item.name?.includes(search_value.value));
+    // 赋值给列表数据
+    table_data.value = list;
+    loading.value = false;
+};
+const select_all = ref<categoryList[]>([])
+const selection_change = (list: categoryList[]) => {
+    select_all.value = list;
+}
+const close_event = () => {
+    clear_search();
+    dialogVisible.value = false;
+};
+const emit = defineEmits(['confirm_event']);
+const confirm_event = () => {
+    const data_list = select_all.value;
+    if (!isEmpty(data_list)) {
+        emit('confirm_event', data_list);
+        clear_search();
+        dialogVisible.value = false;
+    }
+};
+const multipleTableRef = ref<InstanceType<typeof ElTable>>();
+const clear_search = () => {
+    select_all.value = [];
+    multipleTableRef.value!.clearSelection();
+}
+</script>
+
+<style scoped lang="scss">
+.container {
+    padding: 2rem;
+    .search-w {
+        width: 22.2rem;
+    }
+}
+.img {
+    width: 3.6rem;
+    height: 3.6rem;
+    border-radius: 0.4rem;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/footer-nav/footer-nav-content.vue b/src/components/footer-nav/footer-nav-content.vue
index de8b3a00..838505dc 100644
--- a/src/components/footer-nav/footer-nav-content.vue
+++ b/src/components/footer-nav/footer-nav-content.vue
@@ -22,7 +22,7 @@
                 <div class="mb-12 flex-row gap-10 jc-sb">
                     <div>导航内容</div>
                     <div class="flex-row gap-20 align-c">
-                        <div v-if="config.sync_bool" class="cr-primary c-pointer" @click="sync_sys_event">同步到系统</div>
+                        <div v-if="!config.sync_bool" class="cr-primary c-pointer" @click="sync_sys_event">同步到系统</div>
                         <div class="cr-primary c-pointer" @click="reset_event">恢复默认</div>
                     </div>
                 </div>
diff --git a/src/components/model-nav-group/model-nav-group-content.vue b/src/components/model-nav-group/model-nav-group-content.vue
index 4462f397..e8892a9f 100644
--- a/src/components/model-nav-group/model-nav-group-content.vue
+++ b/src/components/model-nav-group/model-nav-group-content.vue
@@ -34,7 +34,7 @@
             </card-container>
             <div class="divider-line"></div>
             <card-container>
-                <div class="mb-12">内容设置</div>
+                <div class="mb-12 flex-row align-c jc-sb">内容设置<span class="classify-style" @click="classify_add">从分类添加</span></div>
                 <div class="tips mt-10 mb-20 size-12">最多添加{{ form.nav_content_list.length }}张图片，建议尺寸90*90px</div>
                 <drag :data="form.nav_content_list" type="card" :space-col="27" @remove="remove" @on-sort="on_sort">
                     <template #default="scoped">
@@ -54,10 +54,12 @@
                 <el-button class="mt-20 mb-20 w" @click="add">+添加</el-button>
             </card-container>
         </el-form>
+        <category-dialog v-model:dialog-visible="dialogVisible" @confirm_event="confirm_event"></category-dialog>
     </div>
 </template>
 <script setup lang="ts">
 import { get_math } from "@/utils";
+import { isEmpty } from "lodash";
 
 interface Props {
     value: nav_group_content;
@@ -116,6 +118,31 @@ const remove = (index: number) => {
 const on_sort = (new_list: nav_group[]) => {
     form.value.nav_content_list = new_list;
 }
+//#region 弹窗相关
+const dialogVisible = ref(false);
+const classify_add = () => {
+    dialogVisible.value = true;
+}
+interface categoryList extends pageLinkList {
+    image: string;
+}
+const confirm_event = (list: categoryList[]) => {
+    list.forEach(item => {
+        // 如果图片为空，则为空数组
+        const img = !isEmpty(item.image) ? [{ id: Number(item.id), url: item.image, original: item.name, title: item.name, ext: '.png', type: 'img' }] : [];
+        form.value.nav_content_list.push({
+            id: get_math(),
+            img: img,
+            title: item?.name || '',
+            link: {
+                id: Number(item.id),
+                name: item.name,
+                page: `/pages/goods-search/goods-search?category_id=${ item.id }`
+            },
+        });
+    });
+}
+//#endregion
 </script>
 <style lang="scss" scoped>
 :deep(.size-12.cr-9.mt-10) {
@@ -124,4 +151,8 @@ const on_sort = (new_list: nav_group[]) => {
 .tips {
     color: $cr-info-dark;
 }
+.classify-style {
+    cursor: pointer;
+    color: $cr-main;
+}
 </style>
diff --git a/src/views/tabbar/components/settings/index.vue b/src/views/tabbar/components/settings/index.vue
index 9384d54b..b808ede7 100644
--- a/src/views/tabbar/components/settings/index.vue
+++ b/src/views/tabbar/components/settings/index.vue
@@ -29,7 +29,7 @@ const props = defineProps({
 const radio = ref('1'); // 创建一个响应式的数字变量，初始值为0
 const footer_config = {
     // 是否开启同步
-    sync_bool: false,
+    sync_bool: true,
 };
 </script>
 <style lang="scss" scoped>