order-approval-panel.component.ts 8.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320
  1. import { Component, Input, Output, EventEmitter, OnInit } from '@angular/core';
  2. import { CommonModule } from '@angular/common';
  3. import { FormsModule } from '@angular/forms';
  4. import { DesignerTeamAssignmentModalComponent } from '../../../pages/designer/project-detail/components/designer-team-assignment-modal/designer-team-assignment-modal.component';
  5. import type { DesignerAssignmentResult } from '../../../pages/designer/project-detail/components/designer-team-assignment-modal/designer-team-assignment-modal.component';
  6. interface ApprovalData {
  7. projectId: string;
  8. projectName: string;
  9. quotationTotal: number;
  10. assignedTeams: TeamInfo[];
  11. projectInfo: {
  12. title: string;
  13. projectType: string;
  14. demoday: Date;
  15. deadline?: Date;
  16. };
  17. submitter: {
  18. id: string;
  19. name: string;
  20. role: string;
  21. };
  22. submitTime: Date;
  23. }
  24. interface TeamInfo {
  25. id: string;
  26. name: string;
  27. spaces: string[];
  28. }
  29. @Component({
  30. selector: 'app-order-approval-panel',
  31. standalone: true,
  32. imports: [CommonModule, FormsModule, DesignerTeamAssignmentModalComponent],
  33. templateUrl: './order-approval-panel.component.html',
  34. styleUrls: ['./order-approval-panel.component.scss']
  35. })
  36. export class OrderApprovalPanelComponent implements OnInit {
  37. @Input() project: any; // Parse Project 对象
  38. @Input() currentUser: any; // 当前组长用户
  39. @Output() approvalCompleted = new EventEmitter<{
  40. action: 'approved' | 'rejected';
  41. reason?: string;
  42. comment?: string;
  43. }>();
  44. approvalData: ApprovalData | null = null;
  45. showRejectModal = false;
  46. rejectReason = '';
  47. approvalComment = '';
  48. isSubmitting = false;
  49. // 驳回原因快捷选项
  50. rejectReasons = [
  51. '报价不合理,需要调整',
  52. '设计师分配不当',
  53. '项目信息不完整',
  54. '需要补充项目资料',
  55. '其他原因(请在下方说明)'
  56. ];
  57. selectedRejectReason = '';
  58. // 编辑设计师分配相关
  59. isEditingTeams = false;
  60. editedTeams: TeamInfo[] = [];
  61. availableDesigners: any[] = [];
  62. // 设计师分配弹窗
  63. showDesignerModal = false;
  64. ngOnInit() {
  65. this.loadApprovalData();
  66. }
  67. /**
  68. * 加载审批数据
  69. */
  70. private loadApprovalData() {
  71. if (!this.project) return;
  72. const data = this.project.get('data') || {};
  73. const approvalHistory = data.approvalHistory || [];
  74. const latestRecord = approvalHistory[approvalHistory.length - 1];
  75. this.approvalData = {
  76. projectId: this.project.id,
  77. projectName: this.project.get('title'),
  78. quotationTotal: latestRecord?.quotationTotal || 0,
  79. assignedTeams: latestRecord?.teams || [],
  80. projectInfo: {
  81. title: this.project.get('title'),
  82. projectType: this.project.get('projectType'),
  83. demoday: this.project.get('demoday'),
  84. deadline: this.project.get('deadline')
  85. },
  86. submitter: latestRecord?.submitter || { id: '', name: '未知', role: '未知' },
  87. submitTime: latestRecord?.submitTime || new Date()
  88. };
  89. }
  90. /**
  91. * 通过审批
  92. */
  93. async approveOrder() {
  94. if (this.isSubmitting) return;
  95. const confirmed = confirm('确认通过此订单审批吗?');
  96. if (!confirmed) return;
  97. this.isSubmitting = true;
  98. try {
  99. this.approvalCompleted.emit({
  100. action: 'approved',
  101. comment: this.approvalComment || undefined
  102. });
  103. } finally {
  104. this.isSubmitting = false;
  105. }
  106. }
  107. /**
  108. * 打开驳回弹窗
  109. */
  110. openRejectModal() {
  111. this.showRejectModal = true;
  112. this.rejectReason = '';
  113. this.selectedRejectReason = '';
  114. this.approvalComment = '';
  115. }
  116. /**
  117. * 关闭驳回弹窗
  118. */
  119. closeRejectModal() {
  120. this.showRejectModal = false;
  121. }
  122. /**
  123. * 选择驳回原因
  124. */
  125. selectRejectReason(reason: string) {
  126. this.selectedRejectReason = reason;
  127. if (reason !== '其他原因(请在下方说明)') {
  128. this.rejectReason = reason;
  129. } else {
  130. this.rejectReason = '';
  131. }
  132. }
  133. /**
  134. * 提交驳回
  135. */
  136. async submitRejection() {
  137. const finalReason = this.selectedRejectReason === '其他原因(请在下方说明)'
  138. ? this.rejectReason
  139. : this.selectedRejectReason;
  140. if (!finalReason || !finalReason.trim()) {
  141. alert('请填写驳回原因');
  142. return;
  143. }
  144. if (this.isSubmitting) return;
  145. this.isSubmitting = true;
  146. try {
  147. this.approvalCompleted.emit({
  148. action: 'rejected',
  149. reason: finalReason,
  150. comment: this.approvalComment || undefined
  151. });
  152. this.closeRejectModal();
  153. } finally {
  154. this.isSubmitting = false;
  155. }
  156. }
  157. /**
  158. * 格式化金额
  159. */
  160. formatCurrency(amount: number): string {
  161. return `¥${amount.toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
  162. }
  163. /**
  164. * 开启编辑设计师分配模式
  165. */
  166. startEditTeams() {
  167. this.isEditingTeams = true;
  168. // 深拷贝当前团队数据,避免直接修改原数据
  169. this.editedTeams = JSON.parse(JSON.stringify(this.approvalData?.assignedTeams || []));
  170. // 加载可用设计师列表(这里需要从数据库加载)
  171. this.loadAvailableDesigners();
  172. }
  173. /**
  174. * 取消编辑设计师分配
  175. */
  176. cancelEditTeams() {
  177. this.isEditingTeams = false;
  178. this.editedTeams = [];
  179. }
  180. /**
  181. * 保存设计师分配修改
  182. */
  183. saveTeamsEdit() {
  184. if (!this.approvalData) return;
  185. // 更新审批数据中的团队信息
  186. this.approvalData.assignedTeams = JSON.parse(JSON.stringify(this.editedTeams));
  187. // 更新项目数据
  188. const data = this.project.get('data') || {};
  189. const approvalHistory = data.approvalHistory || [];
  190. const latestRecord = approvalHistory[approvalHistory.length - 1];
  191. if (latestRecord) {
  192. latestRecord.teams = this.editedTeams;
  193. this.project.set('data', data);
  194. }
  195. this.isEditingTeams = false;
  196. alert('设计师分配已更新');
  197. }
  198. /**
  199. * 加载可用设计师列表
  200. */
  201. private async loadAvailableDesigners() {
  202. // TODO: 从数据库加载设计师列表
  203. // 这里暂时使用模拟数据
  204. this.availableDesigners = [
  205. { id: '1', name: '张三', avatar: '' },
  206. { id: '2', name: '李四', avatar: '' },
  207. { id: '3', name: '王五', avatar: '' }
  208. ];
  209. }
  210. /**
  211. * 移除团队成员
  212. */
  213. removeTeam(index: number) {
  214. this.editedTeams.splice(index, 1);
  215. }
  216. /**
  217. * 添加团队成员(打开设计师选择弹窗)
  218. */
  219. addTeamMember() {
  220. this.showDesignerModal = true;
  221. }
  222. /**
  223. * 关闭设计师选择弹窗
  224. */
  225. closeDesignerModal() {
  226. this.showDesignerModal = false;
  227. }
  228. /**
  229. * 处理设计师选择结果
  230. */
  231. handleDesignerAssignment(result: DesignerAssignmentResult) {
  232. console.log('设计师分配结果:', result);
  233. // 将选择的设计师添加到编辑列表中
  234. if (result.selectedDesigners && result.selectedDesigners.length > 0) {
  235. result.selectedDesigners.forEach(designer => {
  236. // 查找该设计师的空间分配
  237. const spaceAssignment = result.spaceAssignments?.find(
  238. sa => sa.designerId === designer.id
  239. );
  240. // 获取空间名称列表(直接使用spaceIds,它们通常已经是名称或可读ID)
  241. let spaces: string[] = [];
  242. if (spaceAssignment && spaceAssignment.spaceIds && spaceAssignment.spaceIds.length > 0) {
  243. spaces = spaceAssignment.spaceIds;
  244. }
  245. // 检查是否已存在该设计师(避免重复添加)
  246. const existingIndex = this.editedTeams.findIndex(t => t.id === designer.id);
  247. if (existingIndex >= 0) {
  248. // 更新现有设计师的空间
  249. this.editedTeams[existingIndex].spaces = spaces;
  250. alert(`已更新 ${designer.name} 的空间分配`);
  251. } else {
  252. // 添加新设计师
  253. this.editedTeams.push({
  254. id: designer.id,
  255. name: designer.name,
  256. spaces: spaces
  257. });
  258. alert(`已添加设计师:${designer.name}${spaces.length > 0 ? '\n负责空间:' + spaces.join(', ') : ''}`);
  259. }
  260. });
  261. }
  262. this.closeDesignerModal();
  263. }
  264. /**
  265. * 编辑团队空间
  266. */
  267. editTeamSpaces(team: TeamInfo) {
  268. const currentSpaces = team.spaces.join(', ');
  269. const spacesInput = prompt('请输入负责的空间(用逗号分隔):', currentSpaces);
  270. if (spacesInput !== null) {
  271. team.spaces = spacesInput.split(',').map(s => s.trim()).filter(s => s);
  272. }
  273. }
  274. }