diff --git a/src/components/layout/header.js b/src/components/layout/header.js index 87c2688..c757272 100644 --- a/src/components/layout/header.js +++ b/src/components/layout/header.js @@ -5,14 +5,16 @@ import Menus from './menu' const SubMenu = Menu.SubMenu -function Header ({user, logout, switchSider, siderFold, isNavbar, menuPopoverVisible, location, switchMenuPopover}) { +function Header ({user, logout, switchSider, siderFold, isNavbar, menuPopoverVisible, location, switchMenuPopover, navOpenKeys, changeOpenKeys}) { let handleClickMenu = e => e.key === 'logout' && logout() const menusProps = { siderFold: false, darkTheme: false, isNavbar, handleClickNavMenu: switchMenuPopover, - location + location, + navOpenKeys, + changeOpenKeys } return (
diff --git a/src/components/layout/menu.js b/src/components/layout/menu.js index 9344ccd..59653b3 100644 --- a/src/components/layout/menu.js +++ b/src/components/layout/menu.js @@ -26,14 +26,42 @@ const getMenus = function (menuArray, siderFold, parentPath) { }) } -function Menus ({ siderFold, darkTheme, location, isNavbar, handleClickNavMenu }) { +function Menus ({ siderFold, darkTheme, location, isNavbar, handleClickNavMenu, navOpenKeys, changeOpenKeys }) { const menuItems = getMenus(menu, siderFold) + + const onOpenChange = (openKeys) => { + const latestOpenKey = openKeys.find(key => !(navOpenKeys.indexOf(key) > -1)) + const latestCloseKey = navOpenKeys.find(key => !(openKeys.indexOf(key) > -1)) + let nextOpenKeys = []; + if (latestOpenKey) { + nextOpenKeys = getAncestorKeys(latestOpenKey).concat(latestOpenKey) + } + if (latestCloseKey) { + nextOpenKeys = getAncestorKeys(latestCloseKey) + } + changeOpenKeys(nextOpenKeys) + } + const getAncestorKeys = (key) => { + const map = { + // navChildParent: ['navParent'], + navigation2: ['navigation'] + } + return map[key] || [] + } + let menuProps = {} + if(!siderFold) {//菜单栏收起时,不能操作openKeys + menuProps = { + onOpenChange: onOpenChange, + openKeys: navOpenKeys + } + } + return ( item.key) : []} defaultSelectedKeys={[location.pathname.split('/')[location.pathname.split('/').length - 1] || 'dashboard']}> {menuItems} diff --git a/src/components/layout/sider.js b/src/components/layout/sider.js index 882fa92..6cc10da 100644 --- a/src/components/layout/sider.js +++ b/src/components/layout/sider.js @@ -4,11 +4,13 @@ import styles from './main.less' import { config } from '../../utils' import Menus from './menu' -function Sider ({ siderFold, darkTheme, location, changeTheme }) { +function Sider ({ siderFold, darkTheme, location, changeTheme, navOpenKeys, changeOpenKeys }) { const menusProps = { siderFold, darkTheme, - location + location, + navOpenKeys, + changeOpenKeys } return (
diff --git a/src/components/users/list.js b/src/components/users/list.js index 23e4247..2d64112 100644 --- a/src/components/users/list.js +++ b/src/components/users/list.js @@ -45,6 +45,7 @@ class list extends React.Component { } getBodyWrapper = (body) => { + // 切换分页去除动画; if (this.currentPage !== this.newPage) { this.currentPage = this.newPage return body @@ -60,6 +61,11 @@ class list extends React.Component { e.target.style.height = 'auto' } + async pageChange(pagination) { + await this.props.onPageChange(pagination) + this.newPage = pagination.current + } + render () { const { loading, @@ -133,11 +139,7 @@ class list extends React.Component { return
{ - onPageChange(page, () => { - self.newPage = page.current - }) - }} pagination={pagination} simple rowKey={record => record.id} getBodyWrapper={this.getBodyWrapper} /> + }} columns={columns} dataSource={dataSource} loading={loading} onChange={::this.pageChange} pagination={pagination} simple rowKey={record => record.id} getBodyWrapper={this.getBodyWrapper} /> } } diff --git a/src/models/app.js b/src/models/app.js index 224675b..af01ed6 100644 --- a/src/models/app.js +++ b/src/models/app.js @@ -13,7 +13,8 @@ export default { menuPopoverVisible: false, siderFold: localStorage.getItem('antdAdminSiderFold') === 'true', darkTheme: localStorage.getItem('antdAdminDarkTheme') !== 'false', - isNavbar: document.body.clientWidth < 769 + isNavbar: document.body.clientWidth < 769, + navOpenKeys: JSON.parse(localStorage.getItem('navOpenKeys') || '[]') //侧边栏菜单打开的keys }, subscriptions: { setup ({dispatch}) { @@ -173,6 +174,12 @@ export default { ...state, menuPopoverVisible: !state.menuPopoverVisible } + }, + handleNavOpenKeys(state, action) { + return { + ...state, + ...action.payload + } } } } diff --git a/src/routes/app.js b/src/routes/app.js index 9088bd7..a56e644 100644 --- a/src/routes/app.js +++ b/src/routes/app.js @@ -11,7 +11,7 @@ import { classnames } from '../utils' import '../components/layout/common.less' function App ({children, location, dispatch, app}) { - const {login, loading, loginButtonLoading, user, siderFold, darkTheme, isNavbar, menuPopoverVisible} = app + const {login, loading, loginButtonLoading, user, siderFold, darkTheme, isNavbar, menuPopoverVisible, navOpenKeys} = app const loginProps = { loading, loginButtonLoading, @@ -26,6 +26,7 @@ function App ({children, location, dispatch, app}) { location, isNavbar, menuPopoverVisible, + navOpenKeys, switchMenuPopover () { dispatch({type: 'app/switchMenuPopver'}) }, @@ -34,6 +35,10 @@ function App ({children, location, dispatch, app}) { }, switchSider () { dispatch({type: 'app/switchSider'}) + }, + changeOpenKeys(openKeys) { + localStorage.setItem('navOpenKeys', JSON.stringify(openKeys)) + dispatch({ type: 'app/handleNavOpenKeys', payload: { navOpenKeys: openKeys } }) } } @@ -41,8 +46,13 @@ function App ({children, location, dispatch, app}) { siderFold, darkTheme, location, + navOpenKeys, changeTheme () { dispatch({type: 'app/changeTheme'}) + }, + changeOpenKeys(openKeys) { + localStorage.setItem('navOpenKeys', JSON.stringify(openKeys)) + dispatch({ type: 'app/handleNavOpenKeys', payload: { navOpenKeys: openKeys } }) } } diff --git a/src/routes/users.js b/src/routes/users.js index 92d9e4f..2832ddf 100644 --- a/src/routes/users.js +++ b/src/routes/users.js @@ -30,17 +30,16 @@ function Users ({ location, dispatch, users }) { dataSource: list, loading, pagination: pagination, - async onPageChange (page, callback) { - const query = location.query - await dispatch(routerRedux.push({ - pathname: '/users', + onPageChange (page) { + const { query, pathname } = location + dispatch(routerRedux.push({ + pathname: pathname, query: { ...query, page: page.current, pageSize: page.pageSize } })) - await callback && callback() }, onDeleteItem (id) { dispatch({