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.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);