fix: 日历交互优化及问题修改

src/pages/bsmanager/workOrder/holidays/components/HolidayConfig.jsx

+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.holidayOptions);
+      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={msg.holidayOptions} />
+                  ) : (
+                    <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)}
+        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;

src/pages/bsmanager/workOrder/holidays/components/WorkTiemConfig.jsx

@@ -18,7 +18,7 @@ const WorkTiemConfig = props => {
   const getFormData = () => {
     console.log(msg, 'msg');
     form.setFieldsValue({
-      workTime: [moment(msg.from, 'HH:mm:ss'), moment(msg.to, 'HH:mm:ss')],
+      workTime: [moment(msg.from, 'HH:mm'), moment(msg.to, 'HH:mm')],
     });
   };
   // 时间段是否重叠
@@ -34,9 +34,9 @@ const WorkTiemConfig = props => {
         let obj = {};
         console.log(modalType);
         console.log(validate);
-        console.log(moment(validate.workTime[0]._d).format('HH:mm:ss'));
-        let startTime = moment(validate.workTime[0]._d).format('HH:mm:ss');
-        let endTime = moment(validate.workTime[1]._d).format('HH:mm:ss');
+        console.log(moment(validate.workTime[0]._d).format('HH:mm'));
+        let startTime = moment(validate.workTime[0]._d).format('HH:mm');
+        let endTime = moment(validate.workTime[1]._d).format('HH:mm');
         for (let i = 0; i < allTime.length; i++) {
           if (allTime[i].name !== msg.name) {
             console.log(`${moment().format('YYYY-MM-DD')} ${allTime[i].from}`);
@@ -79,7 +79,7 @@ const WorkTiemConfig = props => {
         initialValues={{ remember: true }}
       >
         <Form.Item label="工作时间" name="workTime">
-          <TimePicker.RangePicker />
+          <TimePicker.RangePicker format="HH:mm" />
         </Form.Item>
       </Form>
     </Modal>

src/pages/bsmanager/workOrder/holidays/holidays.jsx

@@ -13,6 +13,7 @@ import {
   Input,
   Radio,
   Upload,
+  AutoComplete,
 } from 'antd';
 import {
   ImportOutlined,
@@ -39,8 +40,11 @@ import classNames from 'classnames';
 import WorkTiemConfig from './components/WorkTiemConfig';
 import AddModal from './components/AddModal';
 import Synchronize from './components/Synchronize';
+import HolidayConfig from './components/HolidayConfig';
 import styles from './holidays.less';
+
 const { confirm } = Modal;
+const holidaysList = new Set(['元旦', '春节', '清明节', '劳动节', '端午节', '中秋节', '国庆节']);
 moment.updateLocale('zh-cn', {
   weekdaysMin: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
 });
@@ -83,7 +87,9 @@ const Holidays = () => {
     holiday: false,
     workTime: false,
     synchronize: false,
+    calendar: false,
   });
+
   const workTime = useRef([
     {
       icon: require('../../../../assets/images/holidays/icon1.png'),
@@ -111,8 +117,10 @@ const Holidays = () => {
   const calendarHoliday = useRef(new Map()); // 日历上得假期
   const queryData = useRef({ year: new Date().getFullYear(), month: new Date().getMonth() + 1 });
   const tableData = useRef([]);
+  const editDateMsg = useRef({ isRest: '', date: '', msg: '', holidayOptions: '' });
   const [currentDate, setCurrentDate] = useState(moment().format('YYYY-MM-DD'));
   const [form] = Form.useForm();
+  const [formRest] = Form.useForm();
   useEffect(() => {
     document.querySelector('.ant-picker-content').setAttribute('border', 1);
     let year = new Date().getFullYear();
@@ -146,16 +154,16 @@ const Holidays = () => {
         workTime.current.forEach(item => {
           switch (item.name) {
             case '上午':
-              item.from = res.data.WorkTime.WORKTIME_MOR_FROM;
-              item.to = res.data.WorkTime.WORKTIME_MOR_TO;
+              item.from = res.data.WorkTime ? res.data.WorkTime.WORKTIME_MOR_FROM : '00:00';
+              item.to = res.data.WorkTime ? res.data.WorkTime.WORKTIME_MOR_TO : '00:00';
               break;
             case '下午':
-              item.from = res.data.WorkTime.WORKTIME_AFT_FROM;
-              item.to = res.data.WorkTime.WORKTIME_AFT_TO;
+              item.from = res.data.WorkTime ? res.data.WorkTime.WORKTIME_AFT_FROM : '00:00';
+              item.to = res.data.WorkTime ? res.data.WorkTime.WORKTIME_AFT_TO : '00:00';
               break;
             case '晚上':
-              item.from = res.data.WorkTime.WORKTIME_EVE_FROM;
-              item.to = res.data.WorkTime.WORKTIME_EVE_TO;
+              item.from = res.data.WorkTime ? res.data.WorkTime.WORKTIME_EVE_FROM : '00:00';
+              item.to = res.data.WorkTime ? res.data.WorkTime.WORKTIME_EVE_TO : '00:00';
               break;
 
             default:
@@ -164,11 +172,10 @@ const Holidays = () => {
         });
         console.log(workTime.current, 'workTime.current');
         const obj = JSON.parse(JSON.stringify(holidayStatistics));
-
-        obj.Holidays.value = res.data.HolidayStatistics.Holidays;
-        obj.SumDays.value = res.data.HolidayStatistics.SumDays;
-        obj.TakeDays.value = res.data.HolidayStatistics.TakeDays;
-        obj.WeekendDays.value = res.data.HolidayStatistics.WeekendDays;
+        obj.Holidays.value = res.data.HolidayStatistics?.Holidays;
+        obj.SumDays.value = res.data.HolidayStatistics?.SumDays;
+        obj.TakeDays.value = res.data.HolidayStatistics?.TakeDays;
+        obj.WeekendDays.value = res.data.HolidayStatistics?.WeekendDays;
         setHolidayStatistics(obj);
         // setFlag(flag + 1);
       }
@@ -176,9 +183,8 @@ const Holidays = () => {
   };
   // 删除节假日
   const delRow = record => {
-    let dayDate = record.DayDate.split(',')
-      .map(item => `${queryData.current.year}-${item}`)
-      .join(',');
+    console.log(record, 'record');
+    let dayDate = record.DayDate;
     DeleteFlowHoliday({ dayDate }).then(res => {
       if (res.code === 0) {
         message.success('删除成功');
@@ -201,109 +207,21 @@ const Holidays = () => {
     queryData.current.month = month;
     getData(year, month);
   };
+
   // 点击到的日期
   const onSelect = (value, obj) => {
     let date = value.format('YYYY-MM-DD');
-    if (calendarHoliday.current.has(date)) {
-      confirm({
-        title: '确定要改为工作吗？',
-        icon: <ExclamationCircleOutlined />,
-        content: `${date}(${obj.ncWeek})`,
-        okText: '是',
-        okType: 'primary',
-        cancelText: '否',
-        onOk() {
-          // setCanSelect(true);
-          DeleteFlowHoliday({ dayDate: date }).then(res => {
-            if (res.code === 0) {
-              message.success('删除成功');
-              getData(queryData.current.year, queryData.current.month);
-            } else {
-              message.error(res.msg);
-            }
-          });
-        },
-        onCancel() {},
-      });
-    } else {
-      confirm({
-        title: '确定要改为休息吗？',
-        icon: <ExclamationCircleOutlined />,
-        content: (
-          <div>
-            <div>{`${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={{
-                  display: obj.nWeek === 6 || obj.nWeek === 7 ? 'none' : 'flex',
-                  margin: '10px 0 0 0',
-                }}
-              >
-                <Input placeholder="请输入假日名称" />
-              </Form.Item>
-              {/* <Form.Item
-                label="节假日类型"
-                name="dayType"
-                style={{ margin: '10px 0 0 0' }}
-                initialValue={1}
-              >
-                <Radio.Group>
-                  <Radio value={1}>调休</Radio>
-                  <Radio value={3}>法定</Radio>
-                </Radio.Group>
-              </Form.Item> */}
-            </Form>
-          </div>
-        ),
-        okText: '是',
-        okType: 'primary',
-        cancelText: '否',
-        onOk() {
-          return new Promise((resolve, reject) => {
-            form.validateFields().then(validate => {
-              let name;
-              name = validate.dayName;
-              if (obj.nWeek === 6) {
-                name = '周六';
-              }
-              if (obj.nWeek === 7) {
-                name = '周日';
-              }
-              if (validate.dayName || obj.nWeek === 6 || obj.nWeek === 7) {
-                AddFlowHoliday({
-                  dayName: name,
-                  dayType: obj.nWeek === 7 || obj.nWeek === 6 ? 2 : 1,
-                  startDate: date,
-                  endDate: date,
-                }).then(res => {
-                  if (res.code === 0) {
-                    message.success('修改成功');
-                    getData(queryData.current.year, queryData.current.month);
-                    resolve();
-                  } else {
-                    message.error(res.msg);
-                    reject();
-                  }
-                });
-              } else {
-                message.error('请填写假期名称');
-                reject();
-              }
-            });
-          });
-        },
-        onCancel() {},
-      });
-    }
+    let options = tableData.current.map(item => ({
+      value: item.DayName,
+      label: item.DayName,
+    }));
+    editDateMsg.current = {
+      isRest: calendarHoliday.current.has(date),
+      date,
+      msg: obj,
+      holidayOptions: options,
+    };
+    setVisible({ ...visible, calendar: true });
   };
   // 日历渲染替换
   const dateCellRender = value => {
@@ -552,6 +470,11 @@ const Holidays = () => {
       value > moment(`${queryData.current.year}-${queryData.current.month}`).endOf('month')
     );
   };
+  // 日历保存回调
+  const calendarSubmit = () => {
+    setVisible({ ...visible, calendar: false });
+    getData(queryData.current.year, queryData.current.month);
+  };
 
   return (
     <div
@@ -581,8 +504,9 @@ const Holidays = () => {
             </div>
           </div>
           <div className={styles.content}>
-            {workTime.current.map(item => (
+            {workTime.current?.map(item => (
               <div
+                title="点击修改工作时间"
                 className={classNames(styles.workTimeBox, {
                   [styles.mor]: item.name === '上午',
                   [styles.aft]: item.name === '下午',
@@ -646,6 +570,15 @@ const Holidays = () => {
               <div className={styles.header}>
                 <div className={styles.title}>
                   {item.DayName}({item.DayDate?.split(',').length}天)
+                  <img
+                    src={require('/src/assets/images/holidays/Holiday.png')}
+                    alt=""
+                    style={{
+                      width: '25px',
+                      marginLeft: '10px',
+                      display: holidaysList.has(item.DayName) ? 'inline-block' : 'none',
+                    }}
+                  />
                 </div>
                 <div
                   className={styles.del}
@@ -694,6 +627,12 @@ const Holidays = () => {
         onSubumit={startSynchronize}
         handleCancel={() => setVisible({ ...visible, synchronize: false })}
       />
+      <HolidayConfig
+        visible={visible.calendar}
+        onSubumit={calendarSubmit}
+        msg={editDateMsg.current}
+        handleCancel={() => setVisible({ ...visible, calendar: false })}
+      />
     </div>
   );
 };