From 6bffdb5c64aa139cf6119b50aeed42629a65f07b Mon Sep 17 00:00:00 2001 From: vben Date: Tue, 27 Oct 2020 23:08:29 +0800 Subject: [PATCH] fix: fix the disappearance of tab switching parameters (#56) --- src/layouts/default/LayoutHeader.tsx | 7 ++-- src/layouts/default/LayoutMenu.tsx | 11 +++--- src/layouts/default/multitabs/index.tsx | 38 +++++++++++-------- .../default/multitabs/useTabDropdown.ts | 31 +++++++++++---- src/store/modules/tab.ts | 16 ++++++-- src/views/demo/feat/tab-params/index.vue | 2 +- 6 files changed, 71 insertions(+), 34 deletions(-) diff --git a/src/layouts/default/LayoutHeader.tsx b/src/layouts/default/LayoutHeader.tsx index 24198dc5..27eceb5d 100644 --- a/src/layouts/default/LayoutHeader.tsx +++ b/src/layouts/default/LayoutHeader.tsx @@ -22,12 +22,13 @@ import { useModal } from '/@/components/Modal/index'; 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'); } /** diff --git a/src/layouts/default/LayoutMenu.tsx b/src/layouts/default/LayoutMenu.tsx index 310f4290..e86f4e03 100644 --- a/src/layouts/default/LayoutMenu.tsx +++ b/src/layouts/default/LayoutMenu.tsx @@ -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([]); const flatMenusRef = ref([]); - 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); } } diff --git a/src/layouts/default/multitabs/index.tsx b/src/layouts/default/multitabs/index.tsx index c16fbe7c..2fbf8043 100644 --- a/src/layouts/default/multitabs/index.tsx +++ b/src/layouts/default/multitabs/index.tsx @@ -27,6 +27,7 @@ import { useTabs } from '/@/hooks/web/useTabs'; // 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 ( - + {{ tab: () => , }} diff --git a/src/layouts/default/multitabs/useTabDropdown.ts b/src/layouts/default/multitabs/useTabDropdown.ts index 6fb996e0..ad786bca 100644 --- a/src/layouts/default/multitabs/useTabDropdown.ts +++ b/src/layouts/default/multitabs/useTabDropdown.ts @@ -12,6 +12,7 @@ import { PageEnum } from '/@/enums/pageEnum'; 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); } diff --git a/src/store/modules/tab.ts b/src/store/modules/tab.ts index 6b752b3d..a4ae2eb7 100644 --- a/src/store/modules/tab.ts +++ b/src/store/modules/tab.ts @@ -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) { diff --git a/src/views/demo/feat/tab-params/index.vue b/src/views/demo/feat/tab-params/index.vue index 0cc02022..bd06aa5a 100644 --- a/src/views/demo/feat/tab-params/index.vue +++ b/src/views/demo/feat/tab-params/index.vue @@ -1,7 +1,7 @@