You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
86 lines
2.4 KiB
86 lines
2.4 KiB
1 year ago
|
<template>
|
||
|
|
<div>
|
||
|
|
<el-calendar v-model="day">
|
||
|
|
<template #dateCell="{ date, data }">
|
||
|
|
<div>
|
||
|
|
<div>{{ data.day.split('-')[2] }}</div>
|
||
|
|
<div v-if="dayAttendances(data.day) && dayAttendances(data.day).attendance && device === 'desktop'" class="clock-in">
|
||
|
|
<el-tag v-if="dayAttendances(data.day).attendance.sign_in_at" effect="dark" size="mini">{{ $moment(dayAttendances(data.day).attendance.sign_in_at).format('HH:mm:ss') }}</el-tag>
|
||
|
|
<el-tag v-if="dayAttendances(data.day).attendance.sign_out_at" effect="dark" type="success" size="mini">{{ $moment(dayAttendances(data.day).attendance.sign_out_at).format('HH:mm:ss') }}</el-tag>
|
||
|
|
|
||
|
|
<el-tag v-if="dayAttendances(data.day).attendance.sign_in_at1" effect="dark" size="mini">{{ $moment(dayAttendances(data.day).attendance.sign_in_at1).format('HH:mm:ss') }}</el-tag>
|
||
|
|
<el-tag v-if="dayAttendances(data.day).attendance.sign_out_at1" effect="dark" type="success" size="mini">{{ $moment(dayAttendances(data.day).attendance.sign_out_at1).format('HH:mm:ss') }}</el-tag>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
</el-calendar>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import { index } from '@/api/attendance'
|
||
|
|
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
day: new Date(),
|
||
|
|
clockLogs: {
|
||
|
|
attendances: [],
|
||
|
|
is_workday: true,
|
||
|
|
on_dutys: [],
|
||
|
|
today_attendance: {}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
dayAttendances() {
|
||
|
|
return function(day) {
|
||
|
|
return this.clockLogs.attendances.find(i => i.date === day)
|
||
|
|
}
|
||
|
|
},
|
||
|
|
device() {
|
||
|
|
return this.$store.getters.device
|
||
|
|
}
|
||
|
|
},
|
||
|
|
watch: {
|
||
|
|
'day': {
|
||
|
|
handler: function(newVal, oldVal) {
|
||
|
|
if (new Date(newVal).getFullYear() !== new Date(oldVal).getFullYear() || new Date(newVal).getMonth() !== new Date(oldVal).getMonth()) {
|
||
|
|
this.getData()
|
||
|
|
}
|
||
|
|
},
|
||
|
|
immediate: true
|
||
|
|
}
|
||
|
|
},
|
||
|
|
created() {
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
async getData() {
|
||
|
|
try {
|
||
|
|
this.clockLogs = await index({
|
||
|
|
month: this.$moment(this.day).format('YYYY-MM')
|
||
|
|
})
|
||
|
|
} catch (err) {
|
||
|
|
console.error(err)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped lang="scss">
|
||
|
|
::v-deep .el-calendar-day {
|
||
|
|
height: auto!important;
|
||
|
|
min-height: 60px;
|
||
|
|
}
|
||
|
|
::v-deep .el-tag--mini + .el-tag--mini {
|
||
|
|
margin-top: 4px;
|
||
|
|
}
|
||
|
|
.clock-in {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
justify-content: flex-end;
|
||
|
|
align-items: flex-end;
|
||
|
|
}
|
||
|
|
</style>
|