PHP と Vue を使用して従業員の勤怠に関する残業申請プロセスを生成する方法

PHP と Vue を使用して従業員の勤怠管理のための残業申請プロセスを生成する方法

仕事のペースが加速し、職場のプレッシャーが高まるにつれて、残業は標準的なものになりました。多くの従業員がいます。従業員の残業申請プロセスを標準化および管理することは、業務効率を向上させるだけでなく、従業員の権利と利益を保護することにもつながります。この記事では、PHP と Vue を使用して、従業員の勤怠のための時間外申請プロセスを生成する方法を紹介します。

ステップ 1: データベースを構築する
まず、従業員の勤怠情報と残業申請記録を保存するデータベースを作成する必要があります。 MySQL またはその他のデータベース管理システムを使用して、「attendance」という名前のデータベースを作成し、データベース内に 2 つのテーブル (employees と残業_requests) を作成できます。

従業員テーブルemployeesの構造は次のとおりです:

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 中国語 Web サイトの他の関連記事を参照してください。