Merge pull request #71 from pmg1989/3.0

优化侧边栏导航刷新后依旧能展开选中当前地址的菜单项

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 (
     <div className={styles.header}>

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 (
     <Menu
+      {...menuProps}
       mode={siderFold ? 'vertical' : 'inline'}
       theme={darkTheme ? 'dark' : 'light'}
       onClick={handleClickNavMenu}
-      defaultOpenKeys={isNavbar ? menuItems.map(item => item.key) : []}
       defaultSelectedKeys={[location.pathname.split('/')[location.pathname.split('/').length - 1] || 'dashboard']}>
       {menuItems}
     </Menu>

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 (
     <div>

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 <div>
       <Table className={styles.table} bordered scroll={{
         x: 1200
-      }} columns={columns} dataSource={dataSource} loading={loading} onChange={(page) => {
-        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} />
     </div>
   }
 }

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
+      }
     }
   }
 }

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 } })
     }
   }
 

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({