import React, {Component} from 'react'
|
import PropTypes from 'prop-types'
|
import { is, fromJS } from 'immutable'
|
import { Form, Row, Col, Input, InputNumber, Select, Tooltip } from 'antd'
|
import { QuestionCircleOutlined } from '@ant-design/icons'
|
|
import { formRule } from '@/utils/option.js'
|
import asyncComponent from '@/utils/asyncComponent'
|
import './index.scss'
|
|
const { TextArea } = Input
|
const FileUpload = asyncComponent(() => import('@/menu/components/share/sourcecomponent'))
|
|
class MainSearch extends Component {
|
static propTpyes = {
|
config: PropTypes.object, // input回车提交
|
inputSubmit: PropTypes.func, // input回车提交
|
editItem: PropTypes.object, // input回车提交
|
formlist: PropTypes.array // input回车提交
|
}
|
|
state = {
|
formlist: null,
|
type: 'box'
|
}
|
|
UNSAFE_componentWillMount () {
|
this.setState({
|
formlist: this.props.formlist
|
})
|
}
|
|
UNSAFE_componentWillReceiveProps(nextProps) {
|
if (!is(fromJS(this.props.editItem), fromJS(nextProps.editItem))) {
|
this.setState({}, () => {
|
let fieldsvalue = {}
|
let isCusField = false
|
let type = 'box'
|
|
nextProps.formlist.forEach(item => {
|
if (item.type === 'title') {
|
type = item.class
|
}
|
|
if (!item.key) return
|
|
if (item.key === 'field' && item.initval === 'other_field') {
|
isCusField = true
|
}
|
fieldsvalue[item.key] = item.initval
|
})
|
|
this.setState({
|
type: type,
|
formlist: nextProps.formlist.map(item => {
|
if (item.key === 'cusfield' && isCusField) {
|
item.hidden = false
|
} else if (item.key === 'value' && item.type === 'fileupload') {
|
item.hidden = true
|
item.initval = fieldsvalue.value
|
}
|
|
return item
|
})
|
}, () => {
|
if (!isCusField) {
|
delete fieldsvalue.cusfield
|
}
|
if (nextProps.editItem.type === 'image') {
|
this.setState({
|
formlist: this.state.formlist.map(item => {
|
if (item.key === 'value' && item.type === 'fileupload') {
|
item.hidden = false
|
}
|
|
return item
|
})
|
})
|
delete fieldsvalue.value
|
}
|
|
this.props.form.setFieldsValue(fieldsvalue)
|
})
|
|
})
|
}
|
}
|
|
selectChange = (item, value) => {
|
if (item.key === 'papertype') {
|
let option = item.options.filter(op => op.value === value)[0]
|
|
this.props.form.setFieldsValue({
|
width: option.width,
|
height: option.height
|
})
|
} else if (item.key === 'field') {
|
if (value === 'other_field') {
|
this.setState({
|
formlist: this.state.formlist.map(item => {
|
if (item.key === 'cusfield') {
|
item.hidden = false
|
}
|
|
return item
|
})
|
})
|
} else {
|
this.setState({
|
formlist: this.state.formlist.map(item => {
|
if (item.key === 'cusfield') {
|
item.hidden = true
|
}
|
|
return item
|
})
|
})
|
}
|
}
|
this.handleSubmit()
|
}
|
|
resetForm = (param) => {
|
let _param = JSON.parse(JSON.stringify(param))
|
delete _param.type
|
delete _param.uuid
|
delete _param.url
|
|
if (_param.field !== 'other_field') {
|
delete _param.cusfield
|
}
|
|
if (param.type === 'image') {
|
delete _param.value
|
}
|
|
this.props.form.setFieldsValue(_param)
|
}
|
|
getFields() {
|
const { getFieldDecorator } = this.props.form
|
const { type, formlist } = this.state
|
const fields = []
|
|
formlist.forEach((item, index) => {
|
if (item.hidden) return
|
|
if (item.type === 'title') {
|
fields.push(
|
<Col span={24} key={index}>
|
<Form.Item label={item.label} style={{margin: '0px'}}>
|
{item.initval}
|
</Form.Item>
|
</Col>
|
)
|
} else if (item.type === 'text') {
|
let _rules = []
|
if (item.key === 'value' && type === 'barcode') {
|
_rules = [{
|
pattern: /^[a-zA-Z0-9]*$/ig,
|
message: '条码值必须为数字或字母！'
|
}]
|
}
|
fields.push(
|
<Col span={24} key={index}>
|
<Form.Item label={item.label}>
|
{getFieldDecorator(item.key, {
|
initialValue: item.initval || '',
|
rules: [
|
{
|
required: !!item.required,
|
message: '请输入' + item.label + '字段!'
|
},
|
{
|
max: 512,
|
message: formRule.input.formMessage.replace('@max', 512)
|
},
|
..._rules
|
]
|
})(<Input placeholder="" autoComplete="off" onChange={this.handleSubmit} />)}
|
</Form.Item>
|
</Col>
|
)
|
} else if (item.type === 'number') { // 数字
|
let min = item.min || 0
|
|
fields.push(
|
<Col span={24} key={index}>
|
<Form.Item label={item.label}>
|
{getFieldDecorator(item.key, {
|
initialValue: item.initval,
|
rules: [
|
{
|
required: true,
|
message: '请输入' + item.label + '!'
|
}
|
]
|
})(<InputNumber min={min} precision={item.precision} onChange={(value) => {this.handleSubmit('number', value)}} />)}
|
</Form.Item>
|
</Col>
|
)
|
} else if (item.type === 'select') { // 下拉搜索
|
fields.push(
|
<Col span={24} key={index}>
|
<Form.Item label={item.label}>
|
{getFieldDecorator(item.key, {
|
initialValue: item.initval,
|
rules: [
|
{
|
required: !!item.required,
|
message: '请选择' + item.label + '!'
|
}
|
]
|
})(
|
<Select
|
showSearch
|
filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
|
getPopupContainer={() => document.getElementById('print-form-box')}
|
onChange={(value) => this.selectChange(item, value)}
|
>
|
{item.options.map(option =>
|
<Select.Option id={option.value} title={option.text} key={option.value} value={option.value}>{option.text}</Select.Option>
|
)}
|
</Select>
|
)}
|
</Form.Item>
|
</Col>
|
)
|
} else if (item.type === 'fileupload') {
|
fields.push(
|
<Col span={24} key={index}>
|
<Form.Item label={
|
item.tooltip ? <Tooltip placement="topLeft" title={item.tooltip}>
|
<QuestionCircleOutlined className="mk-form-tip" />
|
{item.label}
|
</Tooltip> : item.label
|
}>
|
{getFieldDecorator(item.key, {
|
initialValue: item.initval || '',
|
rules: [
|
{
|
required: item.required,
|
message: '请选择' + item.label + '!'
|
}
|
]
|
})(
|
<FileUpload type="picture" placement="right" onChange={this.handleSubmit} />
|
)}
|
</Form.Item>
|
</Col>
|
)
|
} else if (item.type === 'textarea') {
|
fields.push(
|
<Col span={24} key={index}>
|
<Form.Item label={
|
item.tooltip ? <Tooltip placement="topLeft" title={item.tooltip}>
|
<QuestionCircleOutlined className="mk-form-tip" />
|
{item.label}
|
</Tooltip> : item.label
|
}>
|
{getFieldDecorator(item.key, {
|
initialValue: item.initval || '',
|
rules: [
|
{
|
required: !!item.required,
|
message: '请输入' + item.label + '!'
|
},
|
{
|
max: 1024,
|
message: formRule.input.formMessage.replace('@max', 1024)
|
}
|
]
|
})(<TextArea autoSize={{ minRows: 2, maxRows: 6 }} onChange={this.handleSubmit} />)}
|
</Form.Item>
|
</Col>
|
)
|
}
|
})
|
|
return fields
|
}
|
|
handleConfirm = () => {
|
// 表单提交时检查输入值是否正确
|
return new Promise((resolve, reject) => {
|
this.props.form.validateFieldsAndScroll((err, values) => {
|
if (!err) {
|
values.uuid = this.props.editItem.uuid
|
values.type = this.props.editItem.type
|
resolve(values)
|
}
|
})
|
})
|
}
|
|
handleSubmit = (type, value) => {
|
if (type === 'number' && isNaN(parseInt(value))) return
|
|
this.setState({}, () => {
|
this.props.inputSubmit()
|
})
|
}
|
|
render() {
|
const formItemLayout = {
|
labelCol: {
|
xs: { span: 24 },
|
sm: { span: 8 }
|
},
|
wrapperCol: {
|
xs: { span: 24 },
|
sm: { span: 16 }
|
}
|
}
|
return (
|
<Form {...formItemLayout} className="print-setting-contrl" id="print-form-box">
|
<Row gutter={24}>{this.getFields()}</Row>
|
</Form>
|
)
|
}
|
}
|
|
export default Form.create()(MainSearch)
|
