users

src/components/layout/common.less

@@ -80,3 +80,21 @@ body {
   border-radius: 0;
   box-shadow: 0 0 20px rgba(100, 100, 100, 0.2);
 }
+
+:global .vertical-center-modal {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  .ant-modal {
+    top: 0;
+
+    .ant-modal-body {
+      max-height: 500px;
+      overflow-y: auto;
+    }
+  }
+}
+:global .ant-form-item-control{
+  vertical-align:middle;
+}

src/components/users/list.jsx

@@ -74,6 +74,7 @@ function list({
   return (
     <div>
       <Table size="small"
+      className={styles.table}
       bordered
       columns={columns}
       dataSource={dataSource}

src/components/users/list.less

@@ -4,3 +4,8 @@
     border-radius: 50%;
   }
 }
+.table{
+  td{
+    height: 38px;
+  }
+}

src/components/users/modal.jsx

@@ -1,5 +1,5 @@
 import React, { PropTypes } from 'react'
-import { Form, Input, Modal } from 'antd'
+import { Form, Input, InputNumber, Radio, Modal } from 'antd'
 const FormItem = Form.Item
 
 const formItemLayout = {
@@ -32,19 +32,12 @@ const modal = ({
     })
   }
 
-  function checkNumber(rule, value, callback) {
-    if (!/^[\d]{1,2}$/.test(value)) {
-      callback(new Error('年龄不合法'))
-    } else {
-      callback()
-    }
-  }
-
   const modalOpts = {
     title: '修改用户',
     visible,
     onOk: handleOk,
     onCancel,
+    wrapClassName:"vertical-center-modal"
   }
 
   return (
@@ -58,12 +51,29 @@ const modal = ({
           {getFieldDecorator('name', {
             initialValue: item.name,
             rules: [
-              { required: true, message: '名称未填写' },
+              { required: true, message: '姓名未填写' },
             ],
           })(
-            <Input type="text" />
+            <Input/>
           )}
         </FormItem>
+        <FormItem
+          label="性别"
+          hasFeedback
+          {...formItemLayout}
+        >
+        {getFieldDecorator('isMale', {
+          initialValue: item.isMale,
+          rules: [
+            { required: true, message: '请选择性别' },
+          ],
+        })(
+          <Radio.Group>
+            <Radio value={true}>男</Radio>
+            <Radio value={false}>女</Radio>
+          </Radio.Group>
+        )}
+        </FormItem>
         <FormItem
           label="年龄："
           hasFeedback
@@ -71,12 +81,41 @@ const modal = ({
         >
           {getFieldDecorator('age', {
             initialValue: item.age,
-            rules: [
-              { required: true, message: '年龄未填写' },
-              { validator: checkNumber },
+            rules: [{
+              required: true,
+              type:'number',
+              message: '年龄未填写' },
             ],
           })(
-            <Input type="text" />
+            <InputNumber min={18} max={100}/>
+          )}
+        </FormItem>
+        <FormItem
+          label="电话："
+          hasFeedback
+          {...formItemLayout}
+        >
+          {getFieldDecorator('phone', {
+            initialValue: item.phone,
+            rules: [
+              { required: true, message: '不能为空' },
+            ],
+          })(
+            <Input/>
+          )}
+        </FormItem>
+        <FormItem
+          label="邮箱："
+          hasFeedback
+          {...formItemLayout}
+        >
+          {getFieldDecorator('email', {
+            initialValue: item.email,
+            rules: [
+              { required: true, message: '不能为空' },
+            ],
+          })(
+            <Input/>
           )}
         </FormItem>
         <FormItem
@@ -90,7 +129,7 @@ const modal = ({
               { required: true, message: '不能为空' },
             ],
           })(
-            <Input type="address" />
+            <Input/>
           )}
         </FormItem>
       </Form>

src/models/users.js

@@ -55,8 +55,14 @@ export default {
       const data = yield call(remove, { id: payload })
       if (data && data.success) {
         yield put({
-          type: 'deleteSuccess',
-          payload,
+          type: 'querySuccess',
+          payload: {
+            list: data.data,
+            pagination:{
+              total: data.page.total,
+              current: data.page.current,
+            }
+          },
         })
       }
     },
@@ -66,8 +72,14 @@ export default {
       const data = yield call(create, payload)
       if (data && data.success) {
         yield put({
-          type: 'createSuccess',
-          payload,
+          type: 'querySuccess',
+          payload: {
+            list: data.data,
+            pagination:{
+              total: data.page.total,
+              current: data.page.current,
+            }
+          },
         })
       }
     },
@@ -79,8 +91,14 @@ export default {
       const data = yield call(update, newUser)
       if (data && data.success) {
         yield put({
-          type: 'updateSuccess',
-          payload: newUser,
+          type: 'querySuccess',
+          payload: {
+            list: data.data,
+            pagination:{
+              total: data.page.total,
+              current: data.page.current,
+            }
+          },
         })
       }
     },
@@ -90,25 +108,6 @@ export default {
     showLoading(state) {
       return { ...state, loading: true }
     },
-    createSuccess(state, action) {
-      const newUser = action.payload
-      return { ...state, list: [newUser, ...state.list], loading: false }
-    },
-    deleteSuccess(state, action) {
-      const id = action.payload
-      const newList = state.list.filter(user => user.id !== id)
-      return { ...state, list: newList, loading: false }
-    },
-    updateSuccess(state, action) {
-      const updateUser = action.payload
-      const newList = state.list.map(user => {
-        if (user.id === updateUser.id) {
-          return { ...user, ...updateUser }
-        }
-        return user
-      })
-      return { ...state, list: newList, loading: false }
-    },
     querySuccess(state, action) {
       return { ...state, ...action.payload, loading: false }
     },

src/utils/index.js

@@ -1,7 +1,7 @@
 import config from './config'
 import menu from './menu'
 import request from './request'
-require('./mock.js');
+require('./mock.js')
 
 // 连字符转驼峰
 String.prototype.hyphenToHump = function () {

src/utils/mock.js

@@ -13,7 +13,7 @@ function serialize(str) {
 
 for (let i in mockData) {
   for (let key in mockData[i]) {
-    Mock.mock(eval("/" + key.split(" ")[1]), key.split(" ")[0].toLowerCase(), function (options) {
+    Mock.mock(eval("/"+key.split(" ")[1].replace(/\//g,"\\\/")+"/"), key.split(" ")[0].toLowerCase(), function (options) {
       options.query = !!options.url.split("?")[1] ? serialize(options.url.split("?")[1]) : (!!options.body ? serialize(options.body) : {})
       let res = {}
       let result = {}

src/utils/request.js

@@ -33,4 +33,5 @@ export default function request(url, options) {
     console.log(data);
     return data
   })
+
 }