Comment générer un processus de demande d'heures supplémentaires pour la présence des employés via PHP et Vue

Comment générer un processus de demande d'heures supplémentaires pour la présence des employés via PHP et Vue

Avec l'accélération du rythme de travail et l'augmentation de la pression sur le lieu de travail, les heures supplémentaires sont devenues la norme pour de nombreux employés. La normalisation et la gestion du processus de demande d'heures supplémentaires des employés peuvent non seulement améliorer l'efficacité du travail, mais également protéger les droits et les intérêts des employés. Cet article explique comment utiliser PHP et Vue pour générer un processus de demande d'heures supplémentaires pour la présence des employés.

Étape 1 : Créer une base de données
Tout d'abord, nous devons créer une base de données pour stocker les informations de présence des employés et les dossiers de demande d'heures supplémentaires. Vous pouvez utiliser MySQL ou d'autres systèmes de gestion de bases de données pour créer une base de données nommée « présence » et créer deux tables dans la base de données : employés et heures supplémentaires_requests.

La structure de la table des employés employés est la suivante :

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

La structure de la table d'application des heures supplémentaires overtime_requests est la suivante :

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

Étape 2 : Développement du backend
Ensuite, nous utilisons PHP pour gérer la logique du backend. Créez un fichier nommé "overtime.php" pour gérer les opérations liées aux demandes d'heures supplémentaires. Voici un exemple de 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;
}

?>

Étape 3 : Développement front-end
Maintenant, nous utilisons Vue pour gérer l'interaction et la présentation front-end. Créez un fichier nommé "overtime.vue" pour traiter la logique frontale des demandes d'heures supplémentaires. Voici un exemple de 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>

Étape 4 : Ajouter des itinéraires et des interfaces
Enfin, nous devons ajouter des itinéraires et des interfaces au projet pour montrer le processus de demande d'heures supplémentaires. Vous pouvez utiliser Vue Router pour sauter et afficher des pages.

Ajoutez le code suivant dans le fichier 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');

Maintenant, vous pouvez utiliser le code suivant dans le projet pour afficher l'interface du processus de demande d'heures supplémentaires :

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

À ce stade, nous avons généré une simple présence d'heures supplémentaires des employés via PHP et Vue Application Process. Grâce aux exemples de code ci-dessus, vous pouvez apprendre à utiliser PHP pour gérer la logique back-end et interagir avec la base de données, tout en utilisant Vue pour gérer les interactions frontales et afficher la liste des applications. Dans les projets réels, vous pouvez encore améliorer ce processus et ajouter davantage de fonctions et de mécanismes de vérification pour répondre aux besoins réels.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!