如何利用PHP和Vue搭建員工考勤的請(qǐng)假審批流程
隨著企業(yè)的規(guī)模不斷擴(kuò)大，員工的請(qǐng)假審批流程變得越來越繁瑣。為了提高工作效率，許多企業(yè)開始采用電子化的方式進(jìn)行請(qǐng)假審批，其中PHP和Vue是一對(duì)非常強(qiáng)大的組合。本文將介紹如何利用PHP和Vue搭建一個(gè)員工考勤的請(qǐng)假審批流程，并提供一些具體的代碼示例。
一、準(zhǔn)備工作
首先，我們需要搭建一個(gè)簡單的環(huán)境來運(yùn)行PHP和Vue。我們可以使用XAMPP或者WAMP等軟件來搭建本地服務(wù)器。然后，在服務(wù)器上創(chuàng)建一個(gè)數(shù)據(jù)庫，用于存儲(chǔ)員工的請(qǐng)假記錄。接下來，創(chuàng)建一個(gè)名為”attendance”的數(shù)據(jù)庫表，其中包含以下字段：
id: 唯一標(biāo)識(shí)符，用于區(qū)分每個(gè)請(qǐng)假記錄name: 員工姓名start_date: 請(qǐng)假開始日期end_date: 請(qǐng)假結(jié)束日期reason: 請(qǐng)假原因status: 請(qǐng)假審批狀態(tài)（待審批/已通過/已拒絕）
二、后端開發(fā)
- 創(chuàng)建一個(gè)名為”api.php”的文件，用于處理前端的請(qǐng)求和數(shù)據(jù)庫操作。以下是一個(gè)簡單的代碼示例：
<?php
require_once 'config.php';
// 查詢請(qǐng)假記錄
if ($_SERVER['REQUEST_METHOD'] === 'GET') {
$conn = new mysqli(DB_HOST, DB_USER, DB_PASS, DB_NAME);
if ($conn->connect_error) {
die("連接失敗: " . $conn->connect_error);
}
$sql = "SELECT * FROM attendance";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
$data = [];
while ($row = $result->fetch_assoc()) {
$data[] = $row;
}
echo json_encode($data);
} else {
echo "沒有找到請(qǐng)假記錄";
}
$conn->close();
}
// 創(chuàng)建請(qǐng)假記錄
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
// 獲取前端傳遞的數(shù)據(jù)
$name = $_POST['name'];
$start_date = $_POST['start_date'];
$end_date = $_POST['end_date'];
$reason = $_POST['reason'];
$conn = new mysqli(DB_HOST, DB_USER, DB_PASS, DB_NAME);
if ($conn->connect_error) {
die("連接失敗: " . $conn->connect_error);
}
$sql = "INSERT INTO attendance (name, start_date, end_date, reason, status) VALUES ('$name', '$start_date', '$end_date', '$reason', '待審批')";
if ($conn->query($sql) === TRUE) {
echo "請(qǐng)假申請(qǐng)已提交";
} else {
echo "請(qǐng)假申請(qǐng)?zhí)峤皇?quot;;
}
$conn->close();
}
?>
登錄后復(fù)制
- 創(chuàng)建一個(gè)名為”config.php”的文件，用于存放數(shù)據(jù)庫的連接信息。以下是一個(gè)簡單的代碼示例：
<?php
define('DB_HOST', 'localhost');
define('DB_USER', 'root');
define('DB_PASS', '123456');
define('DB_NAME', 'attendance');
?>
登錄后復(fù)制
三、前端開發(fā)
- 創(chuàng)建一個(gè)名為”index.html”的文件，用于顯示員工的請(qǐng)假記錄和提交請(qǐng)假申請(qǐng)表單。以下是一個(gè)簡單的代碼示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>員工考勤請(qǐng)假審批流程</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
</head>
<body>
<div id="app" class="container">
<h1>員工考勤請(qǐng)假審批流程</h1>
<h2>請(qǐng)假記錄</h2>
<table class="table">
<thead>
<tr>
<th>#</th>
<th>姓名</th>
<th>開始日期</th>
<th>結(jié)束日期</th>
<th>請(qǐng)假原因</th>
<th>審批狀態(tài)</th>
</tr>
</thead>
<tbody>
<tr v-for="(record, index) in records" :key="index">
<td>{{ index + 1 }}</td>
<td>{{ record.name }}</td>
<td>{{ record.start_date }}</td>
<td>{{ record.end_date }}</td>
<td>{{ record.reason }}</td>
<td>{{ record.status }}</td>
</tr>
</tbody>
</table>
<h2>提交請(qǐng)假申請(qǐng)</h2>
<form @submit.prevent="submitForm">
<div class="form-group">
<label for="name">姓名</label>
<input type="text" class="form-control" id="name" v-model="name" required>
</div>
<div class="form-group">
<label for="start_date">開始日期</label>
<input type="text" class="form-control" id="start_date" v-model="start_date" required>
</div>
<div class="form-group">
<label for="end_date">結(jié)束日期</label>
<input type="text" class="form-control" id="end_date" v-model="end_date" required>
</div>
<div class="form-group">
<label for="reason">請(qǐng)假原因</label>
<textarea class="form-control" id="reason" v-model="reason" required></textarea>
</div>
<button type="submit" class="btn btn-primary">提交申請(qǐng)</button>
</form>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
name: '',
start_date: '',
end_date: '',
reason: '',
records: []
},
mounted() {
this.getRecords();
},
methods: {
getRecords() {
fetch('api.php')
.then(response => response.json())
.then(data => {
this.records = data;
});
},
submitForm() {
fetch('api.php', {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
body: `name=${this.name}&start_date=${this.start_date}&end_date=${this.end_date}&reason=${this.reason}`
})
.then(response => response.text())
.then(data => {
alert(data);
this.getRecords();
});
}
}
});
</script>
</body>
</html>
登錄后復(fù)制
四、運(yùn)行效果
將以上代碼保存到對(duì)應(yīng)的文件中，并將這些文件放在服務(wù)器的對(duì)應(yīng)目錄中。然后，打開瀏覽器，訪問”http://localhost/index.html”即可看到效果。在表格中顯示員工的請(qǐng)假記錄，并且可以在表單中提交請(qǐng)假申請(qǐng)。
以上就是利用PHP和Vue搭建員工考勤的請(qǐng)假審批流程的簡要介紹和代碼示例。通過這個(gè)簡單的示例，可以幫助企業(yè)實(shí)現(xiàn)請(qǐng)假審批的電子化管理，提高工作效率，并減少繁瑣的人工操作。當(dāng)然，這只是一個(gè)簡單的實(shí)現(xiàn)方式，具體的應(yīng)用場景還需要進(jìn)行進(jìn)一步的調(diào)整和完善。
以上就是如何利用PHP和Vue搭建員工考勤的請(qǐng)假審批流程的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注www.92cms.cn其它相關(guān)文章！
