如何结合PHP和Vue实现员工考勤的工时统计功能

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

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