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 = {
|
dict: PropTypes.object, // 字典项
|
fields: PropTypes.array, // 表单字段
|
uniqueChange: PropTypes.func // 修改函数
|
}
|
|
state = {
|
editItem: null // 编辑元素
|
}
|
|
edit = (record) => {
|
this.setState({
|
editItem: record
|
})
|
|
this.props.form.setFieldsValue({
|
field: record.field.split(','),
|
errorCode: record.errorCode
|
})
|
}
|
|
|
handleConfirm = () => {
|
const { fields } = this.props
|
// 表单提交时检查输入值是否正确
|
this.props.form.validateFieldsAndScroll((err, values) => {
|
if (!err) {
|
values.uuid = this.state.editItem ? this.state.editItem.uuid : ''
|
values.fieldlabel = values.field.map(field => {
|
let item = fields.filter(cell => cell.field === field)[0]
|
let label = ''
|
if (item) {
|
label = item.label
|
}
|
return label
|
})
|
|
values.fieldlabel = values.fieldlabel.join(',')
|
values.field = values.field.join(',')
|
|
this.props.uniqueChange(values)
|
this.setState({
|
editItem: null
|
})
|
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={10}>
|
<Form.Item label={'字段名'}>
|
{getFieldDecorator('field', {
|
initialValue: [],
|
rules: [
|
{
|
required: true,
|
message: this.props.dict['form.required.select'] + '字段名!'
|
}
|
]
|
})(
|
<Select
|
mode="multiple"
|
>
|
{fields.map(item => (
|
<Select.Option key={item.uuid} value={item.field}>{item.field}</Select.Option>
|
))}
|
</Select>
|
)}
|
</Form.Item>
|
</Col>
|
<Col span={6}>
|
<Form.Item label={'报错编码'}>
|
{getFieldDecorator('errorCode', {
|
initialValue: 'E',
|
rules: [
|
{
|
required: true,
|
message: this.props.dict['form.required.select'] + '报错编码!'
|
}
|
]
|
})(
|
<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={2} className="add">
|
<Button onClick={this.handleConfirm} type="primary" className="add-row">
|
确定
|
</Button>
|
</Col>
|
</Row>
|
</Form>
|
)
|
}
|
}
|
|
export default Form.create()(UniqueForm)
|
