# 🧪 交付执行阶段测试标记功能使用指南

## 📋 功能概述

为了方便测试交付执行阶段的审批流程，我们添加了一个**开发测试功能**，允许组长端快速将交付执行标记为"待审批"状态，无需实际完成提交流程。

## ✨ 功能特点

1. **仅组长端显示**：只有通过 `?roleName=team-leader` 参数进入的组长视图才会显示测试按钮
2. **智能显示**：只在交付执行状态**不是**待审批时显示测试按钮
3. **一键标记**：点击按钮即可快速设置为待审批状态
4. **清除记录**：自动清除之前的审批记录，确保干净的测试环境
5. **视觉明显**：橙色虚线边框，清晰标识为测试功能

## 🎯 使用场景

### 场景 1：首次测试审批流程
当项目刚进入交付执行阶段，还没有提交审批时：
1. 从组长看板进入项目交付执行阶段
2. 点击 "🧪 测试：标记为待审批" 按钮
3. 确认操作
4. 页面自动刷新，显示审批按钮

### 场景 2：重置审批状态重新测试
当已经测试过一次审批（通过或驳回）后，想要重新测试：
1. 从组长看板进入项目交付执行阶段
2. 看到测试标记按钮（此时审批状态不是 pending）
3. 点击按钮重新标记为待审批
4. 再次测试审批流程

## 📍 访问方式

### 方式 1：从组长看板进入（推荐）
```
1. 访问组长看板：http://localhost:4200/wxwork/cDL6R1hgSi/team-leader/dashboard
2. 点击任意项目（会自动添加 ?roleName=team-leader 参数）
3. 如果项目当前阶段是"交付执行"，会直接跳转到交付执行页面
4. 看到测试标记按钮
```

### 方式 2：直接URL访问
```
http://localhost:4200/wxwork/cDL6R1hgSi/project/{projectId}/delivery?roleName=team-leader
```

例如：
```
http://localhost:4200/wxwork/cDL6R1hgSi/project/iKvYck89zE/delivery?roleName=team-leader
```

## 🖼️ 界面展示

### 显示测试按钮时
```
┌────────────────────────────────────────────┐
│  ⏳ 等待组长审批                            │
│  交付执行已提交，正在等待组长审核批准        │
└────────────────────────────────────────────┘

┌────────────────────────────────────────────┐
│         🧪 测试：标记为待审批                │
│                                            │
│  💡 仅开发测试使用，快速将交付执行          │
│     标记为"待审批"状态                      │
└────────────────────────────────────────────┘
```

### 标记为待审批后
```
┌────────────────────────────────────────────┐
│  ⏳ 等待组长审批                            │
│  交付执行已提交，正在等待组长审核批准        │
└────────────────────────────────────────────┘

┌────────────────────────────────────────────┐
│          ✅ 通过审批    ❌ 驳回交付         │
└────────────────────────────────────────────┘
```

## 🔧 技术实现

### HTML 模板
```html
<!-- 🧪 开发测试：组长端快速标记为待审批（仅组长视图显示） -->
@if (isTeamLeader && !isFromCustomerService && getDeliveryApprovalStatus() !== 'pending') {
  <div class="test-mark-section">
    <button class="btn-test-mark" (click)="markDeliveryAsPending()" [disabled]="saving">
      <span class="test-icon">🧪</span>
      <span class="test-text">测试：标记为待审批</span>
    </button>
    <p class="test-hint">仅开发测试使用，快速将交付执行标记为"待审批"状态</p>
  </div>
}
```

### TypeScript 逻辑
```typescript
async markDeliveryAsPending(): Promise<void> {
  if (!this.project || !this.isTeamLeader) {
    console.warn('❌ 无法标记：缺少项目或非组长权限');
    return;
  }

  const confirmed = await window?.fmode?.confirm?.(
    '🧪 测试功能\n\n' +
    '这是一个开发测试功能，将会：\n' +
    '1. 标记交付执行状态为"待审批"\n' +
    '2. 清除之前的审批记录\n' +
    '3. 显示审批按钮供测试\n\n' +
    '是否继续？'
  );

  if (!confirmed) return;

  try {
    this.saving = true;
    const data = this.project.get('data') || {};
    
    // 设置为待审批状态
    data.deliveryApprovalStatus = 'pending';
    
    // 清除之前的审批记录
    delete data.deliveryApprovedBy;
    delete data.deliveryApprovedByName;
    delete data.deliveryApprovedAt;
    delete data.deliveryRejectedBy;
    delete data.deliveryRejectedByName;
    delete data.deliveryRejectedAt;
    delete data.deliveryRejectionReason;
    
    // 记录测试标记信息
    data.testMarkedAt = new Date().toISOString();
    data.testMarkedBy = this.currentUser?.get('name') || 'Unknown';
    
    this.project.set('data', data);
    await this.project.save();

    window?.fmode?.toast?.success?.('✅ 已标记为待审批，现在可以测试审批功能了');
    
    // 刷新页面数据
    await this.loadApprovalHistory();
    this.cdr.markForCheck();
    
  } catch (error) {
    console.error('❌ 标记失败:', error);
    window?.fmode?.alert?.('标记失败，请检查控制台日志');
  } finally {
    this.saving = false;
    this.cdr.markForCheck();
  }
}
```

### SCSS 样式
```scss
.test-mark-section {
  margin: 20px 0;
  padding: 16px 20px;
  background: linear-gradient(135deg, #fff9e6, #fff3cc);
  border: 2px dashed #ffa500;
  border-radius: 12px;
  animation: slideDown 0.3s ease-out;
  
  .btn-test-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 24px;
    background: linear-gradient(135deg, #ffa500, #ff8c00);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(255, 165, 0, 0.3);
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
    
    &:hover:not(:disabled) {
      background: linear-gradient(135deg, #ff8c00, #ff7700);
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(255, 165, 0, 0.4);
    }
  }
  
  .test-hint {
    text-align: center;
    margin: 12px 0 0;
    font-size: 13px;
    color: #cc8400;
    line-height: 1.5;
    
    &::before {
      content: '💡 ';
    }
  }
}
```

## 📝 显示条件

测试按钮会在以下**所有条件**同时满足时显示：

| 条件 | 说明 | 检查方式 |
|------|------|---------|
| `isTeamLeader` | 必须是组长身份 | URL 包含 `?roleName=team-leader` |
| `!isFromCustomerService` | 不是从客服端进入 | localStorage 没有客服标记 |
| `getDeliveryApprovalStatus() !== 'pending'` | 当前不是待审批状态 | 检查 `data.deliveryApprovalStatus` |

## 🔍 数据变更

点击测试按钮后，会修改项目的 `data` 字段：

### 设置的字段
```javascript
{
  deliveryApprovalStatus: 'pending',  // 标记为待审批
  testMarkedAt: '2024-01-01T12:00:00.000Z',  // 测试标记时间
  testMarkedBy: '张三'  // 测试标记人
}
```

### 清除的字段
```javascript
{
  deliveryApprovedBy: undefined,  // 清除审批人
  deliveryApprovedByName: undefined,
  deliveryApprovedAt: undefined,
  deliveryRejectedBy: undefined,  // 清除驳回人
  deliveryRejectedByName: undefined,
  deliveryRejectedAt: undefined,
  deliveryRejectionReason: undefined  // 清除驳回原因
}
```

## ⚠️ 注意事项

1. **仅开发测试使用**：此功能是为了方便开发测试，不应在生产环境中使用
2. **组长端专属**：只有组长端才会显示此按钮，客服端不会看到
3. **会清除记录**：点击测试按钮会清除之前的审批记录
4. **需要确认**：点击按钮会弹出确认对话框，防止误操作
5. **自动刷新**：标记成功后会自动刷新页面数据

## 🧪 完整测试流程

### 1. 准备工作
```bash
# 确保项目正在运行
npm start

# 访问组长看板
http://localhost:4200/wxwork/cDL6R1hgSi/team-leader/dashboard
```

### 2. 选择测试项目
- 选择一个处于"交付执行"阶段的项目
- 或者选择任意项目，手动跳转到交付执行页面

### 3. 标记为待审批
1. 看到橙色虚线边框的测试区域
2. 点击 "🧪 测试：标记为待审批" 按钮
3. 在确认对话框中点击"确定"
4. 等待成功提示

### 4. 测试审批流程
**通过审批：**
1. 看到紫色渐变的"✅ 通过审批"按钮
2. 点击按钮
3. 查看状态变为"已通过"

**驳回交付：**
1. 看到粉色渐变的"❌ 驳回交付"按钮
2. 点击按钮
3. 输入驳回原因
4. 查看状态变为"已驳回"

### 5. 重新测试
1. 刷新页面或重新进入
2. 再次看到测试标记按钮
3. 重复步骤 3-4

## 📊 控制台日志

操作过程中会输出详细的控制台日志：

```javascript
// 点击测试按钮时
🧪 开始标记交付执行为待审批...

// 标记成功时
✅ 交付执行已标记为待审批

// 显示条件检查时
🔍 【交付执行审批按钮显示条件检查】 {
  条件1_审批状态: 'pending',
  条件1_是否pending: true,
  条件2_isTeamLeader: true,
  条件3_isFromCustomerService: false,
  条件3_非客服入口: true,
  ✅ 所有条件满足: true,
  // ... 更多详细信息
}
```

## 🎨 视觉效果

### 测试按钮样式
- **背景**：橙色渐变 `linear-gradient(135deg, #ffa500, #ff8c00)`
- **边框**：2px 虚线橙色边框
- **图标**：🧪 测试管图标
- **悬停**：向上移动 2px + 阴影增强
- **宽度**：最大 300px，居中显示

### 与审批按钮的区别
| 特征 | 测试按钮 | 审批按钮 |
|------|---------|---------|
| 颜色 | 橙色系 | 紫色/粉色 |
| 边框 | 虚线 | 无边框 |
| 背景 | 浅黄色 | 灰蓝色渐变 |
| 位置 | 审批按钮下方 | 审批状态横幅下方 |
| 宽度 | 300px | 160px × 2 |

## 🚀 快速开始

只需三步即可开始测试：

```bash
1. 打开浏览器访问：
   http://localhost:4200/wxwork/cDL6R1hgSi/team-leader/dashboard

2. 点击任意项目，确保 URL 包含 ?roleName=team-leader

3. 如果看到橙色测试按钮，点击即可开始测试！
```

## ✅ 验收标准

功能正常工作的标志：
- ✅ 组长端能看到橙色测试按钮
- ✅ 客服端看不到测试按钮
- ✅ 点击测试按钮后显示审批按钮
- ✅ 审批按钮功能正常（通过/驳回）
- ✅ 审批后测试按钮重新出现
- ✅ 控制台日志输出正常

## 🎉 总结

这个测试标记功能大大简化了交付执行阶段的审批流程测试，让开发人员可以快速验证审批功能是否正常工作，无需完成复杂的提交流程。只需一键点击，即可进入审批测试状态！