From 4a694b6df8c2b7aebc412f3a64050289469acdb1 Mon Sep 17 00:00:00 2001 From: zuiidea Date: Tue, 18 Apr 2017 09:56:15 +0800 Subject: [PATCH 1/4] fix prop-types --- package.json | 13 ++--- src/components/DataTable/AnimTableBody.js | 3 +- src/components/DataTable/DataTable.js | 3 +- src/components/DropOption/DropOption.js | 3 +- src/components/Iconfont/Iconfont.js | 3 +- src/components/Layout/Bread.js | 3 +- src/components/Layout/Header.js | 3 +- src/components/Layout/Menu.js | 3 +- src/components/Layout/Sider.js | 3 +- src/components/Search/Search.js | 3 +- src/router.js | 3 +- src/routes/app.js | 9 ++-- src/routes/chart/Container.js | 3 +- src/routes/chart/barChart/index.js | 3 +- src/routes/chart/lineChart/index.js | 3 +- src/routes/dashboard/components/browser.js | 3 +- src/routes/dashboard/components/comments.js | 3 +- src/routes/dashboard/components/completed.js | 3 +- src/routes/dashboard/components/cpu.js | 3 +- src/routes/dashboard/components/numberCard.js | 3 +- src/routes/dashboard/components/quote.js | 3 +- .../dashboard/components/recentSales.js | 3 +- src/routes/dashboard/components/sales.js | 3 +- src/routes/dashboard/components/user.js | 3 +- src/routes/dashboard/components/weather.js | 3 +- src/routes/dashboard/index.js | 3 +- src/routes/login/index.js | 3 +- src/routes/users/UserFilter.js | 3 +- src/routes/users/UserList.js | 3 +- src/routes/users/UserModal.js | 3 +- src/routes/users/index.js | 3 +- src/services/app.js | 4 +- webpack.configtest.js | 50 ------------------- 33 files changed, 69 insertions(+), 94 deletions(-) delete mode 100644 webpack.configtest.js diff --git a/package.json b/package.json index 593d3b3..6505ae9 100644 --- a/package.json +++ b/package.json @@ -7,6 +7,7 @@ "dva": "^1.1.0", "dva-loading": "^0.2.0", "lodash": "^4.17.4", + "nprogress": "^0.2.0", "qs": "^6.2.0", "react": "^15.4.1", "react-countup": "1.3.0", @@ -41,16 +42,8 @@ "lint" ], "scripts": { - "dev": "set BROWSER=none&&roadhog server", + "dev": "set BROWSER=none&&set HOST=0.0.0.0&&roadhog server", "lint": "eslint --fix --ext .js src", - "build": "roadhog build" - }, - "theme": "./src/theme.js", - "standard": { - "parser": "babel-eslint", - "globals": [ - "location", - "localStorage" - ] + "build": "roadhog build --analyze" } } diff --git a/src/components/DataTable/AnimTableBody.js b/src/components/DataTable/AnimTableBody.js index 4160e42..c4b6e58 100644 --- a/src/components/DataTable/AnimTableBody.js +++ b/src/components/DataTable/AnimTableBody.js @@ -1,4 +1,5 @@ -import React, { PropTypes } from 'react' +import React from 'react' +import PropTypes from 'prop-types' import { TweenOneGroup } from 'rc-tween-one' const enterAnim = [ diff --git a/src/components/DataTable/DataTable.js b/src/components/DataTable/DataTable.js index 076e181..23eaf4a 100644 --- a/src/components/DataTable/DataTable.js +++ b/src/components/DataTable/DataTable.js @@ -1,4 +1,5 @@ -import React, { PropTypes } from 'react' +import React from 'react' +import PropTypes from 'prop-types' import { Table } from 'antd' import { request } from '../../utils' import lodash from 'lodash' diff --git a/src/components/DropOption/DropOption.js b/src/components/DropOption/DropOption.js index 995c26b..3fe6d85 100644 --- a/src/components/DropOption/DropOption.js +++ b/src/components/DropOption/DropOption.js @@ -1,4 +1,5 @@ -import React, { PropTypes } from 'react' +import React from 'react' +import PropTypes from 'prop-types' import { Dropdown, Button, Icon, Menu } from 'antd' const DropOption = ({ onMenuClick, menuOptions = [], buttonStyle, dropdownProps }) => { diff --git a/src/components/Iconfont/Iconfont.js b/src/components/Iconfont/Iconfont.js index 66a159b..ddfa17f 100644 --- a/src/components/Iconfont/Iconfont.js +++ b/src/components/Iconfont/Iconfont.js @@ -1,4 +1,5 @@ -import React, { PropTypes } from 'react' +import React from 'react' +import PropTypes from 'prop-types' import './iconfont.less' const Iconfont = ({ type }) => { +const App = ({ children, location, dispatch, app, loading }) => { + console.log(loading) const { user, siderFold, darkTheme, isNavbar, menuPopoverVisible, navOpenKeys } = app const headerProps = { @@ -81,6 +83,7 @@ App.propTypes = { location: PropTypes.object, dispatch: PropTypes.func, app: PropTypes.object, + loading: PropTypes.object, } -export default connect(({ app }) => ({ app }))(App) +export default connect(({ app, loading }) => ({ app, loading }))(App) diff --git a/src/routes/chart/Container.js b/src/routes/chart/Container.js index 104e4b2..ac36f9b 100644 --- a/src/routes/chart/Container.js +++ b/src/routes/chart/Container.js @@ -1,4 +1,5 @@ -import React, { PropTypes } from 'react' +import React from 'react' +import PropTypes from 'prop-types' import styles from './Container.less' import { ResponsiveContainer } from 'recharts' diff --git a/src/routes/chart/barChart/index.js b/src/routes/chart/barChart/index.js index fd083c1..0fff5fb 100644 --- a/src/routes/chart/barChart/index.js +++ b/src/routes/chart/barChart/index.js @@ -1,4 +1,5 @@ -import React, { PropTypes } from 'react' +import React from 'react' +import PropTypes from 'prop-types' import { Row, Col, Card, Button } from 'antd' import Container from '../Container' import { diff --git a/src/routes/chart/lineChart/index.js b/src/routes/chart/lineChart/index.js index c363fb1..e45f73b 100644 --- a/src/routes/chart/lineChart/index.js +++ b/src/routes/chart/lineChart/index.js @@ -1,4 +1,5 @@ -import React, { PropTypes } from 'react' +import React from 'react' +import PropTypes from 'prop-types' import { Row, Col, Card, Button } from 'antd' import Container from '../Container' import { diff --git a/src/routes/dashboard/components/browser.js b/src/routes/dashboard/components/browser.js index fa5b794..6daeab9 100644 --- a/src/routes/dashboard/components/browser.js +++ b/src/routes/dashboard/components/browser.js @@ -1,4 +1,5 @@ -import React, { PropTypes } from 'react' +import React from 'react' +import PropTypes from 'prop-types' import { Table, Tag } from 'antd' import styles from './browser.less' import { color } from '../../../utils' diff --git a/src/routes/dashboard/components/comments.js b/src/routes/dashboard/components/comments.js index b8c71f8..dea3642 100644 --- a/src/routes/dashboard/components/comments.js +++ b/src/routes/dashboard/components/comments.js @@ -1,4 +1,5 @@ -import React, { PropTypes } from 'react' +import React from 'react' +import PropTypes from 'prop-types' import { Table, Tag } from 'antd' import styles from './comments.less' import { color } from '../../../utils' diff --git a/src/routes/dashboard/components/completed.js b/src/routes/dashboard/components/completed.js index b2ac636..1eef236 100644 --- a/src/routes/dashboard/components/completed.js +++ b/src/routes/dashboard/components/completed.js @@ -1,4 +1,5 @@ -import React, { PropTypes } from 'react' +import React from 'react' +import PropTypes from 'prop-types' import styles from './completed.less' import classnames from 'classnames' import { color } from '../../../utils' diff --git a/src/routes/dashboard/components/cpu.js b/src/routes/dashboard/components/cpu.js index 860d79c..b6102ea 100644 --- a/src/routes/dashboard/components/cpu.js +++ b/src/routes/dashboard/components/cpu.js @@ -1,4 +1,5 @@ -import React, { PropTypes } from 'react' +import React from 'react' +import PropTypes from 'prop-types' import styles from './cpu.less' import { color } from '../../../utils' import CountUp from 'react-countup' diff --git a/src/routes/dashboard/components/numberCard.js b/src/routes/dashboard/components/numberCard.js index 26c09f8..8c2491e 100644 --- a/src/routes/dashboard/components/numberCard.js +++ b/src/routes/dashboard/components/numberCard.js @@ -1,4 +1,5 @@ -import React, { PropTypes } from 'react' +import React from 'react' +import PropTypes from 'prop-types' import { Icon, Card } from 'antd' import CountUp from 'react-countup' import styles from './numberCard.less' diff --git a/src/routes/dashboard/components/quote.js b/src/routes/dashboard/components/quote.js index 240d244..709ce9a 100644 --- a/src/routes/dashboard/components/quote.js +++ b/src/routes/dashboard/components/quote.js @@ -1,4 +1,5 @@ -import React, { PropTypes } from 'react' +import React from 'react' +import PropTypes from 'prop-types' import styles from './quote.less' function Quote ({ name, content, title, avatar }) { diff --git a/src/routes/dashboard/components/recentSales.js b/src/routes/dashboard/components/recentSales.js index af1e9c3..cdbe213 100644 --- a/src/routes/dashboard/components/recentSales.js +++ b/src/routes/dashboard/components/recentSales.js @@ -1,4 +1,5 @@ -import React, { PropTypes } from 'react' +import React from 'react' +import PropTypes from 'prop-types' import { Table, Tag } from 'antd' import styles from './recentSales.less' import { color } from '../../../utils' diff --git a/src/routes/dashboard/components/sales.js b/src/routes/dashboard/components/sales.js index 1c73623..b761cc7 100644 --- a/src/routes/dashboard/components/sales.js +++ b/src/routes/dashboard/components/sales.js @@ -1,4 +1,5 @@ -import React, { PropTypes } from 'react' +import React from 'react' +import PropTypes from 'prop-types' import styles from './sales.less' import classnames from 'classnames' import { color } from '../../../utils' diff --git a/src/routes/dashboard/components/user.js b/src/routes/dashboard/components/user.js index 68cc411..af483b5 100644 --- a/src/routes/dashboard/components/user.js +++ b/src/routes/dashboard/components/user.js @@ -1,4 +1,5 @@ -import React, { PropTypes } from 'react' +import React from 'react' +import PropTypes from 'prop-types' import { Button } from 'antd' import styles from './user.less' import CountUp from 'react-countup' diff --git a/src/routes/dashboard/components/weather.js b/src/routes/dashboard/components/weather.js index b11a060..09a7ec6 100644 --- a/src/routes/dashboard/components/weather.js +++ b/src/routes/dashboard/components/weather.js @@ -1,4 +1,5 @@ -import React, { PropTypes } from 'react' +import React from 'react' +import PropTypes from 'prop-types' import styles from './weather.less' function Weather ({ city, icon, dateTime, temperature, name }) { diff --git a/src/routes/dashboard/index.js b/src/routes/dashboard/index.js index e71958b..eeee8e6 100644 --- a/src/routes/dashboard/index.js +++ b/src/routes/dashboard/index.js @@ -1,4 +1,5 @@ -import React, { PropTypes } from 'react' +import React from 'react' +import PropTypes from 'prop-types' import { connect } from 'dva' import { Row, Col, Card } from 'antd' import { NumberCard, Quote, Sales, Weather, RecentSales, Comments, Completed, Browser, Cpu, User } from './components' diff --git a/src/routes/login/index.js b/src/routes/login/index.js index 8ed54b8..ee5e98f 100644 --- a/src/routes/login/index.js +++ b/src/routes/login/index.js @@ -1,4 +1,5 @@ -import React, { PropTypes } from 'react' +import React from 'react' +import PropTypes from 'prop-types' import { connect } from 'dva' import { Button, Row, Form, Input } from 'antd' import { config } from '../../utils' diff --git a/src/routes/users/UserFilter.js b/src/routes/users/UserFilter.js index 0f9b972..7fea2c7 100644 --- a/src/routes/users/UserFilter.js +++ b/src/routes/users/UserFilter.js @@ -1,4 +1,5 @@ -import React, { PropTypes } from 'react' +import React from 'react' +import PropTypes from 'prop-types' import { Form, Button, Row, Col, Switch } from 'antd' import { Search } from '../../components' diff --git a/src/routes/users/UserList.js b/src/routes/users/UserList.js index 2817109..c2913ab 100644 --- a/src/routes/users/UserList.js +++ b/src/routes/users/UserList.js @@ -1,4 +1,5 @@ -import React, { PropTypes } from 'react' +import React from 'react' +import PropTypes from 'prop-types' import { Table, Modal } from 'antd' import styles from './UserList.less' import classnames from 'classnames' diff --git a/src/routes/users/UserModal.js b/src/routes/users/UserModal.js index 6d8eef1..2a67af9 100644 --- a/src/routes/users/UserModal.js +++ b/src/routes/users/UserModal.js @@ -1,4 +1,5 @@ -import React, { PropTypes } from 'react' +import React from 'react' +import PropTypes from 'prop-types' import { Form, Input, InputNumber, Radio, Modal } from 'antd' const FormItem = Form.Item diff --git a/src/routes/users/index.js b/src/routes/users/index.js index 494f47d..b8c7530 100644 --- a/src/routes/users/index.js +++ b/src/routes/users/index.js @@ -1,4 +1,5 @@ -import React, { PropTypes } from 'react' +import React from 'react' +import PropTypes from 'prop-types' import { routerRedux } from 'dva/router' import { connect } from 'dva' import UserList from './UserList' diff --git a/src/services/app.js b/src/services/app.js index c4a62d4..c34e173 100644 --- a/src/services/app.js +++ b/src/services/app.js @@ -1,10 +1,10 @@ import { request, config } from '../utils' const { api } = config -const { userInfo, userLogout } = api +const { userInfo, userLogout, userLogin } = api export async function login (params) { return request({ - url: '/api/login', + url: userLogin, method: 'post', data: params, }) diff --git a/webpack.configtest.js b/webpack.configtest.js deleted file mode 100644 index 88576a1..0000000 --- a/webpack.configtest.js +++ /dev/null @@ -1,50 +0,0 @@ -const webpack = require('atool-build/lib/webpack') - -module.exports = function (webpackConfig, env) { - webpackConfig.babel.plugins.push('transform-runtime') - webpackConfig.babel.plugins.push(['import', { - libraryName: 'antd', - style: true, - }]) - - // Support hmr - if (env === 'development') { - webpackConfig.devtool = '#eval' - webpackConfig.babel.plugins.push(['dva-hmr', { - entries: [ - './src/index.js', - ], - }]) - } else { - webpackConfig.babel.plugins.push('dev-expression') - webpackConfig.entry = { index: './src/_index.js' } - } - - // Don't extract common.js and common.css - webpackConfig.plugins = webpackConfig.plugins.filter((plugin) => { - return !(plugin instanceof webpack.optimize.CommonsChunkPlugin) - }) - - // Support CSS Modules - // Parse all less files as css module. - webpackConfig.module.loaders.forEach((loader) => { - if (typeof loader.test === 'function' && loader.test.toString().indexOf('\\.less$') > -1) { - loader.include = /node_modules/ - loader.test = /\.less$/ - } - if (loader.test.toString() === '/\\.module\\.less$/') { - loader.exclude = /node_modules/ - loader.test = /\.less$/ - } - if (typeof loader.test === 'function' && loader.test.toString().indexOf('\\.css$') > -1) { - loader.include = /node_modules/ - loader.test = /\.css$/ - } - if (loader.test.toString() === '/\\.module\\.css$/') { - loader.exclude = /node_modules/ - loader.test = /\.css$/ - } - }) - - return webpackConfig -} From cfd0172204f2358263cdd85320759987f0937c3f Mon Sep 17 00:00:00 2001 From: zuiidea Date: Wed, 19 Apr 2017 19:10:20 +0800 Subject: [PATCH 2/4] error message --- src/index.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/index.js b/src/index.js index c376dc0..7cd2a9f 100644 --- a/src/index.js +++ b/src/index.js @@ -3,13 +3,14 @@ import 'babel-polyfill' import dva from 'dva' import createLoading from 'dva-loading' import { browserHistory } from 'dva/router' +import { message } from 'antd' // 1. Initialize const app = dva({ ...createLoading(), history: browserHistory, onError (error) { - console.error('app onError -- ', error) + message.error(error.message) }, }) From b6c3cb8a53b846af761400f9ee8c4f66ca226fcd Mon Sep 17 00:00:00 2001 From: zuiidea Date: Thu, 20 Apr 2017 19:26:17 +0800 Subject: [PATCH 3/4] rebuild bread,menu,router --- package.json | 1 + src/components/Layout/Bread.js | 68 +++++------ src/components/Layout/Header.js | 4 +- src/components/Layout/Menu.js | 57 +++++---- src/components/Layout/Sider.js | 4 +- src/routes/app.js | 14 ++- src/utils/index.js | 49 ++++++++ src/utils/menu.js | 199 ++++++++++++++++++++------------ 8 files changed, 251 insertions(+), 145 deletions(-) diff --git a/package.json b/package.json index 6505ae9..62184ae 100644 --- a/package.json +++ b/package.json @@ -35,6 +35,7 @@ "jsonp": "^0.2.1", "less-vars-to-js": "^1.1.2", "mockjs": "^1.0.1-beta3", + "path-to-regexp": "^1.7.0", "rc-tween-one": "^1.0.0", "redbox-react": "^1.2.10" }, diff --git a/src/components/Layout/Bread.js b/src/components/Layout/Bread.js index 25422ae..43003a7 100644 --- a/src/components/Layout/Bread.js +++ b/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 (
首页
) + } - 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 = ( - {pathSet[item].icon - ? - : ''}{pathSet[item].name} + {item.icon + ? + : ''}{item.name} ) return ( - {((breadsArray.length - 1) !== key && pathSet[item].clickable) - ? + {((pathArray.length - 1) !== key) + ? {content} : content} @@ -53,12 +50,6 @@ function Bread ({ location }) { return (
- - - - Home - - {breads}
@@ -66,6 +57,7 @@ function Bread ({ location }) { } Bread.propTypes = { + menu: PropTypes.array, location: PropTypes.object, } diff --git a/src/components/Layout/Header.js b/src/components/Layout/Header.js index 505eeb1..97ef337 100644 --- a/src/components/Layout/Header.js +++ b/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, diff --git a/src/components/Layout/Menu.js b/src/components/Layout/Menu.js index 353aeb1..520e305 100644 --- a/src/components/Layout/Menu.js +++ b/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 ( + + {item.icon && } + {(!siderFoldN || menuTree.indexOf(item) < 0) && item.name} + } + > + {getMenus(item.chindren, siderFoldN)} + + ) + } return ( - {item.icon ? : ''}{siderFold && topMenus.indexOf(item.key) >= 0 ? '' : item.name}}> - {getMenus(item.child, siderFold, `${linkTo}/`)} - + + + {item.icon && } + {(!siderFoldN || menuTree.indexOf(item) < 0) && item.name} + + ) - } - return ( - - - {item.icon ? : ''} - {siderFold && topMenus.indexOf(item.key) >= 0 ? '' : item.name} - - - ) - }) -} + }) + } + 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} @@ -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, diff --git a/src/components/Layout/Sider.js b/src/components/Layout/Sider.js index 7fb1869..3184d40 100644 --- a/src/components/Layout/Sider.js +++ b/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, diff --git a/src/routes/app.js b/src/routes/app.js index 6d1bad9..c5857d3 100644 --- a/src/routes/app.js +++ b/src/routes/app.js @@ -2,17 +2,17 @@ import React from 'react' import PropTypes from 'prop-types' import { connect } from 'dva' import { Layout } from '../components' -import { classnames, config } from '../utils' +import { classnames, config, menu } from '../utils' import { Helmet } from 'react-helmet' import '../themes/index.less' const { Header, Bread, Footer, Sider, styles } = Layout -const App = ({ children, location, dispatch, app, loading }) => { - console.log(loading) +const App = ({ children, location, dispatch, app }) => { const { user, siderFold, darkTheme, isNavbar, menuPopoverVisible, navOpenKeys } = app const headerProps = { + menu, user, siderFold, location, @@ -34,6 +34,7 @@ const App = ({ children, location, dispatch, app, loading }) => { } const siderProps = { + menu, siderFold, darkTheme, location, @@ -47,6 +48,10 @@ const App = ({ children, location, dispatch, app, loading }) => { }, } + const breadProps = { + menu, + } + if (config.openPages && config.openPages.indexOf(location.pathname) > -1) { return
{children}
} @@ -65,7 +70,7 @@ const App = ({ children, location, dispatch, app, loading }) => { : ''}
- +
{children} @@ -83,7 +88,6 @@ App.propTypes = { location: PropTypes.object, dispatch: PropTypes.func, app: PropTypes.object, - loading: PropTypes.object, } export default connect(({ app, loading }) => ({ app, loading }))(App) diff --git a/src/utils/index.js b/src/utils/index.js index b124624..e1e812c 100644 --- a/src/utils/index.js +++ b/src/utils/index.js @@ -3,6 +3,7 @@ import menu from './menu' import request from './request' import classnames from 'classnames' import { color } from './theme' +import lodash from 'lodash' // 连字符转驼峰 String.prototype.hyphenToHump = function () { @@ -52,6 +53,52 @@ const queryURL = (name) => { return null } +/** + * 数组内查询 + * @param {array} array + * @param {String} id + * @param {String} keyAlias + * @return {Array} + */ +const queryArray = (array, key, keyAlias = 'key') => { + if (!(array instanceof Array)) { + return null + } + const item = array.filter(_ => _[keyAlias] === key) + if (item.length) { + return item[0] + } + return null +} + +/** + * 数组格式转树状结构 + * @param {array} array + * @param {String} id + * @param {String} pid + * @param {String} children + * @return {Array} + */ +const arrayToTree = (array, id = 'id', pid = 'pid', chindren = 'chindren') => { + let data = lodash.cloneDeep(array) + let result = [] + let hash = {} + data.forEach((item, index) => { + hash[data[index][id]] = data[index] + }) + + data.forEach((item) => { + let hashVP = hash[item[pid]] + if (hashVP) { + !hashVP[chindren] && (hashVP[chindren] = []) + hashVP[chindren].push(item) + } else { + result.push(item) + } + }) + return result +} + module.exports = { config, menu, @@ -59,4 +106,6 @@ module.exports = { color, classnames, queryURL, + queryArray, + arrayToTree, } diff --git a/src/utils/menu.js b/src/utils/menu.js index 3f815c7..9169872 100644 --- a/src/utils/menu.js +++ b/src/utils/menu.js @@ -1,102 +1,147 @@ module.exports = [ { - key: 'dashboard', - name: 'Dashboard', + id: 1, icon: 'laptop', + name: 'Dashboard', + router: '/dashboard', }, { - key: 'users', + id: 2, + bpid: 1, name: 'User Manage', icon: 'user', + router: '/users', }, { - key: 'request', + id: 3, + bpid: 1, name: 'Request', icon: 'api', + router: '/request', }, { - key: 'UIElement', + id: 4, + bpid: 1, name: 'UI Element', icon: 'camera-o', - clickable: false, - child: [ - { - key: 'iconfont', - name: 'IconFont', - icon: 'heart-o', - }, - { - key: 'dataTable', - name: 'DataTable', - icon: 'database', - }, - { - key: 'dropOption', - name: 'DropOption', - icon: 'bars', - }, - { - key: 'search', - name: 'Search', - icon: 'search', - }, - { - key: 'editor', - name: 'Editor', - icon: 'edit', - }, - { - key: 'layer', - name: 'layer (Function)', - icon: 'credit-card', - }, - ], }, { - key: 'chart', + id: 41, + bpid: 4, + mpid: 4, + name: 'IconFont', + icon: 'heart-o', + router: '/UIElement/iconfont', + }, + { + id: 42, + bpid: 4, + mpid: 4, + name: 'DataTable', + icon: 'database', + router: '/UIElement/dataTable', + }, + { + id: 43, + bpid: 4, + mpid: 4, + name: 'DropOption', + icon: 'bars', + router: '/UIElement/dropOption', + }, + { + id: 44, + bpid: 4, + mpid: 4, + name: 'Search', + icon: 'search', + router: '/UIElement/search', + }, + { + id: 45, + bpid: 4, + mpid: 4, + name: 'Editor', + icon: 'edit', + router: '/UIElement/editor', + }, + { + id: 46, + bpid: 4, + mpid: 4, + name: 'layer (Function)', + icon: 'credit-card', + router: '/UIElement/layer', + }, + { + id: 5, + bpid: 1, name: 'Recharts', icon: 'code-o', - child: [ - { - key: 'lineChart', - name: 'LineChart', - icon: 'line-chart', - }, - { - key: 'barChart', - name: 'BarChart', - icon: 'bar-chart', - }, - { - key: 'areaChart', - name: 'AreaChart', - icon: 'area-chart', - }, - ], }, { - key: 'navigation', + id: 51, + bpid: 5, + mpid: 5, + name: 'LineChart', + icon: 'line-chart', + router: '/chart/lineChart', + }, + { + id: 52, + bpid: 5, + mpid: 5, + name: 'BarChart', + icon: 'bar-chart', + router: '/chart/lineChart', + }, + { + id: 53, + bpid: 5, + mpid: 5, + name: 'AreaChart', + icon: 'area-chart', + router: '/chart/areaChart', + }, + { + id: 6, + bpid: 1, name: 'Test Navigation', icon: 'setting', - child: [ - { - key: 'navigation1', - name: 'Test Navigation1', - }, - { - key: 'navigation2', - name: 'Test Navigation2', - child: [ - { - key: 'navigation21', - name: 'Test Navigation21', - }, - { - key: 'navigation22', - name: 'Test Navigation22', - }, - ], - }, - ], + }, + { + id: 61, + bpid: 6, + mpid: 6, + name: 'Test Navigation1', + router: '/navigation/navigation1', + }, + { + id: 62, + bpid: 6, + mpid: 6, + name: 'Test Navigation2', + router: '/navigation/navigation2', + }, + { + id: 621, + bpid: 62, + mpid: 62, + name: 'Test Navigation21', + router: '/navigation/navigation2/navigation1', + }, + { + id: 621, + bpid: 62, + mpid: 62, + name: 'Test Navigation21', + router: '/navigation/navigation2/navigation1', + }, + { + id: 622, + bpid: 62, + mpid: 62, + name: 'Test Navigation22', + router: '/navigation/navigation2/navigation2', }, ] From 4c6deb49d34372c19e002bf20b84f841eef2cf62 Mon Sep 17 00:00:00 2001 From: zuiidea Date: Fri, 21 Apr 2017 10:47:55 +0800 Subject: [PATCH 4/4] fix menu open --- src/components/Layout/Menu.js | 20 ++++++++++++++++---- src/models/app.js | 1 - src/utils/menu.js | 7 ------- 3 files changed, 16 insertions(+), 12 deletions(-) diff --git a/src/components/Layout/Menu.js b/src/components/Layout/Menu.js index 520e305..b050659 100644 --- a/src/components/Layout/Menu.js +++ b/src/components/Layout/Menu.js @@ -7,12 +7,15 @@ import { arrayToTree } from '../../utils' const Menus = ({ siderFold, darkTheme, location, handleClickNavMenu, navOpenKeys, changeOpenKeys, menu }) => { // 生成树状 const menuTree = arrayToTree(menu.filter(_ => _.mpid !== -1), 'id', 'mpid') - + const levelMap = {} // 递归生成菜单 const getMenus = (menuTreeN, siderFoldN) => { return menuTreeN.map(item => { if (item.chindren) { + if (item.mpid) { + levelMap[item.id] = item.mpid + } return ( { - const map = { - '/navigation/navigation2': ['/navigation'], + let map = {} + const getParent = (index) => { + const result = [String(levelMap[index])] + if (levelMap[result[0]]) { + result.unshift(getParent(result[0])[0]) + } + return result + } + for (let index in levelMap) { + if ({}.hasOwnProperty.call(levelMap, index)) { + map[index] = getParent(index) + } } return map[key] || [] } diff --git a/src/models/app.js b/src/models/app.js index 78536a3..0dca356 100644 --- a/src/models/app.js +++ b/src/models/app.js @@ -133,7 +133,6 @@ export default { } }, handleNavOpenKeys (state, { payload: navOpenKeys }) { - console.log(navOpenKeys) return { ...state, ...navOpenKeys, diff --git a/src/utils/menu.js b/src/utils/menu.js index 9169872..e25cfac 100644 --- a/src/utils/menu.js +++ b/src/utils/menu.js @@ -130,13 +130,6 @@ module.exports = [ name: 'Test Navigation21', router: '/navigation/navigation2/navigation1', }, - { - id: 621, - bpid: 62, - mpid: 62, - name: 'Test Navigation21', - router: '/navigation/navigation2/navigation1', - }, { id: 622, bpid: 62,