From fd1a4a42bbef3e9c02e0fee346b49401ec0fe23f Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期一, 29 七月 2024 17:00:15 +0800
Subject: [PATCH] 2024-07-29
---
src/tabviews/zshare/mutilform/mkCheckCard/index.jsx | 274 ++++++++++++++++++++++++++++++++++++++++++++++--------
1 files changed, 232 insertions(+), 42 deletions(-)
diff --git a/src/tabviews/zshare/mutilform/mkCheckCard/index.jsx b/src/tabviews/zshare/mutilform/mkCheckCard/index.jsx
index 4c5a527..a73b13c 100644
--- a/src/tabviews/zshare/mutilform/mkCheckCard/index.jsx
+++ b/src/tabviews/zshare/mutilform/mkCheckCard/index.jsx
@@ -1,6 +1,8 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
-import { Col, Row } from 'antd'
+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'
@@ -12,26 +14,146 @@
}
state = {
- selectKeys: null
+ selectKeys: null,
+ config: null,
+ options: []
}
UNSAFE_componentWillMount() {
- const { config } = this.props
+ 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)
+ } else if (config.options[0] && typeof(config.options[0].$value) === 'number' && /^([0-9]|[1-9]\d{0,2})$/.test(config.initval)) {
+ selectKeys = +config.initval
+ }
+
+ 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({
- selectKeys: config.initval ? config.initval.split(',') : []
- })
- } else {
- this.setState({
- selectKeys: config.initval
+ 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 { config } = this.props
- const { selectKeys } = this.state
+ const { selectKeys, config } = this.state
if (config.readonly || item.$disabled) return
@@ -67,70 +189,138 @@
}, () => {
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 { display, width, options, fields, ratio, multiple, backgroundColor, borderColor } = this.props.config
- const { selectKeys } = this.state
+ const { selectKeys, options, config } = this.state
+ const { display, width, fields, picratio, multiple, backgroundColor, selectStyle, selectClass } = config
- let paddingTop = '100%'
- if (ratio === '4:3') {
- paddingTop = '75%'
- } else if (ratio === '3:2') {
- paddingTop = '66.7%'
- } else if (ratio === '16:9') {
- paddingTop = '56.25%'
- }
-
- let style = borderColor ? {borderColor} : {}
- let _style = backgroundColor ? {backgroundColor} : null
-
- if (!options || options.length === 0) {
+ if (options.length === 0) {
return null
- } else if (display !== 'picture') {
- if (!fields || fields.length === 0) {
- return null
- }
+ } else if (display === 'color') {
return options.map(item => {
let _active = false
- if (multiple === 'true' && selectKeys.includes(item.$value)) {
- _active = true
- } else if (multiple !== 'true' && selectKeys === item.$value) {
- _active = true
+ 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' : '') + (_style ? ' bg-control' : '') + (item.$disabled ? ' disabled' : '')} style={style} onClick={() => this.changeCard(item)}>
+ <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 key={col.key} style={{color: col.color, fontSize: col.fontSize + 'px', height: col.fontSize * 1.5 + 'px', textAlign: col.align}}>{item[col.field]}</span>
+ 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' && selectKeys.includes(item.$value)) {
- _active = true
- } else if (multiple !== 'true' && selectKeys === item.$value) {
- _active = true
+ 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={{...style, paddingTop, backgroundImage: `url(${item.$url})`}}>
+ <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 } = this.props
+ 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' + (config.readonly ? ' readonly' : '')}>
+ <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>
)
--
Gitblit v1.8.0