<template>
|
<div class="layout-navbars-breadcrumb-index">
|
<Logo v-if="setIsShowLogo" />
|
<Breadcrumb />
|
<Horizontal :menuList="state.menuList" v-if="isLayoutTransverse" />
|
<User />
|
</div>
|
</template>
|
|
<script setup lang="ts" name="layoutBreadcrumbIndex">
|
import { defineAsyncComponent, computed, reactive, onMounted, onUnmounted } from 'vue';
|
import { useRoute } from 'vue-router';
|
import { storeToRefs } from 'pinia';
|
import { useRoutesList } from '/@/stores/routesList';
|
import { useThemeConfig } from '/@/stores/themeConfig';
|
import mittBus from '/@/utils/mitt';
|
import { MenuTypeEnum } from '/@/api/menu/type';
|
import { pathMap } from '/@/router/pathMap';
|
|
// 引入组件
|
const Breadcrumb = defineAsyncComponent(() => import('/@/layout/navBars/breadcrumb/breadcrumb.vue'));
|
const User = defineAsyncComponent(() => import('/@/layout/navBars/breadcrumb/user.vue'));
|
const Logo = defineAsyncComponent(() => import('/@/layout/logo/index.vue'));
|
const Horizontal = defineAsyncComponent(() => import('/@/layout/navMenu/horizontal.vue'));
|
|
// 定义变量内容
|
const stores = useRoutesList();
|
const storesThemeConfig = useThemeConfig();
|
const { themeConfig } = storeToRefs(storesThemeConfig);
|
const { routesList } = storeToRefs(stores);
|
const route = useRoute();
|
const state = reactive({
|
menuList: [] as RouteItems,
|
});
|
|
// 设置 logo 显示/隐藏
|
const setIsShowLogo = computed(() => {
|
let { isShowLogo, layout } = themeConfig.value;
|
return (isShowLogo && layout === 'classic') || (isShowLogo && layout === 'transverse');
|
});
|
// 设置是否显示横向导航菜单
|
const isLayoutTransverse = computed(() => {
|
let { layout, isClassicSplitMenu } = themeConfig.value;
|
return layout === 'transverse' || (isClassicSplitMenu && layout === 'classic');
|
});
|
// 设置/过滤路由（非静态路由/是否显示在菜单中）
|
const setFilterRoutes = () => {
|
let { layout, isClassicSplitMenu } = themeConfig.value;
|
if (layout === 'classic' && isClassicSplitMenu) {
|
// 不删除 children ，可在顶层菜单中，找到子菜单
|
state.menuList = filterRoutesFun(routesList.value);
|
const resData = setSendClassicChildren(route.path);
|
mittBus.emit('setSendClassicChildren', resData);
|
} else {
|
state.menuList = filterRoutesFun(routesList.value);
|
}
|
};
|
// 设置了分割菜单时，删除底下 children
|
const delClassicChildren = <T extends ChilType>(arr: T[]): T[] => {
|
arr.map((v: T) => {
|
if (v.children) {
|
delete v.children;
|
}
|
});
|
return arr;
|
};
|
// 路由过滤递归函数
|
const filterRoutesFun = <T extends RouteItem>(arr: T[]): T[] => {
|
return arr
|
.filter((item: T) => !item.meta?.isHide)
|
.map((item: T) => {
|
item = Object.assign({}, item);
|
if (item.children) item.children = filterRoutesFun(item.children);
|
return item;
|
});
|
};
|
// 传送当前子级数据到菜单中
|
const setSendClassicChildren = (path: string) => {
|
const mapRoute = pathMap.get(path);
|
const mapRouteAny = mapRoute as any;
|
let currentData: MittMenu = { children: [] };
|
let v: any = {};
|
if (mapRoute) {
|
const rootId = mapRouteAny.rootId;
|
const foundRootRoute = filterRoutesFun(routesList.value).find((item) => item.id === rootId);
|
if (foundRootRoute) {
|
v = foundRootRoute;
|
v['k'] = 0;
|
currentData['item'] = { ...v };
|
currentData['children'] = [{ ...v }];
|
// 顶层如果是菜单，需保证 children 中有自己，左侧才会有菜单
|
if (v.children && (v as any).type !== MenuTypeEnum.Menu) currentData['children'] = v.children;
|
}
|
}
|
|
return currentData;
|
};
|
// 页面加载时
|
onMounted(() => {
|
setFilterRoutes();
|
mittBus.on('getBreadcrumbIndexSetFilterRoutes', () => {
|
setFilterRoutes();
|
});
|
});
|
// 页面卸载时
|
onUnmounted(() => {
|
mittBus.off('getBreadcrumbIndexSetFilterRoutes', () => {});
|
});
|
</script>
|
|
<style scoped lang="scss">
|
.layout-navbars-breadcrumb-index {
|
height: var(--yw-horizontal-menu-height);
|
display: flex;
|
align-items: center;
|
background: var(--next-bg-topBar);
|
border-bottom: 0px solid var(--next-border-color-light);
|
}
|
</style>
|
