首頁 > 文章 > 後端開發 > 如何利用PHP和Vue建構員工考勤的請假審核流程

如何利用PHP和Vue建構員工考勤的請假審核流程

王林原創: 2023-09-25 15:46:471367瀏覽

如何利用PHP和Vue建立員工考勤的請假審批流程

隨著企業的規模不斷擴大，員工的請假審批流程變得越來越繁瑣。為了提高工作效率，許多企業開始採用電子化的方式進行請假審批，其中PHP和Vue是一對非常強大的組合。本文將介紹如何利用PHP和Vue建構一個員工考勤的請假審核流程，並提供一些具體的程式碼範例。

一、準備工作
首先，我們需要建立一個簡單的環境來運行PHP和Vue。我們可以使用XAMPP或WAMP等軟體來搭建本機伺服器。然後，在伺服器上建立一個資料庫，用於儲存員工的請假記錄。接下來，建立一個名為"attendance"的資料庫表，其中包含以下欄位：

id: 唯一標識符，用於區分每個請假記錄
name: 員工姓名
start_date: 請假開始日期
end_date: 請假結束日期
reason: 請假原因
status: 請假審批狀態（待審批/已通過/已拒絕）

二、後端開發

建立一個名為"api.php"的文件，用於處理前端的請求和資料庫操作。以下是一個簡單的程式碼範例：

<?php
require_once 'config.php';

// 查询请假记录
if ($_SERVER['REQUEST_METHOD'] === 'GET') {
    $conn = new mysqli(DB_HOST, DB_USER, DB_PASS, DB_NAME);

    if ($conn->connect_error) {
        die("连接失败: " . $conn->connect_error);
    }

    $sql = "SELECT * FROM attendance";
    $result = $conn->query($sql);

    if ($result->num_rows > 0) {
        $data = [];

        while ($row = $result->fetch_assoc()) {
            $data[] = $row;
        }

        echo json_encode($data);
    } else {
        echo "没有找到请假记录";
    }

    $conn->close();
}

// 创建请假记录
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    // 获取前端传递的数据
    $name = $_POST['name'];
    $start_date = $_POST['start_date'];
    $end_date = $_POST['end_date'];
    $reason = $_POST['reason'];

    $conn = new mysqli(DB_HOST, DB_USER, DB_PASS, DB_NAME);

    if ($conn->connect_error) {
        die("连接失败: " . $conn->connect_error);
    }

    $sql = "INSERT INTO attendance (name, start_date, end_date, reason, status) VALUES ('$name', '$start_date', '$end_date', '$reason', '待审批')";

    if ($conn->query($sql) === TRUE) {
        echo "请假申请已提交";
    } else {
        echo "请假申请提交失败";
    }

    $conn->close();
}
?>

建立一個名為"config.php"的文件，用於存放資料庫的連接資訊。以下是一個簡單的程式碼範例：

<?php
define('DB_HOST', 'localhost');
define('DB_USER', 'root');
define('DB_PASS', '123456');
define('DB_NAME', 'attendance');
?>

三、前端開發

#建立一個名為"index.html"的文件，用於顯示員工的請假記錄和提交請假申請表單。以下是一個簡單的程式碼範例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>员工考勤请假审批流程</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
</head>
<body>
    <div id="app" class="container">
        <h1>员工考勤请假审批流程</h1>

        <h2>请假记录</h2>
        <table class="table">
            <thead>
                <tr>
                    <th>#</th>
                    <th>姓名</th>
                    <th>开始日期</th>
                    <th>结束日期</th>
                    <th>请假原因</th>
                    <th>审批状态</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(record, index) in records" :key="index">
                    <td>{{ index + 1 }}</td>
                    <td>{{ record.name }}</td>
                    <td>{{ record.start_date }}</td>
                    <td>{{ record.end_date }}</td>
                    <td>{{ record.reason }}</td>
                    <td>{{ record.status }}</td>
                </tr>
            </tbody>
        </table>

        <h2>提交请假申请</h2>
        <form @submit.prevent="submitForm">
            <div class="form-group">
                <label for="name">姓名</label>
                <input type="text" class="form-control" id="name" v-model="name" required>
            </div>
            <div class="form-group">
                <label for="start_date">开始日期</label>
                <input type="text" class="form-control" id="start_date" v-model="start_date" required>
            </div>
            <div class="form-group">
                <label for="end_date">结束日期</label>
                <input type="text" class="form-control" id="end_date" v-model="end_date" required>
            </div>
            <div class="form-group">
                <label for="reason">请假原因</label>
                <textarea class="form-control" id="reason" v-model="reason" required></textarea>
            </div>
            <button type="submit" class="btn btn-primary">提交申请</button>
        </form>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                name: '',
                start_date: '',
                end_date: '',
                reason: '',
                records: []
            },
            mounted() {
                this.getRecords();
            },
            methods: {
                getRecords() {
                    fetch('api.php')
                        .then(response => response.json())
                        .then(data => {
                            this.records = data;
                        });
                },
                submitForm() {
                    fetch('api.php', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded'
                        },
                        body: `name=${this.name}&start_date=${this.start_date}&end_date=${this.end_date}&reason=${this.reason}`
                    })
                        .then(response => response.text())
                        .then(data => {
                            alert(data);
                            this.getRecords();
                        });
                }
            }
        });
    </script>
</body>
</html>

四、執行效果
將以上程式碼儲存到對應的檔案中，並將這些檔案放在伺服器的對應目錄中。然後，開啟瀏覽器，造訪"http://localhost/index.html"即可看到效果。在表格中顯示員工的請假記錄，並且可以在表單中提交請假申請。

以上就是利用PHP和Vue建構員工考勤的請假審批流程的簡單介紹和程式碼範例。透過這個簡單的範例，可以幫助企業實現請假審批的電子化管理，提高工作效率，並減少繁瑣的人工操作。當然，這只是一個簡單的實作方式，具體的應用場景還需要進一步的調整與改進。

以上是如何利用PHP和Vue建構員工考勤的請假審核流程的詳細內容。更多資訊請關注PHP中文網其他相關文章！

php html 标识符数据库 http

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：如何使用PHP和Vue開發付款後取得會員積分的功能下一篇：如何使用PHP和Vue開發付款後取得會員積分的功能

看更多