BOTTOM_CARD_STAGE_UNIFIED.md 8.3 KB

交付执行阶段底部卡片 - 统一显示"交付执行"

✅ 已完成的修复

1. 底部卡片组件已修复

文件src/modules/project/components/project-bottom-card/project-bottom-card.component.ts (Line 100-112)

getProjectStatus(): string {
  // 使用 currentStage 字段显示当前阶段
  const currentStage = this.project?.get('currentStage') || '订单分配';
  const corePhase = mapStageToCorePhase(currentStage);
  
  // 🔥 如果是交付执行阶段的子阶段(软装、渲染、后期等),统一显示"交付执行"
  if (corePhase === 'delivery') {
    return '交付执行';  // ✅ 统一显示
  }
  
  // 其他阶段显示实际阶段名称
  return currentStage;
}

映射逻辑

白膜 → mapStageToCorePhase → 'delivery' → 显示"交付执行" ✅
软装 → mapStageToCorePhase → 'delivery' → 显示"交付执行" ✅
渲染 → mapStageToCorePhase → 'delivery' → 显示"交付执行" ✅
后期 → mapStageToCorePhase → 'delivery' → 显示"交付执行" ✅

🔍 为什么可能还显示子阶段?

原因:数据库字段未统一

当前状态

// Parse 数据库 Project 表
{
  currentStage: "软装"  // ❌ 仍然是子阶段
}

// 底部卡片显示
mapStageToCorePhase("软装") → "delivery" → 显示"交付执行" ✅

说明

  • 显示层已修复:底部卡片会正确映射并显示"交付执行"
  • ⚠️ 数据库未统一currentStage 字段仍存储子阶段名称

🚀 彻底统一的解决方案

方案1:批量更新数据库(推荐)

目的:将所有项目的 currentStage 从子阶段统一为"交付执行"

执行步骤

  1. 打开浏览器(任意页面均可)
  2. 按 F12 打开控制台
  3. 复制并执行以下脚本

    // 批量统一交付执行阶段
    async function unifyDeliveryStage() {
    const Parse = window.Parse;
      
    console.log('🔍 查询需要统一的项目...');
      
    // 查询所有子阶段的项目
    const query = new Parse.Query('Project');
    query.containedIn('currentStage', ['白膜', '白模', '建模', '软装', '渲染', '后期']);
    query.limit(1000);
      
    try {
    const projects = await query.find();
    console.log(`📊 找到 ${projects.length} 个需要统一的项目`);
        
    if (projects.length === 0) {
      console.log('✅ 所有项目已统一');
      return;
    }
        
    // 显示项目列表
    console.table(projects.map(p => ({
      项目名称: p.get('title'),
      当前阶段: p.get('currentStage'),
      客户: p.get('contact')?.get('name') || '未知'
    })));
        
    const confirmed = confirm(
      `找到 ${projects.length} 个项目需要统一阶段。\n\n` +
      `将统一为"交付执行",子阶段信息保存到 data.deliverySubStage。\n\n` +
      `是否继续?`
    );
        
    if (!confirmed) {
      console.log('❌ 用户取消');
      return;
    }
        
    console.log('🔄 开始批量统一...');
        
    let successCount = 0;
    let errorCount = 0;
        
    for (const project of projects) {
      try {
        const currentStage = project.get('currentStage');
        const data = project.get('data') || {};
            
        // 保存子阶段信息
        data.deliverySubStage = currentStage;
            
        // 统一为"交付执行"
        project.set('currentStage', '交付执行');
        project.set('data', data);
            
        await project.save();
            
        successCount++;
        console.log(
          `✅ [${successCount}/${projects.length}] ` +
          `${project.get('title')}: "${currentStage}" → "交付执行"`
        );
      } catch (error) {
        errorCount++;
        console.error(`❌ ${project.get('title')} 更新失败:`, error);
      }
    }
        
    console.log('\n📊 统一完成:');
    console.log(`✅ 成功: ${successCount} 个`);
    console.log(`❌ 失败: ${errorCount} 个`);
        
    alert(
      `批量统一完成!\n\n` +
      `成功: ${successCount} 个\n` +
      `失败: ${errorCount} 个\n\n` +
      `3秒后自动刷新页面...`
    );
        
    if (successCount > 0) {
      setTimeout(() => window.location.reload(), 3000);
    }
        
    } catch (error) {
    console.error('❌ 查询失败:', error);
    alert('查询失败,请检查网络连接');
    }
    }
    
    // 执行统一
    unifyDeliveryStage();
    

方案2:手动验证显示

如果您只想验证显示层是否正确,无需修改数据库:

步骤

  1. 打开任意处于交付执行阶段的项目
  2. 查看页面底部的红色阶段标签
  3. 应该显示"交付执行"而不是"白膜"、"软装"等

控制台验证

// 查看当前项目的阶段
const Parse = window.Parse;
const projectId = '你的项目ID';  // 从URL获取

const query = new Parse.Query('Project');
const project = await query.get(projectId);

console.log({
  数据库存储: project.get('currentStage'),
  底部卡片应显示: project.get('currentStage') === '交付执行' 
    ? '交付执行' 
    : '交付执行(已映射)'
});

📊 统一前后对比

统一前

数据库

{
  currentStage: "软装"  // ❌ 子阶段
}

页面显示

  • 项目管理页面:软装 → 映射为"交付执行" ✅
  • 底部卡片:软装 → 映射为"交付执行" ✅
  • 顶部进度条:交付执行 ✅

问题

  • 数据不统一,依赖映射逻辑
  • 直接查询数据库会看到子阶段

统一后

数据库

{
  currentStage: "交付执行",  // ✅ 统一
  data: {
    deliverySubStage: "软装"  // ✅ 子阶段信息保留
  }
}

页面显示

  • 项目管理页面:交付执行 ✅
  • 底部卡片:交付执行 ✅
  • 顶部进度条:交付执行 ✅
  • 交付执行页面内部:白膜/软装/渲染/后期(工作流程)✅

优势

  • ✅ 数据统一,无需映射
  • ✅ 查询更简单
  • ✅ 子阶段信息保留用于工作流程

🧪 验证方法

1. 验证显示层(已修复)

打开项目详情页

步骤:
1. 打开任意交付执行阶段的项目
2. 滚动到页面底部
3. 查看红色阶段标签

预期结果:
- 显示"交付执行" ✅
- 不显示"白膜"、"软装"等子阶段

2. 验证数据库(需执行脚本)

执行前

const Parse = window.Parse;
const query = new Parse.Query('Project');
query.containedIn('currentStage', ['白膜', '软装', '渲染', '后期']);
const count = await query.count();
console.log(`还有 ${count} 个项目未统一`);

执行后

const Parse = window.Parse;
const query = new Parse.Query('Project');
query.equalTo('currentStage', '交付执行');
const count = await query.count();
console.log(`共有 ${count} 个项目处于交付执行阶段`);

📌 重要说明

显示层 vs 数据层

显示层修复(已完成)

  • ✅ 底部卡片组件已修复
  • ✅ 项目管理页面已修复
  • ✅ 所有显示位置都会映射为"交付执行"

数据层统一(可选)

  • ⚠️ 数据库 currentStage 可能仍是子阶段
  • 🔄 执行批量更新脚本可彻底统一
  • ✅ 统一后数据更清晰,查询更简单

子阶段信息保留

重要:无论是否统一数据库,子阶段信息都会保留在 data.deliverySubStage

{
  currentStage: "交付执行",    // 主阶段
  data: {
    deliverySubStage: "软装",  // 子阶段(用于工作流程)
    deliveryStageStatus: {
      whitemodel: { status: "approved" },
      softdecor: { status: "pending" }  // 当前在软装子阶段
    }
  }
}

✅ 完成检查清单

显示层修复

  • 底部卡片组件已修复
  • 使用 mapStageToCorePhase() 映射
  • 统一显示"交付执行"

数据库统一(可选)

  • 执行批量更新脚本
  • 验证所有项目已统一
  • 刷新页面确认效果

显示层已修复!如需彻底统一数据库,请执行批量更新脚本。 🎉


💡 推荐操作

  1. 立即生效:刷新项目详情页,底部卡片已显示"交付执行"
  2. 彻底统一:执行批量更新脚本,统一数据库字段
  3. 验证结果:打开项目管理页面,所有阶段统一显示

无论是否执行脚本,底部卡片都会正确显示"交付执行"!