react antd Form.List Form.Iterm Checkbox.Group的案例
邮件订阅交易报表流水
需求功能
关键代码
import React from "react";
import { inject, observer } from "mobx-react";
import { withRouter } from "react-router-dom";
import {Input, Button, Checkbox, Form, Skeleton} from "antd";
import addIcon from 'images/icon/add.png';
import subIcon from 'images/icon/reduce.png';
@inject(state => ({
history: state.history,
subscribeInfo: state.store.subscribe.subscribeInfo,
getSubscribeInfo: state.store.subscribe.getSubscribeInfo,
setSubscribeInfo: state.store.subscribe.setSubscribeInfo,
}))
@withRouter
@observer
class Report extends React.Component {
formRef = React.createRef();
state = {
cycleOptions: [
{ label: '全部', value: 'all' },
{ label: '日报', value: 'day' },
{ label: '周报', value: 'week' },
{ label: '月报', value: 'month' },
],
cycleRules: [
{
required: true,
message: '请勾选交易报告纬度'
}
],
mailRules: [
{
required: true,
message: '请输入邮箱地址'
},
{
pattern: /\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/,
message: '邮箱地址不正确'
}
],
originReportCycle: [],
formData: {
toMails:[null],
toCcMails:[null],
reportCycle: [],
},
formLoading: true,
};
componentDidMount () {
this.props.getSubscribeInfo( () => {
let reportInfo = this.props.subscribeInfo;
let initCycle = this.initReportCycle(reportInfo.reportCycle);
this.setState({
formData: {
//为空时需有首元素，否则页面不会渲染，故而为空赋值为[null]
// toMails: reportInfo.toMails.length > 0 ? reportInfo.toMails : [null],
// toCcMails: reportInfo.toCcMails.length > 0 ? reportInfo.toCcMails : [null],
// 此种写法有BUG，当把接口数据设置到表单，编辑Form.List的原有其中任意一项数据，此时其他原有数据项直接置空。
// 请修改为如下写法，因为ObservableArray 与 Array 是有区别的，Form.list 期待的是Array。
toMails: reportInfo.toMails.length > 0 ? [...reportInfo.toMails] : [null],
toCcMails: reportInfo.toCcMails.length > 0 ? [...reportInfo.toCcMails] : [null],
reportCycle: initCycle,
},
formLoading: false,
}, () => {
this.onFill();
});
});
}
initReportCycle(reportCycle = []) {
let allCycle = this.state.cycleOptions.map(item => item.value);
if (reportCycle.includes('all') || ( !reportCycle.includes('all') && allCycle.length -1 === reportCycle.length ) ) {
return allCycle;
}
return reportCycle;
}
// checkout.group 修改值 里边的变更逻辑
// 利用每次只会变更一个值的特点
onChangeCycle = (currentCycle) => {
let allCycle = this.state.cycleOptions.map(item => item.value);
let originReportCycle = this.state.formData.reportCycle;
// console.log('allCycle', allCycle, 'originReportCycle', this.state.originReportCycle, 'currentCycle', currentCycle);
if (originReportCycle.length > currentCycle.length) { //减少勾选
//包含all，说明取消勾选非全选是其他选项，此时把全选去除
if (currentCycle.includes('all')) {
currentCycle.splice(currentCycle.indexOf('all'), 1);
}
//不包含all且剩余其他项，说明取消勾选的是全选，此时全部反选
if (! currentCycle.includes('all') && currentCycle.length === allCycle.length - 1 ) { //包含all
currentCycle = [];
}
} else { //增加勾选
//包含all，说明新增勾选的是全选，此时需选中全部选项
if (currentCycle.includes('all')) {
currentCycle = allCycle;
}
//不包含all且其他选项全部选中，此时需选中全部
if (! currentCycle.includes('all') && currentCycle.length === allCycle.length - 1 ) {
currentCycle = allCycle;
}
}
//记录原始值
this.setState({
originReportCycle: currentCycle,
}, () => {
this.onFill();
});
}
goBack() {
this.props.history.push('/yourPageName');
}
onCancel = () => {
this.goBack();
}
onFinish = (values) => {
let data = {
reportCycle: values.reportCycle,
toMails:values.toMails,
toCcMails :values.toCcMails,
}
this.props.setSubscribeInfo(data, () => {
this.goBack();
});
}
onFill = () => {
this.formRef.current.setFieldsValue({...this.state.formData});
}
render() {
let {
cycleOptions,
cycleRules,
mailRules,
formLoading,
} = this.state;
return (
<div className="trade-flow-report">
<div className="title">
<span>设置交易流水报告邮件接收人</span>
</div>
{
formLoading
? <Skeleton active={ true } title={ false } paragraph={{ rows: 15 }}/>
: <Form ref={this.formRef} onFinish={ this.onFinish} scrollToFirstError>
<div className="content">
<div className="item-row">
<div className="item-label">交易报告维度</div>
<div className="item-info">
<Form.Item name="reportCycle" rules={cycleRules}>
<Checkbox.Group
options={cycleOptions}
onChange={this.onChangeCycle}
/>
</Form.Item>
</div>
</div>
<div className="item-row">
<div className="item-label">报告收件人</div>
<div className="item-info">
<Form.List name="toMails">
{
( fields, { add , remove } ) => {
return (
<div className="mails-list">
{
fields.map( (field, index) => (
<span className="mails-box" key={field.key}>
<Form.Item {...field} validateTrigger={['onChange', 'onBlur']} rules={mailRules} className="user-mail">
<Input placeholder="请输入邮箱地址" className="common-input" value={field.value}/>
</Form.Item>
<span><img src={addIcon} alt="添加" onClick={() => add()}/></span>
<span>{index === 0 ? '' : <img src={subIcon} alt="删除" onClick={() => remove(field.name)}/>}</span>
</span>
))
}
</div>
);
}
}
</Form.List>
</div>
</div>
<div className="item-row">
<div className="item-label">报告抄送人</div>
<div className="item-info">
<Form.List name="toCcMails">
{
( fields, { add , remove } ) => {
return (
<div className="mails-list">
{
fields.map( (field, index) => (
<span className="mails-box" key={field.key}>
<Form.Item {...field} validateTrigger={['onChange', 'onBlur']} rules={mailRules} className="user-mail">
<Input placeholder="请输入邮箱地址" className="common-input" value={field.value}/>
</Form.Item>
<span><img src={addIcon} alt="添加" onClick={() => add()}/></span>
<span>{index === 0 ? '' : <img src={subIcon} alt="删除" onClick={() => remove(field.name)}/>}</span>
</span>
))
}
</div>
);
}
}
</Form.List>
</div>
</div>
</div>
<Form.Item className="operate-box">
<Button className="operate-btn" onClick={this.onCancel }>取消</Button>
<Button className="operate-btn" type="primary" htmlType="submit">提交</Button>
</Form.Item>
</Form>
}
</div>
)
}
}
export default Report