From 07587c0faf7939dc659a04883a96f48fb3de87d2 Mon Sep 17 00:00:00 2001
From: dap <15891557205@163.com>
Date: Mon, 7 Apr 2025 19:02:28 +0800
Subject: [PATCH] =?UTF-8?q?update:=20=E7=94=A8=E6=88=B7=E7=AE=A1=E7=90=86?=
 =?UTF-8?q?=20=E8=A1=A8=E5=8D=95=E6=9B=B4=E6=96=B0(=E9=9D=9E=E6=9C=80?=
 =?UTF-8?q?=E7=BB=88=E6=96=B9=E6=A1=88)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/views/system/user/user-drawer.vue     | 28 +++++++++++++------
 .../ui-kit/popup-ui/src/drawer/drawer-api.ts  |  4 +--
 .../ui-kit/popup-ui/src/drawer/drawer.ts      |  4 +--
 3 files changed, 24 insertions(+), 12 deletions(-)

diff --git a/apps/web-antd/src/views/system/user/user-drawer.vue b/apps/web-antd/src/views/system/user/user-drawer.vue
index f3ae9e58..afd0fce2 100644
--- a/apps/web-antd/src/views/system/user/user-drawer.vue
+++ b/apps/web-antd/src/views/system/user/user-drawer.vue
@@ -18,6 +18,7 @@ import {
   userAdd,
   userUpdate,
 } from '#/api/system/user';
+import { defaultFormValueGetter, useBeforeCloseDiff } from '#/utils/popup';
 import { authScopeOptions } from '#/views/system/role/data';
 
 import { drawerSchema } from './data';
@@ -134,8 +135,15 @@ async function loadDefaultPassword(update: boolean) {
   }
 }
 
+const { onBeforeClose, updateInitialized, setSubmitted, resetInitialized } =
+  useBeforeCloseDiff({
+    initializedGetter: defaultFormValueGetter(formApi),
+    currentGetter: defaultFormValueGetter(formApi),
+  });
+
 const [BasicDrawer, drawerApi] = useVbenDrawer({
-  onCancel: handleCancel,
+  onBeforeClose,
+  onClosed: handleClosed,
   onConfirm: handleConfirm,
   async onOpenChange(isOpen) {
     if (!isOpen) {
@@ -149,6 +157,7 @@ const [BasicDrawer, drawerApi] = useVbenDrawer({
       return null;
     }
     drawerApi.drawerLoading(true);
+
     const { id } = drawerApi.getData() as { id?: number | string };
     isUpdate.value = !!id;
     /** update时 禁用用户名修改 不显示密码框 */
@@ -199,36 +208,39 @@ const [BasicDrawer, drawerApi] = useVbenDrawer({
         setupPostOptions(user.deptId),
       ]);
     }
+    await updateInitialized();
+
     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 ? userUpdate(data) : userAdd(data));
+    setSubmitted();
     emit('reload');
-    await handleCancel();
+    drawerApi.close();
   } catch (error) {
     console.error(error);
   } finally {
-    drawerApi.drawerLoading(false);
+    drawerApi.lock(false);
   }
 }
 
-async function handleCancel() {
-  drawerApi.close();
-  await formApi.resetForm();
+async function handleClosed() {
+  formApi.resetForm();
+  resetInitialized();
 }
 </script>
 
 <template>
-  <BasicDrawer :close-on-click-modal="false" :title="title" class="w-[600px]">
+  <BasicDrawer :title="title" class="w-[600px]">
     <BasicForm />
   </BasicDrawer>
 </template>
diff --git a/packages/@core/ui-kit/popup-ui/src/drawer/drawer-api.ts b/packages/@core/ui-kit/popup-ui/src/drawer/drawer-api.ts
index 525596e2..d2e7d690 100644
--- a/packages/@core/ui-kit/popup-ui/src/drawer/drawer-api.ts
+++ b/packages/@core/ui-kit/popup-ui/src/drawer/drawer-api.ts
@@ -88,10 +88,10 @@ export class DrawerApi {
   /**
    * 关闭弹窗
    */
-  close() {
+  async close() {
     // 通过 onBeforeClose 钩子函数来判断是否允许关闭弹窗
     // 如果 onBeforeClose 返回 false，则不关闭弹窗
-    const allowClose = this.api.onBeforeClose?.() ?? true;
+    const allowClose = (await this.api.onBeforeClose?.()) ?? true;
     if (allowClose) {
       this.store.setState((prev) => ({
         ...prev,
diff --git a/packages/@core/ui-kit/popup-ui/src/drawer/drawer.ts b/packages/@core/ui-kit/popup-ui/src/drawer/drawer.ts
index b3ae0fb8..30009a64 100644
--- a/packages/@core/ui-kit/popup-ui/src/drawer/drawer.ts
+++ b/packages/@core/ui-kit/popup-ui/src/drawer/drawer.ts
@@ -1,6 +1,6 @@
 import type { Component, Ref } from 'vue';
 
-import type { ClassType } from '@vben-core/typings';
+import type { ClassType, MaybePromise } from '@vben-core/typings';
 
 import type { DrawerApi } from './drawer-api';
 
@@ -151,7 +151,7 @@ export interface DrawerApiOptions extends DrawerState {
    * 关闭前的回调，返回 false 可以阻止关闭
    * @returns
    */
-  onBeforeClose?: () => void;
+  onBeforeClose?: () => MaybePromise<boolean | undefined>;
   /**
    * 点击取消按钮的回调
    */