import React, { useState, useEffect, useCallback, memo } from 'react';
import {Modal, Input, message, Form, Calendar} from 'antd';
import {useHolidayDetailAddMutation} from '@/restapi/service/workCalendar/workCalendar'
import locale from 'antd/lib/calendar/locale/zh_CN'
import moment from 'moment';
import 'moment/locale/zh-cn';
import postGrest from "@/redux/postgrest";
moment.locale('zh-cn')
const AddOrEditMenu: React.FC<any> = (props) =>{
const { specModalData, visible } = props;
const [holidayDetailAdd] = useHolidayDetailAddMutation()
const [form] = Form.useForm();
const onOk = useCallback(() => {
form.validateFields().then(res => {
const obj:any = {}
obj.holiday_id = specModalData.id
//后台说要传special_type = 1去计算某些东西
obj.special_type = 1
obj.special_date = moment(res.special_date).format('YYYY-MM-DD')
postGrest().create('t_base_holiday_detail',{data:obj}).then((response:any)=>{
if(!response.code){
message.success("创建成功")
props.onConfirm();
}else{
message.warning(response.message)
}
})
});
}, []);
useEffect(() => {
//默认选中问题
form.setFieldsValue({...props.specModalData,special_date:moment(new Date())})
}, []);
return (
<Modal
maskClosable={false}
visible={visible}
title={`${specModalData && specModalData.id ? '编辑' : '新增'}`}
onCancel={props.onClose}
onOk={onOk}
width={1000}
>
<Form
style={{marginTop:'10px'}}
form={form}
labelCol={{
sm: { span: 3 },
}}
wrapperCol={{
sm: { span: 20 },
}}
>
<Form.Item
label="所属公休日"
name="holiday"
rules={[{ required: true, message: '请输入所属公休日' }]}
>
<Input readOnly/>
</Form.Item>
<Form.Item
label="休息日"
name="special_date"
rules={[{ required: true, message: '请选择休息日' }]}
>
<Calendar locale={locale}/>
</Form.Item>
</Form>
</Modal>
);
}
export default memo(AddOrEditMenu);
日历的显示