项目中做了一个弹框,将新增和修改放到了同一个弹框,然后判断一个对象是否有值来判断是新增还是修改。
render() {
const extra = (
<Group>
<Button onClick={this.handleAdd}>新增</Button>
</Group>
);
return (
<Card
extra={extra}
bordered={false}
>
<Search />
<Table />
<ModalUpdate />
<ModalEdit />
</Card>
);
}
}
ModalUpdate 文件的代码如下
import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { routerRedux } from 'dva/router';
import moment from 'moment';
import { Card, Button, Form, Row, Col, Input, DatePicker, Select, Modal } from 'antd';
import {
fieldCheckSpace, fieldRequired
} from '../../../utils/utils';
import styles from './index.less';
const { Option } = Select;
const FormItem = Form.Item;
const thirdLayout = {
xs: 24,
sm: 24,
md: 8,
lg: 8,
xl: 8,
xxl: 8,
};
const formItemLayout = {
labelCol: {
xs: { span: 24 },
sm: { span: 24 },
md: { span: 8 },
lg: { span: 8 },
xl: { span: 8 },
xxl: { span: 8 },
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 24 },
md: { span: 14 },
lg: { span: 14 },
xl: { span: 14 },
xxl: { span: 14 },
},
};
@connect(({ modal, global, loading }) => ({
modal,
global,
}))
@Form.create()
export default class Main extends PureComponent {
componentWillReceiveProps(nextProps) {
if (!nextProps.modal.modalUpdateDetail) {
this.props.form.resetFields();
}
}
componentWillUnmount() {
this.props.dispatch({
type: 'modal/changeReducers',
payload: {
memberInfo: {}, // 数据
},
});
}
// 返回
handleBack = () => {
const { dispatch } = this.props;
dispatch(routerRedux.goBack());
};
// 修改 状态
handleUpdate = (record) => {
const { dispatch } = this.props;
dispatch({
type: 'modal/fetchUpdateMember',
payload: {
...record,
status: record.status === 'NORMAL' ? 'DISABLE' : 'NORMAL',
isJumptoPage: false, // 是否跳页
}
});
};
handleSubmit = () => {
// e.preventDefault();
const {
form,
dispatch,
modal: {
memberInfo,
}
} = this.props;
const { memberId } = memberInfo;
form.validateFields({ force: true }, (err, values) => {
if (!err) {
// 删除 params.payload 中值为 undefined
Object.keys(values).map((k) => {
if (values[k] === undefined) {
delete values[k];
}
});
if (memberId) { // 修改
dispatch({
type: 'modal/fetchUpdateMember',
payload: {
...memberInfo,
...values,
}
});
} else {
dispatch({
type: 'modal/fetchAddMember',
payload: {
...values,
}
});
}
}
});
};
// 关闭
handleCancel = () => {
this.props.dispatch({
type: 'modal/changeReducers',
payload: {
modalUpdateDetail: false,
memberInfo: {},
}
});
};
render() {
const {
modal,
form,
loadingAllRole,
} = this.props;
const { getFieldDecorator } = form;
const { memberInfo, modalUpdateDetail, } = modal;
const {
id,
memberId,
memberName,
shortName,
owned,
skillName,
email,
phone,
websiteName,
website,
auditor,
auditAt,
auditStatus,
status,
deleteFlag,
createdAt,
createdBy,
updatedAt,
updatedBy,
legalFlg,
signOrg,
orgTpCd,
regRgnTpCd,
busRgnTpCd,
provinceTpCd,
licenseCode,
icpCode,
mainOper,
partOper,
licenseBeginDate,
licenseEndDate,
legalrepresentname,
legalrepresentid,
citycode,
districtCode,
regAddress,
regAddrPost,
runAddr,
runAddrPost,
fax,
phone_service,
organizationCode,
remark,
} = memberInfo;
return (
<Modal
// confirmLoading={loading}
style={{ top: 20 }}
onOk={this.handleSubmit}
visible={modalUpdateDetail}
title={memberId ? '修改信息' : '新增信息'}
onCancel={this.handleCancel}
width={1200}
// maskClosable={false}
className={styles.updateLayout}
>
<Form>
<Row gutter={10}>
<Col {...thirdLayout}>
<FormItem
label="简称"
{...formItemLayout}
>
{getFieldDecorator('shortName', {
rules: [
{ ...fieldCheckSpace },
{ max: 32, message: '不能超过32个字' },
],
initialValue: shortName
})(
<Input placeholder="请输入简称" />
)}
</FormItem>
<FormItem
label="业务联系人"
{...formItemLayout}
>
{getFieldDecorator('skillName', {
rules: [
{ ...fieldCheckSpace },
{ max: 32, message: '不能超过32个字' },
],
initialValue: skillName,
})(
<Input placeholder="请输入业务联系人" />
)}
</FormItem>
<FormItem
label="网站名称"
{...formItemLayout}
>
{getFieldDecorator('websiteName', {
rules: [
{ ...fieldCheckSpace },
{ max: 82, message: '不能超过82个字' },
],
initialValue: websiteName,
})(
<Input placeholder="请输入网站名称" />
)}
</FormItem>
<FormItem
label="营业执照开业日期"
{...formItemLayout}
>
{getFieldDecorator('licenseBeginDate', {
rules: [
],
initialValue: licenseBeginDate && licenseBeginDate !== null ?
moment(licenseBeginDate) : null,
})(
<DatePicker />
)}
</FormItem>
<FormItem
label="营业执照到期日"
{...formItemLayout}
>
{getFieldDecorator('licenseEndDate', {
rules: [
],
initialValue: licenseEndDate && licenseEndDate !== null ?
moment(licenseEndDate) : null,
})(
<DatePicker />
)}
</FormItem>
<FormItem
label="服务电话"
{...formItemLayout}
>
{getFieldDecorator('phone_service', {
rules: [
{ ...fieldCheckSpace },
{ max: 16, message: '不能超过16个字' },
],
initialValue: phone_service,
})(
<Input placeholder="请输入服务电话" />
)}
</FormItem>
<FormItem
label="营业执照"
{...formItemLayout}
>
{getFieldDecorator('licenseCode', {
rules: [
{ ...fieldCheckSpace },
{ max: 32, message: '不能超过32个字' },
],
initialValue: licenseCode,
})(
<Input placeholder="请输入营业执照" />
)}
</FormItem>
<FormItem
label="县/区"
{...formItemLayout}
>
{getFieldDecorator('districtCode', {
rules: [
{ ...fieldCheckSpace },
{ max: 32, message: '不能超过32个字' },
],
initialValue: districtCode,
})(
<Input placeholder="请输入县/区" />
)}
</FormItem>
<FormItem
label="营业地址"
{...formItemLayout}
>
{getFieldDecorator('runAddr', {
rules: [
{ ...fieldCheckSpace },
{ max: 64, message: '不能超过64个字' },
],
initialValue: runAddr,
})(
<Input placeholder="请输入营业地址" />
)}
</FormItem>
<FormItem
label="ICP备案号"
{...formItemLayout}
>
{getFieldDecorator('icpCode', {
rules: [
{ ...fieldCheckSpace },
{ max: 32, message: '不能超过32个字' },
],
initialValue: icpCode,
})(
<Input placeholder="请输入ICP备案号" />
)}
</FormItem>
</Col>
<Col {...thirdLayout}>
<FormItem
label="商户名称"
{...formItemLayout}
>
{getFieldDecorator('memberName', {
rules: [
{ ...fieldRequired('商户名称') },
{ ...fieldCheckSpace },
{ max: 125, message: '不能超过125个字' },
],
initialValue: memberName,
})(
<Input placeholder="请输入商户名称" />
)}
</FormItem>
<FormItem
label="业务联系人邮箱"
{...formItemLayout}
>
{getFieldDecorator('email', {
rules: [
{ ...fieldRequired('业务联系人邮箱') },
{ ...fieldCheckSpace },
{ max: 64, message: '不能超过64个字' },
],
initialValue: email,
})(
<Input placeholder="请输入业务联系人邮箱" />
)}
</FormItem>
<FormItem
label="网址"
{...formItemLayout}
>
{getFieldDecorator('website', {
rules: [
{ ...fieldCheckSpace },
{ max: 64, message: '不能超过64个字' },
],
initialValue: website,
})(
<Input placeholder="请输入网址" />
)}
</FormItem>
<FormItem
label="法人代表姓名"
{...formItemLayout}
>
{getFieldDecorator('legalrepresentname', {
rules: [
{ ...fieldCheckSpace },
{ max: 32, message: '不能超过32个字' },
],
initialValue: legalrepresentname,
})(
<Input placeholder="请输入法人代表姓名" />
)}
</FormItem>
<FormItem
label="法人代表身份证"
{...formItemLayout}
>
{getFieldDecorator('legalrepresentid', {
rules: [
{ ...fieldCheckSpace },
{ max: 18, message: '不能超过18个字' },
],
initialValue: legalrepresentid,
})(
<Input placeholder="请输入法人代表身份证" />
)}
</FormItem>
<FormItem
label="注册国家"
{...formItemLayout}
>
{getFieldDecorator('regRgnTpCd', {
rules: [
{ ...fieldCheckSpace },
{ max: 32, message: '不能超过32个字' },
],
initialValue: regRgnTpCd,
})(
<Input placeholder="请输入注册国家" />
)}
</FormItem>
<FormItem
label="营业国家"
{...formItemLayout}
>
{getFieldDecorator('busRgnTpCd', {
rules: [
{ ...fieldCheckSpace },
{ max: 32, message: '不能超过32个字' },
],
initialValue: busRgnTpCd,
})(
<Input placeholder="请输入营业国家" />
)}
</FormItem>
<FormItem
label="注册地址"
{...formItemLayout}
>
{getFieldDecorator('regAddress', {
rules: [
{ ...fieldCheckSpace },
{ max: 64, message: '不能超过64个字' },
],
initialValue: regAddress,
})(
<Input placeholder="请输入注册地址" />
)}
</FormItem>
<FormItem
label="营业地址邮编"
{...formItemLayout}
>
{getFieldDecorator('runAddrPost', {
rules: [
{ ...fieldCheckSpace },
{ max: 6, message: '不能超过6个字' },
],
initialValue: runAddrPost,
})(
<Input placeholder="请输入营业地址邮编" />
)}
</FormItem>
<FormItem
label="兼营业务"
{...formItemLayout}
>
{getFieldDecorator('partOper', {
rules: [
{ ...fieldCheckSpace },
{ max: 100, message: '不能超过100个字' },
],
initialValue: partOper,
})(
<Input placeholder="请输入兼营业务" />
)}
</FormItem>
</Col>
<Col {...thirdLayout}>
<FormItem
label="所属公司"
{...formItemLayout}
>
{getFieldDecorator('owned', {
rules: [
{ ...fieldCheckSpace },
{ max: 32, message: '不能超过32个字' },
],
initialValue: owned,
})(
<Input placeholder="请输入所属公司" />
)}
</FormItem>
<FormItem
label="业务联系人手机"
{...formItemLayout}
>
{getFieldDecorator('phone', {
rules: [
{ ...fieldRequired('业务联系人手机') },
{ max: 64, message: '不能超过11个字' },
],
initialValue: phone,
})(
<Input placeholder="请输入业务联系人手机" />
)}
</FormItem>
<FormItem
label="签约机构"
{...formItemLayout}
>
{getFieldDecorator('signOrg', {
rules: [
{ ...fieldCheckSpace },
{ max: 8, message: '不能超过8个字' },
],
initialValue: signOrg,
})(
<Input placeholder="请输入签约机构" />
)}
</FormItem>
<FormItem
label="组织机构代码号"
{...formItemLayout}
>
{getFieldDecorator('organizationCode', {
rules: [
{ ...fieldCheckSpace },
{ max: 32, message: '不能超过32个字' },
],
initialValue: organizationCode,
})(
<Input placeholder="请输入组织机构代码号(3证之一)" />
)}
</FormItem>
<FormItem
label="传真"
{...formItemLayout}
>
{getFieldDecorator('fax', {
rules: [
{ ...fieldCheckSpace },
{ max: 32, message: '不能超过32个字' },
],
initialValue: fax,
})(
<Input placeholder="请输入传真" />
)}
</FormItem>
<FormItem
label="所在省份/州"
{...formItemLayout}
>
{getFieldDecorator('provinceTpCd', {
rules: [
{ ...fieldCheckSpace },
{ max: 32, message: '不能超过32个字' },
],
initialValue: provinceTpCd,
})(
<Input placeholder="请输入所在省份/州" />
)}
</FormItem>
<FormItem
label="所在城市"
{...formItemLayout}
>
{getFieldDecorator('citycode', {
rules: [
{ ...fieldCheckSpace },
{ max: 32, message: '不能超过32个字' },
],
initialValue: citycode,
})(
<Input placeholder="请输入所在城市" />
)}
</FormItem>
<FormItem
label="注册地址邮编"
{...formItemLayout}
>
{getFieldDecorator('regAddrPost', {
rules: [
{ ...fieldCheckSpace },
{ max: 6, message: '不能超过6个字' },
],
initialValue: regAddrPost,
})(
<Input placeholder="请输入注册地址邮编" />
)}
</FormItem>
<FormItem
label="主营业务"
{...formItemLayout}
>
{getFieldDecorator('mainOper', {
rules: [
{ ...fieldCheckSpace },
{ max: 32, message: '不能超过32个字' },
],
initialValue: mainOper,
})(
<Input placeholder="请输入主营业务" />
)}
</FormItem>
</Col>
</Row>
</Form>
</Modal>
);
}
}
代码中使用visible={modalUpdateDetail} 来进行判断弹框是否展示,进行测试的时候发现,
如果第一步操作执行的是修改操作,一些默认值填充上去,如果不作处理,第二部执行新增操作的时候,会把第一个默认的值带着,导致新增弹框弹出来的时候form表单中就是数值,效果体验特别不好,
后面发现在Modal文件里面添加componentWillReceiveProps中处理报表重置,就可以刷新form表单
componentWillReceiveProps(nextProps) {
if (!nextProps.modal.modalUpdateDetail) {
this.props.form.resetFields();
}
}