How to combine PHP and Vue to realize the working time statistics function of employee attendance

How to combine PHP and Vue to realize the working time statistics function of employee attendance

In modern enterprise management, real-time statistics and analysis of employee attendance are important to improve work efficiency and one of the important means of management level. As a popular server-side programming language, PHP can easily process data and interact with databases. Vue is a popular front-end framework that can provide rich user interface and interactive functions. Combining PHP and Vue, we can implement a working time statistics function for employee attendance.

First, we need to create corresponding tables in the database to store employee attendance data. Suppose we create a table named attendance with the following fields: id, employee_id, check_in, check_out. id is the unique identifier of the attendance record, employee_id is the unique identifier of the employee, check_in is the working time, and check_out is the off-duty time.

Next, we need to write PHP code to implement data addition, deletion, modification and query operations. Take the function of obtaining the attendance record of an employee on a certain day as an example. The code example is as follows:

<?php
// 连接数据库
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "database";

$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
    die("数据库连接失败: " . $conn->connect_error);
}

// 获取参数
$employee_id = $_POST['employee_id'];
$date = $_POST['date'];

// 查询数据
$sql = "SELECT * FROM attendance WHERE employee_id='$employee_id' AND DATE(check_in)='$date'";
$result = $conn->query($sql);

// 处理结果
if ($result->num_rows > 0) {
    $attendance = array();
    while ($row = $result->fetch_assoc()) {
        $attendance[] = $row;
    }
    echo json_encode($attendance);
} else {
    echo "没有找到考勤记录";
}

// 关闭数据库连接
$conn->close();
?>

The above code obtains the incoming employee ID and date parameters by connecting to the database, and then queries the attendance record in the database, and Return the results to the front end in JSON format.

In terms of Vue, we can use Vue's componentization and data binding functions to build a page for employee attendance and working hours statistics. The following is a simple sample code:

<template>
  <div>
    <!-- 员工选择 -->
    <select v-model="selectedEmployee">
      <option v-for="employee in employees" :key="employee.id" :value="employee.id">{{ employee.name }}</option>
    </select>
    
    <!-- 日期选择 -->
    <input type="date" v-model="selectedDate">
    
    <!-- 查询按钮 -->
    <button @click="queryAttendance">查询</button>
    
    <!-- 考勤记录 -->
    <table v-if="attendance.length > 0">
      <thead>
        <tr>
          <th>日期</th>
          <th>上班时间</th>
          <th>下班时间</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="record in attendance" :key="record.id">
          <td>{{ record.check_in }}</td>
          <td>{{ record.check_out }}</td>
        </tr>
      </tbody>
    </table>
    <p v-else>没有找到考勤记录</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      employees: [], // 所有员工
      selectedEmployee: '', // 选中的员工
      selectedDate: '', // 选中的日期
      attendance: [], // 考勤记录
    };
  },
  methods: {
    queryAttendance() {
      // 发送请求到后端
      // 假设请求的URL是/api/getAttendance.php
      axios.post('/api/getAttendance.php', {
        employee_id: this.selectedEmployee,
        date: this.selectedDate,
      })
        .then(response => {
          this.attendance = response.data;
        })
        .catch(error => {
          console.error(error);
        });
    },
  },
  mounted() {
    // 获取所有员工列表
    // 假设请求的URL是/api/getEmployees.php
    axios.get('/api/getEmployees.php')
      .then(response => {
        this.employees = response.data;
      })
      .catch(error => {
        console.error(error);
      });
  },
};
</script>

The above code uses Vue's data binding to control employee selection, date selection and display of attendance records. When the user clicks the query button, a request will be sent to the backend and the attendance record will be updated based on the returned data. At the same time, when the page loads, a list of all employees is also obtained for the user to select.

By combining PHP and Vue, we can easily implement the working time statistics function of employee attendance. The above code is only an example. The actual implementation may also need to consider some other factors, such as permission management, data verification, interface optimization, etc. But in general, the combination of PHP and Vue can provide us with powerful tools to quickly implement an employee attendance and working time statistics system.

The above is the detailed content of How to combine PHP and Vue to realize the working time statistics function of employee attendance. For more information, please follow other related articles on the PHP Chinese website!