fix: 添加节假日管理功能

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

+/* eslint-disable no-underscore-dangle */
+import React, { useEffect } from 'react';
+
+import { Form, Modal, Input, TimePicker, message, Radio, DatePicker } from 'antd';
+import moment from 'moment';
+import { AddFlowHoliday } from '@/services/holidays/holidays';
+const { RangePicker } = DatePicker;
+const AddModal = props => {
+  const { onSubumit, handleCancel, visible, msg } = props;
+  const [form] = Form.useForm();
+  useEffect(() => {
+    form.resetFields();
+    if (visible) {
+      getFormData();
+    }
+  }, [visible]);
+  // 获取表单回显
+  const getFormData = () => {
+    console.log(msg, 'msg');
+    // form.setFieldsValue({
+    //   workTime: [moment(msg.from, 'HH:mm:ss'), moment(msg.to, 'HH:mm:ss')],
+    // });
+  };
+
+  // 提交表单
+  const onFinish = () => {
+    form.validateFields().then(validate => {
+      if (validate) {
+        AddFlowHoliday({
+          dayName: validate.dayName,
+          startDate: validate.dayTime[0].format('YYYY-MM-DD'),
+          endDate: validate.dayTime[1].format('YYYY-MM-DD'),
+          dayType: validate.dayType,
+        }).then(res => {
+          if (res.code === 0) {
+            message.success('新增成功');
+            onSubumit();
+          }
+        });
+      }
+    });
+  };
+  return (
+    <Modal
+      title="新增节假日管理"
+      visible={visible}
+      onOk={onFinish}
+      onCancel={handleCancel}
+      maskClosable={false}
+      destroyOnClose
+    >
+      <Form
+        form={form}
+        labelCol={{ span: 5 }}
+        wrapperCol={{ span: 18 }}
+        initialValues={{ remember: true }}
+      >
+        <Form.Item
+          label="假期名称"
+          name="dayName"
+          rules={[{ required: true, message: '请填写节假日名称' }]}
+        >
+          <Input placeholder="请输入假日名称" />
+        </Form.Item>
+
+        <Form.Item label="节假日类型" name="dayType" initialValue={1}>
+          <Radio.Group>
+            <Radio value={1}>休息</Radio>
+            <Radio value={3}>法定</Radio>
+          </Radio.Group>
+        </Form.Item>
+        <Form.Item
+          label="假期时间"
+          name="dayTime"
+          rules={[{ required: true, message: '请选择假期时间' }]}
+        >
+          <RangePicker />
+        </Form.Item>
+      </Form>
+    </Modal>
+  );
+};
+export default AddModal;

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

+/* eslint-disable no-underscore-dangle */
+import React, { useEffect, useState } from 'react';
+
+import { Form, Modal, Input, TimePicker, message, Radio, DatePicker, Select } from 'antd';
+import moment from 'moment';
+import { InitializationFlowHoliday } from '@/services/holidays/holidays';
+// const { RangePicker } = DatePicker;
+const Synchronize = props => {
+  const { onSubumit, handleCancel, visible, msg } = props;
+  const [form] = Form.useForm();
+  const [yearList, setYearList] = useState([]);
+  const [flag, setFlag] = useState(0);
+  useEffect(() => {
+    form.resetFields();
+    if (visible) {
+      getYearList(new Date().getFullYear());
+      getFormData();
+    }
+  }, [visible]);
+  // 获取表单回显
+  const getFormData = () => {
+    console.log(msg, 'msg');
+    form.setFieldsValue({ restType: 1 });
+    setFlag(flag + 1);
+  };
+  const getYearList = date => {
+    const list = [];
+    for (let i = date - 10; i < date + 10; i += 1) {
+      list.push(i);
+    }
+    setYearList(list);
+  };
+  // 提交表单
+  const onFinish = () => {
+    form.validateFields().then(validate => {
+      if (validate) {
+        InitializationFlowHoliday({
+          year: validate.year.join(','),
+          restType: validate.restType,
+          type: validate.type,
+        }).then(res => {
+          if (res.code === 0) {
+            message.success('同步成功');
+            onSubumit();
+          }
+        });
+      }
+    });
+  };
+  const onValuesChange = (changedValues, allValues) => {
+    console.log(changedValues, allValues);
+    setFlag(flag + 1);
+  };
+  return (
+    <Modal
+      title="一键同步配置"
+      visible={visible}
+      onOk={onFinish}
+      onCancel={handleCancel}
+      maskClosable={false}
+      destroyOnClose
+    >
+      <Form
+        form={form}
+        labelCol={{ span: 5 }}
+        wrapperCol={{ span: 18 }}
+        initialValues={{ remember: true }}
+        onValuesChange={onValuesChange}
+      >
+        <Form.Item
+          label="年份"
+          name="year"
+          initialValue={[new Date().getFullYear()]}
+          rules={[{ required: true, message: '请选择年份' }]}
+        >
+          <Select mode="multiple" dropdownMatchSelectWidth={false}>
+            {yearList.map(item => (
+              <Select.Option key={item} value={item}>
+                {item}
+              </Select.Option>
+            ))}
+          </Select>
+        </Form.Item>
+
+        <Form.Item label="类型" name="restType" initialValue={1}>
+          <Radio.Group>
+            <Radio value={1}>双休</Radio>
+            <Radio value={2}>单休</Radio>
+          </Radio.Group>
+        </Form.Item>
+        <Form.Item
+          label="周末休息日"
+          name="type"
+          initialValue={1}
+          style={{ display: form.getFieldValue('restType') === 1 ? 'none' : 'flex' }}
+        >
+          <Radio.Group>
+            <Radio value={1}>周六</Radio>
+            <Radio value={2}>周日</Radio>
+          </Radio.Group>
+        </Form.Item>
+      </Form>
+    </Modal>
+  );
+};
+export default Synchronize;

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

+/* eslint-disable no-underscore-dangle */
+import React, { useEffect } from 'react';
+
+import { Form, Modal, Input, TimePicker, message } from 'antd';
+import moment from 'moment';
+import { AddOrEditWorkTime } from '@/services/holidays/holidays';
+
+const WorkTiemConfig = props => {
+  const { onSubumit, handleCancel, visible, msg, modalType, allTime } = props;
+  const [form] = Form.useForm();
+  useEffect(() => {
+    form.resetFields();
+    if (visible) {
+      getFormData();
+    }
+  }, [visible]);
+  // 获取表单回显
+  const getFormData = () => {
+    console.log(msg, 'msg');
+    form.setFieldsValue({
+      workTime: [moment(msg.from, 'HH:mm:ss'), moment(msg.to, 'HH:mm:ss')],
+    });
+  };
+  // 时间段是否重叠
+  const isOverlap = (StartA, EndA, StartB, EndB) => {
+    const getT = t => new Date(t);
+    return !(getT(EndA) <= getT(StartB) || getT(StartA) >= getT(EndB));
+  };
+
+  // 提交表单
+  const onFinish = () => {
+    form.validateFields().then(validate => {
+      if (validate) {
+        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');
+        for (let i = 0; i < allTime.length; i++) {
+          if (allTime[i].name !== msg.name) {
+            console.log(`${moment().format('YYYY-MM-DD')} ${allTime[i].from}`);
+            if (
+              isOverlap(
+                `${moment().format('YYYY-MM-DD')} ${startTime}`,
+                `${moment().format('YYYY-MM-DD')} ${endTime}`,
+                `${moment().format('YYYY-MM-DD')} ${allTime[i].from}`,
+                `${moment().format('YYYY-MM-DD')} ${allTime[i].to}`,
+              )
+            ) {
+              message.error(`时间段与${allTime[i].name}时间段重合`);
+              return;
+            }
+          }
+        }
+
+        AddOrEditWorkTime({ type: msg.type, startTime, endTime }).then(res => {
+          if (res.code === 0) {
+            message.success('修改成功');
+            onSubumit();
+          }
+        });
+      }
+    });
+  };
+  return (
+    <Modal
+      title={`编辑${msg.name}时间`}
+      visible={visible}
+      onOk={onFinish}
+      onCancel={handleCancel}
+      maskClosable={false}
+      destroyOnClose
+    >
+      <Form
+        form={form}
+        labelCol={{ span: 5 }}
+        wrapperCol={{ span: 18 }}
+        initialValues={{ remember: true }}
+      >
+        <Form.Item label="工作时间" name="workTime">
+          <TimePicker.RangePicker />
+        </Form.Item>
+      </Form>
+    </Modal>
+  );
+};
+export default WorkTiemConfig;

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

+/* eslint-disable global-require */
+import React, { useState, useEffect, useRef } from 'react';
+import {
+  Calendar,
+  Button,
+  Select,
+  Space,
+  message,
+  Popconfirm,
+  Modal,
+  Form,
+  Input,
+  Radio,
+  Upload,
+} from 'antd';
+import {
+  ImportOutlined,
+  DeleteOutlined,
+  ExclamationCircleOutlined,
+  ExportOutlined,
+  PlusOutlined,
+  SyncOutlined,
+} from '@ant-design/icons';
+import {
+  AddFlowHoliday,
+  GetWorkDayManageInfo,
+  DeleteFlowHoliday,
+  DownLoadFlowHoliday,
+  ImportFlowHoliday,
+} from '@/services/holidays/holidays';
+import { calendar } from 'js-calendar-converter';
+import moment from 'moment';
+import 'moment/dist/locale/zh-cn';
+import locale from 'antd/es/date-picker/locale/zh_CN';
+import classNames from 'classnames';
+import WorkTiemConfig from './components/WorkTiemConfig';
+import AddModal from './components/AddModal';
+import Synchronize from './components/Synchronize';
+import styles from './holidays.less';
+const { confirm } = Modal;
+moment.updateLocale('zh-cn', {
+  weekdaysMin: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
+});
+const Holidays = () => {
+  const [holidayStatistics, setHolidayStatistics] = useState({
+    SumDays: {
+      type: 'SumDays',
+      name: '总天数',
+      value: 0,
+      icon: require('../../../../assets/images/holidays/SumDays.png'),
+      color: '#3D78FF',
+    },
+    WeekendDays: {
+      type: 'WeekendDays',
+      name: '周末天数',
+      value: 0,
+      icon: require('../../../../assets/images/holidays/WeekendDays.png'),
+      color: '#FF5933',
+    },
+    Holidays: {
+      type: 'Holidays',
+      name: '法定假日',
+      value: 0,
+      icon: require('../../../../assets/images/holidays/Holiday.png'),
+      color: '#FFB02E',
+    },
+    TakeDays: {
+      type: 'TakeDays',
+      name: '调休天数',
+      value: 0,
+      icon: require('../../../../assets/images/holidays/TakeDays.png'),
+      color: '#8687FF',
+    },
+  });
+  const [size, setSize] = useState({
+    width: document.documentElement.clientWidth,
+    height: document.documentElement.clientHeight,
+  });
+  const [visible, setVisible] = useState({
+    holiday: false,
+    workTime: false,
+    synchronize: false,
+  });
+  const workTime = useRef([
+    {
+      icon: require('../../../../assets/images/holidays/icon1.png'),
+      name: '上午',
+      from: '',
+      to: '',
+      type: 1,
+    },
+    {
+      icon: require('../../../../assets/images/holidays/icon2.png'),
+      name: '下午',
+      from: '',
+      to: '',
+      type: 2,
+    },
+    {
+      icon: require('../../../../assets/images/holidays/icon3.png'),
+      name: '晚上',
+      from: '',
+      to: '',
+      type: 3,
+    },
+  ]); // 工作时间
+  const workTimeMsg = useRef({});
+  const calendarHoliday = useRef(new Map()); // 日历上得假期
+  const queryData = useRef({ year: new Date().getFullYear(), month: new Date().getMonth() + 1 });
+  const tableData = useRef([]);
+  const [currentDate, setCurrentDate] = useState('');
+  const [form] = Form.useForm();
+  useEffect(() => {
+    document.querySelector('.ant-picker-content').setAttribute('border', 1);
+    let year = new Date().getFullYear();
+    let month = new Date().getMonth() + 1;
+    getData(year, month);
+    window.addEventListener('resize', resizeListener);
+    return () => {
+      window.removeEventListener('resize', resizeListener);
+    };
+  }, []);
+  const resizeListener = () => {
+    setSize({
+      width: document.documentElement.clientWidth,
+      height: document.documentElement.clientHeight,
+    });
+  };
+  const getData = (year, month) => {
+    GetWorkDayManageInfo({ year, month }).then(res => {
+      if (res.code === 0) {
+        calendarHoliday.current = new Map([]);
+        res.data.CalendarHoliday.forEach(item => {
+          calendarHoliday.current.set(item.DayDate, item);
+        });
+
+        tableData.current = res.data.HolidayList;
+        workTime.current.forEach(item => {
+          switch (item.name) {
+            case '上午':
+              item.from = res.data.WorkTime.WORKTIME_MOR_FROM;
+              item.to = res.data.WorkTime.WORKTIME_MOR_TO;
+              break;
+            case '下午':
+              item.from = res.data.WorkTime.WORKTIME_AFT_FROM;
+              item.to = res.data.WorkTime.WORKTIME_AFT_TO;
+              break;
+            case '晚上':
+              item.from = res.data.WorkTime.WORKTIME_EVE_FROM;
+              item.to = res.data.WorkTime.WORKTIME_EVE_TO;
+              break;
+
+            default:
+              break;
+          }
+        });
+        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;
+        setHolidayStatistics(obj);
+        // setFlag(flag + 1);
+      }
+    });
+  };
+  // 删除节假日
+  const delRow = record => {
+    let dayDate = record.DayDate.split(',')
+      .map(item => `${queryData.current.year}-${item}`)
+      .join(',');
+    DeleteFlowHoliday({ dayDate }).then(res => {
+      if (res.code === 0) {
+        message.success('删除成功');
+        getData(queryData.current.year, queryData.current.month);
+      } else {
+        message.error(res.msg);
+      }
+    });
+  };
+
+  // 日历日期变化监听
+  const onPanelChange = (value, mode) => {
+    console.log(value, mode, '监听');
+    // eslint-disable-next-line no-underscore-dangle
+    let time = value._d;
+    let year = time.getFullYear();
+    let month = time.getMonth() + 1;
+    let day = time.getDate();
+    queryData.current.year = year;
+    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={{ margin: '10px 0 10px 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 => {
+              if (validate.dayName) {
+                AddFlowHoliday({
+                  dayName: validate.dayName,
+                  dayType: validate.dayType,
+                  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() {},
+      });
+    }
+  };
+  // 日历渲染替换
+  const dateCellRender = value => {
+    // eslint-disable-next-line no-underscore-dangle
+    let time = value._d;
+    let year = time.getFullYear();
+    let month = time.getMonth() + 1;
+    let day = time.getDate();
+    let week = time.getDay();
+    month = month < 10 ? `0${month}` : month;
+    day = day < 10 ? `0${day}` : day;
+    let obj = calendar.solar2lunar(year, month, day);
+    let date = `${year}-${month}-${day}`;
+    let holidayMsg = calendarHoliday.current?.get(date);
+    return (
+      <div
+        key={date}
+        className={classNames(styles.calendarCell, {
+          [styles.otherMonthDay]: month != queryData.current.month,
+          [styles.rest]: holidayMsg?.DayType === 1,
+          [styles.holidays]: holidayMsg?.DayType === 3,
+          [styles.weekend]: (week === 0 || week === 6) && calendarHoliday.current.has(date),
+          [styles.choose]: date === currentDate,
+        })}
+        onDoubleClick={() => onSelect(value, obj)}
+        onClick={() => setCurrentDate(date)}
+      >
+        <div className={styles.tiemBox}>
+          <p> {time.getDate()}</p>
+          <p> {obj.festival || obj.Term || obj.IDayCn}</p>
+        </div>
+
+        <div
+          className={styles.icon}
+          style={{ display: calendarHoliday.current.has(date) ? 'block' : 'none' }}
+        />
+      </div>
+    );
+  };
+  // 日历头部渲染
+  const headerRender = ({ value, onChange }) => {
+    const start = 0;
+    const end = 12;
+    const monthOptions = [];
+    const current = value.clone();
+    const localeData = value.localeData();
+    const months = [];
+    for (let i = 0; i < 12; i++) {
+      current.month(i);
+      months.push(localeData.monthsShort(current));
+    }
+    for (let i = start; i < end; i++) {
+      monthOptions.push(
+        <Select.Option key={i} value={i} className="month-item">
+          {months[i]}
+        </Select.Option>,
+      );
+    }
+
+    const year = value.year();
+    const month = value.month();
+    const options = [];
+    for (let i = year - 10; i < year + 10; i += 1) {
+      options.push(
+        <Select.Option key={i} value={i} className="year-item">
+          {i}
+        </Select.Option>,
+      );
+    }
+    return (
+      <div className={styles.calendarHeader}>
+        <div className={styles.left}>
+          <Select
+            style={{ marginRight: '5px' }}
+            dropdownMatchSelectWidth={false}
+            className="my-year-select"
+            value={year}
+            onChange={newYear => {
+              const now = value.clone().year(newYear);
+              onChange(now);
+            }}
+          >
+            {options}
+          </Select>
+          <Select
+            dropdownMatchSelectWidth={false}
+            value={month}
+            onChange={newMonth => {
+              const now = value.clone().month(newMonth);
+              onChange(now);
+            }}
+          >
+            {monthOptions}
+          </Select>
+        </div>
+        <div className={styles.right}>
+          <Upload showUploadList={false} accept=".json" beforeUpload={beforeUpload}>
+            <Button style={{ marginLeft: '10px' }} type="primary" ghost>
+              <div style={{ display: 'flex', alignItems: 'center' }}>
+                <ImportOutlined style={{ marginRight: '5px' }} />
+                <div> 导入</div>
+              </div>
+            </Button>
+          </Upload>
+          <Button onClick={hadelExport} style={{ marginLeft: '10px' }} type="primary" ghost>
+            <div style={{ display: 'flex', alignItems: 'center' }}>
+              <ExportOutlined style={{ marginRight: '5px' }} />
+              <div> 导出</div>
+            </div>
+          </Button>
+          <Button
+            onClick={() => setVisible({ ...visible, holiday: true })}
+            style={{ marginLeft: '10px' }}
+            type="primary"
+          >
+            <div style={{ display: 'flex', alignItems: 'center' }}>
+              <PlusOutlined style={{ marginRight: '5px' }} />
+              <div> 新增</div>
+            </div>
+          </Button>
+          <Button
+            onClick={() => setVisible({ ...visible, synchronize: true })}
+            style={{ marginLeft: '10px', background: '#FAAD14', border: 'none', color: '#fff' }}
+          >
+            <div style={{ display: 'flex', alignItems: 'center' }}>
+              <SyncOutlined style={{ marginRight: '5px' }} />
+              <div>一键同步</div>
+            </div>
+          </Button>
+        </div>
+      </div>
+    );
+  };
+  // 导出
+  const hadelExport = () => {
+    window.location.href = DownLoadFlowHoliday({
+      year: queryData.current.year,
+    });
+  };
+  // 提交上传文件
+  const beforeUpload = val => {
+    console.log(val);
+    if (!form.getFieldValue('fileName')) {
+      message.info('请上传文件');
+      return;
+    }
+    const formData = new FormData();
+    formData.append('_files', val);
+
+    ImportFlowHoliday(formData)
+      .then(res => {
+        console.log(res);
+        if (res.code === 0) {
+          message.success('上传成功');
+        } else {
+          message.error(res.msg);
+        }
+      })
+      .catch(() => {
+        message.error('网络异常，请稍后再试');
+      });
+  };
+
+  // 保存工作时间
+  const saveWorkTime = () => {
+    setVisible({ ...visible, workTime: false });
+    getData(queryData.current.year, queryData.current.month);
+  };
+  // 添加节假日
+  const addHoliday = () => {
+    setVisible({ ...visible, holiday: false });
+    getData(queryData.current.year, queryData.current.month);
+  };
+  // 同步节假日
+  const startSynchronize = () => {
+    setVisible({ ...visible, synchronize: false });
+    getData(queryData.current.year, queryData.current.month);
+  };
+  // 编辑工作时间
+  const editWorkTime = value => {
+    workTimeMsg.current = value;
+    setVisible({ ...visible, workTime: true });
+  };
+
+  return (
+    <div className={styles.calendarPage} style={{ zoom: size.width / 1920 }}>
+      {/* 左侧日历 */}
+      <div className={styles.leftContent}>
+        <div className={styles.calendarBox}>
+          <Calendar
+            locale={locale}
+            dateFullCellRender={dateCellRender}
+            onPanelChange={onPanelChange}
+            headerRender={headerRender}
+            // onSelect={onSelect}
+          />
+        </div>
+        {/* 工作时间管理 */}
+        <div className={styles.workTiemContainer}>
+          <div className={styles.header}>
+            <div className={styles.headerLeft}>
+              <div className={styles.lineBox} />
+              <div className={styles.text}>工作时间管理</div>
+            </div>
+          </div>
+          <div className={styles.content}>
+            {workTime.current.map(item => (
+              <div
+                className={classNames(styles.workTimeBox, {
+                  [styles.mor]: item.name === '上午',
+                  [styles.aft]: item.name === '下午',
+                  [styles.eve]: item.name === '晚上',
+                })}
+                key={item.name}
+                onClick={() => editWorkTime(item)}
+              >
+                <div className={styles.left}>
+                  <div className={styles.icon}>
+                    <img src={item.icon} alt="" />
+                  </div>
+                </div>
+                <div className={styles.right}>
+                  <div className={styles.title}>{item.name}</div>
+                  <div className={styles.time}>
+                    {item.from}-{item.to}
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+      <div className={styles.rightContent}>
+        <div className={styles.header}>
+          <div className={styles.lineBox} />
+          <div className={styles.title}>节假日列表</div>
+        </div>
+        <div className={styles.statisticsBox}>
+          {Object.values(holidayStatistics).map(item => (
+            <div className={styles.statistics} type={item.type} key={item.name}>
+              <div className={styles.left}>
+                <div className={styles.icon}>
+                  <img src={item.icon} alt="" />
+                </div>
+              </div>
+              <div className={styles.right}>
+                <div className={styles.desBox}>
+                  <div className={styles.label}>{item.name}</div>
+                  <div className={styles.value}>
+                    <i>{item.value}</i> 天
+                  </div>
+                </div>
+                <div className={styles.progress}>
+                  <div
+                    className={styles.rate}
+                    style={{
+                      background: item.color,
+                      width: `${(item.value / holidayStatistics.SumDays.value) * 100}%`,
+                    }}
+                  />
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+        <div className={styles.holidaysList}>
+          {tableData.current.map((item, index) => (
+            <div className={styles.itemBox} key={index}>
+              <div className={styles.header}>
+                <div className={styles.title}>{item.DayName}</div>
+                <div className={styles.del}>
+                  <Popconfirm
+                    title="是否删除该节假日?"
+                    onConfirm={() => delRow(item)}
+                    onCancel={() => message.error('取消删除')}
+                    okText="是"
+                    cancelText="否"
+                  >
+                    <DeleteOutlined style={{ fontSize: '16px', color: '#e86060' }} />
+                  </Popconfirm>
+                </div>
+              </div>
+              <div className={styles.content}>
+                {item.DayDate?.split(',').map(ele => <span key={ele}>{ele}</span>)}
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+      <WorkTiemConfig
+        visible={visible.workTime}
+        onSubumit={saveWorkTime}
+        handleCancel={() => setVisible({ ...visible, workTime: false })}
+        msg={workTimeMsg.current}
+        allTime={workTime.current}
+      />
+      <AddModal
+        visible={visible.holiday}
+        onSubumit={addHoliday}
+        handleCancel={() => setVisible({ ...visible, holiday: false })}
+      />
+      <Synchronize
+        visible={visible.synchronize}
+        onSubumit={startSynchronize}
+        handleCancel={() => setVisible({ ...visible, synchronize: false })}
+      />
+    </div>
+  );
+};
+
+export default Holidays;

src/pages/bsmanager/workOrder/holidays/holidays.less

+.calendarPage {
+  width: 100%;
+  height: 100%;
+  display: flex;
+
+
+  .leftContent {
+
+    height: 100%;
+    // min-height: 100%;
+    display: flex;
+    overflow-y: scroll;
+    flex-shrink: 0;
+    flex-direction: column;
+    background-color: #fff;
+    border-radius: 5px;
+    padding: 15px;
+
+    .calendarBox {
+      // height: 60%;
+      width: 1127px;
+
+
+      :global {
+        .ant-picker-content {
+          border-color: #DBE6F2;
+          // border-collapse: collapse;
+          border-spacing: 1px;
+
+          .ant-picker-cell {}
+
+
+          th,
+          td {
+            border: 1px solid #DBE6F2;
+          }
+
+          th {
+            height: 39px;
+            background-color: #F3F9FF;
+            text-align: center;
+            color: #616467;
+          }
+        }
+      }
+
+      .calendarCell {
+        position: relative;
+        width: 160px;
+        height: 88px;
+
+        .tiemBox {
+          position: absolute;
+          top: 8px;
+          left: 5px;
+
+          p {
+            text-align: center;
+            margin-bottom: 0;
+          }
+
+          p:nth-of-type(1) {
+            color: #000000;
+            font-size: 16px;
+
+          }
+
+          p:nth-of-type(2) {
+            color: #474747;
+            font-size: 14px;
+          }
+        }
+
+      }
+
+      .calendarCell:hover {
+        border: 1px solid #FAAD14;
+      }
+
+      .otherMonthDay {
+        .tiemBox {
+
+          p:nth-of-type(1) {
+            opacity: 0.25;
+
+          }
+
+          p:nth-of-type(2) {
+            opacity: 0.25;
+          }
+        }
+
+
+      }
+
+      .weekend {
+
+        background: #FFF2F2;
+
+        .tiemBox {
+
+          p:nth-of-type(1) {
+            color: #FF5933;
+
+          }
+
+
+        }
+
+      }
+
+
+      .rest {
+        background: linear-gradient(0deg, #E8FDD7 0%, #FFFFFF 100%);
+
+        .icon {
+          position: absolute;
+          left: 56px;
+          top: 30px;
+          width: 91px;
+          height: 50px;
+          background: url("../../../../assets/images/holidays/rest.png") no-repeat;
+          background-size: 100% 100%;
+        }
+      }
+
+
+
+      .holidays {
+        background: linear-gradient(0deg, #FFF8EE 0%, #FFFFFF 100%);
+
+        .icon {
+          position: absolute;
+          left: 56px;
+          top: 30px;
+          width: 91px;
+          height: 50px;
+          background: url("../../../../assets/images/holidays/holidays.png") no-repeat;
+          background-size: 100% 100%;
+        }
+
+
+      }
+
+
+      .calendarHeader {
+        display: flex;
+        align-items: center;
+        height: 40px;
+        width: 100%;
+        justify-content: space-between;
+
+
+
+
+        .left {
+          height: 100%;
+          display: flex;
+          align-items: center;
+        }
+
+        .right {
+          height: 100%;
+          display: flex;
+          align-items: center;
+        }
+      }
+
+      .choose {
+        border: 1px solid #6394FF;
+      }
+    }
+
+    .workTiemContainer {
+      display: flex;
+      flex-direction: column;
+
+      width: 100%;
+      flex: 1;
+
+
+      // display: flex;
+      .header {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        height: 50px;
+
+        .headerLeft {
+          display: flex;
+          align-items: center;
+          font-weight: 700;
+
+          .lineBox {
+            width: 3px;
+            height: 14px;
+            background-color: #1685FF;
+            margin-right: 5px;
+          }
+        }
+      }
+
+      .content {
+        display: flex;
+        justify-content: space-between;
+        flex: 1;
+        align-items: center;
+
+        .workTimeBox {
+          display: flex;
+          align-items: center;
+          // justify-content: center;
+          width: 358px;
+          height: 123px;
+
+
+          .left {
+            margin-left: 38px;
+            margin-right: 20px;
+
+            .icon {
+              width: 54px;
+              height: 54px;
+
+              img {
+                width: 100%;
+              }
+            }
+          }
+
+          .right {
+            color: #000000;
+
+            .title {
+              margin-bottom: 5px;
+            }
+          }
+        }
+
+        .mor {
+          background: url("../../../../assets/images/holidays/mor.png");
+          background-size: 100% 100%;
+        }
+
+        .aft {
+          background: url("../../../../assets/images/holidays/aft.png");
+          background-size: 100% 100%;
+        }
+
+        .eve {
+          background: url("../../../../assets/images/holidays/eve.png");
+          background-size: 100% 100%;
+        }
+      }
+    }
+  }
+
+  .rightContent {
+    flex: 1;
+    background-color: #ffffff;
+    height: 100%;
+    margin-left: 15px;
+    border-radius: 5px;
+    padding: 15px;
+    overflow-y: scroll;
+
+    .header {
+      width: 100%;
+      display: flex;
+      // justify-content: space-between;
+      align-items: center;
+      height: 50px;
+      font-weight: 700;
+
+      .lineBox {
+        width: 3px;
+        height: 14px;
+        background-color: #1685FF;
+        margin-right: 5px;
+      }
+
+
+    }
+
+    .statisticsBox {
+      display: flex;
+      flex-wrap: wrap;
+
+      width: 100%;
+      justify-content: space-between;
+
+      .statistics {
+        width: 45%;
+        height: 50px;
+        text-align: center;
+        padding: 0 10px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+
+        margin-bottom: 15px;
+
+        .left {
+          .icon {
+            width: 46px;
+            height: 46px;
+
+            img {
+              width: 100%;
+            }
+          }
+
+
+        }
+
+        .right {
+          display: flex;
+          flex-direction: column;
+          align-items: flex-start;
+          margin-left: 9px;
+          height: 60px;
+
+          .desBox {
+            width: 100%;
+            padding: 0 5px;
+            display: flex;
+            justify-content: space-between;
+            align-items: baseline;
+
+            .value {
+              i {
+                font-style: normal;
+                font-weight: 700;
+                font-size: 20px;
+              }
+            }
+          }
+
+          .progress {
+            margin-top: 10px;
+            width: 135px;
+            height: 5px;
+            background-color: #E2E8EE;
+            border-radius: 3px;
+
+            .rate {
+              height: 100%;
+              border-radius: 3px;
+            }
+          }
+        }
+
+      }
+    }
+
+    .holidaysList {
+      width: 100%;
+      padding-bottom: 10px;
+      height: calc(100% - 200px);
+      overflow-y: scroll;
+
+      .itemBox {
+
+
+        background: #F3F9FF;
+        border: 1px solid #DBE6F2;
+        border-radius: 10px;
+        padding: 10px 15px;
+        margin-bottom: 12px;
+
+        .header {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          height: 25px;
+
+          .del {
+            display: flex;
+            align-items: center;
+          }
+        }
+
+        .content {
+          display: flex;
+          flex-wrap: wrap;
+
+          span {
+            width: 100px;
+          }
+        }
+      }
+    }
+
+    .ant-table-wrapper {
+      height: calc(100% - 170px);
+
+      .ant-table {
+        height: calc(100% - 0px);
+
+        .ant-table-body {
+
+          border-left: 1px solid #f0f0f0;
+
+        }
+
+        .ant-table-container {
+          height: 100%;
+        }
+      }
+    }
+
+  }
+}
\ No newline at end of file

src/routes/config.js

@@ -138,6 +138,7 @@ const Flow = asyncComponent(() => import('@/pages/bsmanager/workOrder/workFlow/f
 const FlowNode = asyncComponent(() =>
   import('@/pages/bsmanager/workOrder/workFlow/flowNode/flowNode'),
 );
+const Holidays = asyncComponent(() => import('@/pages/bsmanager/workOrder/holidays/holidays')); // 节假日
 const Maintenance = asyncComponent(() =>
   import('@/pages/bsmanager/patrolMaintenance/maintenance/maintenance'),
 );
@@ -328,6 +329,11 @@ export default {
                   name: '工作流编辑',
                   component: Workflow,
                 },
+                {
+                  path: '/biz/workflow/holidays',
+                  name: '节假日管理',
+                  component: Holidays,
+                },
               ],
             },
             {

src/services/holidays/holidays.js

+import { get, post, PUBLISH_SERVICE } from '@/services/index';
+// 获取全部流程
+export const GetWorkDayManageInfo = param =>
+  get(`${PUBLISH_SERVICE}/WorkDayManage/GetWorkDayManageInfo`, param);
+// 新增、修改班次
+export const AddOrEditWorkTime = param =>
+  post(`${PUBLISH_SERVICE}/WorkDayManage/AddOrEditWorkTime`, param);
+// 删除节假日
+export const DeleteFlowHoliday = param =>
+  get(`${PUBLISH_SERVICE}/WorkDayManage/DeleteFlowHoliday`, param);
+// 新增节假日
+export const AddFlowHoliday = param =>
+  get(`${PUBLISH_SERVICE}/WorkDayManage/AddFlowHoliday`, param);
+// 导入节假日
+export const ImportFlowHoliday = param =>
+  get(`${PUBLISH_SERVICE}/WorkDayManage/ImportFlowHoliday`, param);
+// 导出节假日
+export const DownLoadFlowHoliday = query =>
+  `${PUBLISH_SERVICE}/WorkDayManage/DownLoadFlowHoliday?year=${query.year}`;
+
+// 初始化节假日
+export const InitializationFlowHoliday = param =>
+  get(`${PUBLISH_SERVICE}/WorkDayManage/InitializationFlowHoliday`, param);