From 2f7200abdb576ec8bebe0d222f18525c29bea52f Mon Sep 17 00:00:00 2001 From: zws <447643445@qq.com> Date: Thu, 16 Jan 2025 09:26:38 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BB=8Evue-element-plus-admin?= =?UTF-8?q?=E9=A1=B9=E7=9B=AE=20=E5=90=8C=E6=AD=A5TagsView=E4=BB=A3?= =?UTF-8?q?=E7=A0=81=20=E5=AE=9E=E7=8E=B0=E8=AE=BE=E7=BD=AE=E8=B7=AF?= =?UTF-8?q?=E7=94=B1=E6=A0=87=E9=A2=98=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/TagsView/src/TagsView.vue | 107 ++++++++++-------- src/store/modules/tagsView.ts | 26 ++++- 2 files changed, 84 insertions(+), 49 deletions(-) diff --git a/src/layout/components/TagsView/src/TagsView.vue b/src/layout/components/TagsView/src/TagsView.vue index 3bfb69df..ce041b2b 100644 --- a/src/layout/components/TagsView/src/TagsView.vue +++ b/src/layout/components/TagsView/src/TagsView.vue @@ -12,6 +12,11 @@ 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' +import { cloneDeep } from 'lodash-es' + + +defineOptions({ name: 'TagsView' }) const { getPrefixCls } = useDesign() @@ -19,7 +24,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 +38,10 @@ const visitedViews = computed(() => tagsViewStore.getVisitedViews) const affixTagArr = ref([]) +const selectedTag = computed(() => tagsViewStore.getSelectedTag) + +const setSelectTag = tagsViewStore.setSelectedTag + const appStore = useAppStore() const tagsViewImmerse = computed(() => appStore.getTagsViewImmerse) @@ -45,66 +56,30 @@ const initTags = () => { for (const tag of unref(affixTagArr)) { // Must have tag name if (tag.name) { - tagsViewStore.addVisitedView(tag) + tagsViewStore.addVisitedView(cloneDeep(tag)) } } } -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] @@ -118,11 +93,38 @@ const toLastView = () => { addTags() return } - // TODO: You can set another route - push('/') + // You can set another route + push(permissionStore.getAddRouters[0].path) } } +// 关闭全部 +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() @@ -209,13 +211,14 @@ const isActive = (route: RouteLocationNormalizedLoaded): boolean => { // 所有右键菜单组件的元素 const itemRefs = useTemplateRefsList>() -// 右键菜单装填改变的时候 +// 右键菜单状态改变的时候 const visibleChange = (visible: boolean, tagItem: RouteLocationNormalizedLoaded) => { if (visible) { for (const v of unref(itemRefs)) { const elDropdownMenuRef = v.elDropdownMenuRef if (tagItem.fullPath !== v.tagItem.fullPath) { elDropdownMenuRef?.handleClose() + setSelectTag(tagItem) } } } @@ -243,6 +246,16 @@ const move = (to: number) => { start() } +const canShowIcon = (item: RouteLocationNormalizedLoaded) => { + if ( + (item?.matched?.[1]?.meta?.icon && unref(tagsViewIcon)) || + (item?.meta?.affix && unref(tagsViewIcon) && item?.meta?.icon) + ) { + return true + } + return false +} + onBeforeMount(() => { initTags() addTags() diff --git a/src/store/modules/tagsView.ts b/src/store/modules/tagsView.ts index 4368efe0..f565ef95 100644 --- a/src/store/modules/tagsView.ts +++ b/src/store/modules/tagsView.ts @@ -4,16 +4,19 @@ import { getRawRoute } from '@/utils/routerHelper' import { defineStore } from 'pinia' import { store } from '../index' import { findIndex } from '@/utils' +import { useUserStoreWithOut } from './user' 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 +24,9 @@ export const useTagsViewStore = defineStore('tagsView', { }, getCachedViews(): string[] { return Array.from(this.cachedViews) + }, + getSelectedTag(): RouteLocationNormalizedLoaded | undefined { + return this.selectedTag } }, actions: { @@ -98,8 +104,12 @@ export const useTagsViewStore = defineStore('tagsView', { }, // 删除所有tag delAllVisitedViews() { + const userStore = useUserStoreWithOut() + // const affixTags = this.visitedViews.filter((tag) => tag.meta.affix) - this.visitedViews = [] + this.visitedViews = userStore.getUser + ? this.visitedViews.filter((tag) => tag?.meta?.affix) + : [] }, // 删除其他 delOthersViews(view: RouteLocationNormalizedLoaded) { @@ -145,6 +155,18 @@ export const useTagsViewStore = defineStore('tagsView', { break } } + }, + // 设置当前选中的tag + setSelectedTag(tag: RouteLocationNormalizedLoaded) { + this.selectedTag = tag + }, + setTitle(title: string, path?: string) { + for (const v of this.visitedViews) { + if (v.path === (path ?? this.selectedTag?.path)) { + v.meta.title = title + break + } + } } }, persist: false