如何通過PHP和Vue生成員工考勤的加班申請流程
隨著工作節(jié)奏的加快和職場壓力的增大，加班成為了很多員工的常態(tài)。而規(guī)范和管理員工加班申請流程，既可以提高工作效率，又可以保護員工的權(quán)益。本文介紹了如何使用PHP和Vue來生成員工考勤的加班申請流程。
步驟一：建立數(shù)據(jù)庫
首先，我們需要建立一個數(shù)據(jù)庫來存儲員工的考勤信息和加班申請記錄?？梢允褂肕ySQL或其他數(shù)據(jù)庫管理系統(tǒng)來創(chuàng)建一個名為”attendance”的數(shù)據(jù)庫，并在該數(shù)據(jù)庫中創(chuàng)建兩個表：employees和overtime_requests。
員工表employees的結(jié)構(gòu)如下：
CREATE TABLE employees (
id INT PRIMARY KEY AUTO_INCREMENT,
name VARCHAR(50),
department VARCHAR(50),
position VARCHAR(50)
);
登錄后復制
加班申請表overtime_requests的結(jié)構(gòu)如下：
CREATE TABLE overtime_requests (
id INT PRIMARY KEY AUTO_INCREMENT,
employee_id INT,
overtime_date DATE,
overtime_hours INT,
reason VARCHAR(100),
status VARCHAR(20)
);
登錄后復制
步驟二：后端開發(fā)
接下來，我們使用PHP來處理后端邏輯。創(chuàng)建一個名為”overtime.php”的文件，用于處理加班申請相關的操作。下面是一個示例代碼：
<?php
// 連接數(shù)據(jù)庫
$connection = new mysqli("localhost", "username", "password", "attendance");
// 獲取員工列表
function getEmployees() {
global $connection;
$query = "SELECT * FROM employees";
$result = $connection->query($query);
$employees = [];
while ($row = $result->fetch_assoc()) {
$employees[] = $row;
}
return $employees;
}
// 提交加班申請
function submitOvertimeRequest($employeeId, $overtimeDate, $overtimeHours, $reason) {
global $connection;
$query = "INSERT INTO overtime_requests (employee_id, overtime_date, overtime_hours, reason, status) VALUES ('$employeeId', '$overtimeDate', '$overtimeHours', '$reason', 'pending')";
$result = $connection->query($query);
return $result;
}
// 獲取加班申請列表
function getOvertimeRequests() {
global $connection;
$query = "SELECT * FROM overtime_requests";
$result = $connection->query($query);
$overtimeRequests = [];
while ($row = $result->fetch_assoc()) {
$overtimeRequests[] = $row;
}
return $overtimeRequests;
}
// 更新加班申請狀態(tài)
function updateOvertimeRequestStatus($requestId, $status) {
global $connection;
$query = "UPDATE overtime_requests SET status = '$status' WHERE id = '$requestId'";
$result = $connection->query($query);
return $result;
}
?>
登錄后復制
步驟三：前端開發(fā)
現(xiàn)在，我們使用Vue來處理前端交互和展示。創(chuàng)建一個名為”overtime.vue”的文件，用于處理加班申請的前端邏輯。下面是一個示例代碼：
<template>
<div>
<h2>加班申請</h2>
<form @submit="submitRequest">
<label for="employee">員工：</label>
<select v-model="selectedEmployee" id="employee" required>
<option v-for="employee in employees" :value="employee.id">{{ employee.name }}</option>
</select>
<br>
<label for="date">加班日期：</label>
<input v-model="selectedDate" type="date" id="date" required>
<br>
<label for="hours">加班小時數(shù)：</label>
<input v-model="hours" type="number" id="hours" required>
<br>
<label for="reason">加班原因：</label>
<textarea v-model="reason" id="reason" required></textarea>
<br>
<button type="submit">提交申請</button>
</form>
<h2>加班申請列表</h2>
<table>
<thead>
<tr>
<th>員工</th>
<th>加班日期</th>
<th>加班小時數(shù)</th>
<th>加班原因</th>
<th>狀態(tài)</th>
</tr>
</thead>
<tbody>
<tr v-for="request in requests" :key="request.id">
<td>{{ request.employee_id }}</td>
<td>{{ request.overtime_date }}</td>
<td>{{ request.overtime_hours }}</td>
<td>{{ request.reason }}</td>
<td>{{ request.status }}</td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
employees: [],
selectedEmployee: '',
selectedDate: '',
hours: 0,
reason: '',
requests: []
};
},
mounted() {
this.getEmployees();
this.getRequests();
},
methods: {
getEmployees() {
axios.get('overtime.php?action=getEmployees')
.then(response => {
this.employees = response.data;
})
.catch(error => {
console.error(error);
});
},
submitRequest() {
const data = {
employeeId: this.selectedEmployee,
overtimeDate: this.selectedDate,
overtimeHours: this.hours,
reason: this.reason
};
axios.post('overtime.php?action=submitRequest', data)
.then(response => {
this.getRequests();
this.clearForm();
})
.catch(error => {
console.error(error);
});
},
getRequests() {
axios.get('overtime.php?action=getRequests')
.then(response => {
this.requests = response.data;
})
.catch(error => {
console.error(error);
});
},
clearForm() {
this.selectedEmployee = '';
this.selectedDate = '';
this.hours = 0;
this.reason = '';
}
}
};
</script>
登錄后復制
步驟四：添加路由和界面
最后，我們需要在項目中添加路由和界面來展示加班申請流程?？梢允褂肰ue Router來實現(xiàn)頁面的跳轉(zhuǎn)和顯示。
在main.js文件中添加以下代碼：
import Vue from 'vue';
import VueRouter from 'vue-router';
import Overtime from './components/Overtime.vue';
Vue.use(VueRouter);
const routes = [
{
path: '/',
name: 'overtime',
component: Overtime
}
];
const router = new VueRouter({
routes
});
new Vue({
router,
render: h => h(App)
}).$mount('#app');
登錄后復制
現(xiàn)在，你可以在項目中使用以下代碼來展示加班申請流程界面：
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
登錄后復制
至此，我們通過PHP和Vue生成了一個簡單的員工考勤加班申請流程。通過以上代碼示例，你可以學習到如何使用PHP處理后端邏輯并與數(shù)據(jù)庫進行交互，同時使用Vue處理前端交互和展示申請列表。在實際項目中，你可以進一步完善該流程，添加更多功能和驗證機制來滿足實際需求。
以上就是如何通過PHP和Vue生成員工考勤的加班申請流程的詳細內(nèi)容，更多請關注www.92cms.cn其它相關文章！
