user datas

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

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

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) => <a href="#">{text}</a>,
-  }, {
-    title: '年龄',
-    dataIndex: 'age',
-    key: 'age',
-  }, {
-    title: '住址',
-    dataIndex: 'address',
-    key: 'address',
-  }, {
-    title: '操作',
-    key: 'operation',
-    render: (text, record) => (
-      <p>
-        <a onClick={() => onEditItem(record)}>编辑</a>
-        &nbsp;
-        <Popconfirm title="确定要删除吗？" onConfirm={() => onDeleteItem(record.id)}>
-          <a>删除</a>
-        </Popconfirm>
-      </p>
-    ),
-  }]
+  onEditItem
+}) {
+  const columns = [
+    {
+      title: '头像',
+      dataIndex: 'avatar',
+      key: 'avatar',
+      width: 64,
+      className: styles.avatar,
+      render: (text) => <img width={24} src={text}/>
+    }, {
+      title: '姓名',
+      dataIndex: 'name',
+      key: 'name'
+    }, {
+      title: '昵称',
+      dataIndex: 'nickName',
+      key: 'nickName'
+    },{
+      title: '年龄',
+      dataIndex: 'age',
+      key: 'age',
+      render: (text) => <span>{text}岁</span>
+    }, {
+      title: '性别',
+      dataIndex: 'isMale',
+      key: 'isMale',
+      render: (text) => <span>{text
+            ? '男'
+            : '女'}</span>
+    },{
+      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) => (
+        <p>
+          <a onClick={() => onEditItem(record)} style={{
+            marginRight: 4
+          }}>编辑</a>
+          <Popconfirm title="确定要删除吗？" onConfirm={() => onDeleteItem(record.id)}>
+            <a>删除</a>
+          </Popconfirm>
+        </p>
+      )
+    }
+  ]
 
   return (
     <div>
-      <Table
-        columns={columns}
-        dataSource={dataSource}
-        loading={loading}
-        rowKey={record => record.id}
-        pagination={false}
-      />
-      <Pagination
-        className="ant-table-pagination"
-        total={total}
-        current={current}
-        pageSize={10}
-        onChange={onPageChange}
-      />
+      <Table size="small"
+      bordered
+      columns={columns}
+      dataSource={dataSource}
+      loading={loading}
+      onChange={onPageChange}
+      pagination={pagination}
+      rowKey={record => record.id}/>
     </div>
   )
 }
@@ -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

src/components/users/list.less

@@ -0,0 +1,3 @@
+.avatar{
+  line-height: 1;
+}

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

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

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