| 提交 | 用户 | 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 | }); | |
