feat: 从vue-element-plus-admin项目同步TagsView代码实现设置路由标题功能

2f7200ab · zws · 9849a040 · 2f7200ab · 2f7200ab
Commit 2f7200ab authored Jan 16, 2025 by zws
Hide whitespace changes
Inline Side-by-side

Showing with 80 additions and 45 deletions

src/layout/components/TagsView/src/TagsView.vue
+56 -43

src/store/modules/tagsView.ts
+24 -2

No files found.
--- 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<RouteLocationNormalizedLoaded[]>([])
+const selectedTag = computed(() => tagsViewStore.getSelectedTag)
+const setSelectTag = tagsViewStore.setSelectedTag
 const appStore = useAppStore()
 const tagsViewImmerse = computed(() => appStore.getTagsViewImmerse)
@@ -45,82 +56,73 @@ 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<RouteLocationNormalizedLoaded>()
 // 新增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
+  closeCurrent(view, () => {
-  tagsViewStore.delView(view)
+    if (isActive(view)) {
-  if (isActive(view)) {
+      toLastView()
-    toLastView()
+    }
+  })
+}
+// 去最后一个
+const toLastView = () => {
+  const visitedViews = tagsViewStore.getVisitedViews
+  const latestView = visitedViews.slice(-1)[0]
+  if (latestView) {
+    push(latestView)
+  } else {
+    if (
+      unref(currentRoute).path === permissionStore.getAddRouters[0].path ||
+      unref(currentRoute).path === permissionStore.getAddRouters[0].redirect
+    ) {
+      addTags()
+      return
+    }
+    // You can set another route
+    push(permissionStore.getAddRouters[0].path)
  }
 }
 // 关闭全部
 const closeAllTags = () => {
-  tagsViewStore.delAllViews()
+  closeAll(() => {
-  toLastView()
+    toLastView()
+  })
 }
 // 关闭其它
 const closeOthersTags = () => {
-  tagsViewStore.delOthersViews(unref(selectedTag) as RouteLocationNormalizedLoaded)
+  closeOther()
 }
 // 重新加载
 const refreshSelectedTag = async (view?: RouteLocationNormalizedLoaded) => {
-  if (!view) return
+  refreshPage(view)
-  tagsViewStore.delCachedView()
-  const { path, query } = view
-  await nextTick()
-  replace({
-    path: '/redirect' + path,
-    query: query
-  })
 }
 // 关闭左侧
 const closeLeftTags = () => {
-  tagsViewStore.delLeftViews(unref(selectedTag) as RouteLocationNormalizedLoaded)
+  closeLeft()
 }
 // 关闭右侧
 const closeRightTags = () => {
-  tagsViewStore.delRightViews(unref(selectedTag) as RouteLocationNormalizedLoaded)
+  closeRight()
-}
-// 跳转到最后一个
-const toLastView = () => {
-  const visitedViews = tagsViewStore.getVisitedViews
-  const latestView = visitedViews.slice(-1)[0]
-  if (latestView) {
-    push(latestView)
-  } else {
-    if (
-      unref(currentRoute).path === permissionStore.getAddRouters[0].path ||
-      unref(currentRoute).path === permissionStore.getAddRouters[0].redirect
-    ) {
-      addTags()
-      return
-    }
-    // TODO: You can set another route
-    push('/')
-  }
 }
 // 滚动到选中的tag
@@ -209,13 +211,14 @@ const isActive = (route: RouteLocationNormalizedLoaded): boolean => {
 // 所有右键菜单组件的元素
 const itemRefs = useTemplateRefsList<ComponentRef<typeof ContextMenu & ContextMenuExpose>>()
-// 右键菜单装填改变的时候
+// 右键菜单状态改变的时候
 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()

--- 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<string>
+  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