一、需求

二、组件封装

import React, { PureComponent, Fragment } from 'react';import moment from 'moment';import { Form, Row, Col, DatePicker, Icon, Button, message } from 'antd';import styles from './index.less';const FormItem = Form.Item;const RangePicker = DatePicker.RangePicker;const formItemLayout = {labelCol: { span: 3 },wrapperCol: { span: 21 },};// 判断时间段是否有重叠const isAcrossMethod = (startTimeList, endTimeList) => {const begin = startTimeList.sort();const over = endTimeList.sort();for (let i = 1; i < begin.length; i++) {if (begin[i] <= over[i - 1]) {return true;}}return false;};// 日期段组件@Form.create()export default class extends PureComponent {constructor(props) {super(props);this.state = {};}//日期变化onRangePickerChange = (id, dates) => {const { dateBar, dispatch, name, dispatchType } = this.props;let nextDateBar = dateBar.map(item => {return item.id != id? item: {...item,date_start: dates && dates.length ? moment(dates[0]).format('YYYY-MM-DD HH:mm:ss') : '',date_end: dates && dates.length ? moment(dates[1]).format('YYYY-MM-DD HH:mm:ss') : '',};});// console.log("nextDateBar==>", nextDateBar);dispatch({type: dispatchType,payload: { [name]: nextDateBar },});};//日期添加一条onAddOneBar = () => {const {form: { getFieldsValue, validateFields },dateBar,dispatch,name,dispatchType,} = this.props;const values = getFieldsValue();const reg = /^(date_bar_)/;const validateKeys = Object.keys(values).filter(key => reg.test(key));validateFields(validateKeys, errors => {if (errors) return false;//校验日期段不能重叠const startTimeList = dateBar.filter(item => item.date_start && item.date_end).map(item => item.date_start);const endTimeList = dateBar.filter(item => item.date_start && item.date_end).map(item => item.date_end);if (startTimeList.length > 1) {const isAcross = isAcrossMethod(startTimeList, endTimeList);if (isAcross) return message.error('日期区间不能有重叠');}//新加一条let nextDateBar = [...dateBar,{id: dateBar.reduce((maxId, item) => Math.max(item.id, maxId), -1) + 1,date_start: '',date_end: '',},];dispatch({type: dispatchType,payload: { [name]: nextDateBar },});});};//日期删除一条onRemoveOneBar = id => {const { dateBar, dispatch, name, dispatchType, disabled } = this.props;if (disabled) return false;dispatch({type: dispatchType,payload: {[name]: dateBar.filter(item => item.id != id),},});};render() {const {form: { getFieldDecorator },dateBar,name,disabled,} = this.props;const dateBarItems = dateBar.map(item => {return (<Row className={styles.excludeDiscountItem} key={item.id}><FormItem className={styles.datePicker}>{getFieldDecorator(`date_bar_${item.id}_${name}`, {initialValue: item.date_start? [moment(`${item.date_start}`, 'YYYY-MM-DD HH:mm:ss'),moment(`${item.date_end}`, 'YYYY-MM-DD HH:mm:ss'),]: null,rules: [{ type: 'array', required: true, message: '日期为必填项' }],})(<RangePickeronChange={this.onRangePickerChange.bind(this, item.id)}format="YYYY-MM-DD HH:mm:ss"showTime={{defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('23:59:59', 'HH:mm:ss')]}}disabled={disabled ? true : false}/>)}</FormItem>{dateBar.length > 1 && (<IconclassName={styles.dynamicDeleteButton}type="minus-circle-o"onClick={() => this.onRemoveOneBar(item.id)}/>)}</Row>);});return (<Fragment><FormItem {...formItemLayout} className={styles.excludeDiscount}>{dateBarItems}</FormItem>{dateBar.length < 20 && (<Buttonstyle={{ width: 70, marginTop: '-10px' }}type="link"icon="plus-circle"onClick={() => this.onAddOneBar()}disabled={disabled ? true : false}>添加时间</Button>)}</Fragment>);}} //日期bar.excludeDiscount {.excludeDiscountItem {display: flex;flex-direction: row;min-height: 60px;.datePicker {// max-width: 240px;min-width: 220px;// width: 22%;}.dynamicDeleteButton {margin-left: 6px;}}}

三、调用

<BatchDatename="selectedOpenDate"dateBar={formParams.selectedOpenDate}dispatch={dispatch}dispatchType="hallFeeForm/setFormData"disabled={this.status == 'view'}/>