ModalForm.js

/**
 * 钟是志
 * 2019年2月26日
 * 用于 新增弹出modal
 * 一个按钮 + 点击按钮显示的弹窗
 * 弹窗中包含一个表单 并填写数据后点确定 调接口->关闭弹窗 刷新页面
 * */

import ButtonDiy from '@/baseComponent/ButtonDiy';
import ModalDiy from '@/baseComponent/ModalDiy';
import React, { Component, Fragment } from 'react';
import { deepCopy } from '@/baseComponent/utils';
import { mustHaveValue, transLateTimeTOUnix } from '../../config/index';
import { message } from 'antd';
import PropTypes from 'prop-types';
import { startProcess } from '../publicApiService';
import FormArray from '../component/FormArray';

export default class ModalForm extends Component {
	constructor(props) {
		super(props);
		const { values } = this.props;
		this.state = {
			showModal: false,
			formValues: { ...values }, // 将默认值传进去 用于新增时可能遇到的需要传值的情况
			requireOtherFiled: {},
		};
	}

	componentWillUnmount() {}

	changeShow = () => {
		const { showModal } = this.state;
		this.clearData();
		this.setState({
			showModal: !showModal,
		});
	};

	formStateChange = (value, key) => {
		const { diyFormStateChange } = this.props;
		if (diyFormStateChange) {
			return diyFormStateChange(value, key, this);
		}

		let oldValue = this.state.formValues;
		if (typeof value === 'object') {
			oldValue[key] = deepCopy(value);
		} else {
			oldValue[key] = value;
		}
		this.setState({
			formValues: oldValue,
		});
	};

	clearData = () => {
		const { values } = this.props;
		this.setState({
			formValues: { ...values },
		});
	};

	handleOk = () => {
		let { formValues } = this.state;
		const {
			fields,
			url,
			responseCallBack,
			getPage,
			beforeSubmit,
			workId,
			seriousOptions,
		} = this.props;
		if (!mustHaveValue(fields, formValues)) {
			return false;
		}
		let data = {
			...formValues,
		};
		for (let item of fields) {
			if (data[item.key]) {
				data[item.key] = transLateTimeTOUnix(data[item.key], item.dataType);
			}
			if (data[item.endKey]) {
				data[item.endKey] = transLateTimeTOUnix(data[item.endKey], item.dataType);
			}
		}
		if (beforeSubmit) {
			data = beforeSubmit(data, this);
			if (!data) {
				return false;
			}
		}
		const postData = {
			content: JSON.stringify(data),
			appId: workId,
		};
		if (seriousOptions && seriousOptions.length) {
			postData.level = seriousOptions[0].key;
		}
		startProcess(postData).then((response) => {
			if (!responseCallBack(response)) {
				this.changeShow();
				return false;
			} else {
				message.success('保存成功');
				getPage();
				this.changeShow();
			}
		});
	};

	render() {
		const { showModal, formValues } = this.state;
		const { name, className, fields, nameSpan, fileSpan, icon, modalWidth } = this.props;

		return (
			<Fragment>
				<ButtonDiy name={name} className={className} icon={icon} handleClick={this.changeShow} />

				{showModal ? (
					<ModalDiy
						handleOk={this.handleOk}
						title={name}
						handleCancel={this.changeShow}
						width={modalWidth}>
						<FormArray
							config={fields}
							value={formValues}
							changeValue={this.formStateChange}
							nameSpan={nameSpan}
							fileSpan={fileSpan}
						/>
					</ModalDiy>
				) : null}
			</Fragment>
		);
	}
}
ModalForm.propTypes = {
	name: PropTypes.string, // 按钮名称和 弹窗的标题
	className: PropTypes.string, // 按钮样式
	fields: PropTypes.array.isRequired, // 填写的字段的配置
	values: PropTypes.object, // 如果有默认参数  则在页面的业务逻辑中传进来
	url: PropTypes.string.isRequired, // 接口url
	icon: PropTypes.string, // 按钮图标
	responseCallBack: PropTypes.func, // 接口返回数据检查
	getPage: PropTypes.func, // 刷新页面的方法
	nameSpan: PropTypes.object, // 页面排版
	fileSpan: PropTypes.object, // 页面排版
};

ModalForm.defaultProps = {
	name: '新增',
	className: 'primaryBlue',
	values: {},
	url: 'asdasd/asdasd',
	responseCallBack: (response) => {
		return !!response;
	},
	getPage: () => {},
	nameSpan: { big: 5, small: 5 },
	fileSpan: { big: 1, small: 1 },
};