174 lines
3.9 KiB
Vue
174 lines
3.9 KiB
Vue
<template>
|
|
<div class="attendance-calendar">
|
|
<el-card>
|
|
<template #header>
|
|
<div class="calendar-header">
|
|
<div class="search-form">
|
|
<el-form :inline="true">
|
|
<el-form-item label="开始日期">
|
|
<el-date-picker
|
|
v-model="startDate"
|
|
type="datetime"
|
|
placeholder="开始日期"
|
|
:size="'default'"
|
|
value-format="YYYY-MM-DD HH:mm:ss"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item label="结束日期">
|
|
<el-date-picker
|
|
v-model="endDate"
|
|
type="datetime"
|
|
placeholder="结束日期"
|
|
:size="'default'"
|
|
value-format="YYYY-MM-DD HH:mm:ss"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button type="primary" @click="handleSearch">查询</el-button>
|
|
<el-button @click="setCurrentMonth">本月</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<div class="calendar-container">
|
|
<attendance-calendar
|
|
:record-list="attendanceRecords"
|
|
:start-date="startDate"
|
|
:end-date="endDate"
|
|
/>
|
|
</div>
|
|
</el-card>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, computed, onMounted } from 'vue'
|
|
import AttendanceCalendar from './components/calendar.vue'
|
|
import { ElMessage } from 'element-plus'
|
|
import { listAttendanceRecord } from '@/api/oa/attendanceRecord'
|
|
|
|
// 查询日期范围
|
|
const startDate = ref('')
|
|
const endDate = ref('')
|
|
|
|
// 考勤记录数据
|
|
const attendanceRecords = ref([])
|
|
|
|
// 获取考勤记录
|
|
const getAttendanceRecords = async () => {
|
|
if (!startDate.value || !endDate.value) {
|
|
ElMessage.warning('请选择起止日期')
|
|
return
|
|
}
|
|
|
|
try {
|
|
const response = await listAttendanceRecord({
|
|
startTime: startDate.value,
|
|
endTime: endDate.value
|
|
})
|
|
attendanceRecords.value = response.rows
|
|
} catch (error) {
|
|
console.error('获取考勤记录失败:', error)
|
|
ElMessage.error('获取考勤记录失败')
|
|
}
|
|
}
|
|
|
|
// 设置本月日期范围
|
|
const setCurrentMonth = () => {
|
|
const now = new Date()
|
|
const firstDay = new Date(now.getFullYear(), now.getMonth(), 1)
|
|
const lastDay = new Date(now.getFullYear(), now.getMonth() + 1, 0)
|
|
|
|
startDate.value = firstDay.toISOString().split('T')[0] + ' 00:00:00'
|
|
endDate.value = lastDay.toISOString().split('T')[0] + ' 23:59:59'
|
|
handleSearch()
|
|
}
|
|
|
|
// 查询处理
|
|
const handleSearch = () => {
|
|
if (!startDate.value || !endDate.value) {
|
|
ElMessage.warning('请选择起止日期')
|
|
return
|
|
}
|
|
getAttendanceRecords()
|
|
}
|
|
|
|
// 初始加载数据
|
|
onMounted(() => {
|
|
setCurrentMonth()
|
|
})
|
|
|
|
// 计算日期范围内的天数
|
|
const daysInMonth = computed(() => {
|
|
if (!startDate.value || !endDate.value) return []
|
|
|
|
const start = new Date(startDate.value)
|
|
const end = new Date(endDate.value)
|
|
const days = []
|
|
|
|
for (let date = new Date(start); date <= end; date.setDate(date.getDate() + 1)) {
|
|
days.push(date.getDate())
|
|
}
|
|
|
|
return days
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.attendance-calendar {
|
|
padding: 20px;
|
|
}
|
|
|
|
.calendar-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 20px;
|
|
}
|
|
|
|
.month-title {
|
|
font-size: 18px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.calendar-container {
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.attendance-cell {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
}
|
|
|
|
.attendance-item {
|
|
font-size: 12px;
|
|
padding: 2px 4px;
|
|
border-radius: 4px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.attendance-type {
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* 考勤类型样式 */
|
|
.attendance {
|
|
background-color: #e1f3d8;
|
|
color: #67c23a;
|
|
}
|
|
|
|
.overtime {
|
|
background-color: #fdf6ec;
|
|
color: #e6a23c;
|
|
}
|
|
|
|
.travel {
|
|
background-color: #ecf5ff;
|
|
color: #409eff;
|
|
}
|
|
</style>
|