From c4962aaf85d7ee4a3729a99aef022de79972e8a0 Mon Sep 17 00:00:00 2001
From: dap <15891557205@163.com>
Date: Tue, 8 Apr 2025 10:51:16 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E5=AE=A2=E6=88=B7=E7=AB=AF?=
 =?UTF-8?q?=E7=AE=A1=E7=90=86useBeforeCloseDiff?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/views/system/client/client-drawer.vue | 27 ++++++++++++++-----
 1 file changed, 20 insertions(+), 7 deletions(-)

diff --git a/apps/web-antd/src/views/system/client/client-drawer.vue b/apps/web-antd/src/views/system/client/client-drawer.vue
index bcbed4ec..e67cb46c 100644
--- a/apps/web-antd/src/views/system/client/client-drawer.vue
+++ b/apps/web-antd/src/views/system/client/client-drawer.vue
@@ -7,6 +7,7 @@ import { cloneDeep } from '@vben/utils';
 
 import { useVbenForm } from '#/adapter/form';
 import { clientAdd, clientInfo, clientUpdate } from '#/api/system/client';
+import { defaultFormValueGetter, useBeforeCloseDiff } from '#/utils/popup';
 
 import { drawerSchema } from './data';
 import SecretInput from './secret-input.vue';
@@ -55,6 +56,13 @@ function setupForm(update: boolean) {
   ]);
 }
 
+const { onBeforeClose, markInitialized, resetInitialized } = useBeforeCloseDiff(
+  {
+    initializedGetter: defaultFormValueGetter(formApi),
+    currentGetter: defaultFormValueGetter(formApi),
+  },
+);
+
 // 提取生成状态字段Schema的函数
 const getStatusSchema = (disabled: boolean) => [
   {
@@ -64,13 +72,15 @@ const getStatusSchema = (disabled: boolean) => [
 ];
 
 const [BasicDrawer, drawerApi] = useVbenDrawer({
-  onCancel: handleCancel,
+  onBeforeClose,
+  onClosed: handleClosed,
   onConfirm: handleConfirm,
   async onOpenChange(isOpen) {
     if (!isOpen) {
       return null;
     }
     drawerApi.drawerLoading(true);
+
     const { id } = drawerApi.getData() as { id?: number | string };
     isUpdate.value = !!id;
     // 初始化
@@ -84,36 +94,39 @@ const [BasicDrawer, drawerApi] = useVbenDrawer({
       // 新增模式: 确保状态字段可用
       formApi.updateSchema(getStatusSchema(false));
     }
+    await markInitialized();
+
     drawerApi.drawerLoading(false);
   },
 });
 
 async function handleConfirm() {
   try {
-    drawerApi.drawerLoading(true);
+    drawerApi.lock(true);
     const { valid } = await formApi.validate();
     if (!valid) {
       return;
     }
     const data = cloneDeep(await formApi.getValues());
     await (isUpdate.value ? clientUpdate(data) : clientAdd(data));
+    resetInitialized();
     emit('reload');
-    await handleCancel();
+    drawerApi.close();
   } catch (error) {
     console.error(error);
   } finally {
-    drawerApi.drawerLoading(false);
+    drawerApi.lock(false);
   }
 }
 
-async function handleCancel() {
-  drawerApi.close();
+async function handleClosed() {
   await formApi.resetForm();
+  resetInitialized();
 }
 </script>
 
 <template>
-  <BasicDrawer :close-on-click-modal="false" :title="title" class="w-[600px]">
+  <BasicDrawer :title="title" class="w-[600px]">
     <BasicForm>
       <template #clientSecret="slotProps">
         <SecretInput v-bind="slotProps" :disabled="isUpdate" />