# 驾驶员任务管理 - 终止功能及分页更新

## 📅 更新时间
2025-10-16

## 🎯 更新概述

对驾驶员任务管理系统进行以下重要更新：
1. ✅ 为接收任务添加二次确认功能（已完成）
2. ✅ 移除"已暂停"状态
3. ✅ 为进行中任务添加"终止"操作
4. ✅ 为终止操作添加 AlertDialog 二次确认
5. ✅ 为任务列表添加分页功能

## ✨ 主要变更

### 1. 任务状态更新

#### 新增状态
- **已终止** 🟠: 用于标记被强制停止的任务

#### 完整状态列表
```typescript
export type TaskStatus = '待接收' | '已接收' | '进行中' | '已完成' | '已取消' | '已终止';
```

#### 状态颜色配置
| 状态 | 颜色 | Tailwind 类 | 说明 |
|------|------|-------------|------|
| 待接收 | 灰色 | bg-gray-100 text-gray-700 | 新创建的任务 |
| 已接收 | 蓝色 | bg-blue-100 text-blue-700 | 驾驶员已确认接收 |
| 进行中 | 绿色 | bg-green-100 text-green-700 | 任务正在执行 |
| 已完成 | 紫色 | bg-purple-100 text-purple-700 | 任务正常完成 |
| 已取消 | 红色 | bg-red-100 text-red-700 | 任务被取消 |
| 已终止 | 橙色 🆕 | bg-orange-100 text-orange-700 | 任务被强制终止 |

### 2. 终止任务功能

#### 功能说明
- **触发条件**: 任务状态为"进行中"时可用
- **操作位置**: 任务列表的操作列
- **按钮样式**: 橙色文字按钮，显示"终止"

#### 操作流程
```
任务进行中
  ↓
点击"终止"按钮
  ↓
显示 AlertDialog 确认对话框
  ↓
用户确认
  ↓
任务状态: 进行中 → 已终止
  ↓
记录终止时间
  ↓
Toast 提示: "任务状态更新成功"
```

#### 终止确认对话框
```tsx
┌────────────────────────────────────────┐
│ 确认终止任务                            │
├────────────────────────────────────────┤
│ 确定要终止任务 T202510160001 吗？     │
│ ⚠️ 终止后任务将停止执行，并记录为    │
│    已终止状态。此操作不可恢复。        │
├────────────────────────────────────────┤
│              [我再想想] [确认终止]      │
│                          └─ 橙色        │
└────────────────────────────────────────┘
```

**对话框特点**:
- 标题: "确认终止任务"
- 显示任务编号（橙色高亮）
- 橙色警告文字说明后果
- 按钮: "我再想想" / "确认终止"（橙色）

### 3. 进行中任务操作按钮

#### 按钮布局
```
进行中任务操作区域：
┌─────────────────────────────────┐
│ [完成] [终止] [上报问题图标]    │
│   ↑      ↑         ↑            │
│  紫色   橙色    橙色图标         │
└─────────────────────────────────┘
```

#### 完整按钮列表
| 按钮 | 颜色 | 图标 | 功能 | 状态变化 |
|------|------|------|------|----------|
| 完成 | 默认 | 无 | 标记任务完成 | 进行中 → 已完成 |
| 终止 🆕 | 橙色 | 无 | 强制终止任务 | 进行中 → 已终止 |
| 上报问题 | 默认 | MessageSquare | 上报任务问题 | 状态不变 |

### 4. 分页功能

#### 分页配置
- **默认每页**: 10 条
- **可选项**: 10, 20, 50, 100 条/页
- **位置**: 任务列表底部
- **组件**: DataPagination

#### 分页界面
```
┌────────────────────────────────────────────────────────────┐
│ 每页显示 [10▼] 条    < [1] 2 3 ... 10 >    显示 1-10 条，共 95 条 │
└────────────────────────────────────────────────────────────┘
```

**功能特性**:
- ✅ 页码选择
- ✅ 上一页/下一页
- ✅ 每页数量调整
- ✅ 总数统计显示
- ✅ 智能省略号（页数较多时）

## 📁 修改文件

### 1. `/types/driver.ts`

#### 更新内容
```typescript
// 更新前
export type TaskStatus = '待接收' | '已接收' | '进行中' | '已完成' | '已取消';

// 更新后
export type TaskStatus = '待接收' | '已接收' | '进行中' | '已完成' | '已取消' | '已终止';
```

### 2. `/components/machinery/driver/DriverTask.tsx`

#### 新增导入
```tsx
import { usePagination } from '../../../lib/usePagination';
import { DataPagination } from '../../ui/data-pagination';
```

#### 新增状态
```tsx
const [showTerminateConfirm, setShowTerminateConfirm] = useState(false);
```

#### 新增函数
```tsx
// 终止任务确认
const handleTerminateTask = (taskId: string) => {
  setPendingTaskId(taskId);
  setShowTerminateConfirm(true);
};

const confirmTerminateTask = () => {
  if (pendingTaskId) {
    handleUpdateStatus(pendingTaskId, '已终止');
  }
  setShowTerminateConfirm(false);
  setPendingTaskId(null);
};
```

#### 更新状态颜色
```tsx
const getStatusColor = (status: TaskStatus) => {
  switch (status) {
    case '待接收': return 'bg-gray-100 text-gray-700';
    case '已接收': return 'bg-blue-100 text-blue-700';
    case '进行中': return 'bg-green-100 text-green-700';
    case '已完成': return 'bg-purple-100 text-purple-700';
    case '已取消': return 'bg-red-100 text-red-700';
    case '已终止': return 'bg-orange-100 text-orange-700'; // 新增
    default: return 'bg-gray-100 text-gray-700';
  }
};
```

#### 添加终止按钮
```tsx
{task.status === '进行中' && (
  <>
    <Button onClick={() => handleCompleteTask(task.id)}>
      完成
    </Button>
    {/* 新增终止按钮 */}
    <Button 
      onClick={() => handleTerminateTask(task.id)}
      className="text-orange-600 hover:text-orange-700"
    >
      终止
    </Button>
    <Button onClick={() => handleReportIssue(task)}>
      <MessageSquare className="w-4 h-4 text-orange-600" />
    </Button>
  </>
)}
```

#### 添加分页
```tsx
// 初始化分页
const pagination = usePagination(tasks, 10);

// 使用分页数据
{pagination.paginatedData.map((task) => (
  // 渲染任务行
))}

// 添加分页组件
<DataPagination
  currentPage={pagination.currentPage}
  totalPages={pagination.totalPages}
  pageSize={pagination.pageSize}
  totalItems={tasks.length}
  startIndex={pagination.startIndex}
  endIndex={pagination.endIndex}
  onPageChange={pagination.goToPage}
  onPageSizeChange={pagination.setPageSize}
  canPreviousPage={pagination.canPreviousPage}
  canNextPage={pagination.canNextPage}
/>
```

#### 添加 AlertDialog
```tsx
{/* 终止任务确认对话框 */}
<AlertDialog open={showTerminateConfirm} onOpenChange={setShowTerminateConfirm}>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>确认终止任务</AlertDialogTitle>
      <AlertDialogDescription>
        {pendingTaskId && tasks.find(t => t.id === pendingTaskId) && (
          <>
            确定要终止任务 <span className="font-semibold text-orange-700">
              {tasks.find(t => t.id === pendingTaskId)?.taskNumber}
            </span> 吗？
            <br />
            <span className="text-orange-600 font-medium">
              终止后任务将停止执行，并记录为已终止状态。此操作不可恢复。
            </span>
          </>
        )}
      </AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel>我再想想</AlertDialogCancel>
      <AlertDialogAction 
        onClick={confirmTerminateTask} 
        className="bg-orange-600 hover:bg-orange-700"
      >
        确认终止
      </AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>
```

## 🎨 视觉设计

### 操作按钮颜色规范

| 操作 | 按钮类型 | 颜色 | 含义 |
|------|---------|------|------|
| 接收 | 图标 | 默认 | 正向操作 |
| 取消 | 图标 | 红色 | 危险操作 |
| 开始 | 文字 | 默认 | 正向操作 |
| 完成 | 文字 | 默认 | 完成状态 |
| 终止 🆕 | 文字 | 橙色 | 警告操作 |
| 上报问题 | 图标 | 橙色 | 警告提示 |

### AlertDialog 颜色语义

| 对话框 | 主题色 | 确认按钮类 | 场景 |
|--------|--------|-----------|------|
| 接收任务 | 绿色 | bg-green-600 | 正向操作 |
| 取消任务 | 红色 | bg-red-600 | 危险操作 |
| 完成任务 | 紫色 | bg-purple-600 | 完成操作 |
| 终止任务 🆕 | 橙色 | bg-orange-600 | 警告操作 |

## 🔄 任务状态流转

### 完整流程图

```
        创建任务
           ↓
       【待接收】
         ↙  ↘
    接收   取消 → 【已取消】
     ↓
   【已接收】
     ↙  ↘
  开始  取消 → 【已取消】
   ↓
 【进行中】
   ↙ ↓ ↘
完成 终止 上报问题
 ↓   ↓    ↓
已完成 已终止 (状态不变)
```

### 状态说明

#### 待接收
- **可执行操作**: 接收、取消
- **说明**: 任务刚创建，等待驾驶员确认

#### 已接收  
- **可执行操作**: 开始、取消
- **说明**: 驾驶员已确认，准备开始

#### 进行中
- **可执行操作**: 完成、终止、上报问题
- **说明**: 任务正在执行中
- **⚠️ 特别注意**: 不能直接取消，只能完成或终止

#### 已完成
- **可执行操作**: 查看详情
- **说明**: 任务正常完成
- **自动操作**: 记录结束时间、计算工时

#### 已取消
- **可执行操作**: 查看详情
- **说明**: 任务在开始前被取消
- **不可恢复**: 取消后无法恢复

#### 已终止 🆕
- **可执行操作**: 查看详情
- **说明**: 任务在执行中被强制终止
- **使用场景**: 设备故障、天气原因、安全问题等
- **不可恢复**: 终止后无法恢复

## 💡 使用场景

### 何时使用"取消"

**适用场景**:
- ✅ 任务分配错误
- ✅ 驾驶员临时请假
- ✅ 设备故障无法开始
- ✅ 计划变更
- ✅ 天气原因延期

**状态要求**:
- ✅ 待接收状态
- ✅ 已接收状态
- ❌ 不能取消进行中的任务

### 何时使用"终止"

**适用场景**:
- ✅ 执行中设备突发故障
- ✅ 天气突变（暴雨、大风等）
- ✅ 安全隐患需立即停止
- ✅ 地块条件不符合作业要求
- ✅ 驾驶员身体不适

**状态要求**:
- ✅ 仅限进行中状态
- ⚠️ 终止后不可恢复

### 取消 vs 终止

| 对比项 | 取消 | 终止 |
|--------|------|------|
| **适用状态** | 待接收、已接收 | 进行中 |
| **使用时机** | 任务开始前 | 任务执行中 |
| **典型场景** | 计划变更 | 突发情况 |
| **是否记录工时** | ❌ 否 | ✅ 是（到终止时） |
| **颜色标识** | 红色 | 橙色 |
| **严重程度** | 较低 | 较高 |

## 📊 分页使用说明

### 基本操作

#### 翻页
- **上一页**: 点击 "< Previous" 或 "<"
- **下一页**: 点击 "Next >" 或 ">"
- **跳转**: 直接点击页码

#### 调整每页数量
```
点击"每页显示"下拉框 → 选择 10/20/50/100 → 自动刷新
```

#### 查看统计
```
右下角显示: "显示 1-10 条，共 95 条"
```

### 分页特性

**智能省略**:
```
页数少: [1] [2] [3] [4] [5]
页数多: [1] ... [5] [6] [7] ... [20]
```

**状态保持**:
- ✅ 切换页码时保持每页数量
- ✅ 更改每页数量时自动跳转到第1页
- ✅ 筛选后重新计算分页

## ✅ 测试要点

### 终止功能测试

**基础功能**:
- [ ] 进行中任务显示"终止"按钮
- [ ] 其他状态不显示"终止"按钮
- [ ] 点击终止按钮弹出确认对话框
- [ ] 对话框显示正确的任务编号
- [ ] 橙色警告文字显示正确

**确认操作**:
- [ ] 点击"我再想想"关闭对话框，任务状态不变
- [ ] 点击"确认终止"任务状态变为"已终止"
- [ ] 显示 Toast 提示"任务状态更新成功"
- [ ] 任务列表状态徽章显示为橙色"已终止"

**边界情况**:
- [ ] 连续点击终止按钮不会出错
- [ ] 按 Esc 键可以关闭对话框
- [ ] 点击遮罩可以关闭对话框

### 分页功能测试

**基础功能**:
- [ ] 任务列表显示分页组件
- [ ] 默认每页显示 10 条
- [ ] 总数统计正确
- [ ] 页码显示正确

**翻页测试**:
- [ ] 上一页按钮功能正常
- [ ] 下一页按钮功能正常
- [ ] 直接点击页码跳转正常
- [ ] 第一页时上一页按钮禁用
- [ ] 最后一页时下一页按钮禁用

**每页数量**:
- [ ] 可以切换 10/20/50/100
- [ ] 切换后自动跳转到第1页
- [ ] 数据显示正确

**UI 测试**:
- [ ] 分页组件居中显示
- [ ] 统计信息显示完整
- [ ] 响应式布局正常

### 状态流转测试

**完整流程**:
- [ ] 待接收 → 接收 → 已接收
- [ ] 已接收 → 开始 → 进行中
- [ ] 进行中 → 完成 → 已完成
- [ ] 进行中 → 终止 → 已终止
- [ ] 待接收 → 取消 → 已取消
- [ ] 已接收 → 取消 → 已取消

**操作限制**:
- [ ] 进行中任务不显示取消按钮
- [ ] 已完成/已取消/已终止任务不显示操作按钮
- [ ] 只有进行中任务显示终止按钮

## 🎓 用户指南

### 快速操作指南

#### 终止进行中的任务

```
1. 找到状态为"进行中"的任务
2. 点击该任务行的"终止"按钮（橙色）
3. 在弹出的对话框中仔细阅读警告信息
4. 确认无误后点击"确认终止"
5. 系统提示"任务状态更新成功"
6. 任务状态变为橙色的"已终止"
```

#### 使用分页

```
查看更多任务:
- 点击页码或"下一页"

快速查看大量数据:
- 选择"每页显示 50 条"或"100 条"

返回第一页:
- 点击页码 "1"
```

### 常见问题

**Q1: 为什么进行中的任务不能取消？**

A: 进行中的任务已经在执行，应该通过"完成"或"终止"来结束。
- 正常完成 → 点击"完成"
- 异常情况 → 点击"终止"

**Q2: 取消和终止有什么区别？**

A: 
- **取消**: 用于任务开始前，表示不再执行此任务
- **终止**: 用于任务执行中，表示强制停止正在进行的任务

**Q3: 终止后可以恢复吗？**

A: 不可以。终止操作不可逆，请谨慎使用。

**Q4: 终止会记录工时吗？**

A: 会。系统会记录从开始到终止的时间作为实际工时。

**Q5: 分页后筛选条件会保留吗？**

A: 会。筛选条件保持不变，分页会根据筛选结果重新计算。

## 📚 相关文档

- **任务操作确认**: `/TASK_ALERT_DIALOG_UPDATE.md`
- **任务状态优化**: `/TASK_STATUS_UPDATE.md`
- **任务管理指南**: `/components/machinery/driver/TASK_MANAGEMENT_GUIDE.md`
- **快速开始**: `/components/machinery/driver/TASK_QUICK_START.md`
- **分页组件**: `/components/ui/data-pagination.tsx`
- **分页 Hook**: `/lib/usePagination.ts`

## 🎉 总结

本次更新为驾驶员任务管理系统带来了以下增强：

### 核心功能
✅ **终止任务功能** - 支持强制停止进行中的任务  
✅ **二次确认机制** - 所有关键操作都有确认对话框  
✅ **分页功能** - 大量数据时保持界面流畅  
✅ **状态完善** - 新增"已终止"状态，更符合实际场景

### 用户体验
✅ **视觉统一** - 橙色主题贯穿终止相关功能  
✅ **操作明确** - 清晰区分取消和终止的使用场景  
✅ **信息丰富** - 详细的警告提示和��作说明  
✅ **响应流畅** - 分页优化大量数据的展示性能

### 安全机制
✅ **操作确认** - 所有状态变更都需要确认  
✅ **不可恢复** - 明确提示不可逆操作  
✅ **权限控制** - 根据任务状态显示对应操作

现在，驾驶员任务管理系统功能更加完善，能够更好地应对各种实际工作场景！🎊

---

**更新人**: AI助手  
**更新日期**: 2025-10-16  
**版本**: v1.5  
**影响范围**: 驾驶员任务管理 - 状态管理、操作按钮、分页功能