如何结合PHP和Vue实现员工考勤的请假审批记录功能- 技术经验 -卓越飞翔博客

如何结合PHP和Vue实现员工考勤的请假审批记录功能

随着信息技术的快速发展，越来越多的企业开始采用电子化的方式管理员工的考勤和请假审批记录。PHP作为一种广泛使用的后端开发语言，具有高效、稳定和易于扩展等优点。而Vue作为一种流行的前端框架，能够方便地实现良好的用户界面和交互效果。本文将介绍如何结合PHP和Vue来实现员工考勤的请假审批记录功能，并提供具体的代码示例。

在开始之前，我们需要先确定需求和设计数据结构。员工考勤的请假审批记录功能主要包含两个部分：请假申请和审批记录。请假申请包括请假类型、开始时间、结束时间、请假事由等信息，审批记录包括审批人、审批时间、审批意见等信息。下面是一个简单的数据结构示例：

请假申请表：

id (int) - 请假申请ID
type (string) - 请假类型
start_time (datetime) - 开始时间
end_time (datetime) - 结束时间
reason (string) - 请假事由

审批记录表：

id (int) - 审批记录ID
application_id (int) - 请假申请ID
approver (string) - 审批人
approve_time (datetime) - 审批时间
comment (string) - 审批意见

接下来，我们将使用PHP和Vue分别实现后端和前端的功能。

后端代码实现（PHP）：

首先，我们需要创建一个PHP文件，用于处理后端的逻辑。假设我们将其命名为"leave.php"。在该文件中，我们将通过几个API来处理请假申请和审批记录的增删改查操作。

（1）获取请假申请列表的API：

<?php
// 获取请假申请列表
function getLeaveApplications() {
  // 连接数据库
  $conn = mysqli_connect("localhost", "root", "password", "database");
  // 查询请假申请列表
  $sql = "SELECT * FROM leave_application";
  $result = mysqli_query($conn, $sql);
  // 返回结果
  $applications = [];
  while ($row = mysqli_fetch_assoc($result)) {
    $applications[] = $row;
  }
  return $applications;
}

// 调用API获取请假申请列表
$leaveApplications = getLeaveApplications();
echo json_encode($leaveApplications);
?>

（2）添加请假申请的API：

<?php
// 添加请假申请
function addLeaveApplication($type, $startTime, $endTime, $reason) {
  // 连接数据库
  $conn = mysqli_connect("localhost", "root", "password", "database");
  // 插入请假申请
  $sql = "INSERT INTO leave_application (type, start_time, end_time, reason) VALUES ('$type', '$startTime', '$endTime', '$reason')";
  mysqli_query($conn, $sql);
}

// 获取POST请求中的数据
$type = $_POST['type'];
$startTime = $_POST['startTime'];
$endTime = $_POST['endTime'];
$reason = $_POST['reason'];

// 调用API添加请假申请
addLeaveApplication($type, $startTime, $endTime, $reason);
?>

（3）获取审批记录列表的API：

<?php
// 获取审批记录列表
function getApprovalRecords() {
  // 连接数据库
  $conn = mysqli_connect("localhost", "root", "password", "database");
  // 查询审批记录列表
  $sql = "SELECT * FROM approval_record";
  $result = mysqli_query($conn, $sql);
  // 返回结果
  $records = [];
  while ($row = mysqli_fetch_assoc($result)) {
    $records[] = $row;
  }
  return $records;
}

// 调用API获取审批记录列表
$approvalRecords = getApprovalRecords();
echo json_encode($approvalRecords);
?>

（4）添加审批记录的API：

<?php
// 添加审批记录
function addApprovalRecord($applicationId, $approver, $approveTime, $comment) {
  // 连接数据库
  $conn = mysqli_connect("localhost", "root", "password", "database");
  // 插入审批记录
  $sql = "INSERT INTO approval_record (application_id, approver, approve_time, comment) VALUES ('$applicationId', '$approver', '$approveTime', '$comment')";
  mysqli_query($conn, $sql);
}

// 获取POST请求中的数据
$applicationId = $_POST['applicationId'];
$approver = $_POST['approver'];
$approveTime = $_POST['approveTime'];
$comment = $_POST['comment'];

// 调用API添加审批记录
addApprovalRecord($applicationId, $approver, $approveTime, $comment);
?>

前端代码实现（Vue）：

接下来，我们将使用Vue来实现前端的展示和交互逻辑。假设我们将所有的Vue组件都定义在一个JavaScript文件"app.js"中。

（1）创建Vue实例和根组件：

// 创建Vue实例
var app = new Vue({
  el: "#app",
  data: {
    leaveApplications: [],
    approvalRecords: []
  },
  mounted() {
    // 在mounted钩子函数中获取请假申请列表和审批记录列表
    this.getLeaveApplications();
    this.getApprovalRecords();
  },
  methods: {
    // 获取请假申请列表
    getLeaveApplications() {
      axios.get("leave.php")
        .then(response => {
          this.leaveApplications = response.data;
        })
        .catch(error => {
          console.log(error);
        });
    },
    // 添加请假申请
    addLeaveApplication(application) {
      axios.post("leave.php", application)
        .then(response => {
          this.getLeaveApplications(); // 添加成功后刷新列表
        })
        .catch(error => {
          console.log(error);
        });
    },
    // 获取审批记录列表
    getApprovalRecords() {
      axios.get("approval.php")
        .then(response => {
          this.approvalRecords = response.data;
        })
        .catch(error => {
          console.log(error);
        });
    },
    // 添加审批记录
    addApprovalRecord(record) {
      axios.post("approval.php", record)
        .then(response => {
          this.getApprovalRecords(); // 添加成功后刷新列表
        })
        .catch(error => {
          console.log(error);
        });
    }
  }
});

（2）创建请假申请和审批记录的组件：

// 创建请假申请组件
Vue.component("leave-application", {
  props: ["application"],
  template: `
    <div>
      <h4>{{ application.type }}</h4>
      <p>时间：{{ application.start_time }} - {{ application.end_time }}</p>
      <p>事由：{{ application.reason }}</p>
    </div>
  `
});

// 创建审批记录组件
Vue.component("approval-record", {
  props: ["record"],
  template: `
    <div>
      <h4>{{ record.approver }}</h4>
      <p>时间：{{ record.approve_time }}</p>
      <p>意见：{{ record.comment }}</p>
    </div>
  `
});

（3）在HTML中使用Vue实例和组件：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>员工考勤请假审批记录</title>
</head>
<body>
  <div id="app">
    <h2>请假申请列表</h2>
    <div>
      <leave-application v-for="application in leaveApplications" :application="application" :key="application.id"></leave-application>
    </div>
    <hr>
    <h2>审批记录列表</h2>
    <div>
      <approval-record v-for="record in approvalRecords" :record="record" :key="record.id"></approval-record>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script src="app.js"></script>
</body>
</html>

相关推荐