节假日

ruoyi-ui/src/api/manage/clockSet.js

@@ -42,3 +42,11 @@ export function delClockSet(clockSetId) {
     method: 'get'
   })
 }
+// 节假日时间列表
+export function getHolidays(data) {
+  return request({
+    url: '/system/holidays/noPageList',
+    method: 'get',
+    params: data
+  })
+}

ruoyi-ui/src/views/shipinggaoj/clockSet/index.vue

@@ -247,8 +247,8 @@
             <template slot="dateCell" slot-scope="{ date, data }">
               <div class="date-content" @click="issh(date)">
                 <span class="text">{{ getDay(date) }}</span>
-                <span v-if="isWeek(date)" class="rest">休</span>
-                <span v-if="isWeekt(date)" class="rest" style="width: 26px; height: 26px; line-height: 26px;">补班</span>
+                <span v-if="isWeekt(date)" class="rest bgb" style="width: 26px; height: 26px; line-height: 26px;">补班</span>
+                <span v-else-if="isWeek(date)" class="rest bga">休</span>
               </div>
             </template>
           </el-calendar>
@@ -259,7 +259,7 @@
 </template>
 
 <script>
-import { listClockSet, getClockSet, delClockSet, addClockSet, updateClockSet } from "@/api/manage/clockSet"
+import { listClockSet, getClockSet, delClockSet, addClockSet, updateClockSet,getHolidays } from "@/api/manage/clockSet"
 
 export default {
   name: "ClockSet",
@@ -317,6 +317,8 @@ export default {
       },
       tableMaxHeight:'200',
       isgsow:true,
+      nhgse:[],//需要补班的日期
+      xxnhgse:[],//需要放假的节假日
     }
   },
   created() {
@@ -333,8 +335,17 @@ export default {
         height:  this.tableMaxHeight + 'px',
       }
     }
+  },
+   watch: {
+      //月份切换时触发
+      value(newVal, oldVal) {
+        if (newVal.getMonth() !== oldVal?.getMonth() || newVal.getFullYear() !== oldVal?.getFullYear()) {
+          this.handleMonthChange(newVal);
+        }
+      }
     },
   mounted() {
+    this.handleMonthChange(this.value)
   	window.onresize = () => {
   	          this.changeTableMaxHeight()
   	        }
@@ -359,14 +370,31 @@ export default {
         // 判断是否周六日
         isWeek(date) {
           // 2.优化：三元表达式写法
-          return date.getDay() === 6 || date.getDay() === 0
+          if(date.getDay() === 6 || date.getDay() === 0){
+            return true
+          }else{
+            var index = this.xxnhgse.findIndex(item => item.holidayDate=== this.gettime(date))
+            return index != -1
+          }
         },
         isWeekt(date){
-          let nhgse= [{time:'2025-08-12',name:'中秋节'},{time:'2025-08-15',name:'中秋节'},]
-          var index = nhgse.findIndex(item => item.time=== this.gettime(date))
+          // let nhgse= [{time:'2025-08-12',name:'中秋节'},{time:'2025-08-15',name:'中秋节'},]
+          var index = this.nhgse.findIndex(item => item.holidayDate=== this.gettime(date))
           // 2.优化：三元表达式写法
           return index != -1
         },
+        handleMonthChange(e){
+          // 当前月
+          var time=this.gettime(e)
+          var params={
+            holidayDate:time
+          }
+          getHolidays(params).then(res=>{
+            var timeList=res.data;
+            this.nhgse=timeList.filter(ite=>ite.type=='YES')
+            this.xxnhgse=timeList.filter(ite=>ite.type=='NO')
+          })
+        },
 
     handleUpdatet(){
     this.opentime = true
@@ -525,15 +553,21 @@ export default {
   font-size: 14px;
 }
 .date-content .rest {
-  color: #fff;
+
   border-radius: 50%;
-  background: rgb(250, 124, 77);
+
   width: 20px;
   height: 20px;
   line-height: 20px;
   display: inline-block;
   font-size: 12px;
   margin-left: 10px;
+  &.bga{
+    background: rgb(250, 124, 77);color: #fff;
+  }
+  &.bgb{
+    background: #eee9f5;color: #a86fb6;
+  }
 }
 .date-content .text{
   width: 20px;