/*
|
* @Company: hugeInfo
|
* @Author: ldh
|
* @Date: 2022-02-14 14:22:07
|
* @LastEditTime: 2024-10-14 14:29:05
|
* @LastEditors: lwh
|
* @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, RightOutlined, DownOutlined } from '@ant-design/icons';
|
import { workWindow, comprehensiveQueries, conflictResolution, handleList } from '../../assets/images/icon';
|
import { iconContrast } from '../../utils/utility';
|
import './Navigation.less';
|
|
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) {
|
// First, separate items that start with "转入"
|
const transferItems = data.filter(x => x.label && x.label.startsWith('转入'));
|
const transferItems2 = data.filter(x => x.label && (x.label.includes('司法') || x.label.includes('确认')||x.label.includes('法院')));
|
const otherItems = data.filter(x => !x.label || (!x.label.startsWith('转入') && (!x.label.includes('司法') && !x.label.includes('确认')&&!x.label.includes('法院'))));
|
|
// Process regular items
|
let regularMenuItems = otherItems.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>
|
);
|
}
|
});
|
|
// If there are transfer items, create a submenu for them
|
if (transferItems.length > 0) {
|
const transferSubMenu = (
|
<SubMenu
|
key="transfer-mediation"
|
title="人民调解联动"
|
icon={transferItems[0]?.powerIcon ? <Icon component={iconContrast[transferItems[0].powerIcon]} /> : null}
|
expandIcon={({ isOpen }) => isOpen ? <DownOutlined style={{ fontSize: '12px' }} /> : <RightOutlined style={{ fontSize: '12px' }} />}
|
className="custom-submenu"
|
>
|
{transferItems.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>
|
);
|
}
|
})}
|
</SubMenu>
|
);
|
|
regularMenuItems=[...regularMenuItems, transferSubMenu];
|
}
|
if(transferItems2.length > 0){
|
const transferSubMenu2 = (
|
<SubMenu
|
key="transfer-judicial"
|
title="司法确认管理"
|
icon={transferItems2[0]?.powerIcon ? <Icon component={iconContrast[transferItems2[0].powerIcon]} /> : null}
|
expandIcon={({ isOpen }) => isOpen ? <DownOutlined style={{ fontSize: '12px' }} /> : <RightOutlined style={{ fontSize: '12px' }} />}
|
className="custom-submenu"
|
>
|
{transferItems2.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>
|
);
|
}
|
})}
|
</SubMenu>
|
);
|
regularMenuItems=[...regularMenuItems, transferSubMenu2];
|
}
|
|
return regularMenuItems;
|
}
|
|
// 路由更改时，判断当前页面是否有权限访问
|
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', fontSize: '16px' }}
|
mode="inline"
|
selectedKeys={selectedKeys}
|
openKeys={openKeys}
|
inlineCollapsed={collapsed}
|
onOpenChange={(openKeys) => setOpenKeys(openKeys)}
|
className="custom-menu"
|
>
|
{menuDom(sideMenu)}
|
</Menu>
|
<div className="nav-menuFold" onClick={() => setCollapsed(!collapsed)}>
|
{collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
|
</div>
|
</nav>
|
);
|
};
|
|
export default Navigation;
|
