Laravel 8中如何基于Service ID筛选FullCalendar的休假事件

一、先排查后端接口逻辑 #

1. 确保CongeController能正确接收并处理service_id参数
   控制器示例代码：

   public function getEvents(Request $request)
   {
       $serviceId = $request->query('service_id');
       $conges = Conge::query();
   
       // 关联员工表筛选对应部门的休假
       if ($serviceId) {
           $conges->whereHas('employe', function ($query) use ($serviceId) {
               $query->where('service_id', $serviceId);
           });
       }
   
       // 转换为FullCalendar兼容的格式
       $events = $conges->get()->map(function ($conge) {
           return [
               'id' => $conge->id,
               'title' => "{$conge->employe->nom} - {$conge->type_conge}",
               'start' => $conge->date_debut,
               'end' => $conge->date_fin
           ];
       });
   
       return response()->json($events);
   }
   

   注意：需确保Conge模型与Employe模型已建立关联：

   // Conge.php
   public function employe()
   {
       return $this->belongsTo(Employe::class);
   }
   

2. 测试接口有效性
   直接在浏览器访问接口URL（如/api/conges?service_id=1），检查返回的JSON数据是否仅包含目标部门的休假事件。若数据不符合预期，优先修复后端关联或筛选逻辑。

二、前端筛选逻辑调整 #

1. 绑定筛选按钮事件并更新日历数据
   前端示例代码（原生JS）：

   <select id="serviceFilter">
       <option value="">所有部门</option>
       @foreach($services as $service)
           <option value="{{ $service->id }}">{{ $service->nom }}</option>
       @endforeach
   </select>
   <button id="filterBtn">筛选</button>
   <div id="calendar"></div>
   

   // 初始化日历
   const calendar = new FullCalendar.Calendar(document.getElementById('calendar'), {
       initialView: 'dayGridMonth',
       events: {
           url: '/api/conges',
           id: 'congeEvents' // 给事件源标记ID，方便后续更新
       }
   });
   calendar.render();
   
   // 筛选按钮点击事件
   document.getElementById('filterBtn').addEventListener('click', () => {
       const serviceId = document.getElementById('serviceFilter').value;
       // 获取事件源并更新参数，重新拉取数据
       const eventSource = calendar.getEventSourceById('congeEvents');
       eventSource.setExtraParams({ service_id: serviceId });
       eventSource.refetch();
   });
   

2. 常见前端问题排查

   • 打开浏览器开发者工具（F12），查看Network标签下的请求，确认service_id参数已正确携带在Query Parameters中。
   • 若存在缓存问题，可在请求URL后拼接时间戳：url: '/api/conges?' + new Date().getTime()
   • 若使用Vue/React框架，需确保日历组件能响应参数变化，必要时重新初始化组件。

三、额外配置检查 #

• 路由配置：确保getEvents方法对应路由为GET请求，在routes/api.php中定义：

  Route::get('/conges', [CongeController::class, 'getEvents']);
  

• 权限验证：若项目使用 Sanctum/Passport，需确保前端请求携带认证令牌，避免接口返回401。
• 日期格式：后端返回的start/end字段需为ISO标准日期字符串（如2024-05-01），否则FullCalendar无法正确解析。

内容的提问来源于stack exchange，提问作者Rajah