bee-form/demo/index.js

Form ui component for react

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Con, Row, Col } from 'bee-layout';
import { Panel } from 'bee-panel';
import Drawer from 'bee-drawer';
import Clipboard from 'bee-clipboard'; 



var Demo1 = require("./demolist/Demo1");var Demo2 = require("./demolist/Demo2");var Demo3 = require("./demolist/Demo3");var Demo4 = require("./demolist/Demo4");var Demo5 = require("./demolist/Demo5");var Demo6 = require("./demolist/Demo6");var DemoArray = [{"example":<Demo1 />,"title":" 单个input校验","code":"/**\n *\n * @title 单个input校验\n * @description 使用FormItem\n */\nimport React, { Component } from 'react';\nimport { Icon, Label, FormControl, Form } from 'tinper-bee';\n\nconst FormItem = Form.FormItem;\n\n\nconst Demo1 = Form.createForm()(class Demo extends Component {\n    constructor(props) {\n        super(props);\n    }\n    render() {\n        const self=this;\n        const { getFieldProps, getFieldError } = this.props.form;\n        return (\n                <FormItem className='demo1'>\n                    <Label>姓名</Label>\n                    <FormControl placeholder='请输入姓名'\n                     {...getFieldProps('name', {\n                        validateTrigger: 'onBlur',\n                        rules: [{\n                            required: true, message: <span><Icon type=\"uf-exc-t\"></Icon><span>请输入姓名</span></span>\n                        },{\n                            max:5,message:<span><Icon type=\"uf-exc-t\"></Icon><span>最大长度为10</span></span>\n                        },{\n                            pattern: /[\\u4e00-\\u9fa5]/, message: <span><Icon type=\"uf-exc-t\"></Icon><span>请输入中文字符</span></span>,\n                        }],\n                    }) } />\n                    <span className='error'>\n                        {getFieldError('name')}\n                    </span>   \n                </FormItem>\n        )\n    }\n})\n\nexport default Demo1;","desc":" 使用FormItem","scss_code":""},{"example":<Demo2 />,"title":" 基本form校验","code":"/**\r\n *\r\n * @title 基本form校验\r\n * @description 登录示例\r\n */\r\nimport React, { Component } from 'react';\nimport { Icon, Button, Label, FormControl, Form } from 'tinper-bee';\r\nimport ReactDOM from 'react-dom';\r\n\r\n\n\n\n\nconst FormItem = Form.FormItem;\r\n\r\nconst Demo2 = Form.createForm()(class Demo2 extends Component {\r\n    submit = (e) => {\r\n        e.preventDefault();\r\n        this.props.form.validateFields((err, values) => {\r\n            if (err) {\r\n                console.log('校验失败', values);\r\n            } else {\r\n                console.log('提交成功', values)\r\n            }\r\n        });\r\n    }\r\n    render() {\r\n        const { getFieldProps, getFieldError } = this.props.form;\r\n        return (\r\n            <div className=\"demo2\">\r\n                <Form >\r\n                    <FormItem>\r\n                        <Label>用户名</Label>\r\n                        <FormControl placeholder=\"请输入用户名\"\r\n                            {...getFieldProps('username', {\r\n                                validateTrigger: 'onBlur',\r\n                                rules: [{\r\n                                    required: true, message: <span><Icon type=\"uf-exc-t\"></Icon><span>请输入用户名</span></span>,\r\n                                }],\r\n                            }) }\r\n                        />\r\n                        <span className='error'>\r\n                            {getFieldError('username')}\r\n                        </span>\r\n                    </FormItem>\r\n                    <FormItem>\r\n                        <Label>密码</Label>\r\n                        <FormControl placeholder=\"请输入密码\" type='password'\r\n                            {...getFieldProps('password', {\r\n                                validateTrigger: 'onBlur',\r\n                                rules: [{\r\n                                    required: true, message: <span><Icon type=\"uf-exc-t\"></Icon><span>请输入密码</span></span>,\r\n                                }],\r\n                            }) }\r\n                        />\r\n                        <span className='error'>\r\n                            {getFieldError('password')}\r\n                        </span>\r\n                    </FormItem>\r\n                    <FormItem style={{'paddingLeft':'106px'}}>\r\n                        <Button shape=\"border\" className=\"reset\" style={{\"marginRight\":\"8px\"}}>取消</Button>\r\n                        <Button colors=\"primary\" className=\"login\" onClick={this.submit}>登录</Button>\r\n                    </FormItem>\r\n                </Form>\r\n            </div>\r\n        )\r\n    }\r\n})\r\nexport default Demo2;","desc":" 登录示例","scss_code":""},{"example":<Demo3 />,"title":" 基本form校验","code":"/**\r\n *\r\n * @title 基本form校验\r\n * @description 注册示例\r\n */\r\nimport React, { Component } from 'react';\nimport { Icon, Label, Checkbox, Button, FormControl, Form } from 'tinper-bee';\r\n\r\nconst FormItem = Form.FormItem;\r\n\n\n\n\n\n\r\nconst Demo3 = Form.createForm()( class Demo extends Component {\r\n    constructor(props) {\r\n        super(props);\r\n        this.state = {\r\n            checkbox: false\r\n        }\r\n    }\r\n    submit = (e) => {\r\n        e.preventDefault();\r\n        this.props.form.validateFields((err, values) => {\r\n            if (err) {\r\n                console.log('校验失败', values);\r\n            } else {\r\n                console.log('提交成功', values)\r\n            }\r\n        });\r\n    }\r\n    handleConfirmPassword = (rule, value, callback) => {\r\n        const { getFieldValue } = this.props.form;\r\n        if (value && value !== getFieldValue('password')) {\r\n            callback(<span><Icon type=\"uf-exc-t\"></Icon><span>两次输入不一致！</span></span>)\r\n        }\r\n        callback();\r\n    }\r\n    render() {\r\n        const self = this;\r\n        const { getFieldProps, getFieldError } = this.props.form;\r\n        return (\r\n            <div className=\"demo3\">\r\n                <Form>\r\n                    <FormItem>\r\n                        <Label>用户名</Label>\r\n                        <FormControl placeholder=\"请输入用户名(包含数字和字母，8-15位)\"\r\n                            {...getFieldProps('username', {\r\n                                validateTrigger: 'onBlur',\r\n                                rules: [{\r\n                                    required: true, message: <span><Icon type=\"uf-exc-t\"></Icon><span>请输入用户名</span></span>,\r\n                                }, {\r\n                                    pattern: /^(?!\\d+$)(?![a-zA-Z]+$)[a-zA-Z0-9]{8,15}$/, \r\n                                    message: <span><Icon type=\"uf-exc-t\"></Icon><span>用户名格式错误</span></span>,\r\n                                }],\r\n                            }) }\r\n                        />\r\n                        <span className='error'>\r\n                            {getFieldError('username')}\r\n                        </span>\r\n                    </FormItem>\r\n\r\n                    <FormItem>\r\n                        <Label>密码</Label>\r\n                        <FormControl placeholder=\"请输入密码\" type='password'\r\n                            {...getFieldProps('password', {\r\n                                validateTrigger: 'onBlur',\r\n                                rules: [{\r\n                                    required: true, message: <span><Icon type=\"uf-exc-t\"></Icon><span>请输入密码</span></span>,\r\n                                }],\r\n                            }) }\r\n                        />\r\n                        <span className='error'>\r\n                            {getFieldError('password')}\r\n                        </span>\r\n                    </FormItem>\r\n\r\n                    <FormItem>\r\n                        <Label>再次输入密码</Label>\r\n                        <FormControl placeholder=\"请输入密码\" type='password'\r\n                            {...getFieldProps('password2', {\r\n                                validateTrigger: 'onBlur',\r\n                                rules: [{\r\n                                    required: true, message: <span><Icon type=\"uf-exc-t\"></Icon><span>请输入密码</span></span>,\r\n                                }, {\r\n                                    validator: this.handleConfirmPassword\r\n                                }],\r\n                            }) }\r\n                        />\r\n                        <span className='error'>\r\n                            {getFieldError('password2')}\r\n                        </span>\r\n                    </FormItem>\r\n\r\n                    <FormItem>\r\n                        <Label>邮箱</Label>\r\n                        <FormControl placeholder=\"请输入邮箱\"\r\n                            {...getFieldProps('email', {\r\n                                validateTrigger: 'onBlur',\r\n                                rules: [{\r\n                                    required: true, message: <span><Icon type=\"uf-exc-t\"></Icon><span>请输入邮箱</span></span>,\r\n                                }, {\r\n                                    type: 'email', message: <span><Icon type=\"uf-exc-t\"></Icon><span>邮箱格式不正确</span></span>\r\n                                }],\r\n                            }) }\r\n                        />\r\n                        <span className='error'>\r\n                            {getFieldError('email')}\r\n                        </span>\r\n                    </FormItem>\r\n                    <FormItem>\r\n                        <Label>手机号</Label>\r\n\r\n                        <FormControl placeholder=\"请输入手机号\"\r\n                            {...getFieldProps('phone', {\r\n                                validateTrigger: 'onBlur',\r\n                                rules: [{\r\n                                    required: true, message: <span><Icon type=\"uf-exc-t\"></Icon><span>请输入手机号</span></span>,\r\n                                }, {\r\n                                    pattern: /^\\d{11}$/, message: <span><Icon type=\"uf-exc-t\"></Icon><span>手机号格式不正确</span></span>\r\n                                }],\r\n                            }) }\r\n                        />\r\n\r\n                        <span className='error'>\r\n                            {getFieldError('phone')}\r\n                        </span>\r\n                    </FormItem>\r\n\r\n                    <FormItem style={{'paddingLeft':'106px'}}>\r\n                        <Checkbox\r\n                            defaultChecked={this.state.checkbox}\r\n                            {\r\n                            ...getFieldProps('checkbox', {\r\n                                initialValue: false,\r\n                            }\r\n                            ) }\r\n                        >\r\n                        我已经阅读并同意相关条款\r\n                        </Checkbox>\r\n                    </FormItem>\r\n                    <FormItem style={{'paddingLeft':'106px'}}>\r\n                        <Button shape=\"border\" className=\"reset\" style={{\"marginRight\":\"8px\"}}>取消</Button>\r\n                        <Button colors=\"primary\" className=\"login\" onClick={this.submit}>注册</Button>\r\n                    </FormItem>\r\n                </Form>\r\n            </div>\r\n        )\r\n    }\r\n})\r\nexport default Demo3;","desc":" 注册示例","scss_code":""},{"example":<Demo4 />,"title":" 表单校验","code":"/**\r\n *\r\n * @title 表单校验\r\n * @description 用户信息录入实例\r\n */\r\nimport React, { Component } from 'react';\nimport { Upload, Icon, Button, Label, CitySelect, Rate, InputNumber, Slider, Switch, Checkbox, Radio, Select,  Col,Row , FormControl, Form } from 'tinper-bee';\r\nimport ReactDOM from 'react-dom';\r\n\r\n\n\n\n\nimport DatePicker from 'bee-datepicker';\r\n\n\n\n\n\n\n\n\n\n\nconst FormItem = Form.FormItem;\r\nconst Option = Select.Option;\r\nconst CheckboxGroup = Checkbox.CheckboxGroup;\r\n\r\nconst uploadProps = {\r\n    name: 'file',\r\n    action: '/upload.do',\r\n    headers: {\r\n      authorization: 'authorization-text',\r\n    },\r\n    onChange(info) {\r\n      if (info.file.status !== 'uploading') {\r\n        console.log(info.file, info.fileList);\r\n      }\r\n      if (info.file.status === 'done') {\r\n        console.log(`${info.file.name} file uploaded successfully`);\r\n      } else if (info.file.status === 'error') {\r\n        console.log(`${info.file.name} file upload failed.`);\r\n      }\r\n    },\r\n};\r\n\r\nconst Demo4 = Form.createForm()(class Demo extends Component {\r\n    constructor(props) {\r\n        super(props);\r\n        this.state = {\r\n            selectedValue: '',\r\n            selectedValue2: 'headquarters'\r\n        };\r\n    }\r\n    submit = (e) => {\r\n        this.props.form.validateFields((err, values) => {\r\n            if (err) {\r\n                console.log('校验失败', values);\r\n            } else {\r\n                console.log('提交成功', values)\r\n            }\r\n        });\r\n    }\r\n    render() {\r\n        const { getFieldProps, getFieldError } = this.props.form;\r\n        const self = this;\r\n        return (\r\n            <div>\r\n                <Form className='demo4'>\r\n                    <FormItem>\r\n                        <Label><Icon type=\"uf-mi\" className='mast'></Icon>申请人</Label>\r\n                        <FormControl placeholder=\"请输入姓名\"\r\n                            {...getFieldProps('name', {\r\n                                validateTrigger: 'onBlur',\r\n                                rules: [{\r\n                                    required: true, message: <span><Icon type=\"uf-exc-t\"></Icon><span>请输入姓名</span></span>,\r\n                                }],\r\n                            }) }\r\n                        />\r\n                        <span className='error'>\r\n                            {getFieldError('name')}\r\n                        </span>\r\n                    </FormItem>\r\n                    <FormItem>\r\n                        <Label><Icon type=\"uf-mi\" className='mast'></Icon>联系方式</Label>\r\n                        <FormControl placeholder=\"请输入联系方式\"\r\n                            {...getFieldProps('phone', {\r\n                                validateTrigger: 'onBlur',\r\n                                rules: [{\r\n                                    required: true, message: <span><Icon type=\"uf-exc-t\"></Icon><span>请输入联系方式</span></span>,\r\n                                }, {\r\n                                    pattern: /^\\d{11}$/, message: <span><Icon type=\"uf-exc-t\"></Icon><span>手机号格式不正确</span></span>\r\n                                }],\r\n                            }) }\r\n                        />\r\n                        <span className='error'>\r\n                            {getFieldError('phone')}\r\n                        </span>\r\n                    </FormItem>\r\n                    <FormItem>\r\n                        <Label>供应商名称</Label>\r\n                        <FormControl placeholder=\"请输入供应商名称\"\r\n                            {\r\n                            ...getFieldProps('supplierName', {\r\n                                initialValue: '',\r\n                            })\r\n                            }\r\n                        />\r\n                    </FormItem>\r\n                    <FormItem>\r\n                        <Label><Icon type=\"uf-mi\" className='mast'></Icon>供货产品</Label>\r\n                        <FormControl placeholder=\"请输入供货产品\"\r\n                            {\r\n                            ...getFieldProps('supplyProducts', {\r\n                                validateTrigger: 'onBlur',\r\n                                rules: [{\r\n                                    required: true, message: <span><Icon type=\"uf-exc-t\"></Icon><span>请输入供货产品</span></span>,\r\n                                }],\r\n                                initialValue: '',\r\n                            })\r\n                            }\r\n                        />\r\n                        <span className='error line-height-32'>\r\n                            {getFieldError('supplyProducts')}\r\n                        </span>\r\n                    </FormItem>\r\n                    <FormItem className='time flex'>\r\n                        <Label className=\"line-height-32\">需求日期</Label>\r\n                        <DatePicker\r\n                            {\r\n                            ...getFieldProps('time', {\r\n                            }\r\n                            ) }\r\n                            placeholder={'请选择需求日期'}\r\n                        />\r\n                    </FormItem>\r\n                    <FormItem>\r\n                        <Label><Icon type=\"uf-mi\" className='mast'></Icon>物料关重程度</Label>\r\n                        <Radio.RadioGroup\r\n                            selectedValue={this.state.selectedValue}\r\n                            {\r\n                            ...getFieldProps('importance', {\r\n                                initialValue: '',\r\n                                onChange(value) {\r\n                                    self.setState({ selectedValue: value });\r\n                                },\r\n                                rules: [{ required: true }]\r\n                            }\r\n                            ) }\r\n                        >\r\n                            <Radio value=\"A\" >A（关键）</Radio>\r\n                            <Radio value=\"B\" >B（重要）</Radio>\r\n                            <Radio value=\"C\" >C（一般）</Radio>\r\n                        </Radio.RadioGroup>\r\n                    </FormItem>\r\n                    <FormItem>\r\n                        <Label><Icon type=\"uf-mi\" className='mast'></Icon>归属部门</Label>\r\n                        <Radio.RadioGroup\r\n                            selectedValue={this.state.selectedValue2}\r\n                            {\r\n                            ...getFieldProps('department', {\r\n                                initialValue: 'headquarters',\r\n                                onChange(value) {\r\n                                    self.setState({ selectedValue2: value });\r\n                                },\r\n                                rules: [{ required: true }]\r\n                            }\r\n                            ) }\r\n                        >\r\n                            <Radio value=\"headquarters\">总部</Radio>\r\n                            <Radio value=\"businessUnit\">事业部</Radio>\r\n                        </Radio.RadioGroup>\r\n                    </FormItem>\r\n                    <FormItem>\r\n                        <Label><Icon type=\"uf-mi\" className='mast'></Icon>采购组</Label>\r\n                        <CheckboxGroup \r\n                                {\r\n                                    ...getFieldProps('purchasingGroup',{\r\n                                        initialValue:['2'],\r\n                                        rules: [{ required: true, message: <span><Icon type=\"uf-exc-t\"></Icon><span>请选择采购组</span></span> }]\r\n                                    })\r\n                                }\r\n                            >\r\n                                <Checkbox value='1'>人力</Checkbox>\r\n                                <Checkbox value='2'>财务</Checkbox>\r\n                        </CheckboxGroup>\r\n                        <span className='error'>\r\n                            {getFieldError('purchasingGroup')}\r\n                        </span>\r\n                    </FormItem>\r\n                    <FormItem>\r\n                        <Label>保密等级</Label>\r\n                        <Rate\r\n                            {\r\n                            ...getFieldProps('rate', {\r\n                                initialValue: 0,\r\n                                rules: [{ required: true }]\r\n                            }\r\n                            ) }\r\n                        />\r\n                    </FormItem>\r\n                    <FormItem className=\"flex\">\r\n                        <Label className=\"line-height-32\">备注</Label>\r\n                        <FormControl componentClass='textarea'\r\n                            {\r\n                            ...getFieldProps('remark', {}\r\n                            ) }\r\n                        />\r\n                    </FormItem>  \r\n                    <FormItem >\r\n                        <Label>文件</Label>\r\n                        <Upload {...uploadProps}>\r\n                            <Button shape=\"border\">\r\n                            <Icon type=\"uf-upload\" /> Click to Upload\r\n                            </Button>\r\n                        </Upload>\r\n                    </FormItem>  \r\n                    <FormItem style={{'paddingLeft':'106px'}}>\r\n                        <Button shape=\"border\" className=\"reset\" style={{\"marginRight\":\"8px\"}}>取消</Button>\r\n                        <Button colors=\"primary\" className=\"login\" onClick={this.submit}>提交</Button>\r\n                    </FormItem>\r\n                </Form>\r\n            </div>\r\n        )\r\n    }\r\n})\r\nexport default Demo4;","desc":" 用户信息录入实例","scss_code":".demo4{\r\n    .u-form-item{\r\n        .u-form-control, .datepicker-container{\r\n            min-width: 300px;\r\n        }\r\n    }\r\n}"},{"example":<Demo5 />,"title":" 多种表单元素示例","code":"/**\n *\n * @title 多种表单元素示例\n * @description 查询面板\n */\nimport React, { Component } from 'react';\nimport { SearchPanel, Icon, Label, Checkbox, Radio, Select,  Col , Row , FormControl, Form } from 'tinper-bee';\n\nimport DatePicker from 'bee-datepicker';\nconst FormItem = Form.FormItem;\nconst Option = Select.Option;\nconst CheckboxGroup = Checkbox.CheckboxGroup;\nconst AdvancedContainer = SearchPanel.AdvancedContainer;\n\nconst Demo5 = Form.createForm()(class Demo extends Component {\n    constructor(props) {\n        super(props);\n        this.state = {\n            expanded: true,\n            approvalState: '',\n            closeState: '',\n            confirmState: '',\n            voucherDate: [],\n            orderTypes:[\n                {\n                    'code':'001',\n                    'name':'类型1'\n                },\n                {\n                    'code':'002',\n                    'name':'类型2'\n                },\n                {\n                    'code':'003',\n                    'name':'类型3'\n                },\n            ]\n        };\n    }\n    submit = (e) => {\n        this.props.form.validateFields((err, values) => {\n            if (err) {\n                console.log('校验失败', values);\n            } else {\n                console.log('提交成功', values)\n            }\n        });\n    }\n    reset = () =>{\n        this.props.form.resetFields();\n        //部分表单元素无法通过this.props.form.resetFields重置，需要手动重置，如下\n        this.setState({\n            approvalState: '',\n            closeState: '',\n            confirmState: '',\n            voucherDate: []\n        })\n    }\n    onChange = () => {\n        this.setState({expanded: !this.state.expanded})\n    }\n    render() {\n        const { getFieldProps, getFieldError } = this.props.form;\n        const self = this;\n        return (\n            <div>\n                <SearchPanel\n                title='基础示例'\n                onSearch={this.submit}\n                onReset={this.reset}\n                expanded={this.state.expanded}\n                onChange={this.onChange}\n                >\n                    <AdvancedContainer>\n                        <Form className='demo5'>\n                            <Row>\n                                <Col lg={4} md={6} xs={12}>\n                                    <FormItem>\n                                        <Col lg={4} md={4} xs={4}>\n                                            <Label><Icon type=\"uf-mi\" className='mast'></Icon>订单编号</Label>\n                                        </Col>\n                                        <Col lg={8} md={8} xs={8}>\n                                            <FormControl size=\"sm\"\n                                                {\n                                                ...getFieldProps('orderCode', {\n                                                    initialValue: '',\n                                                    validateTrigger: 'onBlur',\n                                                    rules: [{\n                                                        required: true, message: <span><Icon type=\"uf-exc-t\"></Icon><span>请输入订单编号</span></span>,\n                                                    }],\n                                                })\n                                                }\n                                            />\n                                            <span className='error'>\n                                                {getFieldError('orderCode')}\n                                            </span>\n                                        </Col>\n                                    </FormItem>\n                                </Col>\n                                <Col  lg={4} md={6} xs={12}>\n                                    <FormItem>\n                                        <Col lg={4} md={4} xs={4}>\n                                            <Label><Icon type=\"uf-mi\" className='mast'></Icon>供应商名称</Label>\n                                        </Col>\n                                        <Col lg={8} md={8} xs={8}>\n                                            <FormControl size=\"sm\"\n                                                {\n                                                ...getFieldProps('supplierName', {\n                                                    initialValue: '',\n                                                    validateTrigger: 'onBlur',\n                                                    rules: [{\n                                                        required: true, message: <span><Icon type=\"uf-exc-t\"></Icon><span>请输入供应商名称</span></span>,\n                                                    }],\n                                                })\n                                                }\n                                            />\n                                            <span className='error'>\n                                                {getFieldError('supplierName')}\n                                            </span>\n                                        </Col>\n                                    </FormItem>\n                                </Col>\n                                <Col  lg={4} md={6} xs={12}>\n                                    <FormItem>\n                                        <Col lg={4} md={4} xs={4}>\n                                            <Label><Icon type=\"uf-mi\" className='mast'></Icon>凭证名称</Label>\n                                        </Col>\n                                        <Col lg={8} md={8} xs={8}>\n                                            <FormControl size=\"sm\"\n                                                {\n                                                ...getFieldProps('voucherName1', {\n                                                    initialValue: '',\n                                                    validateTrigger: 'onBlur',\n                                                    rules: [{\n                                                        required: true, message: <span><Icon type=\"uf-exc-t\"></Icon><span>请输入凭证名称</span></span>,\n                                                    }],\n                                                })\n                                                }\n                                            />\n                                            <span className='error'>\n                                                {getFieldError('voucherName1')}\n                                            </span>\n                                        </Col>\n                                    </FormItem>\n                                </Col>\n                                \n                                <Col  lg={4} md={6} xs={12}>\n                                    <FormItem>\n                                        <Col lg={4} md={4} xs={4}>\n                                            <Label>订单类型</Label>\n                                        </Col>\n                                        <Col lg={8} md={8} xs={8}>\n                                            <Select size=\"sm\"\n                                                {\n                                                ...getFieldProps('type', {\n                                                    initialValue: '',\n                                                }\n                                                )}>\n                                                <Option value=\"\">请选择</Option>\n                                                {\n                                                    self.state.orderTypes.map((item, index) => {\n                                                        return (\n                                                            <Option key={index} value={item.code}>{item.name}</Option>\n                                                        )\n                                                    })\n                                                }\n                                            </Select>\n                                        </Col>\n                                    </FormItem>\n                                </Col>\n                                <Col  lg={4} md={6} xs={12}>\n                                    <FormItem>\n                                        <Col lg={4} md={4} xs={4}>\n                                            <Label>采购组</Label>\n                                        </Col>\n                                        <Col lg={8} md={8} xs={8}>\n                                            <CheckboxGroup \n                                                {\n                                                    ...getFieldProps('purchasingGroup',{\n                                                        initialValue:['2']\n                                                    })\n                                                }\n                                            >\n                                                <Checkbox value='1'>人力</Checkbox>\n                                                <Checkbox value='2'>财务</Checkbox>\n                                            </CheckboxGroup>\n                                        </Col>\n                                    </FormItem>\n                                </Col>\n                                <Col  lg={4} md={6} xs={12}>\n                                    <FormItem>\n                                        <Col lg={4} md={4} xs={4}>\n                                            <Label>审批状态</Label>\n                                        </Col>\n                                        <Col lg={8} md={8} xs={8}>\n                                            <Radio.RadioGroup\n                                                selectedValue={this.state.approvalState}\n                                                {\n                                                ...getFieldProps('approvalState', {\n                                                    initialValue: '1',\n                                                    onChange(value) {\n                                                        self.setState({ approvalState: value });\n                                                    },\n                                                }\n                                                )}\n                                            >\n                                                <Radio value=\"0\" >未审批</Radio>\n                                                <Radio value=\"1\" >已审批</Radio>\n                                            </Radio.RadioGroup>\n                                        </Col>\n                                    </FormItem>\n                                </Col>\n                                <Col  lg={4} md={6} xs={12}>\n                                    <FormItem>\n                                        <Col lg={4} md={4} xs={4}>\n                                            <Label>关闭状态</Label>\n                                        </Col>\n                                        <Col lg={8} md={8} xs={8}>\n                                            <Radio.RadioGroup\n                                                selectedValue={this.state.closeState}\n                                                {\n                                                ...getFieldProps('closeState', {\n                                                    initialValue: '1',\n                                                    onChange(value) {\n                                                        self.setState({ closeState: value });\n                                                    },\n                                                }\n                                                )}\n                                            >\n                                                <Radio value=\"0\" >未关闭</Radio>\n                                                <Radio value=\"1\" >已关闭</Radio>\n                                            </Radio.RadioGroup>\n                                        </Col>\n                                    </FormItem>\n                                </Col>\n                                <Col  lg={4} md={6} xs={12}>\n                                    <FormItem>\n                                        <Col lg={4} md={4} xs={4}>\n                                            <Label>确认状态</Label>\n                                        </Col>\n                                        <Col lg={8} md={8} xs={8}>\n                                            <Radio.RadioGroup\n                                                selectedValue={this.state.confirmState}\n                                                {\n                                                ...getFieldProps('confirmState', {\n                                                    initialValue: '1',\n                                                    onChange(value) {\n                                                        self.setState({ confirmState: value });\n                                                    },\n                                                }\n                                                )}\n                                            >\n                                                <Radio value=\"0\" >未确认</Radio>\n                                                <Radio value=\"1\" >已确认</Radio>\n                                            </Radio.RadioGroup>\n                                        </Col>\n                                    </FormItem>\n                                </Col>\n                            </Row>\n                        </Form>\n                    </AdvancedContainer>\n                </SearchPanel>\n            </div>\n        )\n    }\n})\nexport default Demo5;","desc":" 查询面板","scss_code":".demo5{\r\n    .u-form-item .error{\r\n        padding-left: 0;\r\n    }\r\n}"},{"example":<Demo6 />,"title":" 多种布局示例","code":"/**\r\n *\r\n * @title 多种布局示例\r\n * @description \r\n */\r\nimport React, { Component } from 'react';\nimport { Icon, Button, Label, Switch, Checkbox, Radio, Select,  Col , Row , FormControl, Form } from 'tinper-bee';\r\nimport ReactDOM from 'react-dom';\r\n\r\n\n\n\n\nimport DatePicker from 'bee-datepicker';\r\n\n\n\n\n\nimport moment from \"moment/moment\";\r\nconst FormItem = Form.FormItem;\r\nconst Option = Select.Option;\r\nconst { RangePicker } = DatePicker;\r\n\r\nconst Demo6 = Form.createForm()(class Demo extends Component {\r\n    constructor(props) {\r\n        super(props);\r\n        this.state = {\r\n            approvalState: '',\r\n            closeState: '',\r\n            confirmState: '',\r\n            voucherName: [],\r\n            orderTypes:[\r\n                {\r\n                    'code':'001',\r\n                    'name':'类型1'\r\n                },\r\n                {\r\n                    'code':'002',\r\n                    'name':'类型2'\r\n                },\r\n                {\r\n                    'code':'003',\r\n                    'name':'类型3'\r\n                },\r\n            ]\r\n        };\r\n    }\r\n    render() {\r\n        const { getFieldProps, getFieldError } = this.props.form;\r\n        const self = this;\r\n        const orderTypes= [{\r\n            \"code\":\"D001\",\r\n            \"name\":\"D001\"\r\n          },{\r\n            \"code\":\"D002\",\r\n            \"name\":\"D002\"\r\n          },{\r\n            \"code\":\"D003\",\r\n            \"name\":\"D003\"\r\n          },{\r\n            \"code\":\"D004\",\r\n            \"name\":\"D004\"\r\n          }];\r\n        return (\r\n            <div>\r\n                <Form className='demo6'>\r\n                    {/* 普通栅格布局 */}\r\n                    <h4>\r\n                        普通栅格布局\r\n                    </h4>\r\n                    <Row className = 'edit-panel'>\r\n                        <Col lg={4} md={6} xs={12}>\r\n                            <FormItem>\r\n                                <Label>\r\n                                    <Icon type=\"uf-mi\" className='mast'></Icon>\r\n                                    订单编号\r\n                                </Label>\r\n                                <FormControl\r\n                                    {\r\n                                    ...getFieldProps('orderCode1', {\r\n                                        initialValue: '',\r\n                                        rules: [{\r\n                                            required: true, message: <span><Icon type=\"uf-exc-t\"></Icon><span>请输入订单编号</span></span>,\r\n                                        }],\r\n                                    })\r\n                                    }\r\n                                />\r\n                                <span className='error'>\r\n                                    {\r\n                                        getFieldError('orderCode1')\r\n                                    }\r\n                                </span>\r\n                            </FormItem>\r\n                        </Col>\r\n                        <Col lg={4} md={6} xs={12}>\r\n                            <FormItem>\r\n                                <Label>\r\n                                    <Icon type=\"uf-mi\" className='mast'></Icon>\r\n                                    供应商名称\r\n                                </Label>\r\n                                <FormControl\r\n                                    {\r\n                                        ...getFieldProps('supplierName1', {\r\n                                            initialValue: '',\r\n                                            rules: [{\r\n                                                required: true, message: <span><Icon type=\"uf-exc-t\"></Icon><span>请输入供应商名称</span></span>,\r\n                                            }],\r\n                                        })\r\n                                    }\r\n                                />\r\n                                <span className='error'>\r\n                                    {\r\n                                        getFieldError('supplierName1')\r\n                                    }\r\n                                </span>\r\n                            </FormItem>\r\n                            \r\n                        </Col>\r\n                        <Col lg={4} md={6} xs={12}>\r\n                            <FormItem>\r\n                                <Label>凭证名称</Label>\r\n                                <FormControl\r\n                                    {\r\n                                        ...getFieldProps('voucherName1', {\r\n                                            initialValue: '',\r\n                                            rules: [{\r\n                                                required: true, message: <span><Icon type=\"uf-exc-t\"></Icon><span>请输入凭证名称</span></span>,\r\n                                            }],\r\n                                        })\r\n                                    }\r\n                                />\r\n                                <span className='error'>\r\n                                    {\r\n                                        getFieldError('voucherName1')\r\n                                    }\r\n                                </span>\r\n                            </FormItem>\r\n                        </Col>\r\n                    </Row>\r\n\r\n                    <div className='split'></div>\r\n                    \r\n                    \r\n                     {/* 单列铺满 */}\r\n                     <h4>\r\n                        单列铺满\r\n                     </h4>\r\n                     <Row className = 'edit-panel edit-panel-all'>\r\n                        <FormItem>\r\n                            <Col md={2} xs={2}>\r\n                                <Label>\r\n                                    <Icon type=\"uf-mi\" className='mast'></Icon>\r\n                                    订单编号\r\n                                </Label>\r\n                            </Col>\r\n                            <Col md={10} xs={10}>\r\n                                <FormControl\r\n                                    {\r\n                                    ...getFieldProps('orderCode2', {\r\n                                        initialValue: '',\r\n                                        rules: [{\r\n                                            required: true, message: <span><Icon type=\"uf-exc-t\"></Icon><span>请输入订单编号</span></span>,\r\n                                        }],\r\n                                    })\r\n                                    }\r\n                                />\r\n                                <span className='error'>\r\n                                    {\r\n                                        getFieldError('orderCode2')\r\n                                    }\r\n                                </span>\r\n                            </Col>\r\n                        </FormItem>\r\n\r\n                        <FormItem>\r\n                            <Col md={2} xs={2}>\r\n                                <Label>\r\n                                    <Icon type=\"uf-mi\" className='mast'></Icon>\r\n                                    供应商名称\r\n                                </Label>\r\n                            </Col>\r\n                            <Col md={10} xs={10}>\r\n                                <FormControl\r\n                                    {\r\n                                        ...getFieldProps('supplierName2', {\r\n                                            initialValue: '',\r\n                                            rules: [{\r\n                                                required: true, message: <span><Icon type=\"uf-exc-t\"></Icon><span>请输入供应商名称</span></span>,\r\n                                            }],\r\n                                        })\r\n                                    }\r\n                                />\r\n                                <span className='error'>\r\n                                    {\r\n                                        getFieldError('supplierName2')\r\n                                    }\r\n                                </span>\r\n                            </Col>\r\n                        </FormItem>\r\n\r\n                        <FormItem>\r\n                            <Col md={2} xs={2}>\r\n                                <Label>凭证名称</Label>\r\n                            </Col>\r\n                            <Col md={10} xs={10}>\r\n                            <FormControl\r\n                                    {\r\n                                        ...getFieldProps('voucherName2', {\r\n                                            initialValue: '',\r\n                                            rules: [{\r\n                                                required: true, message: <span><Icon type=\"uf-exc-t\"></Icon><span>请输入凭证名称</span></span>,\r\n                                            }],\r\n                                        })\r\n                                    }\r\n                                />\r\n                                <span className='error'>\r\n                                    {\r\n                                        getFieldError('voucherName2')\r\n                                    }\r\n                                </span>\r\n                            </Col>\r\n                        </FormItem>\r\n                        <FormItem>\r\n                            <Col md={2} xs={2}>\r\n                                <Label>订单类型</Label>\r\n                            </Col>\r\n                            <Col md={10} xs={10}>\r\n                                <Select {\r\n                                    ...getFieldProps('type', {\r\n                                        initialValue: '',\r\n                                    }\r\n                                    )}>\r\n                                    <Option value=\"\">请选择</Option>\r\n                                    {\r\n                                        orderTypes.map((item, index) => {\r\n                                            return (\r\n                                                <Option key={index} value={item.code}>{item.name}</Option>\r\n                                            )\r\n                                        })\r\n                                    }\r\n                                </Select>\r\n                            </Col>\r\n                        </FormItem>\r\n                        \r\n                    </Row>\r\n\r\n                    <div className='split'></div>\r\n\r\n                    {/* 单列居中 */}\r\n                    <h4>\r\n                        单列居中\r\n                    </h4>\r\n                    <Row className = 'text-algin-center'>\r\n                        <Col md={12} >\r\n                            <FormItem>\r\n                                <Label>\r\n                                    <Icon type=\"uf-mi\" className='mast'></Icon>\r\n                                    订单编号\r\n                                </Label>\r\n                                <FormControl\r\n                                    {\r\n                                    ...getFieldProps('orderCode3', {\r\n                                        initialValue: '',\r\n                                        rules: [{\r\n                                            required: true, message: <span><Icon type=\"uf-exc-t\"></Icon><span>请输入订单编号</span></span>,\r\n                                        }],\r\n                                    })\r\n                                    }\r\n                                />\r\n                                <span className='error'>\r\n                                    {\r\n                                        getFieldError('orderCode3')\r\n                                    }\r\n                                </span>\r\n                            </FormItem>\r\n                        </Col>\r\n                        <Col md={12}  >\r\n                            <FormItem>\r\n                                <Label>\r\n                                    <Icon type=\"uf-mi\" className='mast'></Icon>\r\n                                    供应商名称\r\n                                </Label>\r\n                                <FormControl\r\n                                    {\r\n                                        ...getFieldProps('supplierName3', {\r\n                                            initialValue: '',\r\n                                            rules: [{\r\n                                                required: true, message: <span><Icon type=\"uf-exc-t\"></Icon><span>请输入供应商名称</span></span>,\r\n                                            }],\r\n                                        })\r\n                                    }\r\n                                />\r\n                                <span className='error'>\r\n                                    {\r\n                                        getFieldError('supplierName3')\r\n                                    }\r\n                                </span>\r\n                            </FormItem>\r\n                            \r\n                        </Col>\r\n                        <Col md={12}  >\r\n                            <FormItem>\r\n                                <Label >凭证名称</Label>\r\n                                <FormControl\r\n                                    {\r\n                                        ...getFieldProps('voucherName3', {\r\n                                            initialValue: '',\r\n                                            rules: [{\r\n                                                required: true, message: <span><Icon type=\"uf-exc-t\"></Icon><span>请输入