import React, {Component} from 'react'
|
import PropTypes from 'prop-types'
|
import { Form, Row, Col, Select, Button, Input } from 'antd'
|
// import './index.scss'
|
|
class UniqueForm extends Component {
|
static propTpyes = {
|
contrastChange: PropTypes.func // 修改函数
|
}
|
|
handleConfirm = () => {
|
// 表单提交时检查输入值是否正确
|
this.props.form.validateFieldsAndScroll((err, values) => {
|
if (!err) {
|
this.props.contrastChange(values)
|
this.props.form.setFieldsValue({
|
frontfield: '',
|
backfield: '',
|
errmsg: ''
|
})
|
}
|
})
|
}
|
|
render() {
|
const { getFieldDecorator } = this.props.form
|
const formItemLayout = {
|
labelCol: {
|
xs: { span: 24 },
|
sm: { span: 8 }
|
},
|
wrapperCol: {
|
xs: { span: 24 },
|
sm: { span: 16 }
|
}
|
}
|
|
return (
|
<Form {...formItemLayout} className="verify-form" id="verifycard1">
|
<Row gutter={24}>
|
<Col span={7}>
|
<Form.Item label="内容1">
|
{getFieldDecorator('frontfield', {
|
initialValue: '',
|
rules: [
|
{
|
required: true,
|
message: '请输入内容1!'
|
}
|
]
|
})(<Input placeholder="" autoComplete="off" onPressEnter={this.handleConfirm}/>)}
|
</Form.Item>
|
</Col>
|
<Col span={7}>
|
<Form.Item label="运算符">
|
{getFieldDecorator('operator', {
|
initialValue: '=',
|
rules: [
|
{
|
required: true,
|
message: '请选择运算符!'
|
}
|
]
|
})(
|
<Select>
|
<Select.Option value="="> = </Select.Option>
|
<Select.Option value="!="> != </Select.Option>
|
<Select.Option value=">"> > </Select.Option>
|
<Select.Option value="<"> < </Select.Option>
|
<Select.Option value=">="> >= </Select.Option>
|
<Select.Option value="<="> <= </Select.Option>
|
<Select.Option value="in"> in </Select.Option>
|
<Select.Option value="like"> like </Select.Option>
|
</Select>
|
)}
|
</Form.Item>
|
</Col>
|
<Col span={7}>
|
<Form.Item label="内容2">
|
{getFieldDecorator('backfield', {
|
initialValue: '',
|
rules: [
|
{
|
required: true,
|
message: '请输入内容2!'
|
}
|
]
|
})(<Input placeholder="" autoComplete="off" onPressEnter={this.handleConfirm}/>)}
|
</Form.Item>
|
</Col>
|
<Col span={3} className="add">
|
<Button onClick={this.handleConfirm} type="primary" className="mk-green">
|
添加
|
</Button>
|
</Col>
|
<Col span={7}>
|
<Form.Item label="提示信息">
|
{getFieldDecorator('errmsg', {
|
initialValue: '',
|
rules: [
|
{
|
required: true,
|
message: '请输入提示信息!'
|
},
|
{
|
pattern: /^[^']*$/ig,
|
message: '提示信息不允许包含\''
|
}
|
]
|
})(<Input placeholder="" autoComplete="off" onPressEnter={this.handleConfirm}/>)}
|
</Form.Item>
|
</Col>
|
<Col span={7}>
|
<Form.Item label="报错编码">
|
{getFieldDecorator('errorCode', {
|
initialValue: 'E',
|
rules: [
|
{
|
required: true,
|
message: '请选择报错编码!'
|
}
|
]
|
})(
|
<Select>
|
<Select.Option value="E"> E </Select.Option>
|
<Select.Option value="N"> N </Select.Option>
|
<Select.Option value="F"> F </Select.Option>
|
<Select.Option value="NM"> NM </Select.Option>
|
</Select>
|
)}
|
</Form.Item>
|
</Col>
|
</Row>
|
</Form>
|
)
|
}
|
}
|
|
export default Form.create()(UniqueForm)
|
