ChildForm.js 4.6 KB
/**
 * 钟是志
 * 2019年11月5日
 * 流程引擎 ChildForm组件
 *
 * */

import ButtonDiy from '@/baseComponent/ButtonDiy';
import ModalDiy from '@/baseComponent/ModalDiy';
import React, { Component, Fragment } from 'react';
import { mustHaveValue } from '@/baseComponent/utils';
import { Badge, Icon } from 'antd';
import FormArray from './FormArray';

export default class ChildForm extends Component {
	constructor(props) {
		super(props);
		this.state = {
			showModal: false,
			formValues: [
				{
					formKey: Math.random(),
				},
			],
			requireOtherFiled: {},
		};
	}

	changeShow = () => {
		const { value } = this.props;
		const { showModal } = this.state;
		if (!value || typeof value !== 'object' || !Array.isArray(value)) {
			this.setState({
				formValues: [
					{
						formKey: Math.random(),
					},
				],
				showModal: !showModal,
			});
		} else {
			let formValues = [];
			for (let item of value) {
				formValues.push({
					formKey: Math.random(),
					...item,
				});
			}
			this.setState({
				formValues,
				showModal: !showModal,
			});
		}
	};

	formStateChange = (value, key, index) => {
		let oldValue = this.state.formValues;
		oldValue[index][key] = value;
		this.setState({
			formValues: oldValue,
		});
	};
	addOneForm = () => {
		let oldValue = this.state.formValues;
		oldValue.push({
			formKey: Math.random(),
		});
		this.setState({
			formValues: oldValue,
		});
	};

	deleteOneForm = (index) => {
		let oldValue = this.state.formValues;
		oldValue.splice(index, 1);
		this.setState({
			formValues: oldValue,
		});
	};

	componentDidMount() {}

	handleOk = () => {
		const { formValues } = this.state;
		const { config } = this.props;
		const {
			componentProps: { thisFields },
		} = config;
		for (let item of formValues) {
			if (!mustHaveValue(thisFields, item)) {
				return false;
			}
		}
		this.props.onChange(formValues, config.key);
		this.changeShow();
		return false;
	};

	render() {
		const { showModal, formValues } = this.state;
		const { config, disabled } = this.props;
		const {
			componentProps: { thisFields },
		} = config;
		const modalProps = {
			handleOk: this.handleOk,
			title: config.name,
			handleCancel: this.changeShow,
			width: 800,
		};
		if (disabled) {
			modalProps.footer = null;
		}
		const Fields = [];

		for (let item of thisFields) {
			if (item.comName !== 'Label') {
				Fields.push(item.name);
			}
		}
		const Filter = [];
		for (let item of thisFields) {
			let name = '';
			if (item.defaultValue) {
				name = item.defaultValue.replace(/[\r\n]/g, '');
			}
			if (item.comName === 'Label' && name && Fields.indexOf(name) > -1) {
				continue;
			} else {
				Filter.push(item);
			}
		}

		return (
			<Fragment>
				<ButtonDiy name={disabled ? '查看' : '编辑'} handleClick={this.changeShow} />

				{showModal ? (
					<ModalDiy {...modalProps}>
						{formValues.map((x, index) => {
							return (
								<div
									style={{
										border: '1px solid gray',
										width: '95%',
										margin: '0 auto',
										marginBottom: '15px',
									}}
									key={x.formKey}>
									{disabled ? (
										<Badge
											count={
												<Icon
													type={'check'}
													style={{
														color: '#52c41a',
														paddingTop: '20px',
														paddingRight: '20px',
													}}
												/>
											}>
											<FormArray
												config={thisFields}
												value={x}
												changeValue={(value, key) => {
													this.formStateChange(value, key, index);
												}}
												disabled={disabled}
												nameSpan={{ big: 7, small: 7 }}
												fileSpan={{ big: 2, small: 2 }}
											/>
										</Badge>
									) : (
										<Badge
											count={
												<Icon
													type={'close-circle'}
													onClick={() => {
														this.deleteOneForm(index);
													}}
													style={{
														color: '#f5222d',
														paddingTop: '20px',
														paddingRight: '20px',
													}}
												/>
											}>
											<FormArray
												config={Filter}
												value={x}
												changeValue={(value, key) => {
													this.formStateChange(value, key, index);
												}}
												disabled={disabled}
												nameSpan={{ big: 9, small: 9 }}
												fileSpan={{ big: 2, small: 2 }}
											/>
										</Badge>
									)}
								</div>
							);
						})}
						{disabled ? null : (
							<div style={{ paddingTop: '20px', textAlign: 'center' }}>
								<ButtonDiy name={'新增'} className={'defaultRed'} handleClick={this.addOneForm} />
							</div>
						)}
					</ModalDiy>
				) : null}
			</Fragment>
		);
	}
}