From 00ee233f14c2c13fe5d93ff4063f84d35b5a1770 Mon Sep 17 00:00:00 2001
From: haohao <1036606149@qq.com>
Date: Tue, 2 Dec 2025 16:17:00 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=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=E5=92=8C=E4=BA=A7?=
 =?UTF-8?q?=E5=93=81=E5=88=86=E7=B1=BB=E8=A1=A8=E5=8D=95=E7=AE=80=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/views/iot/device/group/index.vue      |  4 +-
 .../{device-group-form.vue => form.vue}       | 44 +++++--------------
 .../src/views/iot/product/category/index.vue  |  4 +-
 .../{product-category-form.vue => form.vue}   | 13 +-----
 4 files changed, 17 insertions(+), 48 deletions(-)
 rename apps/web-antd/src/views/iot/device/group/modules/{device-group-form.vue => form.vue} (64%)
 rename apps/web-antd/src/views/iot/product/category/modules/{product-category-form.vue => form.vue} (88%)

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 d72341a6b..0d3f7b6ab 100644
--- a/apps/web-antd/src/views/iot/device/group/index.vue
+++ b/apps/web-antd/src/views/iot/device/group/index.vue
@@ -11,12 +11,12 @@ import { deleteDeviceGroup, getDeviceGroupPage } from '#/api/iot/device/group';
 import { $t } from '#/locales';
 
 import { useGridColumns, useGridFormSchema } from './data';
-import DeviceGroupForm from './modules/device-group-form.vue';
+import Form from './modules/form.vue';
 
 defineOptions({ name: 'IoTDeviceGroup' });
 
 const [FormModal, formModalApi] = useVbenModal({
-  connectedComponent: DeviceGroupForm,
+  connectedComponent: Form,
   destroyOnClose: true,
 });
 
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/form.vue
similarity index 64%
rename from apps/web-antd/src/views/iot/device/group/modules/device-group-form.vue
rename to apps/web-antd/src/views/iot/device/group/modules/form.vue
index 90529de77..3e1a2d521 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/form.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script lang="ts" setup>
 import type { IotDeviceGroupApi } from '#/api/iot/device/group';
 
 import { computed, ref } from 'vue';
@@ -17,17 +17,9 @@ import { $t } from '#/locales';
 
 import { useFormSchema } from '../data';
 
-defineOptions({ name: 'IoTDeviceGroupForm' });
-
-// TODO @haohao：web-antd/src/views/iot/product/category/modules/product-category-form.vue 类似问题
-
-const emit = defineEmits<{
-  success: [];
-}>();
-
+const emit = defineEmits(['success']);
 const formData = ref<IotDeviceGroupApi.DeviceGroup>();
-
-const modalTitle = computed(() => {
+const getTitle = computed(() => {
   return formData.value?.id
     ? $t('ui.actionTitle.edit', ['设备分组'])
     : $t('ui.actionTitle.create', ['设备分组']);
@@ -40,11 +32,9 @@ const [Form, formApi] = useVbenForm({
     },
   },
   schema: useFormSchema(),
-  showCollapseButton: false,
   showDefaultActions: false,
 });
 
-// TODO @haohao：参考别的 form；1）文件的命名可以简化；2）代码可以在简化下；
 const [Modal, modalApi] = useVbenModal({
   async onConfirm() {
     const { valid } = await formApi.validate();
@@ -52,17 +42,13 @@ const [Modal, modalApi] = useVbenModal({
       return;
     }
     modalApi.lock();
-
+    // 提交表单
+    const data = (await formApi.getValues()) as IotDeviceGroupApi.DeviceGroup;
     try {
-      const values = await formApi.getValues();
-
       await (formData.value?.id
-        ? updateDeviceGroup({
-            ...values,
-            id: formData.value.id,
-          } as IotDeviceGroupApi.DeviceGroup)
-        : createDeviceGroup(values as IotDeviceGroupApi.DeviceGroup));
-
+        ? updateDeviceGroup(data)
+        : createDeviceGroup(data));
+      // 关闭并提示
       await modalApi.close();
       emit('success');
       message.success($t('ui.actionMessage.operationSuccess'));
@@ -70,28 +56,20 @@ const [Modal, modalApi] = useVbenModal({
       modalApi.unlock();
     }
   },
-
   async onOpenChange(isOpen: boolean) {
     if (!isOpen) {
       formData.value = undefined;
-      await formApi.resetForm();
       return;
     }
-
-    // 重置表单
-    await formApi.resetForm();
-
+    // 加载数据
     const data = modalApi.getData<IotDeviceGroupApi.DeviceGroup>();
-    // 如果没有数据或没有 id，表示是新增
     if (!data || !data.id) {
-      formData.value = undefined;
       return;
     }
-
-    // 编辑模式：加载数据
     modalApi.lock();
     try {
       formData.value = await getDeviceGroup(data.id);
+      // 设置到 values
       await formApi.setValues(formData.value);
     } finally {
       modalApi.unlock();
@@ -101,7 +79,7 @@ const [Modal, modalApi] = useVbenModal({
 </script>
 
 <template>
-  <Modal :title="modalTitle" class="w-2/5">
+  <Modal :title="getTitle">
     <Form class="mx-4" />
   </Modal>
 </template>
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 05a56ee6d..3dc7201b7 100644
--- a/apps/web-antd/src/views/iot/product/category/index.vue
+++ b/apps/web-antd/src/views/iot/product/category/index.vue
@@ -14,12 +14,12 @@ import {
 import { $t } from '#/locales';
 
 import { useGridColumns, useGridFormSchema } from './data';
-import ProductCategoryForm from './modules/product-category-form.vue';
+import Form from './modules/form.vue';
 
 defineOptions({ name: 'IoTProductCategory' });
 
 const [FormModal, formModalApi] = useVbenModal({
-  connectedComponent: ProductCategoryForm,
+  connectedComponent: Form,
   destroyOnClose: true,
 });
 
diff --git a/apps/web-antd/src/views/iot/product/category/modules/product-category-form.vue b/apps/web-antd/src/views/iot/product/category/modules/form.vue
similarity index 88%
rename from apps/web-antd/src/views/iot/product/category/modules/product-category-form.vue
rename to apps/web-antd/src/views/iot/product/category/modules/form.vue
index 792c7ddac..df2290639 100644
--- a/apps/web-antd/src/views/iot/product/category/modules/product-category-form.vue
+++ b/apps/web-antd/src/views/iot/product/category/modules/form.vue
@@ -17,8 +17,6 @@ import { $t } from '#/locales';
 
 import { useFormSchema } from '../data';
 
-// TODO @haohao：应该是 form.vue，不用前缀；
-
 const emit = defineEmits(['success']);
 const formData = ref<IotProductCategoryApi.ProductCategory>();
 const getTitle = computed(() => {
@@ -40,7 +38,6 @@ const [Form, formApi] = useVbenForm({
   showDefaultActions: false,
 });
 
-// TODO @haohao：参考 apps/web-antd/src/views/system/dept/modules/form.vue 简化 useVbenModal 里的代码；
 const [Modal, modalApi] = useVbenModal({
   async onConfirm() {
     const { valid } = await formApi.validate();
@@ -66,25 +63,19 @@ const [Modal, modalApi] = useVbenModal({
   async onOpenChange(isOpen: boolean) {
     if (!isOpen) {
       formData.value = undefined;
-      formApi.resetForm();
       return;
     }
-
-    // 重置表单
-    await formApi.resetForm();
-
+    // 加载数据
     const data = modalApi.getData<IotProductCategoryApi.ProductCategory>();
-    // 如果没有数据或没有 id，表示是新增
     if (!data || !data.id) {
-      formData.value = undefined;
       // 新增模式：设置默认值
+      formData.value = undefined;
       await formApi.setValues({
         sort: 0,
         status: 1,
       });
       return;
     }
-
     // 编辑模式：加载数据
     modalApi.lock();
     try {