/** * 赖井平 * 2019年3月2日 * 用于 批量弹窗操作 * */ import ButtonDiy from '@/baseComponent/ButtonDiy'; import ModalDiy from '@/baseComponent/ModalDiy'; import FormArray from '../component/FormArray'; import React, { Component, Fragment } from 'react'; import { checkDate } from '@/baseComponent/utils'; import { message } from 'antd'; import PropTypes from 'prop-types'; export default class ModalBatch extends Component { constructor(props) { super(props); const { values } = this.props; this.state = { showModal: false, formValues: { ...values }, // 将默认值传进去 用于新增时可能遇到的需要传值的情况 }; } componentWillUnmount() { } changeShow = () => { const { beforeShowModel, selectRows, initFormValues } = this.props; const { formValues, showModal } = this.state; if (!selectRows.length && !this.state.showModal) { message.warning('请至少选择一条数据'); return false; } if(initFormValues && !showModal){ initFormValues(selectRows,formValues).then((response)=>{ this.setState({ formValues: response , },()=>{ //console.log(this.state.formValues); }) }); } /** * 设置modal是否显示 * */ let flag; if (!showModal && beforeShowModel) { beforeShowModel(this.props, ({ text, type, isNotShow }) => { flag = isNotShow; if (isNotShow && text) { message[type](text); } }); } if (flag) { return false; } /** * 设置modal是否显示 * */ this.clearData(); this.setState({ showModal: !showModal, }); }; formStateChange = (value, key) => { let oldValue = this.state.formValues; oldValue[key] = value; this.setState({ formValues: oldValue, }); }; clearData = () => { const { values, giveDefaultValue, selectRows} = this.props; let formValues = { ...values, }; if(giveDefaultValue){ formValues = giveDefaultValue(selectRows,formValues); } this.setState({ formValues, }); }; handleOk = () => { let { formValues } = this.state; let param = { ...formValues }; const { fields, url, responseCallBack, getPage, beforeSubmit, selectRows, postKey, sourceKey, handleSelectRows, apiServiceApi } = this.props; for (let item of fields) { if (item.required && !formValues[item.key] && formValues[item.key] !== 0) { message.warning(`${item.name}是必填项,请填写`); return false; } /** * 校验开始时间必须在结束时间之前 * */ if (item.rule && item.rule === 'mustAfterStart') { const check = checkDate(formValues[item.key], formValues[item.checkKey]); if (!check) { message.warning(`${item.name}必须在${item.checkKeyName}之后`); return false; } } } param[postKey] = selectRows.map((item) => { return item[sourceKey]; }); if (beforeSubmit) { let postData = beforeSubmit(this.props, formValues); param = { ...param, ...postData, }; } apiServiceApi(param).then((response) => { if (response) { if (responseCallBack && !responseCallBack(response)) { this.changeShow(); return false; } else { handleSelectRows([]); message.success('保存成功'); this.changeShow(); getPage(); } } else { this.changeShow(); return false; } }); }; render() { const { showModal, formValues } = this.state; const { name, className, fields, nameSpan, fileSpan } = this.props; return ( <Fragment> <ButtonDiy name={name} className={className} handleClick={this.changeShow}/> {showModal ? <ModalDiy handleOk={this.handleOk} title={name} handleCancel={this.changeShow} > <FormArray config={fields} value={formValues} changeValue={this.formStateChange} nameSpan={nameSpan} fileSpan={fileSpan} style={{ paddingTop: '0px' }} /> </ModalDiy> : null} </Fragment>); } } ModalBatch.propTypes = { name: PropTypes.string, // 按钮名称和 弹窗的标题 className: PropTypes.string, // 按钮样式 fields: PropTypes.array.isRequired, // 填写的字段的配置 values: PropTypes.object, // 如果有默认参数 则在页面的业务逻辑中传进来 url: PropTypes.string.isRequired, // 接口url responseCallBack: PropTypes.func, // 接口返回数据检查 getPage: PropTypes.func, // 刷新页面的方法 nameSpan: PropTypes.object, // 页面排版 fileSpan: PropTypes.object, // 页面排版 }; ModalBatch.defaultProps = { name: '新增', className: 'primaryBlue', values: {}, sourceKey: 'id', postKey: 'ids', selectRows: [], url: 'asdasd/asdasd', responseCallBack: (response) => { return !!response; }, /*beforeShowModel: (props, callback) => { },*/ nameSpan: { big: 4, small: 4 }, fileSpan: { big: 1, small: 1 }, };