digital-medicine-front/src/layout/components/Sidebar/SidebarItem.vue

<template>
    <div v-if="!item.hidden">
        <template v-if="hasOneShowingChild(item, item.children) && (!onlyOneChild.children || onlyOneChild.noShowingChildren) && !item.alwaysShow">
            <app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path, onlyOneChild.query)">
                <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{ 'submenu-title-noDropdown': !isNest }">
                    <svg-icon :icon-class="onlyOneChild.meta.icon || (item.meta && item.meta.icon)" />
                    <template #title>
                        <el-badge :value="menuCounts[resolvePath(onlyOneChild.path)]" :offset="[10, 10]" :show-zero="false">
                            <span class="menu-title" :title="hasTitle(onlyOneChild.meta.title)">{{ onlyOneChild.meta.title }}</span>
                        </el-badge>
                    </template>
                </el-menu-item>
            </app-link>
        </template>

        <el-sub-menu v-else ref="subMenu" :index="resolvePath(item.path)" teleported>
            <template v-if="item.meta" #title>
                <svg-icon :icon-class="item.meta ? item.meta.icon : ''" />
                <span class="p-rtv" :title="hasTitle(item.meta?.title)">
                    <el-badge :value="menuCounts[resolvePath(item.path)]" :offset="[10, 10]" :show-zero="false">
                        <span class="menu-title" :title="hasTitle(item.meta?.title)">{{ item.meta?.title }}</span>
                    </el-badge>
                </span>
            </template>
            <sidebar-item v-for="(child, index) in item.children" :key="child.path + index" :is-nest="true" :item="child" :base-path="resolvePath(child.path)" class="nest-menu" />
        </el-sub-menu>
    </div>
</template>

<script setup lang="ts">
import { isExternal } from '@/utils/validate';
import AppLink from './Link.vue';
import { getNormalPath } from '@/utils/ruoyi';
import { RouteRecordRaw } from 'vue-router';
import { useSideNumStore } from '@/store/modules/sideNum';
const { menuCounts } = toRefs(useSideNumStore());
const props = defineProps({
    item: {
        type: Object as PropType<RouteRecordRaw>,
        required: true
    },
    isNest: {
        type: Boolean,
        default: false
    },
    basePath: {
        type: String,
        default: ''
    }
});

const onlyOneChild = ref<any>({});

const hasOneShowingChild = (parent: RouteRecordRaw, children?: RouteRecordRaw[]) => {
    if (!children) {
        children = [];
    }
    const showingChildren = children.filter((item) => {
        if (item.hidden) {
            return false;
        }
        onlyOneChild.value = item;
        return true;
    });

    // When there is only one child router, the child router is displayed by default
    if (showingChildren.length === 1) {
        return true;
    }

    // Show parent if there are no child router to display
    if (showingChildren.length === 0) {
        onlyOneChild.value = { ...parent, path: '', noShowingChildren: true };
        return true;
    }

    return false;
};

const resolvePath = (routePath: string, routeQuery?: string): any => {
    if (isExternal(routePath)) {
        return routePath;
    }
    if (isExternal(props.basePath as string)) {
        return props.basePath;
    }
    if (routeQuery) {
        let query = JSON.parse(routeQuery);
        return { path: getNormalPath(props.basePath + '/' + routePath), query: query };
    }
    return getNormalPath(props.basePath + '/' + routePath);
};

const hasTitle = (title: string | undefined): string => {
    if (!title || title.length <= 5) {
        return '';
    }
    return title;
};
</script>
<style lang="scss" scoped>
.el-menu-item.is-active {
    background: var(--el-color-primary) !important;
    color: #fff !important;
}
</style>