随着企业的规模不断扩大，员工的请假审批流程变得越来越繁琐。为了提高工作效率，许多企业开始采用电子化的方式进行请假审批，其中php和vue是一对非常强大的组合。本文将介绍如何利用php和vue搭建一个员工考勤的请假审批流程，并提供一些具体的代码示例。
一、准备工作
首先，我们需要搭建一个简单的环境来运行php和vue。我们可以使用xampp或者wamp等软件来搭建本地服务器。然后，在服务器上创建一个数据库，用于存储员工的请假记录。接下来，创建一个名为attendance的数据库表，其中包含以下字段：
id: 唯一标识符，用于区分每个请假记录name: 员工姓名start_date: 请假开始日期end_date: 请假结束日期reason: 请假原因status: 请假审批状态（待审批/已通过/已拒绝）二、后端开发
创建一个名为api.php的文件，用于处理前端的请求和数据库操作。以下是一个简单的代码示例：<?phprequire_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的文件，用于存放数据库的连接信息。以下是一个简单的代码示例：<?phpdefine('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搭建员工考勤的请假审批流程的详细内容。