Comment utiliser PHP et Vue pour concevoir l'interface de planification du travail du système de présence des employés

Comment utiliser PHP et Vue pour concevoir l'interface de planification du travail du système de présence des employés

Dans les entreprises modernes, le système de présence des employés est un élément très important, qui peut aider les entreprises à gérer les ressources humaines et à contrôler les heures de travail. La clé pour concevoir un système de présence des employés efficace et facile à utiliser est une interface de planification du travail raisonnable. Cet article expliquera comment utiliser PHP et Vue pour concevoir l'interface de planification du travail du système de présence des employés et fournira des exemples de code spécifiques.

1. Préparation
   Avant de commencer la conception, vous devez vous assurer que vous disposez des préparations suivantes :
2. Un serveur prenant en charge le développement PHP et Vue
3. Données associées sur les horaires de travail, telles que les listes d'employés, les informations sur les équipes, etc.
4. Comprendre la syntaxe de base et le processus de développement de PHP et Vue.
5. Créer une table de base de données
   Tout d'abord, nous devons créer une table de base de données pour stocker les informations sur les horaires de travail des employés. Supposons que nous créions une table nommée « shifts », contenant les champs suivants :

• id : identifiant unique, utilisé pour distinguer les différentes équipes ;
• date : date de l'équipe ;
• shift : équipe ;
• Vous pouvez utiliser l'instruction SQL suivante pour créer la table :

CREATE TABLE shifts (

date DATE,
shift VARCHAR(10),
employee_id INT
);

Ensuite, nous devons créer une interface backend PHP pour gérer les requêtes frontales et interagir avec la base de données. Nous créons d'abord un fichier nommé "getShifts.php" pour implémenter l'interface permettant d'obtenir les informations sur les quarts de travail des employés :
3. 
   

   <?php
   // 连接数据库
   $conn = new mysqli("localhost", "username", "password", "database_name");
   
   // 检查连接是否成功
   if ($conn->connect_error) {
       die("连接失败: " . $conn->connect_error);
   }
   
   // 获取所有员工排班信息
   $sql = "SELECT * FROM shifts";
   $result = $conn->query($sql);
   
   // 将结果转化为JSON格式并返回
   $shifts = [];
   if ($result->num_rows > 0) {
       while ($row = $result->fetch_assoc()) {
           $shifts[] = $row;
       }
   }
   echo json_encode($shifts);
   
   // 关闭连接
   $conn->close();
   ?>

   Copier après la connexion
De même, nous devons également créer une interface pour enregistrer les informations sur les quarts de travail des employés, dans "saveShifts.php" implémenté dans le fichier. :

<?php
// 连接数据库
$conn = new mysqli("localhost", "username", "password", "database_name");

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

// 获取前端发送的员工排班信息
$data = json_decode(file_get_contents('php://input'), true);

// 清空原有的员工排班信息
$sql = "TRUNCATE TABLE shifts";
$conn->query($sql);

// 保存新的员工排班信息
foreach ($data as $shift) {
    $date = $shift['date'];
    $shiftType = $shift['shift'];
    $employeeId = $shift['employee_id'];
    
    $sql = "INSERT INTO shifts (date, shift, employee_id) VALUES ('$date', '$shiftType', $employeeId)";
    $conn->query($sql);
}

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

Maintenant, nous commençons à créer l'interface frontale de Vue. On crée d'abord un composant nommé "ShiftSchedule.vue" pour afficher l'horaire de travail de l'employé :
4. 
   

   <template>
     <div>
       <table>
         <thead>
           <tr>
             <th>Date</th>
             <th>Shift</th>
             <th>Employee ID</th>
           </tr>
         </thead>
         <tbody>
           <tr v-for="(shift, index) in shifts" :key="index">
             <td>{{ shift.date }}</td>
             <td>{{ shift.shift }}</td>
             <td>{{ shift.employee_id }}</td>
           </tr>
         </tbody>
       </table>
       <button @click="saveShifts">Save</button>
     </div>
   </template>
   
   <script>
   export default {
     data() {
       return {
         shifts: []
       }
     },
     mounted() {
       this.getShifts();
     },
     methods: {
       getShifts() {
         fetch('getShifts.php')
           .then(response => response.json())
           .then(data => this.shifts = data);
       },
       saveShifts() {
         fetch('saveShifts.php', {
           method: 'POST',
           body: JSON.stringify(this.shifts)
         })
           .then(response => {
             if (response.ok) {
               alert('保存成功');
             } else {
               alert('保存失败');
             }
           });
       }
     }
   }
   </script>

   Copier après la connexion
Ensuite, on utilise le composant dans l'application principale :

<template>
  <div>
    <h1>员工考勤系统 - 工作排班界面</h1>
    <ShiftSchedule></ShiftSchedule>
  </div>
</template>

<script>
import ShiftSchedule from './ShiftSchedule.vue';

export default {
  components: {
    ShiftSchedule
  }
}
</script>

Continuer Ensuite, on place le PHP et Vue code sur le serveur et exécutez l'application. Visitez cette page Web pour voir l'interface de l'horaire de travail de l'employé, et vous pouvez modifier et enregistrer les informations sur l'horaire de l'employé.
5. 
   
Résumé

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!