| 提交 | 用户 | age | ||
| c303ec | 1 | import Sortable from 'sortablejs'; |
| V | 2 | import { toRaw, ref, nextTick, onMounted } from 'vue'; |
| 3 | import { RouteLocationNormalized } from 'vue-router'; | |
| 4 | import { useProjectSetting } from '/@/hooks/setting'; | |
| 26b610 | 5 | import router from '/@/router'; |
| c303ec | 6 | import { tabStore } from '/@/store/modules/tab'; |
| V | 7 | import { isNullAndUnDef } from '/@/utils/is'; |
| 26b610 | 8 | |
| c303ec | 9 | export function initAffixTabs(): string[] { |
| V | 10 | const affixList = ref<RouteLocationNormalized[]>([]); |
| 26b610 | 11 | /** |
| V | 12 | * @description: Filter all fixed routes |
| 13 | */ | |
| c303ec | 14 | function filterAffixTabs(routes: RouteLocationNormalized[]) { |
| V | 15 | const tabs: RouteLocationNormalized[] = []; |
| 26b610 | 16 | routes && |
| V | 17 | routes.forEach((route) => { |
| 18 | if (route.meta && route.meta.affix) { | |
| c303ec | 19 | tabs.push(toRaw(route)); |
| 26b610 | 20 | } |
| V | 21 | }); |
| 22 | return tabs; | |
| 23 | } | |
| 24 | ||
| 25 | /** | |
| 26 | * @description: Set fixed tabs | |
| 27 | */ | |
| 28 | function addAffixTabs(): void { | |
| c303ec | 29 | const affixTabs = filterAffixTabs((router.getRoutes() as unknown) as RouteLocationNormalized[]); |
| cedba3 | 30 | affixList.value = affixTabs; |
| 26b610 | 31 | for (const tab of affixTabs) { |
| c303ec | 32 | tabStore.addTabAction(({ |
| V | 33 | meta: tab.meta, |
| 34 | name: tab.name, | |
| 35 | path: tab.path, | |
| 36 | } as unknown) as RouteLocationNormalized); | |
| 26b610 | 37 | } |
| V | 38 | } |
| cedba3 | 39 | |
| 26b610 | 40 | let isAddAffix = false; |
| V | 41 | if (!isAddAffix) { |
| 42 | addAffixTabs(); | |
| 43 | isAddAffix = true; | |
| 44 | } | |
| cedba3 | 45 | return affixList.value.map((item) => item.meta?.title).filter(Boolean); |
| 26b610 | 46 | } |
| c303ec | 47 | |
| V | 48 | export function useTabsDrag(affixTextList: string[]) { |
| 49 | const { multiTabsSetting } = useProjectSetting(); | |
| 50 | ||
| 51 | function initSortableTabs() { | |
| 52 | if (!multiTabsSetting.canDrag) return; | |
| 53 | nextTick(() => { | |
| 54 | const el = document.querySelectorAll( | |
| 55 | '.multiple-tabs .ant-tabs-nav > div' | |
| 56 | )?.[0] as HTMLElement; | |
| 57 | ||
| 58 | if (!el) return; | |
| 59 | Sortable.create(el, { | |
| 60 | animation: 500, | |
| 61 | delay: 400, | |
| 62 | delayOnTouchOnly: true, | |
| 63 | filter: (e: ChangeEvent) => { | |
| 64 | const text = e?.target?.innerText; | |
| 65 | if (!text) return false; | |
| 66 | return affixTextList.includes(text); | |
| 67 | }, | |
| 68 | onEnd: (evt) => { | |
| 69 | const { oldIndex, newIndex } = evt; | |
| 70 | ||
| 71 | if (isNullAndUnDef(oldIndex) || isNullAndUnDef(newIndex) || oldIndex === newIndex) { | |
| 72 | return; | |
| 73 | } | |
| 74 | ||
| 75 | tabStore.commitSortTabs({ oldIndex, newIndex }); | |
| 76 | }, | |
| 77 | }); | |
| 78 | }); | |
| 79 | } | |
| 80 | ||
| 81 | onMounted(() => { | |
| 82 | initSortableTabs(); | |
| 83 | }); | |
| 84 | } | |
