refactor: oss配置 useBeforeCloseDiff

apps/web-antd/src/views/system/oss-config/oss-config-drawer.vue

@@ -13,6 +13,7 @@ import {
   ossConfigInfo,
   ossConfigUpdate,
 } from '#/api/system/oss-config';
+import { defaultFormValueGetter, useBeforeCloseDiff } from '#/utils/popup';
 
 import { drawerSchema } from './data';
 
@@ -33,27 +34,38 @@ const [BasicForm, formApi] = useVbenForm({
   wrapperClass: 'grid-cols-3',
 });
 
+const { onBeforeClose, markInitialized, resetInitialized } = useBeforeCloseDiff(
+  {
+    initializedGetter: defaultFormValueGetter(formApi),
+    currentGetter: defaultFormValueGetter(formApi),
+  },
+);
+
 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;
     if (isUpdate.value && id) {
       const record = await ossConfigInfo(id);
       await formApi.setValues(record);
     }
+    await markInitialized();
+
     drawerApi.drawerLoading(false);
   },
 });
 
 async function handleConfirm() {
   try {
-    drawerApi.drawerLoading(true);
+    drawerApi.lock(true);
     /**
      * 这里解构出来的values只能获取到自定义校验参数的值
      * 需要自行调用formApi.getValues()获取表单值
@@ -64,23 +76,24 @@ async function handleConfirm() {
     }
     const data = cloneDeep(await formApi.getValues());
     await (isUpdate.value ? ossConfigUpdate(data) : ossConfigAdd(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-[650px]">
+  <BasicDrawer :title="title" class="w-[650px]">
     <BasicForm>
       <template #tip>
         <div class="ml-7 w-full">