From ffd580439cc1ade5bdddfa4bc5b21a5692e99fbc Mon Sep 17 00:00:00 2001
From: hlinx <327159425@qq.com>
Date: Wed, 18 Sep 2024 17:07:30 +0800
Subject: [PATCH] =?UTF-8?q?fix(frontend):=20=E5=8D=95=E6=8D=AE=E8=AF=A6?=
 =?UTF-8?q?=E6=83=85=20loading=20#6976?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../views/tickets/my-tickets/components/details/Index.vue | 5 +++--
 .../components/details/components/flow/Index.vue          | 8 +++++---
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/dbm-ui/frontend/src/views/tickets/my-tickets/components/details/Index.vue b/dbm-ui/frontend/src/views/tickets/my-tickets/components/details/Index.vue
index 94216c49b7..2e8936467e 100644
--- a/dbm-ui/frontend/src/views/tickets/my-tickets/components/details/Index.vue
+++ b/dbm-ui/frontend/src/views/tickets/my-tickets/components/details/Index.vue
@@ -87,14 +87,13 @@
   const isLoading = ref(true);
   const flowInfoRef = ref<InstanceType<typeof FlowInfo>>();
 
-  const { run: fetchTicketDetails, data: ticketData } = useRequest(
+  const { runAsync: fetchTicketDetails, data: ticketData } = useRequest(
     (params: ServiceParameters<typeof getTicketDetails>) =>
       getTicketDetails(params, {
         permission: 'catch',
       }),
     {
       onSuccess(_, params) {
-        isLoading.value = false;
         if (params[0].id !== props.ticketId) {
           return;
         }
@@ -117,6 +116,8 @@
         ticketData.value = undefined;
         fetchTicketDetails({
           id: props.ticketId,
+        }).finally(() => {
+          isLoading.value = false;
         });
       }
     },
diff --git a/dbm-ui/frontend/src/views/tickets/my-tickets/components/details/components/flow/Index.vue b/dbm-ui/frontend/src/views/tickets/my-tickets/components/details/components/flow/Index.vue
index 300a486523..a13338b269 100644
--- a/dbm-ui/frontend/src/views/tickets/my-tickets/components/details/components/flow/Index.vue
+++ b/dbm-ui/frontend/src/views/tickets/my-tickets/components/details/components/flow/Index.vue
@@ -61,24 +61,26 @@
     return CommonFlows;
   });
 
-  const { run: fetchTicketFlows, cancel: cancelFetchTicketFlows } = useRequest(getTicketFlows, {
+  const { runAsync: fetchTicketFlows, cancel: cancelFetchTicketFlows } = useRequest(getTicketFlows, {
     manual: true,
     onSuccess(data, params) {
       if (params[0].id !== props.data.id) {
         return;
       }
-      isLoading.value = false;
       flowList.value = data;
     },
   });
 
   watch(
-    () => props.data,
+    () => props.data.id,
     () => {
       if (props.data.id) {
+        isLoading.value = true;
         cancelFetchTicketFlows();
         fetchTicketFlows({
           id: props.data.id,
+        }).finally(() => {
+          isLoading.value = false;
         });
       }
     },