So generieren Sie einen Überstundenantragsprozess für die Anwesenheit von Mitarbeitern mit PHP und Vue

So generieren Sie mit PHP und Vue einen Überstundenantragsprozess für die Anwesenheit von Mitarbeitern.

Mit der Beschleunigung des Arbeitstempos und dem zunehmenden Druck am Arbeitsplatz sind Überstunden für viele Mitarbeiter zur Norm geworden. Die Standardisierung und Verwaltung des Bewerbungsprozesses für Überstunden von Mitarbeitern kann nicht nur die Arbeitseffizienz verbessern, sondern auch die Rechte und Interessen der Mitarbeiter schützen. In diesem Artikel wird erläutert, wie Sie mithilfe von PHP und Vue einen Überstundenantragsprozess für die Anwesenheit von Mitarbeitern erstellen.

Schritt 1: Erstellen Sie eine Datenbank
Zuerst müssen wir eine Datenbank erstellen, um die Anwesenheitsinformationen und Überstundenantragsdatensätze der Mitarbeiter zu speichern. Sie können MySQL oder andere Datenbankverwaltungssysteme verwenden, um eine Datenbank mit dem Namen „attendance“ zu erstellen und zwei Tabellen in der Datenbank zu erstellen: „mitarbeiter“ und „overtime_requests“.

Die Struktur der Mitarbeitertabelle „Mitarbeiter“ ist wie folgt:

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

Die Struktur der Überstundenanwendungstabelle „overtime_requests“ ist wie folgt:

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

Schritt 2: Backend-Entwicklung
Als nächstes verwenden wir PHP, um die Backend-Logik zu verwalten. Erstellen Sie eine Datei mit dem Namen „overtime.php“, um Vorgänge im Zusammenhang mit Überstundenanträgen abzuwickeln. Hier ist ein Beispielcode:

<?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;
}

?>

Schritt 3: Front-End-Entwicklung
Jetzt verwenden wir Vue für die Front-End-Interaktion und -Präsentation. Erstellen Sie eine Datei mit dem Namen „overtime.vue“, um die Front-End-Logik von Überstundenanträgen zu verarbeiten. Hier ist ein Beispielcode:

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

Schritt 4: Routen und Schnittstellen hinzufügen
Zuletzt müssen wir dem Projekt Routen und Schnittstellen hinzufügen, um den Prozess der Überstundenbeantragung darzustellen. Sie können Vue Router zum Springen und Anzeigen von Seiten verwenden.

Fügen Sie den folgenden Code in der Datei main.js hinzu:

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

Jetzt können Sie den folgenden Code im Projekt verwenden, um die Schnittstelle für den Überstundenantragsprozess anzuzeigen:

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

An diesem Punkt haben wir eine einfache Überstundenanwesenheit der Mitarbeiter generiert durch PHP und Vue Application Process. Anhand der obigen Codebeispiele können Sie lernen, wie Sie PHP verwenden, um die Back-End-Logik zu verwalten und mit der Datenbank zu interagieren, während Sie Vue verwenden, um Front-End-Interaktionen zu verwalten und die Anwendungsliste anzuzeigen. In tatsächlichen Projekten können Sie diesen Prozess weiter verbessern und weitere Funktionen und Überprüfungsmechanismen hinzufügen, um den tatsächlichen Anforderungen gerecht zu werden.

Das obige ist der detaillierte Inhalt vonSo generieren Sie einen Überstundenantragsprozess für die Anwesenheit von Mitarbeitern mit PHP und Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!