PHP 및 Vue를 통해 직원 출석에 대한 초과 근무 신청 프로세스를 생성하는 방법

PHP 및 Vue를 통해 직원 출석에 대한 초과 근무 신청 프로세스를 생성하는 방법

작업 속도가 가속화되고 직장에서의 압박이 증가함에 따라 초과 근무는 많은 직원에게 표준이 되었습니다. 직원의 초과근무 신청 절차를 표준화하고 관리하면 업무 효율성을 높일 수 있을 뿐만 아니라 직원의 권익도 보호할 수 있습니다. 이 기사에서는 PHP와 Vue를 사용하여 직원 출석에 대한 초과 근무 신청 프로세스를 생성하는 방법을 소개합니다.

1단계: 데이터베이스 만들기
먼저 직원들의 출근 정보와 초과근무 신청 기록을 저장할 데이터베이스를 만들어야 합니다. MySQL 또는 기타 데이터베이스 관리 시스템을 사용하여 "attendance"라는 데이터베이스를 생성하고 데이터베이스에 Employees 및 overtime_requests라는 두 개의 테이블을 생성할 수 있습니다.

직원 테이블의 구조는 다음과 같습니다.

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

초과근무 신청 테이블 overtime_requests의 구조는 다음과 같습니다.

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

2단계: 백엔드 개발
다음으로 백엔드 로직을 처리하기 위해 PHP를 사용합니다. 초과 근무 신청과 관련된 작업을 처리하려면 "overtime.php"라는 파일을 만듭니다. 다음은 샘플 코드입니다.

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

?>

3단계: 프런트 엔드 개발
이제 Vue를 사용하여 프런트 엔드 상호 작용 및 프레젠테이션을 처리합니다. 초과 근무 애플리케이션의 프런트 엔드 로직을 처리하려면 "overtime.vue"라는 파일을 만듭니다. 다음은 샘플 코드입니다.

<template>
    <div>
        <h2 id="加班申请">加班申请</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 id="加班申请列表">加班申请列表</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>

4단계: 경로 및 인터페이스 추가
마지막으로 초과 근무 신청 프로세스를 표시하기 위해 프로젝트에 경로와 인터페이스를 추가해야 합니다. Vue Router를 사용하여 페이지를 이동하고 표시할 수 있습니다.

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

이제 프로젝트에서 다음 코드를 사용하여 초과 근무 신청 프로세스 인터페이스를 표시할 수 있습니다.

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

이 시점에서 간단한 직원 출석 초과 근무를 생성했습니다. PHP 및 Vue 애플리케이션 프로세스를 통해. 위의 코드 예제를 통해 PHP를 사용하여 백엔드 로직을 처리하고 데이터베이스와 상호 작용하는 동시에 Vue를 사용하여 프런트 엔드 상호 작용을 처리하고 애플리케이션 목록을 표시하는 방법을 배울 수 있습니다. 실제 프로젝트에서는 이 프로세스를 더욱 개선하고 실제 요구 사항을 충족하기 위해 더 많은 기능과 검증 메커니즘을 추가할 수 있습니다.

위 내용은 PHP 및 Vue를 통해 직원 출석에 대한 초과 근무 신청 프로세스를 생성하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!