rebuild bread,menu,router

src/components/Layout/Bread.js

@@ -3,46 +3,43 @@ import PropTypes from 'prop-types'
 import { Breadcrumb, Icon } from 'antd'
 import { Link } from 'dva/router'
 import styles from './Bread.less'
-import { menu } from '../../utils'
+import pathToRegexp from 'path-to-regexp'
+import { queryArray } from '../../utils'
 
-let pathSet = []
-const getPathSet = function (menuArray, parentPath) {
-  parentPath = parentPath || '/'
-  menuArray.forEach(item => {
-    pathSet[(parentPath + item.key).replace(/\//g, '-').hyphenToHump()] = {
-      path: parentPath + item.key,
-      name: item.name,
-      icon: item.icon || '',
-      clickable: item.clickable === undefined,
+const Bread = ({ location, menu }) => {
+  // 匹配当前路由
+  let pathArray = []
+  let current
+  for (let index in menu) {
+    if (menu[index].router && pathToRegexp(menu[index].router).exec(location.pathname)) {
+      current = menu[index]
+      break
     }
-    if (item.child) {
-      getPathSet(item.child, `${parentPath}${item.key}/`)
-    }
-  })
-}
-getPathSet(menu)
+  }
 
-function Bread ({ location }) {
-  let pathNames = []
-  location.pathname.substr(1).split('/').forEach((item, key) => {
-    if (key > 0) {
-      pathNames.push((`${pathNames[key - 1]}-${item}`).hyphenToHump())
-    } else {
-      pathNames.push((`-${item}`).hyphenToHump())
-    }
-  })
+  if (!current) {
+    return (<div className={styles.bread}>首页</div>)
+  }
 
-  const breadsArray = pathNames.filter(item => (item in pathSet))
-  const breads = breadsArray.map((item, key) => {
+  // 递归查找父级
+  const getPathArray = (item) => {
+    pathArray.unshift(item)
+    if (item.bpid) {
+      getPathArray(queryArray(menu, item.bpid, 'id'))
+    }
+  }
+  getPathArray(current)
+
+  const breads = pathArray.map((item, key) => {
     const content = (
-      <span>{pathSet[item].icon
-          ? <Icon type={pathSet[item].icon} style={{ marginRight: 4 }} />
-          : ''}{pathSet[item].name}</span>
+      <span>{item.icon
+          ? <Icon type={item.icon} style={{ marginRight: 4 }} />
+          : ''}{item.name}</span>
     )
     return (
       <Breadcrumb.Item key={key}>
-        {((breadsArray.length - 1) !== key && pathSet[item].clickable)
-          ? <Link to={pathSet[item].path}>
+        {((pathArray.length - 1) !== key)
+          ? <Link to={item.router}>
               {content}
           </Link>
           : content}
@@ -53,12 +50,6 @@ function Bread ({ location }) {
   return (
     <div className={styles.bread}>
       <Breadcrumb>
-        <Breadcrumb.Item >
-          <Link to="/dashboard">
-            <Icon type="home" />
-            <span>Home</span>
-          </Link>
-        </Breadcrumb.Item>
         {breads}
       </Breadcrumb>
     </div>
@@ -66,6 +57,7 @@ function Bread ({ location }) {
 }
 
 Bread.propTypes = {
+  menu: PropTypes.array,
   location: PropTypes.object,
 }
 

src/components/Layout/Header.js

@@ -6,9 +6,10 @@ import Menus from './Menu'
 
 const SubMenu = Menu.SubMenu
 
-function Header ({ user, logout, switchSider, siderFold, isNavbar, menuPopoverVisible, location, switchMenuPopover, navOpenKeys, changeOpenKeys }) {
+function Header ({ user, logout, switchSider, siderFold, isNavbar, menuPopoverVisible, location, switchMenuPopover, navOpenKeys, changeOpenKeys, menu }) {
   let handleClickMenu = e => e.key === 'logout' && logout()
   const menusProps = {
+    menu,
     siderFold: false,
     darkTheme: false,
     isNavbar,
@@ -49,6 +50,7 @@ function Header ({ user, logout, switchSider, siderFold, isNavbar, menuPopoverVi
 }
 
 Header.propTypes = {
+  menu: PropTypes.array,
   user: PropTypes.object,
   logout: PropTypes.func,
   switchSider: PropTypes.func,

src/components/Layout/Menu.js

@@ -2,33 +2,43 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { Menu, Icon } from 'antd'
 import { Link } from 'dva/router'
-import { menu } from '../../utils'
+import { arrayToTree } from '../../utils'
 
-const topMenus = menu.map(item => item.key)
-const getMenus = function (menuArray, siderFold, parentPath = '/') {
-  return menuArray.map(item => {
-    const linkTo = parentPath + item.key
-    if (item.child) {
+const Menus = ({ siderFold, darkTheme, location, handleClickNavMenu, navOpenKeys, changeOpenKeys, menu }) => {
+  // 生成树状
+  const menuTree = arrayToTree(menu.filter(_ => _.mpid !== -1), 'id', 'mpid')
+
+
+  // 递归生成菜单
+  const getMenus = (menuTreeN, siderFoldN) => {
+    return menuTreeN.map(item => {
+      if (item.chindren) {
+        return (
+          <Menu.SubMenu
+            key={item.id}
+            title={<span>
+              {item.icon && <Icon type={item.icon} />}
+              {(!siderFoldN || menuTree.indexOf(item) < 0) && item.name}
+            </span>}
+          >
+            {getMenus(item.chindren, siderFoldN)}
+          </Menu.SubMenu>
+        )
+      }
       return (
-        <Menu.SubMenu key={linkTo} title={<span>{item.icon ? <Icon type={item.icon} /> : ''}{siderFold && topMenus.indexOf(item.key) >= 0 ? '' : item.name}</span>}>
-          {getMenus(item.child, siderFold, `${linkTo}/`)}
-        </Menu.SubMenu>
+        <Menu.Item key={item.id}>
+          <Link to={item.router}>
+            {item.icon && <Icon type={item.icon} />}
+            {(!siderFoldN || menuTree.indexOf(item) < 0) && item.name}
+          </Link>
+        </Menu.Item>
       )
-    }
-    return (
-      <Menu.Item key={linkTo}>
-        <Link to={linkTo}>
-          {item.icon ? <Icon type={item.icon} /> : ''}
-          {siderFold && topMenus.indexOf(item.key) >= 0 ? '' : item.name}
-        </Link>
-      </Menu.Item>
-    )
-  })
-}
+    })
+  }
+  const menuItems = getMenus(menuTree, siderFold)
 
-function Menus ({ siderFold, darkTheme, location, handleClickNavMenu, navOpenKeys, changeOpenKeys }) {
-  const menuItems = getMenus(menu, siderFold)
 
+  // 保持选中
   const getAncestorKeys = (key) => {
     const map = {
       '/navigation/navigation2': ['/navigation'],
@@ -60,7 +70,7 @@ function Menus ({ siderFold, darkTheme, location, handleClickNavMenu, navOpenKey
       mode={siderFold ? 'vertical' : 'inline'}
       theme={darkTheme ? 'dark' : 'light'}
       onClick={handleClickNavMenu}
-      defaultSelectedKeys={[location.pathname !== '/' ? location.pathname : '/dashboard']}
+      defaultSelectedKeys={[location.pathname !== '/' ? location.pathname : menuTree[0].router]}
     >
       {menuItems}
     </Menu>
@@ -68,6 +78,7 @@ function Menus ({ siderFold, darkTheme, location, handleClickNavMenu, navOpenKey
 }
 
 Menus.propTypes = {
+  menu: PropTypes.array,
   siderFold: PropTypes.bool,
   darkTheme: PropTypes.bool,
   location: PropTypes.object,

src/components/Layout/Sider.js

@@ -5,8 +5,9 @@ import styles from './Layout.less'
 import { config } from '../../utils'
 import Menus from './Menu'
 
-function Sider ({ siderFold, darkTheme, location, changeTheme, navOpenKeys, changeOpenKeys }) {
+function Sider ({ siderFold, darkTheme, location, changeTheme, navOpenKeys, changeOpenKeys, menu }) {
   const menusProps = {
+    menu,
     siderFold,
     darkTheme,
     location,
@@ -29,6 +30,7 @@ function Sider ({ siderFold, darkTheme, location, changeTheme, navOpenKeys, chan
 }
 
 Sider.propTypes = {
+  menu: PropTypes.array,
   siderFold: PropTypes.bool,
   darkTheme: PropTypes.bool,
   location: PropTypes.object,