import { useRouter, useRoute } from 'vue-router'; import { EleMessage } from 'ele-admin-plus'; import type { TabItem, TabItemEventOption } from 'ele-admin-plus/es/ele-pro-layout/types'; import { useThemeStore } from '@/store/modules/theme'; import type { TabRemoveResult } from '@/store/modules/theme'; import { HOME_PATH, LAYOUT_PATH, REDIRECT_PATH } from '@/config/setting'; /** * 页签操作hook */ export function usePageTab() { const HOME_ROUTE = HOME_PATH || LAYOUT_PATH; const route = useRoute(); const { push, replace } = useRouter(); const themeStore = useThemeStore(); /** * 获取当前路由对应的页签key */ const getRouteTabKey = () => { const { path, fullPath, meta } = route; return meta.tabUnique === false ? fullPath : path; }; /** * 当前路由对应的页签key */ const routeTabKey = getRouteTabKey(); /** * 刷新当前路由 */ const reloadPageTab = (option?: TabReloadOptions) => { if (route.path.includes(REDIRECT_PATH)) { return; } if (!option || !option.fullPath) { // 刷新当前路由 setPageTab({ fullPath: route.fullPath, refresh: true }); replace({ path: REDIRECT_PATH + route.path, query: route.query }); } else { // 刷新指定页签 setPageTab({ fullPath: option.fullPath, refresh: true }); replace(REDIRECT_PATH + option.fullPath); } }; /** * 关闭当前页签 */ const finishPageTab = () => { removePageTab({ key: routeTabKey, active: getRouteTabKey() }); }; /** * 关闭指定页签 */ const removePageTab = (option: TabItemEventOption) => { themeStore .tabRemove(option) .then((result) => { handleRemoveDone(result); }) .catch(() => { EleMessage.error({ message: '当前页签不可关闭', plain: true }); }); }; /** * 关闭左侧页签 */ const removeLeftPageTab = (option: TabItemEventOption) => { themeStore .tabRemoveLeft(option) .then((result) => { handleRemoveDone(result); }) .catch(() => { EleMessage.error({ message: '左侧没有可关闭的页签', plain: true }); }); }; /** * 关闭右侧页签 */ const removeRightPageTab = (option: TabItemEventOption) => { themeStore .tabRemoveRight(option) .then((result) => { handleRemoveDone(result); }) .catch(() => { EleMessage.error({ message: '右侧没有可关闭的页签', plain: true }); }); }; /** * 关闭其它页签 */ const removeOtherPageTab = (option: TabItemEventOption) => { themeStore .tabRemoveOther(option) .then((result) => { handleRemoveDone(result); }) .catch(() => { EleMessage.error({ message: '没有可关闭的页签', plain: true }); }); }; /** * 关闭全部页签 */ const removeAllPageTab = (option: TabItemEventOption) => { themeStore .tabRemoveAll(option) .then((result) => { handleRemoveDone(result); }) .catch(() => { EleMessage.error({ message: '没有可关闭的页签', plain: true }); }); }; /** * 页签移除方法完成操作 */ const handleRemoveDone = ({ path, home }: TabRemoveResult) => { if (path) { push(path); } else if (home) { push(HOME_ROUTE); } }; /** * 更新页签数据 * @param data 页签数据 */ const setPageTabs = (data: TabItem[]) => { themeStore.setValue('tabs', data).catch((e) => console.error(e)); }; /** * 登录成功后清空页签 */ const cleanPageTabs = () => { setPageTabs([]); }; /** * 添加页签 * @param data 页签数据 */ const addPageTab = (data: TabItem) => { themeStore.tabAdd(data); }; /** * 修改页签 * @param data 页签数据 */ const setPageTab = (data: TabItem) => { themeStore.tabSetItem(data); }; /** * 修改当前页签标题 * @param title 标题 */ const setPageTabTitle = (title: string) => { setPageTab({ key: routeTabKey, title }); }; /** * 登录成功后跳转首页 * @param from 登录前的地址 */ const goHomeRoute = (from?: string) => { replace(from ? decodeURIComponent(from) : HOME_ROUTE); }; return { reloadPageTab, finishPageTab, removePageTab, removeLeftPageTab, removeRightPageTab, removeOtherPageTab, removeAllPageTab, setPageTabs, cleanPageTabs, addPageTab, setPageTab, setPageTabTitle, getRouteTabKey, goHomeRoute, routeTabKey }; } /** * 刷新页签参数类型 */ export interface TabReloadOptions { /** 路由地址 */ fullPath?: string; }