当前位置：首页 > VUE

vue实现考勤报表

2026-02-20 08:02:40VUE

Vue实现考勤报表的关键步骤

数据准备与API设计

考勤报表通常需要后端提供数据接口，例如获取员工打卡记录、请假记录等。RESTful API设计示例：

GET /api/attendance?startDate=2023-01-01&endDate=2023-01-31 获取时间段内的考勤数据
GET /api/employees 获取员工基本信息

前端使用axios进行数据请求：

async fetchAttendanceData(params) {
  try {
    const response = await axios.get('/api/attendance', { params });
    return response.data;
  } catch (error) {
    console.error('获取考勤数据失败:', error);
  }
}

表格组件实现

使用Element UI或Ant Design Vue的表格组件展示数据：

<template>
  <el-table :data="attendanceData" border style="width: 100%">
    <el-table-column prop="employeeName" label="姓名" width="120" />
    <el-table-column prop="date" label="日期" width="150" />
    <el-table-column prop="checkIn" label="上班时间" width="120" />
    <el-table-column prop="checkOut" label="下班时间" width="120" />
    <el-table-column prop="status" label="状态" width="100">
      <template #default="{row}">
        <el-tag :type="getStatusType(row.status)">
          {{ row.status }}
        </el-tag>
      </template>
    </el-table-column>
  </el-table>
</template>

数据可视化

使用ECharts或Chart.js实现考勤统计图表：

initChart() {
  const chart = echarts.init(this.$refs.chart);
  const option = {
    title: { text: '月度考勤统计' },
    tooltip: {},
    xAxis: { data: ['正常', '迟到', '早退', '缺勤'] },
    yAxis: {},
    series: [{
      name: '人数',
      type: 'bar',
      data: [25, 5, 3, 2]
    }]
  };
  chart.setOption(option);
}

筛选与导出功能

实现日期筛选和Excel导出功能：

<template>
  <div class="filter-container">
    <el-date-picker
      v-model="dateRange"
      type="daterange"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
    />
    <el-button @click="exportExcel">导出Excel</el-button>
  </div>
</template>

<script>
import * as XLSX from 'xlsx';
export default {
  methods: {
    exportExcel() {
      const ws = XLSX.utils.json_to_sheet(this.attendanceData);
      const wb = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(wb, ws, "考勤数据");
      XLSX.writeFile(wb, "考勤报表.xlsx");
    }
  }
}
</script>

状态计算逻辑

实现考勤状态判断逻辑：

vue实现考勤报表

calculateStatus(record) {
  const { checkIn, checkOut, standardIn, standardOut } = record;
  if (!checkIn && !checkOut) return '缺勤';

  const lateThreshold = 30; // 迟到分钟阈值
  const earlyThreshold = 30; // 早退分钟阈值

  const checkInLate = this.minutesDiff(checkIn, standardIn) > lateThreshold;
  const checkOutEarly = this.minutesDiff(standardOut, checkOut) > earlyThreshold;

  if (checkInLate && checkOutEarly) return '迟到+早退';
  if (checkInLate) return '迟到';
  if (checkOutEarly) return '早退';

  return '正常';
}