From 473aef6de9a29a57e114d0c2f79111ed02e0dc24 Mon Sep 17 00:00:00 2001
From: dafang <1073816412@qq.com>
Date: Fri, 7 Nov 2025 18:29:20 +0800
Subject: [PATCH] =?UTF-8?q?feat(mall):=E4=BC=98=E5=8C=96=E5=95=86=E5=93=81?=
 =?UTF-8?q?=E5=88=86=E7=B1=BB=E8=A1=A8=E5=8D=95=E4=B8=8A=E7=BA=A7=E5=88=86?=
 =?UTF-8?q?=E7=B1=BB=E9=80=89=E6=8B=A9=E5=99=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 将原有的下拉选择器替换为树形选择器，提升用户体验
- 新增 getCategoryTree 方法构建分类树结构
- 引入 handleTree 工具函数处理分类数据层级关系
- 修复分类图标列空值时显示异常的问题
---
 .../mall/product/category/CategoryForm.vue    | 32 ++++++++++++-------
 src/views/mall/product/category/index.vue     |  2 +-
 2 files changed, 21 insertions(+), 13 deletions(-)

diff --git a/src/views/mall/product/category/CategoryForm.vue b/src/views/mall/product/category/CategoryForm.vue
index 8e89ae25b..a702c6619 100644
--- a/src/views/mall/product/category/CategoryForm.vue
+++ b/src/views/mall/product/category/CategoryForm.vue
@@ -8,15 +8,14 @@
       v-loading="formLoading"
     >
       <el-form-item label="上级分类" prop="parentId">
-        <el-select v-model="formData.parentId" placeholder="请选择上级分类">
-          <el-option :key="0" label="顶级分类" :value="0" />
-          <el-option
-            v-for="item in categoryList"
-            :key="item.id"
-            :label="item.name"
-            :value="item.id"
-          />
-        </el-select>
+        <el-tree-select
+          v-model="formData.parentId"
+          :data="categoryTree"
+          :default-expanded-keys="[0]"
+          :props="defaultProps"
+          check-strictly
+          node-key="id"
+        />
       </el-form-item>
       <el-form-item label="分类名称" prop="name">
         <el-input v-model="formData.name" placeholder="请输入分类名称" />
@@ -50,6 +49,7 @@
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import { CommonStatusEnum } from '@/utils/constants'
 import * as ProductCategoryApi from '@/api/mall/product/category'
+import { defaultProps, handleTree } from "@/utils/tree";
 
 defineOptions({ name: 'ProductCategory' })
 
@@ -69,12 +69,20 @@ const formData = ref({
 const formRules = reactive({
   parentId: [{ required: true, message: '请选择上级分类', trigger: 'blur' }],
   name: [{ required: true, message: '分类名称不能为空', trigger: 'blur' }],
-  picUrl: [{ required: true, message: '分类图片不能为空', trigger: 'blur' }],
   sort: [{ required: true, message: '分类排序不能为空', trigger: 'blur' }],
   status: [{ required: true, message: '开启状态不能为空', trigger: 'blur' }]
 })
 const formRef = ref() // 表单 Ref
-const categoryList = ref<any[]>([]) // 分类树
+/** 获取下拉框[上级分类]的数据  */
+const categoryTree = ref<Tree[]>([]) // 树形结构
+
+const getCategoryTree = async () => {
+  categoryTree.value = []
+  const res = await ProductCategoryApi.getCategoryList(null)
+  let category: Tree = {id: 0, name: '顶级分类', children: []}
+  category.children = handleTree(res)
+  categoryTree.value.push(category)
+}
 
 /** 打开弹窗 */
 const open = async (type: string, id?: number) => {
@@ -92,7 +100,7 @@ const open = async (type: string, id?: number) => {
     }
   }
   // 获得分类树
-  categoryList.value = await ProductCategoryApi.getCategoryList({ parentId: 0 })
+  await getCategoryTree()
 }
 defineExpose({ open }) // 提供 open 方法，用于打开弹窗
 
diff --git a/src/views/mall/product/category/index.vue b/src/views/mall/product/category/index.vue
index a47684b5c..2b51fd862 100644
--- a/src/views/mall/product/category/index.vue
+++ b/src/views/mall/product/category/index.vue
@@ -40,7 +40,7 @@
       <el-table-column label="名称" min-width="240" prop="name" sortable />
       <el-table-column label="分类图标" align="center" min-width="80" prop="picUrl">
         <template #default="scope">
-          <img :src="scope.row.picUrl" alt="移动端分类图" class="h-36px" />
+          <img v-if="scope.row.picUrl" :src="scope.row.picUrl" alt="移动端分类图" class="h-36px" />
         </template>
       </el-table-column>
       <el-table-column label="排序" align="center" min-width="150" prop="sort" />
-- 
Gitee