如何結(jié)合PHP和Vue實現(xiàn)員工考勤的請假審批記錄功能
隨著信息技術(shù)的快速發(fā)展，越來越多的企業(yè)開始采用電子化的方式管理員工的考勤和請假審批記錄。PHP作為一種廣泛使用的后端開發(fā)語言，具有高效、穩(wěn)定和易于擴展等優(yōu)點。而Vue作為一種流行的前端框架，能夠方便地實現(xiàn)良好的用戶界面和交互效果。本文將介紹如何結(jié)合PHP和Vue來實現(xiàn)員工考勤的請假審批記錄功能，并提供具體的代碼示例。
在開始之前，我們需要先確定需求和設(shè)計數(shù)據(jù)結(jié)構(gòu)。員工考勤的請假審批記錄功能主要包含兩個部分：請假申請和審批記錄。請假申請包括請假類型、開始時間、結(jié)束時間、請假事由等信息，審批記錄包括審批人、審批時間、審批意見等信息。下面是一個簡單的數(shù)據(jù)結(jié)構(gòu)示例：
請假申請表：
id (int) – 請假申請IDtype (string) – 請假類型start_time (datetime) – 開始時間end_time (datetime) – 結(jié)束時間reason (string) – 請假事由
審批記錄表：
id (int) – 審批記錄IDapplication_id (int) – 請假申請IDapprover (string) – 審批人approve_time (datetime) – 審批時間comment (string) – 審批意見
接下來，我們將使用PHP和Vue分別實現(xiàn)后端和前端的功能。
- 后端代碼實現(xiàn)（PHP）：
首先，我們需要創(chuàng)建一個PHP文件，用于處理后端的邏輯。假設(shè)我們將其命名為”leave.php”。在該文件中，我們將通過幾個API來處理請假申請和審批記錄的增刪改查操作。
（1）獲取請假申請列表的API：
<?php
// 獲取請假申請列表
function getLeaveApplications() {
// 連接數(shù)據(jù)庫
$conn = mysqli_connect("localhost", "root", "password", "database");
// 查詢請假申請列表
$sql = "SELECT * FROM leave_application";
$result = mysqli_query($conn, $sql);
// 返回結(jié)果
$applications = [];
while ($row = mysqli_fetch_assoc($result)) {
$applications[] = $row;
}
return $applications;
}
// 調(diào)用API獲取請假申請列表
$leaveApplications = getLeaveApplications();
echo json_encode($leaveApplications);
?>
登錄后復(fù)制
（2）添加請假申請的API：
<?php
// 添加請假申請
function addLeaveApplication($type, $startTime, $endTime, $reason) {
// 連接數(shù)據(jù)庫
$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請求中的數(shù)據(jù)
$type = $_POST['type'];
$startTime = $_POST['startTime'];
$endTime = $_POST['endTime'];
$reason = $_POST['reason'];
// 調(diào)用API添加請假申請
addLeaveApplication($type, $startTime, $endTime, $reason);
?>
登錄后復(fù)制
（3）獲取審批記錄列表的API：
<?php
// 獲取審批記錄列表
function getApprovalRecords() {
// 連接數(shù)據(jù)庫
$conn = mysqli_connect("localhost", "root", "password", "database");
// 查詢審批記錄列表
$sql = "SELECT * FROM approval_record";
$result = mysqli_query($conn, $sql);
// 返回結(jié)果
$records = [];
while ($row = mysqli_fetch_assoc($result)) {
$records[] = $row;
}
return $records;
}
// 調(diào)用API獲取審批記錄列表
$approvalRecords = getApprovalRecords();
echo json_encode($approvalRecords);
?>
登錄后復(fù)制
（4）添加審批記錄的API：
<?php
// 添加審批記錄
function addApprovalRecord($applicationId, $approver, $approveTime, $comment) {
// 連接數(shù)據(jù)庫
$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請求中的數(shù)據(jù)
$applicationId = $_POST['applicationId'];
$approver = $_POST['approver'];
$approveTime = $_POST['approveTime'];
$comment = $_POST['comment'];
// 調(diào)用API添加審批記錄
addApprovalRecord($applicationId, $approver, $approveTime, $comment);
?>
登錄后復(fù)制
- 前端代碼實現(xiàn)（Vue）：
接下來，我們將使用Vue來實現(xiàn)前端的展示和交互邏輯。假設(shè)我們將所有的Vue組件都定義在一個JavaScript文件”app.js”中。
（1）創(chuàng)建Vue實例和根組件：
// 創(chuàng)建Vue實例
var app = new Vue({
el: "#app",
data: {
leaveApplications: [],
approvalRecords: []
},
mounted() {
// 在mounted鉤子函數(shù)中獲取請假申請列表和審批記錄列表
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);
});
}
}
});
登錄后復(fù)制
（2）創(chuàng)建請假申請和審批記錄的組件：
// 創(chuàng)建請假申請組件
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>
`
});
// 創(chuàng)建審批記錄組件
Vue.component("approval-record", {
props: ["record"],
template: `
<div>
<h4>{{ record.approver }}</h4>
<p>時間：{{ record.approve_time }}</p>
<p>意見：{{ record.comment }}</p>
</div>
`
});
登錄后復(fù)制
（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>
登錄后復(fù)制
以上就是結(jié)合PHP和Vue實現(xiàn)員工考勤的請假審批記錄功能的具體代碼示例。通過PHP提供的后端API和Vue提供的前端組件，我們可以實現(xiàn)員工請假申請和審批記錄的展示和添加功能。在實際項目中，我們可以根據(jù)需求進行進一步的擴展和優(yōu)化。希望本文對您有所幫助！
以上就是如何結(jié)合PHP和Vue實現(xiàn)員工考勤的請假審批記錄功能的詳細(xì)內(nèi)容，更多請關(guān)注www.92cms.cn其它相關(guān)文章！
