246 lines
8.4 KiB
TypeScript
246 lines
8.4 KiB
TypeScript
import { isEmpty } from 'lodash-es'
|
||
import { defineStore } from 'pinia'
|
||
import { reactive } from 'vue'
|
||
import type { RouteLocationNormalized, RouteRecordRaw } from 'vue-router'
|
||
import { i18n } from '../lang'
|
||
import { adminBaseRoutePath } from '/@/router/static/adminBase'
|
||
import { STORE_TAB_VIEW_CONFIG } from '/@/stores/constant/cacheKey'
|
||
import type { NavTabs } from '/@/stores/interface/index'
|
||
import { layoutNavTabsRef } from '/@/stores/refs'
|
||
|
||
export const useNavTabs = defineStore(
|
||
'navTabs',
|
||
() => {
|
||
const state: NavTabs = reactive({
|
||
activeIndex: 0,
|
||
activeRoute: null,
|
||
tabsView: [],
|
||
tabFullScreen: false,
|
||
tabsViewRoutes: [],
|
||
authNode: new Map(),
|
||
})
|
||
|
||
/**
|
||
* 通过路由路径关闭tab
|
||
* @param fullPath 需要关闭的 tab 的路径
|
||
*/
|
||
const closeTabByPath = (fullPath: string) => {
|
||
layoutNavTabsRef.value?.closeTabByPath(fullPath)
|
||
}
|
||
|
||
/**
|
||
* 关闭所有tab
|
||
* @param menu 需要保留的标签，否则关闭全部标签并打开第一个路由
|
||
*/
|
||
const closeAllTab = (menu?: RouteLocationNormalized) => {
|
||
layoutNavTabsRef.value?.closeAllTab(menu)
|
||
}
|
||
|
||
/**
|
||
* 修改 tab 标题
|
||
* @param fullPath 需要修改标题的 tab 的路径
|
||
* @param title 新的标题
|
||
*/
|
||
const updateTabTitle = (fullPath: string, title: string) => {
|
||
layoutNavTabsRef.value?.updateTabTitle(fullPath, title)
|
||
}
|
||
|
||
/**
|
||
* 添加 tab（内部）
|
||
* ps: router.push 时可自动完成 tab 添加，无需调用此方法
|
||
*/
|
||
function _addTab(route: RouteLocationNormalized) {
|
||
const tabView = { ...route, matched: [], meta: { ...route.meta } }
|
||
if (!tabView.meta.addtab) return
|
||
|
||
// 通过路由寻找菜单的原始数据
|
||
const tabViewRoute = getTabsViewDataByRoute(tabView)
|
||
if (tabViewRoute && tabViewRoute.meta) {
|
||
tabView.name = tabViewRoute.name
|
||
tabView.meta.id = tabViewRoute.meta.id
|
||
tabView.meta.title = tabViewRoute.meta.title
|
||
}
|
||
|
||
for (const key in state.tabsView) {
|
||
// 菜单已在 tabs 存在，更新 params 和 query
|
||
if (state.tabsView[key].meta.id === tabView.meta.id || state.tabsView[key].fullPath == tabView.fullPath) {
|
||
state.tabsView[key].fullPath = tabView.fullPath
|
||
state.tabsView[key].params = !isEmpty(tabView.params) ? tabView.params : state.tabsView[key].params
|
||
state.tabsView[key].query = !isEmpty(tabView.query) ? tabView.query : state.tabsView[key].query
|
||
return
|
||
}
|
||
}
|
||
if (typeof tabView.meta.title == 'string') {
|
||
tabView.meta.title = i18n.global.te(tabView.meta.title) ? i18n.global.t(tabView.meta.title) : tabView.meta.title
|
||
}
|
||
state.tabsView.push(tabView)
|
||
}
|
||
|
||
/**
|
||
* 设置激活 tab（内部）
|
||
* ps: router.push 时可自动完成 tab 激活，无需调用此方法
|
||
*/
|
||
const _setActiveRoute = (route: RouteLocationNormalized): void => {
|
||
const currentRouteIndex: number = state.tabsView.findIndex((item: RouteLocationNormalized) => {
|
||
return item.fullPath === route.fullPath
|
||
})
|
||
if (currentRouteIndex === -1) return
|
||
state.activeRoute = route
|
||
state.activeIndex = currentRouteIndex
|
||
}
|
||
|
||
/**
|
||
* 关闭 tab（内部）
|
||
* ps: 使用 closeTabByPath 代替
|
||
*/
|
||
function _closeTab(route: RouteLocationNormalized) {
|
||
state.tabsView.map((v, k) => {
|
||
if (v.fullPath == route.fullPath) {
|
||
state.tabsView.splice(k, 1)
|
||
return
|
||
}
|
||
})
|
||
}
|
||
|
||
/**
|
||
* 关闭多个标签（内部）
|
||
* ps：使用 closeAllTab 代替
|
||
*/
|
||
const _closeTabs = (retainMenu: RouteLocationNormalized | false = false) => {
|
||
if (retainMenu) {
|
||
state.tabsView = [retainMenu]
|
||
} else {
|
||
state.tabsView = []
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 更新标签标题（内部）
|
||
* ps: 使用 updateTabTitle 代替
|
||
*/
|
||
const _updateTabTitle = (fullPath: string, title: string) => {
|
||
for (const key in state.tabsView) {
|
||
if (state.tabsView[key].fullPath == fullPath) {
|
||
state.tabsView[key].meta.title = title
|
||
break
|
||
}
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 设置从后台加载到的菜单路由列表
|
||
*/
|
||
const setTabsViewRoutes = (data: RouteRecordRaw[]): void => {
|
||
state.tabsViewRoutes = encodeRoutesURI(data)
|
||
}
|
||
|
||
/**
|
||
* 以key设置权限节点
|
||
*/
|
||
const setAuthNode = (key: string, data: string[]) => {
|
||
state.authNode.set(key, data)
|
||
}
|
||
|
||
/**
|
||
* 覆盖设置权限节点
|
||
*/
|
||
const fillAuthNode = (data: Map<string, string[]>) => {
|
||
state.authNode = data
|
||
}
|
||
|
||
/**
|
||
* 设置当前 tab 是否全屏
|
||
* @param status 全屏状态
|
||
*/
|
||
const setFullScreen = (status: boolean): void => {
|
||
state.tabFullScreen = status
|
||
}
|
||
|
||
/**
|
||
* 寻找路由在菜单中的数据
|
||
* @param route 路由
|
||
* @param returnType 返回值要求:normal=返回被搜索的路径对应的菜单数据,above=返回被搜索的路径对应的上一级菜单数组
|
||
*/
|
||
const getTabsViewDataByRoute = (route: RouteLocationNormalized, returnType: 'normal' | 'above' = 'normal'): RouteRecordRaw | false => {
|
||
// 以完整路径寻找
|
||
let found = getTabsViewDataByPath(route.fullPath, state.tabsViewRoutes, returnType)
|
||
if (found) {
|
||
found.meta!.matched = route.fullPath
|
||
return found
|
||
}
|
||
|
||
// 以路径寻找
|
||
found = getTabsViewDataByPath(route.path, state.tabsViewRoutes, returnType)
|
||
if (found) {
|
||
found.meta!.matched = route.path
|
||
return found
|
||
}
|
||
|
||
return false
|
||
}
|
||
|
||
/**
|
||
* 递归的寻找路由路径在菜单中的数据
|
||
* @param path 路由路径
|
||
* @param menus 菜单数据（只有 path 代表完整 url，没有 fullPath）
|
||
* @param returnType 返回值要求:normal=返回被搜索的路径对应的菜单数据,above=返回被搜索的路径对应的上一级菜单数组
|
||
*/
|
||
const getTabsViewDataByPath = (path: string, menus: RouteRecordRaw[], returnType: 'normal' | 'above'): RouteRecordRaw | false => {
|
||
for (const key in menus) {
|
||
// 找到目标
|
||
if (menus[key].path === path) {
|
||
return menus[key]
|
||
}
|
||
// 从子级继续寻找
|
||
if (menus[key].children && menus[key].children.length) {
|
||
const find = getTabsViewDataByPath(path, menus[key].children, returnType)
|
||
if (find) {
|
||
return returnType == 'above' ? menus[key] : find
|
||
}
|
||
}
|
||
}
|
||
return false
|
||
}
|
||
|
||
return {
|
||
state,
|
||
closeAllTab,
|
||
closeTabByPath,
|
||
updateTabTitle,
|
||
setTabsViewRoutes,
|
||
setAuthNode,
|
||
fillAuthNode,
|
||
setFullScreen,
|
||
getTabsViewDataByPath,
|
||
getTabsViewDataByRoute,
|
||
_addTab,
|
||
_closeTab,
|
||
_closeTabs,
|
||
_setActiveRoute,
|
||
_updateTabTitle,
|
||
}
|
||
},
|
||
{
|
||
persist: {
|
||
key: STORE_TAB_VIEW_CONFIG,
|
||
pick: ['state.tabFullScreen'],
|
||
},
|
||
}
|
||
)
|
||
|
||
/**
|
||
* 对iframe的url进行编码
|
||
*/
|
||
function encodeRoutesURI(data: RouteRecordRaw[]) {
|
||
data.forEach((item) => {
|
||
if (item.meta?.menu_type == 'iframe') {
|
||
item.path = adminBaseRoutePath + '/iframe/' + encodeURIComponent(item.path)
|
||
}
|
||
|
||
if (item.children && item.children.length) {
|
||
item.children = encodeRoutesURI(item.children)
|
||
}
|
||
})
|
||
return data
|
||
}
|