提交 | 用户 | age
|
26b610
|
1 |
import './index.less'; |
V |
2 |
|
2f6253
|
3 |
import type { TabContentProps } from './tab.data'; |
陈 |
4 |
import type { TabItem } from '/@/store/modules/tab'; |
|
5 |
import type { AppRouteRecordRaw } from '/@/router/types'; |
|
6 |
|
26b610
|
7 |
import { defineComponent, watch, computed, unref } from 'vue'; |
4baf90
|
8 |
import { useRouter } from 'vue-router'; |
V |
9 |
|
2f6253
|
10 |
import { Tabs } from 'ant-design-vue'; |
陈 |
11 |
import TabContent from './TabContent'; |
|
12 |
|
|
13 |
import { useGo } from '/@/hooks/web/usePage'; |
|
14 |
|
|
15 |
import { TabContentEnum } from './tab.data'; |
|
16 |
|
|
17 |
import { tabStore } from '/@/store/modules/tab'; |
4baf90
|
18 |
import { userStore } from '/@/store/modules/user'; |
V |
19 |
|
2f6253
|
20 |
import { closeTab } from './useTabDropdown'; |
f2bdf0
|
21 |
import { useTabs } from '/@/hooks/web/useTabs'; |
26b610
|
22 |
import { initAffixTabs } from './useAffixTabs'; |
f2bdf0
|
23 |
|
2f6253
|
24 |
export default defineComponent({ |
26b610
|
25 |
name: 'MultipleTabs', |
2f6253
|
26 |
setup() { |
26b610
|
27 |
initAffixTabs(); |
41d790
|
28 |
|
2f6253
|
29 |
const go = useGo(); |
41d790
|
30 |
|
2f6253
|
31 |
const { currentRoute } = useRouter(); |
439291
|
32 |
const { activeKeyRef } = useTabs(); |
beb4c3
|
33 |
|
41d790
|
34 |
const getTabsState = computed(() => tabStore.getTabsState); |
2f6253
|
35 |
|
ba068b
|
36 |
// If you monitor routing changes, tab switching will be stuck. So setting this method |
2f6253
|
37 |
watch( |
4baf90
|
38 |
() => tabStore.getLastChangeRouteState, |
6bffdb
|
39 |
() => { |
4baf90
|
40 |
const lastChangeRoute = unref(tabStore.getLastChangeRouteState); |
41d790
|
41 |
|
4baf90
|
42 |
if (!lastChangeRoute || !userStore.getTokenState) return; |
V |
43 |
|
|
44 |
const { path, fullPath } = lastChangeRoute; |
|
45 |
if (activeKeyRef.value !== (fullPath || path)) { |
|
46 |
activeKeyRef.value = fullPath || path; |
|
47 |
} |
|
48 |
tabStore.commitAddTab((lastChangeRoute as unknown) as AppRouteRecordRaw); |
2f6253
|
49 |
}, |
陈 |
50 |
{ |
|
51 |
immediate: true, |
|
52 |
} |
|
53 |
); |
beb4c3
|
54 |
|
2f6253
|
55 |
// tab切换 |
陈 |
56 |
function handleChange(activeKey: any) { |
|
57 |
activeKeyRef.value = activeKey; |
|
58 |
go(activeKey, false); |
|
59 |
} |
beb4c3
|
60 |
|
26b610
|
61 |
// 关闭当前tab |
2f6253
|
62 |
function handleEdit(targetKey: string) { |
26b610
|
63 |
// Added operation to hide, currently only use delete operation |
6bffdb
|
64 |
const index = unref(getTabsState).findIndex( |
V |
65 |
(item) => (item.fullPath || item.path) === targetKey |
|
66 |
); |
2f6253
|
67 |
index !== -1 && closeTab(unref(getTabsState)[index]); |
陈 |
68 |
} |
|
69 |
|
|
70 |
function renderQuick() { |
|
71 |
const tabContentProps: TabContentProps = { |
|
72 |
tabItem: (currentRoute as unknown) as AppRouteRecordRaw, |
|
73 |
type: TabContentEnum.EXTRA_TYPE, |
|
74 |
trigger: ['click', 'contextmenu'], |
|
75 |
}; |
|
76 |
return ( |
|
77 |
<span> |
31e271
|
78 |
<TabContent {...(tabContentProps as any)} /> |
2f6253
|
79 |
</span> |
陈 |
80 |
); |
|
81 |
} |
26b610
|
82 |
|
2f6253
|
83 |
function renderTabs() { |
陈 |
84 |
return unref(getTabsState).map((item: TabItem) => { |
6bffdb
|
85 |
const key = item.query ? item.fullPath : item.path; |
26b610
|
86 |
const closable = !(item && item.meta && item.meta.affix); |
2f6253
|
87 |
return ( |
26b610
|
88 |
<Tabs.TabPane key={key} closable={closable}> |
2f6253
|
89 |
{{ |
陈 |
90 |
tab: () => <TabContent tabItem={item} />, |
|
91 |
}} |
|
92 |
</Tabs.TabPane> |
|
93 |
); |
|
94 |
}); |
|
95 |
} |
|
96 |
|
|
97 |
return () => { |
|
98 |
return ( |
|
99 |
<div class="multiple-tabs"> |
|
100 |
<Tabs |
|
101 |
type="editable-card" |
|
102 |
size="small" |
6e4005
|
103 |
animated={false} |
2f6253
|
104 |
hideAdd={true} |
770283
|
105 |
tabBarGutter={4} |
2f6253
|
106 |
activeKey={unref(activeKeyRef)} |
陈 |
107 |
onChange={handleChange} |
|
108 |
onEdit={handleEdit} |
|
109 |
> |
|
110 |
{{ |
|
111 |
default: () => renderTabs(), |
|
112 |
tabBarExtraContent: () => renderQuick(), |
|
113 |
}} |
|
114 |
</Tabs> |
|
115 |
</div> |
|
116 |
); |
|
117 |
}; |
|
118 |
}, |
|
119 |
}); |