import React, {Component} from 'react'
|
import PropTypes from 'prop-types'
|
import { is, fromJS } from 'immutable'
|
import { Form, Row, Col, Select, Button, InputNumber, Input, Tooltip } from 'antd'
|
import { QuestionCircleOutlined } from '@ant-design/icons'
|
|
import './index.scss'
|
|
class BillCodeForm extends Component {
|
static propTpyes = {
|
btn: PropTypes.object, // 按钮信息
|
fields: PropTypes.array, // 表单
|
billcodes: PropTypes.array, // 表单
|
columns: PropTypes.array, // 表单
|
modular: PropTypes.array, // 表单
|
modularDetail: PropTypes.array, // 表单
|
orderChange: PropTypes.func // 表单
|
}
|
|
state = {
|
editItem: null,
|
modularDetail: [],
|
funFields: [],
|
billFields: [],
|
type: '1',
|
TypeCharOne: 'Lp'
|
}
|
|
UNSAFE_componentWillMount() {
|
let _modularDetail = []
|
let _billFields = []
|
|
if (this.props.modular.length > 0) {
|
_modularDetail = this.props.modularDetail.filter(item => item.BID === this.props.modular[0].ID)
|
}
|
|
let fieldMap = new Map()
|
this.props.fields.forEach(_field => {
|
if (_field.type === 'text' && !fieldMap.has(_field.field.toLowerCase())) {
|
_billFields.push(_field)
|
fieldMap.set(_field.field.toLowerCase(), true)
|
}
|
})
|
|
if (this.props.btn.Ot !== 'notRequired') {
|
this.props.columns.forEach(_field => {
|
if (_field.type === 'text' && !fieldMap.has(_field.field.toLowerCase())) {
|
_billFields.push(_field)
|
fieldMap.set(_field.field.toLowerCase(), true)
|
}
|
})
|
}
|
|
let _usedfields = this.props.billcodes.map(item => item.field)
|
|
this.setState({
|
modularDetail: _modularDetail,
|
funFields: this.props.fields.filter(field => field.type === 'funcvar' && !_usedfields.includes(field.field)),
|
billFields: _billFields
|
})
|
}
|
|
UNSAFE_componentWillReceiveProps (nextProps) {
|
if (!is(fromJS(this.props.modular), fromJS(nextProps.modular))) {
|
let _detail = nextProps.modularDetail.filter(item => item.BID === nextProps.modular[0].ID)
|
|
this.setState({
|
modularDetail: _detail
|
})
|
}
|
}
|
|
edit = (record) => {
|
let _usedfields = this.props.billcodes.map(item => item.field)
|
let _funFields = this.props.fields.filter(field => field.type === 'funcvar' && (!_usedfields.includes(field.field) || field.field === record.field))
|
|
if (record.TypeCharOne === 'Y' || record.TypeCharOne === 'n') {
|
let _detail = this.props.modularDetail.filter(item => item.BID === record.ModularCode)
|
let _modularDetailCode = ''
|
|
if (_detail.filter(item => item.ModularDetailCode === record.ModularDetailCode).length > 0) {
|
_modularDetailCode = record.ModularDetailCode
|
}
|
|
this.setState({
|
type: '2',
|
funFields: _funFields,
|
editItem: record,
|
modularDetail: _detail,
|
TypeCharOne: record.TypeCharOne
|
}, () => {
|
this.props.form.setFieldsValue({
|
field: record.field,
|
TypeCharOne: record.TypeCharOne,
|
ModularCode: record.ModularCode,
|
ModularDetailCode: _modularDetailCode,
|
})
|
})
|
} else {
|
this.setState({
|
type: '1',
|
funFields: _funFields,
|
editItem: record,
|
TypeCharOne: record.TypeCharOne
|
}, () => {
|
let _form = {
|
field: record.field,
|
TypeCharOne: record.TypeCharOne,
|
Type: record.Type,
|
linkField: record.linkField
|
}
|
if (record.TypeCharOne === 'Lp') {
|
_form.mark = record.mark || ''
|
}
|
this.props.form.setFieldsValue(_form)
|
})
|
}
|
}
|
|
voucherChange = (value) => {
|
let _detail = this.props.modularDetail.filter(item => item.BID === value)
|
|
this.setState({
|
modularDetail: _detail
|
})
|
this.props.form.setFieldsValue({
|
ModularDetailCode: _detail[0] ? _detail[0].ModularDetailCode : ''
|
})
|
}
|
|
TypeCharOneChange = (value) => {
|
if (value === 'Y' || value === 'n') {
|
this.setState({
|
type: '2',
|
TypeCharOne: value
|
})
|
} else {
|
this.setState({
|
type: '1',
|
TypeCharOne: value
|
})
|
}
|
}
|
|
handleConfirm = () => {
|
const { funFields, billFields } = this.state
|
// 表单提交时检查输入值是否正确
|
this.props.form.validateFieldsAndScroll((err, values) => {
|
if (!err) {
|
values.uuid = this.state.editItem ? this.state.editItem.uuid : ''
|
|
let _funField = funFields.filter(item => item.field === values.field)[0]
|
values.fieldName = _funField ? _funField.label : ''
|
|
// 一级菜单值为20190203125926873D6029A9C511041719420时TypeCharTwo=TableCode，其他用BillCode
|
if (values.ModularCode === '20190203125926873D6029A9C511041719420' || values.ModularCode === '01') {
|
values.TypeCharTwo = 'TableCode'
|
} else {
|
values.TypeCharTwo = 'BillCode'
|
}
|
// 设置类型名称，用于列表显示
|
let billType = {
|
Y: '单号',
|
n: '编码',
|
Lp: '行号',
|
BN: '批次',
|
}
|
values.billType = billType[values.TypeCharOne]
|
|
if (values.TypeCharOne === 'Y' || values.TypeCharOne === 'n') {
|
// 设置凭证类型中文名
|
let ModularCode = this.props.modular.filter(item => item.ID === values.ModularCode)[0]
|
values.ModularCodeName = ModularCode.NameNO
|
|
// 设置流水号位数
|
let _detail = this.state.modularDetail.filter(item => item.ModularDetailCode === values.ModularDetailCode)[0]
|
values.Type = _detail.Type
|
} else {
|
let _billField = billFields.filter(item => item.field === values.linkField)[0]
|
values.linkFieldName = _billField ? _billField.label : ''
|
}
|
|
this.setState({
|
editItem: null
|
}, () => {
|
this.props.orderChange(values)
|
let _usedfields = this.props.billcodes.map(item => item.field)
|
|
this.setState({
|
funFields: this.props.fields.filter(field => field.type === 'funcvar' && !_usedfields.includes(field.field)),
|
})
|
})
|
let _form = {
|
field: ''
|
}
|
if (this.state.TypeCharOne === 'Lp') {
|
_form.mark = ''
|
}
|
this.props.form.setFieldsValue(_form)
|
}
|
})
|
}
|
|
render() {
|
const { getFieldDecorator } = this.props.form
|
const { type, TypeCharOne } = this.state
|
const formItemLayout = {
|
labelCol: {
|
xs: { span: 24 },
|
sm: { span: 10 }
|
},
|
wrapperCol: {
|
xs: { span: 24 },
|
sm: { span: 14 }
|
}
|
}
|
|
return (
|
<Form {...formItemLayout} className="verify-form mk-fix-form-height">
|
<Row gutter={24}>
|
<Col span={7}>
|
<Form.Item label="函数变量">
|
{getFieldDecorator('field', {
|
initialValue: '',
|
rules: [
|
{
|
required: true,
|
message: '请选择函数变量!'
|
}
|
]
|
})(
|
<Select>
|
{this.state.funFields.map(option =>
|
<Select.Option title={option.label} id={option.uuid} key={option.uuid} value={option.field}>
|
{option.label}
|
</Select.Option>
|
)}
|
</Select>
|
)}
|
</Form.Item>
|
</Col>
|
<Col span={7}>
|
<Form.Item label={'类型'}>
|
{getFieldDecorator('TypeCharOne', {
|
initialValue: 'Lp',
|
rules: [
|
{
|
required: true,
|
message: '请选择类型!'
|
}
|
]
|
})(
|
<Select onChange={(value) => {this.TypeCharOneChange(value)}}>
|
<Select.Option value="Y"> 单号 </Select.Option>
|
<Select.Option value="n"> 编码 </Select.Option>
|
<Select.Option value="Lp"> 行号 </Select.Option>
|
<Select.Option value="BN"> 批次 </Select.Option>
|
</Select>
|
)}
|
</Form.Item>
|
</Col>
|
{type === '1' ? <Col span={7}>
|
<Form.Item label={'关联字段'}>
|
{getFieldDecorator('linkField', {
|
initialValue: '',
|
rules: [
|
{
|
required: true,
|
message: '请选择关联字段!'
|
}
|
]
|
})(
|
<Select>
|
{this.state.billFields.map(option =>
|
<Select.Option title={option.label} id={option.uuid} key={option.uuid} value={option.field}>
|
{option.label}
|
</Select.Option>
|
)}
|
</Select>
|
)}
|
</Form.Item>
|
</Col> : null}
|
{type === '2' ? <Col span={7}>
|
<Form.Item label={'凭证类型'}>
|
{getFieldDecorator('ModularCode', {
|
initialValue: this.props.modular[0] ? this.props.modular[0].ID : '',
|
rules: [
|
{
|
required: true,
|
message: '请选择凭证类型!'
|
}
|
]
|
})(
|
<Select
|
showSearch
|
filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
|
onChange={(value) => {this.voucherChange(value)}}
|
>
|
{this.props.modular.map(option =>
|
<Select.Option title={option.NameNO} id={option.ID} key={option.ID} value={option.ID}>
|
{option.NameNO}
|
</Select.Option>
|
)}
|
</Select>
|
)}
|
</Form.Item>
|
</Col> : null}
|
<Col span={3} className="add">
|
<Button onClick={this.handleConfirm} className="mk-green">
|
保存
|
</Button>
|
</Col>
|
{type === '1' ? <Col span={7}>
|
<Form.Item label={'位数'}>
|
{getFieldDecorator('Type', {
|
initialValue: 4,
|
rules: [
|
{
|
required: true,
|
message: '请输入位数!'
|
}
|
]
|
})(<InputNumber min={1} max={10} precision={0} />)}
|
</Form.Item>
|
</Col> : null}
|
{type === '2' ? <Col span={7}>
|
<Form.Item label={'凭证标识'}>
|
{getFieldDecorator('ModularDetailCode', {
|
initialValue: this.state.modularDetail[0] ? this.state.modularDetail[0].ModularDetailCode : '',
|
rules: [
|
{
|
required: true,
|
message: '请选择凭证标识!'
|
}
|
]
|
})(
|
<Select
|
showSearch
|
filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
|
>
|
{this.state.modularDetail.map(option =>
|
<Select.Option style={{whiteSpace: 'unset'}} title={option.CodeName} id={option.ModularDetailCode} key={option.ModularDetailCode} value={option.ModularDetailCode}>
|
{option.CodeName}
|
</Select.Option>
|
)}
|
</Select>
|
)}
|
</Form.Item>
|
</Col> : null}
|
{TypeCharOne === 'Lp' ? <Col span={7}>
|
<Form.Item label={
|
<Tooltip placement="topLeft" title="该标识用于生成行号规则">
|
<QuestionCircleOutlined className="mk-form-tip" />
|
标识
|
</Tooltip>
|
}>
|
{getFieldDecorator('mark', {
|
initialValue: '',
|
rules: [
|
{
|
required: true,
|
message: '请输入标识!'
|
},
|
{
|
pattern: /^[a-zA-Z0-9]*$/ig,
|
message: '请输入数字、字母以及_'
|
}
|
]
|
})(<Input placeholder="" autoComplete="off" />)}
|
</Form.Item>
|
</Col> : null}
|
</Row>
|
</Form>
|
)
|
}
|
}
|
|
export default Form.create()(BillCodeForm)
|
