生产管理系统前端 - 更新瓦力提交的产品原型到参考目录

2025-10-23 10:57:14 +08:00
parent 83523dad64
commit 28229ce795
354 changed files with 147599 additions and 7892 deletions
--- a/src/TASK_TERMINATE_UPDATE.md
+++ b/src/TASK_TERMINATE_UPDATE.md
@@ -0,0 +1,560 @@
+# 驾驶员任务管理 - 终止功能及分页更新
+
+## 📅 更新时间
+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`
+
+## 🎉 总结
+
+本次更新为驾驶员任务管理系统带来了以下增强：
+
+### 核心功能
+✅ **终止任务功能** - 支持强制停止进行中的任务  
+✅ **二次确认机制** - 所有关键操作都有确认对话框  
+✅ **分页功能** - 大量数据时保持界面流畅  
+✅ **状态完善** - 新增"已终止"状态，更符合实际场景
+
+### 用户体验
+✅ **视觉统一** - 橙色主题贯穿终止相关功能  
+✅ **操作明确** - 清晰区分取消和终止的使用场景  
+✅ **信息丰富** - 详细的警告提示和<E7A4BA><E5928C>作说明  
+✅ **响应流畅** - 分页优化大量数据的展示性能
+
+### 安全机制
+✅ **操作确认** - 所有状态变更都需要确认  
+✅ **不可恢复** - 明确提示不可逆操作  
+✅ **权限控制** - 根据任务状态显示对应操作
+
+现在，驾驶员任务管理系统功能更加完善，能够更好地应对各种实际工作场景！🎊
+
+---
+
+**更新人**: AI助手  
+**更新日期**: 2025-10-16  
+**版本**: v1.5  
+**影响范围**: 驾驶员任务管理 - 状态管理、操作按钮、分页功能