130 lines
3.1 KiB
TypeScript
Executable File
130 lines
3.1 KiB
TypeScript
Executable File
import React, { useEffect, useState } from "react";
|
|
import { Menu } from "antd";
|
|
import { useNavigate, useLocation } from "react-router-dom";
|
|
import {
|
|
BookOutlined,
|
|
SettingOutlined,
|
|
FormOutlined,
|
|
UserOutlined,
|
|
TeamOutlined,
|
|
KeyOutlined,
|
|
} from "@ant-design/icons";
|
|
|
|
function getItem(
|
|
label: any,
|
|
key: any,
|
|
icon: any,
|
|
children: any,
|
|
type: any
|
|
// permission: any
|
|
) {
|
|
return {
|
|
key,
|
|
icon,
|
|
children,
|
|
label,
|
|
type,
|
|
// permission,
|
|
};
|
|
}
|
|
const items = [
|
|
getItem("故障收录检索", "/device", <BookOutlined />, null, null),
|
|
getItem(
|
|
"系统设置",
|
|
"/admin",
|
|
<SettingOutlined />,
|
|
[
|
|
getItem("基本设置", "/admin/base-setting", <FormOutlined />, null, null),
|
|
getItem("用户管理", "/admin/user", <UserOutlined />, null, null),
|
|
getItem("组织架构", "/admin/department", <TeamOutlined />, null, null),
|
|
getItem("角色管理", "/admin/role", <KeyOutlined />, null, null),
|
|
// getItem("考核标准管理", "/admin/assessment-standard", null, null, null),
|
|
],
|
|
null
|
|
),
|
|
];
|
|
|
|
const NavigationMenu: React.FC = () => {
|
|
const location = useLocation();
|
|
const navigate = useNavigate();
|
|
|
|
// 定义路径匹配规则
|
|
const getParentPath = (pathname: string): string[] => {
|
|
if (pathname.startsWith("/assessment/") || pathname.startsWith("/admin/")) {
|
|
return [pathname.split("/").slice(0, 2).join("/")];
|
|
}
|
|
|
|
if (pathname.indexOf("/staff") !== -1) {
|
|
return ["/staff"];
|
|
}
|
|
|
|
return [pathname];
|
|
};
|
|
|
|
// 选中的菜单
|
|
const [selectedKeys, setSelectedKeys] = useState<string[]>([
|
|
location.pathname,
|
|
]);
|
|
// 展开菜单
|
|
const [openKeys, setOpenKeys] = useState<string[]>(
|
|
getParentPath(location.pathname)
|
|
);
|
|
|
|
// 路径变化时更新菜单状态
|
|
useEffect(() => {
|
|
setSelectedKeys([location.pathname]);
|
|
setOpenKeys(getParentPath(location.pathname));
|
|
}, [location.pathname]);
|
|
|
|
const onClick = (e: any) => {
|
|
navigate(e.key);
|
|
};
|
|
// console.log(items)
|
|
useEffect(() => {
|
|
setSelectedKeys(selectedKeys);
|
|
// console.log(selectedKeys)
|
|
}, [selectedKeys]);
|
|
|
|
return (
|
|
<div className="w-[200px] h-full bg-#fff">
|
|
<div
|
|
style={{
|
|
textDecoration: "none",
|
|
cursor: "pointer",
|
|
position: "sticky",
|
|
top: 0,
|
|
zIndex: 10,
|
|
background: "#fff",
|
|
}}
|
|
onClick={() => {
|
|
window.location.href = "/";
|
|
}}
|
|
>
|
|
{/* 此处为版权标识，严禁删改
|
|
<img src={logo} className="w-[124px] h-[40px]"/> */}
|
|
</div>
|
|
<div className="w-[200px] h-[calc(100%-74px)] overflow-y-auto overflow-x-hidden">
|
|
<Menu
|
|
onClick={onClick}
|
|
style={{
|
|
width: 200,
|
|
background: "#ffffff",
|
|
}}
|
|
selectedKeys={selectedKeys}
|
|
openKeys={openKeys}
|
|
mode="inline"
|
|
items={items}
|
|
onSelect={(data: any) => {
|
|
setSelectedKeys(data.selectedKeys);
|
|
}}
|
|
onOpenChange={(keys: any) => {
|
|
setOpenKeys(keys);
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default NavigationMenu;
|