From 96dd34f77d81db58f54e3d0ad4a8cc8082189a61 Mon Sep 17 00:00:00 2001
From: WXL <wl_5969728@163.com>
Date: 星期四, 16 四月 2026 13:52:27 +0800
Subject: [PATCH] 考勤相关更改

---
 src/views/OfficeRelated/checkingIn/components/AttendanceCalendar.vue |  119 +++++++++++++++++++++++++++++++++++++++++++++++++----------
 1 files changed, 98 insertions(+), 21 deletions(-)

diff --git a/src/views/OfficeRelated/checkingIn/components/AttendanceCalendar.vue b/src/views/OfficeRelated/checkingIn/components/AttendanceCalendar.vue
index 5f90278..f0e23d1 100644
--- a/src/views/OfficeRelated/checkingIn/components/AttendanceCalendar.vue
+++ b/src/views/OfficeRelated/checkingIn/components/AttendanceCalendar.vue
@@ -1,10 +1,24 @@
 <template>
   <div class="attendance-calendar">
-    <el-calendar v-model="calendarValue">
-      <template #date-cell="{ data }">
+    <!-- <el-button @click="refreshCalendar" size="small" type="primary"
+      >鍒锋柊</el-button
+    > -->
+
+    <!-- Element UI 鐨勬棩鍘嗙粍浠� -->
+    <el-calendar v-model="value">
+      <template slot="dateCell" slot-scope="{ date, data }">
         <div class="calendar-date">
-          <div class="date-number">{{ data.day.split('-')[2] }}</div>
+          <div class="date-number">
+            {{
+              data.day
+                .split("-")
+                .slice(1)
+                .join("-")
+            }}
+          </div>
+          <!-- <div style="font-size: 10px; color: #666;">{{ data.day }}</div> -->
           <div class="date-events">
+            <!-- Element UI 涓娇鐢ㄦ彃妲戒綔鐢ㄥ煙 -->
             <div
               v-for="event in getDateEvents(data.day)"
               :key="event.id"
@@ -23,46 +37,91 @@
 
 <script>
 export default {
-  name: 'AttendanceCalendar',
+  name: "AttendanceCalendar",
   props: {
     attendanceData: Array,
     businessTripData: Array
   },
   data() {
     return {
-      calendarValue: new Date()
+      value: new Date(), // Element UI 浣跨敤 value
+      localAttendanceData: [],
+      localBusinessTripData: []
+    };
+  },
+  watch: {
+    attendanceData: {
+      immediate: true,
+      handler(val) {
+        this.localAttendanceData = val || [];
+        console.log("鑰冨嫟鏁版嵁:", this.localAttendanceData);
+        this.$nextTick(() => {
+          this.$forceUpdate(); // Vue 2 鐨勫己鍒舵洿鏂�
+        });
+      }
+    },
+    businessTripData: {
+      immediate: true,
+      handler(val) {
+        this.localBusinessTripData = val || [];
+        console.log("鍑哄樊鏁版嵁:", this.localBusinessTripData);
+        this.$nextTick(() => {
+          this.$forceUpdate();
+        });
+      }
     }
   },
+  mounted() {
+    console.log("Calendar mounted with Vue 2.6.12");
+    this.testMethod();
+  },
   methods: {
+    refreshCalendar() {
+      console.log("鎵嬪姩鍒锋柊鏃ュ巻");
+      this.$forceUpdate();
+    },
+    testMethod() {
+      console.log("娴嬭瘯鏂规硶鏄惁鍙皟鐢�");
+      console.log("getDateEvents 娴嬭瘯:", this.getDateEvents("2024-01-15"));
+    },
     getDateEvents(date) {
-      const events = []
+      console.log("getDateEvents 琚皟鐢�, 鏃ユ湡:", date);
+      console.log("褰撳墠鑰冨嫟鏁版嵁:", this.localAttendanceData);
+      console.log("褰撳墠鍑哄樊鏁版嵁:", this.localBusinessTripData);
 
-      // 妫�鏌ュ嚭鍕よ褰�
-      const attendance = this.attendanceData.find(item => item.date === date)
+      const events = [];
+
+      // 鑰冨嫟鏁版嵁
+      const attendance = (this.localAttendanceData || []).find(item => {
+        return item && item.date === date;
+      });
+
       if (attendance) {
         events.push({
           id: `attendance-${date}`,
-          type: 'attendance',
-          text: `${attendance.checkIn}-${attendance.checkOut}`
-        })
+          type: "attendance",
+          text: `${attendance.checkIn || "--"}-${attendance.checkOut || "--"}`
+        });
       }
 
-      // 妫�鏌ュ嚭宸褰�
-      const businessTrip = this.businessTripData.find(item =>
-        date >= item.startDate && date <= item.endDate
-      )
+      // 鍑哄樊鏁版嵁
+      const businessTrip = (this.localBusinessTripData || []).find(item => {
+        return item && date >= item.startDate && date <= item.endDate;
+      });
+
       if (businessTrip) {
         events.push({
           id: `business-trip-${date}`,
-          type: 'business-trip',
-          text: `鍑哄樊: ${businessTrip.endCity}`
-        })
+          type: "business-trip",
+          text: `鍑哄樊: ${businessTrip.endCity || ""}`
+        });
       }
 
-      return events
+      console.log("鎵惧埌鐨勪簨浠�:", events);
+      return events;
     }
   }
-}
+};
 </script>
 
 <style scoped>
@@ -72,6 +131,7 @@
 
 .calendar-date {
   height: 100%;
+  padding: 8px;
   display: flex;
   flex-direction: column;
 }
@@ -79,6 +139,7 @@
 .date-number {
   font-weight: bold;
   margin-bottom: 4px;
+  font-size: 16px;
 }
 
 .date-events {
@@ -91,6 +152,19 @@
   align-items: center;
   margin-bottom: 2px;
   font-size: 12px;
+  padding: 2px 4px;
+  border-radius: 2px;
+  background-color: #f5f7fa;
+}
+
+.event-item.attendance {
+  background-color: #f0f9eb;
+  color: #67c23a;
+}
+
+.event-item.business-trip {
+  background-color: #ecf5ff;
+  color: #409eff;
 }
 
 .event-dot {
@@ -107,10 +181,13 @@
 .event-item.business-trip .event-dot {
   background-color: #409eff;
 }
-
+::v-deep .el-calendar-table .el-calendar-day {
+  height: 115px;
+}
 .event-text {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  flex: 1;
 }
 </style>

--
Gitblit v1.9.3