382 lines
13 KiB
JavaScript
382 lines
13 KiB
JavaScript
import React, { useState, useEffect, useMemo, useRef } from "react";
|
||
import {
|
||
AppstoreOutlined,
|
||
CalendarOutlined,
|
||
LinkOutlined,
|
||
MailOutlined,
|
||
SettingOutlined,
|
||
MenuUnfoldOutlined,
|
||
MenuFoldOutlined,
|
||
} from "@ant-design/icons";
|
||
import { Divider, Menu, Switch, Icon, Button } from "antd";
|
||
import { connect } from "dva";
|
||
import { withRouter, matchPath } from "dva/router";
|
||
import { Scrollbars } from "react-custom-scrollbars";
|
||
import EnergyIcon from "../utils/energyIcon";
|
||
import { $consts } from "../plugins";
|
||
import "./sider.less";
|
||
import MenuItem from "antd/lib/menu/MenuItem";
|
||
import SubMenu from "antd/lib/menu/SubMenu";
|
||
|
||
const Sider = (props) => {
|
||
/** 菜单页展开与收起 */
|
||
const timer = useRef(-1);
|
||
const handleExpandMenuShow = () => {
|
||
clearTimeout(timer.current);
|
||
setExpandMenuShow(true);
|
||
};
|
||
const handleExpandMenuHide = () => {
|
||
clearTimeout(timer.current);
|
||
timer.current = setTimeout(() => {
|
||
setExpandMenuShow(false);
|
||
}, 200);
|
||
};
|
||
|
||
/** 控制三级菜单收缩和展开 */
|
||
const [menuShrink, setMenuShrink] = useState({});
|
||
const handleMenuShrink = (menuId) => {
|
||
const data = Object.assign({}, menuShrink);
|
||
data[menuId] ? (data[menuId] = "") : (data[menuId] = menuId);
|
||
setMenuShrink(data);
|
||
};
|
||
|
||
/** 回到首页 */
|
||
const navToHome = () => {
|
||
setActiveMenu(null);
|
||
props.history.push({ pathname: "/home" });
|
||
};
|
||
const clickMenu = () => {
|
||
collapsed === true ? setCollapsed(false) : setCollapsed(false);
|
||
};
|
||
const [mainSilder, setMainSilder] = useState(1);
|
||
const clickMainMenu = (index) => {
|
||
setMainSilder(index);
|
||
};
|
||
/** 子菜单路由 */
|
||
const navToMenu = (menu) => {
|
||
props.history.push({ pathname: `/main/${menu.ID}` });
|
||
};
|
||
|
||
/** 后台设置：四级菜单 */
|
||
const navToBackend = (menu) => {
|
||
props.history.push({ pathname: `/backend/${menu.ID}` });
|
||
};
|
||
|
||
/** 一级菜单显示菜单 */
|
||
const [currMenu, setCurrMenu] = useState(null);
|
||
useEffect(() => {
|
||
const menus = props.login.loginInfo?.Menus || [];
|
||
menus.length && !currMenu && setCurrMenu(menus[0].Node);
|
||
}, [props.login.loginInfo?.Menus]);
|
||
|
||
/** 已激活菜单 */
|
||
const [activeMenu, setActiveMenu] = useState(null);
|
||
const handleActiveMenu = (menu) => {
|
||
setActiveMenu(menu);
|
||
navToMenu(menu);
|
||
};
|
||
|
||
/** 页面刷新时候，更新菜单的选中状态 */
|
||
useEffect(() => {
|
||
const { pathname } = props.location;
|
||
const mathHome = matchPath(pathname, {
|
||
path: $consts["ROUTE/HOME"],
|
||
exact: true,
|
||
strict: true,
|
||
});
|
||
if (mathHome) {
|
||
activeMenu && setActiveMenu(null);
|
||
}
|
||
const mathMain = matchPath(pathname, {
|
||
path: $consts["ROUTE/MAIN"],
|
||
exact: true,
|
||
strict: true,
|
||
});
|
||
if (mathMain) {
|
||
const { flatMenus } = props.login;
|
||
const { menuId } = mathMain.params;
|
||
const find = flatMenus.find((item) => item.ID === menuId);
|
||
if (find) {
|
||
props.dispatch({
|
||
type: "app/updateActivatedMenu",
|
||
payload: {
|
||
currActivatedTab: find.ID,
|
||
currActivatedMenu: find,
|
||
},
|
||
});
|
||
!activeMenu && setActiveMenu(find);
|
||
}
|
||
}
|
||
}, [props.location.pathname, props.login.flatMenus, activeMenu]);
|
||
|
||
/** 常用菜单 */
|
||
const favorMenus = useMemo(() => {
|
||
const { flatMenus } = props.login;
|
||
return flatMenus.filter((menu) => menu.IS_RESIDENT);
|
||
}, [props.login.flatMenus]);
|
||
|
||
/** 一级菜单 */
|
||
const topMenus = useMemo(() => {
|
||
const menus = props.login.loginInfo?.Menus || [];
|
||
// 菜单宽度 82 + margin 40
|
||
const menuWidth = menus.length
|
||
? menus.length * 82 + (menus.length - 1) * 40
|
||
: 0;
|
||
// 叶子菜单需要换行展示个数
|
||
const leafMenuSections =
|
||
menus.length < 3 ? 1 : menus.length === 3 ? 2 : menus.length - 2;
|
||
return {
|
||
menus,
|
||
width: menuWidth < 120 ? 120 : menuWidth,
|
||
leafMenuSections,
|
||
};
|
||
}, [props.login.loginInfo?.Menus]);
|
||
|
||
/** 二三级子菜单 */
|
||
const subMenus = useMemo(() => {
|
||
const { menus } = topMenus;
|
||
const find = menus.find((menu) => menu.Node.ID === currMenu?.ID);
|
||
return find?.Children || [];
|
||
}, [currMenu, topMenus]);
|
||
|
||
/** 三级子菜单默认收缩与展开 */
|
||
const { IS_MENU_SHRINK = false } = props.login.baseConfig;
|
||
useEffect(() => {
|
||
// IS_MENU_SHRINK为true时, 收缩所有三级菜单
|
||
if (IS_MENU_SHRINK) {
|
||
const { menus } = topMenus;
|
||
const data = {};
|
||
menus.forEach(
|
||
(menu) =>
|
||
menu.Children &&
|
||
menu.Children.forEach(
|
||
(child) => (data[child.Node.ID] = child.Node.ID)
|
||
)
|
||
);
|
||
setMenuShrink(data);
|
||
}
|
||
}, [IS_MENU_SHRINK]);
|
||
const [collapsed, setCollapsed] = useState(true);
|
||
const [MenuShow, setMenuShow] = useState(false);
|
||
|
||
const toggleCollapsed = () => {
|
||
setCollapsed(!collapsed);
|
||
};
|
||
useEffect(() => {
|
||
if (MenuShow == true) {
|
||
setMenuShow(false);
|
||
}
|
||
}, [props.repost]);
|
||
const menuCUR = topMenus.menus[mainSilder - 2];
|
||
|
||
/** 登录页隐藏 */
|
||
if (props.matchLogin) return null;
|
||
return (
|
||
<div className={`sider ${"shortMenuShow"}`}>
|
||
<div>
|
||
<div className={`sider ${"shortMenuShow_overflow"}`}>
|
||
<div className={`sider ${"shortMenuShow_overflowb"}`}>
|
||
<div
|
||
className="sider__shortMenuShowoverca"
|
||
onClick={() => {
|
||
clickMainMenu(1);
|
||
navToHome();
|
||
setMenuShow(false);
|
||
}}
|
||
>
|
||
<Icon
|
||
type="home"
|
||
className={
|
||
mainSilder == 1
|
||
? "sider__shortMenuShowoverca-overcd"
|
||
: "sider__shortMenuShowoverca-overc"
|
||
}
|
||
></Icon>
|
||
<div className="sider__shortMenuShowoverca-title">首页</div>
|
||
</div>
|
||
{/* <div
|
||
className="sider__shortMenuShowoverca"
|
||
onClick={() => {
|
||
clickMainMenu(2);
|
||
setMenuShow(true);
|
||
}}
|
||
>
|
||
<Icon
|
||
type="profile"
|
||
title="常用菜单"
|
||
className={
|
||
mainSilder == 2
|
||
? "sider__shortMenuShowoverca-overcd"
|
||
: "sider__shortMenuShowoverca-overc"
|
||
}
|
||
></Icon>
|
||
</div> */}
|
||
<div>
|
||
{topMenus.menus.map((menu, index) => {
|
||
return (
|
||
<div
|
||
className="sider__shortMenuShowoverca"
|
||
onClick={() => {
|
||
clickMainMenu(index + 2);
|
||
setCurrMenu(menu.Node);
|
||
clickMenu();
|
||
setMenuShow(true);
|
||
}}
|
||
>
|
||
<Icon
|
||
type={menu.Node.ICON ? menu.Node.ICON : "reconciliation"}
|
||
title={menu.Node.NAME}
|
||
className={
|
||
mainSilder == index + 2
|
||
? "sider__shortMenuShowoverca-overcd"
|
||
: "sider__shortMenuShowoverca-overc"
|
||
}
|
||
></Icon>
|
||
<div className="sider__shortMenuShowoverca-title">
|
||
{menu.Node.NAME}
|
||
</div>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
<div className="sider__outButton">
|
||
<div
|
||
className="sider__shortMenuShowovercae"
|
||
onClick={() => {
|
||
setMenuShow(!MenuShow);
|
||
if (mainSilder == 1) {
|
||
//禁止mainsilder为1--首页状态
|
||
setMainSilder(2);
|
||
}
|
||
// if (MenuShow) {
|
||
// setMainSilder(1);
|
||
// } else {
|
||
// setMainSilder(2);
|
||
// }
|
||
}}
|
||
>
|
||
{MenuShow == true ? (
|
||
<Icon
|
||
type="import"
|
||
className="sider__shortMenuShowoverca-overcd"
|
||
></Icon>
|
||
) : (
|
||
<Icon
|
||
type="import"
|
||
className="sider__shortMenuShowoverca-overcd"
|
||
style={{transform:'scaleX(-1)'}}
|
||
></Icon>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
className={
|
||
MenuShow
|
||
? `sider ${"shortMenuShow_overflowc"}`
|
||
: `sider ${"shortMenuShow_overflowcExpand"}`
|
||
}
|
||
>
|
||
{/* <img
|
||
src={require("././../assets/logo-slider.jpg")}
|
||
style={{
|
||
height: "80px",
|
||
width: "auto",
|
||
objectFit: "contain",
|
||
marginTop: "10px",
|
||
}}
|
||
></img> */}
|
||
<div className={`sider ${"__shortMenuShowChild"}`}>
|
||
{/* {mainSilder == 2 ? (
|
||
<div className={`sider ${"shortMenuShow_ChildPadding"}`}>
|
||
{favorMenus.map((menu2, index2) => {
|
||
return (
|
||
<div
|
||
// key={`${menu2.ID}_${index2}`}
|
||
onClick={() => handleActiveMenu(menu2)}
|
||
className="sider__shortMenuShowChild"
|
||
>
|
||
<Icon
|
||
type={menu2.ICON ? menu2.ICON : "file-text"}
|
||
className="sider__shortMenuShowChild-iconone"
|
||
/>
|
||
|
||
<span className="sider__shortMenuShowChild-name">
|
||
{menu2.NAME}
|
||
</span>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
) : ( */}
|
||
<div className={`sider ${"shortMenuShow_ChildPadding"}`}>
|
||
{menuCUR &&
|
||
menuCUR.Children.map((menu2, index2) => {
|
||
return (
|
||
<div
|
||
// key={`${menu2.ID}_${index2}`}
|
||
className="sider__shortMenuShowFlex"
|
||
>
|
||
<div className="sider__shortMenuShowChildTwo">
|
||
<Icon
|
||
type={"caret-right"}
|
||
className="sider__shortMenuShowChildTwo-iconri"
|
||
/>
|
||
<Icon
|
||
type={
|
||
menu2.Node.ICON ? menu2.Node.ICON : "file-text"
|
||
}
|
||
className="sider__shortMenuShowChildTwo-icon"
|
||
/>
|
||
|
||
<span className="sider__shortMenuShowChildTwo-name">
|
||
{menu2.Node.NAME}
|
||
</span>
|
||
</div>
|
||
<div className="sider__shortMenuShowGrid">
|
||
{menu2.Children.map((menu3, index3) => {
|
||
return (
|
||
<div
|
||
key={`${menu3.Node.ID}_${index3}`}
|
||
onClick={() => {
|
||
handleActiveMenu(menu3.Node);
|
||
}}
|
||
title={menu3.Node.NAME}
|
||
>
|
||
<div className="sider__shortMenuShowChild">
|
||
{/* <Icon
|
||
type={"caret-right"}
|
||
className="sider__shortMenuShowChild-iconritwo"
|
||
/> */}
|
||
<Icon
|
||
type={
|
||
menu3.Node.ICON
|
||
? menu3.Node.ICON
|
||
: "file-text"
|
||
}
|
||
className="sider__shortMenuShowChild-icontwo"
|
||
/>
|
||
|
||
<span className="sider__shortMenuShowChild-nametwo">
|
||
{menu3.Node.NAME}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
{/* // )} */}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default withRouter(connect(({ login }) => ({ login }))(Sider));
|