How to use PHP and Vue to design the data filtering function of the employee attendance system

How to use PHP and Vue to design the data filtering function of the employee attendance system

Designing an efficient employee attendance system is crucial for enterprises, it can help enterprises Manage employee attendance, leave records and other information. In this system, the data filtering function is an indispensable part, which allows users to easily filter out employee attendance records that meet specific conditions. This article will introduce how to use PHP and Vue to design and implement the data filtering function of the employee attendance system, and provide specific code examples.

1. Back-end PHP implementation

In the back-end PHP, we can use SQL statements to query employee attendance records that meet the conditions. First, you need to connect to the database. Here is MySQL as an example:

<?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();
?>

In the above code, we first create a database connection and obtain the filter conditions passed by the front end, then construct a query SQL statement, and Convert the query results into an array and return it to the front end.

2. Front-end Vue implementation

In the front-end Vue, we can use axios to send asynchronous requests and obtain the data returned by the backend. First, you need to install axios:

npm install axios --save

Then, use axios in the Vue component to send the request and process the returned data:

<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>

In the above code, we obtain through Vue’s two-way data binding mechanism The user selects the department, start date, and due date and sends a POST request to the backend PHP script using axios. Then, assign the returned data to this.attendanceRecords and display it on the front end.

Through the above steps, the data filtering function of the employee attendance system can be realized. Users can select the department, start date, and end date. After clicking the filter button, the front end will send these filter conditions to the background PHP script for query, and display the query results to the user.

Hope the above code examples can help you implement data filtering function when designing employee attendance system. Of course, the specific implementation needs to be appropriately adjusted according to your business needs.

The above is the detailed content of How to use PHP and Vue to design the data filtering function of the employee attendance system. For more information, please follow other related articles on the PHP Chinese website!