react 回显字段 以及效验 DatePicker.RangePicker

问题：1地区管理 第一个框不需校验 仅仅校验市级 坑点：第一个 message: ’ ’ 里面必须为空‘ ’ 不可以‘’
<Form.Item
label=“会计管理地区”
name=‘area_id’
rules={[{ required: true, message: ’ ’ }]}
>
<Form.Item noStyle name=‘area_id’ rules={[{ required: true, message: ‘请选择所在区域’ }]}>
2.
<Form.Item
label=“报名时间”
name=‘rangeMoment’
rules={[{ required: true, message: ‘请选择报名时间’ }]}>
<DatePicker.RangePicker
format=“YYYY-MM-DD HH:mm:ss”
showTime
style={{ width: ‘250px’ }}
defaultValue={rangeMoment}
onChange={dates => { handleDateChange(dates) }}
/>
</Form.Item>
使用moment setRangeMoment([moment(query?.open_time),moment(query?.close_time)])
const [rangeMoment,setRangeMoment] = useState([null,null])
解决回显 invaldate 或’ ’ 导致的不准
3. select id 是数字1 省份10003 传过来query是字符串‘10003’ 刷新后select 显示 10003 需要Number（‘10003’）
4. <Form.Item
label=“学习时间”
name=‘expire_time’
rules={[{ required: true, message: ‘学习开始时间同报名时间’ }]}>
<DatePicker
showTime
style={{ width: ‘250px’ }}
format=“YYYY-MM-DD HH:mm:ss”
onChange={(value) => {
setInitLearnStartAt(value ? value.format(‘YYYY-MM-DD HH:mm:ss’) : ‘’)
}}
/>
</Form.Item>

import React, { useState, useEffect, useRef } from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { connect, Dispatch } from 'umi';

import {  Select, Form, Button, Input, DatePicker, Row, Col, Card } from 'antd';
import moment from 'moment';

const PlanList: React.FC<any> = (props) => {

    const { loading, dispatch, match, location } = props;

    const { query } = location;
  
    const [provinceList, setProvinceList] = useState<any>([]);
    const [cityList, setCityList] = useState<any>([]);
  
    // 时间范围
    const [rangePickerValue, setRangePickerValue] = useState<any>();
	// 结束时间
	const [endAt, setEndAt] = useState();
    // 开始时间
	const [startAt, setStartAt] = useState();
    // 打开时间选择时初始的时间
	const [initLearnStartAt, setInitLearnStartAt] = useState<any>();

    const [rangeMoment,setRangeMoment] = useState([null,null])

    const [areaId,setAreaId] = useState<any>('');

    const [isSubmitLoading , setIsSubmitLoading ] = useState(false)
    const isEdit = match.path.includes('/edit/'); // 是否是编辑页面
    const [form] = Form.useForm();
    const formItemLayout = {
        labelCol: { span: 2 },
        wrapperCol: { span: 14 },
    };

    const onFinish = async (e:any) => {
        if (isEdit) {
            requestModifyAnnounce(e);
        } else {
            requestSaveAnnounce(e);
        }
    }

        // 保存
        const requestSaveAnnounce = (values: any) => {
            setIsSubmitLoading(true);
            dispatch({
                type: 'AccountSeperate/saveAccount',
                payload: {
                    training_id:Number(match.params.id),
                    area_id: areaId,
                    open_time:startAt,
                    close_time:endAt,
                    expire_time: initLearnStartAt

                }
            }).then(() => {
                setIsSubmitLoading(false);
            }).catch(() => {
                setIsSubmitLoading(false);
            })
        }
    
        // 编辑
        const requestModifyAnnounce = (values: any) => {
            setIsSubmitLoading(true);
            dispatch({
                type: 'AccountSeperate/modifyAccount',
                payload: {
                    id: match.params.id,
                    data: {
                    id: match.params.id,
                    training_id:Number(match.params.trainingId), 
                    area_id: areaId,
                    open_time:startAt,
                    close_time:endAt,
                    expire_time: initLearnStartAt
                    }
                }
            }).then(() => {
                setIsSubmitLoading(false);
            }).catch(() => {
                setIsSubmitLoading(false);
            })
        }

    /**
     * @description: 表单值改变的回调
     */    
    const handleValuesChange = (e) => {
            // 限制禁学时长为整数
            if ('rest_time' in e) {
                const value = e.rest_time
                value && form.setFieldsValue({rest_time: parseInt(value)})
            }
        }

    // 获取省市区
    const queryDefaultRegin = () => {
        dispatch({
            type: 'common/fetchRegion',
        }).then((res: any) => {
            setProvinceList(res);
            for(const item of res) {
                if(item.region_id == query.province_id) {
                    setCityList(item.children);
                }
            } 
        })
    }

    const handleProviceChange = (region_id: any) => {
        for(const item of provinceList) {
            if(region_id == item.region_id) {
                setCityList(item.children);

                form.setFieldsValue({
                    county_id: '',
                    city_id: '',
                });
                break;
            }
        }
    }

    const handleCityChange = (region_id: number) => {
        for(const item of cityList) {
            if(region_id == item.region_id) {
                setAreaId(item.region_id)
                console.log(form.getFieldValue('city_id'))
                // form.setFieldsValue({
                //     county_id: ''
                // });
               //  setAreaId(0)
                break;
            }
        }
    }

        // 时间范围发生变化时
        const handleDateChange = (dates: any) => {
            if (!dates) return;
            const startTime = dates[0].format('YYYY-MM-DD HH:mm:ss');
            const endTime = dates[1].format('YYYY-MM-DD HH:mm:ss');
            setStartAt(startTime)
            setEndAt(endTime)
            // const days = (Date.parse(endTime) - Date.parse(startTime)) / (1 * 24 * 60 * 60 * 1000);
            // setRangePickerValue(Number(days + 1))

        }

    
    useEffect(() => {
        // 获取详情
        if(isEdit && provinceList.length) {
            console.log(cityList)
           setInitLearnStartAt(query?.expire_time)
           setStartAt(query?.open_time)
           setEndAt(query?.close_time)
           setAreaId(query?.area_id)
        //    const startTime = moment(query?.open_time).format('YYYY-MM-DD');
        //    const endTime = moment(query?.close_time).format('YYYY-MM-DD');
        //    const days = (Date.parse(endTime) - Date.parse(startTime)) / (1 * 24 * 60 * 60 * 1000);
        //    setRangePickerValue(Number(days + 1))
           setRangeMoment([moment(query?.open_time),moment(query?.close_time)])
           form.setFieldsValue({
            expire_time:moment(query?.expire_time),
            province_id:query.province_id,
            area_id:query?.area_id,
            rangeMoment: [moment(query?.open_time),moment(query?.close_time)]
           })

        }else{
            form.setFieldsValue({
                province_id:Number(query.province_id),
                area_id:query?.area_id,
               })
        }
    }, [provinceList])


    useEffect(() => {
        queryDefaultRegin()
    }, [])

    return (
        <PageHeaderWrapper title={isEdit ? '编辑分班-按会计管理地区' : '新增分班-按会计管理地区'} onBack={() => history.go(-1)}>
            <>
            <Form
                {...formItemLayout}
                onValuesChange={handleValuesChange}
                onFinish={onFinish}
                form={form}
            >
                 <Card>
                    <Form.Item
                        label="会计管理地区"
                        name='area_id' 
                        rules={[{ required: true, message: ' '  }]}
                    >
                        <Input.Group compact>
                            <Form.Item noStyle name='province_id'>
                                <Select
                                    showSearch
                                    disabled
                                    filterOption={(input, option: any) =>
                                        option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                    }
                                    placeholder="请选择" 
                                    onChange={handleProviceChange} 
                                    style={{width: '250px'}}>
                                    {
                                        provinceList.map((item: any) => {
                                            return <Option value={item.region_id} key={item.region_id}>{item.region_name}</Option>
                                        })
                                    }
                                </Select>
                            </Form.Item>
                            <Form.Item noStyle name='area_id' rules={[{ required: true, message: '请选择所在区域' }]}>
                                <Select  placeholder="请选择" onChange={handleCityChange} style={{width: '250px'}} allowClear>
                                    {
                                        cityList.map((item: any) => {
                                            return <Option value={item.region_id} key={item.region_id}>{item.region_name}</Option>
                                        })
                                    }
                                </Select>
                            </Form.Item>
                            {/* <Form.Item noStyle name='county_id'>
                                <Select placeholder="请选择" style={{width: 120}} allowClear>
                                    {
                                        countyList.map((item: any) => {
                                            return <Option value={item.region_id} key={item.region_id}>{item.region_name}</Option>
                                        })
                                    }
                                </Select>
                            </Form.Item> */}
              
                        </Input.Group>
                    </Form.Item>
                    <Form.Item  
                        label="报名时间"
                        name='rangeMoment'
                        rules={[{ required: true, message: '请选择报名时间' }]}>
                        <DatePicker.RangePicker
                            style={{ width: '500px' }}
                            defaultValue={rangeMoment}
                            format="YYYY-MM-DD HH:mm:ss"
                            showTime 
                            onChange={dates => { 
                                handleDateChange(dates) }}
                             />
                    </Form.Item>

                    <Form.Item  
                        label="学习时间"
                        name='expire_time'
                        rules={[{ required: true, message: '学习开始时间同报名时间' }]}>
                    <DatePicker 
                    showTime
                    style={{ width: '250px' }}
					format="YYYY-MM-DD HH:mm:ss"
					onChange={(value) => {
						setInitLearnStartAt(value ? value.format('YYYY-MM-DD HH:mm:ss') : '')
					}}
				/>
                  </Form.Item>

                  <Form.Item
                        wrapperCol={{ span: 24 }}
                    >
                        <Row justify="start" style={{ width: '100%' }}>
                            <Col offset={2}><Button onClick={() => { () => history.go(-1) }}>取消</Button></Col>
                            <Col offset={1}><Button htmlType="submit" type="primary" loading={isSubmitLoading} >保存</Button></Col>
                        </Row>

                    </Form.Item>
</Card>
            </Form>  

            </>
            </PageHeaderWrapper>
    )

}





export default connect((_: any) => {
    return {
        loading: _.loading.models.Training,
        user: _.user.currentUser,
    }
})(PlanList);