import React, {Component} from 'react'
|
import { is, fromJS } from 'immutable'
|
import { Select } from 'antd'
|
|
import MKEmitter from '@/utils/events.js'
|
|
class MKSelect extends Component {
|
constructor(props) {
|
super(props)
|
|
const config = props.config
|
let value = config.initval
|
|
if (config.type === 'multiselect') {
|
if (value) {
|
value = value.split(',')
|
} else {
|
value = []
|
}
|
} else if (value) {
|
let option = config.oriOptions[0]
|
|
if (option && typeof(option.value) !== typeof(value)) {
|
if (typeof(option.value) === 'number' && !isNaN(value)) {
|
value = +value
|
}
|
}
|
}
|
|
this.state = {
|
config: fromJS(config).toJS(),
|
options: fromJS(config.options).toJS(),
|
value,
|
}
|
}
|
|
componentDidMount () {
|
const { config } = this.state
|
|
if (config.type !== 'multiselect') {
|
MKEmitter.addListener('mkFP', this.mkFormHandle)
|
}
|
MKEmitter.addListener('mkFC', this.mkFormFocus)
|
}
|
|
shouldComponentUpdate (nextProps, nextState) {
|
return !is(fromJS(this.state), fromJS(nextState))
|
}
|
|
UNSAFE_componentWillReceiveProps (nextProps) {
|
const { config, value } = this.state
|
|
if (!is(fromJS(config.oriOptions), fromJS(nextProps.config.oriOptions))) {
|
this.setState({
|
config: fromJS(nextProps.config).toJS(),
|
options: fromJS(nextProps.config.options).toJS()
|
})
|
|
let option = nextProps.config.oriOptions[0]
|
if (config.$first) {
|
this.setState({
|
value: nextProps.config.initval,
|
})
|
if (config.linkFields && nextProps.config.initval) {
|
config.linkFields.forEach((m, i) => {
|
setTimeout(() => {
|
MKEmitter.emit('mkFP', m.uuid, nextProps.config.initval, 0)
|
}, (i + 1) * 70)
|
})
|
}
|
} else if (option && typeof(option.value) !== typeof(value)) {
|
if (typeof(option.value) === 'number' && !isNaN(value)) {
|
this.setState({
|
value: +value
|
})
|
}
|
}
|
}
|
}
|
|
componentWillUnmount () {
|
this.setState = () => {
|
return
|
}
|
MKEmitter.removeListener('mkFP', this.mkFormHandle)
|
MKEmitter.removeListener('mkFC', this.mkFormFocus)
|
}
|
|
mkFormFocus = (type, uuid, val, level) => {
|
if (uuid !== this.props.config.uuid) return
|
if (type === 'focus') {
|
let _div = document.getElementById(uuid)
|
_div && _div.click && _div.click()
|
} else if (type === 'input' && (!level || level < 10)) {
|
let _level = level || 1
|
this.selectChange(val, _level++)
|
}
|
}
|
|
mkFormHandle = (uuid, parentId, level) => {
|
if (uuid !== this.state.config.uuid) return
|
|
const { config } = this.state
|
|
let options = config.oriOptions.filter(option => option.ParentID === parentId || option.value === '')
|
let _option = options[0] && !options[0].$disabled ? options[0] : null
|
let val = _option ? _option.value : ''
|
|
this.setState({
|
options,
|
value: val
|
})
|
|
let other = {}
|
|
if (config.subFields && _option) {
|
config.subFields.forEach((n, i) => {
|
other[n.field] = _option[n.field]
|
setTimeout(() => {
|
MKEmitter.emit('mkFC', 'input', n.uuid, _option[n.field])
|
}, i * 5)
|
})
|
}
|
|
this.props.onChange(val, other)
|
|
if (level < 7 && config.linkFields) {
|
config.linkFields.forEach((m, i) => {
|
setTimeout(() => {
|
MKEmitter.emit('mkFP', m.uuid, val, level + 1)
|
}, (i + 1) * 70)
|
})
|
}
|
}
|
|
selectChange = (val, level) => {
|
const { config } = this.state
|
let other = {}
|
|
if (config.subFields) {
|
let option = this.state.options.filter(m => m.value === val)[0]
|
option && config.subFields.forEach((n, i) => {
|
other[n.field] = option[n.field]
|
setTimeout(() => {
|
MKEmitter.emit('mkFC', 'input', n.uuid, option[n.field], level)
|
}, i * 5)
|
})
|
}
|
if (config.linkFields) {
|
config.linkFields.forEach((m, i) => {
|
setTimeout(() => {
|
MKEmitter.emit('mkFP', m.uuid, val, 0)
|
}, (i + 1) * 100)
|
})
|
}
|
|
this.props.onChange(val, other)
|
this.setState({value: val}, () => {
|
if (config.enter === 'tab') {
|
MKEmitter.emit('mkFC', 'focus', config.tabUuid)
|
} else if (config.enter === 'sub') {
|
config.tabUuid && MKEmitter.emit('mkFC', 'focus', config.tabUuid)
|
if (config.linkFields || config.subFields || config.controlFields) {
|
setTimeout(() => {
|
this.props.onSubmit(config.tabUuid)
|
}, 1000)
|
} else {
|
this.props.onSubmit(config.tabUuid)
|
}
|
}
|
})
|
}
|
|
mutilselectChange = (val) => {
|
this.props.onChange(val.join(','))
|
}
|
|
render() {
|
const { value, config, options } = this.state
|
|
if (config.type !== 'multiselect') {
|
return (
|
<Select
|
showSearch
|
allowClear
|
id={config.uuid}
|
value={value}
|
dropdownMatchSelectWidth={config.dropdown !== 'false'}
|
filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
|
onSelect={(val) => this.selectChange(val)}
|
onChange={(val) => val === undefined && this.selectChange('')}
|
disabled={config.readonly}
|
>
|
{options.map(option =>
|
<Select.Option id={option.key} title={option.label} disabled={option.$disabled} key={option.key} value={option.value}>{option.label}</Select.Option>
|
)}
|
</Select>
|
)
|
} else {
|
return (<Select
|
showSearch
|
id={config.uuid}
|
mode="multiple"
|
defaultValue={value}
|
dropdownMatchSelectWidth={config.dropdown !== 'false'}
|
filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
|
onChange={this.mutilselectChange}
|
disabled={config.readonly}
|
>
|
{options.map(option =>
|
<Select.Option id={option.key} title={option.label} disabled={option.$disabled} key={option.key} value={option.value}>{option.label}</Select.Option>
|
)}
|
</Select>)
|
}
|
}
|
}
|
|
export default MKSelect
|
