如何使用PHP和Vue設計員工考勤系統的資料篩選功能

如何使用PHP和Vue設計員工考勤系統的資料篩選功能

設計一個高效的員工考勤系統對於企業來說至關重要，它可以幫助企業管理員工的出勤狀況、休假記錄等資訊。而在這個系統中，資料篩選功能是一個不可或缺的部分，它可以讓使用者輕鬆篩選出符合特定條件的員工考勤記錄。本文將介紹如何使用PHP和Vue來設計實現員工考勤系統的資料篩選功能，並提供具體的程式碼範例。

一、後端PHP實作

在後端PHP中，我們可以使用SQL語句來查詢符合條件的員工考勤記錄。首先，需要連接到資料庫，這裡以MySQL為例：

<?php
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "attendance_system";

// 创建数据库连接
$conn = new mysqli($servername, $username, $password, $dbname);

// 检查连接是否成功
if ($conn->connect_error) {
    die("连接失败: " . $conn->connect_error);
}

// 获取前端传递过来的筛选条件
$department = $_POST['department'];
$start_date = $_POST['start_date'];
$end_date = $_POST['end_date'];

// 构建查询SQL语句
$sql = "SELECT * FROM attendance WHERE department = '$department' AND date BETWEEN '$start_date' AND '$end_date'";

$result = $conn->query($sql);

// 将查询结果转换为数组并返回给前端
$response = array();
if ($result->num_rows > 0) {
    while($row = $result->fetch_assoc()) {
        $response[] = $row;
    }
}
echo json_encode($response);
$conn->close();
?>

上述程式碼中，我們先建立了一個資料庫連接，並取得前端傳遞過來的篩選條件，然後建構了一個查詢SQL語句，並將查詢結果轉換為陣列後傳回給前端。

二、前端Vue實作

在前端Vue中，我們可以使用axios來傳送非同步請求並取得後端回傳的資料。首先需要安裝axios：

npm install axios --save

然後，在Vue組件中使用axios發送請求並處理返回的資料：

<template>
  <div>
    <select v-model="department">
      <option disabled value="">请选择部门</option>
      <option v-for="dept in departments" :value="dept">{{dept}}</option>
    </select>
    <input type="date" v-model="startDate">
    <input type="date" v-model="endDate">
    <button @click="filterData">筛选</button>
    <table>
      <thead>
        <tr>
          <th>员工姓名</th>
          <th>打卡日期</th>
          <th>上班时间</th>
          <th>下班时间</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="record in attendanceRecords" :key="record.id">
          <td>{{record.name}}</td>
          <td>{{record.date}}</td>
          <td>{{record.start_time}}</td>
          <td>{{record.end_time}}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      department: '',
      startDate: '',
      endDate: '',
      departments: ['部门A', '部门B', '部门C'], // 假设已经获取了部门列表
      attendanceRecords: []
    }
  },
  methods: {
    filterData() {
      axios.post('http://localhost/filter.php', {
        department: this.department,
        start_date: this.startDate,
        end_date: this.endDate
      })
      .then(response => {
        this.attendanceRecords = response.data;
      })
      .catch(error => {
        console.error(error);
      });
    }
  }
}
</script>

上述程式碼中，我們透過Vue的雙向資料綁定機制，獲取使用者選擇的部門、起始日期和截止日期，並使用axios發送POST請求到後端PHP腳本。然後，將傳回的資料賦值給this.attendanceRecords，並在前端展示出來。

透過以上步驟，就可以實現員工考勤系統的資料篩選功能。使用者可以選擇部門、起始日期和截止日期，點擊篩選按鈕後，前端會將這些篩選條件傳送給後台PHP腳本進行查詢，並將查詢結果顯示給使用者。

希望以上程式碼範例能幫助你在設計員工考勤系統時實現資料篩選功能。當然，具體實現還需要根據你的業務需求進行適當的調整。

以上是如何使用PHP和Vue設計員工考勤系統的資料篩選功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！