import React, {Component} from 'react'
|
import PropTypes from 'prop-types'
|
import { fromJS } from 'immutable'
|
import { Form, Row, Col, Tooltip, Icon, Cascader, Input } from 'antd'
|
|
import asyncComponent from '@/utils/asyncComponent'
|
import MKEInput from './mkInput'
|
import MKNumberInput from './mkNumberInput'
|
import MKSelect from './mkSelect'
|
import './index.scss'
|
|
const { TextArea } = Input
|
|
const MKRadio = asyncComponent(() => import('./mkRadio'))
|
const StyleInput = asyncComponent(() => import('./styleInput'))
|
const MKFileUpload = asyncComponent(() => import('@/tabviews/zshare/fileupload'))
|
const MKColor = asyncComponent(() => import('@/tabviews/zshare/mutilform/mkColor'))
|
const MkIcon = asyncComponent(() => import('@/components/mkIcon'))
|
const SourceComponent = asyncComponent(() => import('@/menu/components/share/sourcecomponent'))
|
|
class ModalForm extends Component {
|
static propTpyes = {
|
formlist: PropTypes.array, // 表单列表
|
inputSubmit: PropTypes.func // input回车提交
|
}
|
|
state = {
|
formlist: [], // 表单项
|
}
|
|
record = {}
|
|
componentDidMount () {
|
let record = {}
|
let controlFields = {}
|
let fieldMap = new Map()
|
|
let formlist = this.props.formlist.filter(item => {
|
if (item.controlFields) { // 多层表单控制
|
controlFields[item.field] = item.controlFields
|
}
|
|
item.hidden = false
|
|
if (item.forbid) {
|
item.hidden = true
|
}
|
if (item.options) {
|
item.oriOptions = fromJS(item.options).toJS()
|
}
|
|
if (item.type === 'text') {
|
let _rules = [{
|
required: item.required,
|
message: item.label + '不可为空!'
|
}]
|
|
item.rules = _rules
|
} else if (item.type === 'number') {
|
item.rules = [{
|
required: item.required,
|
message: item.label + '不可为空!'
|
}, {
|
validator: (rule, value, callback) => this.handleConfirmPassword(rule, value, callback, item)
|
}]
|
} else if (item.type === 'textarea') {
|
let _rules = [
|
{
|
required: item.required,
|
message: item.label + '不可为空!'
|
}
|
]
|
item.rules = _rules
|
} else {
|
item.rules = [
|
{
|
required: item.required,
|
message: '请选择' + item.label + '!'
|
}
|
]
|
}
|
|
record[item.field] = item.initval
|
|
fieldMap.set(item.field, item)
|
|
return true
|
})
|
|
Object.keys(controlFields).forEach(key => {
|
if (!fieldMap.has(key)) return
|
|
let supItem = fieldMap.get(key)
|
let fields = []
|
|
controlFields[key].forEach(item => {
|
if (!fieldMap.has(item.field)) return
|
|
let cell = fieldMap.get(item.field)
|
|
if (cell.hidden) return
|
|
if (supItem.hidden || !item.values.includes(supItem.initval)) {
|
cell.hidden = true
|
fieldMap.set(item.field, cell)
|
}
|
|
fields.push(item)
|
})
|
|
supItem.controlFields = fields
|
|
fieldMap.set(key, supItem)
|
})
|
|
formlist = formlist.map(cell => {
|
let item = fieldMap.get(cell.field)
|
|
if (item.linkField) {
|
let supInitVal = fieldMap.get(item.linkField).initval || ''
|
|
item.options = item.oriOptions.filter(option => option.ParentID === supInitVal)
|
}
|
|
return item
|
})
|
|
this.record = record
|
|
this.setState({ formlist })
|
}
|
|
handleConfirmPassword = (rule, value, callback, item) => {
|
let val = parseFloat(value)
|
|
if (!isNaN(val)) {
|
if (typeof(item.min) === 'number' && val < item.min) {
|
callback(item.label + '最小值为 ' + item.min)
|
} else if (typeof(item.max) === 'number' && val > item.max) {
|
callback(item.label + '最大值为 ' + item.max)
|
}
|
}
|
callback()
|
}
|
|
recordChange = (values, item) => {
|
this.record = {...this.record, ...values}
|
|
if (item && item.controlFields) {
|
let map = new Map()
|
this.state.formlist.forEach(cell => {
|
if (!cell.field) return
|
map.set(cell.field, cell)
|
})
|
|
let reset = (current) => {
|
let val = this.record[current.field]
|
|
current.controlFields.forEach(cell => {
|
let m = map.get(cell.field)
|
m.hidden = current.hidden || !cell.values.includes(val)
|
|
if (m.hidden) {
|
m.initval = this.record[m.field]
|
}
|
|
map.set(cell.field, m)
|
|
if (m.controlFields) {
|
reset(m)
|
}
|
})
|
}
|
|
reset(item)
|
|
this.setState({
|
formlist: this.state.formlist.map(cell => {
|
if (cell.field) {
|
return map.get(cell.field)
|
}
|
return cell
|
})
|
})
|
}
|
}
|
|
getFields() {
|
const { getFieldDecorator } = this.props.form
|
const { formlist } = this.state
|
|
const fields = []
|
|
formlist.forEach((item, index) => {
|
if (item.hidden || item.forbid) return
|
|
let content = null
|
let label = item.tooltip ? <Tooltip placement="topLeft" title={item.tooltip}><Icon type="question-circle" />{item.label}</Tooltip> : item.label
|
|
if (item.type === 'text') {
|
content = (<MKEInput config={item} onChange={(val, defer) => !defer && this.recordChange({[item.field]: val})} onSubmit={this.props.inputSubmit} />)
|
} else if (item.type === 'number') {
|
content = (<MKNumberInput config={item} onChange={(val, defer) => !defer && this.recordChange({[item.field]: val})} onSubmit={this.props.inputSubmit} />)
|
} else if (item.type === 'select' || item.type === 'multiselect') {
|
content = (<MKSelect config={item} onChange={(val, other) => this.recordChange({[item.field]: val, ...other}, item)} />)
|
} else if (item.type === 'color') {
|
content = (<MKColor config={item} onChange={(val) => this.recordChange({[item.field]: val})}/>)
|
} else if (item.type === 'styleInput') {
|
content = (<StyleInput config={item} onChange={(val) => this.recordChange({[item.field]: val})}/>)
|
} else if (item.type === 'radio') {
|
content = (<MKRadio config={item} onChange={(val, other) => this.recordChange({[item.field]: val, ...other}, item)}/>)
|
} else if (item.type === 'fileupload') {
|
content = (<MKFileUpload config={item} onChange={(val) => this.recordChange({[item.field]: val})} />)
|
} else if (item.type === 'cascader') {
|
content = (<Cascader options={item.options} expandTrigger="hover" placeholder="" />)
|
} else if (item.type === 'textarea') {
|
content = (<TextArea rows={item.rows || 2} placeholder=""/>)
|
} else if (item.type === 'mkicon') {
|
content = (<MkIcon allowClear={item.allowClear}/>)
|
} else if (item.type === 'source') {
|
content = (<SourceComponent type="" placement="right"/>)
|
}
|
|
if (!content) return
|
|
fields.push(
|
<Col span={item.span || 12} key={index}>
|
<Form.Item label={label}>
|
{getFieldDecorator(item.field, {
|
initialValue: item.initval,
|
rules: item.rules
|
})(content)}
|
</Form.Item>
|
</Col>
|
)
|
})
|
|
return fields
|
}
|
|
handleConfirm = () => {
|
// 表单提交时检查输入值是否正确
|
return new Promise((resolve, reject) => {
|
this.props.form.validateFieldsAndScroll((err, values) => {
|
if (err) {
|
reject(err)
|
return
|
}
|
|
resolve(values)
|
})
|
})
|
}
|
|
render() {
|
const formItemLayout = {
|
labelCol: {
|
xs: { span: 24 },
|
sm: { span: 8 }
|
},
|
wrapperCol: {
|
xs: { span: 24 },
|
sm: { span: 16 }
|
}
|
}
|
|
return (
|
<Form {...formItemLayout} className="normal-form-field">
|
<Row gutter={24}>{this.getFields()}</Row>
|
</Form>
|
)
|
}
|
}
|
|
export default Form.create()(ModalForm)
|
