666

README.md

@@ -59,6 +59,7 @@ npm i
 ```bash
 npm start      # 使用dora-plugin-proxy产生代理服务器
 ```
+或者
 
 ```bash
 npm run dev    # 使用mock拦截请求，数据存储在localStroge里

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,15 +19,18 @@ const modal = ({
   form: {
     getFieldDecorator,
     validateFields,
-    getFieldsValue,
-    },
-  }) => {
+    getFieldsValue
+  }
+}) => {
   function handleOk() {
     validateFields((errors) => {
       if (errors) {
         return
       }
-      const data = { ...getFieldsValue(), key: item.key }
+      const data = {
+        ...getFieldsValue(),
+        key: item.key
+      }
       onOk(data)
     })
   }
@@ -37,100 +40,95 @@ const modal = ({
     visible,
     onOk: handleOk,
     onCancel,
-    wrapClassName:"vertical-center-modal"
+    wrapClassName: "vertical-center-modal"
   }
 
   return (
     <Modal {...modalOpts}>
       <Form horizontal>
-        <FormItem
-          label="姓名："
-          hasFeedback
-          {...formItemLayout}
-        >
+        <FormItem label="姓名：" hasFeedback {...formItemLayout}>
           {getFieldDecorator('name', {
             initialValue: item.name,
             rules: [
-              { required: true, message: '姓名未填写' },
-            ],
+              {
+                required: true,
+                message: '姓名未填写'
+              }
+            ]
+          })(<Input/>)}
+        </FormItem>
+        <FormItem label="昵称：" hasFeedback {...formItemLayout}>
+          {getFieldDecorator('nickName', {
+            initialValue: item.nickName,
+            rules: [
+              {
+                required: true,
+                message: '昵称未填写'
+              }
+            ]
+          })(<Input/>)}
+        </FormItem>
+        <FormItem label="性别" hasFeedback {...formItemLayout}>
+          {getFieldDecorator('isMale', {
+            initialValue: item.isMale,
+            rules: [
+              {
+                required: true,
+                type: 'boolean',
+                message: '请选择性别'
+              }
+            ]
           })(
-            <Input/>
+            <Radio.Group>
+              <Radio value={true}>男</Radio>
+              <Radio value={false}>女</Radio>
+            </Radio.Group>
           )}
         </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
-          {...formItemLayout}
-        >
+        <FormItem label="年龄：" hasFeedback {...formItemLayout}>
           {getFieldDecorator('age', {
             initialValue: item.age,
-            rules: [{
-              required: true,
-              type:'number',
-              message: '年龄未填写' },
-            ],
-          })(
-            <InputNumber min={18} max={100}/>
-          )}
+            rules: [
+              {
+                required: true,
+                type: 'number',
+                message: '年龄未填写'
+              }
+            ]
+          })(<InputNumber min={18} max={100}/>)}
         </FormItem>
-        <FormItem
-          label="电话："
-          hasFeedback
-          {...formItemLayout}
-        >
+        <FormItem label="电话：" hasFeedback {...formItemLayout}>
           {getFieldDecorator('phone', {
             initialValue: item.phone,
             rules: [
-              { required: true, message: '不能为空' },
-            ],
-          })(
-            <Input/>
-          )}
+              {
+                required: true,
+                message: '不能为空'
+              }
+            ]
+          })(<Input/>)}
         </FormItem>
-        <FormItem
-          label="邮箱："
-          hasFeedback
-          {...formItemLayout}
-        >
+        <FormItem label="邮箱：" hasFeedback {...formItemLayout}>
           {getFieldDecorator('email', {
             initialValue: item.email,
             rules: [
-              { required: true, message: '不能为空' },
-            ],
-          })(
-            <Input/>
-          )}
+              {
+                required: true,
+                message: '不能为空'
+              }
+            ]
+          })(<Input/>)}
         </FormItem>
-        <FormItem
-          label="住址："
-          hasFeedback
-          {...formItemLayout}
-        >
+        <FormItem label="住址：" hasFeedback {...formItemLayout}>
           {getFieldDecorator('address', {
             initialValue: item.address,
             rules: [
-              { required: true, message: '不能为空' },
-            ],
-          })(
-            <Input/>
-          )}
+              {
+                required: true,
+                message: '不能为空'
+              }
+            ]
+          })(<Input/>)}
         </FormItem>
       </Form>
     </Modal>
@@ -142,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)