import React, {Component} from 'react'
|
import PropTypes from 'prop-types'
|
import { Form, Row, Col, Select, Button } from 'antd'
|
import './index.scss'
|
|
|
class UniqueForm extends Component {
|
static propTpyes = {
|
fields: PropTypes.array, // 表单字段
|
uniqueChange: PropTypes.func // 修改函数
|
}
|
|
handleConfirm = () => {
|
const { fields } = this.props
|
let change = {}
|
|
fields.forEach(col => {
|
change[col.Column] = col.Text
|
})
|
|
// 表单提交时检查输入值是否正确
|
this.props.form.validateFieldsAndScroll((err, values) => {
|
if (!err) {
|
values.fieldlabel = values.field.map(field => {
|
return change[field] || ''
|
})
|
|
values.fieldlabel = values.fieldlabel.join(',')
|
values.field = values.field.join(',')
|
|
this.props.uniqueChange(values)
|
this.props.form.setFieldsValue({
|
field: [],
|
})
|
}
|
})
|
}
|
|
render() {
|
const { getFieldDecorator } = this.props.form
|
const { fields } = this.props
|
|
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="列名">
|
{getFieldDecorator('field', {
|
initialValue: [],
|
rules: [
|
{
|
required: true,
|
message: '请选择列名!'
|
}
|
]
|
})(
|
<Select
|
mode="multiple"
|
>
|
<Select.Option key="bid" value="BID">BID</Select.Option>
|
{fields.map(item => (
|
<Select.Option key={item.uuid} value={item.Column}>{item.Text}</Select.Option>
|
))}
|
</Select>
|
)}
|
</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>
|
<Col span={7}>
|
<Form.Item label="验证类型">
|
{getFieldDecorator('verifyType', {
|
initialValue: 'physical',
|
rules: [
|
{
|
required: true,
|
message: '请选择验证类型!'
|
}
|
]
|
})(
|
<Select>
|
<Select.Option value="physical"> 物理验证 </Select.Option>
|
<Select.Option value="logic"> 逻辑验证 </Select.Option>
|
</Select>
|
)}
|
</Form.Item>
|
</Col>
|
<Col span={3} className="add">
|
<Button onClick={this.handleConfirm} className="mk-green">
|
添加
|
</Button>
|
</Col>
|
</Row>
|
</Form>
|
)
|
}
|
}
|
|
export default Form.create()(UniqueForm)
|