easyData侧边菜单递归问题
<p>import {env, utils} from '@baidu/data-share';
import {computed, reactive} from '@vue/composition-api';
import {useService} from '~/services';
import {getCloudInitializeMenuList} from './menu.config.cloud';
import {getPrivateInitializeMenuList} from './menu.config.private';
import {useAIbaseHeadService} from "~/plugins/header/aibase.svc";
import _, { forEach, isEmpty } from "lodash";</p>
<p>const aibaseService = useAIbaseHeadService();</p>
<p>export type TMenuItem = {
name: string;
active?: boolean;
icon?: any;
link?: string;
children?: TMenuItem[];
visible?: boolean;
activeReg?: RegExp;
};</p>
<p>function getInitializeMenuList(hasPermissionMenus) {
console.log(hasPermissionMenus)
const {commonService} = useService();
if (!commonService.state.initialized) return [];
const menuListFirstFilter = env.isCloud ? getCloudInitializeMenuList() : getPrivateInitializeMenuList();
const menuListSecondFilter = filterMenuList(menuListFirstFilter, hasPermissionMenus)
console.log(menuListSecondFilter)
return menuListSecondFilter;
}</p>
<p>// 由数创3.0数据判断是否具有菜单权限
function checkMenuPermission({ menuItem, hasPermissionMenus }) {
console.log(44444)
let has = false;
const {
nameCode,
} = menuItem;
if (!nameCode) {
return has;
}
forEach(hasPermissionMenus, hasPermissionMenuItem => {
const {
name,
children,
type
} = hasPermissionMenuItem;
if (nameCode === name && type === 'menu') {
has = true;
return false;
}</p>
<pre><code> if (!isEmpty(children)) {
const hasPermissionChildren = children.filter(child =&gt; checkMenuPermission({ menuItem: child, hasPermissionMenus }))
if (!!hasPermissionChildren.length) {
has = true;
return false;
}
}
});
console.log(has)
return has;</code></pre>
<p>}</p>
<p>function filterMenuList(menuList, hasPermissionMenus) {
const menuListFilter = menuList.filter(menuItem => {
if (!isEmpty(menuItem.children)) {
menuItem.children = filterMenuList(menuItem.children, hasPermissionMenus);
}
if (menuItem.nameCode === 'easyData-dataSetList') {
// console.log(menuItem)
}
return checkMenuPermission({
menuItem,
hasPermissionMenus
})
})
console.log(menuListFilter)
return menuListFilter;
}</p>
<p>/**</p>
<ul>
<li>处理基础配置，比如 active, visible</li>
<li>FIXME:</li>
<li>兼容公有云，处理 disabled</li>
<li>
</li>
<li>@param {TMenuItem[]} list</li>
<li>@param {string} activePath</li>
<li>
<p>@return {<em>}
</em>/
function wrapperMenus(list: TMenuItem[], activePath: string) {
for (const item of list) {
// 是否 active
item.active = !!item.activeReg?.test(activePath);</p>
<pre><code>if (item.children) {
item.children = wrapperMenus(item.children, activePath);
item.visible = !!item.children.length;
}</code></pre>
<p>}
return list.filter(n => n.visible);
}</p>
</li>
</ul>
<p>export function useMenu() {
const common = useService().commonService;
const vm = utils.useVM();</p>
<pre><code>// 当前展示的菜单
const list = computed(() =&gt; {
let activePath = vm.$route.path;
let hasPermissionMenus = {}
if (aibaseService.state.AIBaseHeadPayload) {
hasPermissionMenus = aibaseService.state.AIBaseHeadPayload.navInfoBusiness.main
}
if (env.isPrivate) {
activePath = activePath.replace(`/${common.state.orgId}/${common.state.projectId}`, '');
}
console.log(getInitializeMenuList(hasPermissionMenus))
return wrapperMenus(getInitializeMenuList(hasPermissionMenus), activePath);
});
// 高亮的链接
const activeLink = computed(() =&gt; {
const items = list.value.reduce((cur, item) =&gt; {
return [...cur, ...(item.children || [item])];
}, [] as TMenuItem[]);
return items.find(n =&gt; n.active)?.link || '';
});
return reactive({
list,
activeLink
});</code></pre>
<p>}</p>