Comment utiliser PHP et Vue pour créer un processus d'approbation des congés pour la présence des employés-tutoriel php-php.cn

Comment utiliser PHP et Vue pour créer un processus d'approbation des congés pour la présence des employés

王林

Libérer： 2023-09-25 15:48:02

original

1426 Les gens l'ont consulté

Comment utiliser PHP et Vue pour créer un processus dapprobation des congés pour la présence des employés

Comment utiliser PHP et Vue pour créer un processus d'approbation des congés pour la présence des employés

À mesure que la taille des entreprises continue de croître, le processus d'approbation des congés des employés est devenu de plus en plus lourd. Afin d'améliorer l'efficacité du travail, de nombreuses entreprises ont commencé à adopter des méthodes électroniques d'approbation des congés, parmi lesquelles PHP et Vue constituent une combinaison très puissante. Cet article expliquera comment utiliser PHP et Vue pour créer un processus d'approbation des congés pour la présence des employés et fournira quelques exemples de code spécifiques.

1. Préparation
Tout d'abord, nous devons créer un environnement simple pour exécuter PHP et Vue. Nous pouvons utiliser des logiciels tels que XAMPP ou WAMP pour créer un serveur local. Créez ensuite une base de données sur le serveur pour stocker les enregistrements de congés des employés. Créez ensuite une table de base de données nommée « présence », qui contient les champs suivants :

id : un identifiant unique pour distinguer chaque enregistrement de congé
name : nom de l'employé
start_date : date de début du congé
end_date : date de fin du congé
raison : Raison du congé
statut : Statut d'approbation du congé (en attente d'approbation/réussite/rejeté)

2 Développement back-end

Créez un fichier nommé "api.php", utilisé pour gérer le front-end. requêtes et opérations de base de données. Voici un exemple de code simple :

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

Copier après la connexion

Créez un fichier nommé "config.php" pour stocker les informations de connexion à la base de données. Voici un exemple de code simple :

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

Copier après la connexion

3. Développement front-end

Créez un fichier nommé "index.html" pour afficher les enregistrements de congés des employés et soumettre les formulaires de demande de congé. Voici un exemple de code simple :

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

Copier après la connexion

4. Effet d'exécution
Enregistrez le code ci-dessus dans les fichiers correspondants et placez ces fichiers dans les répertoires correspondants du serveur. Ensuite, ouvrez le navigateur et visitez « http://localhost/index.html » pour voir l'effet. Les enregistrements de congés de l'employé sont affichés dans le formulaire et les demandes de congé peuvent être soumises dans le formulaire.

Ce qui précède est une brève introduction et un exemple de code d'utilisation de PHP et Vue pour créer le processus d'approbation des congés pour la présence des employés. Grâce à cet exemple simple, il peut aider les entreprises à gérer électroniquement l'approbation des congés, à améliorer l'efficacité du travail et à réduire les opérations manuelles fastidieuses. Bien entendu, il ne s’agit que d’une simple mise en œuvre et des scénarios d’application spécifiques nécessitent des ajustements et des améliorations supplémentaires.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!