|
|
@@ -1,8 +1,6 @@
|
|
|
<script lang="ts" setup>
|
|
|
import type { TabPanelName } from 'element-plus'
|
|
|
-import type { RouteLocationNormalizedLoaded } from 'vue-router'
|
|
|
import config from '@/config/defaultSetting'
|
|
|
-import { useRouterStore } from '@/stores/router'
|
|
|
|
|
|
interface Tab {
|
|
|
name: string
|
|
|
@@ -14,28 +12,23 @@ interface Tab {
|
|
|
|
|
|
const router = useRouter()
|
|
|
const route = useRoute()
|
|
|
-const routerStore = useRouterStore()
|
|
|
|
|
|
const routeToTab = (route: any) => {
|
|
|
- return {
|
|
|
- name: route.name,
|
|
|
- fullPath: route.fullPath || route.path,
|
|
|
- params: route.params,
|
|
|
- query: route.query,
|
|
|
- title: route.meta?.title
|
|
|
- }
|
|
|
-}
|
|
|
-const getHomeRoute = (route: []) => {
|
|
|
- return route.find((item: any) => {
|
|
|
- if (item.children) {
|
|
|
- getHomeRoute(item.children)
|
|
|
- } else {
|
|
|
- return item.name === config.homeRouteName
|
|
|
+ return (
|
|
|
+ route && {
|
|
|
+ name: route.name,
|
|
|
+ fullPath: route.fullPath || route.path,
|
|
|
+ params: route.params,
|
|
|
+ query: route.query,
|
|
|
+ title: route.meta?.title
|
|
|
}
|
|
|
- })
|
|
|
+ )
|
|
|
}
|
|
|
|
|
|
-const tabs = useStorage<any[]>('globalTabs', [routeToTab(getHomeRoute(routerStore.menuRouter))], sessionStorage)
|
|
|
+const defaultTabs = [routeToTab(router.getRoutes().find(item => item.name === config.homeRouteName))]
|
|
|
+route.name !== config.homeRouteName && defaultTabs.push(routeToTab(route))
|
|
|
+
|
|
|
+const tabs = useStorage<any[]>('globalTabs', defaultTabs, sessionStorage)
|
|
|
const activeValue = ref(route.fullPath)
|
|
|
const activeIndex = ref(0)
|
|
|
|
|
|
@@ -43,14 +36,14 @@ const findActiveIndex = (fullPath: string | number) => {
|
|
|
return tabs.value.findIndex(item => item.fullPath === fullPath)
|
|
|
}
|
|
|
|
|
|
-const setTab = (tab: RouteLocationNormalizedLoaded) => {
|
|
|
+const setTab = (tab: Tab) => {
|
|
|
activeValue.value = tab.fullPath
|
|
|
activeIndex.value = findActiveIndex(tab.fullPath)
|
|
|
|
|
|
if (tab.name === 'login' || tabs.value.find(item => item.fullPath === tab.fullPath)) {
|
|
|
return
|
|
|
}
|
|
|
- tabs.value.push(routeToTab(tab))
|
|
|
+ tabs.value.push(tab)
|
|
|
}
|
|
|
const changeTab = (name: TabPanelName) => {
|
|
|
activeIndex.value = findActiveIndex(name)
|
|
|
@@ -66,13 +59,14 @@ const removeTab = (name: TabPanelName) => {
|
|
|
watch(
|
|
|
() => route,
|
|
|
to => {
|
|
|
- setTab(to)
|
|
|
+ setTab(routeToTab(to))
|
|
|
},
|
|
|
{
|
|
|
deep: true
|
|
|
}
|
|
|
)
|
|
|
|
|
|
+// 右键菜单相关
|
|
|
const contextMenuVisible = ref(false)
|
|
|
const left = ref(0)
|
|
|
const top = ref(0)
|