How to generate overtime application process for employee attendance through PHP and Vue

How to generate overtime application process for employee attendance through PHP and Vue

With the acceleration of work pace and the increase of workplace pressure, overtime has become the norm for many employees. . Standardizing and managing the employee overtime application process can not only improve work efficiency, but also protect the rights and interests of employees. This article introduces how to use PHP and Vue to generate an overtime application process for employee attendance.

Step 1: Establish a database
First, we need to create a database to store employees' attendance information and overtime application records. You can use MySQL or other database management systems to create a database named "attendance" and create two tables in the database: employees and overtime_requests.

The structure of the employees table employees is as follows:

CREATE TABLE employees (
    id INT PRIMARY KEY AUTO_INCREMENT,
    name VARCHAR(50),
    department VARCHAR(50),
    position VARCHAR(50)
);

The structure of the overtime application table overtime_requests is as follows:

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)
);

Step 2: Back-end development
Next, we use PHP to handle the backend logic. Create a file named "overtime.php" to handle operations related to overtime applications. The following is a sample code:

<?php

// 连接数据库
$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;
}

// 更新加班申请状态
function updateOvertimeRequestStatus($requestId, $status) {
    global $connection;
    $query = "UPDATE overtime_requests SET status = '$status' WHERE id = '$requestId'";
    $result = $connection->query($query);
    return $result;
}

?>

Step 3: Front-end development
Now, we use Vue to handle front-end interaction and display. Create a file named "overtime.vue" to process the front-end logic of overtime applications. The following is a sample code:

<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">加班小时数：</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>加班小时数</th>
                    <th>加班原因</th>
                    <th>状态</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>

Step 4: Add routing and interface
Finally, we need to add routing and interface to the project to show the overtime application process. You can use Vue Router to jump and display pages.

Add the following code to the main.js file:

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');

Now, you can use the following code in the project to display the overtime application process interface:

<template>
    <div id="app">
        <router-view></router-view>
    </div>
</template>

At this point, we A simple employee attendance and overtime application process was generated through PHP and Vue. Through the above code examples, you can learn how to use PHP to handle back-end logic and interact with the database, while using Vue to handle front-end interactions and display the application list. In actual projects, you can further improve this process and add more functions and verification mechanisms to meet actual needs.

The above is the detailed content of How to generate overtime application process for employee attendance through PHP and Vue. For more information, please follow other related articles on the PHP Chinese website!