474 lines
17 KiB
JavaScript
474 lines
17 KiB
JavaScript
import React, { useState, useEffect, useMemo, useRef } from "react";
|
||
import { connect } from "dva";
|
||
import { withRouter, matchPath } from "dva/router";
|
||
import { Scrollbars } from "react-custom-scrollbars";
|
||
import { Icon } from "antd";
|
||
import EnergyIcon from "../utils/energyIcon";
|
||
import { $consts } from "../plugins";
|
||
import "./sider1.less";
|
||
|
||
const Sider = (props) => {
|
||
const [activeKeepMenu, setActiveKeepMenu] = useState(null);
|
||
const [shortMenuShow, setShortMenuShow] = useState(true);
|
||
const [expandMenuShow, setExpandMenuShow] = useState(true);
|
||
|
||
/** 菜单页展开与收起 */
|
||
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 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]);
|
||
|
||
/** 登录页隐藏 */
|
||
if (props.matchLogin) return null;
|
||
|
||
return (
|
||
<div
|
||
// onMouseEnter={() => setShortMenuShow(true)}
|
||
// onMouseLeave={() => setShortMenuShow(false)}
|
||
className={`sider ${shortMenuShow ? "shortMenuShow" : ""}`}
|
||
>
|
||
{/** 所有菜单 */}
|
||
<div
|
||
// onMouseEnter={handleExpandMenuShow}
|
||
// onMouseLeave={handleExpandMenuHide}
|
||
onClick={navToHome}
|
||
className="sider__menuAll"
|
||
>
|
||
<img
|
||
src={require("../assets/layout/menu-all.png")}
|
||
alt=""
|
||
className="sider__menuAll-icon"
|
||
/>
|
||
<div className="sider__menu-font">
|
||
<span className="sider__menu-font--text">首页</span>
|
||
<Icon type="right" className="sider__menu-font--icon" />
|
||
</div>
|
||
</div>
|
||
{/** 常用菜单 */}
|
||
<Scrollbars
|
||
autoHide
|
||
autoHideTimeout={1000}
|
||
autoHideDuration={200}
|
||
className="sider__scrollbars"
|
||
>
|
||
<div className="sider__menuExpand-header">
|
||
{topMenus.menus.map((menu, index) => {
|
||
const active = menu.Node.ID === activeMenu?.ID;
|
||
const activeKeep = menu.Node.ID === activeKeepMenu?.ID;
|
||
const wrapClass = `sider__menuExpand-menu ${
|
||
index === topMenus.menus.length - 1 ? "lastChild" : ""
|
||
}`;
|
||
const iconClass = `sider__menuExpand-menu--itemIcon ${
|
||
active ? "active" : ""
|
||
} ${activeKeep ? "active" : ""}`;
|
||
const fontClass = `sider__menuExpand-menu--itemText text-ellipsis ${
|
||
active ? "active" : ""
|
||
} ${activeKeep ? "active" : ""}`;
|
||
const indicatorClass = `sider__menuExpand-menu--indicator ${
|
||
active ? "active" : ""
|
||
} ${activeKeep ? "active" : ""}`;
|
||
return (
|
||
<div
|
||
key={`${menu.Node.ID}_${index}`}
|
||
// onMouseEnter={() => {
|
||
// setCurrMenu(menu.Node);
|
||
// setActiveKeepMenu(menu.Node);
|
||
// }}
|
||
onClick={() =>{handleActiveMenu(menu.Node);setCurrMenu(menu.Node);
|
||
setActiveKeepMenu(menu.Node);} }
|
||
className={wrapClass}
|
||
>
|
||
<div className="sider__menuExpand-menu--item">
|
||
<Icon
|
||
type={menu.Node.ICON ? menu.ICON : "file-text"}
|
||
className={iconClass}
|
||
/>
|
||
<div className={fontClass}>{menu.Node.NAME}</div>
|
||
</div>
|
||
<div className={indicatorClass} />
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
{/** 二三级菜单 */}
|
||
<div className="sider__menuExpand-body">
|
||
<Scrollbars autoHide autoHideTimeout={1000} autoHideDuration={200}>
|
||
<div className="sider__menuExpand-body--scroll">
|
||
{subMenus.map((menu, index) => {
|
||
const isLevel4Menu = menu.Children?.find(
|
||
(mc) => mc.Children?.length
|
||
);
|
||
const childMenus = isLevel4Menu
|
||
? [menu]
|
||
: menu.Children || [];
|
||
return (
|
||
<div
|
||
key={`${menu.Node.ID}_${index}`}
|
||
className="sider__menuExpand-subMenu"
|
||
style={{
|
||
flex: `0 0 ${(1 / topMenus.leafMenuSections) * 100}%`,
|
||
}}
|
||
>
|
||
{/** 二级菜单 */}
|
||
<div
|
||
onClick={() => handleMenuShrink(menu.Node.ID)}
|
||
className="sider__menuExpand-subMenu--title"
|
||
>
|
||
{menu.Node.NAME}
|
||
<Icon
|
||
type={!menuShrink[menu.Node.ID] ? "down" : "up"}
|
||
className="sider__menuExpand-subMenu--title--icon"
|
||
/>
|
||
</div>
|
||
{/** 三级菜单 */}
|
||
{!menuShrink[menu.Node.ID]
|
||
? childMenus.map((child, childIndex) => {
|
||
const active = child.Node.ID === activeMenu?.ID;
|
||
const iconClass = `sider__menuExpand-menu--itemIcon ${
|
||
active ? "active" : ""
|
||
}`;
|
||
const fontClass = `sider__menuExpand-menu--itemText text-ellipsis ${
|
||
active ? "active" : ""
|
||
}`;
|
||
return (
|
||
<div
|
||
key={`${child.Node.ID}_${index}_${childIndex}`}
|
||
onClick={() =>
|
||
isLevel4Menu
|
||
? navToBackend(child.Node)
|
||
: handleActiveMenu(child.Node)
|
||
}
|
||
className="sider__menuExpand-subMenu--menu"
|
||
>
|
||
<Icon
|
||
type={
|
||
child.Node.ICON
|
||
? child.Node.ICON
|
||
: "file-text"
|
||
}
|
||
className={iconClass}
|
||
/>
|
||
<div className={fontClass}>
|
||
{child.Node.NAME}
|
||
</div>
|
||
</div>
|
||
);
|
||
})
|
||
: null}
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
</Scrollbars>
|
||
</div>
|
||
{favorMenus.map((menu, index) => {
|
||
const active = menu.ID === activeMenu?.ID;
|
||
const wrapClass = `sider__menu ${
|
||
index === favorMenus.length - 1 ? "lastChild" : ""
|
||
}`;
|
||
const iconClass = `sider__menu-icon ${active ? "active" : ""}`;
|
||
const fontClass = `sider__menu-font--text ${active ? "active" : ""}`;
|
||
return (
|
||
<div
|
||
key={`${menu.ID}_${index}`}
|
||
onClick={() => handleActiveMenu(menu)}
|
||
className={wrapClass}
|
||
>
|
||
<Icon
|
||
type={menu.ICON ? menu.ICON : "file-text"}
|
||
className={iconClass}
|
||
/>
|
||
<div className="sider__menu-font">
|
||
<span className={fontClass}>{menu.NAME}</span>
|
||
</div>
|
||
</div>
|
||
);
|
||
})}
|
||
|
||
|
||
</Scrollbars>
|
||
{/** 展开菜单 */}
|
||
<div
|
||
// onMouseEnter={expandMenuShow ? handleExpandMenuShow : handleExpandMenuHide}
|
||
// onMouseLeave={handleExpandMenuHide}
|
||
className={`sider__menuExpand ${
|
||
expandMenuShow ? "expandMenuShow" : ""
|
||
}`}
|
||
style={{
|
||
width: expandMenuShow
|
||
? topMenus.width + 48 < 300
|
||
? 300
|
||
: topMenus.width + 48
|
||
: 0,
|
||
overflow: expandMenuShow ? "visible" : "hidden",
|
||
}} // 加 padding: 24
|
||
>
|
||
{/* 留白, 扩大上方onMouseEnter的范围 */}
|
||
<div
|
||
className={`${
|
||
expandMenuShow
|
||
? "sider__menuExpand-divempty"
|
||
: "sider__menuExpand-divempty-hide"
|
||
}`}
|
||
></div>
|
||
{/** inner 加 padding，否则加在 sider__menuExpand 上的话，width 为 0，也会有 padding 的宽度 */}
|
||
<div
|
||
className="sider__menuExpand-inner"
|
||
style={{
|
||
width: topMenus.width + 48 < 300 ? 300 : topMenus.width + 48,
|
||
}}
|
||
>
|
||
{/** 一级菜单 */}
|
||
<div className="sider__menuExpand-header">
|
||
{topMenus.menus.map((menu, index) => {
|
||
const active = menu.Node.ID === activeMenu?.ID;
|
||
const activeKeep = menu.Node.ID === activeKeepMenu?.ID;
|
||
const wrapClass = `sider__menuExpand-menu ${
|
||
index === topMenus.menus.length - 1 ? "lastChild" : ""
|
||
}`;
|
||
const iconClass = `sider__menuExpand-menu--itemIcon ${
|
||
active ? "active" : ""
|
||
} ${activeKeep ? "active" : ""}`;
|
||
const fontClass = `sider__menuExpand-menu--itemText text-ellipsis ${
|
||
active ? "active" : ""
|
||
} ${activeKeep ? "active" : ""}`;
|
||
const indicatorClass = `sider__menuExpand-menu--indicator ${
|
||
active ? "active" : ""
|
||
} ${activeKeep ? "active" : ""}`;
|
||
return (
|
||
<div
|
||
key={`${menu.Node.ID}_${index}`}
|
||
onMouseEnter={() => {
|
||
setCurrMenu(menu.Node);
|
||
setActiveKeepMenu(menu.Node);
|
||
}}
|
||
onClick={() => handleActiveMenu(menu.Node)}
|
||
className={wrapClass}
|
||
>
|
||
<div className="sider__menuExpand-menu--item">
|
||
<Icon
|
||
type={menu.Node.ICON ? menu.ICON : "file-text"}
|
||
className={iconClass}
|
||
/>
|
||
<div className={fontClass}>{menu.Node.NAME}</div>
|
||
</div>
|
||
<div className={indicatorClass} />
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
{/** 二三级菜单 */}
|
||
<div className="sider__menuExpand-body">
|
||
<Scrollbars autoHide autoHideTimeout={1000} autoHideDuration={200}>
|
||
<div className="sider__menuExpand-body--scroll">
|
||
{subMenus.map((menu, index) => {
|
||
const isLevel4Menu = menu.Children?.find(
|
||
(mc) => mc.Children?.length
|
||
);
|
||
const childMenus = isLevel4Menu
|
||
? [menu]
|
||
: menu.Children || [];
|
||
return (
|
||
<div
|
||
key={`${menu.Node.ID}_${index}`}
|
||
className="sider__menuExpand-subMenu"
|
||
style={{
|
||
flex: `0 0 ${(1 / topMenus.leafMenuSections) * 100}%`,
|
||
}}
|
||
>
|
||
{/** 二级菜单 */}
|
||
<div
|
||
onClick={() => handleMenuShrink(menu.Node.ID)}
|
||
className="sider__menuExpand-subMenu--title"
|
||
>
|
||
{menu.Node.NAME}
|
||
<Icon
|
||
type={!menuShrink[menu.Node.ID] ? "down" : "up"}
|
||
className="sider__menuExpand-subMenu--title--icon"
|
||
/>
|
||
</div>
|
||
{/** 三级菜单 */}
|
||
{!menuShrink[menu.Node.ID]
|
||
? childMenus.map((child, childIndex) => {
|
||
const active = child.Node.ID === activeMenu?.ID;
|
||
const iconClass = `sider__menuExpand-menu--itemIcon ${
|
||
active ? "active" : ""
|
||
}`;
|
||
const fontClass = `sider__menuExpand-menu--itemText text-ellipsis ${
|
||
active ? "active" : ""
|
||
}`;
|
||
return (
|
||
<div
|
||
key={`${child.Node.ID}_${index}_${childIndex}`}
|
||
onClick={() =>
|
||
isLevel4Menu
|
||
? navToBackend(child.Node)
|
||
: handleActiveMenu(child.Node)
|
||
}
|
||
className="sider__menuExpand-subMenu--menu"
|
||
>
|
||
<Icon
|
||
type={
|
||
child.Node.ICON
|
||
? child.Node.ICON
|
||
: "file-text"
|
||
}
|
||
className={iconClass}
|
||
/>
|
||
<div className={fontClass}>
|
||
{child.Node.NAME}
|
||
</div>
|
||
</div>
|
||
);
|
||
})
|
||
: null}
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
</Scrollbars>
|
||
</div>
|
||
</div>
|
||
{/** 左边的 border */}
|
||
<div className="sider__menuExpand-divider" />
|
||
{/* 留白, 扩大右侧onMouseEnter的范围 */}
|
||
<div
|
||
className={`${
|
||
expandMenuShow
|
||
? "sider__menuExpand-divempty-right"
|
||
: "sider__menuExpand-divempty-hide"
|
||
}`}
|
||
></div>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default withRouter(connect(({ login }) => ({ login }))(Sider));
|