| | |
| | | import type { TabContentProps } from './types'; |
| | | import type { DropMenu } from '/@/components/Dropdown'; |
| | | import type { ComputedRef } from 'vue'; |
| | | |
| | | import { computed, unref, reactive } from 'vue'; |
| | | import { TabContentEnum, MenuEventEnum } from './types'; |
| | | import { tabStore } from '/@/store/modules/tab'; |
| | | import router from '/@/router'; |
| | | import { RouteLocationNormalized } from 'vue-router'; |
| | | import { MenuEventEnum } from './types'; |
| | | import { useMultipleTabStore } from '/@/store/modules/multipleTab'; |
| | | import { RouteLocationNormalized, useRouter } from 'vue-router'; |
| | | import { useTabs } from '/@/hooks/web/useTabs'; |
| | | import { useI18n } from '/@/hooks/web/useI18n'; |
| | | |
| | | const { t } = useI18n(); |
| | | |
| | | export function useTabDropdown(tabContentProps: TabContentProps) { |
| | | export function useTabDropdown(tabContentProps: TabContentProps, getIsTabs: ComputedRef<boolean>) { |
| | | const state = reactive({ |
| | | current: null as Nullable<RouteLocationNormalized>, |
| | | currentIndex: 0, |
| | | }); |
| | | |
| | | const { currentRoute } = router; |
| | | const { t } = useI18n(); |
| | | const tabStore = useMultipleTabStore(); |
| | | const { currentRoute } = useRouter(); |
| | | const { refreshPage, closeAll, close, closeLeft, closeOther, closeRight } = useTabs(); |
| | | |
| | | const isTabs = computed(() => tabContentProps.type === TabContentEnum.TAB_TYPE); |
| | | |
| | | const getCurrentTab = computed( |
| | | const getTargetTab = computed( |
| | | (): RouteLocationNormalized => { |
| | | return unref(isTabs) ? tabContentProps.tabItem : unref(currentRoute); |
| | | return unref(getIsTabs) ? tabContentProps.tabItem : unref(currentRoute); |
| | | } |
| | | ); |
| | | |
| | |
| | | * @description: drop-down list |
| | | */ |
| | | const getDropMenuList = computed(() => { |
| | | if (!unref(getCurrentTab)) return; |
| | | const { meta } = unref(getCurrentTab); |
| | | if (!unref(getTargetTab)) { |
| | | return; |
| | | } |
| | | const { meta } = unref(getTargetTab); |
| | | const { path } = unref(currentRoute); |
| | | |
| | | // Refresh button |
| | |
| | | // Close left |
| | | const closeLeftDisabled = index === 0; |
| | | |
| | | const disabled = tabStore.getTabsState.length === 1; |
| | | const disabled = tabStore.getTabList.length === 1; |
| | | |
| | | // Close right |
| | | const closeRightDisabled = |
| | | index === tabStore.getTabsState.length - 1 && tabStore.getLastDragEndIndexState >= 0; |
| | | index === tabStore.getTabList.length - 1 && tabStore.getLastDragEndIndex >= 0; |
| | | const dropMenuList: DropMenu[] = [ |
| | | { |
| | | icon: 'ion:reload-sharp', |
| | |
| | | icon: 'clarity:close-line', |
| | | event: MenuEventEnum.CLOSE_CURRENT, |
| | | text: t('layout.multipleTab.close'), |
| | | disabled: meta?.affix || disabled, |
| | | disabled: !!meta?.affix || disabled, |
| | | divider: true, |
| | | }, |
| | | { |
| | |
| | | return dropMenuList; |
| | | }); |
| | | |
| | | const getTrigger = computed(() => { |
| | | return unref(isTabs) ? ['contextmenu'] : ['click']; |
| | | }); |
| | | |
| | | function handleContextMenu(tabItem: RouteLocationNormalized) { |
| | | return (e: Event) => { |
| | | if (!tabItem) return; |
| | | if (!tabItem) { |
| | | return; |
| | | } |
| | | e?.preventDefault(); |
| | | const index = tabStore.getTabsState.findIndex((tab) => tab.path === tabItem.path); |
| | | const index = tabStore.getTabList.findIndex((tab) => tab.path === tabItem.path); |
| | | state.current = tabItem; |
| | | state.currentIndex = index; |
| | | }; |
| | |
| | | |
| | | // Handle right click event |
| | | function handleMenuEvent(menu: DropMenu): void { |
| | | const { refreshPage, closeAll, close, closeLeft, closeOther, closeRight } = useTabs(); |
| | | const { event } = menu; |
| | | switch (event) { |
| | | case MenuEventEnum.SCALE: |
| | | scaleScreen(); |
| | | break; |
| | | case MenuEventEnum.REFRESH_PAGE: |
| | | // refresh page |
| | | refreshPage(); |
| | |
| | | break; |
| | | } |
| | | } |
| | | return { getDropMenuList, handleMenuEvent, handleContextMenu, getTrigger, isTabs }; |
| | | return { getDropMenuList, handleMenuEvent, handleContextMenu }; |
| | | } |