前端:管理员模块增加搜索功能的 ui 。具体操作未完成~

This commit is contained in:
YunaiV 2019-03-19 04:04:20 +08:00
parent 76818dab18
commit bb612cac64
2 changed files with 62 additions and 1 deletions

View File

@ -2,7 +2,7 @@
import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import { Card, Form, Input, Button, Modal, message, Table, Divider, Tree, Spin } from 'antd';
import {Card, Form, Input, Button, Modal, message, Table, Divider, Tree, Spin, Row, Col, Select, Icon} from 'antd';
import { checkTypeWithEnglishAndNumbers } from '../../../helpers/validator'
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
@ -324,7 +324,35 @@ class ResourceList extends PureComponent {
});
}
renderSimpleForm() { // TODO 芋艿,搜索功能未完成
const {
form: { getFieldDecorator },
} = this.props;
return (
<Form onSubmit={this.handleSearch} layout="inline">
<Row gutter={{ md: 8, lg: 24, xl: 48 }}>
<Col md={8} sm={24}>
<FormItem label="昵称">
{getFieldDecorator('name')(<Input placeholder="请输入" />)}
</FormItem>
</Col>
<Col md={8} sm={24}>
<span className={styles.submitButtons}>
<Button type="primary" htmlType="submit">
查询
</Button>
<Button style={{ marginLeft: 8 }} onClick={this.handleFormReset}>
重置
</Button>
</span>
</Col>
</Row>
</Form>
);
}
render() {
let that = this;
const { list, data } = this.props;
const { count, pageNo, pageSize, roleList, roleCheckedKeys, roleAssignLoading } = data;
const {
@ -391,6 +419,7 @@ class ResourceList extends PureComponent {
<PageHeaderWrapper>
<Card bordered={false}>
<div className={styles.tableList}>
<div className={styles.tableListForm}>{that.renderSimpleForm()}</div>
<div className={styles.tableListOperator}>
<Button
icon="plus"

View File

@ -13,3 +13,35 @@
.tableDelete {
color: red;
}
.tableListForm {
:global {
.ant-form-item {
display: flex;
margin-right: 0;
margin-bottom: 24px;
> .ant-form-item-label {
width: auto;
padding-right: 8px;
line-height: 32px;
}
.ant-form-item-control {
line-height: 32px;
}
}
.ant-form-item-control-wrapper {
flex: 1;
}
}
.submitButtons {
display: block;
margin-bottom: 24px;
white-space: nowrap;
}
}
@media screen and (max-width: @screen-lg) {
.tableListForm :global(.ant-form-item) {
margin-right: 24px;
}
}