295 lines
12 KiB
JavaScript
295 lines
12 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(false)
|
|||
|
|
const [expandMenuShow, setExpandMenuShow] = useState(false)
|
|||
|
|
|
|||
|
|
/** 菜单页展开与收起 */
|
|||
|
|
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'
|
|||
|
|
>
|
|||
|
|
{
|
|||
|
|
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 className='sider__menuExpand-footer'>
|
|||
|
|
<Scrollbars
|
|||
|
|
autoHide
|
|||
|
|
autoHideTimeout={1000}
|
|||
|
|
autoHideDuration={200}
|
|||
|
|
>
|
|||
|
|
<div className='sider__menuExpand-footer--scroll'>{currMenu?.REMARK}</div>
|
|||
|
|
</Scrollbars>
|
|||
|
|
<span className='sider__menuExpand-footer--title'>脚注</span>
|
|||
|
|
</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))
|