project-list.ts 39 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084
  1. import { Component, OnInit, OnDestroy, signal, computed, Inject } from '@angular/core';
  2. import { CommonModule } from '@angular/common';
  3. import { FormsModule } from '@angular/forms';
  4. import { Router, RouterModule, ActivatedRoute } from '@angular/router';
  5. import { MatDialog, MatDialogModule } from '@angular/material/dialog';
  6. import { ProjectService } from '../../../services/project.service';
  7. import { ConsultationOrderDialogComponent } from '../consultation-order/consultation-order-dialog.component';
  8. import { Project, ProjectStatus, ProjectStage } from '../../../models/project.model';
  9. import { FmodeParse, FmodeObject } from 'fmode-ng/parse';
  10. import { ProfileService } from '../../../services/profile.service';
  11. import { normalizeStage, getProjectStatusByStage } from '../../../utils/project-stage-mapper';
  12. import { ProjectKanbanComponent } from '../../team-leader/dashboard/components/project-kanban/project-kanban.component';
  13. import { CORE_PHASES } from '../../team-leader/dashboard/dashboard.constants';
  14. import type { Project as TeamLeaderProject } from '../../team-leader/dashboard/interfaces';
  15. const Parse = FmodeParse.with('nova');
  16. // 定义项目列表项接口,包含计算后的属性
  17. interface ProjectListItem extends Project {
  18. progress: number;
  19. daysUntilDeadline: number;
  20. isUrgent: boolean;
  21. tagDisplayText: string;
  22. }
  23. @Component({
  24. selector: 'app-project-list',
  25. standalone: true,
  26. imports: [CommonModule, FormsModule, RouterModule, MatDialogModule, ProjectKanbanComponent],
  27. templateUrl: './project-list.html',
  28. styleUrls: ['./project-list.scss', '../customer-service-styles.scss']
  29. })
  30. export class ProjectList implements OnInit, OnDestroy {
  31. // 项目列表数据
  32. projects = signal<ProjectListItem[]>([]);
  33. // 原始项目数据(用于筛选)
  34. allProjects = signal<Project[]>([]);
  35. // 视图模式:卡片 / 列表 / 监控大盘(默认卡片)
  36. viewMode = signal<'card' | 'list' | 'dashboard'>('card');
  37. // 看板列配置 - 按照订单分配、确认需求、交付执行、售后四个阶段
  38. columns = [
  39. { id: 'order', name: '订单分配' },
  40. { id: 'requirements', name: '确认需求' },
  41. { id: 'delivery', name: '交付执行' },
  42. { id: 'aftercare', name: '售后' }
  43. ] as const;
  44. // 🆕 看板核心阶段配置(用于监控大盘)
  45. corePhases = CORE_PHASES;
  46. // 🆕 转换为看板项目格式
  47. kanbanProjects = computed<TeamLeaderProject[]>(() => {
  48. const now = new Date();
  49. return this.allProjects().map(p => {
  50. const deadline = p.deadline || new Date();
  51. const isOverdue = deadline < now;
  52. const daysUntilDeadline = Math.ceil((deadline.getTime() - now.getTime()) / (1000 * 60 * 60 * 24));
  53. return {
  54. id: p.id,
  55. name: p.name || '未命名项目',
  56. type: 'soft' as const, // 默认为软装项目
  57. memberType: 'normal' as const, // 默认为普通会员
  58. currentStage: p.currentStage || p.stage || 'order',
  59. designerName: p.assigneeName || '未分配',
  60. status: p.status || 'normal',
  61. expectedEndDate: deadline,
  62. deadline: deadline,
  63. createdAt: p.createdAt || now,
  64. isOverdue: isOverdue,
  65. overdueDays: isOverdue ? Math.abs(daysUntilDeadline) : 0,
  66. dueSoon: daysUntilDeadline <= 3 && daysUntilDeadline > 0,
  67. urgency: (isOverdue ? 'high' : daysUntilDeadline <= 3 ? 'medium' : 'low') as 'high' | 'medium' | 'low',
  68. phases: [], // 客服端不需要详细阶段信息
  69. isStalled: (p as any).isStalled || false,
  70. isModification: (p as any).isModification || false,
  71. qualityRating: 'pending' as const
  72. } as TeamLeaderProject;
  73. });
  74. });
  75. // 基础项目集合(服务端返回 + 本地生成),用于二次处理
  76. private baseProjects: Project[] = [];
  77. // 消息监听器
  78. private messageListener?: (event: MessageEvent) => void;
  79. // 添加toggleSidebar方法
  80. toggleSidebar(): void {
  81. // 侧边栏切换逻辑
  82. console.log('Toggle sidebar');
  83. }
  84. // 筛选和排序状态
  85. searchTerm = signal('');
  86. statusFilter = signal<string>('all');
  87. stageFilter = signal<string>('all');
  88. sortBy = signal<string>('deadline');
  89. // 当前页码
  90. currentPage = signal(1);
  91. // 每页显示数量
  92. pageSize = 8;
  93. // 分页后的项目列表(列表模式下可用)
  94. paginatedProjects = computed(() => {
  95. const filteredProjects = this.projects();
  96. const startIndex = (this.currentPage() - 1) * this.pageSize;
  97. return filteredProjects.slice(startIndex, startIndex + this.pageSize);
  98. });
  99. // 总页数
  100. totalPages = computed(() => {
  101. return Math.ceil(this.projects().length / this.pageSize);
  102. });
  103. // 筛选和排序选项
  104. statusOptions = [
  105. { value: 'all', label: '全部' },
  106. { value: 'order', label: '订单分配' },
  107. { value: 'requirements', label: '确认需求' },
  108. { value: 'delivery', label: '交付执行' },
  109. { value: 'aftercare', label: '售后' }
  110. ];
  111. stageOptions = [
  112. { value: 'all', label: '全部阶段' },
  113. { value: '需求沟通', label: '需求沟通' },
  114. { value: '建模', label: '建模' },
  115. { value: '软装', label: '软装' },
  116. { value: '渲染', label: '渲染' },
  117. { value: '尾款结算', label: '尾款结算' },
  118. { value: '投诉处理', label: '投诉处理' }
  119. ];
  120. sortOptions = [
  121. { value: 'deadline', label: '截止日期' },
  122. { value: 'createdAt', label: '创建时间' },
  123. { value: 'name', label: '项目名称' }
  124. ];
  125. // Parse相关
  126. company: FmodeObject | null = null;
  127. currentProfile: FmodeObject | null = null;
  128. isLoading = signal(false);
  129. loadError = signal<string | null>(null);
  130. constructor(
  131. private projectService: ProjectService,
  132. private router: Router,
  133. private route: ActivatedRoute,
  134. private dialog: MatDialog,
  135. private profileService: ProfileService
  136. ) {}
  137. async ngOnInit(): Promise<void> {
  138. // 读取上次的视图记忆
  139. const saved = localStorage.getItem('cs.viewMode');
  140. if (saved === 'card' || saved === 'list' || saved === 'dashboard') {
  141. this.viewMode.set(saved as 'card' | 'list' | 'dashboard');
  142. }
  143. // 初始化用户和公司信息
  144. await this.initializeUserAndCompany();
  145. // 清理重复的Product记录(确保每个项目在每个阶段只出现一次)
  146. await this.cleanupDuplicateProducts();
  147. // 加载真实项目数据
  148. await this.loadProjects();
  149. // 处理来自dashboard的查询参数
  150. this.route.queryParams.subscribe(params => {
  151. const filter = params['filter'];
  152. if (filter === 'all') {
  153. // 显示所有项目 - 重置筛选
  154. this.statusFilter.set('all');
  155. console.log('✅ 显示所有项目');
  156. } else if (filter === 'pending') {
  157. // 筛选待分配项目 - 使用'order'列ID
  158. this.statusFilter.set('order');
  159. console.log('✅ 筛选待分配项目(订单分配阶段)');
  160. }
  161. });
  162. // 添加消息监听器,处理来自iframe的导航请求
  163. this.messageListener = (event: MessageEvent) => {
  164. // 验证消息来源(可以根据需要添加更严格的验证)
  165. if (event.data && event.data.type === 'navigate' && event.data.route) {
  166. this.router.navigate([event.data.route]);
  167. }
  168. };
  169. window.addEventListener('message', this.messageListener);
  170. // 🔍 添加全局调试方法
  171. (window as any).debugCustomerServiceProjects = () => {
  172. console.log('🔍 [客服端项目调试] 当前项目列表:');
  173. const projects = this.allProjects();
  174. projects.forEach((project, index) => {
  175. console.log(`项目${index + 1}: "${project.name}"`);
  176. console.log(` - currentStage: ${project.currentStage}`);
  177. console.log(` - stage: ${project.stage}`);
  178. console.log(` - status: ${project.status}`);
  179. console.log(` - 看板列: ${this.getColumnIdForProject(project as ProjectListItem)}`);
  180. console.log(' ---');
  181. });
  182. };
  183. console.log('🔍 调试方法已添加到全局: window.debugCustomerServiceProjects()');
  184. }
  185. // 🎯 判断是否为交付执行阶段(用于统一显示)
  186. private isDeliveryExecutionStage(stage: string): boolean {
  187. if (!stage) return false;
  188. const trimmedStage = stage.trim();
  189. const lowerStage = trimmedStage.toLowerCase();
  190. return trimmedStage === '交付执行' ||
  191. lowerStage === 'delivery' ||
  192. // 建模相关
  193. trimmedStage === '建模' ||
  194. trimmedStage === '建模阶段' ||
  195. trimmedStage === '白模' ||
  196. trimmedStage === '白膜' ||
  197. lowerStage === 'modeling' ||
  198. // 软装相关
  199. trimmedStage === '软装' ||
  200. trimmedStage === '软装阶段' ||
  201. lowerStage === 'soft_decor' ||
  202. lowerStage === 'decoration' ||
  203. // 渲染相关
  204. trimmedStage === '渲染' ||
  205. trimmedStage === '渲染阶段' ||
  206. lowerStage === 'rendering' ||
  207. // 后期相关
  208. trimmedStage === '后期制作' ||
  209. trimmedStage === '后期处理' ||
  210. trimmedStage === '后期' ||
  211. lowerStage === 'postproduction' ||
  212. // 评审修改相关
  213. trimmedStage === '评审' ||
  214. trimmedStage === '方案评审' ||
  215. trimmedStage === '修改' ||
  216. trimmedStage === '方案修改' ||
  217. trimmedStage === '修订' ||
  218. lowerStage === 'review' ||
  219. lowerStage === 'revision' ||
  220. // 其他可能的交付执行子阶段
  221. trimmedStage === '设计' ||
  222. trimmedStage === '设计阶段' ||
  223. trimmedStage === '制作' ||
  224. trimmedStage === '制作阶段' ||
  225. trimmedStage === '完善' ||
  226. trimmedStage === '优化' ||
  227. trimmedStage === '调整';
  228. }
  229. // 🔍 验证项目分配统计
  230. private validateProjectDistribution(projects: Project[]): void {
  231. const orderCount = projects.filter(p => this.isOrderAssignment(p)).length;
  232. const requirementsCount = projects.filter(p => this.isRequirementsConfirmation(p)).length;
  233. const deliveryCount = projects.filter(p => this.isDeliveryExecution(p)).length;
  234. const aftercareCount = projects.filter(p => this.isAftercare(p)).length;
  235. console.log('🔍 [客服端项目分配统计]:');
  236. console.log(` 订单分配: ${orderCount} 个项目`);
  237. console.log(` 确认需求: ${requirementsCount} 个项目`);
  238. console.log(` 交付执行: ${deliveryCount} 个项目`);
  239. console.log(` 售后: ${aftercareCount} 个项目`);
  240. console.log(` 总计: ${projects.length} 个项目`);
  241. // 🎯 与期望值对比
  242. const expected = { order: 3, requirements: 4, delivery: 8, aftercare: 5 };
  243. console.log('🎯 [期望值对比]:');
  244. console.log(` 订单分配: 实际${orderCount} vs 期望${expected.order} ${orderCount === expected.order ? '✅' : '❌'}`);
  245. console.log(` 确认需求: 实际${requirementsCount} vs 期望${expected.requirements} ${requirementsCount === expected.requirements ? '✅' : '❌'}`);
  246. console.log(` 交付执行: 实际${deliveryCount} vs 期望${expected.delivery} ${deliveryCount === expected.delivery ? '✅' : '❌'}`);
  247. console.log(` 售后: 实际${aftercareCount} vs 期望${expected.aftercare} ${aftercareCount === expected.aftercare ? '✅' : '❌'}`);
  248. // 🔍 如果数量不匹配,显示详细信息
  249. if (orderCount !== expected.order) {
  250. console.log('🔍 [订单分配阶段项目详情]:');
  251. projects.filter(p => this.isOrderAssignment(p)).forEach(p => {
  252. console.log(` - "${p.name}": currentStage="${p.currentStage}"`);
  253. });
  254. }
  255. if (deliveryCount !== expected.delivery) {
  256. console.log('🔍 [交付执行阶段项目详情]:');
  257. projects.filter(p => this.isDeliveryExecution(p)).forEach(p => {
  258. console.log(` - "${p.name}": currentStage="${p.currentStage}"`);
  259. });
  260. // 🔍 显示所有项目的原始阶段,帮助识别遗漏的阶段
  261. console.log('🔍 [所有项目的原始阶段]:');
  262. projects.forEach(p => {
  263. const isDelivery = this.isDeliveryExecution(p);
  264. console.log(` - "${p.name}": "${p.currentStage}" ${isDelivery ? '✅交付执行' : ''}`);
  265. });
  266. }
  267. }
  268. ngOnDestroy(): void {
  269. // 清理消息监听器
  270. if (this.messageListener) {
  271. window.removeEventListener('message', this.messageListener);
  272. }
  273. }
  274. // 视图切换
  275. toggleView(mode: 'card' | 'list' | 'dashboard') {
  276. if (this.viewMode() !== mode) {
  277. this.viewMode.set(mode);
  278. localStorage.setItem('cs.viewMode', mode);
  279. }
  280. }
  281. // 初始化用户和公司信息
  282. private async initializeUserAndCompany(): Promise<void> {
  283. try {
  284. // 方法1: 从localStorage获取公司ID(参考team-leader的实现)
  285. const companyId = localStorage.getItem('company');
  286. if (companyId) {
  287. // 创建公司指针对象
  288. const CompanyClass = Parse.Object.extend('Company');
  289. this.company = new CompanyClass();
  290. this.company.id = companyId;
  291. console.log('✅ 从localStorage加载公司ID:', companyId);
  292. } else {
  293. // 方法2: 从Profile获取公司信息
  294. this.currentProfile = await this.profileService.getCurrentProfile();
  295. if (!this.currentProfile) {
  296. throw new Error('无法获取用户信息');
  297. }
  298. // 获取公司信息
  299. this.company = this.currentProfile.get('company');
  300. if (!this.company) {
  301. throw new Error('无法获取公司信息');
  302. }
  303. console.log('✅ 从Profile加载公司信息:', this.company.get('name'));
  304. }
  305. } catch (error) {
  306. console.error('❌ 初始化用户和公司信息失败:', error);
  307. this.loadError.set('加载用户信息失败,请刷新页面重试');
  308. }
  309. }
  310. // 获取公司指针
  311. private getCompanyPointer() {
  312. if (!this.company) {
  313. throw new Error('公司信息未初始化');
  314. }
  315. return {
  316. __type: 'Pointer',
  317. className: 'Company',
  318. objectId: this.company.id
  319. };
  320. }
  321. /**
  322. * 清理重复的Product记录
  323. * 对于同一个项目中相同名称的Product,只保留最早创建的,删除其他重复的
  324. */
  325. private async cleanupDuplicateProducts(): Promise<void> {
  326. if (!this.company) {
  327. console.warn('公司信息未加载,跳过重复清理');
  328. return;
  329. }
  330. try {
  331. console.log('🔍 开始检查重复的Product记录...');
  332. // 查询所有Product
  333. const ProductQuery = new Parse.Query('Product');
  334. ProductQuery.equalTo('company', this.getCompanyPointer());
  335. ProductQuery.notEqualTo('isDeleted', true);
  336. ProductQuery.limit(1000);
  337. const allProducts = await ProductQuery.find();
  338. console.log(`📦 找到 ${allProducts.length} 个Product记录`);
  339. // 按项目分组,然后按产品名称检测重复
  340. const projectMap = new Map<string, Map<string, any[]>>();
  341. for (const product of allProducts) {
  342. const projectId = product.get('project')?.id;
  343. const productName = (product.get('productName') || '').trim().toLowerCase();
  344. if (!projectId || !productName) continue;
  345. if (!projectMap.has(projectId)) {
  346. projectMap.set(projectId, new Map());
  347. }
  348. const productsByName = projectMap.get(projectId)!;
  349. if (!productsByName.has(productName)) {
  350. productsByName.set(productName, []);
  351. }
  352. productsByName.get(productName)!.push(product);
  353. }
  354. // 找出并删除重复的Product
  355. let duplicateCount = 0;
  356. const duplicatesToDelete: any[] = [];
  357. for (const [projectId, productsByName] of projectMap.entries()) {
  358. for (const [productName, products] of productsByName.entries()) {
  359. if (products.length > 1) {
  360. console.log(`⚠️ 项目 ${projectId} 中发现重复空间: "${productName}" (${products.length}个)`);
  361. // 按创建时间排序,保留最早的,删除其他的
  362. products.sort((a, b) => {
  363. const timeA = a.get('createdAt')?.getTime() || 0;
  364. const timeB = b.get('createdAt')?.getTime() || 0;
  365. return timeA - timeB;
  366. });
  367. // 保留第一个,删除其他的
  368. for (let i = 1; i < products.length; i++) {
  369. duplicatesToDelete.push(products[i]);
  370. duplicateCount++;
  371. console.log(` 🗑️ 标记删除: ${products[i].get('productName')} (${products[i].id})`);
  372. }
  373. }
  374. }
  375. }
  376. // 批量删除重复的Product
  377. if (duplicatesToDelete.length > 0) {
  378. console.log(`🗑️ 准备删除 ${duplicatesToDelete.length} 个重复Product...`);
  379. for (const product of duplicatesToDelete) {
  380. try {
  381. product.set('isDeleted', true);
  382. product.set('data', {
  383. ...product.get('data'),
  384. deletedAt: new Date(),
  385. deletedReason: '重复产品,自动清理'
  386. });
  387. await product.save();
  388. console.log(` ✅ 已删除: ${product.get('productName')} (${product.id})`);
  389. } catch (error) {
  390. console.error(` ❌ 删除失败: ${product.id}`, error);
  391. }
  392. }
  393. console.log(`✅ 重复Product清理完成,共删除 ${duplicateCount} 个`);
  394. } else {
  395. console.log('✅ 未发现重复的Product记录');
  396. }
  397. } catch (error) {
  398. console.error('❌ 清理重复Product失败:', error);
  399. // 不阻塞主流程
  400. }
  401. }
  402. // 加载项目列表(从Parse Server)
  403. async loadProjects(): Promise<void> {
  404. if (!this.company) {
  405. console.warn('公司信息未加载,跳过项目加载');
  406. return;
  407. }
  408. this.isLoading.set(true);
  409. this.loadError.set(null);
  410. try {
  411. const ProjectQuery = new Parse.Query('Project');
  412. ProjectQuery.equalTo('company', this.getCompanyPointer());
  413. // 不强制要求isDeleted字段,兼容没有该字段的数据
  414. ProjectQuery.notEqualTo('isDeleted', true);
  415. ProjectQuery.include('contact', 'assignee', 'owner');
  416. ProjectQuery.descending('updatedAt');
  417. ProjectQuery.limit(500); // 获取最多500个项目
  418. const projectObjects = await ProjectQuery.find();
  419. console.log(`✅ 从Parse Server加载了 ${projectObjects.length} 个项目`);
  420. // 🔍 调试:检查前5个项目的阶段数据
  421. if (projectObjects.length > 0) {
  422. console.log('🔍 [客服端调试] 检查前5个项目的阶段数据:');
  423. for (let i = 0; i < Math.min(5, projectObjects.length); i++) {
  424. const proj = projectObjects[i];
  425. const title = proj.get('title') || '未命名项目';
  426. const currentStage = proj.get('currentStage');
  427. const stage = proj.get('stage');
  428. const status = proj.get('status');
  429. console.log(` 项目${i + 1}: "${title}"`);
  430. console.log(` - currentStage: ${currentStage}`);
  431. console.log(` - stage: ${stage}`);
  432. console.log(` - status: ${status}`);
  433. console.log(` - 最终使用阶段: ${currentStage || stage || '订单分配'}`);
  434. console.log(' ---');
  435. }
  436. }
  437. // 如果没有数据,打印调试信息
  438. if (projectObjects.length === 0) {
  439. console.warn('⚠️ 未找到项目数据,请检查:');
  440. console.warn('1. Parse Server中是否有Project数据');
  441. console.warn('2. 当前公司ID:', this.company.id);
  442. console.warn('3. 数据是否正确关联到当前公司');
  443. }
  444. // 转换为Project接口格式(并从Product表同步最新阶段)
  445. const projects: Project[] = await Promise.all(projectObjects.map(async (obj: FmodeObject) => {
  446. const contact = obj.get('contact');
  447. const assignee = obj.get('assignee');
  448. // 🔄 直接从Project表读取阶段(与组长端保持严格一致)
  449. let rawStage = obj.get('currentStage') || obj.get('stage') || '订单分配';
  450. console.log(`📊 项目 ${obj.get('title')} 原始阶段数据: currentStage=${obj.get('currentStage')}, stage=${obj.get('stage')}`);
  451. // 🔥 关键修复:统一交付执行子阶段的显示
  452. let finalStage = rawStage;
  453. // 🎯 将交付执行的所有子阶段统一显示为"交付执行"
  454. const tempProject = { currentStage: rawStage, status: obj.get('status') };
  455. if (this.isDeliveryExecutionStage(rawStage)) {
  456. finalStage = '交付执行';
  457. console.log(`🔄 统一阶段显示: "${obj.get('title')}" 从 "${rawStage}" → "交付执行"`);
  458. }
  459. // 🔄 根据阶段自动判断状态(与组长端、管理端保持一致)
  460. const projectStatus = obj.get('status');
  461. const autoStatus = getProjectStatusByStage(rawStage, projectStatus);
  462. console.log(`📊 客服项目 "${obj.get('title')}": 原始阶段=${rawStage}, 最终阶段=${finalStage}, 原状态=${projectStatus}, 自动状态=${autoStatus}`);
  463. // 确保updatedAt是Date对象
  464. const updatedAt = obj.get('updatedAt');
  465. const createdAt = obj.get('createdAt');
  466. return {
  467. id: obj.id,
  468. name: obj.get('title') || '未命名项目',
  469. customerName: contact?.get('name') || '未知客户',
  470. customerId: contact?.id || '',
  471. status: autoStatus as ProjectStatus, // 使用根据阶段自动判断的状态
  472. currentStage: finalStage as ProjectStage,
  473. stage: finalStage as ProjectStage, // stage和currentStage保持一致
  474. assigneeId: assignee?.id || '',
  475. assigneeName: assignee?.get('name') || '未分配',
  476. deadline: obj.get('deadline') || new Date(Date.now() + 30 * 24 * 60 * 60 * 1000),
  477. createdAt: createdAt instanceof Date ? createdAt : (createdAt ? new Date(createdAt) : new Date()),
  478. updatedAt: updatedAt instanceof Date ? updatedAt : (updatedAt ? new Date(updatedAt) : new Date()),
  479. description: obj.get('description') || '',
  480. priority: obj.get('priority') || 'medium',
  481. customerTags: [],
  482. highPriorityNeeds: [],
  483. skillsRequired: [],
  484. contact: contact
  485. };
  486. }));
  487. this.allProjects.set(projects);
  488. this.baseProjects = projects;
  489. this.processProjects(projects);
  490. // 🔍 验证项目分配统计
  491. this.validateProjectDistribution(projects);
  492. console.log('项目数据处理完成');
  493. } catch (error) {
  494. console.error('加载项目列表失败:', error);
  495. this.loadError.set('加载项目列表失败,请刷新页面重试');
  496. this.projects.set([]);
  497. } finally {
  498. this.isLoading.set(false);
  499. }
  500. }
  501. // 映射Parse Server状态到前端状态
  502. private mapStatus(parseStatus: string): ProjectStatus {
  503. const statusMap: Record<string, ProjectStatus> = {
  504. '进行中': '进行中',
  505. '已完成': '已完成',
  506. '已暂停': '已暂停',
  507. '已延期': '已延期'
  508. };
  509. return statusMap[parseStatus] || '进行中';
  510. }
  511. // 映射Parse Server阶段到前端阶段
  512. private mapStage(parseStage: string): ProjectStage {
  513. // 直接返回Parse Server的阶段,不做转换
  514. // Parse Server的currentStage字段包含:订单分配、需求沟通、建模、软装、渲染、后期、尾款结算、投诉处理等
  515. if (!parseStage) {
  516. return '需求沟通'; // 默认阶段
  517. }
  518. return parseStage as ProjectStage;
  519. }
  520. // 处理项目数据,添加计算属性
  521. processProjects(projects: Project[]): void {
  522. const processedProjects = projects.map(project => {
  523. // 计算项目进度(模拟)
  524. const progress = this.calculateProjectProgress(project);
  525. // 计算距离截止日期的天数
  526. const daysUntilDeadline = this.calculateDaysUntilDeadline(project.deadline);
  527. // 判断是否紧急(截止日期前3天或已逾期)
  528. const isUrgent = daysUntilDeadline <= 3 && project.status === '进行中';
  529. // 生成标签显示文本
  530. const tagDisplayText = this.generateTagDisplayText(project);
  531. return {
  532. ...project,
  533. progress,
  534. daysUntilDeadline,
  535. isUrgent,
  536. tagDisplayText
  537. };
  538. });
  539. this.projects.set(this.applyFiltersAndSorting(processedProjects));
  540. }
  541. // 应用筛选和排序
  542. applyFiltersAndSorting(projects: ProjectListItem[]): ProjectListItem[] {
  543. let filteredProjects = [...projects];
  544. // 搜索筛选
  545. if (this.searchTerm().trim()) {
  546. const searchLower = this.searchTerm().toLowerCase().trim();
  547. filteredProjects = filteredProjects.filter(project =>
  548. project.name.toLowerCase().includes(searchLower) ||
  549. project.customerName.toLowerCase().includes(searchLower)
  550. );
  551. }
  552. // 状态筛选(按看板列映射)
  553. if (this.statusFilter() !== 'all') {
  554. const col = this.statusFilter() as 'order' | 'requirements' | 'delivery' | 'aftercare';
  555. filteredProjects = filteredProjects.filter(project =>
  556. this.getColumnIdForProject(project) === col
  557. );
  558. }
  559. // 阶段筛选
  560. if (this.stageFilter() !== 'all') {
  561. filteredProjects = filteredProjects.filter(project =>
  562. project.currentStage === this.stageFilter()
  563. );
  564. }
  565. // 排序
  566. filteredProjects.sort((a, b) => {
  567. switch (this.sortBy()) {
  568. case 'deadline':
  569. return new Date(a.deadline).getTime() - new Date(b.deadline).getTime();
  570. case 'createdAt':
  571. return new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime();
  572. case 'name':
  573. return a.name.localeCompare(b.name);
  574. default:
  575. return 0;
  576. }
  577. });
  578. return filteredProjects;
  579. }
  580. // 生成标签显示文本
  581. generateTagDisplayText(project: Project): string {
  582. if (!project.customerTags || project.customerTags.length === 0) {
  583. return '普通项目';
  584. }
  585. const tag = project.customerTags[0];
  586. return `${tag.preference}${tag.needType}`;
  587. }
  588. // 计算项目进度(模拟)
  589. calculateProjectProgress(project: Project): number {
  590. if (project.status === '已完成') return 100;
  591. if (project.status === '已暂停' || project.status === '已延期') return 0;
  592. // 基于当前阶段计算进度(包含四大核心阶段和细分阶段)
  593. const stageProgress: Record<ProjectStage, number> = {
  594. // 四大核心阶段
  595. '订单分配': 0,
  596. '确认需求': 25,
  597. '交付执行': 60,
  598. '售后归档': 95,
  599. // 细分阶段(向后兼容)
  600. '需求沟通': 20,
  601. '方案确认': 30,
  602. '建模': 40,
  603. '软装': 50,
  604. '渲染': 70,
  605. '后期': 85,
  606. '尾款结算': 90,
  607. '客户评价': 100,
  608. '投诉处理': 100
  609. };
  610. return stageProgress[project.currentStage] || 0;
  611. }
  612. // 计算距离截止日期的天数
  613. calculateDaysUntilDeadline(deadline: Date): number {
  614. const now = new Date();
  615. const deadlineDate = new Date(deadline);
  616. const diffTime = deadlineDate.getTime() - now.getTime();
  617. return Math.ceil(diffTime / (1000 * 60 * 60 * 24));
  618. }
  619. // 列表/筛选交互(保留已有实现)
  620. onSearch(): void {
  621. // 搜索后重算
  622. this.processProjects(this.baseProjects);
  623. }
  624. onStatusChange(event: Event): void {
  625. const value = (event.target as HTMLSelectElement).value;
  626. this.statusFilter.set(value);
  627. this.processProjects(this.baseProjects);
  628. }
  629. onStageChange(event: Event): void {
  630. const value = (event.target as HTMLSelectElement).value;
  631. this.stageFilter.set(value);
  632. this.processProjects(this.baseProjects);
  633. }
  634. onSortChange(event: Event): void {
  635. const value = (event.target as HTMLSelectElement).value;
  636. this.sortBy.set(value);
  637. this.processProjects(this.baseProjects);
  638. }
  639. goToPage(page: number): void {
  640. if (page >= 1 && page <= this.totalPages()) {
  641. this.currentPage.set(page);
  642. }
  643. }
  644. prevPage(): void {
  645. if (this.currentPage() > 1) {
  646. this.currentPage.update(v => v - 1);
  647. }
  648. }
  649. nextPage(): void {
  650. if (this.currentPage() < this.totalPages()) {
  651. this.currentPage.update(v => v + 1);
  652. }
  653. }
  654. pageNumbers = computed(() => {
  655. const total = this.totalPages();
  656. const pages: number[] = [];
  657. const maxToShow = Math.min(total, 5);
  658. for (let i = 1; i <= maxToShow; i++) pages.push(i);
  659. return pages;
  660. });
  661. getAbsValue(value: number): number {
  662. return Math.abs(value);
  663. }
  664. formatDate(date: Date): string {
  665. const d = new Date(date);
  666. const y = d.getFullYear();
  667. const m = String(d.getMonth() + 1).padStart(2, '0');
  668. const day = String(d.getDate()).padStart(2, '0');
  669. return `${y}-${m}-${day}`;
  670. }
  671. getStatusClass(status: string): string {
  672. switch (status) {
  673. case '进行中': return 'status-in-progress';
  674. case '已完成': return 'status-completed';
  675. case '已暂停': return 'status-paused';
  676. case '已延期': return 'status-overdue';
  677. default: return '';
  678. }
  679. }
  680. getStageClass(stage: string): string {
  681. switch (stage) {
  682. case '需求沟通': return 'stage-communication';
  683. case '建模': return 'stage-modeling';
  684. case '软装': return 'stage-decoration';
  685. case '渲染': return 'stage-rendering';
  686. case '投诉处理': return 'stage-completed';
  687. case '订单分配': return 'stage-active';
  688. case '方案确认': return 'stage-active';
  689. case '尾款结算': return 'stage-completed';
  690. case '客户评价': return 'stage-completed';
  691. default: return '';
  692. }
  693. }
  694. // 看板分组逻辑 - 按照订单分配、确认需求、交付执行、售后四个阶段
  695. // 🔥 修复:直接使用原始阶段名称进行匹配(与组长端完全一致)
  696. private isOrderAssignment(p: Project): boolean {
  697. const stage = (p.currentStage as string)?.trim();
  698. if (!stage) return false;
  699. const lowerStage = stage.toLowerCase();
  700. return stage === '订单分配' ||
  701. lowerStage === 'order' ||
  702. stage === '待分配' ||
  703. stage === '待审批';
  704. }
  705. private isRequirementsConfirmation(p: Project): boolean {
  706. const stage = (p.currentStage as string)?.trim();
  707. if (!stage) return false;
  708. const lowerStage = stage.toLowerCase();
  709. return stage === '确认需求' ||
  710. lowerStage === 'requirements' ||
  711. stage === '需求沟通' ||
  712. stage === '需求确认' ||
  713. stage === '方案规划' ||
  714. stage === '方案确认' ||
  715. stage === '方案深化';
  716. }
  717. private isDeliveryExecution(p: Project): boolean {
  718. const stage = (p.currentStage as string)?.trim();
  719. if (!stage) return false;
  720. const lowerStage = stage.toLowerCase();
  721. // 🔥 扩展交付执行阶段的识别范围,包含所有子阶段
  722. return stage === '交付执行' ||
  723. lowerStage === 'delivery' ||
  724. // 建模相关
  725. stage === '建模' ||
  726. stage === '建模阶段' ||
  727. stage === '白模' ||
  728. stage === '白膜' ||
  729. lowerStage === 'modeling' ||
  730. // 软装相关
  731. stage === '软装' ||
  732. stage === '软装阶段' ||
  733. lowerStage === 'soft_decor' ||
  734. lowerStage === 'decoration' ||
  735. // 渲染相关
  736. stage === '渲染' ||
  737. stage === '渲染阶段' ||
  738. lowerStage === 'rendering' ||
  739. // 后期相关
  740. stage === '后期制作' ||
  741. stage === '后期处理' ||
  742. stage === '后期' ||
  743. lowerStage === 'postproduction' ||
  744. // 评审修改相关
  745. stage === '评审' ||
  746. stage === '方案评审' ||
  747. stage === '修改' ||
  748. stage === '方案修改' ||
  749. stage === '修订' ||
  750. lowerStage === 'review' ||
  751. lowerStage === 'revision' ||
  752. // 其他可能的交付执行子阶段
  753. stage === '设计' ||
  754. stage === '设计阶段' ||
  755. stage === '制作' ||
  756. stage === '制作阶段' ||
  757. stage === '完善' ||
  758. stage === '优化' ||
  759. stage === '调整';
  760. }
  761. private isAftercare(p: Project): boolean {
  762. const stage = (p.currentStage as string)?.trim();
  763. if (!stage) return false;
  764. const lowerStage = stage.toLowerCase();
  765. return stage === '售后归档' ||
  766. lowerStage === 'aftercare' ||
  767. stage === '售后' ||
  768. stage === '归档' ||
  769. stage === '尾款结算' ||
  770. stage === '客户评价' ||
  771. stage === '投诉处理' ||
  772. stage === '已归档' ||
  773. p.status === '已完成';
  774. }
  775. getProjectsByColumn(columnId: 'order' | 'requirements' | 'delivery' | 'aftercare'): ProjectListItem[] {
  776. const list = this.projects();
  777. let result: ProjectListItem[] = [];
  778. switch (columnId) {
  779. case 'order':
  780. result = list.filter(p => this.isOrderAssignment(p));
  781. break;
  782. case 'requirements':
  783. result = list.filter(p => this.isRequirementsConfirmation(p));
  784. break;
  785. case 'delivery':
  786. result = list.filter(p => this.isDeliveryExecution(p));
  787. break;
  788. case 'aftercare':
  789. result = list.filter(p => this.isAftercare(p));
  790. break;
  791. default:
  792. result = [];
  793. }
  794. // 🔍 调试日志
  795. console.log(`🔍 [getProjectsByColumn] ${columnId}: ${result.length} 个项目`);
  796. if (result.length > 0) {
  797. result.forEach(p => {
  798. console.log(` - "${p.name}": currentStage="${p.currentStage}"`);
  799. });
  800. }
  801. return result;
  802. }
  803. // 新增:根据项目状态与阶段推断所在看板列
  804. getColumnIdForProject(project: ProjectListItem): 'order' | 'requirements' | 'delivery' | 'aftercare' {
  805. if (this.isOrderAssignment(project)) return 'order';
  806. if (this.isRequirementsConfirmation(project)) return 'requirements';
  807. if (this.isDeliveryExecution(project)) return 'delivery';
  808. if (this.isAftercare(project)) return 'aftercare';
  809. return 'requirements'; // 默认为确认需求阶段
  810. }
  811. // 详情跳转到wxwork项目详情页面(与组长、管理员保持一致)
  812. navigateToProject(project: ProjectListItem) {
  813. // 获取公司ID
  814. const cid = localStorage.getItem('company') || '';
  815. if (!cid) {
  816. console.error('未找到公司ID,无法跳转到项目详情页');
  817. return;
  818. }
  819. // ✅ 根据项目实际阶段决定路由(不使用columnId)
  820. // wxwork路由支持的阶段:order, requirements, delivery, aftercare, issues
  821. const stageRouteMap: Record<string, string> = {
  822. '订单分配': 'order',
  823. '确认需求': 'requirements',
  824. '方案确认': 'requirements',
  825. '方案深化': 'requirements',
  826. '交付执行': 'delivery',
  827. '建模': 'delivery',
  828. '软装': 'delivery',
  829. '渲染': 'delivery',
  830. '后期': 'delivery',
  831. '白模': 'delivery',
  832. '白膜': 'delivery',
  833. '售后归档': 'aftercare',
  834. '售后': 'aftercare',
  835. '尾款结算': 'aftercare',
  836. '客户评价': 'aftercare',
  837. '投诉处理': 'aftercare'
  838. };
  839. const currentStage = project.currentStage || '订单分配';
  840. const stagePath = stageRouteMap[currentStage] || 'order';
  841. console.log(`🎯 [客服端跳转] 项目"${project.name}"`, {
  842. currentStage,
  843. stagePath,
  844. projectId: project.id
  845. });
  846. // ✅ 标记从客服板块进入(用于控制"确认订单"按钮权限)
  847. try {
  848. localStorage.setItem('enterFromCustomerService', '1');
  849. localStorage.setItem('customerServiceMode', 'true');
  850. console.log('✅ 已标记从客服板块进入,允许确认订单');
  851. } catch (e) {
  852. console.warn('无法设置 localStorage 标记:', e);
  853. }
  854. // 跳转到wxwork路由的项目详情页(纯净页面,无管理端侧边栏)
  855. // 路由格式:/wxwork/:cid/project/:projectId/:stage
  856. this.router.navigate(['/wxwork', cid, 'project', project.id, stagePath]);
  857. }
  858. // 新增:直接进入沟通管理(消息)标签
  859. navigateToMessages(project: ProjectListItem) {
  860. this.router.navigate(['/customer-service/messages'], { queryParams: { projectId: project.id } });
  861. }
  862. // ==================== 🆕 看板事件处理方法 ====================
  863. /**
  864. * 查看项目详情
  865. */
  866. handleViewProject(event: {projectId: string, phaseId: string}): void {
  867. const cid = localStorage.getItem('company') || '';
  868. this.router.navigate(['/wxwork', cid, 'project', event.projectId]);
  869. }
  870. /**
  871. * 智能匹配(客服端不需要此功能)
  872. */
  873. handleSmartMatch(project: TeamLeaderProject): void {
  874. console.log('客服端不支持智能匹配功能');
  875. }
  876. /**
  877. * 分配项目(客服端不需要此功能)
  878. */
  879. handleAssignProject(projectId: string): void {
  880. console.log('客服端不支持分配项目功能');
  881. }
  882. /**
  883. * 评审项目(客服端不需要此功能)
  884. */
  885. handleReviewProject(event: {projectId: string, rating: string}): void {
  886. console.log('客服端不支持评审项目功能');
  887. }
  888. /**
  889. * 标记停滞(客服端不需要此功能)
  890. */
  891. handleMarkStalled(project: TeamLeaderProject): void {
  892. console.log('客服端不支持标记停滞功能');
  893. }
  894. /**
  895. * 标记改图(客服端不需要此功能)
  896. */
  897. handleMarkModification(project: TeamLeaderProject): void {
  898. console.log('客服端不支持标记改图功能');
  899. }
  900. /**
  901. * 取消停滞(客服端不需要此功能)
  902. */
  903. handleCancelStalled(project: TeamLeaderProject): void {
  904. console.log('客服端不支持取消停滞功能');
  905. }
  906. /**
  907. * 取消改图(客服端不需要此功能)
  908. */
  909. handleCancelModification(project: TeamLeaderProject): void {
  910. console.log('客服端不支持取消改图功能');
  911. }
  912. // 导航到创建订单页面
  913. navigateToCreateOrder() {
  914. // 打开咨询订单弹窗
  915. const dialogRef = this.dialog.open(ConsultationOrderDialogComponent, {
  916. width: '900px',
  917. maxWidth: '95vw',
  918. maxHeight: '90vh',
  919. panelClass: 'consultation-order-dialog'
  920. });
  921. // 监听订单分配成功事件
  922. dialogRef.componentInstance.orderCreated.subscribe((orderData: any) => {
  923. // 关闭弹窗
  924. dialogRef.close();
  925. // 准备同步数据
  926. const syncData = {
  927. customerInfo: orderData.customerInfo,
  928. requirementInfo: orderData.requirementInfo,
  929. preferenceTags: orderData.preferenceTags,
  930. assignedDesigner: orderData.assignedDesigner
  931. };
  932. // 跳转到新创建的项目详情页面,传递同步数据
  933. this.router.navigate([
  934. '/designer/project-detail',
  935. orderData.orderId
  936. ], {
  937. queryParams: {
  938. role: 'customer-service',
  939. activeTab: 'overview',
  940. syncData: JSON.stringify(syncData)
  941. }
  942. });
  943. });
  944. }
  945. }