feat: 【antd】【iot】产品分类代码迁移

apps/web-antd/src/views/iot/product/category/data.ts

@@ -1,10 +1,11 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 
-import { DICT_TYPE } from '@vben/constants';
+import { CommonStatusEnum, DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
 
 import { z } from '#/adapter/form';
-import { getSimpleProductCategoryList } from '#/api/iot/product/category';
+import { getRangePickerDefaultProps } from '#/utils';
 
 /** 新增/修改产品分类的表单 */
 export function useFormSchema(): VbenFormSchema[] {
@@ -19,51 +20,37 @@ export function useFormSchema(): VbenFormSchema[] {
     },
     {
       fieldName: 'name',
-      label: '分类名称',
+      label: '分类名字',
       component: 'Input',
       componentProps: {
-        placeholder: '请输入分类名称',
+        placeholder: '请输入分类名字',
       },
       rules: z
         .string()
-        .min(1, '分类名称不能为空')
+        .min(1, '分类名字不能为空')
-        .max(64, '分类名称长度不能超过 64 个字符'),
+        .max(64, '分类名字长度不能超过 64 个字符'),
-    },
-    {
-      fieldName: 'parentId',
-      label: '父级分类',
-      component: 'ApiTreeSelect',
-      componentProps: {
-        api: getSimpleProductCategoryList,
-        labelField: 'name',
-        valueField: 'id',
-        placeholder: '请选择父级分类',
-        allowClear: true,
-      },
     },
     {
       fieldName: 'sort',
-      label: '排序',
+      label: '分类排序',
       component: 'InputNumber',
       componentProps: {
-        placeholder: '请输入排序',
+        placeholder: '请输入分类排序',
         class: 'w-full',
         min: 0,
       },
-      rules: 'required',
+      rules: z.number().min(0, '分类排序不能为空'),
     },
     {
       fieldName: 'status',
-      label: '状态',
+      label: '分类状态',
       component: 'RadioGroup',
-      defaultValue: 1,
       componentProps: {
-        options: [
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
-          { label: '开启', value: 1 },
+        buttonStyle: 'solid',
-          { label: '关闭', value: 0 },
+        optionType: 'button',
-        ],
       },
-      rules: 'required',
+      rules: z.number().default(CommonStatusEnum.ENABLE),
     },
     {
       fieldName: 'description',
@@ -82,10 +69,10 @@ export function useGridFormSchema(): VbenFormSchema[] {
   return [
     {
       fieldName: 'name',
-      label: '分类名称',
+      label: '分类名字',
       component: 'Input',
       componentProps: {
-        placeholder: '请输入分类名称',
+        placeholder: '请输入分类名字',
         allowClear: true,
       },
     },
@@ -94,9 +81,8 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '创建时间',
       component: 'RangePicker',
       componentProps: {
-        placeholder: ['开始日期', '结束日期'],
+        ...getRangePickerDefaultProps(),
         allowClear: true,
-        class: 'w-full',
       },
     },
   ];
@@ -114,7 +100,6 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
       field: 'name',
       title: '名字',
       minWidth: 200,
-      treeNode: true,
     },
     {
       field: 'sort',

apps/web-antd/src/views/iot/product/category/index.vue

@@ -3,7 +3,6 @@ import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { IotProductCategoryApi } from '#/api/iot/product/category';
 
 import { Page, useVbenModal } from '@vben/common-ui';
-import { handleTree } from '@vben/utils';
 
 import { message } from 'ant-design-vue';
 
@@ -70,16 +69,11 @@ const [Grid, gridApi] = useVbenVxeGrid({
     proxyConfig: {
       ajax: {
         query: async ({ page }, formValues) => {
-          const data = await getProductCategoryPage({
+          return await getProductCategoryPage({
             pageNo: page.currentPage,
             pageSize: page.pageSize,
             ...formValues,
           });
-          // 转换为树形结构
-          return {
-            ...data,
-            list: handleTree(data.list, 'id', 'parentId'),
-          };
         },
       },
     },
@@ -91,16 +85,6 @@ const [Grid, gridApi] = useVbenVxeGrid({
       refresh: true,
       search: true,
     },
-    treeConfig: {
-      parentField: 'parentId',
-      rowField: 'id',
-      transform: true,
-      expandAll: true,
-      reserve: true,
-      trigger: 'default',
-      iconOpen: '',
-      iconClose: '',
-    },
   } as VxeTableGridOptions<IotProductCategoryApi.ProductCategory>,
 });
 </script>

apps/web-antd/src/views/iot/product/category/modules/ProductCategoryForm.vue

@@ -63,13 +63,17 @@ const [Modal, modalApi] = useVbenModal({
   async onOpenChange(isOpen: boolean) {
     if (!isOpen) {
       formData.value = undefined;
+      formApi.resetForm();
       return;
     }
-    // 加载数据
+
-    let data = modalApi.getData<
+    // 重置表单
-      IotProductCategoryApi.ProductCategory & { parentId?: number }
+    await formApi.resetForm();
-    >();
+
-    if (!data) {
+    const data = modalApi.getData<IotProductCategoryApi.ProductCategory>();
+    // 如果没有数据或没有 id，表示是新增
+    if (!data || !data.id) {
+      formData.value = undefined;
       // 新增模式：设置默认值
       await formApi.setValues({
         sort: 0,
@@ -77,23 +81,12 @@ const [Modal, modalApi] = useVbenModal({
       });
       return;
     }
+
+    // 编辑模式：加载数据
     modalApi.lock();
     try {
-      if (data.id) {
+      formData.value = await getProductCategory(data.id);
-        // 编辑模式：加载完整数据
+      await formApi.setValues(formData.value);
-        data = await getProductCategory(data.id);
-      } else if (data.parentId) {
-        // 新增下级分类：设置父级ID
-        await formApi.setValues({
-          parentId: data.parentId,
-          sort: 0,
-          status: 1,
-        });
-        return;
-      }
-      // 设置到 values
-      formData.value = data;
-      await formApi.setValues(data);
     } finally {
       modalApi.unlock();
     }