Comment utiliser PHP et Vue pour concevoir la fonction de filtrage des données du système de présence des employés

Comment utiliser PHP et Vue pour concevoir la fonction de filtrage des données du système de présence des employés

Concevoir un système de présence des employés efficace est crucial pour les entreprises, car il peut aider les entreprises à gérer la présence des employés, les enregistrements de congés et d'autres informations. Dans ce système, la fonction de filtrage des données est un élément indispensable, qui permet aux utilisateurs de filtrer facilement les enregistrements de présence des employés qui répondent à des conditions spécifiques. Cet article expliquera comment utiliser PHP et Vue pour concevoir et implémenter la fonction de filtrage des données du système de présence des employés, et fournira des exemples de code spécifiques.

1. Implémentation du backend PHP

Dans le backend PHP, nous pouvons utiliser des instructions SQL pour interroger les enregistrements de présence des employés qualifiés. Tout d'abord, vous devez vous connecter à la base de données. Voici MySQL comme exemple :

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

Dans le code ci-dessus, nous créons d'abord une connexion à la base de données et obtenons les conditions de filtre transmises par le front-end, puis construisons une instruction SQL de requête et convertissons. les résultats de la requête Il est renvoyé au front-end sous forme de tableau.

2. Implémentation de Vue front-end

Dans la Vue front-end, nous pouvons utiliser axios pour envoyer des requêtes asynchrones et obtenir les données renvoyées par le backend. Tout d'abord, vous devez installer axios :

npm install axios --save

Ensuite, utilisez axios dans le composant Vue pour envoyer une requête et traiter les données renvoyées :

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

Dans le code ci-dessus, nous utilisons le mécanisme de liaison de données bidirectionnelle de Vue pour obtenir le département et la date de début sélectionnée par l'utilisateur et la date limite, et utilisez axios pour envoyer une requête POST au script PHP backend. Ensuite, attribuez les données renvoyées à this.attendanceRecords et affichez-les sur le front-end.

Grâce aux étapes ci-dessus, la fonction de filtrage des données du système de présence des employés peut être réalisée. Les utilisateurs peuvent sélectionner le département, la date de début et la date de fin. Après avoir cliqué sur le bouton de filtre, le front-end enverra ces conditions de filtre au script PHP back-end pour la requête et affichera les résultats de la requête à l'utilisateur.

J'espère que l'exemple de code ci-dessus pourra vous aider à implémenter la fonction de filtrage des données lors de la conception du système de présence des employés. Bien entendu, la mise en œuvre spécifique doit être adaptée de manière appropriée en fonction des besoins de votre entreprise.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!