Skip to content

GitLab

A
ant-design-pro
Commit a5b4c85b authored by afc163's avatar afc163
Browse files
Options

Change advanced form layout

parent f81fc7da
Hide whitespace changes
Inline Side-by-side
Showing with 125 additions and 53 deletions
src/routes/List/TableList.js
View file @ a5b4c85b
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,8 +152,120 @@ export default class TableList extends PureComponent {
});
}
renderSimpleForm() {
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}>
<span>
<Button type="primary" htmlType="submit">查询</Button>
<Button style={{ marginLeft: 8 }} onClick={this.handleFormReset}>重置</Button>
<a style={{ marginLeft: 8 }} onClick={this.toggleForm}>
展开 <Icon type="down" />
</a>
</span>
</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('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 }, form: { getFieldDecorator } } = this.props;
const { rule: { loading: ruleLoading, data } } = this.props;
const { selectedRows, modalVisible, addInputValue } = this.state;
const menu = (
......@@ -168,50 +280,7 @@ export default class TableList extends PureComponent {
<Card bordered={false}>
<div className={styles.tableList}>
<div className={styles.tableListForm}>
<Form onSubmit={this.handleSearch} layout="inline">
<div style={{ marginBottom: 16 }}>
<FormItem label="规则编号">
{getFieldDecorator('no')(
<Input placeholder="请输入" style={{ width: 272 }} />
)}
</FormItem>
<FormItem label="使用状态">
{getFieldDecorator('status')(
<Select placeholder="请选择" style={{ width: 272 }}>
<Option value="0">关闭</Option>
<Option value="1">运行中</Option>
</Select>
)}
</FormItem>
<span className={styles.formButton}>
<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'} />
</a>
</span>
</div>
{
this.state.expandForm && (
<div style={{ marginBottom: 16 }}>
<FormItem label="更新时间">
{getFieldDecorator('updatedAt')(
<DatePicker style={{ width: 272 }} />
)}
</FormItem>
<FormItem label="调用次数">
{getFieldDecorator('callNo')(
<InputNumber
prefix={<Icon type="right" />}
placeholder="请输入"
style={{ width: 272 }}
/>
)}
</FormItem>
</div>
)
}
</Form>
{this.renderForm()}
</div>
<div className={styles.tableListOperator}>
<Button icon="plus" type="primary" onClick={() => this.handleModalVisible(true)}>新建</Button>
......
src/routes/List/TableList.less
View file @ a5b4c85b
......@@ -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) {
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment