fix: 节假日管理优化

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

@@ -30,7 +30,7 @@ const AddModal = props => {
           dayName: validate.dayName,
           startDate: validate.dayTime[0].format('YYYY-MM-DD'),
           endDate: validate.dayTime[1].format('YYYY-MM-DD'),
-          dayType: validate.dayType,
+          dayType: 1,
         }).then(res => {
           if (res.code === 0) {
             message.success('新增成功');
@@ -63,12 +63,12 @@ const AddModal = props => {
           <Input placeholder="请输入假日名称" />
         </Form.Item>
 
-        <Form.Item label="节假日类型" name="dayType" initialValue={1}>
+        {/* <Form.Item label="节假日类型" name="dayType" initialValue={1}>
           <Radio.Group>
             <Radio value={1}>休息</Radio>
             <Radio value={3}>法定</Radio>
           </Radio.Group>
-        </Form.Item>
+        </Form.Item> */}
         <Form.Item
           label="假期时间"
           name="dayTime"

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

 /* eslint-disable global-require */
 import React, { useState, useEffect, useRef } from 'react';
+import axios from 'axios';
 import {
   Calendar,
   Button,
@@ -20,6 +21,8 @@ import {
   ExportOutlined,
   PlusOutlined,
   SyncOutlined,
+  LeftOutlined,
+  RightOutlined,
 } from '@ant-design/icons';
 import {
   AddFlowHoliday,
@@ -108,19 +111,21 @@ const Holidays = () => {
   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 [currentDate, setCurrentDate] = useState(moment().format('YYYY-MM-DD'));
   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);
+    resizeListener();
     window.addEventListener('resize', resizeListener);
     return () => {
       window.removeEventListener('resize', resizeListener);
     };
   }, []);
   const resizeListener = () => {
+    console.log(document.documentElement.clientWidth);
     setSize({
       width: document.documentElement.clientWidth,
       height: document.documentElement.clientHeight,
@@ -232,20 +237,27 @@ const Holidays = () => {
               initialValues={{ remember: true }}
               labelAlign="left"
             >
-              <Form.Item label="假期名称" name="dayName" style={{ margin: '10px 0 10px 0' }}>
+              <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
+              {/* <Form.Item
                 label="节假日类型"
                 name="dayType"
                 style={{ margin: '10px 0 0 0' }}
                 initialValue={1}
               >
                 <Radio.Group>
-                  <Radio value={1}>休息</Radio>
+                  <Radio value={1}>调休</Radio>
                   <Radio value={3}>法定</Radio>
                 </Radio.Group>
-              </Form.Item>
+              </Form.Item> */}
             </Form>
           </div>
         ),
@@ -255,10 +267,18 @@ const Holidays = () => {
         onOk() {
           return new Promise((resolve, reject) => {
             form.validateFields().then(validate => {
-              if (validate.dayName) {
+              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: validate.dayName,
-                  dayType: validate.dayType,
+                  dayName: name,
+                  dayType: obj.nWeek === 7 || obj.nWeek === 6 ? 2 : 1,
                   startDate: date,
                   endDate: date,
                 }).then(res => {
@@ -302,17 +322,24 @@ const Holidays = () => {
           [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.weekend]: week === 0 || week === 6,
           [styles.choose]: date === currentDate,
         })}
         onDoubleClick={() => onSelect(value, obj)}
-        onClick={() => setCurrentDate(date)}
+        onClick={e => {
+          setCurrentDate(date);
+        }}
       >
         <div className={styles.tiemBox}>
           <p> {time.getDate()}</p>
-          <p> {obj.festival || obj.Term || obj.IDayCn}</p>
+          <p> {obj.lunarFestival || obj.festival || obj.Term || obj.IDayCn}</p>
+        </div>
+        <div
+          className={styles.tips}
+          style={{ display: week === 0 || week === 6 ? 'block' : 'none' }}
+        >
+          {calendarHoliday.current.has(date) ? '末' : '班'}
         </div>
-
         <div
           className={styles.icon}
           style={{ display: calendarHoliday.current.has(date) ? 'block' : 'none' }}
@@ -328,6 +355,7 @@ const Holidays = () => {
     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));
@@ -350,31 +378,80 @@ const Holidays = () => {
         </Select.Option>,
       );
     }
+
     return (
       <div className={styles.calendarHeader}>
         <div className={styles.left}>
+          <LeftOutlined
+            onClick={() => {
+              let newYear = year - 1;
+              const now = value.clone().year(newYear);
+              onChange(now);
+            }}
+          />
           <Select
-            style={{ marginRight: '5px' }}
+            style={{ margin: '0 5px' }}
             dropdownMatchSelectWidth={false}
             className="my-year-select"
             value={year}
             onChange={newYear => {
+              console.log(newYear);
               const now = value.clone().year(newYear);
               onChange(now);
             }}
           >
             {options}
           </Select>
+          <RightOutlined
+            onClick={() => {
+              let newYear = year + 1;
+              const now = value.clone().year(newYear);
+              onChange(now);
+            }}
+          />
+          <LeftOutlined
+            onClick={() => {
+              let val = value.clone();
+              let newMonth = month - 1;
+              let now;
+              if (newMonth < 1) {
+                let newYear = year - 1;
+                now = val.set({ year: newYear, month: 11 });
+              } else {
+                now = value.clone().month(newMonth);
+              }
+              console.log(now.format('YYYY-MM-DD'));
+              onChange(now);
+            }}
+          />
           <Select
+            style={{ margin: '0 5px' }}
             dropdownMatchSelectWidth={false}
             value={month}
             onChange={newMonth => {
+              console.log(newMonth);
               const now = value.clone().month(newMonth);
               onChange(now);
             }}
           >
             {monthOptions}
           </Select>
+          <RightOutlined
+            onClick={() => {
+              let val = value.clone();
+              let newMonth = month + 1;
+              let now;
+              if (newMonth > 12) {
+                newMonth = 1;
+
+                now = val.year(year + 1).month(newMonth);
+              } else {
+                now = value.clone().month(newMonth);
+              }
+
+              onChange(now);
+            }}
+          />
         </div>
         <div className={styles.right}>
           <Upload showUploadList={false} accept=".json" beforeUpload={beforeUpload}>
@@ -414,6 +491,7 @@ const Holidays = () => {
       </div>
     );
   };
+
   // 导出
   const hadelExport = () => {
     window.location.href = DownLoadFlowHoliday({
@@ -423,10 +501,10 @@ const Holidays = () => {
   // 提交上传文件
   const beforeUpload = val => {
     console.log(val);
-    if (!form.getFieldValue('fileName')) {
-      message.info('请上传文件');
-      return;
-    }
+    // if (!form.getFieldValue('fileName')) {
+    //   message.info('请上传文件');
+    //   return;
+    // }
     const formData = new FormData();
     formData.append('_files', val);
 
@@ -434,6 +512,7 @@ const Holidays = () => {
       .then(res => {
         console.log(res);
         if (res.code === 0) {
+          getData(queryData.current.year, queryData.current.month);
           message.success('上传成功');
         } else {
           message.error(res.msg);
@@ -464,18 +543,30 @@ const Holidays = () => {
     workTimeMsg.current = value;
     setVisible({ ...visible, workTime: true });
   };
+  const disabledDate = value => {
+    return (
+      value < moment(`${queryData.current.year}-${queryData.current.month}`).startOf('month') ||
+      value > moment(`${queryData.current.year}-${queryData.current.month}`).endOf('month')
+    );
+  };
 
   return (
-    <div className={styles.calendarPage} style={{ zoom: size.width / 1920 }}>
+    <div
+      className={styles.calendarPage}
+      // style={{ transform: `scale(${size.width / 1920}, ${size.height / 960})` }}
+      style={{ zoom: size.width / 1920 }}
+    >
       {/* 左侧日历 */}
       <div className={styles.leftContent}>
         <div className={styles.calendarBox}>
           <Calendar
+            disabledDate={disabledDate}
+            prevFarthestDate={false}
             locale={locale}
             dateFullCellRender={dateCellRender}
             onPanelChange={onPanelChange}
             headerRender={headerRender}
-            // onSelect={onSelect}
+            onSelect={() => {}}
           />
         </div>
         {/* 工作时间管理 */}
@@ -550,21 +641,34 @@ const Holidays = () => {
           {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}>
+                <div className={styles.title}>
+                  {item.DayName}({item.DayDate?.split(',').length}天)
+                </div>
+                <div
+                  className={styles.del}
+                  onClick={() => {
+                    setTimeout(() => {
+                      console.log(document.querySelectorAll('.ant-popconfirm'));
+                      document.querySelectorAll('.ant-popconfirm').forEach(ele => {
+                        ele.style.zoom = size.width / 1920;
+                      });
+                    }, 0);
+                  }}
+                >
                   <Popconfirm
                     title="是否删除该节假日?"
                     onConfirm={() => delRow(item)}
                     onCancel={() => message.error('取消删除')}
                     okText="是"
                     cancelText="否"
+                    style={{ zoom: size.width / 1920 }}
                   >
                     <DeleteOutlined style={{ fontSize: '16px', color: '#e86060' }} />
                   </Popconfirm>
                 </div>
               </div>
               <div className={styles.content}>
-                {item.DayDate?.split(',').map(ele => <span key={ele}>{ele}</span>)}
+                {item.DayDate?.split(',').map((ele, i) => <span key={i}>{ele}</span>)}
               </div>
             </div>
           ))}

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

@@ -46,7 +46,7 @@
 
       .calendarCell {
         position: relative;
-        width: 160px;
+        width: 159px;
         height: 88px;
 
         .tiemBox {
@@ -97,6 +97,15 @@
 
         background: #FFF2F2;
 
+        .tips {
+          position: absolute;
+          top: 5px;
+          right: 10px;
+          width: 10px;
+          height: 10px;
+
+        }
+
         .tiemBox {
 
           p:nth-of-type(1) {
@@ -157,6 +166,7 @@
           height: 100%;
           display: flex;
           align-items: center;
+          justify-content: center;
         }
 
         .right {
@@ -208,13 +218,14 @@
         align-items: center;
 
         .workTimeBox {
+
           display: flex;
           align-items: center;
           // justify-content: center;
           width: 358px;
           height: 123px;
-
-
+          transition: transform 0.5s;
+          cursor: pointer;
           .left {
             margin-left: 38px;
             margin-right: 20px;
@@ -238,6 +249,10 @@
           }
         }
 
+        .workTimeBox:hover {
+          transform: scale(1.05);
+        }
+
         .mor {
           background: url("../../../../assets/images/holidays/mor.png");
           background-size: 100% 100%;

src/services/holidays/holidays.js

@@ -13,10 +13,12 @@ export const AddFlowHoliday = param =>
   get(`${PUBLISH_SERVICE}/WorkDayManage/AddFlowHoliday`, param);
 // 导入节假日
 export const ImportFlowHoliday = param =>
-  get(`${PUBLISH_SERVICE}/WorkDayManage/ImportFlowHoliday`, param);
+  post(`${PUBLISH_SERVICE}/WorkDayManage/ImportFlowHoliday`, param);
 // 导出节假日
 export const DownLoadFlowHoliday = query =>
   `${PUBLISH_SERVICE}/WorkDayManage/DownLoadFlowHoliday?year=${query.year}`;
+// export const DownLoadFlowHoliday = param =>
+//   get(`${PUBLISH_SERVICE}/WorkDayManage/DownLoadFlowHoliday`, param);
 
 // 初始化节假日
 export const InitializationFlowHoliday = param =>