import * as React from 'react'
import { Menu } from 'antd'
import * as styles from './Aside.module.less'
import { DoubleRightOutlined,DoubleLeftOutlined } from '@ant-design/icons'
import routes from '../../../router'
import { RouteComponentProps, withRouter } from 'react-router-dom'
import { IMenuInfo } from 'src/types'
import { connect } from 'react-redux'
import actions from 'src/store/modules/common/actions'
// import { MenuGroup } from 'src/router/constant'
import 'src/assets/fonts/icon-font.css'
import { bindActionCreators } from 'redux'
const { SubMenu } = Menu
interface IState {
pathname:string
}
interface ActionProps{
actions: typeof actions,
collapsed:boolean,
authUrls: any[],
}
type IProps = RouteComponentProps<any>&ActionProps
const menuRoutes = routes.filter(item=>{return !item.hide})
class Aside extends React.Component<IProps, IState> {
state:IState = {
pathname:'',
}
// 点击菜单路由跳转
handleClick = (menuItem: IMenuInfo, subMenuItem: IMenuInfo | undefined) => {
const path = subMenuItem ? menuItem.path + subMenuItem.path : menuItem.path
const { history } = this.props
history.push({ pathname: path })
}
// 获取当前路径匹配的菜单
getSelectedKey = (pathname: string): string[] => {
const selectedParentNode = menuRoutes.find((item: IMenuInfo) => {
let menuNode
if (item.children) {
// tslint:disable-next-line: no-unused-expression
menuNode = (item.children && item.children.filter((subItem: IMenuInfo) => {
return item.path + subItem.path === pathname
})) || []
return menuNode.length > 0
} else {
return item.path === pathname
}
}) || menuRoutes[0]
return [selectedParentNode.path]
}
toggleCollapsed = () => {
this.props.actions.toggleMenuCollapsed()
}
unListen:any
componentDidMount(){
const { pathname } = this.props.location
this.updatePathName(pathname)
this.unListen = this.props.history.listen((listen:any)=>{
const {pathname} = listen
this.updatePathName(pathname)
})
}
componentWillUnmount(){
this.unListen&&this.unListen()
}
// 非菜单点击或者导航菜单没有的url 需要页面请求是高亮对应的项需要在本方法做处理
/**
* 更新pathname
* @param pathname 当前变更的pathname
*/
updatePathName = (pathname:string)=>{
let pname = pathname
if(['/intelligentSeat','/help'].includes(pathname)){
pname = '/dashboard'
}
this.setState({
pathname:pname,
})
}
render() {
const { collapsed, authUrls } = this.props
const {pathname} = this.state
const collapsedBtnStyle = { fontSize: '8px', verticalAlign: 'middle' }
return (
<div className={styles.aside}>
<Menu
defaultSelectedKeys={[pathname]}
selectedKeys={[pathname]}
defaultOpenKeys={this.getSelectedKey(pathname)}
inlineCollapsed={collapsed}
mode="inline"
theme="light"
>
{
menuRoutes.map((menuItem: IMenuInfo) => {
if (menuItem.children && menuItem.children.length > 0) {
if(authUrls.length && authUrls.includes(menuItem.path))
return (
<SubMenu key={menuItem.path} title={menuItem.meta.title} icon={<span className={`iconfont ${menuItem.icon ||''}`}></span>}>
{menuItem.children && menuItem.children.map((subMenuItem: IMenuInfo) => {
if(!subMenuItem.hide){
if(authUrls.length && authUrls.includes(menuItem.path + subMenuItem.path))
return (
<Menu.Item
onClick={() => this.handleClick(menuItem, subMenuItem)}
key={menuItem.path + subMenuItem.path}
>
{subMenuItem.meta.title}
</Menu.Item>
)
}else{
return null
}
})}
</SubMenu>
)
} else {
if(authUrls.length && authUrls.includes(menuItem.path))
return (
<Menu.Item
onClick={() => this.handleClick(menuItem, undefined)}
key={menuItem.path}
icon={<span className={`iconfont ${menuItem.icon || ''}`}></span>}
>
{menuItem.meta.title}
</Menu.Item>
)
}
})
}
</Menu>
<div className={styles.collaspeBtn} style={{width:collapsed?56:200}} onClick={this.toggleCollapsed}>
{collapsed ? <DoubleRightOutlined style={collapsedBtnStyle} /> : <DoubleLeftOutlined style={collapsedBtnStyle} />}
</div>
</div>
)
}
}
export default connect(
(state: any) => {
return {
menuDisplay: state.commonReducer.menuDisplay,
collapsed: state.commonReducer.collapsed,
authUrls: state.login.authUrls,
}
},
dispatch => {
return {
actions: bindActionCreators(actions, dispatch),
}
}
)(withRouter(Aside))
react根据路由切换页面
最新推荐文章于 2024-06-21 11:41:02 发布