So kombinieren Sie PHP und Vue, um die Funktion zur Aufzeichnung von Urlaubsgenehmigungen für die Anwesenheit von Mitarbeitern zu implementieren

So kombinieren Sie PHP und Vue, um die Abwesenheitsgenehmigungsaufzeichnungsfunktion der Mitarbeiteranwesenheit zu realisieren

Mit der rasanten Entwicklung der Informationstechnologie beginnen immer mehr Unternehmen, elektronische Methoden zur Verwaltung der Mitarbeiteranwesenheits- und Urlaubsgenehmigungsaufzeichnungen einzusetzen. Als weit verbreitete Back-End-Entwicklungssprache bietet PHP die Vorteile hoher Effizienz, Stabilität und einfacher Erweiterung. Als beliebtes Front-End-Framework kann Vue problemlos eine gute Benutzeroberfläche und interaktive Effekte erzielen. In diesem Artikel wird erläutert, wie PHP und Vue kombiniert werden, um die Abwesenheitsgenehmigungsaufzeichnungsfunktion für die Anwesenheit von Mitarbeitern zu implementieren, und es werden spezifische Codebeispiele bereitgestellt.

Bevor wir beginnen, müssen wir die Anforderungen ermitteln und die Datenstruktur entwerfen. Die Abwesenheitsgenehmigungsaufzeichnungsfunktion der Mitarbeiteranwesenheit besteht hauptsächlich aus zwei Teilen: Urlaubsantrag und Genehmigungsaufzeichnung. Der Urlaubsantrag umfasst Urlaubsart, Startzeit, Endzeit, Urlaubsgrund und andere Informationen, und der Genehmigungsdatensatz umfasst den Genehmiger, die Genehmigungszeit, Genehmigungsmeinungen und andere Informationen. Das Folgende ist ein einfaches Beispiel für eine Datenstruktur:

Bewerbungsformular verlassen:

• id (int) – Bewerbungs-ID verlassen
• type (string) – Urlaubstyp
• start_time (datetime) – Startzeit
• end_time (datetime) - Endzeit
• reason (Zeichenfolge) - Grund für den Urlaub

Genehmigungsdatensatztabelle:

• id (int) - Genehmigungsdatensatz-ID
• application_id (int) - Urlaubsantrags-ID
• Genehmiger (Zeichenfolge) - Genehmiger
• approve_time (datetime) – Genehmigungszeit
• comment (string) – Genehmigungskommentar

Als nächstes werden wir PHP und Vue verwenden, um die Back-End- bzw. Front-End-Funktionen zu implementieren.

1. Back-End-Code-Implementierung (PHP):

Zuerst müssen wir eine PHP-Datei erstellen, um die Back-End-Logik zu verwalten. Nehmen wir an, wir nennen es „leave.php“. In dieser Datei verwenden wir mehrere APIs, um das Hinzufügen, Löschen, Ändern und Überprüfen von Urlaubsanträgen und Genehmigungsdatensätzen zu verarbeiten.

(1) API zum Abrufen der Liste der Urlaubsanträge:

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

(2) API zum Hinzufügen des Urlaubsantrags:

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

(3) API zum Abrufen der Liste der Genehmigungsdatensätze:

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

(4) API zum Hinzufügen des Genehmigungsdatensatzes:

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

2. Front-End-Code-Implementierung (Vue):

Als nächstes werden wir Vue verwenden, um die Front-End-Anzeige- und Interaktionslogik zu implementieren. Angenommen, wir definieren alle Vue-Komponenten in einer JavaScript-Datei „app.js“.

(1) Vue-Instanzen und Stammkomponenten erstellen:

// 创建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);
        });
    }
  }
});

(2) Komponenten für Urlaubsantrags- und Genehmigungsdatensätze erstellen:

// 创建请假申请组件
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>
  `
});

(3) Vue-Instanzen und -Komponenten in HTML verwenden:

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

Das Obige ist die Kombination von PHP und ein spezifisches Codebeispiel für Vue zur Implementierung der Funktion zur Aufzeichnung der Abwesenheitsgenehmigung der Mitarbeiteranwesenheit. Über die von PHP bereitgestellte Back-End-API und die von Vue bereitgestellte Front-End-Komponente können wir die Anzeige- und Hinzufügungsfunktionen von Urlaubsanträgen und Genehmigungsdatensätzen von Mitarbeitern realisieren. In konkreten Projekten können wir je nach Bedarf weiter ausbauen und optimieren. Ich hoffe, dieser Artikel hilft Ihnen!

Das obige ist der detaillierte Inhalt vonSo kombinieren Sie PHP und Vue, um die Funktion zur Aufzeichnung von Urlaubsgenehmigungen für die Anwesenheit von Mitarbeitern zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!