import React, {Component} from 'react'
|
import PropTypes from 'prop-types'
|
import { is, fromJS } from 'immutable'
|
import { Form, Row, Col, Select, Switch } from 'antd'
|
import './index.scss'
|
|
|
class UniqueForm extends Component {
|
static propTpyes = {
|
dict: PropTypes.object, // 字典项
|
voucherobj: PropTypes.object, // 凭证信息
|
voucher: PropTypes.array, // 表单
|
columns: PropTypes.array, // 表单
|
voucherDetail: PropTypes.array, // 表单
|
voucherChange: PropTypes.func // 表单
|
}
|
|
state = {
|
voucher: [],
|
voucherDetail: [],
|
columns: []
|
}
|
|
UNSAFE_componentWillMount() {
|
let _voucher = []
|
let _voucherDetail = []
|
if (this.props.voucherobj.BVoucherType && this.props.voucher.length > 0) {
|
_voucher = this.props.voucher.filter(item => item.TypeCharOne === this.props.voucherobj.BVoucherType)
|
_voucherDetail = this.props.voucherDetail.filter(item => item.BID === this.props.voucherobj.VoucherType)
|
} else if (this.props.voucher.length > 0) {
|
_voucher = this.props.voucher.filter(item => item.TypeCharOne === 'MES')
|
_voucherDetail = this.props.voucherDetail.filter(item => _voucher[0] && item.BID === _voucher[0].ID)
|
}
|
|
this.setState({
|
voucher: _voucher,
|
voucherDetail: _voucherDetail,
|
columns: this.props.columns.filter(col => col.type === 'text')
|
})
|
}
|
|
UNSAFE_componentWillReceiveProps (nextProps) {
|
if (!is(fromJS(this.props.voucher), fromJS(nextProps.voucher)) && nextProps.voucher.length > 0) {
|
if (this.props.voucherobj.BVoucherType) {
|
let _voucher = nextProps.voucher.filter(item => item.TypeCharOne === this.props.voucherobj.BVoucherType)
|
let _voucherDetail = nextProps.voucherDetail.filter(item => item.BID === this.props.voucherobj.VoucherType)
|
|
this.setState({
|
voucher: _voucher,
|
voucherDetail: _voucherDetail
|
})
|
} else {
|
let _voucher = nextProps.voucher.filter(item => item.TypeCharOne === 'MES')
|
let _voucherDetail = nextProps.voucherDetail.filter(item => _voucher[0] && item.BID === _voucher[0].ID)
|
|
this.setState({
|
voucher: _voucher,
|
voucherDetail: _voucherDetail
|
})
|
this.props.form.setFieldsValue({
|
VoucherType: _voucher[0] ? _voucher[0].ID : '',
|
VoucherTypeOne: _voucherDetail[0] ? _voucherDetail[0].ModularDetailCode : ''
|
})
|
}
|
}
|
}
|
|
voucherTypeChange = (value) => {
|
const { voucherobj } = this.props
|
|
let _voucher = this.props.voucher.filter(item => item.TypeCharOne === value)
|
let _voucherDetail = this.props.voucherDetail.filter(item => _voucher[0] && item.BID === _voucher[0].ID)
|
|
this.setState({
|
voucher: _voucher,
|
voucherDetail: _voucherDetail
|
})
|
this.props.form.setFieldsValue({
|
VoucherType: _voucher[0] ? _voucher[0].ID : '',
|
VoucherTypeOne: _voucherDetail[0] ? _voucherDetail[0].ModularDetailCode : ''
|
})
|
|
if (voucherobj.enabled) {
|
this.props.voucherChange({...voucherobj, enabled: false})
|
}
|
}
|
|
voucherSChange = (value) => {
|
const { voucherobj } = this.props
|
let _detail = this.props.voucherDetail.filter(item => item.BID === value)
|
|
this.setState({
|
voucherDetail: _detail
|
})
|
this.props.form.setFieldsValue({
|
VoucherTypeOne: _detail[0] ? _detail[0].ModularDetailCode : ''
|
})
|
|
if (voucherobj.enabled) {
|
this.props.voucherChange({...voucherobj, enabled: false})
|
}
|
}
|
|
contentChange = () => {
|
const { voucherobj } = this.props
|
|
if (voucherobj.enabled) {
|
this.props.voucherChange({...voucherobj, enabled: false})
|
}
|
}
|
|
onEnabledChange = () => {
|
const { voucherobj } = this.props
|
|
if (voucherobj.enabled) {
|
this.props.voucherChange({...voucherobj, enabled: false})
|
} else {
|
this.handleConfirm()
|
}
|
}
|
|
|
handleConfirm = () => {
|
// 表单提交时检查输入值是否正确
|
this.props.form.validateFieldsAndScroll((err, values) => {
|
if (!err) {
|
values.enabled = true
|
let _detail = this.state.voucherDetail.filter(item => item.ModularDetailCode === values.VoucherTypeOne)[0]
|
values.VoucherTypeTwo = _detail.VoucherTypeTwo
|
values.Type = _detail.IDefine1
|
|
this.props.voucherChange(values)
|
}
|
})
|
}
|
|
render() {
|
const { getFieldDecorator } = this.props.form
|
const { voucherobj } = this.props
|
const { columns } = this.state
|
const formItemLayout = {
|
labelCol: {
|
xs: { span: 24 },
|
sm: { span: 10 }
|
},
|
wrapperCol: {
|
xs: { span: 24 },
|
sm: { span: 14 }
|
}
|
}
|
|
return (
|
<Form {...formItemLayout} className="verify-form">
|
<Row gutter={24}>
|
<Col span={11}>
|
<Form.Item label={'主类型'}>
|
{getFieldDecorator('BVoucherType', {
|
initialValue: voucherobj.BVoucherType || 'MES',
|
rules: [
|
{
|
required: true,
|
message: this.props.dict['form.required.select'] + '主类型!'
|
}
|
]
|
})(
|
<Select onChange={(value) => {this.voucherTypeChange(value)}}>
|
<Select.Option value="MES"> 业务类凭证 </Select.Option>
|
<Select.Option value="FCC"> 财务类凭证 </Select.Option>
|
<Select.Option value="WMS"> 物流类凭证 </Select.Option>
|
<Select.Option value="Z"> 自定义 </Select.Option>
|
</Select>
|
)}
|
</Form.Item>
|
</Col>
|
<Col span={11}>
|
<Form.Item label={'凭证类型'}>
|
{getFieldDecorator('VoucherType', {
|
initialValue: voucherobj.VoucherType || (this.state.voucher[0] && this.state.voucher[0].ID) || '',
|
rules: [
|
{
|
required: true,
|
message: this.props.dict['form.required.input'] + '凭证类型!'
|
}
|
]
|
})(
|
<Select
|
showSearch
|
filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
|
onChange={(value) => {this.voucherSChange(value)}}
|
>
|
{this.state.voucher.map(option =>
|
<Select.Option title={option.NameNO} id={option.ID} key={option.ID} value={option.ID}>
|
{option.NameNO}
|
</Select.Option>
|
)}
|
</Select>
|
)}
|
</Form.Item>
|
</Col>
|
<Col span={11}>
|
<Form.Item label={'凭证标识'}>
|
{getFieldDecorator('VoucherTypeOne', {
|
initialValue: voucherobj.VoucherTypeOne || (this.state.voucherDetail[0] && this.state.voucherDetail[0].ModularDetailCode) || '',
|
rules: [
|
{
|
required: true,
|
message: this.props.dict['form.required.input'] + '凭证标识!'
|
}
|
]
|
})(
|
<Select
|
showSearch
|
filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
|
onChange={this.contentChange}
|
>
|
{this.state.voucherDetail.map(option =>
|
<Select.Option title={option.CodeName} id={option.ModularDetailCode} key={option.ModularDetailCode} value={option.ModularDetailCode}>
|
{option.CodeName}
|
</Select.Option>
|
)}
|
</Select>
|
)}
|
</Form.Item>
|
</Col>
|
<Col span={11}>
|
<Form.Item label={'关联字段'}>
|
{getFieldDecorator('linkField', {
|
initialValue: voucherobj.linkField || (columns[0] && columns[0].field) || '',
|
rules: [
|
{
|
required: true,
|
message: this.props.dict['form.required.input'] + '关联字段!'
|
}
|
]
|
})(
|
<Select
|
showSearch
|
filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
|
onChange={this.contentChange}
|
>
|
{columns.map((option, index) =>
|
<Select.Option title={option.label} id={index + option.uuid} key={index + option.uuid} value={option.field}>
|
{option.label}
|
</Select.Option>
|
)}
|
</Select>
|
)}
|
</Form.Item>
|
</Col>
|
<Col span={11}>
|
<Form.Item label={'是否启用'}>
|
<Switch checkedChildren="启" unCheckedChildren="停" checked={voucherobj.enabled} onChange={this.onEnabledChange} />
|
</Form.Item>
|
</Col>
|
</Row>
|
</Form>
|
)
|
}
|
}
|
|
export default Form.create()(UniqueForm)
|
