Comment combiner PHP et Vue pour implémenter la fonction d'enregistrement des approbations de congés pour la présence des employés-tutoriel php-php.cn

Comment combiner PHP et Vue pour implémenter la fonction d'enregistrement des approbations de congés pour la présence des employés

王林

Libérer： 2023-09-29 10:18:01

original

853 Les gens l'ont consulté

Comment combiner PHP et Vue pour implémenter la fonction denregistrement des approbations de congés pour la présence des employés

Comment combiner PHP et Vue pour réaliser la fonction d'enregistrement d'approbation des congés de présence des employés

Avec le développement rapide des technologies de l'information, de plus en plus d'entreprises commencent à utiliser des méthodes électroniques pour gérer les présences des employés et les enregistrements d'approbation de congé. En tant que langage de développement back-end largement utilisé, PHP présente les avantages d’une efficacité élevée, d’une stabilité et d’une expansion facile. En tant que framework frontal populaire, Vue peut facilement obtenir une bonne interface utilisateur et des effets interactifs. Cet article expliquera comment combiner PHP et Vue pour implémenter la fonction d'enregistrement d'approbation des congés de présence des employés et fournira des exemples de code spécifiques.

Avant de commencer, nous devons déterminer les exigences et concevoir la structure des données. La fonction de dossier d'approbation des congés de présence des employés comprend principalement deux parties : la demande de congé et le dossier d'approbation. La demande de congé comprend le type de congé, l'heure de début, l'heure de fin, le motif du congé et d'autres informations, et le dossier d'approbation comprend l'approbateur, l'heure d'approbation, les avis d'approbation et d'autres informations. Voici un exemple simple de structure de données :

Formulaire de demande de congé :

id (int) - ID de demande de congé
type (chaîne) - Type de congé
start_time (datetime) - Heure de début
end_time (datetime) - Heure de fin
raison (chaîne) - Raison du congé

Tableau d'enregistrement d'approbation:

id (int) - ID d'enregistrement d'approbation
application_id (int) - ID d'application de congé
approbateur (chaîne) - Approbateur
approve_time (datetime) - Heure d'approbation
comment (string) - Commentaire d'approbation

Ensuite, nous utiliserons PHP et Vue pour implémenter respectivement les fonctions back-end et front-end.

Implémentation du code backend (PHP) :

Tout d'abord, nous devons créer un fichier PHP pour gérer la logique backend. Disons que nous l'appelons "leave.php". Dans ce fichier, nous utiliserons plusieurs API pour traiter l'ajout, la suppression, la modification et la vérification des demandes de congé et des dossiers d'approbation.

(1) API pour obtenir la liste des demandes de congé :

<?php
// 获取请假申请列表
function getLeaveApplications() {
  // 连接数据库
  $conn = mysqli_connect("localhost", "root", "password", "database");
  // 查询请假申请列表
  $sql = "SELECT * FROM leave_application";
  $result = mysqli_query($conn, $sql);
  // 返回结果
  $applications = [];
  while ($row = mysqli_fetch_assoc($result)) {
    $applications[] = $row;
  }
  return $applications;
}

// 调用API获取请假申请列表
$leaveApplications = getLeaveApplications();
echo json_encode($leaveApplications);
?>

Copier après la connexion

(2) API pour ajouter une demande de congé :

<?php
// 添加请假申请
function addLeaveApplication($type, $startTime, $endTime, $reason) {
  // 连接数据库
  $conn = mysqli_connect("localhost", "root", "password", "database");
  // 插入请假申请
  $sql = "INSERT INTO leave_application (type, start_time, end_time, reason) VALUES ('$type', '$startTime', '$endTime', '$reason')";
  mysqli_query($conn, $sql);
}

// 获取POST请求中的数据
$type = $_POST['type'];
$startTime = $_POST['startTime'];
$endTime = $_POST['endTime'];
$reason = $_POST['reason'];

// 调用API添加请假申请
addLeaveApplication($type, $startTime, $endTime, $reason);
?>

Copier après la connexion

(3) API pour obtenir la liste des enregistrements d'approbation :

<?php
// 获取审批记录列表
function getApprovalRecords() {
  // 连接数据库
  $conn = mysqli_connect("localhost", "root", "password", "database");
  // 查询审批记录列表
  $sql = "SELECT * FROM approval_record";
  $result = mysqli_query($conn, $sql);
  // 返回结果
  $records = [];
  while ($row = mysqli_fetch_assoc($result)) {
    $records[] = $row;
  }
  return $records;
}

// 调用API获取审批记录列表
$approvalRecords = getApprovalRecords();
echo json_encode($approvalRecords);
?>

Copier après la connexion

(4) API pour ajouter un enregistrement d'approbation :

<?php
// 添加审批记录
function addApprovalRecord($applicationId, $approver, $approveTime, $comment) {
  // 连接数据库
  $conn = mysqli_connect("localhost", "root", "password", "database");
  // 插入审批记录
  $sql = "INSERT INTO approval_record (application_id, approver, approve_time, comment) VALUES ('$applicationId', '$approver', '$approveTime', '$comment')";
  mysqli_query($conn, $sql);
}

// 获取POST请求中的数据
$applicationId = $_POST['applicationId'];
$approver = $_POST['approver'];
$approveTime = $_POST['approveTime'];
$comment = $_POST['comment'];

// 调用API添加审批记录
addApprovalRecord($applicationId, $approver, $approveTime, $comment);
?>

Copier après la connexion

Implémentation du code front-end (Vue) :

Ensuite, nous utiliserons Vue pour implémenter la logique d'affichage et d'interaction front-end. Supposons que nous définissions tous les composants Vue dans un fichier JavaScript "app.js".

(1) Créez des instances Vue et des composants racine :

// 创建Vue实例
var app = new Vue({
  el: "#app",
  data: {
    leaveApplications: [],
    approvalRecords: []
  },
  mounted() {
    // 在mounted钩子函数中获取请假申请列表和审批记录列表
    this.getLeaveApplications();
    this.getApprovalRecords();
  },
  methods: {
    // 获取请假申请列表
    getLeaveApplications() {
      axios.get("leave.php")
        .then(response => {
          this.leaveApplications = response.data;
        })
        .catch(error => {
          console.log(error);
        });
    },
    // 添加请假申请
    addLeaveApplication(application) {
      axios.post("leave.php", application)
        .then(response => {
          this.getLeaveApplications(); // 添加成功后刷新列表
        })
        .catch(error => {
          console.log(error);
        });
    },
    // 获取审批记录列表
    getApprovalRecords() {
      axios.get("approval.php")
        .then(response => {
          this.approvalRecords = response.data;
        })
        .catch(error => {
          console.log(error);
        });
    },
    // 添加审批记录
    addApprovalRecord(record) {
      axios.post("approval.php", record)
        .then(response => {
          this.getApprovalRecords(); // 添加成功后刷新列表
        })
        .catch(error => {
          console.log(error);
        });
    }
  }
});

Copier après la connexion

(2) Créez des composants pour les enregistrements de demande de congé et d'approbation :

// 创建请假申请组件
Vue.component("leave-application", {
  props: ["application"],
  template: `
    <div>
      <h4>{{ application.type }}</h4>
      <p>时间：{{ application.start_time }} - {{ application.end_time }}</p>
      <p>事由：{{ application.reason }}</p>
    </div>
  `
});

// 创建审批记录组件
Vue.component("approval-record", {
  props: ["record"],
  template: `
    <div>
      <h4>{{ record.approver }}</h4>
      <p>时间：{{ record.approve_time }}</p>
      <p>意见：{{ record.comment }}</p>
    </div>
  `
});

Copier après la connexion

(3) Utilisez des instances et des composants Vue en HTML :

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>员工考勤请假审批记录</title>
</head>
<body>
  <div id="app">
    <h2>请假申请列表</h2>
    <div>
      <leave-application v-for="application in leaveApplications" :application="application" :key="application.id"></leave-application>
    </div>
    <hr>
    <h2>审批记录列表</h2>
    <div>
      <approval-record v-for="record in approvalRecords" :record="record" :key="record.id"></approval-record>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script src="app.js"></script>
</body>
</html>

Copier après la connexion

Ce qui précède est la combinaison de PHP et Un exemple de code spécifique pour Vue pour implémenter la fonction d'enregistrement des approbations de congés de la présence des employés. Grâce à l'API back-end fournie par PHP et au composant front-end fourni par Vue, nous pouvons réaliser les fonctions d'affichage et d'ajout des demandes de congé des employés et des enregistrements d'approbation. Dans les projets réels, nous pouvons étendre et optimiser davantage en fonction des besoins. 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!