import type { AppRouteRecordRaw } from '/@/router/types';
|
import type { TabContentProps } from './tab.data';
|
import type { Ref } from 'vue';
|
import type { TabItem } from '/@/store/modules/tab';
|
import type { DropMenu } from '/@/components/Dropdown';
|
|
import { computed, unref } from 'vue';
|
import { TabContentEnum, MenuEventEnum, getActions } from './tab.data';
|
import { tabStore } from '/@/store/modules/tab';
|
import { appStore } from '/@/store/modules/app';
|
import { PageEnum } from '/@/enums/pageEnum';
|
import { useGo, useRedo } from '/@/hooks/web/usePage';
|
import router from '/@/router';
|
import { useTabs, isInitUseTab } from '/@/hooks/web/useTabs';
|
|
const { initTabFn } = useTabs();
|
/**
|
* @description: 右键下拉
|
*/
|
export function useTabDropdown(tabContentProps: TabContentProps) {
|
const { currentRoute } = router;
|
const redo = useRedo();
|
const go = useGo();
|
|
const isTabsRef = computed(() => tabContentProps.type === TabContentEnum.TAB_TYPE);
|
const getCurrentTab: Ref<TabItem | AppRouteRecordRaw> = computed(() => {
|
return unref(isTabsRef)
|
? tabContentProps.tabItem
|
: ((unref(currentRoute) as any) as AppRouteRecordRaw);
|
});
|
|
// 当前tab列表
|
const getTabsState = computed(() => {
|
return tabStore.getTabsState;
|
});
|
|
/**
|
* @description: 下拉列表
|
*/
|
const getDropMenuList = computed(() => {
|
const dropMenuList = getActions();
|
// 重置为初始状态
|
for (const item of dropMenuList) {
|
item.disabled = false;
|
}
|
|
// 没有tab
|
if (!unref(getTabsState) || unref(getTabsState).length <= 0) {
|
return dropMenuList;
|
} else if (unref(getTabsState).length === 1) {
|
// 只有一个tab
|
for (const item of dropMenuList) {
|
if (item.event !== MenuEventEnum.REFRESH_PAGE) {
|
item.disabled = true;
|
}
|
}
|
return dropMenuList;
|
}
|
if (!unref(getCurrentTab)) {
|
return;
|
}
|
const { meta, path } = unref(getCurrentTab);
|
// console.log(unref(getCurrentTab));
|
|
// 刷新按钮
|
const curItem = tabStore.getCurrentContextMenuState;
|
const index = tabStore.getCurrentContextMenuIndexState;
|
const refreshDisabled = curItem ? curItem.path !== path : true;
|
// 关闭左侧
|
const closeLeftDisabled = index === 0;
|
|
// 关闭右侧
|
const closeRightDisabled = index === unref(getTabsState).length - 1;
|
// 当前为固定tab
|
dropMenuList[0].disabled = unref(isTabsRef) ? refreshDisabled : false;
|
if (meta && meta.affix) {
|
dropMenuList[1].disabled = true;
|
}
|
dropMenuList[2].disabled = closeLeftDisabled;
|
dropMenuList[3].disabled = closeRightDisabled;
|
|
return dropMenuList;
|
});
|
|
/**
|
* @description: 关闭所有页面时，跳转页面
|
*/
|
function gotoPage() {
|
const len = unref(getTabsState).length;
|
const { path } = unref(currentRoute);
|
|
let toPath: PageEnum | string = PageEnum.BASE_HOME;
|
|
if (len > 0) {
|
toPath = unref(getTabsState)[len - 1].path;
|
}
|
// 跳到当前页面报错
|
path !== toPath && go(toPath as PageEnum, true);
|
}
|
|
function isGotoPage(currentTab?: TabItem) {
|
const { path } = unref(currentRoute);
|
const currentPath = (currentTab || unref(getCurrentTab)).path;
|
// 不是当前tab，关闭左侧/右侧时，需跳转页面
|
if (path !== currentPath) {
|
go(currentPath as PageEnum, true);
|
}
|
}
|
function refreshPage(tabItem?: TabItem) {
|
try {
|
tabStore.commitCloseTabKeepAlive(tabItem || unref(getCurrentTab));
|
} catch (error) {}
|
redo();
|
}
|
function closeAll() {
|
tabStore.commitCloseAllTab();
|
gotoPage();
|
}
|
function closeLeft(tabItem?: TabItem) {
|
tabStore.closeLeftTabAction(tabItem || unref(getCurrentTab));
|
isGotoPage(tabItem);
|
}
|
function closeRight(tabItem?: TabItem) {
|
tabStore.closeRightTabAction(tabItem || unref(getCurrentTab));
|
isGotoPage(tabItem);
|
}
|
function closeOther(tabItem?: TabItem) {
|
tabStore.closeOtherTabAction(tabItem || unref(getCurrentTab));
|
isGotoPage(tabItem);
|
}
|
function closeCurrent(tabItem?: TabItem) {
|
closeTab(unref(tabItem || unref(getCurrentTab)));
|
}
|
function scaleScreen() {
|
const {
|
headerSetting: { show: showHeader },
|
menuSetting: { show: showMenu },
|
} = appStore.getProjectConfig;
|
const isScale = !showHeader && !showMenu;
|
appStore.commitProjectConfigState({
|
headerSetting: { show: isScale },
|
menuSetting: { show: isScale },
|
});
|
}
|
|
if (!isInitUseTab) {
|
initTabFn({
|
refreshPageFn: refreshPage,
|
closeAllFn: closeAll,
|
closeCurrentFn: closeCurrent,
|
closeLeftFn: closeLeft,
|
closeOtherFn: closeOther,
|
closeRightFn: closeRight,
|
});
|
}
|
|
// 处理右键事件
|
function handleMenuEvent(menu: DropMenu): void {
|
const { event } = menu;
|
|
switch (event) {
|
case MenuEventEnum.SCALE:
|
scaleScreen();
|
break;
|
case MenuEventEnum.REFRESH_PAGE:
|
// 刷新页面
|
refreshPage();
|
break;
|
// 关闭当前
|
case MenuEventEnum.CLOSE_CURRENT:
|
closeCurrent();
|
break;
|
// 关闭左侧
|
case MenuEventEnum.CLOSE_LEFT:
|
closeLeft();
|
break;
|
// 关闭右侧
|
case MenuEventEnum.CLOSE_RIGHT:
|
closeRight();
|
break;
|
// 关闭其他
|
case MenuEventEnum.CLOSE_OTHER:
|
closeOther();
|
break;
|
// 关闭其他
|
case MenuEventEnum.CLOSE_ALL:
|
closeAll();
|
break;
|
default:
|
break;
|
}
|
}
|
return { getDropMenuList, handleMenuEvent };
|
}
|
export function closeTab(closedTab: TabItem) {
|
const { currentRoute, replace } = router;
|
// 当前tab列表
|
const getTabsState = computed(() => {
|
return tabStore.getTabsState;
|
});
|
const { path } = unref(currentRoute);
|
if (path !== closedTab.path) {
|
// 关闭的不是激活tab
|
tabStore.commitCloseTab(closedTab);
|
return;
|
}
|
// 关闭的为激活atb
|
let toPath: PageEnum | string;
|
const index = unref(getTabsState).findIndex((item) => item.path === path);
|
|
// 如果当前为最左边tab
|
if (index === 0) {
|
// 只有一个tab，则跳转至首页，否则跳转至右tab
|
if (unref(getTabsState).length === 1) {
|
toPath = PageEnum.BASE_HOME;
|
} else {
|
// 跳转至右边tab
|
toPath = unref(getTabsState)[index + 1].path;
|
}
|
} else {
|
// 跳转至左边tab
|
toPath = unref(getTabsState)[index - 1].path;
|
}
|
const route = (unref(currentRoute) as unknown) as AppRouteRecordRaw;
|
tabStore.commitCloseTab(route);
|
replace(toPath);
|
}
|
