| | |
| | | import React, {Component} from 'react' |
| | | import PropTypes from 'prop-types' |
| | | import { Form, Row, Col, Input, Select, Icon, Tooltip, Radio, InputNumber } from 'antd' |
| | | import { Form, Row, Col, Input, Select, Tooltip, Radio } from 'antd' |
| | | import { QuestionCircleOutlined } from '@ant-design/icons' |
| | | |
| | | import { formRule } from '@/utils/option.js' |
| | | import Utils from '@/utils/utils.js' |
| | | import './index.scss' |
| | |
| | | */ |
| | | UNSAFE_componentWillMount () { |
| | | const { formlist } = this.props |
| | | |
| | | // let type = formlist.filter(cell => cell.key === 'type')[0].initVal |
| | | |
| | | let _tabs = this.props.tabs.filter(tab => tab.type === 'SubTable') |
| | | |
| | |
| | | <Form.Item label={ |
| | | item.tooltip ? |
| | | <Tooltip placement="topLeft" title={item.tooltip}> |
| | | <Icon type="question-circle" /> |
| | | <QuestionCircleOutlined className="mk-form-tip" /> |
| | | {item.label} |
| | | </Tooltip> : item.label |
| | | }> |
| | |
| | | ...rules |
| | | ] |
| | | })(<Input placeholder="" autoComplete="off" disabled={item.readonly} onPressEnter={this.handleSubmit} />)} |
| | | </Form.Item> |
| | | </Col> |
| | | ) |
| | | } else if (item.type === 'number') { |
| | | fields.push( |
| | | <Col span={24} key={index}> |
| | | <Form.Item label={ |
| | | item.tooltip ? |
| | | <Tooltip placement="topLeft" title={item.tooltip}> |
| | | <Icon type="question-circle" /> |
| | | {item.label} |
| | | </Tooltip> : item.label |
| | | }> |
| | | {getFieldDecorator(item.key, { |
| | | initialValue: item.initVal, |
| | | rules: [ |
| | | { |
| | | required: !!item.required, |
| | | message: this.props.dict['form.required.input'] + item.label + '!' |
| | | } |
| | | ] |
| | | })(<InputNumber disabled={item.readonly} min={item.min} max={item.max} precision={0} />)} |
| | | </Form.Item> |
| | | </Col> |
| | | ) |
| | |
| | | > |
| | | {item.options.map((option, i) => |
| | | <Select.Option id={'mk' + i} title={option.text} key={'mk' + i} value={option.value}> |
| | | {item.key === 'icon' && i !== 0 ? <Icon type={option.text} /> : option.text} |
| | | {option.text} |
| | | </Select.Option> |
| | | )} |
| | | </Select> |
| | | )} |
| | | </Form.Item> |
| | | </Col> |
| | | ) |
| | | } else if (item.type === 'mutilselect') { |
| | | fields.push( |
| | | <Col span={24} key={index}> |
| | | <Form.Item label={ |
| | | item.tooltip ? |
| | | <Tooltip placement="topLeft" title={item.tooltip}> |
| | | <Icon type="question-circle" /> |
| | | {item.label} |
| | | </Tooltip> : item.label |
| | | }> |
| | | {getFieldDecorator(item.key, { |
| | | initialValue: item.initVal |
| | | })( |
| | | <Select |
| | | mode="multiple" |
| | | style={{ width: '100%' }} |
| | | placeholder="" |
| | | > |
| | | {item.options.map((option, index) => |
| | | <Select.Option id={option.uuid} title={option.label} key={index} value={option.uuid}>{option.label}</Select.Option> |
| | | )} |
| | | </Select> |
| | | )} |
| | |
| | | <Col span={24} key={index}> |
| | | <Form.Item label={item.tooltip ? |
| | | <Tooltip placement="topLeft" title={item.tooltip}> |
| | | <Icon type="question-circle" /> |
| | | <QuestionCircleOutlined className="mk-form-tip" /> |
| | | {item.label} |
| | | </Tooltip> : item.label |
| | | }> |
| | |
| | | } |
| | | } |
| | | return ( |
| | | <Form {...formItemLayout} className="model-tab-form"> |
| | | <Form {...formItemLayout} style={{minHeight: '180px'}}> |
| | | <Row gutter={24}>{this.getFields()}</Row> |
| | | </Form> |
| | | ) |