import { computed } from 'vue';
|
import { RouteRecordRaw, RouteRecordNormalized } from 'vue-router';
|
import usePermission from '@/hooks/permission';
|
import { useAppStore } from '@/store';
|
import appClientMenus from '@/router/app-menus';
|
import { cloneDeep } from 'lodash';
|
|
export default function useMenuTree() {
|
const permission = usePermission();
|
const appStore = useAppStore();
|
const appRoute = computed(() => {
|
if (appStore.menuFromServer) {
|
return appStore.appAsyncMenus;
|
}
|
return appClientMenus;
|
});
|
const menuTree = computed(() => {
|
const copyRouter = cloneDeep(appRoute.value) as RouteRecordNormalized[];
|
copyRouter.sort((a: RouteRecordNormalized, b: RouteRecordNormalized) => {
|
return (a.meta.order || 0) - (b.meta.order || 0);
|
});
|
function travel(_routes: RouteRecordRaw[], layer: number) {
|
if (!_routes) return null;
|
|
const collector: any = _routes.map((element) => {
|
// no access
|
if (!permission.accessRouter(element)) {
|
return null;
|
}
|
|
// leaf node
|
if (element.meta?.hideChildrenInMenu || !element.children) {
|
element.children = [];
|
return element;
|
}
|
|
// route filter hideInMenu true
|
element.children = element.children.filter(
|
(x) => x.meta?.hideInMenu !== true
|
);
|
|
// Associated child node
|
const subItem = travel(element.children, layer + 1);
|
|
if (subItem.length) {
|
element.children = subItem;
|
return element;
|
}
|
// the else logic
|
if (layer > 1) {
|
element.children = subItem;
|
return element;
|
}
|
|
if (element.meta?.hideInMenu === false) {
|
return element;
|
}
|
|
return null;
|
});
|
return collector.filter(Boolean);
|
}
|
return travel(copyRouter, 0);
|
});
|
|
return {
|
menuTree,
|
};
|
}
|
