fix: fix the disappearance of tab switching parameters (#56)

vben
1 parent c620f827
Showing 6 changed files with 71 additions and 34 deletions
src/layouts/default/LayoutHeader.tsx
src/layouts/default/LayoutMenu.tsx
src/layouts/default/multitabs/index.tsx
src/layouts/default/multitabs/useTabDropdown.ts
src/store/modules/tab.ts
src/views/demo/feat/tab-params/index.vue
@@ -22,12 +22,13 @@ import { useModal } from &#39;/@/components/Modal/index&#39;;
 import { errorStore } from '/@/store/modules/error';
 import { useWindowSizeFn } from '/@/hooks/event/useWindowSize';
 import NoticeAction from './actions/notice/NoticeActionItem.vue';
-
+import { useRouter } from 'vue-router';
 export default defineComponent({
   name: 'DefaultLayoutHeader',
   setup() {
     const widthRef = ref(200);
-    const { refreshPage, addTab } = useTabs();
+    const { refreshPage } = useTabs();
+    const { push } = useRouter();
     const [register, { openModal }] = useModal();
     const { toggleFullscreen, isFullscreenRef } = useFullscreen();
@@ -70,7 +71,7 @@ export default defineComponent({
     function handleToErrorList() {
       errorStore.commitErrorListCountState(0);
-      addTab('/exception/error-log', true);
+      push('/exception/error-log');
     }
     /**
@@ -22,8 +22,8 @@ import {
 import { useRouter } from 'vue-router';
 import { useThrottle } from '/@/hooks/core/useThrottle';
 import { permissionStore } from '/@/store/modules/permission';
-import { useTabs } from '/@/hooks/web/useTabs';
-import { PageEnum } from '/@/enums/pageEnum';
+// import { useTabs } from '/@/hooks/web/useTabs';
+// import { PageEnum } from '/@/enums/pageEnum';
 // import
 export default defineComponent({
@@ -53,8 +53,8 @@ export default defineComponent({
   setup(props) {
     const menusRef = ref<Menu[]>([]);
     const flatMenusRef = ref<Menu[]>([]);
-    const { currentRoute } = useRouter();
-    const { addTab } = useTabs();
+    const { currentRoute, push } = useRouter();
+    // const { addTab } = useTabs();
     const getProjectConfigRef = computed(() => {
       return appStore.getProjectConfig;
@@ -144,7 +144,8 @@ export default defineComponent({
         if (splitType === MenuSplitTyeEnum.TOP) {
           menuStore.commitCurrentTopSplitMenuPathState(path);
         }
-        addTab(path as PageEnum, true);
+        push(path);
+        // addTab(path as PageEnum, true);
       }
     }
@@ -27,6 +27,7 @@ import { useTabs } from &#39;/@/hooks/web/useTabs&#39;;
 // import { PageEnum } from '/@/enums/pageEnum';
 import './index.less';
+import { userStore } from '/@/store/modules/user';
 export default defineComponent({
   name: 'MultiTabs',
   setup() {
@@ -60,24 +61,27 @@ export default defineComponent({
     watch(
       () => unref(currentRoute).path,
-      (path) => {
-        if (activeKeyRef.value !== path) {
-          activeKeyRef.value = path;
+      () => {
+        if (!userStore.getTokenState) return;
+        const { path: rPath, fullPath } = unref(currentRoute);
+        if (activeKeyRef.value !== (fullPath || rPath)) {
+          activeKeyRef.value = fullPath || rPath;
         }
         // 监听路由的话虽然可以，但是路由切换的时间会造成卡顿现象？
         // 使用useTab的addTab的话，当用户手动调转，需要自行调用addTab
-        // tabStore.commitAddTab((unref(currentRoute) as unknown) as AppRouteRecordRaw);
-        const { affix } = currentRoute.value.meta || {};
-        if (affix) return;
-        const hasInTab = tabStore.getTabsState.some(
-          (item) => item.fullPath === currentRoute.value.fullPath
-        );
-        if (!hasInTab) {
-          tabStore.commitAddTab((unref(currentRoute) as unknown) as AppRouteRecordRaw);
-        }
+        tabStore.commitAddTab((unref(currentRoute) as unknown) as AppRouteRecordRaw);
+
+        // const { affix } = currentRoute.value.meta || {};
+        // if (affix) return;
+        // const hasInTab = tabStore.getTabsState.some(
+        //   (item) => item.fullPath === currentRoute.value.fullPath
+        // );
+        // if (!hasInTab) {
+        //   tabStore.commitAddTab((unref(currentRoute) as unknown) as AppRouteRecordRaw);
+        // }
       },
       {
-        flush: 'post',
+        // flush: 'post',
         immediate: true,
       }
     );
@@ -115,7 +119,9 @@ export default defineComponent({
     // 关闭当前ab
     function handleEdit(targetKey: string) {
       // 新增操作隐藏，目前只使用删除操作
-      const index = unref(getTabsState).findIndex((item) => item.path === targetKey);
+      const index = unref(getTabsState).findIndex(
+        (item) => (item.fullPath || item.path) === targetKey
+      );
       index !== -1 && closeTab(unref(getTabsState)[index]);
     }
@@ -133,8 +139,10 @@ export default defineComponent({
     }
     function renderTabs() {
       return unref(getTabsState).map((item: TabItem) => {
+        const key = item.query ? item.fullPath : item.path;
+
         return (
-          <Tabs.TabPane key={item.path} closable={!(item && item.meta && item.meta.affix)}>
+          <Tabs.TabPane key={key} closable={!(item && item.meta && item.meta.affix)}>
             {{
               tab: () => <TabContent tabItem={item} />,
             }}
@@ -12,6 +12,7 @@ import { PageEnum } from &#39;/@/enums/pageEnum&#39;;
 import { useGo, useRedo } from '/@/hooks/web/usePage';
 import router from '/@/router';
 import { useTabs, isInitUseTab } from '/@/hooks/web/useTabs';
+import { RouteLocationRaw } from 'vue-router';
 const { initTabFn } = useTabs();
 /**
@@ -92,7 +93,11 @@ export function useTabDropdown(tabContentProps: TabContentProps) {
     let toPath: PageEnum | string = PageEnum.BASE_HOME;
     if (len > 0) {
-      toPath = unref(getTabsState)[len - 1].path;
+      const page = unref(getTabsState)[len - 1];
+      const p = page.fullPath || page.path;
+      if (p) {
+        toPath = p;
+      }
     }
     // 跳到当前页面报错
     path !== toPath && go(toPath as PageEnum, true);
@@ -192,7 +197,7 @@ export function useTabDropdown(tabContentProps: TabContentProps) {
   }
   return { getDropMenuList, handleMenuEvent };
 }
-export function closeTab(closedTab: TabItem) {
+export function closeTab(closedTab: TabItem | AppRouteRecordRaw) {
   const { currentRoute, replace } = router;
   // 当前tab列表
   const getTabsState = computed(() => {
@@ -205,23 +210,35 @@ export function closeTab(closedTab: TabItem) {
     return;
   }
   // 关闭的为激活atb
-  let toPath: PageEnum | string;
+  let toObj: RouteLocationRaw = {};
   const index = unref(getTabsState).findIndex((item) => item.path === path);
   // 如果当前为最左边tab
   if (index === 0) {
     // 只有一个tab，则跳转至首页，否则跳转至右tab
     if (unref(getTabsState).length === 1) {
-      toPath = PageEnum.BASE_HOME;
+      toObj = PageEnum.BASE_HOME;
     } else {
       //  跳转至右边tab
-      toPath = unref(getTabsState)[index + 1].path;
+      const page = unref(getTabsState)[index + 1];
+      const { params, path, query } = page;
+      toObj = {
+        params,
+        path,
+        query,
+      };
     }
   } else {
     // 跳转至左边tab
-    toPath = unref(getTabsState)[index - 1].path;
+    const page = unref(getTabsState)[index - 1];
+    const { params, path, query } = page;
+    toObj = {
+      params,
+      path,
+      query,
+    };
   }
   const route = (unref(currentRoute) as unknown) as AppRouteRecordRaw;
   tabStore.commitCloseTab(route);
-  replace(toPath);
+  replace(toObj);
 }
@@ -98,11 +98,21 @@ class Tab extends VuexModule {
       return;
     }
+    let updateIndex = -1;
     // 已经存在的页面，不重复添加tab
-    const hasTab = this.tabsState.some((tab) => {
-      return tab.fullPath === fullPath;
+    const hasTab = this.tabsState.some((tab, index) => {
+      updateIndex = index;
+      return (tab.fullPath || tab.path) === (fullPath || path);
     });
-    if (hasTab) return;
+    if (hasTab) {
+      const curTab = toRaw(this.tabsState)[updateIndex];
+      if (!curTab) return;
+      curTab.params = params || curTab.params;
+      curTab.query = query || curTab.query;
+      curTab.fullPath = fullPath || curTab.fullPath;
+      this.tabsState.splice(updateIndex, 1, curTab);
+      return;
+    }
     this.tabsState.push({ path, fullPath, name, meta, params, query });
     if (unref(getOpenKeepAliveRef) && name) {
 <template>
   <div class="p-4">
     Current Param : {{ params }}
-    <input />
+    <!-- <input /> -->
   </div>
 </template>
 <script lang="ts">