<template>
|
<div class="attendance-calendar">
|
<el-calendar v-model="calendarValue">
|
<template #date-cell="{ data }">
|
<div class="calendar-date">
|
<div class="date-number">{{ data.day.split('-')[2] }}</div>
|
<div class="date-events">
|
<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 {
|
calendarValue: new Date()
|
}
|
},
|
methods: {
|
getDateEvents(date) {
|
const events = []
|
|
// 检查出勤记录
|
const attendance = this.attendanceData.find(item => item.date === date)
|
if (attendance) {
|
events.push({
|
id: `attendance-${date}`,
|
type: 'attendance',
|
text: `${attendance.checkIn}-${attendance.checkOut}`
|
})
|
}
|
|
// 检查出差记录
|
const businessTrip = this.businessTripData.find(item =>
|
date >= item.startDate && date <= item.endDate
|
)
|
if (businessTrip) {
|
events.push({
|
id: `business-trip-${date}`,
|
type: 'business-trip',
|
text: `出差: ${businessTrip.endCity}`
|
})
|
}
|
|
return events
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.attendance-calendar {
|
padding: 20px;
|
}
|
|
.calendar-date {
|
height: 100%;
|
display: flex;
|
flex-direction: column;
|
}
|
|
.date-number {
|
font-weight: bold;
|
margin-bottom: 4px;
|
}
|
|
.date-events {
|
flex: 1;
|
overflow: hidden;
|
}
|
|
.event-item {
|
display: flex;
|
align-items: center;
|
margin-bottom: 2px;
|
font-size: 12px;
|
}
|
|
.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;
|
}
|
|
.event-text {
|
white-space: nowrap;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
}
|
</style>
|
