diff --git a/mock/role/index.ts b/mock/role/index.ts index decf4ba..b109441 100644 --- a/mock/role/index.ts +++ b/mock/role/index.ts @@ -323,11 +323,11 @@ const adminList = [ } }, { - path: 'useOpenTab', - component: 'views/hooks/useOpenTab', - name: 'UseOpenTab', + path: 'useTagsView', + component: 'views/hooks/useTagsView', + name: 'UseTagsView', meta: { - title: 'useOpenTab' + title: 'useTagsView' } } // { @@ -597,7 +597,7 @@ const testList: string[] = [ '/function/multiple-tabs-demo/:id', '/hooks', '/hooks/useWatermark', - '/hooks/useOpenTab', + '/hooks/useTagsView', // '/hooks/useCrudSchemas', '/level', '/level/menu1', diff --git a/src/components/Menu/src/components/useRenderMenuItem.tsx b/src/components/Menu/src/components/useRenderMenuItem.tsx index 17a520a..2aacbf1 100644 --- a/src/components/Menu/src/components/useRenderMenuItem.tsx +++ b/src/components/Menu/src/components/useRenderMenuItem.tsx @@ -6,6 +6,8 @@ import { useRenderMenuTitle } from './useRenderMenuTitle' import { useDesign } from '@/hooks/web/useDesign' import { pathResolve } from '@/utils/routerHelper' +const { renderMenuTitle } = useRenderMenuTitle() + export const useRenderMenuItem = ( // allRouters: AppRouteRecordRaw[] = [], menuMode: 'vertical' | 'horizontal' @@ -17,8 +19,6 @@ export const useRenderMenuItem = ( const { oneShowingChild, onlyOneChild } = hasOneShowingChild(v.children, v) const fullPath = isUrl(v.path) ? v.path : pathResolve(parentPath, v.path) // getAllParentPath(allRouters, v.path).join('/') - const { renderMenuTitle } = useRenderMenuTitle() - if ( oneShowingChild && (!onlyOneChild?.children || onlyOneChild?.noShowingChildren) && diff --git a/src/components/TagsView/src/TagsView.vue b/src/components/TagsView/src/TagsView.vue index 3eb2d98..5c7d68e 100644 --- a/src/components/TagsView/src/TagsView.vue +++ b/src/components/TagsView/src/TagsView.vue @@ -12,6 +12,7 @@ import { useDesign } from '@/hooks/web/useDesign' import { useTemplateRefsList } from '@vueuse/core' import { ElScrollbar } from 'element-plus' import { useScrollTo } from '@/hooks/event/useScrollTo' +import { useTagsView } from '@/hooks/web/useTagsView' const { getPrefixCls } = useDesign() @@ -19,7 +20,9 @@ const prefixCls = getPrefixCls('tags-view') const { t } = useI18n() -const { currentRoute, push, replace } = useRouter() +const { currentRoute, push } = useRouter() + +const { closeAll, closeLeft, closeRight, closeOther, closeCurrent, refreshPage } = useTagsView() const permissionStore = usePermissionStore() @@ -31,6 +34,10 @@ const visitedViews = computed(() => tagsViewStore.getVisitedViews) const affixTagArr = ref([]) +const selectedTag = computed(() => tagsViewStore.getSelectedTag) + +const setSelectTag = tagsViewStore.setSelectedTag + const appStore = useAppStore() const tagsViewIcon = computed(() => appStore.getTagsViewIcon) @@ -48,61 +55,25 @@ const initTags = () => { } } -const selectedTag = ref() - // 新增tag const addTags = () => { const { name } = unref(currentRoute) if (name) { - selectedTag.value = unref(currentRoute) + setSelectTag(unref(currentRoute)) tagsViewStore.addView(unref(currentRoute)) } - return false } // 关闭选中的tag const closeSelectedTag = (view: RouteLocationNormalizedLoaded) => { - if (view?.meta?.affix) return - tagsViewStore.delView(view) - if (isActive(view)) { - toLastView() - } -} - -// 关闭全部 -const closeAllTags = () => { - tagsViewStore.delAllViews() - toLastView() -} - -// 关闭其它 -const closeOthersTags = () => { - tagsViewStore.delOthersViews(unref(selectedTag) as RouteLocationNormalizedLoaded) -} - -// 重新加载 -const refreshSelectedTag = async (view?: RouteLocationNormalizedLoaded) => { - if (!view) return - tagsViewStore.delCachedView() - const { path, query } = view - await nextTick() - replace({ - path: '/redirect' + path, - query: query + closeCurrent(view, () => { + if (isActive(view)) { + toLastView() + } }) } -// 关闭左侧 -const closeLeftTags = () => { - tagsViewStore.delLeftViews(unref(selectedTag) as RouteLocationNormalizedLoaded) -} - -// 关闭右侧 -const closeRightTags = () => { - tagsViewStore.delRightViews(unref(selectedTag) as RouteLocationNormalizedLoaded) -} - -// 跳转到最后一个 +// 去最后一个 const toLastView = () => { const visitedViews = tagsViewStore.getVisitedViews const latestView = visitedViews.slice(-1)[0] @@ -121,6 +92,33 @@ const toLastView = () => { } } +// 关闭全部 +const closeAllTags = () => { + closeAll(() => { + toLastView() + }) +} + +// 关闭其它 +const closeOthersTags = () => { + closeOther() +} + +// 重新加载 +const refreshSelectedTag = async (view?: RouteLocationNormalizedLoaded) => { + refreshPage(view) +} + +// 关闭左侧 +const closeLeftTags = () => { + closeLeft() +} + +// 关闭右侧 +const closeRightTags = () => { + closeRight() +} + // 滚动到选中的tag const moveToCurrentTag = async () => { await nextTick() @@ -583,3 +581,4 @@ watch( } } +@/hooks/web/useTagsView diff --git a/src/hooks/web/useTagsView.ts b/src/hooks/web/useTagsView.ts new file mode 100644 index 0000000..d236a1e --- /dev/null +++ b/src/hooks/web/useTagsView.ts @@ -0,0 +1,58 @@ +import { useTagsViewStoreWithOut } from '@/store/modules/tagsView' +import { RouteLocationNormalizedLoaded, useRouter } from 'vue-router' +import { computed, nextTick, unref } from 'vue' + +export const useTagsView = () => { + const tagsViewStore = useTagsViewStoreWithOut() + + const { replace, currentRoute } = useRouter() + + const selectedTag = computed(() => tagsViewStore.getSelectedTag) + + const closeAll = (callback?: Fn) => { + tagsViewStore.delAllViews() + callback?.() + } + + const closeLeft = (callback?: Fn) => { + tagsViewStore.delLeftViews(unref(selectedTag) as RouteLocationNormalizedLoaded) + callback?.() + } + + const closeRight = (callback?: Fn) => { + tagsViewStore.delRightViews(unref(selectedTag) as RouteLocationNormalizedLoaded) + callback?.() + } + + const closeOther = (callback?: Fn) => { + tagsViewStore.delOthersViews(unref(selectedTag) as RouteLocationNormalizedLoaded) + callback?.() + } + + const closeCurrent = (view?: RouteLocationNormalizedLoaded, callback?: Fn) => { + if (view?.meta?.affix) return + tagsViewStore.delView(view || unref(currentRoute)) + + callback?.() + } + + const refreshPage = async (view?: RouteLocationNormalizedLoaded, callback?: Fn) => { + tagsViewStore.delCachedView() + const { path, query } = view || unref(currentRoute) + await nextTick() + replace({ + path: '/redirect' + path, + query: query + }) + callback?.() + } + + return { + closeAll, + closeLeft, + closeRight, + closeOther, + closeCurrent, + refreshPage + } +} diff --git a/src/router/index.ts b/src/router/index.ts index 0e37e54..cccf263 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -362,6 +362,14 @@ export const asyncRouterMap: AppRouteRecordRaw[] = [ meta: { title: 'useWatermark' } + }, + { + path: 'useTagsView', + component: () => import('@/views/hooks/useTagsView.vue'), + name: 'UseTagsView', + meta: { + title: 'useTagsView' + } } // { // path: 'useCrudSchemas', diff --git a/src/store/modules/tagsView.ts b/src/store/modules/tagsView.ts index 34281ef..483687b 100644 --- a/src/store/modules/tagsView.ts +++ b/src/store/modules/tagsView.ts @@ -8,12 +8,14 @@ import { findIndex } from '@/utils' export interface TagsViewState { visitedViews: RouteLocationNormalizedLoaded[] cachedViews: Set + selectedTag?: RouteLocationNormalizedLoaded } export const useTagsViewStore = defineStore('tagsView', { state: (): TagsViewState => ({ visitedViews: [], - cachedViews: new Set() + cachedViews: new Set(), + selectedTag: undefined }), getters: { getVisitedViews(): RouteLocationNormalizedLoaded[] { @@ -21,6 +23,9 @@ export const useTagsViewStore = defineStore('tagsView', { }, getCachedViews(): string[] { return Array.from(this.cachedViews) + }, + getSelectedTag(): RouteLocationNormalizedLoaded | undefined { + return this.selectedTag } }, actions: { @@ -85,7 +90,7 @@ export const useTagsViewStore = defineStore('tagsView', { // 删除所有tag delAllVisitedViews() { // const affixTags = this.visitedViews.filter((tag) => tag.meta.affix) - this.visitedViews = [] + this.visitedViews = this.visitedViews.filter((tag) => tag.meta?.affix) }, // 删除其它 delOthersViews(view: RouteLocationNormalizedLoaded) { @@ -131,6 +136,10 @@ export const useTagsViewStore = defineStore('tagsView', { break } } + }, + // 设置当前选中的tag + setSelectedTag(tag: RouteLocationNormalizedLoaded) { + this.selectedTag = tag } } }) diff --git a/src/views/hooks/useTagsView.vue b/src/views/hooks/useTagsView.vue new file mode 100644 index 0000000..c267d9c --- /dev/null +++ b/src/views/hooks/useTagsView.vue @@ -0,0 +1,50 @@ + + + +@/hooks/web/useTagsView