From 45ab964050b97543767c6e7d69804c8eef150f44 Mon Sep 17 00:00:00 2001
From: "xinxin.wu" <xinxin.wu@fit2cloud.com>
Date: Thu, 24 Aug 2023 16:28:06 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E5=85=AC=E5=85=B1):=20=E7=A6=BB=E5=BC=80?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E6=8F=90=E7=A4=BAhooks=E5=92=8C=E5=8F=96?=
 =?UTF-8?q?=E6=B6=88=E5=BC=82=E6=AD=A5=E5=87=BD=E6=95=B0hooks?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/pure/ms-dialog/index.vue   | 15 ++++--
 frontend/src/hooks/useAsyncFun.ts             | 23 ---------
 frontend/src/hooks/useLeaveUnSaveTip.ts       | 48 +++++++++++++++++++
 frontend/src/locale/en-US/common.ts           |  3 ++
 frontend/src/locale/zh-CN/common.ts           |  3 ++
 5 files changed, 66 insertions(+), 26 deletions(-)
 delete mode 100644 frontend/src/hooks/useAsyncFun.ts
 create mode 100644 frontend/src/hooks/useLeaveUnSaveTip.ts

diff --git a/frontend/src/components/pure/ms-dialog/index.vue b/frontend/src/components/pure/ms-dialog/index.vue
index 70178604a2..d149f5c724 100644
--- a/frontend/src/components/pure/ms-dialog/index.vue
+++ b/frontend/src/components/pure/ms-dialog/index.vue
@@ -35,7 +35,7 @@
             <a-button
               class="ml-3"
               type="primary"
-              :loading="props.loading"
+              :loading="confirmLoading"
               :disabled="props.disabledOk"
               @click="confirmHandler"
             >
@@ -74,7 +74,6 @@
     title: string;
     confirm?: (enable: boolean | undefined) => void; // 确定
     visible: boolean;
-    loading: boolean;
     close: () => void;
   };
 
@@ -118,9 +117,19 @@
     props?.close();
   };
 
+  const confirmLoading = ref<boolean>(false);
+
   const confirmHandler = async () => {
     if (props.confirm) {
-      props.confirm(switchEnable.value);
+      confirmLoading.value = true;
+      try {
+        await props.confirm(switchEnable.value);
+        confirmLoading.value = false;
+      } catch (error) {
+        console.log(error);
+      } finally {
+        confirmLoading.value = false;
+      }
     }
   };
 </script>
diff --git a/frontend/src/hooks/useAsyncFun.ts b/frontend/src/hooks/useAsyncFun.ts
deleted file mode 100644
index 3e126b9c35..0000000000
--- a/frontend/src/hooks/useAsyncFun.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { ref } from 'vue';
-
-export default function useAsyncHandler() {
-  const loading = ref<boolean>(false);
-
-  async function handleAsyncProcess<T>(reqAsyncFun: T): Promise<any> {
-    loading.value = true;
-    try {
-      await reqAsyncFun;
-    } catch (error) {
-      console.log(error);
-      loading.value = false;
-      return Promise.reject();
-    } finally {
-      loading.value = false;
-    }
-  }
-
-  return {
-    loading,
-    handleAsyncProcess,
-  };
-}
diff --git a/frontend/src/hooks/useLeaveUnSaveTip.ts b/frontend/src/hooks/useLeaveUnSaveTip.ts
new file mode 100644
index 0000000000..f1fc401065
--- /dev/null
+++ b/frontend/src/hooks/useLeaveUnSaveTip.ts
@@ -0,0 +1,48 @@
+import { ref, onUnmounted } from 'vue';
+import useModal from '@/hooks/useModal';
+import { onBeforeRouteLeave } from 'vue-router';
+import { useI18n } from '@/hooks/useI18n';
+
+// 离开页面确认提示
+export default function useLeaveUnSaveTip() {
+  const isSave = ref(false);
+  const { openModal } = useModal();
+  const { t } = useI18n();
+
+  const setSaveStatus = (status: boolean) => {
+    isSave.value = status;
+  };
+
+  onBeforeRouteLeave((to, from, next) => {
+    if (to.path === from.path) {
+      return;
+    }
+    // 如果已保存
+    if (isSave.value) {
+      next();
+    } else {
+      openModal({
+        type: 'error',
+        title: t('common.unSaveLeaveTitle'),
+        content: t('common.unSaveLeaveContent'),
+        okText: t('common.leave'),
+        cancelText: t('common.cancel'),
+        okButtonProps: {
+          status: 'normal',
+        },
+        onBeforeOk: async () => {
+          setSaveStatus(true);
+          next();
+        },
+        hideCancel: false,
+      });
+    }
+  });
+  onUnmounted(() => {
+    isSave.value = false;
+  });
+
+  return {
+    setSaveStatus,
+  };
+}
diff --git a/frontend/src/locale/en-US/common.ts b/frontend/src/locale/en-US/common.ts
index 97efe0e286..48f1573462 100644
--- a/frontend/src/locale/en-US/common.ts
+++ b/frontend/src/locale/en-US/common.ts
@@ -40,4 +40,7 @@ export default {
   'common.admin': 'Admin',
   'common.revokeDelete': 'Revoke delete',
   'common.revokeDeleteSuccess': 'Revoke delete success',
+  'common.unSaveLeaveTitle': 'Leave this page?',
+  'common.unSaveLeaveContent': 'The system may not save your changes',
+  'common.leave': 'Leave',
 };
diff --git a/frontend/src/locale/zh-CN/common.ts b/frontend/src/locale/zh-CN/common.ts
index 5d339f8ec0..a34d36e3a8 100644
--- a/frontend/src/locale/zh-CN/common.ts
+++ b/frontend/src/locale/zh-CN/common.ts
@@ -40,4 +40,7 @@ export default {
   'common.admin': '管理员',
   'common.revokeDelete': '撤销删除',
   'common.revokeDeleteSuccess': '已撤销删除',
+  'common.unSaveLeaveTitle': '离开此页面？',
+  'common.unSaveLeaveContent': '系统可能不会保存你所做的更改',
+  'common.leave': '离开',
 };