Change advanced form layout

src/routes/List/TableList.js

 import React, { PureComponent } from 'react';
 import { connect } from 'dva';
-import { Card, Form, Input, Select, Icon, Button, Dropdown, Menu, InputNumber, DatePicker, Modal, message } from 'antd';
+import { Row, Col, Card, Form, Input, Select, Icon, Button, Dropdown, Menu, InputNumber, DatePicker, Modal, message } from 'antd';
 import StandardTable from '../../components/StandardTable';
 import PageHeaderLayout from '../../layouts/PageHeaderLayout';
 
@@ -152,66 +152,135 @@ export default class TableList extends PureComponent {
     });
   }
 
-  render() {
-    const { rule: { loading: ruleLoading, data }, form: { getFieldDecorator } } = this.props;
-    const { selectedRows, modalVisible, addInputValue } = this.state;
-
-    const menu = (
-      <Menu onClick={this.handleMenuClick} selectedKeys={[]}>
-        <Menu.Item key="remove">删除</Menu.Item>
-        <Menu.Item key="approval">批量审批</Menu.Item>
-      </Menu>
-    );
-
+  renderSimpleForm() {
+    const { getFieldDecorator } = this.props.form;
     return (
-      <PageHeaderLayout title="查询表格">
-        <Card bordered={false}>
-          <div className={styles.tableList}>
-            <div className={styles.tableListForm}>
       <Form onSubmit={this.handleSearch} layout="inline">
-                <div style={{ marginBottom: 16 }}>
+        <Row gutter={48}>
+          <Col span={8}>
             <FormItem label="规则编号">
               {getFieldDecorator('no')(
-                      <Input placeholder="请输入" style={{ width: 272 }} />
+                <Input placeholder="请输入" />
               )}
             </FormItem>
+          </Col>
+          <Col span={8}>
             <FormItem label="使用状态">
               {getFieldDecorator('status')(
-                      <Select placeholder="请选择" style={{ width: 272 }}>
+                <Select placeholder="请选择" style={{ width: '100%' }}>
                   <Option value="0">关闭</Option>
                   <Option value="1">运行中</Option>
                 </Select>
               )}
             </FormItem>
-                  <span className={styles.formButton}>
+          </Col>
+          <Col span={8}>
+            <span>
               <Button type="primary" htmlType="submit">查询</Button>
               <Button style={{ marginLeft: 8 }} onClick={this.handleFormReset}>重置</Button>
               <a style={{ marginLeft: 8 }} onClick={this.toggleForm}>
-                      {this.state.expandForm ? '收起' : '展开'} <Icon type={this.state.expandForm ? 'up' : 'down'} />
+                展开 <Icon type="down" />
               </a>
             </span>
-                </div>
-                {
-                  this.state.expandForm && (
-                    <div style={{ marginBottom: 16 }}>
-                      <FormItem label="更新时间">
-                        {getFieldDecorator('updatedAt')(
-                          <DatePicker style={{ width: 272 }} />
+          </Col>
+        </Row>
+      </Form>
+    );
+  }
+
+  renderAdvancedForm() {
+    const { getFieldDecorator } = this.props.form;
+    return (
+      <Form onSubmit={this.handleSearch} layout="inline">
+        <Row gutter={48}>
+          <Col span={8}>
+            <FormItem label="规则编号">
+              {getFieldDecorator('no')(
+                <Input placeholder="请输入" />
+              )}
+            </FormItem>
+          </Col>
+          <Col span={8}>
+            <FormItem label="使用状态">
+              {getFieldDecorator('status')(
+                <Select placeholder="请选择" style={{ width: '100%' }}>
+                  <Option value="0">关闭</Option>
+                  <Option value="1">运行中</Option>
+                </Select>
               )}
             </FormItem>
+          </Col>
+          <Col span={8}>
             <FormItem label="调用次数">
-                        {getFieldDecorator('callNo')(
-                          <InputNumber
-                            prefix={<Icon type="right" />}
-                            placeholder="请输入"
-                            style={{ width: 272 }}
-                          />
+              {getFieldDecorator('number')(
+                <InputNumber style={{ width: '100%' }} />
+              )}
+            </FormItem>
+          </Col>
+        </Row>
+        <Row gutter={48}>
+          <Col span={8}>
+            <FormItem label="更新日期">
+              {getFieldDecorator('date')(
+                <DatePicker style={{ width: '100%' }} placeholder="请输入更新日期" />
+              )}
+            </FormItem>
+          </Col>
+          <Col span={8}>
+            <FormItem label="使用状态">
+              {getFieldDecorator('status3')(
+                <Select placeholder="请选择" style={{ width: '100%' }}>
+                  <Option value="0">关闭</Option>
+                  <Option value="1">运行中</Option>
+                </Select>
+              )}
+            </FormItem>
+          </Col>
+          <Col span={8}>
+            <FormItem label="使用状态">
+              {getFieldDecorator('status4')(
+                <Select placeholder="请选择" style={{ width: '100%' }}>
+                  <Option value="0">关闭</Option>
+                  <Option value="1">运行中</Option>
+                </Select>
               )}
             </FormItem>
+          </Col>
+        </Row>
+        <div>
+          <span style={{ float: 'right' }}>
+            <Button type="primary" htmlType="submit">查询</Button>
+            <Button style={{ marginLeft: 8 }} onClick={this.handleFormReset}>重置</Button>
+            <a style={{ marginLeft: 8 }} onClick={this.toggleForm}>
+              收起 <Icon type="up" />
+            </a>
+          </span>
         </div>
-                  )
-                }
       </Form>
+    );
+  }
+
+  renderForm() {
+    return this.state.expandForm ? this.renderAdvancedForm() : this.renderSimpleForm();
+  }
+
+  render() {
+    const { rule: { loading: ruleLoading, data } } = this.props;
+    const { selectedRows, modalVisible, addInputValue } = this.state;
+
+    const menu = (
+      <Menu onClick={this.handleMenuClick} selectedKeys={[]}>
+        <Menu.Item key="remove">删除</Menu.Item>
+        <Menu.Item key="approval">批量审批</Menu.Item>
+      </Menu>
+    );
+
+    return (
+      <PageHeaderLayout title="查询表格">
+        <Card bordered={false}>
+          <div className={styles.tableList}>
+            <div className={styles.tableListForm}>
+              {this.renderForm()}
             </div>
             <div className={styles.tableListOperator}>
               <Button icon="plus" type="primary" onClick={() => this.handleModalVisible(true)}>新建</Button>

src/routes/List/TableList.less

@@ -10,13 +10,16 @@
   }
 }
 
-.tableListForm :global(.ant-form-item) {
-  margin-right: 48px;
-  margin-bottom: 8px;
-}
-
-.formButton {
-  white-space: nowrap;
+.tableListForm {
+  :global {
+    .ant-form-item {
+      margin-bottom: 24px;
+      display: flex;
+    }
+    .ant-form-item-control-wrapper {
+      flex: 1;
+    }
+  }
 }
 
 @media screen and (max-width: @screen-lg) {