update form styles

src/components/Result/index.less

@@ -24,19 +24,19 @@
     color: @heading-color;
     font-weight: 500;
     line-height: 32px;
-    margin-bottom: 16px;
+    margin-bottom: 8px;
   }
 
   .description {
     font-size: 14px;
     color: @text-color-secondary;
-    margin-bottom: 24px;
+    margin-bottom: 16px;
   }
 
   .extra {
     background: #fafafa;
-    padding: 24px 40px;
-    margin-top: 24px;
+    padding: 16px 40px;
+    margin-top: 16px;
     border-radius: @border-radius-sm;
     text-align: left;
   }

src/routes/Forms/AdvancedForm.js

@@ -97,7 +97,7 @@ function AdvancedForm({ form, dispatch, submitting }) {
     <PageHeaderLayout
       title="高级表单"
       content="在后台页面中，大批量的数据修改和提交是很常见的情况。"
-      wrapperClassName={styles.withFooterToolbar}
+      wrapperClassName={styles.advancedForm}
     >
       <Card title="仓库管理" className={styles.card} bordered={false}>
         <Form layout="vertical" hideRequiredMark>

src/routes/Forms/StepForm/Step1.js

@@ -91,7 +91,7 @@ export default ({ formItemLayout, form, dispatch }) => {
           </Button>
         </Form.Item>
       </Form>
-      <Divider style={{ margin: '48px 0 16px' }} />
+      <Divider style={{ margin: '40px 0 24px' }} />
       <div className={styles.desc}>
         <h3>说明</h3>
         <h4>转账到支付宝账户</h4>

src/routes/Forms/StepForm/style.less

@@ -6,6 +6,7 @@
 }
 
 .stepFormText {
+  margin-bottom: 24px;
   :global {
     .ant-form-item-label,
     .ant-form-item-control {
@@ -16,26 +17,36 @@
 
 .result {
   margin: 0 auto;
-  max-width: 520px;
-  padding: 32px 0;
+  max-width: 560px;
+  padding: 24px 0;
 }
 
 .desc {
   h3 {
-    font-size: 14px;
-    margin: 8px 0;
+    font-size: 16px;
+    margin: 0 0 12px 0;
     color: @text-color-secondary;
+    line-height: 32px;
   }
   h4 {
-    margin: 2px 0;
+    margin: 0 0 4px 0;
     color: @text-color-secondary;
+    font-size: 14px;
+    line-height: 22px;
   }
   p {
-    margin-bottom: 16px;
+    margin-top: 0;
+    margin-bottom: 12px;
+    line-height: 22px;
   }
-  padding: 0 34px;
+  padding: 0 80px;
   color: @text-color-secondary;
-  font-size: 12px;
+}
+
+@media screen and (max-width: @screen-md) {
+  .desc {
+    padding: 0;
+  }
 }
 
 .information {

src/routes/Forms/TableForm.js

@@ -1,5 +1,5 @@
 import React, { PureComponent } from 'react';
-import { Table, Button, Input, message } from 'antd';
+import { Table, Button, Input, message, Popconfirm } from 'antd';
 import styles from './style.less';
 
 export default class TableForm extends PureComponent {
@@ -45,8 +45,7 @@ export default class TableForm extends PureComponent {
       this.setState({ data: [...this.state.data] });
     }
   }
-  remove(e, key) {
-    e.preventDefault();
+  remove(key) {
     const newData = this.state.data.filter(item => item.key !== key);
     this.setState({ data: newData });
     this.props.onChange(newData);
@@ -64,6 +63,11 @@ export default class TableForm extends PureComponent {
     this.index += 1;
     this.setState({ data: newData });
   }
+  handleKeyPress(e, key) {
+    if (e.key === 'Enter') {
+      this.saveRow(e, key);
+    }
+  }
   handleFieldChange(e, fieldName, key) {
     const newData = [...this.state.data];
     const target = this.getRowByKey(key);
@@ -73,16 +77,29 @@ export default class TableForm extends PureComponent {
     }
   }
   saveRow(e, key) {
-    const target = this.getRowByKey(key);
-    delete target.isNew;
-    if (!target.workId || !target.name || !target.department) {
-      message.error('请填写完整成员信息。');
-      return;
-    }
-    this.toggleEditable(e, key);
-    this.props.onChange(this.state.data);
+    e.persist();
+    // save field when blur input
+    setTimeout(() => {
+      if (document.activeElement.tagName === 'INPUT' &&
+          document.activeElement !== e.target) {
+        return;
+      }
+      if (this.clickedCancel) {
+        this.clickedCancel = false;
+        return;
+      }
+      const target = this.getRowByKey(key);
+      delete target.isNew;
+      if (!target.workId || !target.name || !target.department) {
+        message.error('请填写完整成员信息。');
+        return;
+      }
+      this.toggleEditable(e, key);
+      this.props.onChange(this.state.data);
+    }, 10);
   }
   cancel(e, key) {
+    this.clickedCancel = true;
     e.preventDefault();
     const target = this.getRowByKey(key);
     if (this.cacheOriginData[key]) {
@@ -105,6 +122,8 @@ export default class TableForm extends PureComponent {
               value={text}
               autoFocus
               onChange={e => this.handleFieldChange(e, 'name', record.key)}
+              onBlur={e => this.saveRow(e, record.key)}
+              onKeyPress={e => this.handleKeyPress(e, record.key)}
               placeholder="成员姓名"
             />
           );
@@ -122,6 +141,8 @@ export default class TableForm extends PureComponent {
             <Input
               value={text}
               onChange={e => this.handleFieldChange(e, 'workId', record.key)}
+              onBlur={e => this.saveRow(e, record.key)}
+              onKeyPress={e => this.handleKeyPress(e, record.key)}
               placeholder="工号"
             />
           );
@@ -139,6 +160,8 @@ export default class TableForm extends PureComponent {
             <Input
               value={text}
               onChange={e => this.handleFieldChange(e, 'department', record.key)}
+              onBlur={e => this.saveRow(e, record.key)}
+              onKeyPress={e => this.handleKeyPress(e, record.key)}
               placeholder="所属部门"
             />
           );
@@ -171,7 +194,9 @@ export default class TableForm extends PureComponent {
           <span>
             <a onClick={e => this.toggleEditable(e, record.key)}>编辑</a>
             <span className="ant-divider" />
-            <a onClick={e => this.remove(e, record.key)}>删除</a>
+            <Popconfirm title="是否要删除此行？" onConfirm={() => this.remove(record.key)}>
+              <a>删除</a>
+            </Popconfirm>
           </span>
         );
       },

src/routes/Forms/style.less

@@ -15,13 +15,6 @@
   margin: 16px auto;
 }
 
-.divider {
-  border: 0;
-  border-top: 1px solid @border-color-split;
-  height: 1px;
-  margin: 0 0 24px 0;
-}
-
 .errorIcon {
   cursor: pointer;
   color: @error-color;
@@ -37,7 +30,7 @@
       padding: 0;
       max-height: 290px;
       overflow: auto;
-      min-width: 240px;
+      min-width: 256px;
     }
   }
 }
@@ -45,7 +38,7 @@
 .errorListItem {
   list-style: none;
   border-bottom: 1px solid @border-color-split;
-  padding: 8px 24px;
+  padding: 8px 16px;
   cursor: pointer;
   transition: all .3s;
   &:hover {
@@ -58,13 +51,13 @@
     color: @error-color;
     float: left;
     margin-top: 4px;
-    margin-right: 8px;
+    margin-right: 12px;
     padding-bottom: 22px;
   }
   .errorField {
     font-size: 12px;
     color: @text-color-secondary;
-    margin-top: 4px;
+    margin-top: 2px;
   }
 }
 
@@ -72,15 +65,25 @@
   td {
     padding-top: 13px !important;
     padding-bottom: 12.5px !important;
-    transition: none !important;
   }
 }
 
 // custom footer for fixed footer toolbar
-.withFooterToolbar + div {
+.advancedForm + div {
   padding-bottom: 64px;
 }
 
+.advancedForm {
+  :global {
+    .ant-form .ant-row:last-child .ant-form-item {
+      margin-bottom: 24px;
+    }
+    .ant-table td {
+      transition: none !important;
+    }
+  }
+}
+
 .optional {
   color: @text-color-secondary;
   font-style: normal;