import React, { useState, useEffect, useRef } from 'react'; import { Form, Modal, Input, message, Radio, Select, AutoComplete } from 'antd'; import { ExclamationCircleOutlined } from '@ant-design/icons'; import { AddFlowHoliday, DeleteFlowHoliday } from '@/services/holidays/holidays'; const { confirm } = Modal; const holidaysList = new Set(['元旦', '春节', '清明节', '劳动节', '端午节', '中秋节', '国庆节']); const HolidayConfig = props => { const { visible, onSubumit, handleCancel, msg } = props; const [options, setOptions] = useState([]); const [flag, setFlag] = useState(0); const [form] = Form.useForm(); const [formRest] = Form.useForm(); useEffect(() => { if (visible) { let obj = msg.msg; console.log(msg, 'afsdfasd'); let list = [...holidaysList].map(item => ({ value: item, label: item })); if (obj.nWeek === 6) { list.push({ value: '周六', label: '周六' }); } if (obj.nWeek === 7) { list.push({ value: '周日', label: '周日' }); } // console.log(list, 'list'); setOptions(list); if (!msg.isRest) { confirm({ title: '确定要改为休息吗?', icon: <ExclamationCircleOutlined />, content: ( <div> <div>{`${msg.msg.date}(${obj.ncWeek})`}</div> <Form form={form} preserve={false} labelCol={{ span: 6 }} wrapperCol={{ span: 18 }} initialValues={{ remember: true }} labelAlign="left" > <Form.Item label="假期名称" name="dayName" style={{ margin: '10px 0 0 0', }} > {obj.nWeek === 6 || obj.nWeek === 7 ? ( <Select placeholder="请选择假日名称" options={list} /> ) : ( <AutoComplete placeholder="请输入假日名称" options={msg.holidayOptions} /> )} </Form.Item> </Form> </div> ), okText: '是', okType: 'primary', cancelText: '否', onOk() { return new Promise((resolve, reject) => { form.validateFields().then(validate => { let name; name = validate.dayName; // if (validate.dayName === '周六') { // name = '周六'; // } // if (validate.dayName === '周日') { // name = '周日'; // } let dayType = 1; if (validate.dayName === '周六' || validate.dayName === '周日') { dayType = 2; } if (holidaysList.has(validate.dayName)) { dayType = 3; } if (validate.dayName) { AddFlowHoliday({ dayName: name, dayType, startDate: msg.date, endDate: msg.date, }).then(res => { if (res.code === 0) { message.success('修改成功'); onSubumit(); resolve(); } else { message.error(res.msg); reject(); } }); } else { message.error('请填写假期名称'); reject(); } }); }); }, onCancel() { handleCancel(); }, }); } else if (obj.nWeek !== 6 && obj.nWeek !== 7) { confirm({ title: '确定要改为工作吗?', icon: <ExclamationCircleOutlined />, content: `${msg.date}(${obj.ncWeek})`, okText: '是', okType: 'primary', cancelText: '否', onOk() { // setCanSelect(true); DeleteFlowHoliday({ dayDate: msg.date }).then(res => { if (res.code === 0) { message.success('删除成功'); onSubumit(); } else { message.error(res.msg); } }); }, onCancel() { handleCancel(); }, }); } } }, [visible]); const onFinish = () => { formRest.validateFields().then(values => { console.log(values); if (values.dayType === 1) { DeleteFlowHoliday({ dayDate: msg.date }).then(res => { if (res.code === 0) { message.success('删除成功'); onSubumit(); } else { message.error(res.msg); } }); } else { AddFlowHoliday({ dayName: values.dayName, dayType: values.dayName === '周日' || values.dayName === '周六' ? 2 : 3, startDate: msg.date, endDate: msg.date, }).then(res => { if (res.code === 0) { message.success('修改成功'); onSubumit(); } else { message.error(res.msg); } }); } }); }; const onFieldsChange = changedFields => { if (changedFields[0].name[0] === 'dayType') { setFlag(flag + 1); } }; return ( <div> <Modal title={null} visible={visible && (msg.msg.nWeek === 6 || msg.msg.nWeek === 7) && msg.isRest} onOk={onFinish} onCancel={handleCancel} maskClosable={false} destroyOnClose width={416} > <Form form={formRest} preserve={false} labelCol={{ span: 6 }} wrapperCol={{ span: 18 }} initialValues={{ remember: true }} onFieldsChange={onFieldsChange} labelAlign="left" > <Form.Item label="操作类型" name="dayType" style={{ margin: '10px 0 0 0' }} initialValue={1} > <Radio.Group> <Radio value={1}>改为上班</Radio> <Radio value={2}>改为节假日</Radio> </Radio.Group> </Form.Item> <Form.Item label="假期名称" name="dayName" rules={[ { required: formRest.getFieldValue('dayType') === 2, }, ]} style={{ margin: '10px 0 0 0', display: formRest.getFieldValue('dayType') === 2 ? 'flex' : 'none', }} > {msg.msg.nWeek === 6 || msg.msg.nWeek === 7 ? ( <Select placeholder="请选择假日名称" options={options} /> ) : ( <AutoComplete placeholder="请输入假日名称" options={options} /> )} </Form.Item> </Form> </Modal> </div> ); }; export default HolidayConfig;