/*
|
* @Company: hugeInfo
|
* @Author: ldh
|
* @Date: 2022-02-14 14:22:07
|
* @LastEditTime: 2022-04-08 12:51:01
|
* @LastEditors: lwh
|
* @Version: 1.0.0
|
* @Description: 导航菜单
|
*/
|
import React, { useState, useRef, useEffect } from 'react';
|
import { useLocation, Outlet, Link, useNavigate } from 'react-router-dom';
|
import { Menu, Badge, Avatar, Dropdown, ConfigProvider } from 'antd';
|
import Header from './Header';
|
import Navigation from './Navigation';
|
import {
|
LogoutOutlined,
|
SettingOutlined,
|
DeploymentUnitOutlined,
|
SafetyCertificateOutlined,
|
ShoppingCartOutlined,
|
TeamOutlined,
|
} from '@ant-design/icons';
|
import operateCenter from '../../assets/operateCenter.png';
|
import operateCenter_active from '../../assets/operateCenter_active.png';
|
import './index.less';
|
|
const { SubMenu } = Menu;
|
|
// 头部导航菜单
|
const headerMenu = [
|
// {
|
// key: 'mediate',
|
// title: '调解中心',
|
// },
|
{
|
key: 'operation',
|
title: '运营中心',
|
icon: operateCenter,
|
iconActive: operateCenter_active,
|
menu: [
|
{
|
label: '客户管理',
|
value: '1',
|
powerType: '1',
|
key: 'customer',
|
icon: 'TeamOutlined',
|
url: '/operation/customer',
|
},
|
{
|
label: '版本管理',
|
value: '1',
|
powerType: '1',
|
key: 'edition',
|
icon: 'ShoppingCartOutlined',
|
url: '/operation/edition',
|
},
|
{
|
label: '功能管理',
|
value: '1',
|
powerType: '1',
|
key: 'feature',
|
icon: 'SafetyCertificateOutlined',
|
url: '/operation/feature',
|
},
|
{
|
label: '设备管理',
|
value: '1',
|
powerType: '1',
|
key: 'equipment',
|
icon: 'DeploymentUnitOutlined',
|
url: '/operation/equipment',
|
},
|
],
|
},
|
];
|
|
const userMenu = (
|
<Menu>
|
<Menu.Item key="loginOut">
|
<Link to="/login">
|
<LogoutOutlined style={{ marginRight: '8px' }} />
|
退出登录
|
</Link>
|
</Menu.Item>
|
</Menu>
|
);
|
|
const Layout = () => {
|
const location = useLocation() || {};
|
|
const navigate = useNavigate();
|
// 导航数据
|
const [menuData, setMenuData] = useState([]);
|
const [collapsed, setCollapsed] = useState(false); // Menu缩进
|
const layoutRef = useRef();
|
// side Menu
|
const [sideMenu, setSideMenu] = useState([]);
|
// 当前选择menuItem
|
const [selectedKeys, setSelectedKeys] = useState();
|
|
// 头部menu选择
|
const [headerMenuActive, setHeaderMenuActive] = useState({});
|
|
// side Menu缩进
|
const [sideMenuCollapsed, setSideMenuCollapsed] = useState(false);
|
// 点击menu
|
function handleClickMenu(e) {
|
navigate(e.key);
|
}
|
|
// 左侧导航收缩 展开
|
function handleMenuCollapsed() {
|
let width = layoutRef.current.clientWidth;
|
if (collapsed && width > 1300) {
|
setCollapsed(false);
|
}
|
if (!collapsed && width < 1300) {
|
setCollapsed(true);
|
}
|
}
|
|
// 路由更改时
|
let pathname = location.pathname;
|
useEffect(() => {
|
let arr = pathname?.split('/');
|
for (let i = 0; i < menuData.length; i++) {
|
if (arr && arr[1] === headerMenu[i].key) {
|
setHeaderMenuActive(headerMenu[i]);
|
setSideMenu(headerMenu[i].menu);
|
if (headerMenu[i].page?.includes(pathname)) {
|
setSelectedKeys(pathname);
|
}
|
break;
|
}
|
}
|
}, [pathname, menuData]);
|
|
// 初始化
|
useEffect(() => {
|
handleMenuCollapsed();
|
function loop(data, arr, openKeys) {
|
data.forEach((x) => {
|
if (x.url) {
|
arr.push(x.url);
|
} else {
|
openKeys.push(x.key);
|
loop(x.children, arr, openKeys);
|
}
|
});
|
}
|
headerMenu.forEach((x) => {
|
x.page = [];
|
x.openKeys = [];
|
loop(x.menu, x.page, x.openKeys);
|
});
|
setMenuData(headerMenu);
|
}, []);
|
|
// 监听窗口变化
|
window.onresize = () => {
|
handleMenuCollapsed();
|
};
|
|
useEffect(() => {
|
handleMenuCollapsed();
|
}, []);
|
|
return (
|
<div className="layout" ref={layoutRef}>
|
<Header headerMenu={headerMenu} />
|
<main className="layout-main" id="layoutMain">
|
<Navigation
|
sideMenu={sideMenu}
|
collapsed={sideMenuCollapsed}
|
selectedKeys={selectedKeys}
|
handleShrinkMenu={() => setSideMenuCollapsed(!sideMenuCollapsed)}
|
headerMenuActive={headerMenuActive}
|
/>
|
<main className="layout-child" id="layoutChild">
|
<Outlet />
|
</main>
|
</main>
|
</div>
|
);
|
};
|
|
export default Layout;
|
