Blame view

src/layouts/default/tabs/useTabDropdown.ts 4.01 KB
vben authored
1
import type { TabContentProps } from './types';
陈文彬 authored
2
import type { DropMenu } from '/@/components/Dropdown';
Vben authored
3
import type { ComputedRef } from 'vue';
陈文彬 authored
4
vben authored
5
import { computed, unref, reactive } from 'vue';
Vben authored
6
7
8
import { MenuEventEnum } from './types';
import { useMultipleTabStore } from '/@/store/modules/multipleTab';
import { RouteLocationNormalized, useRouter } from 'vue-router';
vben authored
9
10
import { useTabs } from '/@/hooks/web/useTabs';
import { useI18n } from '/@/hooks/web/useI18n';
陈文彬 authored
11
Vben authored
12
export function useTabDropdown(tabContentProps: TabContentProps, getIsTabs: ComputedRef<boolean>) {
vben authored
13
14
15
  const state = reactive({
    current: null as Nullable<RouteLocationNormalized>,
    currentIndex: 0,
陈文彬 authored
16
17
  });
Vben authored
18
19
20
21
  const { t } = useI18n();
  const tabStore = useMultipleTabStore();
  const { currentRoute } = useRouter();
  const { refreshPage, closeAll, close, closeLeft, closeOther, closeRight } = useTabs();
vben authored
22
Vben authored
23
24
25
  const getTargetTab = computed((): RouteLocationNormalized => {
    return unref(getIsTabs) ? tabContentProps.tabItem : unref(currentRoute);
  });
vben authored
26
陈文彬 authored
27
  /**
28
   * @description: drop-down list
陈文彬 authored
29
30
   */
  const getDropMenuList = computed(() => {
Vben authored
31
32
33
34
    if (!unref(getTargetTab)) {
      return;
    }
    const { meta } = unref(getTargetTab);
vben authored
35
    const { path } = unref(currentRoute);
陈文彬 authored
36
vben authored
37
    const curItem = state.current;
38
39
40
41

    const isCurItem = curItem ? curItem.path === path : false;

    // Refresh button
vben authored
42
    const index = state.currentIndex;
43
    const refreshDisabled = !isCurItem;
44
    // Close left
45
    const closeLeftDisabled = index === 0 || !isCurItem;
陈文彬 authored
46
Vben authored
47
    const disabled = tabStore.getTabList.length === 1;
vben authored
48
49
    // Close right
vben authored
50
    const closeRightDisabled =
51
      !isCurItem || (index === tabStore.getTabList.length - 1 && tabStore.getLastDragEndIndex >= 0);
vben authored
52
53
    const dropMenuList: DropMenu[] = [
      {
陈小婷 authored
54
        icon: 'ion:reload-sharp',
vben authored
55
        event: MenuEventEnum.REFRESH_PAGE,
vben authored
56
        text: t('layout.multipleTab.reload'),
vben authored
57
58
59
        disabled: refreshDisabled,
      },
      {
陈小婷 authored
60
        icon: 'clarity:close-line',
vben authored
61
62
        event: MenuEventEnum.CLOSE_CURRENT,
        text: t('layout.multipleTab.close'),
Vben authored
63
        disabled: !!meta?.affix || disabled,
vben authored
64
65
66
        divider: true,
      },
      {
陈小婷 authored
67
        icon: 'line-md:arrow-close-left',
vben authored
68
69
70
71
72
73
        event: MenuEventEnum.CLOSE_LEFT,
        text: t('layout.multipleTab.closeLeft'),
        disabled: closeLeftDisabled,
        divider: false,
      },
      {
陈小婷 authored
74
        icon: 'line-md:arrow-close-right',
vben authored
75
76
77
78
79
80
        event: MenuEventEnum.CLOSE_RIGHT,
        text: t('layout.multipleTab.closeRight'),
        disabled: closeRightDisabled,
        divider: true,
      },
      {
陈小婷 authored
81
        icon: 'dashicons:align-center',
vben authored
82
83
        event: MenuEventEnum.CLOSE_OTHER,
        text: t('layout.multipleTab.closeOther'),
84
        disabled: disabled || !isCurItem,
vben authored
85
86
      },
      {
陈小婷 authored
87
        icon: 'clarity:minus-line',
vben authored
88
89
90
91
92
93
        event: MenuEventEnum.CLOSE_ALL,
        text: t('layout.multipleTab.closeAll'),
        disabled: disabled,
      },
    ];
陈文彬 authored
94
95
96
    return dropMenuList;
  });
vben authored
97
98
  function handleContextMenu(tabItem: RouteLocationNormalized) {
    return (e: Event) => {
Vben authored
99
100
101
      if (!tabItem) {
        return;
      }
vben authored
102
      e?.preventDefault();
Vben authored
103
      const index = tabStore.getTabList.findIndex((tab) => tab.path === tabItem.path);
vben authored
104
105
106
      state.current = tabItem;
      state.currentIndex = index;
    };
陈文彬 authored
107
  }
108
109

  // Handle right click event
陈文彬 authored
110
111
112
113
  function handleMenuEvent(menu: DropMenu): void {
    const { event } = menu;
    switch (event) {
      case MenuEventEnum.REFRESH_PAGE:
114
        // refresh page
陈文彬 authored
115
116
        refreshPage();
        break;
117
      // Close current
陈文彬 authored
118
      case MenuEventEnum.CLOSE_CURRENT:
vben authored
119
        close(tabContentProps.tabItem);
陈文彬 authored
120
        break;
121
      // Close left
陈文彬 authored
122
123
124
      case MenuEventEnum.CLOSE_LEFT:
        closeLeft();
        break;
125
      // Close right
陈文彬 authored
126
127
128
      case MenuEventEnum.CLOSE_RIGHT:
        closeRight();
        break;
129
      // Close other
陈文彬 authored
130
131
132
      case MenuEventEnum.CLOSE_OTHER:
        closeOther();
        break;
133
      // Close all
陈文彬 authored
134
135
136
137
138
      case MenuEventEnum.CLOSE_ALL:
        closeAll();
        break;
    }
  }
Vben authored
139
  return { getDropMenuList, handleMenuEvent, handleContextMenu };
陈文彬 authored
140
}