bee-form
Version:
Form ui component for react
79 lines (62 loc) • 2.86 MB
JavaScript
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId])
/******/ return installedModules[moduleId].exports;
/******/
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ exports: {},
/******/ id: moduleId,
/******/ loaded: false
/******/ };
/******/
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ // Flag the module as loaded
/******/ module.loaded = true;
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/******/
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, exports, __webpack_require__) {
'use strict';
var _react = __webpack_require__(1);
var _react2 = _interopRequireDefault(_react);
var _reactDom = __webpack_require__(2);
var _reactDom2 = _interopRequireDefault(_reactDom);
var _beeLayout = __webpack_require__(3);
var _beePanel = __webpack_require__(9);
var _beeDrawer = __webpack_require__(84);
var _beeDrawer2 = _interopRequireDefault(_beeDrawer);
var _beeClipboard = __webpack_require__(98);
var _beeClipboard2 = _interopRequireDefault(_beeClipboard);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); }
var Demo1 = __webpack_require__(157);var Demo2 = __webpack_require__(352);var Demo3 = __webpack_require__(353);var Demo4 = __webpack_require__(359);var Demo5 = __webpack_require__(646);var Demo6 = __webpack_require__(652);var DemoArray = [{ "example": _react2['default'].createElement(Demo1, null), "title": " 单个input校验", "code": '/**\n *\n * @title \u5355\u4E2Ainput\u6821\u9A8C\n * @description \u4F7F\u7528FormItem\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>\u59D3\u540D</Label>\n <FormControl placeholder=\'\u8BF7\u8F93\u5165\u59D3\u540D\'\n {...getFieldProps(\'name\', {\n validateTrigger: \'onBlur\',\n rules: [{\n required: true, message: <span><Icon type="uf-exc-t"></Icon><span>\u8BF7\u8F93\u5165\u59D3\u540D</span></span>\n },{\n max:5,message:<span><Icon type="uf-exc-t"></Icon><span>\u6700\u5927\u957F\u5EA6\u4E3A10</span></span>\n },{\n pattern: /[\\u4e00-\\u9fa5]/, message: <span><Icon type="uf-exc-t"></Icon><span>\u8BF7\u8F93\u5165\u4E2D\u6587\u5B57\u7B26</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": _react2['default'].createElement(Demo2, null), "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": _react2['default'].createElement(Demo3, null), "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": _react2['default'].createElement(Demo4, null), "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": _react2['default'].createElement(Demo5, null), "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": _react2['default'].createElement(Demo6, null), "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