Bagaimana untuk menjana proses permohonan lebih masa untuk kehadiran pekerja melalui PHP dan Vue

Cara menjana proses permohonan lebih masa untuk kehadiran pekerja melalui PHP dan Vue

Dengan pecutan kadar kerja dan peningkatan tekanan di tempat kerja, kerja lebih masa Ia telah menjadi kebiasaan bagi ramai pekerja. Penyeragaman dan pengurusan proses permohonan lebih masa pekerja bukan sahaja dapat meningkatkan kecekapan kerja, tetapi juga melindungi hak dan kepentingan pekerja. Artikel ini memperkenalkan cara menggunakan PHP dan Vue untuk menjana proses permohonan lebih masa untuk kehadiran pekerja.

Langkah 1: Wujudkan pangkalan data
Pertama, kita perlu mencipta pangkalan data untuk menyimpan maklumat kehadiran pekerja dan rekod permohonan kerja lebih masa. Anda boleh menggunakan MySQL atau sistem pengurusan pangkalan data lain untuk mencipta pangkalan data bernama "kehadiran" dan mencipta dua jadual dalam pangkalan data: pekerja dan permintaan_lebih masa.

Struktur pekerja meja pekerja adalah seperti berikut:

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

Struktur borang permohonan lebih masa_permintaan lebih masa adalah seperti berikut:

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: Pembangunan bahagian belakang#🎜🎜 #Seterusnya, kami menggunakan PHP untuk mengendalikan logik bahagian belakang. Buat fail bernama "overtime.php" untuk mengendalikan operasi yang berkaitan dengan aplikasi lebih masa. Berikut ialah contoh kod:

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

?>

Langkah 3: Pembangunan bahagian hadapan

Kini, kami menggunakan Vue untuk mengendalikan interaksi dan paparan bahagian hadapan. Cipta fail bernama "overtime.vue" untuk memproses logik bahagian hadapan bagi aplikasi lebih masa. Berikut ialah contoh kod:

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

Langkah 4: Tambahkan penghalaan dan antara muka

Akhir sekali, kita perlu menambah penghalaan dan antara muka pada projek untuk menunjukkan proses permohonan lebih masa. Anda boleh menggunakan Penghala Vue untuk melompat dan memaparkan halaman.

Tambah kod berikut dalam fail utama.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');

Sekarang, anda boleh menggunakan kod berikut dalam projek untuk memaparkan antara muka proses permohonan lebih masa: #🎜🎜 #

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

# 🎜🎜#Pada ketika ini, kami telah menjana kehadiran pekerja yang mudah dan proses permohonan lebih masa melalui PHP dan Vue. Melalui contoh kod di atas, anda boleh belajar cara menggunakan PHP untuk mengendalikan logik bahagian belakang dan berinteraksi dengan pangkalan data, sambil menggunakan Vue untuk mengendalikan interaksi bahagian hadapan dan memaparkan senarai aplikasi. Dalam projek sebenar, anda boleh menambah baik lagi proses ini dan menambah lebih banyak fungsi dan mekanisme pengesahan untuk memenuhi keperluan sebenar.

Atas ialah kandungan terperinci Bagaimana untuk menjana proses permohonan lebih masa untuk kehadiran pekerja melalui PHP dan Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!