# 智能灌溉任务完整CRUD操作更新

## 更新时间
2024-10-24

## 更新概述
为智能灌溉任务列表添加完整的CRUD操作，包括查看详情、编辑任务和删除任务功能，其中删除操作使用系统AlertDialog进行二次确认。

## 主要功能

### 1. **查看详情功能** ✅

#### 功能说明
- 点击任务卡片的"详情"按钮可以查看完整的任务信息
- 详情对话框展示任务的所有关键信息
- 根据任务状态动态显示不同的内容

#### 详情内容
**基本信息：**
- 任务编号
- 任务状态（带颜色标识）
- 地块名称
- 水肥机设备
- 灌溉模型（带图标区分AI/经验）
- 模型类型

**执行信息：**
- 开始时间（如有）
- 持续时间
- 水压（bar）
- 流量（L/min）
- 累计水量（L）
- 阀门状态（带颜色标识）
- 水泵状态（带颜色标识）

**实时监测数据（仅运行中任务）：**
- 水压实时值（蓝色卡片）
- 流量实时值（紫色卡片）
- 累计水量（橙色卡片）

#### 界面特点
```tsx
┌────────────────────────────────────────┐
│ 👁 智能灌溉任务详情                    │
├───────────��────────────────────────────┤
│ 基本信息                               │
│ ┌─────────────┬──────────────┐        │
│ │ 任务编号    │ 任务状态     │        │
│ │ task-1      │ [运行中]     │        │
│ ├─────────────┼──────────────┤        │
│ │ 地块名称    │ 水肥机设备   │        │
│ │ 1号温室大棚 │ 1号大棚...   │        │
│ └─────────────┴──────────────┘        │
│                                        │
│ 执行信息                               │
│ ┌──────────────────────────┐          │
│ │ 水压: 2.8 bar            │          │
│ │ 流量: 25.6 L/min         │          │
│ │ 累计水量: 580 L          │          │
│ └──────────────────────────┘          │
│                                        │
│ 实时监测数据                           │
│ ┌─────┐ ┌─────┐ ┌─────┐              │
│ │ 2.8 │ │25.6 │ │ 580 │              │
│ │水压 │ │流量 │ │水量 │              │
│ └─────┘ └─────┘ └─────┘              │
│                                        │
│                          [关闭]        │
└────────────────────────────────────────┘
```

### 2. **编辑任务功能** ✅

#### 功能说明
- 点击任务卡片的"编辑"按钮可以修改任务配置
- 仅非运行中的任务可以编辑
- 运行中的任务需要先停止才能编辑
- 编辑对话框采用分步选择方式

#### 可编辑内容
1. **地块选择**
   - 从地块管理获取地块列表
   - 显示地块面积和作物类型
   - 选择地块后自动筛选可用设备

2. **设备选择**
   - 根据选中的地块动态筛选设备
   - 仅显示该地块下状态为"正常"的设备
   - 显示设备名称和编号

3. **模型选择**
   - 显示所有已启用的灌溉模型
   - 区分AI模型和经验模型
   - 显示模型类型和作物信息

#### 编辑流程
```
1. 点击"编辑"按钮
   ↓
2. 加载当前任务信息到表单
   ↓
3. 修改地块/设备/模型
   ↓
4. 点击"保存修改"
   ↓
5. 更新任务信息
```

#### 界面特点
```tsx
┌────────────────────────────────────────┐
│ ✏️ 编辑智能灌溉任务                    │
├────────────────────────────────────────┤
│ 1️⃣ 选择地块                           │
│ [1号温室大棚 - 2.5亩 · 番茄    ▼]      │
│                                        │
│ 2️⃣ 选择水肥机设备                     │
│ [1号大棚水肥一体机 - WF-2024-001 ▼]   │
│                                        │
│ 3️⃣ 选择灌溉模型                       │
│ [🧠 番茄AI智能灌溉模型         ▼]    │
│                                        │
│                  [取消] [✓ 保存修改]   │
└────────────────────────────────────────┘
```

### 3. **删除任务功能** ✅

#### 功能说明
- 点击任务卡片的"删除"按钮可以删除任务
- 仅非运行中的任务可以删除
- 运行中的任务需要先停止才能删除
- 使用AlertDialog进行二次确认，防止误操作

#### 删除流程
```
1. 点击"删除"按钮
   ↓
2. 打开AlertDialog确认对话框
   ↓
3. 显示任务完整信息
   ↓
4. 用户确认或取消
   ↓
5. 确认后删除任务
```

#### 确认对话框内容
- ⚠️ 警告标题（红色）
- 警告说明："此操作无法撤销"
- 任务详细信息卡片（红色背景）
  - 任务编号
  - 地块名称
  - 设备名称
  - 模型名称
  - 任务状态
- 操作按钮：取消 / 确认删除

#### 界面特点
```tsx
┌────────────────────────────────────────┐
│ ⚠️  确认删除灌溉任务                    │
│                                        │
│ 您确定要删除该灌溉任务吗？             │
│ 此操作无法撤销。                       │
│                                        │
│ ┌──────────────────────────┐          │
│ │ 任务信息（红色背景）     │          │
│ │ 任务编号: task-1         │          │
│ │ 地块: 1号温室大棚        │          │
│ │ 设备: 1号大棚水肥一体机  │          │
│ │ 模型: 番茄AI智能灌溉模型 │          │
│ │ 状态: [已停止]           │          │
│ └──────────────────────────┘          │
│                                        │
│              [取消] [🗑️ 确认删除]      │
└────────────────────────────────────────┘
```

### 4. **按钮显示逻辑** ✅

#### 所有任务通用
- **详情按钮**：始终显示
  - 图标：Eye（眼睛）
  - 文字：详情
  - 样式：outline

#### 非运行中任务（已停止、等待中、故障）
- **编辑按钮**：显示
  - 图标：Edit（编辑）
  - 文字：编辑
  - 样式：outline
  
- **删除按钮**：显示
  - 图标：Trash2（垃圾桶）
  - 文字：删除
  - 样式：outline，红色文字

#### 运行中任务
- **暂停按钮**：显示
  - 图标：Pause
  - 文字：暂停
  - 样式：outline
  
- **停止按钮**：显示
  - 图标：StopCircle
  - 文字：停止
  - 样式：outline，红色文字

#### 等待中任务（额外）
- **启动按钮**：显示
  - 图标：Play
  - 文字：启动
  - 样式：绿色背景

### 5. **状态管理** ✅

#### 新增状态变量
```typescript
const [showDetailDialog, setShowDetailDialog] = useState(false);
const [showEditDialog, setShowEditDialog] = useState(false);
const [showDeleteDialog, setShowDeleteDialog] = useState(false);
const [selectedTask, setSelectedTask] = useState<IrrigationTask | null>(null);
```

#### 处理函数
```typescript
// 查看详情
const handleViewDetail = (task: IrrigationTask) => {
  setSelectedTask(task);
  setShowDetailDialog(true);
};

// 编辑任务
const handleEditTask = (task: IrrigationTask) => {
  setSelectedTask(task);
  setSelectedField(task.fieldId);
  setSelectedDevice(task.deviceId);
  setSelectedModel(task.modelId);
  setShowEditDialog(true);
};

// 保存编辑
const handleSaveEdit = () => {
  // 验证 + 保存
};

// 删除任务
const handleDeleteTask = (task: IrrigationTask) => {
  setSelectedTask(task);
  setShowDeleteDialog(true);
};

// 确认删除
const handleConfirmDelete = () => {
  // 删除 + 提示
};
```

## 技术实现

### 1. **新增导入**

#### 图标
```typescript
import {
  // ... 原有图标
  Edit,      // 编辑图标
  Trash2,    // 删除图标
} from 'lucide-react';
```

#### 组件
```typescript
import { 
  AlertDialog, 
  AlertDialogAction, 
  AlertDialogCancel, 
  AlertDialogContent, 
  AlertDialogDescription, 
  AlertDialogFooter, 
  AlertDialogHeader, 
  AlertDialogTitle 
} from '../ui/alert-dialog';
```

### 2. **任务卡片更新**

#### 修改前
```tsx
<div className="flex gap-2">
  {task.status === '运行中' && (
    // 暂停、停止按钮
  )}
  {task.status === '等待中' && (
    // 启动按钮
  )}
  {task.status === '已停止' && (
    // 查看详情按钮
  )}
</div>
```

#### 修改后
```tsx
<div className="flex gap-2">
  {/* 详情按钮 - 始终显示 */}
  <Button size="sm" variant="outline" onClick={() => handleViewDetail(task)}>
    <Eye className="w-3 h-3 mr-1" />
    详情
  </Button>
  
  {/* 编辑和删除 - 非运行中任务 */}
  {task.status !== '运行中' && (
    <>
      <Button size="sm" variant="outline" onClick={() => handleEditTask(task)}>
        <Edit className="w-3 h-3 mr-1" />
        编辑
      </Button>
      <Button 
        size="sm" 
        variant="outline" 
        className="text-red-600 hover:text-red-700 hover:border-red-600"
        onClick={() => handleDeleteTask(task)}
      >
        <Trash2 className="w-3 h-3 mr-1" />
        删除
      </Button>
    </>
  )}
  
  {/* 运行控制 - 运行中任务 */}
  {task.status === '运行中' && (
    // 暂停、停止按钮
  )}
  
  {/* 启动 - 等待中任务 */}
  {task.status === '等待中' && (
    // 启动按钮
  )}
</div>
```

### 3. **对话框组件**

#### Dialog（详情、编辑）
- 使用shadcn的Dialog组件
- 支持标题、描述、内容区、底部按钮
- 可关闭，带遮罩

#### AlertDialog（删除确认）
- 使用shadcn的AlertDialog组件
- 专门用于确认操作
- 标准的取消/确认按钮
- 不能随意关闭（点击遮罩）

## 用户操作指南

### 查看任务详情
1. 在任务列表中找到要查看的任务
2. 点击任务卡片右上角的"详情"按钮
3. 在弹出的对话框中查看完整信息
4. 点击"关闭"按钮退出

### 编辑任务
1. 确保任务不是"运行中"状态
2. 点击任务卡片的"编辑"按钮
3. 在对话框中修改地块、设备或模型
4. 按照步骤1→2→3依次选择
5. 确认信息无误后点击"保存修改"
6. 系统提示保存成功

### 删除任务
1. 确保任务不是"运行中"状态
2. 点击任务卡片的"删除"按钮（红色）
3. 在确认对话框中查看任务信息
4. **仔细确认**要删除的任务是否正确
5. 点击"确认删除"按钮（红色）
6. 系统提示删除成功

⚠️ **注意：删除操作无法撤销！**

## 界面对比

### 任务卡片按钮

#### 修改前
```
运行中任务：
[暂停] [停止]

等待中任务：
[启动]

已停止任务：
[查看详情]
```

#### 修改后
```
所有任务：
[详情] ...其他按钮

运行中任务：
[详情] [暂停] [停止]

等待中任务：
[详情] [编辑] [删除] [启动]

已停止任务：
[详情] [编辑] [删除]
```

## 数据流程

### 查看详情流程
```
用户点击"详情"
    ↓
handleViewDetail(task)
    ↓
setSelectedTask(task)
    ↓
setShowDetailDialog(true)
    ↓
显示详情对话框
    ↓
渲染selectedTask数据
```

### 编辑流程
```
用户点击"编辑"
    ↓
handleEditTask(task)
    ↓
setSelectedTask(task)
设置表单初始值
    ↓
setShowEditDialog(true)
    ↓
用户修改表单
    ↓
点击"保存修改"
    ↓
handleSaveEdit()
    ↓
验证表单数据
    ↓
更新任务（模拟）
    ↓
显示成功提示
    ↓
关闭对话框
```

### 删除流程
```
用户点击"删除"
    ↓
handleDeleteTask(task)
    ↓
setSelectedTask(task)
    ↓
setShowDeleteDialog(true)
    ↓
显示AlertDialog
    ↓
用户点击"确认删除"
    ↓
handleConfirmDelete()
    ↓
删除任务（模拟）
    ↓
显示成功提示
    ↓
关闭对话框
```

## 安全特性

### 1. **状态保护**
- 运行中的任务不能编辑
- 运行中的任务不能删除
- 必须先停止任务

### 2. **二次确认**
- 删除操作使用AlertDialog
- 显示完整任务信息
- 明确提示"无法撤销"

### 3. **数据验证**
- 编辑时验证必填字段
- 确保地块、设备、模型都已选择
- 防止提交不完整的数据

### 4. **状态重置**
- 关闭对话框时重置selectedTask
- 关闭对话框时重置表单数据
- 避免状态残留

## 样式规范

### 颜色使用
- **详情按钮**：默认outline样式
- **编辑按钮**：默认outline样式
- **删除按钮**：红色文字 + outline样式 + hover时红色边框
- **确认删除按钮**：红色背景 + 白色文字

### 图标使用
- Eye：查看详情
- Edit：编辑
- Trash2：删除
- CheckCircle：保存/确认
- AlertCircle：警告/删除确认

### 布局规范
- 按钮从左到右：详情 → 编辑 → 删除 → 控制按钮
- 重要操作（删除）使用警告色
- 对话框宽度：详情和编辑为max-w-3xl或max-w-2xl

## 提示信息

### 成功提示
```typescript
toast.success('已更新 1号温室大棚 的智能灌溉任务');
toast.success('已删除 1号温室大棚 的灌溉任务');
```

### 错误提示
```typescript
toast.error('请完整填写任务信息');
```

## 注意事项

### 开发注意
1. **类型安全**：selectedTask可能为null，使用前需判断
2. **状态同步**：关闭对话框时清理状态
3. **按钮禁用**：编辑对话框的保存按钮在未完成选择时禁用
4. **样式一致**：与新增对话框保持一致的样式

### 用户注意
1. **运行中任务**：不能编辑和删除，需要先停止
2. **删除操作**：无法撤销，请谨慎操作
3. **编辑流程**：需要按步骤完成所有选择
4. **信息确认**：删除前请仔细确认任务信息

## 后续优化建议

### 短期优化
1. ✅ 添加批量删除功能
2. ✅ 添加任务复制功能
3. ✅ 支持拖拽排序
4. ✅ 添加任务搜索和筛选

### 长期优化
1. 实现真实的数据持久化
2. 添加操作日志记录
3. 支持任务导出为模板
4. 添加任务统计和分析
5. 支持任务权限控制

## 测试建议

### 功能测试
1. ✅ 测试查看详情（各种状态）
2. ✅ 测试编辑任务
3. ✅ 测试删除任务
4. ✅ 测试运行中任务的按钮禁用
5. ✅ 测试对话框的打开和关闭

### 交互测试
1. ✅ 测试编辑表单的级联选择
2. ✅ 测试删除确认对话框
3. ✅ 测试按钮的hover效果
4. ✅ 测试对话框的遮罩点击

### 数据测试
1. ✅ 测试空任务列表
2. ✅ 测试不同状态的任务
3. ✅ 测试数据验证
4. ✅ 测试状态重置

## 文件修改清单

### 修改的文件
- `/components/irrigation/SmartIrrigation.tsx` - 主要修改文件

### 主要改动点
1. 新增状态变量（showDetailDialog, showEditDialog, showDeleteDialog, selectedTask）
2. 新增处理函数（handleViewDetail, handleEditTask, handleSaveEdit, handleDeleteTask, handleConfirmDelete）
3. 更新任务卡片按钮布局
4. 新增查看详情对话框
5. 新增编辑任务对话框
6. 新增删除确认AlertDialog
7. 导入Edit和Trash2图标
8. 导入AlertDialog组件

## 更新状态
✅ 已完成并可用于生产环境

## 相关文档
- [智能灌溉更新](/components/irrigation/SMART_IRRIGATION_UPDATE.md)
- [模型配置整合总结](/components/irrigation/MODEL_CONFIG_INTEGRATION_SUMMARY.md)
- [灌溉系统UI优化](/components/irrigation/IRRIGATION_SYSTEM_UI_OPTIMIZATION_SUMMARY.md)
- [模型状态简化](/components/irrigation/MODEL_STATUS_SIMPLIFICATION.md)

## 版本历史
- **v1.0** (2024-10-24): 初始版本，添加完整的CRUD操作
