路由传参实现点击查看活动仅展示对应部门项目的问题排查

问题根因 #

1. 控制器未接收路由传递的部门ID参数，查询项目时未添加部门维度的筛选条件，默认返回所有项目
2. 前端筛选监听逻辑中跳转的路由是全局项目列表路由app:projects.index，会丢失当前部门的筛选上下文

修复步骤 #

1. 调整路由定义（如果还未配置参数）

先确认路由文件中app:projectdepartment.index已配置部门ID参数，示例：

Route::get('/departments/{department}/projects', [你的控制器类名::class, 'index'])->name('app:projectdepartment.index');

2. 修改控制器代码，新增部门筛选逻辑

调整方法签名接收路由传递的部门参数，查询项目时增加部门ID过滤：

// 用模型绑定接收部门参数，如果没开模型绑定可以用request()->route('department')拿ID
public function index(Department $department, ProjectFilter $filters)
{
    return Inertia::render('back/app/departments/index-department', [
        // 把当前选中的部门传给前端，用于筛选参数保留
        'current_department' => $department->only('id', 'name'),
        // filters新增department_id字段，避免搜索分页时丢失筛选条件
        'filters'  => request()->all('visibility', 'status', 'search', 'department_id'),
        'users'    => User::orderBy('name')->get()->map->only(['uuid', 'name', 'email', 'avatar_url']),
        'departments' => Department::orderBy('name')->get(),
        'projects' => Project::with('teamMembers', 'user', 'tasks')
            // 新增部门筛选条件，只返回当前部门的项目
            ->where('department_id', $department->id)
            ->filter($filters)
            ->accessible()
            ->latest()
            ->paginate(10)
            ->transform(function ($project) {
                return [
                    'uuid'          => $project->uuid,
                    'name'          => $project->name,
                    'description'   => $project->description,
                    'department_id' => $project->department_id,
                    'status'        => $project->status,
                    'pending_tasks' => $project->tasks()->pending()->count(),
                    'days_left'     => $project->days_left,
                    'team_members'  => $project->teamMembers->transform(function ($user) {
                        return [
                            'name'       => $user->name,
                            'avatar_url' => $user->avatar_url,
                        ];
                    })
                ];
            })
    ]);
}

3. 调整前端逻辑，保留部门筛选参数

放开注释的部门ID配置，同时修改筛选跳转的路由为当前部门项目路由：

data() {
    return {
        filtersForm: {
            status: this.filters.status,
            visibility: this.filters.visibility,
            search: this.filters.search,
            // 从后端返回的当前部门属性拿ID
            department_id: this.$page.props.current_department.id,
        }
    }
},
watch: {
    filtersForm: {
        deep: true,
        handler: _.throttle(function () {
            let query = _.pickBy(this.filtersForm);
            // 路由替换为当前部门项目路由，携带部门ID参数
            this.$inertia.replace(this.route('app:projectdepartment.index', {
                department: this.filtersForm.department_id,
                ...query
            }), Object.keys(query).length ? query : {remember: 'forget'})
        }, 150)
    }
}

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