Comment combiner PHP et Vue pour réaliser la fonction statistique du temps de travail de la présence des employés

Comment combiner PHP et Vue pour réaliser la fonction de statistiques du temps de travail de présence des employés

Dans la gestion d'entreprise moderne, les statistiques en temps réel et l'analyse de la présence des employés sont l'un des moyens importants pour améliorer l'efficacité du travail et le niveau de gestion. En tant que langage de programmation côté serveur populaire, PHP peut facilement traiter des données et interagir avec des bases de données. Vue est un framework frontal populaire qui peut fournir une interface utilisateur riche et des fonctions interactives. En combinant PHP et Vue, nous pouvons implémenter une fonction de statistiques de temps de travail pour la présence des employés.

Tout d'abord, nous devons créer les tables correspondantes dans la base de données pour stocker les données de présence des employés. Supposons que nous créions une table nommée fréquentation avec les champs suivants : id, Employee_id, check_in, check_out. id est l'identifiant unique du relevé de présence, Employee_id est l'identifiant unique de l'employé, check_in est le temps de travail et check_out est le temps de repos.

Ensuite, nous devons écrire du code PHP pour implémenter les opérations d'ajout, de suppression, de modification et de requête de données. Prenons comme exemple la fonction d'obtention du relevé de présence d'un employé un certain jour. L'exemple de code est le suivant :

<?php
// 连接数据库
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "database";

$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
    die("数据库连接失败: " . $conn->connect_error);
}

// 获取参数
$employee_id = $_POST['employee_id'];
$date = $_POST['date'];

// 查询数据
$sql = "SELECT * FROM attendance WHERE employee_id='$employee_id' AND DATE(check_in)='$date'";
$result = $conn->query($sql);

// 处理结果
if ($result->num_rows > 0) {
    $attendance = array();
    while ($row = $result->fetch_assoc()) {
        $attendance[] = $row;
    }
    echo json_encode($attendance);
} else {
    echo "没有找到考勤记录";
}

// 关闭数据库连接
$conn->close();
?>

Le code ci-dessus obtient l'identifiant de l'employé entrant et les paramètres de date en se connectant à la base de données, puis interroge la présence. enregistrer dans la base de données et convertir le résultat en JSON Le format est renvoyé au front-end.

En termes de Vue, nous pouvons utiliser les fonctions de composantisation et de liaison de données de Vue pour créer une page pour les statistiques de présence et de temps de travail des employés. Voici un exemple de code simple :

<template>
  <div>
    <!-- 员工选择 -->
    <select v-model="selectedEmployee">
      <option v-for="employee in employees" :key="employee.id" :value="employee.id">{{ employee.name }}</option>
    </select>
    
    <!-- 日期选择 -->
    <input type="date" v-model="selectedDate">
    
    <!-- 查询按钮 -->
    <button @click="queryAttendance">查询</button>
    
    <!-- 考勤记录 -->
    <table v-if="attendance.length > 0">
      <thead>
        <tr>
          <th>日期</th>
          <th>上班时间</th>
          <th>下班时间</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="record in attendance" :key="record.id">
          <td>{{ record.check_in }}</td>
          <td>{{ record.check_out }}</td>
        </tr>
      </tbody>
    </table>
    <p v-else>没有找到考勤记录</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      employees: [], // 所有员工
      selectedEmployee: '', // 选中的员工
      selectedDate: '', // 选中的日期
      attendance: [], // 考勤记录
    };
  },
  methods: {
    queryAttendance() {
      // 发送请求到后端
      // 假设请求的URL是/api/getAttendance.php
      axios.post('/api/getAttendance.php', {
        employee_id: this.selectedEmployee,
        date: this.selectedDate,
      })
        .then(response => {
          this.attendance = response.data;
        })
        .catch(error => {
          console.error(error);
        });
    },
  },
  mounted() {
    // 获取所有员工列表
    // 假设请求的URL是/api/getEmployees.php
    axios.get('/api/getEmployees.php')
      .then(response => {
        this.employees = response.data;
      })
      .catch(error => {
        console.error(error);
      });
  },
};
</script>

Le code ci-dessus utilise la liaison de données de Vue pour contrôler la sélection des employés, la sélection des dates et l'affichage des enregistrements de présence. Lorsque l'utilisateur clique sur le bouton de requête, une demande sera envoyée au backend et le relevé de présence sera mis à jour en fonction des données renvoyées. Dans le même temps, lors du chargement de la page, une liste de tous les employés est également obtenue pour que l'utilisateur puisse la sélectionner.

En combinant PHP et Vue, nous pouvons facilement implémenter la fonction de statistiques de temps de travail de présence des employés. Le code ci-dessus n'est qu'un exemple. La mise en œuvre réelle peut également devoir prendre en compte d'autres facteurs, tels que la gestion des autorisations, la vérification des données, l'optimisation de l'interface, etc. Mais de manière générale, la combinaison de PHP et Vue peut nous fournir des outils puissants pour mettre en œuvre rapidement un système de statistiques de présence et de temps de travail des employés.

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!