diff --git a/apps/web-antd/src/views/iot/device/group/data.ts b/apps/web-antd/src/views/iot/device/group/data.ts index 0bc313e52..01b4cc3f9 100644 --- a/apps/web-antd/src/views/iot/device/group/data.ts +++ b/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', - label: '父级分组', - component: 'ApiTreeSelect', + fieldName: 'status', + label: '分组状态', + component: 'RadioGroup', componentProps: { - api: getSimpleDeviceGroupList, - labelField: 'name', - valueField: 'id', - placeholder: '请选择父级分组', - allowClear: true, + options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'), + buttonStyle: 'solid', + optionType: 'button', }, + 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', - title: '分组名称', - minWidth: 200, - treeNode: true, + field: 'id', + title: 'ID', + minWidth: 100, }, { - field: 'description', - title: '分组描述', + field: 'name', + title: '分组名称', minWidth: 200, }, { @@ -92,9 +100,9 @@ export function useGridColumns(): VxeTableGridOptions['columns'] { }, }, { - field: 'deviceCount', - title: '设备数量', - minWidth: 100, + field: 'description', + title: '分组描述', + 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, diff --git a/apps/web-antd/src/views/iot/device/group/index.vue b/apps/web-antd/src/views/iot/device/group/index.vue index f6a0992f8..ebf33e9be 100644 --- a/apps/web-antd/src/views/iot/device/group/index.vue +++ b/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'), - }; }, }, }, diff --git a/apps/web-antd/src/views/iot/device/group/modules/device-group-form.vue b/apps/web-antd/src/views/iot/device/group/modules/device-group-form.vue index fe010aba1..28168c0b4 100644 --- a/apps/web-antd/src/views/iot/device/group/modules/device-group-form.vue +++ b/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(); // 如果没有数据或没有 id,表示是新增 if (!data || !data.id) {