web_dist/src/pinia/use-tabs.ts

// @ts-nocheck
import {computed} from "vue";
import {useLocalStorage} from "@vueuse/core";
import {secondLevelRouterKey} from "@/router";
import XEUtils from "xe-utils";
import {RouteLocationNormalizedLoaded} from "vue-router";
// @ts-ignore
import {stringIsBlank} from "@/utils/blank-utils";
import router from "@/router";

// 定义Tabs类型
export interface Tab {
    name: string;
    query: any;
    title: string;
    path: string
    params: string | null
}

// 导出tabs对象
export const tabs = useLocalStorage<Tab[]>("tabs", [])

export const tabsKeys = computed(() => {
    return XEUtils.eachAndReturnList(tabs, (item) => {
        return item.name
    })
})

export const getKeepAliveNames = computed(() => {
    const tmp = []
    secondLevelRouterKey.forEach((item, key) => {
        if (item.includes(router.currentRoute.value.name)) {
            tmp.push(key)
        }
    })
    return [...tmp, ...tabsKeys.value]
})

function useTabs() {

    function routerPush(index: number) {
        if (XEUtils.has(tabs.value, index)) {
            const pushInfo = tabs.value[index]
            router.push({
                name: pushInfo.name,
                query: pushInfo.query,
                params: pushInfo.params
            }).then(r => {

            })
        } else {
            router.push({
                name: 'dashboard'
            }).then(() => {
            })
        }
    }

    function removeByIndex(index: number) {
        const closeInfo = tabs.value[index]
        const currentRouter = router.currentRoute.value
        if (closeInfo.name === currentRouter.name) {
            if (index > 0) {
                routerPush(index - 1)
            } else {
                routerPush(index + 1)
            }
        }
        tabs.value.splice(index, 1)
    }

    function tabsAdd(info: RouteLocationNormalizedLoaded) {
        const hasIndex = tabsKeys.value.indexOf(info.name)

        const tmp: Tab = {
            path: info.path,
            name: info.name,
            query: info.query,
            title: info.meta.title,
            params: info.params
        }

        if (XEUtils.get(info, 'meta.hideTabs', true)) {
            return
        }

        if (stringIsBlank(info.name)) {
            return;
        }

        if (hasIndex > -1) {
            tabs.value[hasIndex] = tmp
        } else {
            tabs.value.push(tmp)
        }
    }

    function closeRight(index: number) {
        tabs.value.splice(index + 1, tabsKeys.value.length - 1);
        router.push(tabs.value[tabs.value.length - 1].path)
    }

    function closeLeft(index: number) {
        tabs.value.splice(0, index);
        router.push(tabs.value[0].path)
    }

    function closeAll() {
        router.push({
            name: 'dashboard'
        }).then(() => {
        })
        tabs.value = []
    }

    function isActive(name: string) {
        return name === router.currentRoute.value.name
    }

    function closeOther(index: number) {
        routerPush(index)
        tabs.value = tabs.value.splice(index, 1)
    }

    return {
        tabs: tabs,
        removeByIndex,
        routerPush,
        closeRight,
        closeLeft,
        closeAll,
        isActive,
        closeOther,
        tabsAdd
    }
}


export const useTab = useTabs()