cdTestPlant3/cdTMP/src/layout/components/tab-item.vue

<template>
    <a-dropdown trigger="contextMenu" :popup-max-height="false" @select="actionSelect">
        <span
            class="arco-tag arco-tag-size-medium arco-tag-checked"
            :class="{ 'link-activated': itemData.fullPath === $route.fullPath }"
            @click="goto(itemData)"
        >
            <span class="tag-link"> {{ itemData.title }} </span>
            <span
                class="arco-icon-hover arco-tag-icon-hover arco-icon-hover-size-medium arco-tag-close-btn"
                @click.stop="tagClose(itemData, index)"
            >
                <icon-close />
            </span>
        </span>
        <template #content>
            <a-doption :disabled="disabledReload" :value="Eaction.reload">
                <icon-refresh />
                <span>重新加载</span>
            </a-doption>
            <a-doption class="sperate-line" :disabled="disabledCurrent" :value="Eaction.current">
                <icon-close />
                <span>关闭当前标签页</span>
            </a-doption>
            <a-doption :disabled="disabledLeft" :value="Eaction.left">
                <icon-to-left />
                <span>关闭左侧标签页</span>
            </a-doption>
            <a-doption class="sperate-line" :disabled="disabledRight" :value="Eaction.right">
                <icon-to-right />
                <span>关闭右侧标签页</span>
            </a-doption>
            <a-doption :value="Eaction.others">
                <icon-swap />
                <span>关闭其它标签页</span>
            </a-doption>
            <a-doption :value="Eaction.all">
                <icon-folder-delete />
                <span>关闭全部标签页</span>
            </a-doption>
        </template>
    </a-dropdown>
</template>

<script lang="ts" setup>
import { PropType, computed } from "vue"
import { useRouter, useRoute } from "vue-router"
import { useTabBarStore } from "@/store"
import { DEFAULT_ROUTE_NAME, REDIRECT_ROUTE_NAME } from "@/router/constants"

// eslint-disable-next-line no-shadow
enum Eaction {
    reload = "reload",
    current = "current",
    left = "left",
    right = "right",
    others = "others",
    all = "all"
}

const props = defineProps({
    itemData: {
        type: Object,
        default() {
            return []
        }
    },
    index: {
        type: Number,
        default: 0
    }
})

const router = useRouter()
const route = useRoute()
const tabBarStore = useTabBarStore()

const goto = (tag) => {
    router.push({ ...tag })
}
const tagList = computed(() => {
    return tabBarStore.getTabList
})

const disabledReload = computed(() => {
    return props.itemData.fullPath !== route.fullPath
})

const disabledCurrent = computed(() => {
    return props.index === 0
})

const disabledLeft = computed(() => {
    return [0, 1].includes(props.index)
})

const disabledRight = computed(() => {
    return props.index === tagList.value.length - 1
})

const tagClose = (tag, idx) => {
    tabBarStore.deleteTag(idx, tag)
    if (props.itemData.fullPath === route.fullPath) {
        const latest = tagList.value[idx - 1] // 获取队列的前一个tab
        router.push({ name: latest.name })
    }
}

const findCurrentRouteIndex = () => {
    return tagList.value.findIndex((el) => el.fullPath === route.fullPath)
}
const actionSelect = async (value: any) => {
    const { itemData, index } = props
    const copyTagList = [...tagList.value]
    if (value === Eaction.current) {
        tagClose(itemData, index)
    } else if (value === Eaction.left) {
        const currentRouteIdx = findCurrentRouteIndex()
        copyTagList.splice(1, props.index - 1)

        tabBarStore.freshTabList(copyTagList)
        if (currentRouteIdx < index) {
            router.push({ name: itemData.name })
        }
    } else if (value === Eaction.right) {
        const currentRouteIdx = findCurrentRouteIndex()
        copyTagList.splice(props.index + 1)

        tabBarStore.freshTabList(copyTagList)
        if (currentRouteIdx > index) {
            router.push({ name: itemData.name })
        }
    } else if (value === Eaction.others) {
        const filterList = tagList.value.filter((el, idx) => {
            return idx === 0 || idx === props.index
        })
        tabBarStore.freshTabList(filterList)
        router.push({ name: itemData.name })
    } else if (value === Eaction.reload) {
        tabBarStore.deleteCache(itemData)
        await router.push({
            name: REDIRECT_ROUTE_NAME,
            params: {
                path: route.fullPath
            }
        })
        tabBarStore.addCache(itemData.name)
    } else {
        tabBarStore.resetTabList()
        router.push({ name: DEFAULT_ROUTE_NAME })
    }
}
</script>

<style scoped lang="less">
.tag-link {
    color: var(--color-text-2);
    text-decoration: none;
}
.link-activated {
    color: rgb(var(--link-6));
    .tag-link {
        color: rgb(var(--link-6));
    }
    & + .arco-tag-close-btn {
        color: rgb(var(--link-6));
    }
}
:deep(.arco-dropdown-option-content) {
    span {
        margin-left: 10px;
    }
}
.arco-dropdown-open {
    .tag-link {
        color: rgb(var(--danger-6));
    }
    .arco-tag-close-btn {
        color: rgb(var(--danger-6));
    }
}
.sperate-line {
    border-bottom: 1px solid var(--color-neutral-3);
}
</style>