第 17 课：任务选择与批量操作

第 17 课任务选择与批量操作这一课我们继续把任务页做得更像真实后台系统。上一课我们已经完成了单条任务删除危险操作确认框局部更新和局部删除这一课继续升级加入两个在真实项目里非常常见的能力勾选多条任务对已勾选任务执行批量操作这一步很重要因为它会让你第一次明显感受到“单条操作”只关心一个目标“批量操作”要先管理一组目标一旦要管理“一组目标”页面状态就会显著复杂起来这节课解决了什么问题在没有“选择状态”之前页面只能做这种事点“编辑”处理一条任务点“删除”处理一条任务但真实项目里经常会出现这样的需求一次选中多条任务一次全部标记完成一次全部删除只选当前页清空当前选择这时候页面必须回答几个新问题哪些任务被选中了当前页是不是全选当前页是不是半选批量操作后要不要清空选择如果当前正在编辑的任务也被批量改动了该怎么办所以这节课的核心不只是“多几个按钮”而是批量操作 选择状态管理 页面级行为协调 组件展示联动这节课新增了哪些东西1. 页面级选择状态文件src/composables/useTasksPage.ts这里新增了几个核心状态selectedTaskIdsselectedTasksselectedTaskCountselectedCurrentPageTaskCountisCurrentPageFullySelectedisCurrentPagePartiallySelected你可以把它们理解成两层第一层是“原始状态”selectedTaskIds第二层是“派生状态”当前一共选中多少条当前页选中多少条当前页是不是全选当前页是不是半选这正是 Vue 里很常见的模式ref存原始状态computed算派生状态。2. 单条勾选和本页全选文件src/composables/useTasksPage.tssrc/components/tasks/TaskTable.vuesrc/components/tasks/TaskBatchActionsBar.vue这节课有两个选择入口表格每一行前面的复选框“选中当前页”复选框对应的方法是handleTaskSelectionChangehandleCurrentPageSelectionChange这两个方法都没有直接写在页面里而是放进了useTasksPage。原因很简单勾选状态属于页面状态不是某一个按钮自己的局部状态既要被表格用也要被批量操作栏用所以它更适合放在页面级 composable 里统一维护。3. 批量操作栏组件新文件src/components/tasks/TaskBatchActionsBar.vue这个组件只负责做三件事显示当前已选数量显示当前页数量抛出批量操作事件它本身不保存任务数据也不保存任务数组。这说明一个非常重要的前端设计原则展示组件尽量只负责展示和抛事件状态尽量由页面层统一维护。这样做有两个好处组件职责更单纯后面更容易复用为什么批量操作要继续放在页面层协调批量完成completeSelectedTasks()写在useTasksPage里。它负责找出选中的任务过滤掉本来就已完成的任务本地更新状态调用服务层同步写回清空选择但是“提示用户成功了几条”“如果没有任何有效任务该怎么提示”这些仍然放在src/views/TasksView.vue原因是这属于页面交互反馈不属于纯数据更新逻辑批量删除批量删除和单条删除一样也属于危险操作。所以确认框仍然放在src/views/TasksView.vue而不是塞进 composable。这是因为确认框本质上是页面交互决策用户体验控制危险行为兜底不是纯数据处理。这一点你要牢牢记住确认框通常是页面层职责不是数据层职责。为什么“本页全选”比看起来更复杂很多初学者会觉得“不就是点一下全选吗很简单啊。”但真正落地时至少要处理这些情况当前页 4 条任务一条都没选当前页 4 条任务只选了 1 条当前页 4 条任务4 条全选当前页没任务选中跨页任务后再切分页删除任务后某些已选 id 已经失效所以你才会看到我们新增了selectedCurrentPageTaskCountisCurrentPageFullySelectedisCurrentPagePartiallySelected监听任务 id 变化并自动清理失效选择这就是复杂页面开发的真实样子不是“写一个按钮”而是“定义一整套稳定规则”。这节课的关键设计点1. 选择状态只存 id不存整条对象我们存的是constselectedTaskIdsrefnumber[]([])而不是直接存constselectedTasksrefTaskItem[]([])为什么因为存 id 更稳定不容易和最新任务对象脱节更新任务内容时不需要同步改两份对象删除任务时更容易清理真正要拿到完整任务对象时再通过computed推导selectedTasks这是一种非常常见的工程化写法。2. 批量完成只更新真正需要变更的项如果某些任务本来就已经是“已完成”那就没必要再重复更新。所以我们做了过滤只处理status ! 已完成的任务这样做的好处是逻辑更准确测试更容易写清楚用户提示更符合真实结果3. 批量操作后清空选择这节课里我们在批量完成和批量删除之后都做了clearTaskSelection()为什么这样设计因为对于初学者和这个教学项目来说这个策略最稳定用户不会误以为旧选择还有效页面更容易回到“干净状态”批量操作的前后状态边界更清楚在真实项目里也有团队会选择“操作后保留勾选”但那会带来更多交互细节。4. 如果正在编辑的任务被批量操作命中就关闭编辑弹窗这是这节课里一个很容易被忽略但非常像真实项目的问题。想象一下你正在编辑任务 A同时又把任务 A 勾上了然后执行批量完成或批量删除如果不处理弹窗里就可能还是旧数据。所以我们新增了一个辅助函数closeEditDialogIfNeeded它的作用是只要当前编辑项包含在本次批量操作里就主动关闭编辑弹窗并清空当前编辑目标这就是“页面状态协调”的典型案例。这节课改了哪些文件核心逻辑src/composables/useTasksPage.ts这里新增了选择状态本页全选逻辑批量完成逻辑批量删除逻辑失效选中项清理表格组件src/components/tasks/TaskTable.vue这里新增了选择列表头全选框行复选框相关事件抛出批量操作栏src/components/tasks/TaskBatchActionsBar.vue这是本课新增组件专门用于展示选择摘要提供清空/批量完成/批量删除按钮页面层协调src/views/TasksView.vue这里新增了批量操作栏渲染批量完成提示批量删除确认框批量删除成功/失败反馈页面头部说明src/components/tasks/TaskPageHeader.vue这里只是同步更新了说明文案让它和当前能力保持一致。测试src/composables/__tests__/useTasksPage.spec.tse2e/app.spec.ts这节课新增测试重点验证单条勾选本页全选半选状态批量完成批量删除编辑弹窗与批量操作之间的联动通过这节课你应该真正学会什么如果你只会“把功能写出来”那还不够。这节课你更应该学会下面这些思路页面复杂度上升时要优先考虑“状态放哪里”一组数据的操作通常都要先有“一组选中目标”ref保存原始状态computed负责推导派生状态展示组件尽量少管状态更多通过 props emit 配合页面层危险操作确认通常放在页面层不要轻易塞进 composable批量操作一定要考虑和“编辑中”“分页中”“筛选中”这些状态的关系如果这些思路你吃透了你离“会写页面”就不是初级水平了。你现在可以自己动手练什么建议你自己继续做 3 个小练习给批量操作再加一个“批量改为待评审”让批量操作栏显示“跨页共选中多少条”当切换筛选条件时尝试决定“是否保留隐藏任务的选择状态”第三个练习尤其值得你想。因为它没有唯一标准答案而是真实项目里经常要做的产品决策题。