修改

src/views/personnel/attendance/workday/index.vue

@@ -17,6 +17,7 @@ import FullCalendar from '@fullcalendar/vue'
 import dayGridPlugin from '@fullcalendar/daygrid'
 import interactionPlugin from '@fullcalendar/interaction'
 import timeGridPlugin from '@fullcalendar/timegrid'
+import { get } from "sortablejs";
 
 export default {
   components: {
@@ -24,6 +25,176 @@ export default {
   },
   data() {
     return {
+      workDateList:[
+        {
+          "id": 24910,
+          "workMonth": "2024-08",
+          "workDate": "2024-08-02",
+          "workDateCount": null,
+          "createTime": null,
+          "createUser": null
+        },
+        {
+          "id": 24911,
+          "workMonth": "2024-08",
+          "workDate": "2024-08-05",
+          "workDateCount": null,
+          "createTime": null,
+          "createUser": null
+        },
+        {
+          "id": 24912,
+          "workMonth": "2024-08",
+          "workDate": "2024-08-06",
+          "workDateCount": null,
+          "createTime": null,
+          "createUser": null
+        },
+        {
+          "id": 24913,
+          "workMonth": "2024-08",
+          "workDate": "2024-08-07",
+          "workDateCount": null,
+          "createTime": null,
+          "createUser": null
+        },
+        {
+          "id": 24914,
+          "workMonth": "2024-08",
+          "workDate": "2024-08-08",
+          "workDateCount": null,
+          "createTime": null,
+          "createUser": null
+        },
+        {
+          "id": 24915,
+          "workMonth": "2024-08",
+          "workDate": "2024-08-09",
+          "workDateCount": null,
+          "createTime": null,
+          "createUser": null
+        },
+        {
+          "id": 24916,
+          "workMonth": "2024-08",
+          "workDate": "2024-08-12",
+          "workDateCount": null,
+          "createTime": null,
+          "createUser": null
+        },
+        {
+          "id": 24917,
+          "workMonth": "2024-08",
+          "workDate": "2024-08-13",
+          "workDateCount": null,
+          "createTime": null,
+          "createUser": null
+        },
+        {
+          "id": 24918,
+          "workMonth": "2024-08",
+          "workDate": "2024-08-14",
+          "workDateCount": null,
+          "createTime": null,
+          "createUser": null
+        },
+        {
+          "id": 24919,
+          "workMonth": "2024-08",
+          "workDate": "2024-08-15",
+          "workDateCount": null,
+          "createTime": null,
+          "createUser": null
+        },
+        {
+          "id": 24920,
+          "workMonth": "2024-08",
+          "workDate": "2024-08-16",
+          "workDateCount": null,
+          "createTime": null,
+          "createUser": null
+        },
+        {
+          "id": 24921,
+          "workMonth": "2024-08",
+          "workDate": "2024-08-19",
+          "workDateCount": null,
+          "createTime": null,
+          "createUser": null
+        },
+        {
+          "id": 24922,
+          "workMonth": "2024-08",
+          "workDate": "2024-08-20",
+          "workDateCount": null,
+          "createTime": null,
+          "createUser": null
+        },
+        {
+          "id": 24923,
+          "workMonth": "2024-08",
+          "workDate": "2024-08-21",
+          "workDateCount": null,
+          "createTime": null,
+          "createUser": null
+        },
+        {
+          "id": 24924,
+          "workMonth": "2024-08",
+          "workDate": "2024-08-22",
+          "workDateCount": null,
+          "createTime": null,
+          "createUser": null
+        },
+        {
+          "id": 24925,
+          "workMonth": "2024-08",
+          "workDate": "2024-08-23",
+          "workDateCount": null,
+          "createTime": null,
+          "createUser": null
+        },
+        {
+          "id": 24926,
+          "workMonth": "2024-08",
+          "workDate": "2024-08-26",
+          "workDateCount": null,
+          "createTime": null,
+          "createUser": null
+        },
+        {
+          "id": 24927,
+          "workMonth": "2024-08",
+          "workDate": "2024-08-27",
+          "workDateCount": null,
+          "createTime": null,
+          "createUser": null
+        },
+        {
+          "id": 24928,
+          "workMonth": "2024-08",
+          "workDate": "2024-08-28",
+          "workDateCount": null,
+          "createTime": null,
+          "createUser": null
+        },
+        {
+          "id": 24929,
+          "workMonth": "2024-08",
+          "workDate": "2024-08-29",
+          "workDateCount": null,
+          "createTime": null,
+          "createUser": null
+        },
+        {
+          "id": 24930,
+          "workMonth": "2024-08",
+          "workDate": "2024-08-30",
+          "workDateCount": null,
+          "createTime": null,
+          "createUser": null
+        }
+      ],
       // 查询参数
       queryParams: {
         status: 1,
@@ -68,12 +239,9 @@ export default {
             click: this.prevClick
           }
         },
-        dayCellContent: (info) => {
-          return {html: `<a class="fc-daygrid-day-number">${info.dayNumberText.replace('日','')}</a>`}
-        },
+        dayCellClassNames: this.eventClassNames,
+        dayCellContent: this.eventContent,
         eventClick: this.handleDateClick, // 点击事件时，触发该回调
-        // eventMouseEnter: this.handleMouseEnter, // 鼠标悬停在事件上时，触发该回调
-        // eventMouseLeave: this.handleMouseLeave, // 鼠标移除时，触发该回调
         dateClick: this.handleDateClick // 当用户单击日期或时间时,触发该回调，触发此回调，您必须加载interaction插件
       }
     }
@@ -87,8 +255,35 @@ export default {
     // this.getEvents();
   },
   methods: {
+    getStrArray(){
+      let strArray = [];
+      this.workDateList.forEach(item => {
+        strArray.push(item.workDate) 
+      })
+      return strArray;
+    },
+    eventClassNames(arg) {
+      let thisDate = this.formatDate1(arg.date)
+      let strArray = this.getStrArray();
+      var index = strArray.indexOf(thisDate);
+      if (index > -1) {
+        return ['selectDayColor']
+      }else{
+        return ['noselectDayColor']
+      }
+    },
+    eventContent(arg) {
+      let thisDate = this.formatDate1(arg.date)
+      let strArray = this.getStrArray();
+      var index = strArray.indexOf(thisDate);
+      if (index > -1) {
+        return { html: `<span style="position: absolute;width: 40px;right: 80px;">工作日</span><span>${arg.dayNumberText.replace('日', '')}</span>` }
+      }else{
+        return { html: `<span style="position: absolute;width: 40px;right: 80px;">休息日</span><span>${arg.dayNumberText.replace('日', '')}</span>` }
+      }
+    },
     //设置工作日
-    handleWorkDay(){
+    handleWorkDay() {
 
     },
     // 获取当前年月
@@ -115,6 +310,14 @@ export default {
         // 重新抓取所有的日程事件源上的日程事件并渲染它们。
       });
     },
+    formatDate1(cellValue) {
+      if (cellValue == null || cellValue === "") return "";
+      const date = new Date(cellValue)
+      const year = date.getFullYear()
+      const month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
+      const day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
+      return year + '-' + month + '-' + day
+    },
     // 格式化日期
     formatDate(dateStr) {
       // 假设 dateStr 是 "2024年8月" 这样的格式
@@ -140,13 +343,6 @@ export default {
     handleDateClick(dateClickInfo) {
       console.log(dateClickInfo)
     },
-    handleMouseEnter(mouseEnterInfo) {
-      console.log(mouseEnterInfo.event.startStr)
-      // 提示：mouseEnterInfo.event.startStr 可以获取当前事件的开始事件
-    },
-    handleMouseLeave(mouseEnterInfo) {
-      console.log(mouseEnterInfo)
-    },
     todayClick(mouseEvent, htmlElement) {
       this.calendarApi.today() // 将日历移动到当前日期。
       this.calendarApi.getDate() // 返回日期的日历的当前日期
@@ -172,3 +368,17 @@ export default {
   }
 }
 </script>
+<style>
+.selectDayColor {
+  background: #c6e0b4;
+  text-align: center;
+  vertical-align: middle;
+}
+
+.noselectDayColor {
+  background: #bdd7ee;
+  text-align: center;
+  vertical-align: middle;
+
+}
+</style>