From 042b4c728e977a58efccaca2369966bd073ee33e Mon Sep 17 00:00:00 2001 From: zuiidea Date: Mon, 17 Oct 2016 20:40:36 +0800 Subject: [PATCH] user datas --- mock/users.js | 10 ++- src/components/layout/common.less | 32 ++++++++ src/components/users/list.jsx | 124 +++++++++++++++++++----------- src/components/users/list.less | 3 + src/models/users.js | 15 +++- src/routes/Users.jsx | 10 ++- src/services/users.js | 1 + 7 files changed, 138 insertions(+), 57 deletions(-) create mode 100644 src/components/users/list.less diff --git a/mock/users.js b/mock/users.js index eb7bf79..37e60e4 100644 --- a/mock/users.js +++ b/mock/users.js @@ -10,8 +10,14 @@ if (!global.tableListData) { 'data|100': [{ 'id|+1': 1, name: '@cname', + nickName:'@name', + phone:/^1[34578]\d{9}$/, 'age|11-99': 1, - address: '@region' + address: '@county(true)', + isMale:'@boolean', + email:'@email', + createTime:'@datetime', + avatar:mockjs.Random.image('100x100'), }], page: { total: 100, @@ -28,7 +34,7 @@ module.exports = { 'GET /api/users' (req, res) { const page = qs.parse(req.query) - const pageSize = page.pageSize || 10 + const pageSize = page.pageSize || 20 const currentPage = page.page || 1 let data diff --git a/src/components/layout/common.less b/src/components/layout/common.less index 22cada1..c4479de 100644 --- a/src/components/layout/common.less +++ b/src/components/layout/common.less @@ -48,3 +48,35 @@ body { margin-left: 4px; } } + +:global .ant-table { + .ant-table-thead > tr > th { + text-align: center; + } + + .ant-table-tbody > tr > td { + text-align: center; + } + + &.ant-table-small { + .ant-table-thead > tr > th { + background: #f7f7f7; + } + + .ant-table-body > table { + padding: 0; + } + } +} + +:global .ant-table-pagination { + float: none!important; + display: table; + margin: 16px auto !important; +} + +:global .ant-popover-inner { + border: none; + border-radius: 0; + box-shadow: 0 0 20px rgba(100, 100, 100, 0.2); +} diff --git a/src/components/users/list.jsx b/src/components/users/list.jsx index 7862673..059506a 100644 --- a/src/components/users/list.jsx +++ b/src/components/users/list.jsx @@ -1,55 +1,86 @@ -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 UserList({ - total, current, loading, dataSource, + loading, + dataSource, + pagination, onPageChange, onDeleteItem, - onEditItem, - }) { - const columns = [{ - title: '姓名', - dataIndex: 'name', - key: 'name', - render: (text) => {text}, - }, { - title: '年龄', - dataIndex: 'age', - key: 'age', - }, { - title: '住址', - dataIndex: 'address', - key: 'address', - }, { - title: '操作', - key: 'operation', - render: (text, record) => ( -

- onEditItem(record)}>编辑 -   - onDeleteItem(record.id)}> - 删除 - -

- ), - }] + onEditItem +}) { + const columns = [ + { + title: '头像', + dataIndex: 'avatar', + key: 'avatar', + width: 64, + className: styles.avatar, + render: (text) => + }, { + title: '姓名', + dataIndex: 'name', + key: 'name' + }, { + title: '昵称', + dataIndex: 'nickName', + key: 'nickName' + },{ + title: '年龄', + dataIndex: 'age', + key: 'age', + render: (text) => {text}岁 + }, { + title: '性别', + dataIndex: 'isMale', + key: 'isMale', + render: (text) => {text + ? '男' + : '女'} + },{ + title: '电话', + dataIndex: 'phone', + key: 'phone' + },{ + title: '邮箱', + dataIndex: 'email', + key: 'email' + }, { + title: '住址', + dataIndex: 'address', + key: 'address' + }, { + title: '创建时间', + dataIndex: 'createTime', + key: 'createTime' + }, { + title: '操作', + key: 'operation', + width: 100, + render: (text, record) => ( +

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

+ ) + } + ] return (
- record.id} - pagination={false} - /> - +
record.id}/> ) } @@ -60,8 +91,7 @@ UserList.propTypes = { onEditItem: PropTypes.func, dataSource: PropTypes.array, loading: PropTypes.any, - total: PropTypes.any, - current: PropTypes.any, + pagination: PropTypes.any } export default UserList diff --git a/src/components/users/list.less b/src/components/users/list.less new file mode 100644 index 0000000..3e3a65a --- /dev/null +++ b/src/components/users/list.less @@ -0,0 +1,3 @@ +.avatar{ + line-height: 1; +} diff --git a/src/models/users.js b/src/models/users.js index 2e786fc..abc76e5 100644 --- a/src/models/users.js +++ b/src/models/users.js @@ -8,11 +8,16 @@ export default { state: { list: [], loading: false, - total: null, - current: 1, currentItem: {}, modalVisible: false, modalType: 'create', + pagination:{ + showSizeChanger: true, + showQuickJumper: true, + showTotal: total => `共 ${total} 条`, + current:1, + total:null, + } }, subscriptions: { @@ -37,8 +42,10 @@ export default { type: 'querySuccess', payload: { list: data.data, - total: data.page.total, - current: data.page.current, + pagination:{ + total: data.page.total, + current: data.page.current, + } }, }) } diff --git a/src/routes/Users.jsx b/src/routes/Users.jsx index 735dfcf..8daf504 100644 --- a/src/routes/Users.jsx +++ b/src/routes/Users.jsx @@ -9,7 +9,7 @@ import UserModal from '../components/users/modal' function Users({ location, dispatch, users }) { const { - loading, list, total, current, + loading, list, total, current, pagination, currentItem, modalVisible, modalType, } = users @@ -35,12 +35,14 @@ function Users({ location, dispatch, users }) { const userListProps = { dataSource: list, loading, - total, - current, + pagination:pagination, onPageChange(page) { dispatch(routerRedux.push({ pathname: '/users', - query: { page }, + query: { + page:page.current, + pageSize:page.pageSize + }, })) }, onDeleteItem(id) { diff --git a/src/services/users.js b/src/services/users.js index 35c5376..f55a897 100644 --- a/src/services/users.js +++ b/src/services/users.js @@ -2,6 +2,7 @@ import { request } from '../utils' import qs from 'qs' export async function query(params) { + console.log(params); return request(`/api/users?${qs.stringify(params)}`) }