From 8203f436cd9a64d85e96e63042f5523ef7e978aa Mon Sep 17 00:00:00 2001 From: haohao <1036606149@qq.com> Date: Sun, 26 Oct 2025 18:26:41 +0800 Subject: [PATCH 1/2] =?UTF-8?q?feat:=20=E3=80=90antd=E3=80=91=E3=80=90iot?= =?UTF-8?q?=E3=80=91=E8=AE=BE=E5=A4=87=E5=88=86=E7=BB=84=E4=BB=A3=E7=A0=81?= =?UTF-8?q?=E8=BF=81=E7=A7=BB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/views/iot/device/group/data.ts | 51 ++++++++++++------- .../src/views/iot/device/group/index.vue | 13 +---- .../group/modules/device-group-form.vue | 5 ++ 3 files changed, 38 insertions(+), 31 deletions(-) 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) { -- Gitee From fb481994bca5f3318a44372c185b5dc77f3b71b6 Mon Sep 17 00:00:00 2001 From: haohao <1036606149@qq.com> Date: Sun, 26 Oct 2025 19:04:54 +0800 Subject: [PATCH 2/2] =?UTF-8?q?feat:=20=E3=80=90antd=E3=80=91=E3=80=90iot?= =?UTF-8?q?=E3=80=91=E4=BA=A7=E5=93=81=E5=88=86=E7=B1=BB=E4=BB=A3=E7=A0=81?= =?UTF-8?q?=E8=BF=81=E7=A7=BB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/views/iot/product/category/data.ts | 51 +++++++------------ .../src/views/iot/product/category/index.vue | 18 +------ .../category/modules/ProductCategoryForm.vue | 33 +++++------- 3 files changed, 32 insertions(+), 70 deletions(-) diff --git a/apps/web-antd/src/views/iot/product/category/data.ts b/apps/web-antd/src/views/iot/product/category/data.ts index 2604b0406..4857bc7d2 100644 --- a/apps/web-antd/src/views/iot/product/category/data.ts +++ b/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, '分类名称不能为空') - .max(64, '分类名称长度不能超过 64 个字符'), - }, - { - fieldName: 'parentId', - label: '父级分类', - component: 'ApiTreeSelect', - componentProps: { - api: getSimpleProductCategoryList, - labelField: 'name', - valueField: 'id', - placeholder: '请选择父级分类', - allowClear: true, - }, + .min(1, '分类名字不能为空') + .max(64, '分类名字长度不能超过 64 个字符'), }, { 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: [ - { label: '开启', value: 1 }, - { label: '关闭', value: 0 }, - ], + options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'), + buttonStyle: 'solid', + 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', diff --git a/apps/web-antd/src/views/iot/product/category/index.vue b/apps/web-antd/src/views/iot/product/category/index.vue index 7344bd5de..476c5991e 100644 --- a/apps/web-antd/src/views/iot/product/category/index.vue +++ b/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, }); diff --git a/apps/web-antd/src/views/iot/product/category/modules/ProductCategoryForm.vue b/apps/web-antd/src/views/iot/product/category/modules/ProductCategoryForm.vue index b508b481e..d80ee2602 100644 --- a/apps/web-antd/src/views/iot/product/category/modules/ProductCategoryForm.vue +++ b/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 } - >(); - if (!data) { + + // 重置表单 + await formApi.resetForm(); + + const data = modalApi.getData(); + // 如果没有数据或没有 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) { - // 编辑模式：加载完整数据 - 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); + formData.value = await getProductCategory(data.id); + await formApi.setValues(formData.value); } finally { modalApi.unlock(); } -- Gitee