Pre Merge pull request !833 from 大方/feature/category-hierarchy-enhancement

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' })
 
@@ -71,12 +71,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) => {
@@ -94,7 +102,7 @@ const open = async (type: string, id?: number) => {
     }
   }
   // 获得分类树
-  categoryList.value = await ProductCategoryApi.getCategoryList({ parentId: 0 })
+  await getCategoryTree()
 }
 defineExpose({ open }) // 提供 open 方法，用于打开弹窗
 

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" />