GEAR-OA/gear-ui3/src/views/peoples/attendance/calendar.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>