From 46f79b491173d284a4900d19e7aecf7509481438 Mon Sep 17 00:00:00 2001 From: king <18310653075@163.com> Date: 星期五, 21 一月 2022 17:21:25 +0800 Subject: [PATCH] 2022-01-21 --- src/tabviews/zshare/mutilform/mkCheckCard/index.jsx | 100 ++++++++++++++++++++++++++++++++++++++++++++----- 1 files changed, 89 insertions(+), 11 deletions(-) diff --git a/src/tabviews/zshare/mutilform/mkCheckCard/index.jsx b/src/tabviews/zshare/mutilform/mkCheckCard/index.jsx index 4c5a527..9014cbb 100644 --- a/src/tabviews/zshare/mutilform/mkCheckCard/index.jsx +++ b/src/tabviews/zshare/mutilform/mkCheckCard/index.jsx @@ -1,5 +1,6 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' +import { is, fromJS } from 'immutable' import { Col, Row } from 'antd' import MKEmitter from '@/utils/events.js' @@ -12,26 +13,103 @@ } state = { - selectKeys: null + selectKeys: null, + config: null, + options: [] } UNSAFE_componentWillMount() { const { config } = this.props + let selectKeys = config.initval if (config.multiple === 'true') { + selectKeys = config.initval ? config.initval.split(',') : [] + } + + this.setState({ + config: fromJS(config).toJS(), + options: fromJS(config.options).toJS(), + selectKeys: selectKeys + }) + } + + 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 } = this.props + + if (!is(fromJS(config.oriOptions), fromJS(nextProps.config.oriOptions))) { this.setState({ - selectKeys: config.initval ? config.initval.split(',') : [] - }) - } else { - this.setState({ - selectKeys: config.initval + config: fromJS(nextProps.config).toJS(), + options: fromJS(nextProps.config.options).toJS() }) } } + componentWillUnmount () { + this.setState = () => { + return + } + MKEmitter.removeListener('mkFP', this.mkFormHandle) + } + + 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 @@ -71,8 +149,8 @@ } 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, ratio, multiple, backgroundColor, borderColor } = config let paddingTop = '100%' if (ratio === '4:3') { @@ -127,7 +205,7 @@ } render() { - const { config } = this.props + const { config } = this.state return ( <div className={'check-card-form-box' + (config.readonly ? ' readonly' : '')}> -- Gitblit v1.8.0