5.2-iuap应用平台前端培训_案例开发（完成搜索表单）.md

完成搜索表单

以供应商管理节点为例

1. 首先引入 bee-form，tinper-bee相关组件

import { Loading, Table, Button, Col, Row, Icon, InputGroup, FormControl, Checkbox, Modal, Panel, PanelGroup, Label, Message, Select, Radio } from "tinper-bee";
import Form from 'bee-form';
const FormItem = Form.FormItem;

2. 在模块页面组件导出时，使用 Form.createForm方法包装

经过包装后的组件可以使用 this.props.form 相关属性

export default Form.createForm()(component);

3. 编写ui 例如：角色管理

<div className='search-panel'>
                    <Row>
                        <Col md={4} xs={6}>
                            <FormItem>
                                <Label>角色编码：</Label>
                                <FormControl
                                    {
                                    ...getFieldProps('roleCode', {
                                        initialValue: '',
                                    })
                                    }
                                />
                            </FormItem>
                        </Col>
                        <Col md={4} xs={6}>
                            <FormItem>
                                <Label>角色名称：</Label>
                                <FormControl
                                    {
                                    ...getFieldProps('roleName', {
                                        initialValue: '',
                                    })
                                    }
                                />
                            </FormItem>
                        </Col>
                        <Col md={4} xs={6}>
                            <FormItem>
                                <Label>角色描述：</Label>
                                <FormControl
                                    {
                                    ...getFieldProps('roleDescribe', {
                                        initialValue: '',
                                    })
                                    }
                                />
                            </FormItem>
                        </Col>
                        
                        <Col md={12} xs={12} className='btn-group'>
                            <Button size='sm' className='reset-btn' onClick={this.reset}>清空</Button>
                            <Button size='sm' className='submit-btn' onClick={this.search}>查询</Button>
                        </Col>
                    </Row>
                </div>

4. 在组件中增加相关事件。 点击查询按钮时查询接口，更新数据即可

search = () => {//查询
    this.props.form.validateFields((err, values) => {
        actions.role.loadList(values);
    });
}
reset = () => { //重置
    this.props.form.resetFields();
}