# 任务管理页面设计文档
## 1. 页面概述
任务管理页面是系统的核心功能模块之一，允许主管和管理员对任务进行全面的管理。用户可以在此页面上查看所有任务，并使用筛选、排序和搜索功能快速定位任务。此外，页面还支持任务的分配、审核以及查看任务详情等操作。
## 2. 页面布局
### 2.1 布局结构
页面采用经典的后台管理布局：
- **顶部**: 包含页面标题和操作按钮（如"新建任务"）。
- **中部**: 筛选和搜索区域，提供多种条件来过滤任务列表。
- **下部**: 任务数据表格，以列表形式展示任务，并包含操作列。
- **底部**: 分页组件，用于浏览大量任务数据。
### 2.2 响应式设计
- **桌面端**: 多列表格，所有筛选条件水平排列。
- **平板端**: 表格列数减少，部分次要信息可能隐藏，筛选条件折叠或垂直排列。
- **移动端**: 表格转为卡片列表视图，每个卡片显示一个任务的核心信息，筛选功能通过抽屉或模态框提供。
## 3. 组件结构
```vue
搜索
重置
新建任务
{{ formatStatus(row.status) }}
查看
分配
审核
```
## 4. 数据结构
```typescript
// 任务筛选条件
interface TaskFilters {
status?: 'PENDING' | 'IN_PROGRESS' | 'COMPLETED' | 'REVIEWED';
assignee?: string;
}
// 分页信息
interface Pagination {
page: number;
pageSize: number;
}
// 任务列表项
interface TaskItem {
id: number;
title: string;
grid: string;
assignee: string | null;
status: 'PENDING' | 'IN_PROGRESS' | 'COMPLETED' | 'REVIEWED';
createdAt: string;
}
// 对话框模式
type DialogMode = 'create' | 'assign' | 'review' | 'view';
```
## 5. 状态管理
```typescript
// 组件内状态
const filters = ref({});
const pagination = ref({ page: 1, pageSize: 10 });
const dialogVisible = ref(false);
const selectedTaskId = ref(null);
const dialogMode = ref('view');
// 全局状态 (Pinia Store)
const taskStore = useTaskStore();
const { tasks, total, loading } = storeToRefs(taskStore);
const authStore = useAuthStore();
const { user } = storeToRefs(authStore);
```
## 6. 交互逻辑
### 6.1 数据获取与筛选
```typescript
const fetchTasks = () => {
taskStore.fetchTasks({ ...filters.value, ...pagination.value });
};
onMounted(fetchTasks);
const handleSearch = () => {
pagination.value.page = 1;
fetchTasks();
};
const handleReset = () => {
filters.value = {};
handleSearch();
};
const handleSizeChange = (size: number) => {
pagination.value.pageSize = size;
fetchTasks();
};
const handleCurrentChange = (page: number) => {
pagination.value.page = page;
fetchTasks();
};
```
### 6.2 表格操作
```typescript
const handleView = (task: TaskItem) => {
selectedTaskId.value = task.id;
dialogMode.value = 'view';
dialogVisible.value = true;
};
const handleAssign = (task: TaskItem) => {
selectedTaskId.value = task.id;
dialogMode.value = 'assign';
dialogVisible.value = true;
};
const handleReview = (task: TaskItem) => {
selectedTaskId.value = task.id;
dialogMode.value = 'review';
dialogVisible.value = true;
};
const handleCreateTask = () => {
selectedTaskId.value = null;
dialogMode.value = 'create';
dialogVisible.value = true;
};
const handleSuccess = () => {
dialogVisible.value = false;
fetchTasks(); // 操作成功后刷新列表
};
```
### 6.3 权限控制
```typescript
const canAssign = (task: TaskItem) => {
return user.value?.role === 'SUPERVISOR' && task.status === 'PENDING';
};
const canReview = (task: TaskItem) => {
return user.value?.role === 'SUPERVISOR' && task.status === 'COMPLETED';
};
```
### 6.4 辅助函数
```typescript
const formatStatus = (status: TaskItem['status']) => {
const map = { PENDING: '待处理', IN_PROGRESS: '进行中', COMPLETED: '已完成', REVIEWED: '已审核' };
return map[status] || '未知';
};
// getStatusTagType 函数同仪表盘页面设计
```
## 7. API 调用
```typescript
// api/tasks.ts
export const taskApi = {
getTasks: (params) => apiClient.get('/management/tasks', { params }),
// ... 其他任务相关API
};
// stores/task.ts
export const useTaskStore = defineStore('task', {
state: () => ({
tasks: [] as TaskItem[],
total: 0,
loading: false,
}),
actions: {
async fetchTasks(params) {
this.loading = true;
try {
const { data } = await taskApi.getTasks(params);
this.tasks = data.items;
this.total = data.total;
} catch (error) {
console.error('获取任务列表失败', error);
} finally {
this.loading = false;
}
}
}
});
```
## 8. 样式设计
```scss
.task-management-page {
padding: 24px;
.page-container {
margin-top: 24px;
padding: 24px;
border-radius: 8px;
border: none;
}
.filter-container {
margin-bottom: 20px;
}
.action-buttons {
margin-bottom: 20px;
}
.pagination-container {
margin-top: 24px;
display: flex;
justify-content: flex-end;
}
}
```
## 9. 测试用例
1. **单元测试**:
- 测试权限控制函数 `canAssign` 和 `canReview` 的逻辑。
- 测试 `formatStatus` 辅助函数的正确性。
- 测试 Pinia store 的 action 是否能正确调用 API 并更新 state。
2. **集成测试**:
- 测试筛选、搜索和重置功能是否正常工作。
- 测试分页组件是否能正确切换页面和每页数量。
- 测试"查看"、"分配"、"审核"、"新建"按钮能否正确打开对应模式的对话框。
- 测试对话框操作成功后，任务列表是否刷新。
## 10. 性能优化
1. **后端分页**: 必须使用后端分页来处理大量任务数据。
2. **防抖**: 对搜索输入框使用防抖处理，避免用户输入时频繁触发 API 请求。
3. **组件懒加载**: `TaskFormDialog` 组件可以通过动态导入实现懒加载，只在需要时才加载。