feat: 【antd】【iot】设备分组代码迁移

apps/web-antd/src/views/iot/device/group/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 { getSimpleDeviceGroupList } from '#/api/iot/device/group';
+import { getRangePickerDefaultProps } from '#/utils';
 
 /** 新增/修改设备分组的表单 */
 export function useFormSchema(): VbenFormSchema[] {
@@ -30,16 +31,15 @@ export function useFormSchema(): VbenFormSchema[] {
         .max(64, '分组名称长度不能超过 64 个字符'),
     },
     {
-      fieldName: 'parentId',
+      fieldName: 'status',
-      label: '父级分组',
+      label: '分组状态',
-      component: 'ApiTreeSelect',
+      component: 'RadioGroup',
       componentProps: {
-        api: getSimpleDeviceGroupList,
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
-        labelField: 'name',
+        buttonStyle: 'solid',
-        valueField: 'id',
+        optionType: 'button',
-        placeholder: '请选择父级分组',
-        allowClear: true,
       },
+      rules: z.number().default(CommonStatusEnum.ENABLE),
     },
     {
       fieldName: 'description',
@@ -65,6 +65,15 @@ export function useGridFormSchema(): VbenFormSchema[] {
         allowClear: true,
       },
     },
+    {
+      fieldName: 'createTime',
+      label: '创建时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+    },
   ];
 }
 
@@ -72,14 +81,13 @@ export function useGridFormSchema(): VbenFormSchema[] {
 export function useGridColumns(): VxeTableGridOptions['columns'] {
   return [
     {
-      field: 'name',
+      field: 'id',
-      title: '分组名称',
+      title: 'ID',
-      minWidth: 200,
+      minWidth: 100,
-      treeNode: true,
     },
     {
-      field: 'description',
+      field: 'name',
-      title: '分组描述',
+      title: '分组名称',
       minWidth: 200,
     },
     {
@@ -92,9 +100,9 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
       },
     },
     {
-      field: 'deviceCount',
+      field: 'description',
-      title: '设备数量',
+      title: '分组描述',
-      minWidth: 100,
+      minWidth: 200,
     },
     {
       field: 'createTime',
@@ -102,6 +110,11 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
       minWidth: 180,
       formatter: 'formatDateTime',
     },
+    {
+      field: 'deviceCount',
+      title: '设备数量',
+      minWidth: 100,
+    },
     {
       title: '操作',
       width: 200,

apps/web-antd/src/views/iot/device/group/index.vue

@@ -3,7 +3,6 @@ import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { IotDeviceGroupApi } from '#/api/iot/device/group';
 
 import { Page, useVbenModal } from '@vben/common-ui';
-import { handleTree } from '@vben/utils';
 
 import { message } from 'ant-design-vue';
 
@@ -62,24 +61,14 @@ const [Grid, gridApi] = useVbenVxeGrid({
     columns: useGridColumns(),
     height: 'auto',
     keepSource: true,
-    treeConfig: {
-      transform: true,
-      rowField: 'id',
-      parentField: 'parentId',
-    },
     proxyConfig: {
       ajax: {
         query: async ({ page }, formValues) => {
-          const data = await getDeviceGroupPage({
+          return await getDeviceGroupPage({
             pageNo: page.currentPage,
             pageSize: page.pageSize,
             ...formValues,
           });
-          // 转换为树形结构
-          return {
-            ...data,
-            list: handleTree(data.list, 'id', 'parentId'),
-          };
         },
       },
     },

apps/web-antd/src/views/iot/device/group/modules/device-group-form.vue

@@ -39,6 +39,7 @@ const [Form, formApi] = useVbenForm({
   },
   schema: useFormSchema(),
   showCollapseButton: false,
+  showDefaultActions: false,
 });
 
 const [Modal, modalApi] = useVbenModal({
@@ -70,9 +71,13 @@ const [Modal, modalApi] = useVbenModal({
   async onOpenChange(isOpen: boolean) {
     if (!isOpen) {
       formData.value = undefined;
+      formApi.resetForm();
       return;
     }
 
+    // 重置表单
+    await formApi.resetForm();
+
     const data = modalApi.getData<IotDeviceGroupApi.DeviceGroup>();
     // 如果没有数据或没有 id，表示是新增
     if (!data || !data.id) {