From ace8c2568f36ca5d7f7dbb336234731fc3a542e1 Mon Sep 17 00:00:00 2001 From: zuiidea Date: Thu, 24 Nov 2016 14:19:23 +0800 Subject: [PATCH] dashbord --- package.json | 2 +- src/components/Layout/Header.jsx | 22 +++---- src/components/dashboard/numberCard.js | 12 ++-- src/components/dashboard/numberCard.less | 4 +- src/components/layout/bread.jsx | 24 ++++---- src/components/layout/footer.jsx | 4 +- src/components/layout/main.less | 7 ++- src/components/layout/sider.jsx | 26 ++++---- src/components/users/list.jsx | 55 ++++++++--------- src/components/users/modal.jsx | 76 ++++++++++++------------ src/components/users/search.jsx | 16 ++--- src/router.js | 2 +- src/routes/app.js | 1 + src/routes/error.js | 8 ++- src/routes/users.js | 2 +- 15 files changed, 135 insertions(+), 126 deletions(-) diff --git a/package.json b/package.json index a9543db..c11c1eb 100644 --- a/package.json +++ b/package.json @@ -38,7 +38,7 @@ "scripts": { "start": "dora --plugins \"proxy,webpack,webpack-hmr\"", "dev": "dora --plugins \"webpack,webpack-hmr\"", - "lint": "eslint --fix --ext .js,.jsx .", + "lint": "eslint --fix --ext .js,.jsx src/components/layout", "build": "atool-build" } } diff --git a/src/components/Layout/Header.jsx b/src/components/Layout/Header.jsx index b37e5f9..c9cf68a 100644 --- a/src/components/Layout/Header.jsx +++ b/src/components/Layout/Header.jsx @@ -1,22 +1,22 @@ -import React, {PropTypes} from 'react' -import {Menu, Icon} from 'antd' -import {Link} from 'dva/router' +import React, { PropTypes } from 'react' +import { Menu, Icon } from 'antd' +import { Link } from 'dva/router' import styles from './main.less' const SubMenu = Menu.SubMenu -function Header({location,user,logout}) { - function handleClickMenu(item){ - if(item.key=='logout'){ +function Header({ location, user, logout }) { + function handleClickMenu(item) { + if (item.key === 'logout') { logout() } } return (
- - {user.name}< /span>}> + + {user.name}} + > 注销 @@ -27,7 +27,7 @@ function Header({location,user,logout}) { } Header.propTypes = { - location: PropTypes.object + location: PropTypes.object, } export default Header diff --git a/src/components/dashboard/numberCard.js b/src/components/dashboard/numberCard.js index f9ecc9b..47fc635 100644 --- a/src/components/dashboard/numberCard.js +++ b/src/components/dashboard/numberCard.js @@ -1,15 +1,15 @@ -import React, {PropTypes} from 'react' -import {Icon} from 'antd' +import React, { PropTypes } from 'react' +import { Icon } from 'antd' import styles from './numberCard.less' function NumberCard(props) { - const {icon, color, title, number} = props + const { icon, color, title, number } = props return (
- +
-

{title||'No Title'}

-

{number||'10,000'}

+

{title || 'No Title'}

+

{number || '10,000'}

) diff --git a/src/components/dashboard/numberCard.less b/src/components/dashboard/numberCard.less index 8ae4fc8..0f981ac 100644 --- a/src/components/dashboard/numberCard.less +++ b/src/components/dashboard/numberCard.less @@ -1,7 +1,9 @@ .numberCard{ - box-shadow: 2px 2px 10px 0 rgba(0,0,0,0.05); + box-shadow: 2px 2px 10px 0 rgba(0,0,0,0.01); padding: 32px; font-family: monospace; + background-color: #fff; + margin-bottom: 24px; .iconWarp{ font-size: 54px; float: left; diff --git a/src/components/layout/bread.jsx b/src/components/layout/bread.jsx index 9102f7e..cb3dbc2 100644 --- a/src/components/layout/bread.jsx +++ b/src/components/layout/bread.jsx @@ -1,16 +1,16 @@ -import React, {PropTypes} from 'react' -import {Breadcrumb, Icon} from 'antd' +import React, { PropTypes } from 'react' +import { Breadcrumb, Icon } from 'antd' import styles from './main.less' -import {config, menu} from '../../utils' +import { config, menu } from '../../utils' let pathSet = [] const getPathSet = function (menuArray, parentPath) { parentPath = parentPath || '/' menuArray.map(item => { - pathSet[(parentPath + item.key).replace(/\//g, "-").hyphenToHump()] = { + pathSet[(parentPath + item.key).replace(/\//g, '-').hyphenToHump()] = { path: parentPath + item.key, name: item.name, - icon: item.icon || '' + icon: item.icon || '', } if (!!item.child) { getPathSet(item.child, parentPath + item.key + '/') @@ -19,20 +19,20 @@ const getPathSet = function (menuArray, parentPath) { } getPathSet(menu) -function Bread({location}) { +function Bread({ location }) { let pathNames = [] location.pathname.substr(1).split('/').map((item, key) => { if (key > 0) { - pathNames.push((pathNames[key - 1] + "-" + item).hyphenToHump()) + pathNames.push((pathNames[key - 1] + '-' + item).hyphenToHump()) } else { - pathNames.push(("-" + item).hyphenToHump()) + pathNames.push(('-' + item).hyphenToHump()) } }) const breads = pathNames.map((item, key) => { return ( - + {pathSet[item].icon - ? + ? : ''} {pathSet[item].name} @@ -42,7 +42,7 @@ function Bread({location}) { return (
- + 主页 {breads} @@ -52,7 +52,7 @@ function Bread({location}) { } Bread.propTypes = { - location: PropTypes.object + location: PropTypes.object, } export default Bread diff --git a/src/components/layout/footer.jsx b/src/components/layout/footer.jsx index 3d63d6d..ce9668c 100644 --- a/src/components/layout/footer.jsx +++ b/src/components/layout/footer.jsx @@ -1,6 +1,6 @@ -import React, {PropTypes} from 'react' +import React, { PropTypes } from 'react' import styles from './main.less' -import {config} from '../../utils' +import { config } from '../../utils' const Footer = () =>
{config.footerText} diff --git a/src/components/layout/main.less b/src/components/layout/main.less index 1cb9272..0ea5ce6 100644 --- a/src/components/layout/main.less +++ b/src/components/layout/main.less @@ -62,10 +62,13 @@ margin: 24px 16px; .content { - background: #fff; - padding: 24px; min-height: e("calc(100vh - 168px)"); position: relative; + :global .content-inner{ + background: #fff; + padding: 24px; + min-height: e("calc(100vh - 168px)"); + } } } } diff --git a/src/components/layout/sider.jsx b/src/components/layout/sider.jsx index 42a6888..38f4af0 100644 --- a/src/components/layout/sider.jsx +++ b/src/components/layout/sider.jsx @@ -1,23 +1,23 @@ -import React, {PropTypes} from 'react' -import {Menu, Icon} from 'antd' +import React, { PropTypes } from 'react' +import { Menu, Icon } from 'antd' import { Link } from 'dva/router' import styles from './main.less' -import {config, menu} from '../../utils' +import { config, menu } from '../../utils' -const getMenus = function (menuArray,parentPath){ +const getMenus = function (menuArray, parentPath) { parentPath = parentPath || '/' - return menuArray.map(item =>{ - if(!!item.child){ + return menuArray.map(item => { + if (!!item.child) { return ( - {item.icon ? : ''} {item.name}}> - {getMenus(item.child,parentPath + item.key + '/')} + {item.icon ? : ''} {item.name}}> + {getMenus(item.child, parentPath + item.key + '/')} ) - }else { + } else { return ( - {item.icon ? : ''} + {item.icon ? : ''} {item.name} @@ -26,11 +26,11 @@ const getMenus = function (menuArray,parentPath){ }) } -function Sider({location}) { +function Sider({ location }) { return (
- + {config.logoText}
@@ -41,7 +41,7 @@ function Sider({location}) { } Sider.propTypes = { - location: PropTypes.object + location: PropTypes.object, } export default Sider diff --git a/src/components/users/list.jsx b/src/components/users/list.jsx index 1a376d1..8f33e74 100644 --- a/src/components/users/list.jsx +++ b/src/components/users/list.jsx @@ -1,5 +1,5 @@ -import React, {PropTypes} from 'react' -import {Table, Popconfirm, Pagination} from 'antd' +import React, { PropTypes } from 'react' +import { Table, Popconfirm, Pagination } from 'antd' import styles from './list.less' function list({ @@ -8,7 +8,7 @@ function list({ pagination, onPageChange, onDeleteItem, - onEditItem + onEditItem, }) { const columns = [ { @@ -17,43 +17,43 @@ function list({ key: 'avatar', width: 64, className: styles.avatar, - render: (text) => + render: (text) => , }, { title: '姓名', dataIndex: 'name', - key: 'name' + key: 'name', }, { title: '昵称', dataIndex: 'nickName', - key: 'nickName' - },{ + key: 'nickName', + }, { title: '年龄', dataIndex: 'age', key: 'age', - render: (text) => {text}岁 + render: (text) => {text}岁, }, { title: '性别', dataIndex: 'isMale', key: 'isMale', render: (text) => {text ? '男' - : '女'} - },{ + : '女'}, + }, { title: '电话', dataIndex: 'phone', - key: 'phone' - },{ + key: 'phone', + }, { title: '邮箱', dataIndex: 'email', - key: 'email' + key: 'email', }, { title: '住址', dataIndex: 'address', - key: 'address' + key: 'address', }, { title: '创建时间', dataIndex: 'createTime', - key: 'createTime' + key: 'createTime', }, { title: '操作', key: 'operation', @@ -61,27 +61,28 @@ function list({ render: (text, record) => (

onEditItem(record)} style={{ - marginRight: 4 + marginRight: 4, }}>编辑 onDeleteItem(record.id)}> 删除

- ) - } + ), + }, ] return (
record.id}/> + className={styles.table} + bordered + columns={columns} + dataSource={dataSource} + loading={loading} + onChange={onPageChange} + pagination={pagination} + rowKey={record => record.id} + /> ) } @@ -92,7 +93,7 @@ list.propTypes = { onEditItem: PropTypes.func, dataSource: PropTypes.array, loading: PropTypes.any, - pagination: PropTypes.any + pagination: PropTypes.any, } export default list diff --git a/src/components/users/modal.jsx b/src/components/users/modal.jsx index b6b1bc2..9a4f921 100644 --- a/src/components/users/modal.jsx +++ b/src/components/users/modal.jsx @@ -1,14 +1,14 @@ -import React, {PropTypes} from 'react' -import {Form, Input, InputNumber, Radio, Modal} from 'antd' +import React, { PropTypes } from 'react' +import { Form, Input, InputNumber, Radio, Modal } from 'antd' const FormItem = Form.Item const formItemLayout = { labelCol: { - span: 6 + span: 6, }, wrapperCol: { - span: 14 - } + span: 14, + }, } const modal = ({ @@ -19,8 +19,8 @@ const modal = ({ form: { getFieldDecorator, validateFields, - getFieldsValue - } + getFieldsValue, + }, }) => { function handleOk() { validateFields((errors) => { @@ -29,7 +29,7 @@ const modal = ({ } const data = { ...getFieldsValue(), - key: item.key + key: item.key, } onOk(data) }) @@ -40,7 +40,7 @@ const modal = ({ visible, onOk: handleOk, onCancel, - wrapClassName: "vertical-center-modal" + wrapClassName: 'vertical-center-modal', } return ( @@ -52,10 +52,10 @@ const modal = ({ rules: [ { required: true, - message: '姓名未填写' - } - ] - })()} + message: '姓名未填写', + }, + ], + })()} {getFieldDecorator('nickName', { @@ -63,10 +63,10 @@ const modal = ({ rules: [ { required: true, - message: '昵称未填写' - } - ] - })()} + message: '昵称未填写', + }, + ], + })()} {getFieldDecorator('isMale', { @@ -75,12 +75,12 @@ const modal = ({ { required: true, type: 'boolean', - message: '请选择性别' - } - ] + message: '请选择性别', + }, + ], })( - 男 + 男 女 )} @@ -92,10 +92,10 @@ const modal = ({ { required: true, type: 'number', - message: '年龄未填写' - } - ] - })()} + message: '年龄未填写', + }, + ], + })()} {getFieldDecorator('phone', { @@ -103,10 +103,10 @@ const modal = ({ rules: [ { required: true, - message: '不能为空' - } - ] - })()} + message: '不能为空', + }, + ], + })()} {getFieldDecorator('email', { @@ -114,10 +114,10 @@ const modal = ({ rules: [ { required: true, - message: '不能为空' - } - ] - })()} + message: '不能为空', + }, + ], + })()} {getFieldDecorator('address', { @@ -125,10 +125,10 @@ const modal = ({ rules: [ { required: true, - message: '不能为空' - } - ] - })()} + message: '不能为空', + }, + ], + })()} @@ -140,7 +140,7 @@ modal.propTypes = { form: PropTypes.object, item: PropTypes.object, onOk: PropTypes.func, - onCancel: PropTypes.func + onCancel: PropTypes.func, } export default Form.create()(modal) diff --git a/src/components/users/search.jsx b/src/components/users/search.jsx index 0a64388..c6828cb 100644 --- a/src/components/users/search.jsx +++ b/src/components/users/search.jsx @@ -1,5 +1,5 @@ -import React, {PropTypes} from 'react' -import {Form, Input, Button, Select} from 'antd' +import React, { PropTypes } from 'react' +import { Form, Input, Button, Select } from 'antd' import styles from './search.less' const search = ({ @@ -10,8 +10,8 @@ const search = ({ form: { getFieldDecorator, validateFields, - getFieldsValue - } + getFieldsValue, + }, }) => { function handleSubmit(e) { e.preventDefault() @@ -29,7 +29,7 @@ const search = ({ {getFieldDecorator('field', { - initialValue: field || 'name' + initialValue: field || 'name', })( )} + initialValue: keyword || '', + })()} @@ -57,7 +57,7 @@ search.propTypes = { onSearch: PropTypes.func, onAdd: PropTypes.func, field: PropTypes.string, - keyword: PropTypes.string + keyword: PropTypes.string, } export default Form.create()(search) diff --git a/src/router.js b/src/router.js index 8f5079b..e197301 100644 --- a/src/router.js +++ b/src/router.js @@ -10,7 +10,7 @@ export default function ({ history }) { - + diff --git a/src/routes/app.js b/src/routes/app.js index 6347f2e..4d5df1e 100644 --- a/src/routes/app.js +++ b/src/routes/app.js @@ -10,6 +10,7 @@ import styles from '../components/layout/main.less' import '../components/layout/common.less' import {Spin,message} from 'antd' function App({children, location, dispatch, app}) { + console.log(children); const {login, loading, loginButtonLoading, user} = app const loginProps = { loading, diff --git a/src/routes/error.js b/src/routes/error.js index 4f2a6d5..80be194 100644 --- a/src/routes/error.js +++ b/src/routes/error.js @@ -2,9 +2,11 @@ import React from 'react' import {Icon} from 'antd' import styles from './error.less' -const Error = () =>
- -

404 Not Found

+const Error = () =>
+
+ +

404 Not Found

+
export default Error diff --git a/src/routes/users.js b/src/routes/users.js index 3b4f244..772b6d5 100644 --- a/src/routes/users.js +++ b/src/routes/users.js @@ -84,7 +84,7 @@ function Users({ location, dispatch, users }) { return ( -
+