Cara menggunakan PHP dan Vue untuk membina proses kelulusan cuti untuk kehadiran pekerja-tutorial php-php.cn

Cara menggunakan PHP dan Vue untuk membina proses kelulusan cuti untuk kehadiran pekerja

王林

Lepaskan： 2023-09-25 15:48:02

asal

1431 orang telah melayarinya

Cara menggunakan PHP dan Vue untuk membina proses kelulusan cuti untuk kehadiran pekerja

Memandangkan skala perusahaan terus berkembang, proses kelulusan cuti pekerja telah berubah menjadi lebih rumit. Untuk meningkatkan kecekapan kerja, banyak syarikat telah mula menggunakan kaedah elektronik untuk kelulusan cuti, antaranya PHP dan Vue merupakan gabungan yang sangat berkuasa. Artikel ini akan memperkenalkan cara menggunakan PHP dan Vue untuk membina proses kelulusan cuti untuk kehadiran pekerja, dan menyediakan beberapa contoh kod khusus.

1 Persediaan
Pertama, kita perlu membina persekitaran yang mudah untuk menjalankan PHP dan Vue. Kita boleh menggunakan perisian seperti XAMPP atau WAMP untuk membina pelayan tempatan. Kemudian, cipta pangkalan data pada pelayan untuk menyimpan rekod cuti pekerja. Seterusnya, cipta jadual pangkalan data bernama "kehadiran" dengan medan berikut:

id: pengecam unik yang digunakan untuk membezakan setiap rekod cuti
tarikh_mula: Tarikh mula cuti
tarikh_akhir: Tarikh tamat cuti
sebab: Sebab cuti
#🎜 🎜🎜##🎜 🎜 status kelulusan (menunggu kelulusan/lulus/ditolak)
2. Pembangunan bahagian belakang

Buat fail bernama "api.php" fail digunakan untuk mengendalikan permintaan bahagian hadapan dan operasi pangkalan data. Berikut ialah contoh kod mudah:

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

Salin selepas log masuk

Buat fail bernama "config.php" untuk menyimpan maklumat sambungan pangkalan data. Berikut ialah contoh kod mudah:

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

Salin selepas log masuk

Buat fail bernama "index.html" dengan Used. untuk mempamerkan rekod cuti pekerja dan menyerahkan borang permohonan cuti. Berikut ialah contoh kod mudah:

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

Salin selepas log masuk

Simpan kod di atas ke fail yang sepadan dan letakkan fail ini dalam direktori pelayan yang sepadan. Kemudian, buka pelayar dan lawati "http://localhost/index.html" untuk melihat kesannya. Rekod cuti pekerja dipaparkan dalam borang, dan permintaan cuti boleh dikemukakan dalam borang.

Di atas ialah pengenalan ringkas dan contoh kod penggunaan PHP dan Vue untuk membina proses kelulusan cuti untuk kehadiran pekerja. Melalui contoh mudah ini, ia boleh membantu perusahaan merealisasikan pengurusan elektronik kelulusan cuti, meningkatkan kecekapan kerja, dan mengurangkan operasi manual yang membosankan. Sudah tentu, ini hanyalah pelaksanaan yang mudah, dan senario aplikasi tertentu memerlukan pelarasan dan penambahbaikan selanjutnya.

Atas ialah kandungan terperinci Cara menggunakan PHP dan Vue untuk membina proses kelulusan cuti untuk kehadiran pekerja. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!