import React, {Component} from 'react'
|
import PropTypes from 'prop-types'
|
import { is, fromJS } from 'immutable'
|
import { Col, Row, Switch } from 'antd'
|
import { CheckOutlined } from '@ant-design/icons'
|
|
import MKEmitter from '@/utils/events.js'
|
import './index.scss'
|
|
class MKCheckCard extends Component {
|
static propTpyes = {
|
config: PropTypes.object,
|
onChange: PropTypes.func
|
}
|
|
state = {
|
selectKeys: null,
|
config: null,
|
options: []
|
}
|
|
UNSAFE_componentWillMount() {
|
let config = fromJS(this.props.config).toJS()
|
|
let selectKeys = config.initval
|
let initlength = 0
|
if (config.multiple === 'true') {
|
selectKeys = config.initval ? config.initval.split(',') : []
|
initlength = selectKeys.length
|
selectKeys = this.filterVals(config.options, selectKeys)
|
}
|
|
if (!config.selectStyle && config.backgroundColor) {
|
config.selectStyle = 'custom'
|
} else if (!config.selectStyle) {
|
config.selectStyle = 'background'
|
}
|
|
if (config.display === 'picture' && !config.picratio) { // 兼容旧数据
|
config.picratio = config.ratio || '1:1'
|
}
|
|
config.selectClass = ` mk-${config.selectStyle} `
|
config.fields = config.fields || []
|
|
this.setState({
|
config: config,
|
options: fromJS(config.options).toJS(),
|
selectKeys: selectKeys
|
}, () => {
|
if (config.multiple === 'true' && selectKeys.length < initlength) {
|
this.props.onChange(selectKeys.join(','))
|
}
|
})
|
}
|
|
componentDidMount () {
|
const { config } = this.state
|
|
if (config.linkField) {
|
MKEmitter.addListener('mkFP', this.mkFormHandle)
|
}
|
}
|
|
shouldComponentUpdate (nextProps, nextState) {
|
return !is(fromJS(this.state), fromJS(nextState))
|
}
|
|
UNSAFE_componentWillReceiveProps (nextProps) {
|
const { config, selectKeys } = this.state
|
|
if (!is(fromJS(config.oriOptions), fromJS(nextProps.config.oriOptions))) {
|
if (config.multiple === 'true') {
|
let keys = this.filterVals(nextProps.config.options, fromJS(selectKeys).toJS())
|
if (keys.length < selectKeys.length) {
|
this.setState({
|
selectKeys: keys
|
}, () => {
|
this.props.onChange(keys.join(','))
|
})
|
}
|
}
|
|
this.setState({
|
config: {...config, oriOptions: nextProps.config.oriOptions},
|
options: fromJS(nextProps.config.options).toJS()
|
})
|
}
|
}
|
|
componentWillUnmount () {
|
this.setState = () => {
|
return
|
}
|
MKEmitter.removeListener('mkFP', this.mkFormHandle)
|
}
|
|
filterVals = (options, vals) => {
|
if (options.length === 0 || vals.length === 0) return vals
|
|
let ops = options.map(item => item.$value)
|
|
vals = vals.filter(val => ops.includes(val))
|
|
return vals
|
}
|
|
mkFormHandle = (uuid, parentId, level) => {
|
if (uuid !== this.state.config.uuid) return
|
|
const { config } = this.state
|
|
let options = config.oriOptions.filter(option => option.ParentID === parentId)
|
|
if (config.multiple === 'true') {
|
this.setState({
|
options,
|
selectKeys: []
|
})
|
this.props.onChange('')
|
} else {
|
let _option = options[0] && !options[0].$disabled ? options[0] : null
|
let val = _option ? _option.$value : ''
|
|
this.setState({
|
options,
|
selectKeys: 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)
|
})
|
}
|
}
|
}
|
|
changeCard = (item) => {
|
const { selectKeys, config } = this.state
|
|
if (config.readonly || item.$disabled) return
|
|
if (config.multiple === 'true') {
|
let keys = []
|
if (selectKeys.includes(item.$value)) {
|
keys = selectKeys.filter(key => key !== item.$value)
|
} else {
|
keys = [...selectKeys, item.$value]
|
}
|
|
this.setState({
|
selectKeys: keys
|
}, () => {
|
this.props.onChange(keys.join(','))
|
})
|
} else if (selectKeys !== item.$value) {
|
let other = {}
|
config.subFields && config.subFields.forEach((n, i) => {
|
other[n.field] = item[n.field]
|
setTimeout(() => {
|
MKEmitter.emit('mkFC', 'input', n.uuid, item[n.field])
|
}, i * 5)
|
})
|
config.linkFields && config.linkFields.forEach((m, i) => {
|
setTimeout(() => {
|
MKEmitter.emit('mkFP', m.uuid, item.$value, 0)
|
}, (i + 1) * 100)
|
})
|
|
this.setState({
|
selectKeys: item.$value
|
}, () => {
|
this.props.onChange(item.$value, other)
|
})
|
} else {
|
let other = {}
|
config.linkFields && config.linkFields.forEach((m, i) => {
|
setTimeout(() => {
|
MKEmitter.emit('mkFP', m.uuid, '', 0)
|
}, (i + 1) * 100)
|
})
|
|
this.setState({
|
selectKeys: ''
|
}, () => {
|
this.props.onChange('', other)
|
})
|
}
|
}
|
|
getCards = () => {
|
const { selectKeys, options, config } = this.state
|
const { display, width, fields, picratio, multiple, backgroundColor, selectStyle, selectClass } = config
|
|
if (options.length === 0) {
|
return null
|
} else if (display === 'color') {
|
return options.map(item => {
|
let _active = false
|
if (multiple === 'true') {
|
_active = selectKeys.includes(item.$value)
|
} else {
|
_active = selectKeys === item.$value
|
}
|
|
return <Col span={width} key={item.key}>
|
<div className={'card-color-cell' + (_active ? ' active' : '') + (item.$disabled ? ' disabled' : '')} style={{background: item.$color}} onClick={() => this.changeCard(item)}>
|
{fields.map(col => {
|
return <span className="content-line" key={col.key} style={{color: col.color, fontSize: col.fontSize + 'px', height: col.fontSize * 1.5 + 'px', textAlign: col.align}}>{item[col.field]}</span>
|
})}
|
<CheckOutlined />
|
</div>
|
</Col>
|
})
|
} else if (display !== 'picture') {
|
let _style = selectStyle === 'custom' ? {backgroundColor} : null
|
|
return options.map(item => {
|
let _active = false
|
if (multiple === 'true') {
|
_active = selectKeys.includes(item.$value)
|
} else {
|
_active = selectKeys === item.$value
|
}
|
|
return <Col span={width} key={item.key}>
|
<div className={'card-cell' + (_active ? ' active' : '') + selectClass + (item.$disabled ? ' disabled' : '')} onClick={() => this.changeCard(item)}>
|
<div className="bg-mask" style={_style}></div>
|
{fields.map(col => {
|
return <span className="content-line" key={col.key} style={{color: col.color, fontSize: col.fontSize + 'px', height: col.fontSize * 1.5 + 'px', textAlign: col.align}}>{item[col.field]}</span>
|
})}
|
</div>
|
</Col>
|
})
|
} else {
|
let paddingTop = '100%'
|
if (picratio === '4:3') {
|
paddingTop = '75%'
|
} else if (picratio === '3:2') {
|
paddingTop = '66.7%'
|
} else if (picratio === '16:9') {
|
paddingTop = '56.25%'
|
}
|
|
return options.map(item => {
|
let _active = false
|
if (multiple === 'true') {
|
_active = selectKeys.includes(item.$value)
|
} else {
|
_active = selectKeys === item.$value
|
}
|
|
return <Col span={width} key={item.key}>
|
<div className={'card-pic-cell ' + (_active ? 'active' : '') + (item.$disabled ? ' disabled' : '')} onClick={() => this.changeCard(item)} style={{paddingTop, backgroundImage: `url(${item.$url})`}}>
|
<div className="content-wrap">
|
<div className="content-center">
|
{fields.map(col => {
|
return <span className="content-line" key={col.key} style={{color: col.color, fontSize: col.fontSize + 'px', height: col.fontSize * 1.5 + 'px', textAlign: col.align}}>{item[col.field]}</span>
|
})}
|
</div>
|
<CheckOutlined />
|
</div>
|
</div>
|
</Col>
|
})
|
}
|
}
|
|
onChange = (val) => {
|
if (val) {
|
let keys = []
|
this.state.options.forEach(item => {
|
if (item.$disabled) return
|
|
keys.push(item.$value)
|
})
|
|
this.setState({
|
selectKeys: keys
|
}, () => {
|
this.props.onChange(keys.join(','))
|
})
|
} else {
|
this.setState({
|
selectKeys: []
|
}, () => {
|
this.props.onChange('')
|
})
|
}
|
}
|
|
render() {
|
const { config, options } = this.state
|
|
let extend = config.readonly ? 'readonly' : ''
|
|
if (options.length * config.width > 24) {
|
extend += ' mutile-line'
|
}
|
if (config.border === 'hide') {
|
extend += ' border-hide'
|
}
|
|
return (
|
<div className={'check-card-form-box ' + extend}>
|
{config.checkAll === 'show' && options.length > 3 ? <Switch size="small" onChange={this.onChange}/> : null}
|
<Row gutter={12}>{this.getCards()}</Row>
|
</div>
|
)
|
}
|
}
|
|
export default MKCheckCard
|
