如何結合PHP和Vue實現員工考勤的請假審批記錄功能
隨著信息技術的快速發展，越來越多的企業開始采用電子化的方式管理員工的考勤和請假審批記錄。PHP作為一種廣泛使用的后端開發語言，具有高效、穩定和易于擴展等優點。而Vue作為一種流行的前端框架，能夠方便地實現良好的用戶界面和交互效果。本文將介紹如何結合PHP和Vue來實現員工考勤的請假審批記錄功能，并提供具體的代碼示例。
在開始之前，我們需要先確定需求和設計數據結構。員工考勤的請假審批記錄功能主要包含兩個部分：請假申請和審批記錄。請假申請包括請假類型、開始時間、結束時間、請假事由等信息，審批記錄包括審批人、審批時間、審批意見等信息。下面是一個簡單的數據結構示例：
請假申請表：
id (int) – 請假申請IDtype (string) – 請假類型start_time (datetime) – 開始時間end_time (datetime) – 結束時間reason (string) – 請假事由
審批記錄表：
id (int) – 審批記錄IDapplication_id (int) – 請假申請IDapprover (string) – 審批人approve_time (datetime) – 審批時間comment (string) – 審批意見
接下來，我們將使用PHP和Vue分別實現后端和前端的功能。
- 后端代碼實現（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);
?>
登錄后復制
- 前端代碼實現（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>{{ 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）在HTML中使用Vue實例和組件：
<!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>
登錄后復制
以上就是結合PHP和Vue實現員工考勤的請假審批記錄功能的具體代碼示例。通過PHP提供的后端API和Vue提供的前端組件，我們可以實現員工請假申請和審批記錄的展示和添加功能。在實際項目中，我們可以根據需求進行進一步的擴展和優化。希望本文對您有所幫助！
以上就是如何結合PHP和Vue實現員工考勤的請假審批記錄功能的詳細內容，更多請關注www.92cms.cn其它相關文章！
