/*
|
* @Company: hugeInfo
|
* @Author: ldh
|
* @Date: 2022-02-14 14:22:07
|
* @LastEditTime: 2022-12-14 11:44:25
|
* @LastEditors: ldh
|
* @Version: 1.0.0
|
* @Description: 导航菜单
|
*/
|
import React, { useState, useEffect, useMemo } from 'react';
|
import { Link, useLocation } from 'react-router-dom';
|
import { Menu } from 'antd';
|
import Icon, { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons';
|
import { iconContrast } from '../../utils/utility';
|
|
const { SubMenu } = Menu;
|
|
const Navigation = ({ powerMap, sideMenu = [], roleActive }) => {
|
const location = useLocation();
|
|
const pathname = location.pathname;
|
|
const [collapsed, setCollapsed] = useState();
|
|
// 当前选择menuItem
|
const [selectedKeys, setSelectedKeys] = useState(pathname);
|
|
const [openKeys, setOpenKeys] = useState([]);
|
|
function menuDom(data) {
|
return data.map((x) => {
|
if (x.powerUrl) {
|
if (x.linkStatus == 2) {
|
return (
|
<Menu.Item key={x.powerTag} icon={x.powerIcon ? <Icon component={iconContrast[x.powerIcon]} /> : null}>
|
<div onClick={() => window.open(x.powerUrl)}>{x.label}</div>
|
</Menu.Item>
|
);
|
}
|
if (!powerMap[x.powerUrl]?.show || x.powerUrl === '/mediate/register') {
|
return false;
|
}
|
return (
|
<Menu.Item key={x.powerUrl || x.value} icon={x.powerIcon ? <Icon component={iconContrast[x.powerIcon]} /> : null}>
|
<Link to={x.powerUrl}>{x.label}</Link>
|
</Menu.Item>
|
);
|
} else {
|
return (
|
<SubMenu key={x.powerTag || x.value} icon={<Icon component={iconContrast[x.powerIcon]} />} title={x.label}>
|
{menuDom(x.children)}
|
</SubMenu>
|
);
|
}
|
});
|
}
|
|
// 路由更改时，判断当前页面是否有权限访问
|
useEffect(() => {
|
if (powerMap[pathname]) {
|
setSelectedKeys(pathname);
|
}
|
}, [pathname, roleActive.id]);
|
|
useEffect(() => {
|
forEach: for (let i = 0; i < sideMenu.length; i++) {
|
if (!sideMenu[i].powerUrl) {
|
setOpenKeys([sideMenu[i].powerTag]);
|
break forEach;
|
}
|
}
|
}, [sideMenu.length, roleActive.id]);
|
|
return (
|
<nav className="nav" id="nav">
|
<Menu
|
style={{ width: collapsed ? '80px' : '220px', flex: 1, overflowY: 'auto', overflowX: 'hidden' }}
|
mode="inline"
|
selectedKeys={selectedKeys}
|
openKeys={openKeys}
|
inlineCollapsed={collapsed}
|
onOpenChange={(openKeys) => setOpenKeys(openKeys)}
|
>
|
{menuDom(sideMenu)}
|
</Menu>
|
<div className="nav-menuFold" onClick={() => setCollapsed(!collapsed)}>
|
{collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
|
</div>
|
</nav>
|
);
|
};
|
|
export default Navigation;
|
