From 9ca764b2a60737fec87b2e12c4bcc59629e71ada Mon Sep 17 00:00:00 2001
From: xiaoxian521 <1923740402@qq.com>
Date: Tue, 17 May 2022 00:52:07 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E7=9B=B4=E6=8E=A5?=
 =?UTF-8?q?=E9=80=9A=E8=BF=87=E6=B5=8F=E8=A7=88=E5=99=A8=E5=9C=B0=E5=9D=80?=
 =?UTF-8?q?=E6=A0=8F=E6=89=93=E5=BC=80=E6=BC=94=E7=A4=BA=E7=8E=AF=E5=A2=83?=
 =?UTF-8?q?=E6=A0=87=E7=AD=BE=E8=AF=A6=E6=83=85=E9=A1=B5=EF=BC=8Ctag?=
 =?UTF-8?q?=E6=9C=AA=E5=8A=A0=E8=BD=BD=E7=9A=84=E6=83=85=E5=86=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/tabs/detail.vue | 10 ++++------
 src/views/tabs/hooks.ts   | 32 ++++++++++++++++++++++++++++++++
 src/views/tabs/index.vue  | 24 +++---------------------
 3 files changed, 39 insertions(+), 27 deletions(-)
 create mode 100644 src/views/tabs/hooks.ts

diff --git a/src/views/tabs/detail.vue b/src/views/tabs/detail.vue
index fa5acaacf..ddd400247 100644
--- a/src/views/tabs/detail.vue
+++ b/src/views/tabs/detail.vue
@@ -1,11 +1,9 @@
 <script setup lang="ts">
-import { useRoute } from "vue-router";
-const route = useRoute();
-const index = route.query?.id ?? -1;
+import { useDetail } from "./hooks";
+const { initToDetail, id } = useDetail();
+initToDetail();
 </script>
 
 <template>
-  <div>{{ index }} - 详情页内容在此</div>
+  <div>{{ id }} - 详情页内容在此</div>
 </template>
-
-<style lang="scss" scoped></style>
diff --git a/src/views/tabs/hooks.ts b/src/views/tabs/hooks.ts
new file mode 100644
index 000000000..51f4e3167
--- /dev/null
+++ b/src/views/tabs/hooks.ts
@@ -0,0 +1,32 @@
+import { useMultiTagsStoreHook } from "/@/store/modules/multiTags";
+import { useRouter, useRoute } from "vue-router";
+import { onBeforeMount } from "vue";
+
+export function useDetail() {
+  const route = useRoute();
+  const router = useRouter();
+  const id = route.query?.id ?? -1;
+
+  function toDetail(index: number | string | string[] | number[]) {
+    useMultiTagsStoreHook().handleTags("push", {
+      path: `/tabs/detail`,
+      parentPath: route.matched[0].path,
+      name: "tabDetail",
+      query: { id: String(index) },
+      meta: {
+        title: { zh: `No.${index} - 详情信息`, en: `No.${index} - DetailInfo` },
+        showLink: false,
+        dynamicLevel: 3
+      }
+    });
+    router.push({ name: "tabDetail", query: { id: String(index) } });
+  }
+
+  function initToDetail() {
+    onBeforeMount(() => {
+      if (id) toDetail(id);
+    });
+  }
+
+  return { toDetail, initToDetail, id };
+}
diff --git a/src/views/tabs/index.vue b/src/views/tabs/index.vue
index 1dbdb1324..37eec26c3 100644
--- a/src/views/tabs/index.vue
+++ b/src/views/tabs/index.vue
@@ -1,16 +1,16 @@
 <script setup lang="ts">
 import { ref, computed } from "vue";
 import { transformI18n } from "/@/plugins/i18n";
-import { useRouter, useRoute } from "vue-router";
 import { TreeSelect } from "@pureadmin/components";
 import { useMultiTagsStoreHook } from "/@/store/modules/multiTags";
-
+import { usePermissionStoreHook } from "/@/store/modules/permission";
 import {
   deleteChildren,
   appendFieldByUniqueId,
   getNodeByUniqueId
 } from "/@/utils/tree";
-import { usePermissionStoreHook } from "/@/store/modules/permission";
+import { useDetail } from "./hooks";
+const { toDetail } = useDetail();
 
 let treeData = computed(() => {
   return appendFieldByUniqueId(
@@ -20,26 +20,8 @@ let treeData = computed(() => {
   );
 });
 
-const route = useRoute();
-const router = useRouter();
-
 const value = ref<string[]>([]);
 
-function toDetail(index: number) {
-  useMultiTagsStoreHook().handleTags("push", {
-    path: `/tabs/detail`,
-    parentPath: route.matched[0].path,
-    name: "tabDetail",
-    query: { id: String(index) },
-    meta: {
-      title: { zh: `No.${index} - 详情信息`, en: `No.${index} - DetailInfo` },
-      showLink: false,
-      dynamicLevel: 3
-    }
-  });
-  router.push({ name: "tabDetail", query: { id: String(index) } });
-}
-
 function onCloseTags() {
   value.value.forEach(uniqueId => {
     let currentPath =