DELIVERY-TEST-MARK-GUIDE.md 11 KB
🧪 交付执行阶段测试标记功能使用指南
📋 功能概述
为了方便测试交付执行阶段的审批流程，我们添加了一个开发测试功能，允许组长端快速将交付执行标记为"待审批"状态，无需实际完成提交流程。
✨ 功能特点
- 仅组长端显示：只有通过
?roleName=team-leader参数进入的组长视图才会显示测试按钮 - 智能显示：只在交付执行状态不是待审批时显示测试按钮
- 一键标记：点击按钮即可快速设置为待审批状态
- 清除记录：自动清除之前的审批记录，确保干净的测试环境
- 视觉明显：橙色虚线边框，清晰标识为测试功能
🎯 使用场景
场景 1：首次测试审批流程
当项目刚进入交付执行阶段，还没有提交审批时：
- 从组长看板进入项目交付执行阶段
- 点击 "🧪 测试：标记为待审批" 按钮
- 确认操作
- 页面自动刷新，显示审批按钮
场景 2：重置审批状态重新测试
当已经测试过一次审批（通过或驳回）后，想要重新测试：
- 从组长看板进入项目交付执行阶段
- 看到测试标记按钮（此时审批状态不是 pending）
- 点击按钮重新标记为待审批
- 再次测试审批流程
📍 访问方式
方式 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 模板
<!-- 🧪 开发测试：组长端快速标记为待审批（仅组长视图显示） -->
@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 逻辑
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 样式
.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 字段：
设置的字段
{
deliveryApprovalStatus: 'pending', // 标记为待审批
testMarkedAt: '2024-01-01T12:00:00.000Z', // 测试标记时间
testMarkedBy: '张三' // 测试标记人
}
清除的字段
{
deliveryApprovedBy: undefined, // 清除审批人
deliveryApprovedByName: undefined,
deliveryApprovedAt: undefined,
deliveryRejectedBy: undefined, // 清除驳回人
deliveryRejectedByName: undefined,
deliveryRejectedAt: undefined,
deliveryRejectionReason: undefined // 清除驳回原因
}
⚠️ 注意事项
- 仅开发测试使用：此功能是为了方便开发测试，不应在生产环境中使用
- 组长端专属：只有组长端才会显示此按钮，客服端不会看到
- 会清除记录：点击测试按钮会清除之前的审批记录
- 需要确认：点击按钮会弹出确认对话框，防止误操作
- 自动刷新：标记成功后会自动刷新页面数据
🧪 完整测试流程
1. 准备工作
# 确保项目正在运行
npm start
# 访问组长看板
http://localhost:4200/wxwork/cDL6R1hgSi/team-leader/dashboard
2. 选择测试项目
- 选择一个处于"交付执行"阶段的项目
- 或者选择任意项目，手动跳转到交付执行页面
3. 标记为待审批
- 看到橙色虚线边框的测试区域
- 点击 "🧪 测试：标记为待审批" 按钮
- 在确认对话框中点击"确定"
- 等待成功提示
4. 测试审批流程
通过审批：
- 看到紫色渐变的"✅ 通过审批"按钮
- 点击按钮
- 查看状态变为"已通过"
驳回交付：
- 看到粉色渐变的"❌ 驳回交付"按钮
- 点击按钮
- 输入驳回原因
- 查看状态变为"已驳回"
5. 重新测试
- 刷新页面或重新进入
- 再次看到测试标记按钮
- 重复步骤 3-4
📊 控制台日志
操作过程中会输出详细的控制台日志：
// 点击测试按钮时
🧪 开始标记交付执行为待审批...
// 标记成功时
✅ 交付执行已标记为待审批
// 显示条件检查时
🔍 【交付执行审批按钮显示条件检查】 {
条件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 |
🚀 快速开始
只需三步即可开始测试：
1. 打开浏览器访问：
http://localhost:4200/wxwork/cDL6R1hgSi/team-leader/dashboard
2. 点击任意项目，确保 URL 包含 ?roleName=team-leader
3. 如果看到橙色测试按钮，点击即可开始测试！
✅ 验收标准
功能正常工作的标志：
- ✅ 组长端能看到橙色测试按钮
- ✅ 客服端看不到测试按钮
- ✅ 点击测试按钮后显示审批按钮
- ✅ 审批按钮功能正常（通过/驳回）
- ✅ 审批后测试按钮重新出现
- ✅ 控制台日志输出正常
🎉 总结
这个测试标记功能大大简化了交付执行阶段的审批流程测试，让开发人员可以快速验证审批功能是否正常工作，无需完成复杂的提交流程。只需一键点击，即可进入审批测试状态！