问题: 弹窗嵌入在容器内,无法正常显示
解决: 将弹窗移到组件外层 + 提高z-index到9999
<!-- designer-assignment.component.html -->
<div class="designer-assignment-container">
<!-- 主要内容 -->
</div>
<!-- 弹窗移到最外层 -->
@if (showTeamAssignmentModal) {
<app-designer-team-assignment-modal ...></app-designer-team-assignment-modal>
}
问题: 点击本周/本月/本季度数据不变化
解决: 在ngOnInit中初始化数据
// dashboard.ts
ngOnInit(): void {
this.initializeUserRole();
this.updateDesignerEfficienciesByDimension('month'); // ✅ 初始化数据
this.loadWorkHourData();
}
问题: 跳转到错误页面
解决: 修正URL参数
// dashboard.ts
goToAftercare(): void {
this.router.navigate(['/designer/project-detail', 'mock-1'], {
queryParams: {
role: 'customer-service',
activeTab: 'progress',
currentStage: '客户评价',
section: 'aftercare',
view: 'project-review-only'
}
});
}
目标URL: http://localhost:4200/designer/project-detail/mock-1?role=customer-service&activeTab=progress¤tStage=客户评价
问题: 导出按钮无真实功能
解决: 实现CSV文件下载
// dashboard.ts
exportOverdueReport(): void {
// 生成CSV内容
let csvContent = '\uFEFF'; // UTF-8 BOM
csvContent += '逾期项目分析报表\n\n';
csvContent += `时间维度,${dimension}\n`;
// ... 添加数据
// 创建下载
const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
const link = document.createElement('a');
link.href = URL.createObjectURL(blob);
link.download = `逾期项目分析报表_${dimension}_${date}.csv`;
link.click();
}
src/app/pages/designer/project-detail/components/designer-assignment/designer-assignment.component.html
src/app/pages/designer/project-detail/components/designer-team-assignment-modal/designer-team-assignment-modal.component.scss
src/app/pages/finance/dashboard/dashboard.ts
src/app/pages/designer/project-detail/project-detail.ts
实现完成 ✅ 所有功能正常