如何透過PHP和Vue產生員工考勤的出差申請流程

<?php
// 添加出差申请
public function addBusinessTrip(Request $request) {
    $userId = $request->input('user_id');
    $tripData = $request->only(['start_date', 'end_date', 'destination', 'reason']);
    
    // 保存出差申请到数据库
    $trip = new BusinessTrip();
    $trip->user_id = $userId;
    $trip->start_date = $tripData['start_date'];
    $trip->end_date = $tripData['end_date'];
    $trip->destination = $tripData['destination'];
    $trip->reason = $tripData['reason'];
    $trip->save();
    
    return response()->json(['message' => '出差申请已提交']);
}

// 查看出差申请
public function viewBusinessTrip(Request $request) {
    $userId = $request->input('user_id');
    
    // 获取该员工的出差申请列表
    $trips = BusinessTrip::where('user_id', $userId)->get();
    
    return response()->json($trips);
}

// 管理者批准出差申请
public function approveBusinessTrip(Request $request) {
    $tripId = $request->input('trip_id');
    
    // 更新出差申请的状态为已批准
    $trip = BusinessTrip::find($tripId);
    $trip->status = 'approved';
    $trip->save();
    
    return response()->json(['message' => '出差申请已批准']);
}
?>

<template>
  <div>
    <h1>出差申请</h1>
    <form @submit="submitForm">
      <label>出差开始时间</label>
      <input type="text" v-model="startDate">
      <label>出差结束时间</label>
      <input type="text" v-model="endDate">
      <label>出差地点</label>
      <input type="text" v-model="destination">
      <label>出差原因</label>
      <input type="text" v-model="reason">
      <button type="submit">提交申请</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      startDate: '',
      endDate: '',
      destination: '',
      reason: ''
    }
  },
  methods: {
    submitForm() {
      // 将表单数据提交到后端
      axios.post('/addBusinessTrip', {
        start_date: this.startDate,
        end_date: this.endDate,
        destination: this.destination,
        reason: this.reason
      }).then(response => {
        // 提交成功后给出提示
        alert(response.data.message);
      }).catch(error => {
        // 提交失败处理错误
        console.error(error);
      });
    }
  }
}
</script>