How to combine PHP and Vue to implement leave approval record function for employee attendance

How to combine PHP and Vue to realize the leave approval record function of employee attendance

With the rapid development of information technology, more and more companies are beginning to adopt electronic Manage employee attendance and leave approval records. As a widely used back-end development language, PHP has the advantages of high efficiency, stability and easy expansion. As a popular front-end framework, Vue can easily achieve good user interface and interactive effects. This article will introduce how to combine PHP and Vue to implement the leave approval record function of employee attendance, and provide specific code examples.

Before we start, we need to determine the requirements and design the data structure. The leave approval record function of employee attendance mainly includes two parts: leave application and approval record. The leave application includes information such as leave type, start time, end time, reason for leave, etc. The approval record includes information such as the approver, approval time, and approval opinions. The following is a simple data structure example:

Leave application form:

• id (int) - Leave application ID
• type (string) - Leave type
• start_time (datetime) - start time
• end_time (datetime) - end time
• reason (string) - reason for leave

Approval Record Form ：

• id (int) - Approval record ID
• application_id (int) - Leave application ID
• approver (string) - Approver
• approve_time (datetime) - Approval time
• comment (string) - Approval opinion

Next, we will use PHP and Vue to implement the back-end and front-end functions respectively.

1. Back-end code implementation (PHP):

First, we need to create a PHP file to handle the back-end logic. Let's say we name it "leave.php". In this file, we will use several APIs to process the addition, deletion, modification and checking of leave applications and approval records.

(1) API for obtaining leave application list:

<?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 for adding leave application:

<?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 for obtaining approval record list:

<?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 for adding approval records:

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

2. Front-end code implementation (Vue):

Next, we will use Vue to implement Front-end display and interaction logic. Suppose we define all Vue components in a JavaScript file "app.js".

(1) Create Vue instance and root component:

// 创建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) Create components for leave application and approval records:

// 创建请假申请组件
Vue.component("leave-application", {
  props: ["application"],
  template: `
    <div>
      <h4 id="application-type">{{ 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 id="record-approver">{{ record.approver }}</h4>
      <p>时间：{{ record.approve_time }}</p>
      <p>意见：{{ record.comment }}</p>
    </div>
  `
});

(3) Use Vue in HTML Examples and components:

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

The above is a specific code example that combines PHP and Vue to implement the leave approval record function of employee attendance. Through the back-end API provided by PHP and the front-end component provided by Vue, we can realize the display and addition functions of employee leave applications and approval records. In actual projects, we can further expand and optimize according to needs. Hope this article helps you!

The above is the detailed content of How to combine PHP and Vue to implement leave approval record function for employee attendance. For more information, please follow other related articles on the PHP Chinese website!