如何結合PHP和Vue實現員工考勤的請假審核記錄功能

如何結合PHP和Vue實現員工考勤的請假審批記錄功能

隨著資訊科技的快速發展，越來越多的企業開始採用電子化的方式管理員工的考勤和請假審核記錄。 PHP作為一種廣泛使用的後端開發語言，具有高效能、穩定和易於擴展等優點。而Vue作為一種流行的前端框架，能夠方便地實現良好的使用者介面和互動效果。本文將介紹如何結合PHP和Vue來實現員工考勤的請假審批記錄功能，並提供具體的程式碼範例。

在開始之前，我們需要先確定需求和設計資料結構。員工考勤的請假審核記錄功能主要包含兩個部分：請假申請和核准記錄。請假申請包括請假類型、開始時間、結束時間、請假事由等信息，審批記錄包括審批人、審批時間、審批意見等資訊。以下是一個簡單的資料結構範例：

請假申請表：

• id ​​(int) - 請假申請ID
• type (string) - 請假類型
• start_time (datetime) - 開始時間
• end_time (datetime) - 結束時間
• reason (string) - 請假事由

#審核記錄表：

• id ​​(int) - 審核記錄ID
• application_id (int) - 請假申請ID
• approver (string) - 審核者
• approve_time (datetime) - 審核時間
• comment (string) - 審批意見

接下來，我們將使用PHP和Vue分別實現後端和前端的功能。

1. 後端程式碼實作（PHP）：

首先，我們需要建立一個PHP文件，用於處理後端的邏輯。假設我們將其命名為"leave.php"。在該文件中，我們將透過幾個API來處理請假申請和核准記錄的增刪改查操作。

（1）取得請假​​申請清單的API：

<?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：

<?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：

<?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：

<?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. 前端程式碼實作（Vue）：

接下來，我們將使用Vue來實現前端的展示和交互邏輯。假設我們將所有的Vue元件定義在一個JavaScript檔案"app.js"中。

（1）建立Vue實例和根元件：

// 创建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）建立請假申請和審核記錄的元件：

// 创建请假申请组件
Vue.component("leave-application", {
  props: ["application"],
  template: `
    <div>
      <h4 id="application-type">{{ 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 id="record-approver">{{ record.approver }}</h4>
      <p>时间：{{ record.approve_time }}</p>
      <p>意见：{{ record.comment }}</p>
    </div>
  `
});

（3）在HTML中使用Vue實例與元件：

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

以上就是結合PHP和Vue實現員工考勤的請假審核記錄功能的具體程式碼範例。透過PHP提供的後端API和Vue提供的前端元件，我們可以實現員工請假申請和批准記錄的展示和新增功能。在實際專案中，我們可以根據需求進行進一步的擴展和最佳化。希望本文對您有幫助！

以上是如何結合PHP和Vue實現員工考勤的請假審核記錄功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！