/** * 钟是志 * 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 }, };