|
@@ -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
|
|
|
- tagsViewStore.delView(view)
|
|
|
- if (isActive(view)) {
|
|
|
- toLastView()
|
|
|
+ closeCurrent(view, () => {
|
|
|
+ if (isActive(view)) {
|
|
|
+ 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()
|
|
|
- toLastView()
|
|
|
+ closeAll(() => {
|
|
|
+ toLastView()
|
|
|
+ })
|
|
|
}
|
|
|
|
|
|
// 关闭其它
|
|
|
const closeOthersTags = () => {
|
|
|
- tagsViewStore.delOthersViews(unref(selectedTag) as RouteLocationNormalizedLoaded)
|
|
|
+ closeOther()
|
|
|
}
|
|
|
|
|
|
// 重新加载
|
|
|
const refreshSelectedTag = async (view?: RouteLocationNormalizedLoaded) => {
|
|
|
- if (!view) return
|
|
|
- tagsViewStore.delCachedView()
|
|
|
- const { path, query } = view
|
|
|
- await nextTick()
|
|
|
- replace({
|
|
|
- path: '/redirect' + path,
|
|
|
- query: query
|
|
|
- })
|
|
|
+ refreshPage(view)
|
|
|
}
|
|
|
|
|
|
// 关闭左侧
|
|
|
const closeLeftTags = () => {
|
|
|
- tagsViewStore.delLeftViews(unref(selectedTag) as RouteLocationNormalizedLoaded)
|
|
|
+ closeLeft()
|
|
|
}
|
|
|
|
|
|
// 关闭右侧
|
|
|
const closeRightTags = () => {
|
|
|
- tagsViewStore.delRightViews(unref(selectedTag) as RouteLocationNormalizedLoaded)
|
|
|
-}
|
|
|
-
|
|
|
-// 跳转到最后一个
|
|
|
-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('/')
|
|
|
- }
|
|
|
+ closeRight()
|
|
|
}
|
|
|
|
|
|
// 滚动到选中的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()
|