cavin/smart-crop-ui

Fork 0

Files

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

2025-10-23 10:57:14 +08:00

16 KiB

Raw Blame History

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

📅 更新时间

2025-10-16

🎯 更新概述

对驾驶员任务管理系统进行以下重要更新：

✅ 为接收任务添加二次确认功能（已完成）
✅ 移除"已暂停"状态
✅ 为进行中任务添加"终止"操作
✅ 为终止操作添加 AlertDialog 二次确认
✅ 为任务列表添加分页功能

✨ 主要变更

1. 任务状态更新

新增状态

已终止 🟠: 用于标记被强制停止的任务

完整状态列表

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 提示: "任务状态更新成功"

终止确认对话框

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

对话框特点:

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

3. 进行中任务操作按钮

按钮布局

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

完整按钮列表

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

4. 分页功能

分页配置

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

分页界面

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

功能特性:

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

📁 修改文件

1. `/types/driver.ts`

更新内容

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

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

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

新增导入

import { usePagination } from '../../../lib/usePagination';
import { DataPagination } from '../../ui/data-pagination';

新增状态

const [showTerminateConfirm, setShowTerminateConfirm] = useState(false);

新增函数

// 终止任务确认
const handleTerminateTask = (taskId: string) => {
  setPendingTaskId(taskId);
  setShowTerminateConfirm(true);
};

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

更新状态颜色

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';
  }
};

添加终止按钮

{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>
  </>
)}

添加分页

// 初始化分页
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

{/* 终止任务确认对话框 */}
<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: 取消和终止有什么区别？

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

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
影响范围: 驾驶员任务管理 - 状态管理、操作按钮、分页功能

16 KiB Raw Blame History Unescape Escape

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

📅 更新时间

🎯 更新概述

✨ 主要变更

1. 任务状态更新

新增状态

完整状态列表

状态颜色配置

2. 终止任务功能

功能说明

操作流程

终止确认对话框

3. 进行中任务操作按钮

按钮布局

完整按钮列表

4. 分页功能

分页配置

分页界面

📁 修改文件

1. /types/driver.ts

更新内容

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

新增导入

新增状态

新增函数

更新状态颜色

添加终止按钮

添加分页

添加 AlertDialog

🎨 视觉设计

操作按钮颜色规范

AlertDialog 颜色语义

🔄 任务状态流转

完整流程图

状态说明

待接收

已接收

进行中

已完成

已取消

已终止 🆕

💡 使用场景

何时使用"取消"

何时使用"终止"

取消 vs 终止

📊 分页使用说明

基本操作

翻页

调整每页数量

查看统计

分页特性

✅ 测试要点

终止功能测试

分页功能测试

状态流转测试

🎓 用户指南

快速操作指南

终止进行中的任务

使用分页

常见问题

📚 相关文档

🎉 总结

核心功能

用户体验

安全机制

16 KiB

Raw Blame History

1. `/types/driver.ts`

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