cavin/smart-crop-ui

Fork 0

Files

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

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

6.4 KiB

Raw Blame History

✅ 取消任务按钮修复完成

🔧 问题修复

问题: 任务卡片上没有显示取消任务按钮

原因: DroppableTaskCard 组件的按钮区域没有正确实现智能显示逻辑

解决方案: 已更新按钮显示代码，添加完整的操作按钮控制

🎯 修复内容

更新的按钮显示逻辑

任务卡片操作按钮（从左到右）:

1. 👁️ 查看详情按钮
   - 所有状态均显示
   - 点击查看任务详细信息

2. ✏️ 编辑任务按钮
   - 待分配、已分配、进行中状态显示
   - 已完成、已取消状态不显示

3. 🗑️ 删除任务按钮
   - 待分配、已分配状态显示
   - 进行中状态不显示（需先取消）
   - 已完成、已取消状态不显示

4. ❌ 取消任务按钮 ⭐ 新增
   - 待分配、已分配、进行中状态显示
   - 红色图标，悬停时背景变红
   - 已完成、已取消状态不显示

🎨 按钮外观

取消任务按钮

图标: ❌ XCircle
颜色: 红色 (text-red-600)
悬停效果:
  - 文字: 深红色 (hover:text-red-700)
  - 背景: 淡红色 (hover:bg-red-50)
提示文字: "取消任务"

📍 按钮位置示例

┌──────────────────────────────────────────────────────────┐
│ 1号地块耕地作业  [高] [待分配]    [👁️][✏️][🗑️][❌]  │
│ 任务类型: 耕地  地块: 1号地块                            │
│ 农机: 未分配  驾驶员: 未分配                             │
└──────────────────────────────────────────────────────────┘
                                      └─────┬─────┘
                                        取消按钮

🧪 测试步骤

步骤1: 查看待分配任务的按钮

1. 访问：农机管理 → 任务调度与跟踪 → 任务分配
2. 找到"待分配"状态的任务

预期显示:
✅ 👁️ 查看详情
✅ ✏️ 编辑任务
✅ 🗑️ 删除任务
✅ ❌ 取消任务 ← 应该能看到

步骤2: 测试取消任务功能

1. 点击任务卡片上的 ❌ 按钮
2. 应该弹出"取消任务"对话框
3. 填写取消原因
4. 点击"确认取消"

预期:
✅ 对话框正常显示
✅ 任务状态变为"已取消"
✅ 显示成功提示

步骤3: 验证不同状态的按钮

待分配状态:

✅ [👁️] [✏️] [🗑️] [❌]  ← 4个按钮

已分配状态:

✅ [👁️] [✏️] [🗑️] [❌]  ← 4个按钮

进行中状态:

✅ [👁️] [✏️] [❌]  ← 3个按钮（无删除）

已完成状态:

✅ [👁️]  ← 仅1个按钮

已取消状态:

✅ [👁️]  ← 仅1个按钮

🎯 按钮交互逻辑

取消按钮点击流程

点击 ❌ 取消任务
  ↓
弹出 TaskCancelDialog 对话框
  ↓
显示任务信息
  - 任务名称
  - 任务类型
  - 当前状态
  - 农机信息
  - 驾驶员信息
  ↓
要求填写取消原因（必填）
  ↓
显示警告提示
  - 立即停止任务执行
  - 释放已分配的资源
  - 任务状态变为"已取消"
  - 此操作不可撤销
  ↓
点击"确认取消"
  ↓
任务状态 → 已取消
取消原因记录到备注
显示成功提示

🔍 视觉验证

按钮悬停效果

取消按钮悬停前:

[❌] ← 红色图标，无背景

取消按钮悬停后:

[❌] ← 深红色图标，淡红色背景

按钮对齐

所有按钮:
- 高度一致
- 间距统一 (gap-2)
- 右对齐
- 垂直居中

✅ 修复验证清单

界面验证

✅ 待分配任务显示4个按钮
✅ 取消按钮显示为红色
✅ 按钮悬停效果正常
✅ 按钮提示文字正确

功能验证

✅ 点击取消按钮弹出对话框
✅ 对话框内容显示正确
✅ 取消流程正常工作
✅ 状态变更成功

状态验证

✅ 已完成任务不显示取消按钮
✅ 已取消任务不显示取消按钮
✅ 进行中任务显示取消按钮

🎨 完整代码实现

<div className="flex gap-2 ml-4">
  {/* 查看详情 - 始终显示 */}
  <Button
    variant="ghost"
    size="sm"
    onClick={() => onView(task)}
    title="查看详情"
  >
    <Eye className="w-4 h-4" />
  </Button>
  
  {/* 其他按钮 - 根据状态显示 */}
  {task.status !== '已完成' && task.status !== '已取消' && (
    <>
      {/* 编辑按钮 */}
      <Button
        variant="ghost"
        size="sm"
        onClick={() => onEdit(task)}
        title="编辑任务"
      >
        <Edit className="w-4 h-4" />
      </Button>
      
      {/* 删除按钮 - 进行中任务不显示 */}
      {task.status !== '进行中' && (
        <Button
          variant="ghost"
          size="sm"
          onClick={() => onDelete(task.id)}
          title="删除任务"
        >
          <Trash2 className="w-4 h-4 text-destructive" />
        </Button>
      )}
      
      {/* 取消按钮 - 待分配/已分配/进行中显示 */}
      {(task.status === '待分配' || 
        task.status === '已分配' || 
        task.status === '进行中') && (
        <Button
          variant="ghost"
          size="sm"
          onClick={() => onCancel(task)}
          title="取消任务"
          className="text-red-600 hover:text-red-700 hover:bg-red-50"
        >
          <XCircle className="w-4 h-4" />
        </Button>
      )}
    </>
  )}
</div>

📁 修改的文件

✅ /components/machinery/scheduling/TaskAssignment.tsx
   - 更新 DroppableTaskCard 组件
   - 添加智能按钮显示逻辑
   - 添加取消任务按钮

🎉 修复完成

现在可以看到:

✅ 取消任务按钮正确显示
✅ 红色图标醒目易识别
✅ 悬停效果提升用户体验
✅ 状态控制逻辑正确
✅ 完整的取消流程

操作指南:

1. 查看任务列表
2. 找到需要取消的任务
3. 点击红色的 ❌ 按钮
4. 填写取消原因
5. 确认取消
6. 任务状态变为"已取消"

修复日期: 2025-10-17
状态: ✅ 完成

现在您应该能在任务卡片上看到取消按钮了！ 🎊

6.4 KiB Raw Blame History Unescape Escape