Comment générer un rapport d'enregistrement des exceptions de présence des employés via PHP et Vue

Comment générer un rapport d'enregistrement des exceptions de présence des employés via PHP et Vue

Introduction : À mesure que l'entreprise se développe et que le nombre d'employés augmente, la gestion de la présence des employés devient de plus en plus complexe. Afin de permettre aux gestionnaires de comprendre rapidement l'état de présence des employés, il est crucial de générer des rapports sur les exceptions de présence des employés. Cet article expliquera comment utiliser PHP et Vue pour implémenter cette fonction et fournira des exemples de code spécifiques.

1. Préparation
Avant de commencer, nous devons préparer le travail suivant :

1. Installer un environnement de développement PHP, tel que XAMPP ou WAMP.
2. Installez l'environnement de développement Vue.js.
3. Créez un tableau des employés et un tableau des relevés de présence dans la base de données.

2. Construisez l'interface backend

1. Créez un fichier PHP et nommez-le "api.php".

2. Dans "api.php", connectez-vous à la base de données et écrivez des instructions SQL pour interroger les données de présence. Par exemple, en supposant que nous ayons une table d'employés « employés » et une table d'enregistrement de présence « présence », nous pouvons utiliser l'instruction SQL suivante pour interroger tous les enregistrements d'exceptions de présence :

   SELECT employees.name, attendance.date, attendance.reason
   FROM employees
   INNER JOIN attendance ON employees.id = attendance.employee_id
   WHERE attendance.status = '异常'

   Copier après la connexion

3. Convertissez les résultats de la requête au format JSON et affichez-les. à la première page. Par exemple,

   $result = $db->query($sql);
   $data = array();
   while ($row = $result->fetch_assoc()) {
    $data[] = $row;
   }
   echo json_encode($data);

   Copier après la connexion

3. Créez un composant Vue

1. Créez un composant Vue, nommez-le "AttendanceReport" et introduisez-le dans la page.

   <template>
     <div>
    <h1>员工考勤异常记录报告</h1>
    <table>
      <thead>
        <tr>
          <th>员工姓名</th>
          <th>考勤日期</th>
          <th>异常原因</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="record in records" :key="record.id">
          <td>{{ record.name }}</td>
          <td>{{ record.date }}</td>
          <td>{{ record.reason }}</td>
        </tr>
      </tbody>
    </table>
     </div>
   </template>
   
   <script>
   export default {
     data() {
    return {
      records: []
    };
     },
     mounted() {
    this.fetchRecords();
     },
     methods: {
    fetchRecords() {
      // 使用Axios发送GET请求到后台接口
      axios.get('/api.php')
        .then(response => {
          this.records = response.data;
        })
        .catch(error => {
          console.error(error);
        });
    }
     }
   };
   </script>

   Copier après la connexion

4. Démarrez le projet

1. Intégrez les composants Vue et les interfaces backend dans le projet.
2. Introduisez et enregistrez le composant "AttendanceReport" dans le fichier d'entrée Vue.
3. Dans la page HTML, utilisez la balise "assiduité-report" pour introduire le composant "AttendanceReport".
4. Démarrez l'environnement de développement PHP et Vue, visitez la page et vous pourrez voir le rapport d'enregistrement des exceptions de présence des employés généré.

Conclusion : 
Grâce à la combinaison de PHP et Vue, nous pouvons générer rapidement des rapports sur les exceptions de présence des employés. PHP fournit une interface backend pour interroger les données dans la base de données et les affiche vers le front-end au format JSON. En tant que framework front-end, Vue est responsable de l'affichage et du traitement des données. Les développeurs n'ont qu'à suivre les étapes ci-dessus pour créer un environnement et écrire du code pour implémenter des fonctions et améliorer l'efficacité du travail.

Annexe : Exemple de code complet
api.php

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

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

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

$sql = "SELECT employees.name, attendance.date, attendance.reason
        FROM employees
        INNER JOIN attendance ON employees.id = attendance.employee_id
        WHERE attendance.status = '异常'";
$result = $conn->query($sql);

$data = array();
while ($row = $result->fetch_assoc()) {
    $data[] = $row;
}

echo json_encode($data);

$conn->close();
?>

App.vue

<template>
  <div>
    <attendance-report></attendance-report>
  </div>
</template>

<script>
import AttendanceReport from './components/AttendanceReport.vue';

export default {
  components: {
    AttendanceReport
  }
};
</script>

main.js

import Vue from 'vue';
import App from './App.vue';

new Vue({
  render: h => h(App)
}).$mount('#app');

Ci-dessus sont les étapes spécifiques et des exemples de code sur la façon de générer des rapports d'enregistrement d'exceptions de présence des employés via PHP et Vue. Grâce à cette méthode, les responsables peuvent rapidement visualiser les exceptions de présence des employés et améliorer l'efficacité et la précision du travail. J'espère que cet article vous aidera !

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!