<template>
|
<div class="attendance-calendar">
|
<!-- <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("-")
|
.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"
|
class="event-item"
|
:class="event.type"
|
>
|
<span class="event-dot"></span>
|
<span class="event-text">{{ event.text }}</span>
|
</div>
|
</div>
|
</div>
|
</template>
|
</el-calendar>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
name: "AttendanceCalendar",
|
props: {
|
attendanceData: Array,
|
businessTripData: Array
|
},
|
data() {
|
return {
|
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) {
|
console.log("getDateEvents 被调用, 日期:", date);
|
console.log("当前考勤数据:", this.localAttendanceData);
|
console.log("当前出差数据:", this.localBusinessTripData);
|
|
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 || "--"}`
|
});
|
}
|
|
// 出差数据
|
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 || ""}`
|
});
|
}
|
|
console.log("找到的事件:", events);
|
return events;
|
}
|
}
|
};
|
</script>
|
|
<style scoped>
|
.attendance-calendar {
|
padding: 20px;
|
}
|
|
.calendar-date {
|
height: 100%;
|
padding: 8px;
|
display: flex;
|
flex-direction: column;
|
}
|
|
.date-number {
|
font-weight: bold;
|
margin-bottom: 4px;
|
font-size: 16px;
|
}
|
|
.date-events {
|
flex: 1;
|
overflow: hidden;
|
}
|
|
.event-item {
|
display: flex;
|
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 {
|
width: 6px;
|
height: 6px;
|
border-radius: 50%;
|
margin-right: 4px;
|
}
|
|
.event-item.attendance .event-dot {
|
background-color: #67c23a;
|
}
|
|
.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>
|
