首页需要显示与当前用户相关的所有未完成任务,包括:
1. 用户创建的任务(创建人是当前用户)
2. 分配给当前用户的任务(分配人是当前用户)
3. 执行人员是当前用户的任务(执行人是当前用户)
之前的实现只显示分配给当前用户的任务(assigneeId),不够全面。
后端已经提供了 /task/my 接口,该接口在 SysTaskMapper.xml 中的实现如下:
SELECT ...
FROM sys_task t
WHERE t.del_flag = '0'
AND (t.creator_id = #{userId} OR t.assignee_id = #{userId})
ORDER BY ...
这个接口查询了:
- creator_id = 当前用户ID(用户创建的任务)
- assignee_id = 当前用户ID(分配给用户的任务,包括执行人)
在 app/api/task.js 中新增:
// 获取我的任务列表
export function getMyTasks() {
return request({
url: '/task/my',
method: 'get'
})
}
在 app/pages/index.vue 中:
修改引入:
```javascript
// 之前
import { listTask, changeTaskStatus } from '@/api/task'
// 之后
import { getMyTasks, changeTaskStatus } from '@/api/task'
```
修改加载方法:javascript loadRunningTasks() { // 使用 /task/my 接口获取当前用户相关的所有任务 getMyTasks().then(response => { // 过滤出未完成和未取消的任务 const allTasks = Array.isArray(data) ? data : [] this.taskList = allTasks .filter(task => { return task.taskStatus !== 'COMPLETED' && task.taskStatus !== 'CANCELLED' }) .map(task => { // ... 数据格式化 }) }) }
del_flag = '0')COMPLETED(已完成)、CANCELLED(已取消)// 只查询分配给当前用户的任务
const queryParams = {
assigneeId: userId,
taskStatuses: 'PENDING,DEPARTING,ARRIVED,RETURNING,IN_PROGRESS'
}
listTask(queryParams)
限制:
- 只能看到分配给自己的任务
- 看不到自己创建但分配给别人的任务
- 需要手动指定状态列表
// 获取所有与用户相关的任务
getMyTasks()
优势:
- 自动包含用户创建的任务
- 自动包含分配给用户的任务
- 后端统一处理查询逻辑
- 前端简单过滤状态即可
assigneeId)设置为当前用户app/api/task.js - 新增 getMyTasks API方法app/pages/index.vue - 修改任务加载逻辑ruoyi-admin/src/main/java/com/ruoyi/web/controller/task/SysTaskController.java - /task/my 接口ruoyi-system/src/main/resources/mapper/system/SysTaskMapper.xml - selectMyTasks SQL查询ruoyi-system/src/main/java/com/ruoyi/system/service/impl/SysTaskServiceImpl.java - selectMyTasks 服务方法/task/my 接口已经在SQL层面做了优化,使用索引查询listTask 方法,不影响其他页面使用