# 领用申请草稿编辑与撤回功能完成

## 更新时间
2024-10-22

## 功能概述
完成了物资领用管理系统中的草稿编辑、撤回功能，以及审批弹窗滚动优化。

## 新增功能

### 1. 草稿编辑功能 ✅
**位置**：领用申请 Tab

**功能说明**：
- 草稿状态的申请可以点击"编辑"按钮进行修改
- 编辑时会打开申请对话框，自动填充草稿数据
- 对话框标题显示"编辑草稿"而非"新建领用申请"
- 可以修改所有信息：部门、用途、物品清单、附件等
- 修改后可以：
  - **保存草稿**：更新现有草稿
  - **提交审批**：直接提交修改后的申请

**操作流程**：
```
1. 在申请列表中找到状态为"草稿"的申请
2. 点击蓝色"编辑"按钮（铅笔图标）
3. 修改申请信息
4. 点击"保存草稿"更新，或"提交审批"直接提交
```

### 2. 申请撤回功能 ✅
**位置**：领用申请 Tab

**功能说明**：
- 待审批状态的申请可以撤回为草稿
- 点击橙色"撤回"按钮即可
- 撤回后状态变为"草稿"，可以重新编辑

**操作流程**：
```
1. 在申请列表中找到状态为"待审批"的申请
2. 点击橙色"撤回"按钮（刷新图标）
3. 申请状态变更为"草稿"
4. 可以编辑后重新提交
```

### 3. 从草稿提交审批 ✅
**位置**：领用申请 Tab

**功能说明**：
- 草稿状态的申请可以直接提交审批
- 自动验证必填信息（用途、物品等）
- 自动触发审批流程
- 显示审批等级和审批人信息

**操作流程**：
```
1. 在申请列表中找到状态为"草稿"的申请
2. 点击绿色"提交审批"按钮
3. 系统验证数据完整性
4. 自动触发审批流程，状态变为"待审批"
```

### 4. 审批弹窗滚动优化 ✅
**位置**：领用审批 Tab

**改进说明**：
- 审批弹窗内容过长时可以上下滚动
- 最大高度限制为90vh
- 内容区域可滚动，底部按钮固定
- 右侧添加了滚动条的内边距，避免内容被遮挡

**样式更新**：
```tsx
<DialogContent className="max-w-3xl max-h-[90vh] overflow-hidden flex flex-col">
  <div className="space-y-4 overflow-y-auto pr-2">
    {/* 可滚动内容 */}
  </div>
  <DialogFooter>
    {/* 固定在底部的按钮 */}
  </DialogFooter>
</DialogContent>
```

## 技术实现

### 状态管理
```typescript
// 编辑模式标识
const [isEditingDraft, setIsEditingDraft] = useState(false);
const [editingRequisitionId, setEditingRequisitionId] = useState<string | null>(null);

// 申请数据可变状态
const [requisitions, setRequisitions] = useState<Requisition[]>([...]);
```

### 核心函数

#### 1. 编辑草稿
```typescript
const handleEditDraft = (requisition: Requisition) => {
  // 填充表单数据
  setFormData({ ... });
  setSelectedItems(requisition.items);
  
  // 标记为编辑模式
  setIsEditingDraft(true);
  setEditingRequisitionId(requisition.id);
  
  // 打开对话框
  setShowApplyDialog(true);
};
```

#### 2. 撤回申请
```typescript
const handleWithdrawRequisition = (requisitionId: string) => {
  setRequisitions(prev => 
    prev.map(req => 
      req.id === requisitionId 
        ? { ...req, status: '草稿' as RequisitionStatus }
        : req
    )
  );
  toast.success('申请已撤回，状态已变更为草稿');
};
```

#### 3. 从草稿提交
```typescript
const handleSubmitFromDraft = (requisitionId: string) => {
  // 验证数据
  // 更新状态为待审批
  setRequisitions(prev => 
    prev.map(req => 
      req.id === requisitionId 
        ? { ...req, status: '待审批' as RequisitionStatus }
        : req
    )
  );
  // 触发审批流程
};
```

#### 4. 保存草稿（支持编辑模式）
```typescript
const handleSaveDraft = () => {
  if (isEditingDraft && editingRequisitionId) {
    // 更新现有草稿
    setRequisitions(prev => 
      prev.map(req => 
        req.id === editingRequisitionId 
          ? { ...req, /* 更新数据 */ }
          : req
      )
    );
  } else {
    // 创建新草稿
  }
};
```

## 界面展示

### 草稿状态操作按钮
```
┌─────────────────────────────────────┐
│ [👁️ 查看] [✏️ 编辑] [📤 提交审批]  │  ← 草稿状态
└─────────────────────────────────────┘
```

### 待审批状态操作按钮
```
┌──────────────────────┐
│ [👁️ 查看] [🔄 撤回]  │  ← 待审批状态
└──────────────────────┘
```

### 编辑模式对话框标题
```
┌────────────────────────────────┐
│ 编辑草稿                        │  ← 编辑模式
│ 修改草稿信息后可保存或直接提交审批 │
├────────────────────────────────┤
│ ... 表单内容 ...                │
└────────────────────────────────┘
```

## 快速测试

### 测试1：编辑草稿
1. 进入"资产管理" → "物资领用" → "领用申请"
2. 找到申请单号 LY202410220001（草稿状态）
3. 点击蓝色"编辑"按钮
4. 修改"用途"字段
5. 点击"保存草稿"
6. 验证草稿已更新

### 测试2：撤回申请
1. 找到一个"待审批"状态的申请
2. 点击橙色"撤回"按钮
3. 验证状态变为"草稿"
4. 验证可以进行编辑

### 测试3：从草稿提交
1. 找到草稿状态的申请
2. 点击绿色"提交审批"按钮
3. 验证状态变为"待审批"
4. 查看成功提示消息

### 测试4：审批弹窗滚动
1. 进入"领用审批" Tab
2. 点击任一申请的"审批"按钮
3. 查看审批弹窗内容
4. 验证内容可以上下滚动
5. 验证底部按钮保持固定

## 业务流程

### 草稿完整生命周期
```
新建草稿 → 保存 → 编辑 → 保存 → 提交审批 → 待审批
   ↓                ↑                           ↓
 废弃             编辑                        撤回
```

### 申请状态转换
```
草稿 ──提交审批──→ 待审批 ──审批通过──→ 已通过 ──出库──→ 已出库
 ↑                  ↓
 └────撤回──────────┘
```

## 注意事项

1. **草稿验证**：
   - 保存草稿：仅需至少一项物品
   - 提交审批：需要完整填写用途、时间、物品等

2. **撤回限制**：
   - 仅"待审批"状态可撤回
   - 已审批通过的申请不可撤回

3. **编辑模式**：
   - 新建申请时重置编辑模式标识
   - 编辑完成后自动清除编辑状态

4. **滚动优化**：
   - 审批弹窗高度限制90vh
   - 内容区域独立滚动
   - 底部按钮固定不滚动

## 文件修改

### 修改文件
- `/components/asset/AssetRequisition.tsx`

### 主要改动
1. 添加编辑模式状态管理
2. 实现草稿编辑功能
3. 实现申请撤回功能
4. 完善从草稿提交功能
5. 优化审批弹窗滚动
6. 更新对话框标题动态显示

## 下一步建议

1. 添加草稿自动保存功能
2. 实现草稿删除功能
3. 添加批量操作（批量删除草稿等）
4. 优化编辑模式下的表单验证提示
5. 添加草稿过期自动清理机制

## 相关文档
- [领用申请完整指南](./REQUISITION_APPLICATION_GUIDE.md)
- [审批工作流说明](./APPROVAL_WORKFLOW_COMPLETE_GUIDE.md)
- [领用系统概述](./ASSET_REQUISITION_SYSTEM_COMPLETE.md)
