考勤相关更改

WXL

2 天以前 96dd34f77d81db58f54e3d0ad4a8cc8082189a61

 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>