From b8198ec2073ea68f250d448c895a7edcb466f600 Mon Sep 17 00:00:00 2001
From: hLinx <327159425@qq.com>
Date: Thu, 26 Dec 2024 18:15:26 +0800
Subject: [PATCH] =?UTF-8?q?perf(frontend):=20=E5=8D=95=E6=8D=AE=E5=88=97?=
 =?UTF-8?q?=E8=A1=A8=E6=94=AF=E6=8C=81=20ctrl=20=E6=96=B0=E5=BC=80?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E6=9F=A5=E7=9C=8B=E5=8D=95=E6=8D=AE=E8=AF=A6?=
 =?UTF-8?q?=E6=83=85=20#8852=20#=20Reviewed,=20transaction=20id:=2027927?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/list/components/TableMode.vue  | 35 ++++-------------
 .../common/hooks/use-open-detail.ts           | 39 +++++++++++++++++++
 .../components/list/components/TableMode.vue  | 35 ++++-------------
 .../components/list/components/TableMode.vue  | 35 ++++-------------
 .../components/list/components/TableMode.vue  | 35 ++++-------------
 .../components/list/components/TableMode.vue  | 24 +++---------
 6 files changed, 77 insertions(+), 126 deletions(-)
 create mode 100644 dbm-ui/frontend/src/views/ticket-center/common/hooks/use-open-detail.ts

diff --git a/dbm-ui/frontend/src/views/ticket-center/business/components/list/components/TableMode.vue b/dbm-ui/frontend/src/views/ticket-center/business/components/list/components/TableMode.vue
index b581575930..7e8c678896 100644
--- a/dbm-ui/frontend/src/views/ticket-center/business/components/list/components/TableMode.vue
+++ b/dbm-ui/frontend/src/views/ticket-center/business/components/list/components/TableMode.vue
@@ -31,7 +31,7 @@
               v-if="data"
               text
               theme="primary"
-              @click="() => handleShowDetail(data)">
+              @click="(event: MouseEvent) => handleGoDetail(data, event)">
               {{ data.id }}
             </BkButton>
           </template>
@@ -57,16 +57,17 @@
   </div>
 </template>
 <script setup lang="ts">
-  import { getCurrentInstance, onActivated, onDeactivated } from 'vue';
+  import { onActivated } from 'vue';
   import { useI18n } from 'vue-i18n';
-  import { useRoute, useRouter } from 'vue-router';
+  import { useRoute } from 'vue-router';
 
   import TicketModel from '@services/model/ticket/ticket';
   import { getTickets } from '@services/source/ticket';
 
-  import { useStretchLayout, useUrlSearch } from '@hooks';
+  import { useUrlSearch } from '@hooks';
 
   import useDatePicker from '@views/ticket-center/common/hooks/use-date-picker';
+  import useOpenDetail from '@views/ticket-center/common/hooks/use-open-detail';
   import useSearchSelect from '@views/ticket-center/common/hooks/use-search-select';
   import TableModeTable from '@views/ticket-center/common/TableModeTable.vue';
   import TicketClone from '@views/ticket-center/common/TicketClone.vue';
@@ -74,13 +75,10 @@
 
   type IRowData = TicketModel;
 
-  const router = useRouter();
   const route = useRoute();
   const { t } = useI18n();
-  const currentInstance = getCurrentInstance();
 
-  const { getSearchParams, removeSearchParam } = useUrlSearch();
-  const { splitScreen: stretchLayoutSplitScreen } = useStretchLayout();
+  const { removeSearchParam } = useUrlSearch();
 
   const { value: datePickerValue, shortcutsRange } = useDatePicker();
 
@@ -88,6 +86,8 @@
     exclude: ['bk_biz_id'],
   });
 
+  const handleGoDetail = useOpenDetail();
+
   const dataSource = (params: ServiceParameters<typeof getTickets>) =>
     getTickets({
       ...params,
@@ -98,29 +98,10 @@
 
   const rowClass = (params: TicketModel) => (params.id === selectTicketId.value ? 'select-row' : '');
 
-  const handleShowDetail = (data: IRowData) => {
-    stretchLayoutSplitScreen();
-    selectTicketId.value = data.id;
-  };
-
   onActivated(() => {
     selectTicketId.value = Number(route.query.selectId);
     removeSearchParam('selectId');
   });
-
-  onDeactivated(() => {
-    setTimeout(() => {
-      if (currentInstance!.isUnmounted) {
-        return;
-      }
-      router.replace({
-        params: {
-          ticketId: selectTicketId.value,
-        },
-        query: getSearchParams(),
-      });
-    });
-  });
 </script>
 <style lang="less">
   .ticket-list-table-mode {
diff --git a/dbm-ui/frontend/src/views/ticket-center/common/hooks/use-open-detail.ts b/dbm-ui/frontend/src/views/ticket-center/common/hooks/use-open-detail.ts
new file mode 100644
index 0000000000..1538232653
--- /dev/null
+++ b/dbm-ui/frontend/src/views/ticket-center/common/hooks/use-open-detail.ts
@@ -0,0 +1,39 @@
+import { getCurrentInstance } from 'vue';
+import { useRouter } from 'vue-router';
+
+import TicketModel from '@services/model/ticket/ticket';
+
+import { useStretchLayout, useUrlSearch } from '@hooks';
+
+export default () => {
+  const { splitScreen: stretchLayoutSplitScreen } = useStretchLayout();
+
+  const currentInstance = getCurrentInstance();
+  const router = useRouter();
+  const { getSearchParams } = useUrlSearch();
+
+  return (ticketData: TicketModel, event: MouseEvent) => {
+    if (event.ctrlKey || event.metaKey) {
+      const { href } = router.resolve({
+        name: 'ticketDetail',
+        params: {
+          ticketId: ticketData.id,
+        },
+      });
+      return window.open(href);
+    }
+
+    stretchLayoutSplitScreen();
+    setTimeout(() => {
+      if (currentInstance!.isUnmounted) {
+        return;
+      }
+      router.replace({
+        params: {
+          ticketId: ticketData.id,
+        },
+        query: getSearchParams(),
+      });
+    });
+  };
+};
diff --git a/dbm-ui/frontend/src/views/ticket-center/self-apply/components/list/components/TableMode.vue b/dbm-ui/frontend/src/views/ticket-center/self-apply/components/list/components/TableMode.vue
index e86fa3dc6c..0fb09d7015 100644
--- a/dbm-ui/frontend/src/views/ticket-center/self-apply/components/list/components/TableMode.vue
+++ b/dbm-ui/frontend/src/views/ticket-center/self-apply/components/list/components/TableMode.vue
@@ -31,7 +31,7 @@
               v-if="data"
               text
               theme="primary"
-              @click="() => handleShowDetail(data)">
+              @click="(event: MouseEvent) => handleGoDetail(data, event)">
               {{ data.id }}
             </BkButton>
           </template>
@@ -58,16 +58,17 @@
   </div>
 </template>
 <script setup lang="ts">
-  import { getCurrentInstance, onActivated, onDeactivated } from 'vue';
+  import { onActivated } from 'vue';
   import { useI18n } from 'vue-i18n';
-  import { useRoute, useRouter } from 'vue-router';
+  import { useRoute } from 'vue-router';
 
   import TicketModel from '@services/model/ticket/ticket';
   import { getTickets } from '@services/source/ticket';
 
-  import { useStretchLayout, useUrlSearch } from '@hooks';
+  import { useUrlSearch } from '@hooks';
 
   import useDatePicker from '@views/ticket-center/common/hooks/use-date-picker';
+  import useOpenDetail from '@views/ticket-center/common/hooks/use-open-detail';
   import useSearchSelect from '@views/ticket-center/common/hooks/use-search-select';
   import TableModeTable from '@views/ticket-center/common/TableModeTable.vue';
   import TicketClone from '@views/ticket-center/common/TicketClone.vue';
@@ -75,18 +76,17 @@
 
   type IRowData = TicketModel<unknown>;
 
-  const router = useRouter();
   const route = useRoute();
   const { t } = useI18n();
-  const currentInstance = getCurrentInstance();
 
-  const { getSearchParams, removeSearchParam } = useUrlSearch();
-  const { splitScreen: stretchLayoutSplitScreen } = useStretchLayout();
+  const { removeSearchParam } = useUrlSearch();
 
   const { value: datePickerValue, shortcutsRange } = useDatePicker();
 
   const { value: searachSelectValue, searchSelectData } = useSearchSelect();
 
+  const handleGoDetail = useOpenDetail();
+
   const dataSource = (params: ServiceParameters<typeof getTickets>) =>
     getTickets({
       ...params,
@@ -97,29 +97,10 @@
 
   const rowClass = (params: TicketModel) => (params.id === selectTicketId.value ? 'select-row' : '');
 
-  const handleShowDetail = (data: IRowData) => {
-    stretchLayoutSplitScreen();
-    selectTicketId.value = data.id;
-  };
-
   onActivated(() => {
     selectTicketId.value = Number(route.query.selectId);
     removeSearchParam('selectId');
   });
-
-  onDeactivated(() => {
-    setTimeout(() => {
-      if (currentInstance!.isUnmounted) {
-        return;
-      }
-      router.replace({
-        params: {
-          ticketId: selectTicketId.value,
-        },
-        query: getSearchParams(),
-      });
-    });
-  });
 </script>
 <style lang="less">
   .ticket-list-table-mode {
diff --git a/dbm-ui/frontend/src/views/ticket-center/self-done/components/list/components/TableMode.vue b/dbm-ui/frontend/src/views/ticket-center/self-done/components/list/components/TableMode.vue
index 6e230e9de7..601b6cf9f0 100644
--- a/dbm-ui/frontend/src/views/ticket-center/self-done/components/list/components/TableMode.vue
+++ b/dbm-ui/frontend/src/views/ticket-center/self-done/components/list/components/TableMode.vue
@@ -31,7 +31,7 @@
               v-if="data"
               text
               theme="primary"
-              @click="() => handleShowDetail(data)">
+              @click="(event: MouseEvent) => handleGoDetail(data, event)">
               {{ data.id }}
             </BkButton>
           </template>
@@ -53,34 +53,34 @@
   </div>
 </template>
 <script setup lang="ts">
-  import { getCurrentInstance, onActivated, onDeactivated } from 'vue';
+  import { onActivated } from 'vue';
   import { useI18n } from 'vue-i18n';
-  import { useRoute, useRouter } from 'vue-router';
+  import { useRoute } from 'vue-router';
 
   import TicketModel from '@services/model/ticket/ticket';
   import { getTickets } from '@services/source/ticket';
 
-  import { useStretchLayout, useUrlSearch } from '@hooks';
+  import { useUrlSearch } from '@hooks';
 
   import useDatePicker from '@views/ticket-center/common/hooks/use-date-picker';
+  import useOpenDetail from '@views/ticket-center/common/hooks/use-open-detail';
   import useSearchSelect from '@views/ticket-center/common/hooks/use-search-select';
   import TableModeTable from '@views/ticket-center/common/TableModeTable.vue';
   import TicketDetailLink from '@views/ticket-center/common/TicketDetailLink.vue';
 
   type IRowData = TicketModel<unknown>;
 
-  const router = useRouter();
   const route = useRoute();
   const { t } = useI18n();
 
-  const currentInstance = getCurrentInstance();
-  const { getSearchParams, removeSearchParam } = useUrlSearch();
-  const { splitScreen: stretchLayoutSplitScreen } = useStretchLayout();
+  const { removeSearchParam } = useUrlSearch();
 
   const { value: datePickerValue, shortcutsRange } = useDatePicker();
 
   const { value: searachSelectValue, searchSelectData } = useSearchSelect();
 
+  const handleGoDetail = useOpenDetail();
+
   const dataSource = (params: ServiceParameters<typeof getTickets>) =>
     getTickets({
       ...params,
@@ -91,29 +91,10 @@
 
   const rowClass = (params: TicketModel) => (params.id === selectTicketId.value ? 'select-row' : '');
 
-  const handleShowDetail = (data: IRowData) => {
-    stretchLayoutSplitScreen();
-    selectTicketId.value = data.id;
-  };
-
   onActivated(() => {
     selectTicketId.value = Number(route.query.selectId);
     removeSearchParam('selectId');
   });
-
-  onDeactivated(() => {
-    setTimeout(() => {
-      if (currentInstance!.isUnmounted) {
-        return;
-      }
-      router.replace({
-        params: {
-          ticketId: selectTicketId.value,
-        },
-        query: getSearchParams(),
-      });
-    });
-  });
 </script>
 <style lang="less">
   .ticket-self-done-list-table-mode {
diff --git a/dbm-ui/frontend/src/views/ticket-center/self-manage/components/list/components/TableMode.vue b/dbm-ui/frontend/src/views/ticket-center/self-manage/components/list/components/TableMode.vue
index 932428b003..48eea48f5a 100644
--- a/dbm-ui/frontend/src/views/ticket-center/self-manage/components/list/components/TableMode.vue
+++ b/dbm-ui/frontend/src/views/ticket-center/self-manage/components/list/components/TableMode.vue
@@ -31,7 +31,7 @@
               v-if="data"
               text
               theme="primary"
-              @click="() => handleShowDetail(data)">
+              @click="(event: MouseEvent) => handleGoDetail(data, event)">
               {{ data.id }}
             </BkButton>
           </template>
@@ -53,34 +53,34 @@
   </div>
 </template>
 <script setup lang="ts">
-  import { getCurrentInstance, onActivated, onDeactivated } from 'vue';
+  import { onActivated } from 'vue';
   import { useI18n } from 'vue-i18n';
-  import { useRoute, useRouter } from 'vue-router';
+  import { useRoute } from 'vue-router';
 
   import TicketModel from '@services/model/ticket/ticket';
   import { getTickets } from '@services/source/ticket';
 
-  import { useStretchLayout, useUrlSearch } from '@hooks';
+  import { useUrlSearch } from '@hooks';
 
   import useDatePicker from '@views/ticket-center/common/hooks/use-date-picker';
+  import useOpenDetail from '@views/ticket-center/common/hooks/use-open-detail';
   import useSearchSelect from '@views/ticket-center/common/hooks/use-search-select';
   import TableModeTable from '@views/ticket-center/common/TableModeTable.vue';
   import TicketDetailLink from '@views/ticket-center/common/TicketDetailLink.vue';
 
   type IRowData = TicketModel<unknown>;
 
-  const router = useRouter();
   const route = useRoute();
   const { t } = useI18n();
-  const currentInstance = getCurrentInstance();
 
-  const { getSearchParams, removeSearchParam } = useUrlSearch();
-  const { splitScreen: stretchLayoutSplitScreen } = useStretchLayout();
+  const { removeSearchParam } = useUrlSearch();
 
   const { value: datePickerValue, shortcutsRange } = useDatePicker();
 
   const { value: searachSelectValue, searchSelectData } = useSearchSelect();
 
+  const handleGoDetail = useOpenDetail();
+
   const dataSource = (params: ServiceParameters<typeof getTickets>) =>
     getTickets({
       ...params,
@@ -91,29 +91,10 @@
 
   const rowClass = (params: TicketModel) => (params.id === selectTicketId.value ? 'select-row' : '');
 
-  const handleShowDetail = (data: IRowData) => {
-    stretchLayoutSplitScreen();
-    selectTicketId.value = data.id;
-  };
-
   onActivated(() => {
     selectTicketId.value = Number(route.query.selectId);
     removeSearchParam('selectId');
   });
-
-  onDeactivated(() => {
-    setTimeout(() => {
-      if (currentInstance!.isUnmounted) {
-        return;
-      }
-      router.replace({
-        params: {
-          ticketId: selectTicketId.value,
-        },
-        query: getSearchParams(),
-      });
-    });
-  });
 </script>
 <style lang="less">
   .ticket-list-table-mode {
diff --git a/dbm-ui/frontend/src/views/ticket-center/self-todo/components/list/components/TableMode.vue b/dbm-ui/frontend/src/views/ticket-center/self-todo/components/list/components/TableMode.vue
index 9103093d83..c3000149fc 100644
--- a/dbm-ui/frontend/src/views/ticket-center/self-todo/components/list/components/TableMode.vue
+++ b/dbm-ui/frontend/src/views/ticket-center/self-todo/components/list/components/TableMode.vue
@@ -48,7 +48,7 @@
               v-if="data"
               text
               theme="primary"
-              @click="() => handleShowDetail(data)">
+              @click="(event: MouseEvent) => handleGoDetail(data, event)">
               {{ data.id }}
             </BkButton>
           </template>
@@ -72,7 +72,7 @@
   </div>
 </template>
 <script setup lang="ts">
-  import { getCurrentInstance, onActivated, onDeactivated, ref, shallowRef, useTemplateRef } from 'vue';
+  import { onActivated, onDeactivated, ref, shallowRef, useTemplateRef } from 'vue';
   import { useI18n } from 'vue-i18n';
   import { useRoute, useRouter } from 'vue-router';
 
@@ -82,6 +82,7 @@
   import { useStretchLayout, useUrlSearch } from '@hooks';
 
   import useDatePicker from '@views/ticket-center/common/hooks/use-date-picker';
+  import useOpenDetail from '@views/ticket-center/common/hooks/use-open-detail';
   import useSearchSelect from '@views/ticket-center/common/hooks/use-search-select';
   import TableModeTable from '@views/ticket-center/common/TableModeTable.vue';
 
@@ -93,11 +94,10 @@
   const router = useRouter();
 
   const { t } = useI18n();
-  const currentInstance = getCurrentInstance();
 
   const { list: statusList, defaultStatus: ticketStatus } = useStatusList();
 
-  const { getSearchParams, removeSearchParam } = useUrlSearch();
+  const { removeSearchParam } = useUrlSearch();
   const { splitScreen: stretchLayoutSplitScreen } = useStretchLayout();
 
   const { value: datePickerValue, shortcutsRange } = useDatePicker();
@@ -106,6 +106,8 @@
     exclude: ['status'],
   });
 
+  const handleGoDetail = useOpenDetail();
+
   const rowClass = (params: TicketModel) => (params.id === selectTicketId.value ? 'select-row' : '');
 
   const dataSource = (params: ServiceParameters<typeof getTickets>) =>
@@ -117,7 +119,6 @@
     });
 
   const dataTableRef = useTemplateRef('dataTable');
-  // const ticketStatus = ref(defaultStatus.value);
   const selectTicketIdList = shallowRef<TicketModel[]>([]);
   const isShowBatchOperation = ref(false);
   const selectTicketId = ref(0);
@@ -148,7 +149,6 @@
   };
 
   onActivated(() => {
-    // ticketStatus.value = defaultStatus.value;
     selectTicketId.value = Number(route.query.selectId);
     removeSearchParam('selectId');
     resumeTicketStatus();
@@ -156,18 +156,6 @@
 
   onDeactivated(() => {
     pauseTicketStatus();
-    setTimeout(() => {
-      if (currentInstance!.isUnmounted) {
-        return;
-      }
-      router.replace({
-        params: {
-          status: ticketStatus.value,
-          ticketId: selectTicketId.value,
-        },
-        query: getSearchParams(),
-      });
-    });
   });
 </script>
 <style lang="less">