Blame view

src/layouts/default/tabs/index.vue 4.09 KB
vben authored
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<template>
  <div :class="getWrapClass">
    <Tabs
      type="editable-card"
      size="small"
      :animated="false"
      :hideAdd="true"
      :tabBarGutter="3"
      :activeKey="activeKeyRef"
      @change="handleChange"
      @edit="handleEdit"
    >
      <template v-for="item in getTabsState" :key="item.query ? item.fullPath : item.path">
        <TabPane :closable="!(item && item.meta && item.meta.affix)">
          <template #tab>
            <TabContent :tabItem="item" />
          </template>
        </TabPane>
      </template>
vben authored
20
21
      <template #rightExtra v-if="getShowRedo || getShowQuick">
vben authored
22
        <TabRedo v-if="getShowRedo" />
Vben authored
23
        <TabContent isExtra :tabItem="$route" v-if="getShowQuick" />
vben authored
24
        <FoldButton v-if="getShowFold" />
vben authored
25
26
27
28
29
      </template>
    </Tabs>
  </div>
</template>
<script lang="ts">
30
  import type { RouteLocationNormalized, RouteMeta } from 'vue-router';
Vben authored
31
vben authored
32
  import { defineComponent, computed, unref, ref } from 'vue';
vben authored
33
34
35

  import { Tabs } from 'ant-design-vue';
  import TabContent from './components/TabContent.vue';
Vben authored
36
37
  import FoldButton from './components/FoldButton.vue';
  import TabRedo from './components/TabRedo.vue';
vben authored
38
39
40

  import { useGo } from '/@/hooks/web/usePage';
Vben authored
41
42
  import { useMultipleTabStore } from '/@/store/modules/multipleTab';
  import { useUserStore } from '/@/store/modules/user';
vben authored
43
44
45

  import { initAffixTabs, useTabsDrag } from './useMultipleTabs';
  import { useDesign } from '/@/hooks/web/useDesign';
vben authored
46
  import { useMultipleTabSetting } from '/@/hooks/setting/useMultipleTabSetting';
vben authored
47
Vben authored
48
  import { REDIRECT_NAME } from '/@/router/constant';
49
  import { listenerRouteChange } from '/@/logics/mitt/routeChange';
Vben authored
50
Vben authored
51
  import { useRouter } from 'vue-router';
52
vben authored
53
54
55
  export default defineComponent({
    name: 'MultipleTabs',
    components: {
Vben authored
56
      TabRedo,
Vben authored
57
      FoldButton,
vben authored
58
59
60
61
62
63
64
65
66
      Tabs,
      TabPane: Tabs.TabPane,
      TabContent,
    },
    setup() {
      const affixTextList = initAffixTabs();
      const activeKeyRef = ref('');

      useTabsDrag(affixTextList);
Vben authored
67
68
69
70
      const tabStore = useMultipleTabStore();
      const userStore = useUserStore();
      const router = useRouter();
vben authored
71
72
      const { prefixCls } = useDesign('multiple-tabs');
      const go = useGo();
vben authored
73
      const { getShowQuick, getShowRedo, getShowFold } = useMultipleTabSetting();
vben authored
74
75
      const getTabsState = computed(() => {
Vben authored
76
        return tabStore.getTabList.filter((item) => !item.meta?.hideTab);
77
      });
vben authored
78
vben authored
79
      const unClose = computed(() => unref(getTabsState).length === 1);
vben authored
80
81
82
83
84

      const getWrapClass = computed(() => {
        return [
          prefixCls,
          {
vben authored
85
            [`${prefixCls}--hide-close`]: unref(unClose),
vben authored
86
87
88
89
          },
        ];
      });
90
      listenerRouteChange((route) => {
vben authored
91
        const { name } = route;
Vben authored
92
93
94
        if (name === REDIRECT_NAME || !route || !userStore.getToken) {
          return;
        }
vben authored
95
96
        const { path, fullPath, meta = {} } = route;
97
        const { currentActiveMenu, hideTab } = meta as RouteMeta;
98
99
        const isHide = !hideTab ? null : currentActiveMenu;
        const p = isHide || fullPath || path;
vben authored
100
        if (activeKeyRef.value !== p) {
Vben authored
101
          activeKeyRef.value = p as string;
vben authored
102
        }
103
104
105
106
107

        if (isHide) {
          const findParentRoute = router
            .getRoutes()
            .find((item) => item.path === currentActiveMenu);
Vben authored
108
Vben authored
109
          findParentRoute && tabStore.addTab(findParentRoute as unknown as RouteLocationNormalized);
110
        } else {
Vben authored
111
          tabStore.addTab(unref(route));
112
        }
vben authored
113
      });
vben authored
114
115
116
117
118
119
120
121
122

      function handleChange(activeKey: any) {
        activeKeyRef.value = activeKey;
        go(activeKey, false);
      }

      // Close the current tab
      function handleEdit(targetKey: string) {
        // Added operation to hide, currently only use delete operation
Vben authored
123
124
125
        if (unref(unClose)) {
          return;
        }
vben authored
126
Vben authored
127
        tabStore.closeTabByKey(targetKey, router);
vben authored
128
129
130
131
132
133
134
      }
      return {
        getWrapClass,
        handleEdit,
        handleChange,
        activeKeyRef,
        getTabsState,
vben authored
135
136
        getShowQuick,
        getShowRedo,
vben authored
137
        getShowFold,
vben authored
138
139
140
141
142
143
144
      };
    },
  });
</script>
<style lang="less">
  @import './index.less';
</style>