问题：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);
