import React, {Component} from 'react'
|
import PropTypes from 'prop-types'
|
import { Form, Row, Col, Input, Select, Button } from 'antd'
|
import './index.scss'
|
|
const { TextArea } = Input
|
|
class CustomForm extends Component {
|
static propTpyes = {
|
dict: PropTypes.object, // 字典项
|
fields: PropTypes.array, // 表单
|
customChange: PropTypes.func // 表单
|
}
|
|
state = {
|
editItem: null
|
}
|
|
edit = (record) => {
|
this.setState({
|
editItem: record
|
})
|
|
this.props.form.setFieldsValue({
|
sql: record.sql,
|
errmsg: record.errmsg,
|
errorCode: record.errorCode
|
})
|
}
|
|
|
handleConfirm = () => {
|
// 表单提交时检查输入值是否正确
|
this.props.form.validateFieldsAndScroll((err, values) => {
|
if (!err) {
|
values.uuid = this.state.editItem ? this.state.editItem.uuid : ''
|
|
this.props.customChange(values)
|
this.setState({
|
editItem: null
|
})
|
this.props.form.setFieldsValue({
|
sql: '',
|
errmsg: '',
|
errorCode: 'E'
|
})
|
}
|
})
|
}
|
|
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="custom-verify-form" id="verifycard2">
|
<Row gutter={24}>
|
<Col span={10} className="sql">
|
<Form.Item label={'sql'}>
|
{getFieldDecorator('sql', {
|
initialValue: '',
|
rules: [
|
{
|
required: true,
|
message: this.props.dict['form.required.input'] + 'sql!'
|
}
|
]
|
})(<TextArea rows={3} />)}
|
</Form.Item>
|
</Col>
|
<Col span={6}>
|
<Form.Item label={'报错信息'}>
|
{getFieldDecorator('errmsg', {
|
initialValue: '',
|
rules: [
|
{
|
required: true,
|
message: this.props.dict['form.required.input'] + '报错信息!'
|
}
|
]
|
})(<Input placeholder="" autoComplete="off" />)}
|
</Form.Item>
|
</Col>
|
<Col span={6}>
|
<Form.Item label={'报错编码'}>
|
{getFieldDecorator('errorCode', {
|
initialValue: 'E',
|
rules: [
|
{
|
required: true,
|
message: this.props.dict['form.required.select'] + '报错编码!'
|
}
|
]
|
})(
|
<Select
|
getPopupContainer={() => document.getElementById('verifycard2')}
|
>
|
<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.Option value="S"> S </Select.Option>
|
<Select.Option value="-1"> -1 </Select.Option>
|
</Select>
|
)}
|
</Form.Item>
|
</Col>
|
<Col span={2} className="add">
|
<Button onClick={this.handleConfirm} type="primary" className="add-row">
|
确定
|
</Button>
|
</Col>
|
</Row>
|
</Form>
|
)
|
}
|
}
|
|
export default Form.create()(CustomForm)
|
