|
|
@@ -0,0 +1,1638 @@
|
|
|
+# 组长端订单审批功能实施方案
|
|
|
+
|
|
|
+## 📅 创建日期
|
|
|
+2025-10-28
|
|
|
+
|
|
|
+## 🎯 功能目标
|
|
|
+实现组长端对客服提交的订单分配进行审批的完整流程，包括审批入口、审批操作、状态流转和历史记录。
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+## 一、业务流程梳理
|
|
|
+
|
|
|
+### 1.1 完整流程
|
|
|
+```
|
|
|
+客服端提交订单分配
|
|
|
+ ↓
|
|
|
+项目进入"待组长确认"状态 (currentStage: '订单分配', 附带 pendingApproval 标记)
|
|
|
+ ↓
|
|
|
+组长在工作台看到待审批项目
|
|
|
+ ↓
|
|
|
+组长点击进入项目详情页
|
|
|
+ ↓
|
|
|
+组长审核订单内容（报价、设计师分配、项目信息）
|
|
|
+ ↓
|
|
|
+组长做出决策：
|
|
|
+ - 通过审批 → 项目进入"确认需求"阶段
|
|
|
+ - 驳回审批 → 项目退回"订单分配"阶段，客服端显示驳回原因
|
|
|
+ ↓
|
|
|
+记录审批历史
|
|
|
+ ↓
|
|
|
+发送通知（可选）
|
|
|
+```
|
|
|
+
|
|
|
+### 1.2 关键状态定义
|
|
|
+
|
|
|
+#### Project 数据结构扩展
|
|
|
+```typescript
|
|
|
+Project {
|
|
|
+ currentStage: string, // '订单分配' | '确认需求' | '方案确认' | ...
|
|
|
+ status: string, // '待分配' | '进行中' | '已完成' | ...
|
|
|
+ data: {
|
|
|
+ // 新增审批相关字段
|
|
|
+ approvalStatus?: 'pending' | 'approved' | 'rejected', // 当前审批状态
|
|
|
+ approvalHistory: ApprovalRecord[], // 审批历史记录
|
|
|
+ pendingApprovalBy?: string, // 待审批人角色 'team-leader'
|
|
|
+ lastRejectionReason?: string // 最近一次驳回原因
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 审批记录接口
|
|
|
+interface ApprovalRecord {
|
|
|
+ stage: string; // 审批阶段：'订单分配'
|
|
|
+ submitter: { // 提交人信息
|
|
|
+ id: string;
|
|
|
+ name: string;
|
|
|
+ role: string;
|
|
|
+ };
|
|
|
+ submitTime: Date; // 提交时间
|
|
|
+ status: 'pending' | 'approved' | 'rejected'; // 审批状态
|
|
|
+ approver?: { // 审批人信息（通过/驳回后填写）
|
|
|
+ id: string;
|
|
|
+ name: string;
|
|
|
+ role: string;
|
|
|
+ };
|
|
|
+ approvalTime?: Date; // 审批时间
|
|
|
+ reason?: string; // 驳回原因
|
|
|
+ comment?: string; // 审批备注
|
|
|
+ quotationTotal: number; // 报价总额快照
|
|
|
+ teams: TeamSnapshot[]; // 团队分配快照
|
|
|
+}
|
|
|
+
|
|
|
+interface TeamSnapshot {
|
|
|
+ id: string;
|
|
|
+ name: string;
|
|
|
+ spaces: string[]; // 分配的空间
|
|
|
+}
|
|
|
+```
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+## 二、前端实现方案
|
|
|
+
|
|
|
+### 2.1 组长工作台增强（dashboard.ts）
|
|
|
+
|
|
|
+#### 2.1.1 待审批项目标识优化
|
|
|
+当前已有 `pendingApprovalProjects` 计算属性，需要调整筛选逻辑：
|
|
|
+
|
|
|
+```typescript
|
|
|
+// 位置：src/app/pages/team-leader/dashboard/dashboard.ts
|
|
|
+
|
|
|
+// 修改现有的 getter
|
|
|
+get pendingApprovalProjects(): Project[] {
|
|
|
+ return this.projects.filter(p => {
|
|
|
+ const stage = (p.currentStage || '').trim();
|
|
|
+ const approvalStatus = p.data?.approvalStatus;
|
|
|
+
|
|
|
+ // 1. 阶段为"订单分配"且审批状态为 pending
|
|
|
+ // 2. 或者阶段为"待确认"/"待审批"
|
|
|
+ return (stage === '订单分配' && approvalStatus === 'pending') ||
|
|
|
+ stage === '待审批' ||
|
|
|
+ stage === '待确认';
|
|
|
+ });
|
|
|
+}
|
|
|
+```
|
|
|
+
|
|
|
+#### 2.1.2 待审批项目卡片视觉增强
|
|
|
+在项目卡片上添加醒目的"待审批"标识：
|
|
|
+
|
|
|
+```html
|
|
|
+<!-- 位置：src/app/pages/team-leader/dashboard/dashboard.html -->
|
|
|
+
|
|
|
+<div class="project-card"
|
|
|
+ [class.pending-approval]="isPendingApproval(project)">
|
|
|
+
|
|
|
+ <!-- 添加审批徽章 -->
|
|
|
+ @if (isPendingApproval(project)) {
|
|
|
+ <div class="approval-badge">
|
|
|
+ <span class="badge-icon">📋</span>
|
|
|
+ <span class="badge-text">待审批</span>
|
|
|
+ </div>
|
|
|
+ }
|
|
|
+
|
|
|
+ <!-- 原有项目卡片内容 -->
|
|
|
+ <div class="project-card-header">
|
|
|
+ <h4>{{ project.name }}</h4>
|
|
|
+ <!-- ... -->
|
|
|
+ </div>
|
|
|
+</div>
|
|
|
+```
|
|
|
+
|
|
|
+```typescript
|
|
|
+// dashboard.ts 中添加辅助方法
|
|
|
+isPendingApproval(project: Project): boolean {
|
|
|
+ return project.currentStage === '订单分配' &&
|
|
|
+ project.data?.approvalStatus === 'pending';
|
|
|
+}
|
|
|
+```
|
|
|
+
|
|
|
+```scss
|
|
|
+// dashboard.scss 样式
|
|
|
+.project-card {
|
|
|
+ &.pending-approval {
|
|
|
+ border: 2px solid #ff9800;
|
|
|
+ box-shadow: 0 0 10px rgba(255, 152, 0, 0.3);
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .approval-badge {
|
|
|
+ position: absolute;
|
|
|
+ top: 10px;
|
|
|
+ right: 10px;
|
|
|
+ background: linear-gradient(135deg, #ff9800, #ff6b00);
|
|
|
+ color: white;
|
|
|
+ padding: 4px 12px;
|
|
|
+ border-radius: 20px;
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: bold;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 4px;
|
|
|
+ box-shadow: 0 2px 8px rgba(255, 152, 0, 0.4);
|
|
|
+ animation: pulse 2s ease-in-out infinite;
|
|
|
+
|
|
|
+ .badge-icon {
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@keyframes pulse {
|
|
|
+ 0%, 100% {
|
|
|
+ transform: scale(1);
|
|
|
+ }
|
|
|
+ 50% {
|
|
|
+ transform: scale(1.05);
|
|
|
+ }
|
|
|
+}
|
|
|
+```
|
|
|
+
|
|
|
+### 2.2 项目详情页审批组件
|
|
|
+
|
|
|
+#### 2.2.1 创建订单审批组件
|
|
|
+位置：`src/app/shared/components/order-approval-panel/`
|
|
|
+
|
|
|
+```typescript
|
|
|
+// order-approval-panel.component.ts
|
|
|
+import { Component, Input, Output, EventEmitter, OnInit } from '@angular/core';
|
|
|
+import { CommonModule } from '@angular/common';
|
|
|
+import { FormsModule } from '@angular/forms';
|
|
|
+
|
|
|
+interface ApprovalData {
|
|
|
+ projectId: string;
|
|
|
+ projectName: string;
|
|
|
+ quotationTotal: number;
|
|
|
+ assignedTeams: TeamInfo[];
|
|
|
+ projectInfo: {
|
|
|
+ title: string;
|
|
|
+ projectType: string;
|
|
|
+ demoday: Date;
|
|
|
+ deadline?: Date;
|
|
|
+ };
|
|
|
+ submitter: {
|
|
|
+ id: string;
|
|
|
+ name: string;
|
|
|
+ role: string;
|
|
|
+ };
|
|
|
+ submitTime: Date;
|
|
|
+}
|
|
|
+
|
|
|
+interface TeamInfo {
|
|
|
+ id: string;
|
|
|
+ name: string;
|
|
|
+ spaces: string[];
|
|
|
+}
|
|
|
+
|
|
|
+@Component({
|
|
|
+ selector: 'app-order-approval-panel',
|
|
|
+ standalone: true,
|
|
|
+ imports: [CommonModule, FormsModule],
|
|
|
+ templateUrl: './order-approval-panel.component.html',
|
|
|
+ styleUrls: ['./order-approval-panel.component.scss']
|
|
|
+})
|
|
|
+export class OrderApprovalPanelComponent implements OnInit {
|
|
|
+ @Input() project: any; // Parse Project 对象
|
|
|
+ @Input() currentUser: any; // 当前组长用户
|
|
|
+ @Output() approvalCompleted = new EventEmitter<{
|
|
|
+ action: 'approved' | 'rejected';
|
|
|
+ reason?: string;
|
|
|
+ comment?: string;
|
|
|
+ }>();
|
|
|
+
|
|
|
+ approvalData: ApprovalData | null = null;
|
|
|
+ showRejectModal = false;
|
|
|
+ rejectReason = '';
|
|
|
+ approvalComment = '';
|
|
|
+ isSubmitting = false;
|
|
|
+
|
|
|
+ // 驳回原因快捷选项
|
|
|
+ rejectReasons = [
|
|
|
+ '报价不合理，需要调整',
|
|
|
+ '设计师分配不当',
|
|
|
+ '项目信息不完整',
|
|
|
+ '需要补充项目资料',
|
|
|
+ '其他原因（请在下方说明）'
|
|
|
+ ];
|
|
|
+
|
|
|
+ selectedRejectReason = '';
|
|
|
+
|
|
|
+ ngOnInit() {
|
|
|
+ this.loadApprovalData();
|
|
|
+ }
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 加载审批数据
|
|
|
+ */
|
|
|
+ private loadApprovalData() {
|
|
|
+ if (!this.project) return;
|
|
|
+
|
|
|
+ const data = this.project.get('data') || {};
|
|
|
+ const approvalHistory = data.approvalHistory || [];
|
|
|
+ const latestRecord = approvalHistory[approvalHistory.length - 1];
|
|
|
+
|
|
|
+ this.approvalData = {
|
|
|
+ projectId: this.project.id,
|
|
|
+ projectName: this.project.get('title'),
|
|
|
+ quotationTotal: latestRecord?.quotationTotal || 0,
|
|
|
+ assignedTeams: latestRecord?.teams || [],
|
|
|
+ projectInfo: {
|
|
|
+ title: this.project.get('title'),
|
|
|
+ projectType: this.project.get('projectType'),
|
|
|
+ demoday: this.project.get('demoday'),
|
|
|
+ deadline: this.project.get('deadline')
|
|
|
+ },
|
|
|
+ submitter: latestRecord?.submitter || {},
|
|
|
+ submitTime: latestRecord?.submitTime || new Date()
|
|
|
+ };
|
|
|
+ }
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 通过审批
|
|
|
+ */
|
|
|
+ async approveOrder() {
|
|
|
+ if (this.isSubmitting) return;
|
|
|
+
|
|
|
+ const confirmed = confirm('确认通过此订单审批吗？');
|
|
|
+ if (!confirmed) return;
|
|
|
+
|
|
|
+ this.isSubmitting = true;
|
|
|
+
|
|
|
+ try {
|
|
|
+ this.approvalCompleted.emit({
|
|
|
+ action: 'approved',
|
|
|
+ comment: this.approvalComment || undefined
|
|
|
+ });
|
|
|
+ } finally {
|
|
|
+ this.isSubmitting = false;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 打开驳回弹窗
|
|
|
+ */
|
|
|
+ openRejectModal() {
|
|
|
+ this.showRejectModal = true;
|
|
|
+ this.rejectReason = '';
|
|
|
+ this.selectedRejectReason = '';
|
|
|
+ this.approvalComment = '';
|
|
|
+ }
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 关闭驳回弹窗
|
|
|
+ */
|
|
|
+ closeRejectModal() {
|
|
|
+ this.showRejectModal = false;
|
|
|
+ }
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 选择驳回原因
|
|
|
+ */
|
|
|
+ selectRejectReason(reason: string) {
|
|
|
+ this.selectedRejectReason = reason;
|
|
|
+ if (reason !== '其他原因（请在下方说明）') {
|
|
|
+ this.rejectReason = reason;
|
|
|
+ } else {
|
|
|
+ this.rejectReason = '';
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 提交驳回
|
|
|
+ */
|
|
|
+ async submitRejection() {
|
|
|
+ const finalReason = this.selectedRejectReason === '其他原因（请在下方说明）'
|
|
|
+ ? this.rejectReason
|
|
|
+ : this.selectedRejectReason;
|
|
|
+
|
|
|
+ if (!finalReason || !finalReason.trim()) {
|
|
|
+ alert('请填写驳回原因');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ if (this.isSubmitting) return;
|
|
|
+ this.isSubmitting = true;
|
|
|
+
|
|
|
+ try {
|
|
|
+ this.approvalCompleted.emit({
|
|
|
+ action: 'rejected',
|
|
|
+ reason: finalReason,
|
|
|
+ comment: this.approvalComment || undefined
|
|
|
+ });
|
|
|
+ this.closeRejectModal();
|
|
|
+ } finally {
|
|
|
+ this.isSubmitting = false;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 格式化金额
|
|
|
+ */
|
|
|
+ formatCurrency(amount: number): string {
|
|
|
+ return `¥${amount.toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
|
|
|
+ }
|
|
|
+}
|
|
|
+```
|
|
|
+
|
|
|
+```html
|
|
|
+<!-- order-approval-panel.component.html -->
|
|
|
+<div class="order-approval-panel" *ngIf="approvalData">
|
|
|
+ <!-- 审批状态头部 -->
|
|
|
+ <div class="approval-header">
|
|
|
+ <div class="header-icon">📋</div>
|
|
|
+ <div class="header-content">
|
|
|
+ <h2>订单审批</h2>
|
|
|
+ <p class="subtitle">请仔细审核以下订单信息</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 审批信息卡片 -->
|
|
|
+ <div class="approval-info-cards">
|
|
|
+ <!-- 项目信息卡片 -->
|
|
|
+ <div class="info-card">
|
|
|
+ <div class="card-header">
|
|
|
+ <span class="card-icon">📄</span>
|
|
|
+ <h3>项目信息</h3>
|
|
|
+ </div>
|
|
|
+ <div class="card-body">
|
|
|
+ <div class="info-row">
|
|
|
+ <span class="label">项目名称：</span>
|
|
|
+ <span class="value">{{ approvalData.projectInfo.title }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="info-row">
|
|
|
+ <span class="label">项目类型：</span>
|
|
|
+ <span class="value">{{ approvalData.projectInfo.projectType }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="info-row">
|
|
|
+ <span class="label">小图日期：</span>
|
|
|
+ <span class="value">{{ approvalData.projectInfo.demoday | date:'yyyy-MM-dd' }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="info-row" *ngIf="approvalData.projectInfo.deadline">
|
|
|
+ <span class="label">交付期限：</span>
|
|
|
+ <span class="value">{{ approvalData.projectInfo.deadline | date:'yyyy-MM-dd' }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 报价信息卡片 -->
|
|
|
+ <div class="info-card highlight">
|
|
|
+ <div class="card-header">
|
|
|
+ <span class="card-icon">💰</span>
|
|
|
+ <h3>报价总额</h3>
|
|
|
+ </div>
|
|
|
+ <div class="card-body">
|
|
|
+ <div class="quotation-amount">
|
|
|
+ {{ formatCurrency(approvalData.quotationTotal) }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 设计师分配卡片 -->
|
|
|
+ <div class="info-card">
|
|
|
+ <div class="card-header">
|
|
|
+ <span class="card-icon">👥</span>
|
|
|
+ <h3>设计师分配</h3>
|
|
|
+ </div>
|
|
|
+ <div class="card-body">
|
|
|
+ <div class="team-list">
|
|
|
+ <div class="team-item" *ngFor="let team of approvalData.assignedTeams">
|
|
|
+ <div class="team-name">{{ team.name }}</div>
|
|
|
+ <div class="team-spaces">
|
|
|
+ <span class="space-tag" *ngFor="let space of team.spaces">{{ space }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="empty-state" *ngIf="approvalData.assignedTeams.length === 0">
|
|
|
+ <span class="empty-icon">📦</span>
|
|
|
+ <p>暂无分配设计师</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 提交信息卡片 -->
|
|
|
+ <div class="info-card">
|
|
|
+ <div class="card-header">
|
|
|
+ <span class="card-icon">👤</span>
|
|
|
+ <h3>提交信息</h3>
|
|
|
+ </div>
|
|
|
+ <div class="card-body">
|
|
|
+ <div class="info-row">
|
|
|
+ <span class="label">提交人：</span>
|
|
|
+ <span class="value">{{ approvalData.submitter.name }} ({{ approvalData.submitter.role }})</span>
|
|
|
+ </div>
|
|
|
+ <div class="info-row">
|
|
|
+ <span class="label">提交时间：</span>
|
|
|
+ <span class="value">{{ approvalData.submitTime | date:'yyyy-MM-dd HH:mm' }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 审批备注 -->
|
|
|
+ <div class="approval-comment-section">
|
|
|
+ <label for="approvalComment">审批备注（可选）</label>
|
|
|
+ <textarea
|
|
|
+ id="approvalComment"
|
|
|
+ [(ngModel)]="approvalComment"
|
|
|
+ placeholder="可以填写审批意见或建议..."
|
|
|
+ rows="3"></textarea>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 审批操作按钮 -->
|
|
|
+ <div class="approval-actions">
|
|
|
+ <button
|
|
|
+ class="btn-reject"
|
|
|
+ (click)="openRejectModal()"
|
|
|
+ [disabled]="isSubmitting">
|
|
|
+ <span class="btn-icon">❌</span>
|
|
|
+ 驳回订单
|
|
|
+ </button>
|
|
|
+ <button
|
|
|
+ class="btn-approve"
|
|
|
+ (click)="approveOrder()"
|
|
|
+ [disabled]="isSubmitting">
|
|
|
+ <span class="btn-icon">✅</span>
|
|
|
+ 通过审批
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+</div>
|
|
|
+
|
|
|
+<!-- 驳回弹窗 -->
|
|
|
+<div class="reject-modal-overlay" *ngIf="showRejectModal" (click)="closeRejectModal()">
|
|
|
+ <div class="reject-modal" (click)="$event.stopPropagation()">
|
|
|
+ <div class="modal-header">
|
|
|
+ <h3>驳回订单</h3>
|
|
|
+ <button class="close-btn" (click)="closeRejectModal()">×</button>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="modal-body">
|
|
|
+ <div class="form-group">
|
|
|
+ <label>驳回原因 <span class="required">*</span></label>
|
|
|
+ <div class="reason-options">
|
|
|
+ <label
|
|
|
+ class="reason-option"
|
|
|
+ *ngFor="let reason of rejectReasons"
|
|
|
+ [class.selected]="selectedRejectReason === reason">
|
|
|
+ <input
|
|
|
+ type="radio"
|
|
|
+ name="rejectReason"
|
|
|
+ [value]="reason"
|
|
|
+ [(ngModel)]="selectedRejectReason"
|
|
|
+ (change)="selectRejectReason(reason)">
|
|
|
+ <span>{{ reason }}</span>
|
|
|
+ </label>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="form-group" *ngIf="selectedRejectReason === '其他原因（请在下方说明）'">
|
|
|
+ <label>详细说明 <span class="required">*</span></label>
|
|
|
+ <textarea
|
|
|
+ [(ngModel)]="rejectReason"
|
|
|
+ placeholder="请详细说明驳回原因..."
|
|
|
+ rows="4"></textarea>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="form-group">
|
|
|
+ <label>补充说明（可选）</label>
|
|
|
+ <textarea
|
|
|
+ [(ngModel)]="approvalComment"
|
|
|
+ placeholder="可以补充其他建议或要求..."
|
|
|
+ rows="3"></textarea>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="modal-footer">
|
|
|
+ <button class="btn-cancel" (click)="closeRejectModal()">取消</button>
|
|
|
+ <button
|
|
|
+ class="btn-submit"
|
|
|
+ (click)="submitRejection()"
|
|
|
+ [disabled]="isSubmitting">
|
|
|
+ 确认驳回
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</div>
|
|
|
+```
|
|
|
+
|
|
|
+```scss
|
|
|
+// order-approval-panel.component.scss
|
|
|
+.order-approval-panel {
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 12px;
|
|
|
+ padding: 24px;
|
|
|
+ box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
|
|
|
+ margin-bottom: 24px;
|
|
|
+
|
|
|
+ .approval-header {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 16px;
|
|
|
+ padding-bottom: 20px;
|
|
|
+ border-bottom: 2px solid #f0f0f0;
|
|
|
+ margin-bottom: 24px;
|
|
|
+
|
|
|
+ .header-icon {
|
|
|
+ font-size: 48px;
|
|
|
+ animation: float 3s ease-in-out infinite;
|
|
|
+ }
|
|
|
+
|
|
|
+ .header-content {
|
|
|
+ h2 {
|
|
|
+ margin: 0;
|
|
|
+ font-size: 24px;
|
|
|
+ color: #333;
|
|
|
+ }
|
|
|
+
|
|
|
+ .subtitle {
|
|
|
+ margin: 4px 0 0;
|
|
|
+ color: #666;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .approval-info-cards {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
|
+ gap: 16px;
|
|
|
+ margin-bottom: 24px;
|
|
|
+
|
|
|
+ .info-card {
|
|
|
+ background: #f8f9fa;
|
|
|
+ border-radius: 8px;
|
|
|
+ padding: 16px;
|
|
|
+ border: 1px solid #e9ecef;
|
|
|
+ transition: all 0.3s;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
|
|
+ transform: translateY(-2px);
|
|
|
+ }
|
|
|
+
|
|
|
+ &.highlight {
|
|
|
+ background: linear-gradient(135deg, #fff3e0, #ffe0b2);
|
|
|
+ border-color: #ff9800;
|
|
|
+
|
|
|
+ .quotation-amount {
|
|
|
+ font-size: 32px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #f57c00;
|
|
|
+ text-align: center;
|
|
|
+ padding: 16px 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .card-header {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 8px;
|
|
|
+ margin-bottom: 12px;
|
|
|
+
|
|
|
+ .card-icon {
|
|
|
+ font-size: 24px;
|
|
|
+ }
|
|
|
+
|
|
|
+ h3 {
|
|
|
+ margin: 0;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #333;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .card-body {
|
|
|
+ .info-row {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 8px 0;
|
|
|
+ border-bottom: 1px solid #e9ecef;
|
|
|
+
|
|
|
+ &:last-child {
|
|
|
+ border-bottom: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .label {
|
|
|
+ color: #666;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .value {
|
|
|
+ color: #333;
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .team-list {
|
|
|
+ .team-item {
|
|
|
+ padding: 12px;
|
|
|
+ background: white;
|
|
|
+ border-radius: 6px;
|
|
|
+ margin-bottom: 8px;
|
|
|
+
|
|
|
+ &:last-child {
|
|
|
+ margin-bottom: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .team-name {
|
|
|
+ font-weight: 500;
|
|
|
+ color: #333;
|
|
|
+ margin-bottom: 8px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .team-spaces {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ gap: 6px;
|
|
|
+
|
|
|
+ .space-tag {
|
|
|
+ background: #e3f2fd;
|
|
|
+ color: #1976d2;
|
|
|
+ padding: 4px 12px;
|
|
|
+ border-radius: 12px;
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .empty-state {
|
|
|
+ text-align: center;
|
|
|
+ padding: 24px;
|
|
|
+ color: #999;
|
|
|
+
|
|
|
+ .empty-icon {
|
|
|
+ font-size: 48px;
|
|
|
+ display: block;
|
|
|
+ margin-bottom: 8px;
|
|
|
+ }
|
|
|
+
|
|
|
+ p {
|
|
|
+ margin: 0;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .approval-comment-section {
|
|
|
+ margin-bottom: 24px;
|
|
|
+
|
|
|
+ label {
|
|
|
+ display: block;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #333;
|
|
|
+ margin-bottom: 8px;
|
|
|
+ }
|
|
|
+
|
|
|
+ textarea {
|
|
|
+ width: 100%;
|
|
|
+ padding: 12px;
|
|
|
+ border: 1px solid #ddd;
|
|
|
+ border-radius: 6px;
|
|
|
+ font-size: 14px;
|
|
|
+ resize: vertical;
|
|
|
+ font-family: inherit;
|
|
|
+
|
|
|
+ &:focus {
|
|
|
+ outline: none;
|
|
|
+ border-color: #4CAF50;
|
|
|
+ box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .approval-actions {
|
|
|
+ display: flex;
|
|
|
+ gap: 12px;
|
|
|
+ justify-content: flex-end;
|
|
|
+
|
|
|
+ button {
|
|
|
+ padding: 12px 32px;
|
|
|
+ border: none;
|
|
|
+ border-radius: 6px;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 500;
|
|
|
+ cursor: pointer;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 8px;
|
|
|
+ transition: all 0.3s;
|
|
|
+
|
|
|
+ &:disabled {
|
|
|
+ opacity: 0.5;
|
|
|
+ cursor: not-allowed;
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn-icon {
|
|
|
+ font-size: 18px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn-reject {
|
|
|
+ background: white;
|
|
|
+ color: #f44336;
|
|
|
+ border: 2px solid #f44336;
|
|
|
+
|
|
|
+ &:hover:not(:disabled) {
|
|
|
+ background: #f44336;
|
|
|
+ color: white;
|
|
|
+ transform: translateY(-2px);
|
|
|
+ box-shadow: 0 4px 12px rgba(244, 67, 54, 0.3);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn-approve {
|
|
|
+ background: linear-gradient(135deg, #4CAF50, #45a049);
|
|
|
+ color: white;
|
|
|
+
|
|
|
+ &:hover:not(:disabled) {
|
|
|
+ background: linear-gradient(135deg, #45a049, #3d8b40);
|
|
|
+ transform: translateY(-2px);
|
|
|
+ box-shadow: 0 4px 12px rgba(76, 175, 80, 0.4);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 驳回弹窗样式
|
|
|
+.reject-modal-overlay {
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ background: rgba(0, 0, 0, 0.5);
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ z-index: 10000;
|
|
|
+ animation: fadeIn 0.3s;
|
|
|
+}
|
|
|
+
|
|
|
+.reject-modal {
|
|
|
+ background: white;
|
|
|
+ border-radius: 12px;
|
|
|
+ width: 90%;
|
|
|
+ max-width: 600px;
|
|
|
+ max-height: 90vh;
|
|
|
+ overflow-y: auto;
|
|
|
+ animation: slideUp 0.3s;
|
|
|
+
|
|
|
+ .modal-header {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ padding: 20px 24px;
|
|
|
+ border-bottom: 1px solid #e9ecef;
|
|
|
+
|
|
|
+ h3 {
|
|
|
+ margin: 0;
|
|
|
+ font-size: 20px;
|
|
|
+ color: #333;
|
|
|
+ }
|
|
|
+
|
|
|
+ .close-btn {
|
|
|
+ background: none;
|
|
|
+ border: none;
|
|
|
+ font-size: 32px;
|
|
|
+ color: #999;
|
|
|
+ cursor: pointer;
|
|
|
+ padding: 0;
|
|
|
+ width: 32px;
|
|
|
+ height: 32px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ border-radius: 50%;
|
|
|
+ transition: all 0.3s;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ background: #f5f5f5;
|
|
|
+ color: #333;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .modal-body {
|
|
|
+ padding: 24px;
|
|
|
+
|
|
|
+ .form-group {
|
|
|
+ margin-bottom: 20px;
|
|
|
+
|
|
|
+ &:last-child {
|
|
|
+ margin-bottom: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ label {
|
|
|
+ display: block;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #333;
|
|
|
+ margin-bottom: 8px;
|
|
|
+
|
|
|
+ .required {
|
|
|
+ color: #f44336;
|
|
|
+ margin-left: 4px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .reason-options {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 8px;
|
|
|
+
|
|
|
+ .reason-option {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 12px;
|
|
|
+ padding: 12px;
|
|
|
+ border: 2px solid #e9ecef;
|
|
|
+ border-radius: 6px;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: all 0.3s;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ border-color: #f44336;
|
|
|
+ background: #fff5f5;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.selected {
|
|
|
+ border-color: #f44336;
|
|
|
+ background: #ffebee;
|
|
|
+ }
|
|
|
+
|
|
|
+ input[type="radio"] {
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+
|
|
|
+ span {
|
|
|
+ flex: 1;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #333;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ textarea {
|
|
|
+ width: 100%;
|
|
|
+ padding: 12px;
|
|
|
+ border: 1px solid #ddd;
|
|
|
+ border-radius: 6px;
|
|
|
+ font-size: 14px;
|
|
|
+ resize: vertical;
|
|
|
+ font-family: inherit;
|
|
|
+
|
|
|
+ &:focus {
|
|
|
+ outline: none;
|
|
|
+ border-color: #f44336;
|
|
|
+ box-shadow: 0 0 0 3px rgba(244, 67, 54, 0.1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .modal-footer {
|
|
|
+ padding: 16px 24px;
|
|
|
+ border-top: 1px solid #e9ecef;
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ gap: 12px;
|
|
|
+
|
|
|
+ button {
|
|
|
+ padding: 10px 24px;
|
|
|
+ border: none;
|
|
|
+ border-radius: 6px;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 500;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: all 0.3s;
|
|
|
+
|
|
|
+ &:disabled {
|
|
|
+ opacity: 0.5;
|
|
|
+ cursor: not-allowed;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn-cancel {
|
|
|
+ background: #f5f5f5;
|
|
|
+ color: #666;
|
|
|
+
|
|
|
+ &:hover:not(:disabled) {
|
|
|
+ background: #e0e0e0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn-submit {
|
|
|
+ background: #f44336;
|
|
|
+ color: white;
|
|
|
+
|
|
|
+ &:hover:not(:disabled) {
|
|
|
+ background: #d32f2f;
|
|
|
+ box-shadow: 0 2px 8px rgba(244, 67, 54, 0.3);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@keyframes float {
|
|
|
+ 0%, 100% { transform: translateY(0); }
|
|
|
+ 50% { transform: translateY(-10px); }
|
|
|
+}
|
|
|
+
|
|
|
+@keyframes fadeIn {
|
|
|
+ from { opacity: 0; }
|
|
|
+ to { opacity: 1; }
|
|
|
+}
|
|
|
+
|
|
|
+@keyframes slideUp {
|
|
|
+ from {
|
|
|
+ opacity: 0;
|
|
|
+ transform: translateY(30px);
|
|
|
+ }
|
|
|
+ to {
|
|
|
+ opacity: 1;
|
|
|
+ transform: translateY(0);
|
|
|
+ }
|
|
|
+}
|
|
|
+```
|
|
|
+
|
|
|
+#### 2.2.2 集成到项目详情页
|
|
|
+
|
|
|
+修改组长查看的项目详情页（复用设计师详情页）：
|
|
|
+
|
|
|
+```typescript
|
|
|
+// src/app/pages/designer/project-detail/project-detail.ts
|
|
|
+
|
|
|
+import { OrderApprovalPanelComponent } from '../../shared/components/order-approval-panel/order-approval-panel.component';
|
|
|
+
|
|
|
+@Component({
|
|
|
+ // ... 其他配置
|
|
|
+ imports: [
|
|
|
+ // ... 其他导入
|
|
|
+ OrderApprovalPanelComponent
|
|
|
+ ]
|
|
|
+})
|
|
|
+export class ProjectDetail implements OnInit, OnDestroy {
|
|
|
+ // 添加审批相关属性
|
|
|
+ showApprovalPanel = false;
|
|
|
+
|
|
|
+ ngOnInit() {
|
|
|
+ // ... 现有初始化代码
|
|
|
+
|
|
|
+ // 检查是否需要显示审批面板
|
|
|
+ this.checkApprovalStatus();
|
|
|
+ }
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 检查是否需要显示审批面板
|
|
|
+ */
|
|
|
+ private checkApprovalStatus() {
|
|
|
+ if (!this.project) return;
|
|
|
+
|
|
|
+ const isTeamLeader = this.roleContext === 'team-leader';
|
|
|
+ const currentStage = this.project.get('currentStage');
|
|
|
+ const approvalStatus = this.project.get('data')?.approvalStatus;
|
|
|
+
|
|
|
+ // 组长视角 + 订单分配阶段 + 待审批状态
|
|
|
+ this.showApprovalPanel = isTeamLeader &&
|
|
|
+ currentStage === '订单分配' &&
|
|
|
+ approvalStatus === 'pending';
|
|
|
+ }
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 处理审批完成事件
|
|
|
+ */
|
|
|
+ async onApprovalCompleted(event: { action: 'approved' | 'rejected'; reason?: string; comment?: string }) {
|
|
|
+ if (!this.project || !this.currentUser) return;
|
|
|
+
|
|
|
+ try {
|
|
|
+ const data = this.project.get('data') || {};
|
|
|
+ const approvalHistory = data.approvalHistory || [];
|
|
|
+ const latestRecord = approvalHistory[approvalHistory.length - 1];
|
|
|
+
|
|
|
+ if (!latestRecord) {
|
|
|
+ alert('审批记录不存在');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 更新最新的审批记录
|
|
|
+ latestRecord.status = event.action === 'approved' ? 'approved' : 'rejected';
|
|
|
+ latestRecord.approver = {
|
|
|
+ id: this.currentUser.id,
|
|
|
+ name: this.currentUser.get('name'),
|
|
|
+ role: this.currentUser.get('roleName')
|
|
|
+ };
|
|
|
+ latestRecord.approvalTime = new Date();
|
|
|
+
|
|
|
+ if (event.reason) {
|
|
|
+ latestRecord.reason = event.reason;
|
|
|
+ }
|
|
|
+ if (event.comment) {
|
|
|
+ latestRecord.comment = event.comment;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 更新项目状态
|
|
|
+ if (event.action === 'approved') {
|
|
|
+ // 通过：推进到"确认需求"阶段
|
|
|
+ this.project.set('currentStage', '确认需求');
|
|
|
+ data.approvalStatus = 'approved';
|
|
|
+ delete data.pendingApprovalBy;
|
|
|
+ } else {
|
|
|
+ // 驳回：保持在"订单分配"阶段，但标记为已驳回
|
|
|
+ data.approvalStatus = 'rejected';
|
|
|
+ data.lastRejectionReason = event.reason;
|
|
|
+ delete data.pendingApprovalBy;
|
|
|
+ }
|
|
|
+
|
|
|
+ data.approvalHistory = approvalHistory;
|
|
|
+ this.project.set('data', data);
|
|
|
+
|
|
|
+ // 保存到数据库
|
|
|
+ await this.project.save(null, { useMasterKey: true });
|
|
|
+
|
|
|
+ // 提示用户
|
|
|
+ if (event.action === 'approved') {
|
|
|
+ alert('✅ 审批通过！项目已进入"确认需求"阶段');
|
|
|
+ } else {
|
|
|
+ alert('❌ 已驳回订单，客服将收到驳回通知');
|
|
|
+ }
|
|
|
+
|
|
|
+ // 刷新页面或返回列表
|
|
|
+ this.showApprovalPanel = false;
|
|
|
+ this.router.navigate(['/wxwork', this.companyId, 'team-leader', 'dashboard']);
|
|
|
+
|
|
|
+ } catch (error) {
|
|
|
+ console.error('审批操作失败:', error);
|
|
|
+ alert('操作失败，请重试');
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+```
|
|
|
+
|
|
|
+```html
|
|
|
+<!-- src/app/pages/designer/project-detail/project-detail.html -->
|
|
|
+
|
|
|
+<!-- 在页面顶部添加审批面板 -->
|
|
|
+@if (showApprovalPanel) {
|
|
|
+ <app-order-approval-panel
|
|
|
+ [project]="project"
|
|
|
+ [currentUser]="currentUser"
|
|
|
+ (approvalCompleted)="onApprovalCompleted($event)">
|
|
|
+ </app-order-approval-panel>
|
|
|
+}
|
|
|
+
|
|
|
+<!-- 原有的项目详情内容 -->
|
|
|
+<!-- ... -->
|
|
|
+```
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+## 三、客服端适配
|
|
|
+
|
|
|
+### 3.1 修改订单提交逻辑
|
|
|
+
|
|
|
+```typescript
|
|
|
+// src/modules/project/pages/project-detail/stages/stage-order.component.ts
|
|
|
+
|
|
|
+async submitForOrder() {
|
|
|
+ // ... 现有验证逻辑 ...
|
|
|
+
|
|
|
+ try {
|
|
|
+ this.saving = true;
|
|
|
+
|
|
|
+ // ... 现有保存逻辑 ...
|
|
|
+
|
|
|
+ // ✨ 修改：不直接推进到"确认需求"，而是标记为待审批
|
|
|
+ // this.project.set('currentStage', '确认需求'); // 删除这行
|
|
|
+
|
|
|
+ // 记录审批历史（包含团队快照）
|
|
|
+ const data = this.project.get('data') || {};
|
|
|
+ const approvalHistory = data.approvalHistory || [];
|
|
|
+
|
|
|
+ const teamSnapshot = assignedTeams.map(team => {
|
|
|
+ const profile = team.get('profile');
|
|
|
+ const spaces = team.get('data')?.spaces || [];
|
|
|
+ return {
|
|
|
+ id: profile?.id,
|
|
|
+ name: profile?.get('name'),
|
|
|
+ spaces
|
|
|
+ };
|
|
|
+ });
|
|
|
+
|
|
|
+ approvalHistory.push({
|
|
|
+ stage: '订单分配',
|
|
|
+ submitter: {
|
|
|
+ id: this.currentUser?.id,
|
|
|
+ name: this.currentUser?.get('name'),
|
|
|
+ role: this.currentUser?.get('roleName')
|
|
|
+ },
|
|
|
+ submitTime: new Date(),
|
|
|
+ status: 'pending', // ✨ 标记为待审批
|
|
|
+ quotationTotal: this.quotation.total,
|
|
|
+ teams: teamSnapshot
|
|
|
+ });
|
|
|
+
|
|
|
+ // ✨ 新增：设置审批状态
|
|
|
+ data.approvalHistory = approvalHistory;
|
|
|
+ data.approvalStatus = 'pending'; // 待审批
|
|
|
+ data.pendingApprovalBy = 'team-leader'; // 待组长审批
|
|
|
+ this.project.set('data', data);
|
|
|
+
|
|
|
+ // ✨ 保持在"订单分配"阶段
|
|
|
+ // 但可以通过 approvalStatus 字段区分是否已提交
|
|
|
+
|
|
|
+ await this.project.save();
|
|
|
+
|
|
|
+ alert('✅ 提交成功！等待组长审批');
|
|
|
+
|
|
|
+ } catch (err) {
|
|
|
+ console.error('提交失败:', err);
|
|
|
+ alert('提交失败');
|
|
|
+ } finally {
|
|
|
+ this.saving = false;
|
|
|
+ }
|
|
|
+}
|
|
|
+```
|
|
|
+
|
|
|
+### 3.2 显示审批状态
|
|
|
+
|
|
|
+在客服端项目列表或详情页显示审批状态：
|
|
|
+
|
|
|
+```html
|
|
|
+<!-- 审批状态徽章 -->
|
|
|
+@if (project.data?.approvalStatus === 'pending') {
|
|
|
+ <span class="status-badge pending">等待组长审批</span>
|
|
|
+}
|
|
|
+@else if (project.data?.approvalStatus === 'approved') {
|
|
|
+ <span class="status-badge approved">已通过</span>
|
|
|
+}
|
|
|
+@else if (project.data?.approvalStatus === 'rejected') {
|
|
|
+ <span class="status-badge rejected">已驳回</span>
|
|
|
+}
|
|
|
+```
|
|
|
+
|
|
|
+### 3.3 显示驳回原因
|
|
|
+
|
|
|
+```html
|
|
|
+<!-- 驳回提示 -->
|
|
|
+@if (project.data?.approvalStatus === 'rejected') {
|
|
|
+ <div class="rejection-notice">
|
|
|
+ <div class="notice-icon">⚠️</div>
|
|
|
+ <div class="notice-content">
|
|
|
+ <h4>订单已被驳回</h4>
|
|
|
+ <p><strong>驳回原因：</strong>{{ project.data?.lastRejectionReason }}</p>
|
|
|
+ <button class="btn-primary" (click)="editAndResubmit()">修改并重新提交</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+}
|
|
|
+```
|
|
|
+
|
|
|
+```scss
|
|
|
+.rejection-notice {
|
|
|
+ background: #fff3e0;
|
|
|
+ border: 2px solid #ff9800;
|
|
|
+ border-radius: 8px;
|
|
|
+ padding: 16px;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ display: flex;
|
|
|
+ gap: 16px;
|
|
|
+ align-items: flex-start;
|
|
|
+
|
|
|
+ .notice-icon {
|
|
|
+ font-size: 32px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .notice-content {
|
|
|
+ flex: 1;
|
|
|
+
|
|
|
+ h4 {
|
|
|
+ margin: 0 0 8px;
|
|
|
+ color: #f57c00;
|
|
|
+ }
|
|
|
+
|
|
|
+ p {
|
|
|
+ margin: 0 0 12px;
|
|
|
+ color: #666;
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn-primary {
|
|
|
+ background: #ff9800;
|
|
|
+ color: white;
|
|
|
+ border: none;
|
|
|
+ padding: 8px 20px;
|
|
|
+ border-radius: 4px;
|
|
|
+ cursor: pointer;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ background: #f57c00;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+```
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+## 四、数据库查询优化
|
|
|
+
|
|
|
+### 4.1 为组长工作台创建专用查询
|
|
|
+
|
|
|
+```typescript
|
|
|
+// src/app/pages/team-leader/services/project-data.service.ts
|
|
|
+
|
|
|
+/**
|
|
|
+ * 获取待审批项目列表
|
|
|
+ */
|
|
|
+async getPendingApprovalProjects(companyId: string): Promise<any[]> {
|
|
|
+ const Parse = await this.ensureParse();
|
|
|
+ if (!Parse) return [];
|
|
|
+
|
|
|
+ try {
|
|
|
+ const query = new Parse.Query('Project');
|
|
|
+ query.equalTo('company', companyId);
|
|
|
+ query.equalTo('currentStage', '订单分配');
|
|
|
+ query.notEqualTo('isDeleted', true);
|
|
|
+ query.include('contact');
|
|
|
+ query.descending('updatedAt');
|
|
|
+ query.limit(100);
|
|
|
+
|
|
|
+ const projects = await query.find({ useMasterKey: true });
|
|
|
+
|
|
|
+ // 过滤出待审批的项目
|
|
|
+ return projects.filter(p => {
|
|
|
+ const data = p.get('data') || {};
|
|
|
+ return data.approvalStatus === 'pending';
|
|
|
+ });
|
|
|
+
|
|
|
+ } catch (error) {
|
|
|
+ console.error('获取待审批项目失败:', error);
|
|
|
+ return [];
|
|
|
+ }
|
|
|
+}
|
|
|
+```
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+## 五、通知机制（可选扩展）
|
|
|
+
|
|
|
+### 5.1 企业微信消息通知
|
|
|
+
|
|
|
+```typescript
|
|
|
+// src/app/services/notification.service.ts
|
|
|
+
|
|
|
+@Injectable({ providedIn: 'root' })
|
|
|
+export class NotificationService {
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 发送审批通知给客服
|
|
|
+ */
|
|
|
+ async notifyCustomerServiceOfApproval(
|
|
|
+ project: any,
|
|
|
+ approvalResult: 'approved' | 'rejected',
|
|
|
+ reason?: string
|
|
|
+ ) {
|
|
|
+ // 获取项目的客服人员
|
|
|
+ const customerServiceId = project.get('data')?.submitter?.id;
|
|
|
+ if (!customerServiceId) return;
|
|
|
+
|
|
|
+ // 构建消息内容
|
|
|
+ const message = approvalResult === 'approved'
|
|
|
+ ? `✅ 您提交的订单"${project.get('title')}"已通过审批，可以进入下一阶段。`
|
|
|
+ : `❌ 您提交的订单"${project.get('title')}"被驳回。\n驳回原因：${reason}`;
|
|
|
+
|
|
|
+ // 调用企业微信API发送消息（需要后端支持）
|
|
|
+ try {
|
|
|
+ // await this.wxworkApi.sendMessage({
|
|
|
+ // toUser: customerServiceId,
|
|
|
+ // message: message,
|
|
|
+ // agentId: 'your-agent-id'
|
|
|
+ // });
|
|
|
+
|
|
|
+ console.log('📨 发送通知:', message);
|
|
|
+ } catch (error) {
|
|
|
+ console.error('发送通知失败:', error);
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+```
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+## 六、测试清单
|
|
|
+
|
|
|
+### 6.1 功能测试
|
|
|
+
|
|
|
+- [ ] 客服提交订单后，项目标记为"待审批"
|
|
|
+- [ ] 组长工作台正确显示待审批项目数量
|
|
|
+- [ ] 组长可以筛选查看待审批项目
|
|
|
+- [ ] 点击待审批项目进入详情页，显示审批面板
|
|
|
+- [ ] 审批面板正确展示项目信息、报价、设计师分配
|
|
|
+- [ ] 通过审批后，项目进入"确认需求"阶段
|
|
|
+- [ ] 驳回审批后，项目保持在"订单分配"阶段，显示驳回状态
|
|
|
+- [ ] 客服端可以看到审批状态（待审批/已通过/已驳回）
|
|
|
+- [ ] 驳回后客服可以查看驳回原因
|
|
|
+- [ ] 驳回后客服可以修改并重新提交
|
|
|
+- [ ] 审批历史正确记录
|
|
|
+
|
|
|
+### 6.2 权限测试
|
|
|
+
|
|
|
+- [ ] 只有组长角色可以看到审批按钮
|
|
|
+- [ ] 非组长角色无法进行审批操作
|
|
|
+- [ ] 审批记录中正确记录审批人信息
|
|
|
+
|
|
|
+### 6.3 边界测试
|
|
|
+
|
|
|
+- [ ] 项目没有审批记录时的处理
|
|
|
+- [ ] 多次提交审批的历史记录
|
|
|
+- [ ] 审批过程中项目被删除的处理
|
|
|
+- [ ] 并发审批的处理
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+## 七、后续优化建议
|
|
|
+
|
|
|
+### 7.1 短期优化（1-2周）
|
|
|
+
|
|
|
+1. **批量审批功能**
|
|
|
+ - 组长可以批量选择多个项目进行审批
|
|
|
+ - 快速通过/驳回多个订单
|
|
|
+
|
|
|
+2. **审批提醒**
|
|
|
+ - 超过24小时未审批的项目高亮显示
|
|
|
+ - 每日汇总待审批项目发送给组长
|
|
|
+
|
|
|
+3. **移动端适配**
|
|
|
+ - 审批面板响应式设计
|
|
|
+ - 支持企业微信内审批
|
|
|
+
|
|
|
+### 7.2 中期优化（1-2月）
|
|
|
+
|
|
|
+1. **审批流程可配置**
|
|
|
+ - 支持自定义审批规则
|
|
|
+ - 根据项目金额自动路由审批人
|
|
|
+
|
|
|
+2. **审批数据分析**
|
|
|
+ - 统计审批通过率
|
|
|
+ - 分析驳回原因分布
|
|
|
+ - 监控审批时效
|
|
|
+
|
|
|
+3. **智能审批建议**
|
|
|
+ - 基于历史数据提供审批建议
|
|
|
+ - 自动标记异常项目
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+## 八、实施步骤
|
|
|
+
|
|
|
+### Phase 1: 核心功能（2-3天）
|
|
|
+
|
|
|
+1. ✅ 创建 OrderApprovalPanelComponent
|
|
|
+2. ✅ 修改客服端提交逻辑
|
|
|
+3. ✅ 集成到项目详情页
|
|
|
+4. ✅ 实现审批操作（通过/驳回）
|
|
|
+5. ✅ 测试基本流程
|
|
|
+
|
|
|
+### Phase 2: 视觉优化（1天）
|
|
|
+
|
|
|
+1. ✅ 组长工作台待审批项目视觉标识
|
|
|
+2. ✅ 审批面板样式优化
|
|
|
+3. ✅ 驳回弹窗交互优化
|
|
|
+
|
|
|
+### Phase 3: 客服端适配（1天）
|
|
|
+
|
|
|
+1. ✅ 显示审批状态
|
|
|
+2. ✅ 显示驳回原因
|
|
|
+3. ✅ 重新提交功能
|
|
|
+
|
|
|
+### Phase 4: 测试与发布（1天）
|
|
|
+
|
|
|
+1. ✅ 功能测试
|
|
|
+2. ✅ 权限测试
|
|
|
+3. ✅ 用户验收测试
|
|
|
+4. ✅ 正式发布
|
|
|
+
|
|
|
+**预计总工时：5-6天**
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+## 九、相关文档
|
|
|
+
|
|
|
+- [项目管理PRD](../prd/wxwork-project-management.md)
|
|
|
+- [数据库表结构](../Database/database-tables-overview.md)
|
|
|
+- [权限管理说明](../prd/wxwork-project-management.md#权限代码)
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+**文档创建：** 2025-10-28
|
|
|
+**最后更新：** 2025-10-28
|
|
|
+**版本：** v1.1.0
|
|
|
+**状态：** ✅ 已完成
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+## 十、问题与修复记录
|
|
|
+
|
|
|
+### 问题1：路由跳转到错误的项目详情页
|
|
|
+
|
|
|
+**问题描述：**
|
|
|
+组长工作台点击待审批项目后，跳转到了开发版本的项目详情页（`src/app/pages/designer/project-detail`），而不是真实的项目详情页（`src/modules/project/pages/project-detail`），导致审批面板无法显示。
|
|
|
+
|
|
|
+**根本原因：**
|
|
|
+项目中存在两个项目详情组件：
|
|
|
+1. **开发版本**：`src/app/pages/designer/project-detail/project-detail.ts` - 用于开发测试
|
|
|
+2. **真实版本**：`src/modules/project/pages/project-detail/project-detail.component.ts` - 真实项目使用的组件
|
|
|
+
|
|
|
+审批功能被误加到了开发版本，而路由配置也指向了开发版本。
|
|
|
+
|
|
|
+**解决方案：**
|
|
|
+
|
|
|
+1. **修改路由配置**（`src/app/app.routes.ts`）：
|
|
|
+ ```typescript
|
|
|
+ // wxwork/:cid/team-leader 路由
|
|
|
+ {
|
|
|
+ path: 'team-leader',
|
|
|
+ children: [
|
|
|
+ {
|
|
|
+ path: 'dashboard',
|
|
|
+ loadComponent: () => import('./pages/team-leader/dashboard/dashboard').then(m => m.Dashboard),
|
|
|
+ title: '组长工作台'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ path: 'project-detail/:projectId',
|
|
|
+ // ✅ 修改为真实的项目详情组件
|
|
|
+ loadComponent: () => import('../modules/project/pages/project-detail/project-detail.component').then(m => m.ProjectDetailComponent),
|
|
|
+ title: '项目详情',
|
|
|
+ children: [
|
|
|
+ // ... 四阶段子路由
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ ```
|
|
|
+
|
|
|
+2. **将审批功能集成到真实组件**：
|
|
|
+ - 修改 `src/modules/project/pages/project-detail/project-detail.component.ts`：
|
|
|
+ - 导入 `OrderApprovalPanelComponent`
|
|
|
+ - 添加 `showApprovalPanel` 和 `companyId` 属性
|
|
|
+ - 添加 `checkApprovalStatus()` 方法
|
|
|
+ - 添加 `onApprovalCompleted()` 方法
|
|
|
+ - 修改 `src/modules/project/pages/project-detail/project-detail.component.html`：
|
|
|
+ - 在 `<router-outlet>` 之前添加审批面板
|
|
|
+
|
|
|
+**修复后效果：**
|
|
|
+- ✅ 组长工作台点击待审批项目正确跳转到真实项目详情页
|
|
|
+- ✅ 审批面板正常显示
|
|
|
+- ✅ 四阶段导航正常工作
|
|
|
+- ✅ 审批通过/驳回功能正常
|
|
|
+
|
|
|
+**相关文件：**
|
|
|
+- `src/app/app.routes.ts` - 路由配置
|
|
|
+- `src/modules/project/pages/project-detail/project-detail.component.ts` - 真实项目详情组件
|
|
|
+- `src/modules/project/pages/project-detail/project-detail.component.html` - 真实项目详情模板
|
|
|
+- `src/app/pages/team-leader/dashboard/dashboard.ts` - 组长工作台（跳转逻辑）
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+**测试验证步骤：**
|
|
|
+1. 访问组长工作台：`http://localhost:4200/wxwork/cDL6R1hgSi/team-leader/dashboard`
|
|
|
+2. 点击待审批项目（红桥新村）
|
|
|
+3. 验证URL：应为 `http://localhost:4200/wxwork/cDL6R1hgSi/team-leader/project-detail/B2wtFHIF6k`
|
|
|
+4. 验证页面显示：
|
|
|
+ - ✅ 四阶段导航显示
|
|
|
+ - ✅ 审批面板显示（橙色横幅）
|
|
|
+ - ✅ "通过审批"和"驳回订单"按钮显示
|
|
|
+ - ✅ 订单信息正确显示
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+### 功能增强2：审批时修改设计师分配
|
|
|
+
|
|
|
+**新增时间：** 2025-10-28
|
|
|
+
|
|
|
+**功能描述：**
|
|
|
+组长在审批订单时，可以直接在审批面板中修改设计师分配，无需返回订单页面，提高审批效率。
|
|
|
+
|
|
|
+**实现内容：**
|
|
|
+
|
|
|
+1. **编辑按钮**
|
|
|
+ - 在"设计师分配"卡片右上角添加"✏️ 编辑"按钮
|
|
|
+ - 点击后进入编辑模式
|
|
|
+
|
|
|
+2. **编辑模式界面**
|
|
|
+ - 显示当前分配的设计师列表
|
|
|
+ - 每个设计师显示：头像、姓名、负责空间
|
|
|
+ - 提供操作按钮：
|
|
|
+ - 🗑️ 移除设计师
|
|
|
+ - 编辑空间 - 修改该设计师负责的空间
|
|
|
+ - ➕ 添加设计师 - 添加新的设计师
|
|
|
+
|
|
|
+3. **编辑操作**
|
|
|
+ - **移除设计师**：点击🗑️按钮移除该设计师
|
|
|
+ - **编辑空间**：弹出输入框，修改空间列表（逗号分隔）
|
|
|
+ - **添加设计师**：弹出输入框，输入设计师姓名
|
|
|
+
|
|
|
+4. **保存/取消**
|
|
|
+ - **保存修改**：更新审批数据和项目数据
|
|
|
+ - **取消**：放弃修改，恢复原始数据
|
|
|
+
|
|
|
+**视觉效果：**
|
|
|
+- 编辑模式卡片：蓝色边框 + 浅蓝背景
|
|
|
+- 设计师项：白色背景 + 悬停高亮
|
|
|
+- 按钮：彩色图标 + 悬停动画
|
|
|
+- 操作反馈：保存后显示"设计师分配已更新"提示
|
|
|
+
|
|
|
+**技术实现：**
|
|
|
+
|
|
|
+```typescript
|
|
|
+// TypeScript 关键方法
|
|
|
+startEditTeams() // 开启编辑模式
|
|
|
+cancelEditTeams() // 取消编辑
|
|
|
+saveTeamsEdit() // 保存修改
|
|
|
+removeTeam(index) // 移除设计师
|
|
|
+addTeamMember() // 添加设计师
|
|
|
+editTeamSpaces(team) // 编辑空间
|
|
|
+```
|
|
|
+
|
|
|
+**涉及文件：**
|
|
|
+- `src/app/shared/components/order-approval-panel/order-approval-panel.component.ts`
|
|
|
+- `src/app/shared/components/order-approval-panel/order-approval-panel.component.html`
|
|
|
+- `src/app/shared/components/order-approval-panel/order-approval-panel.component.scss`
|
|
|
+
|
|
|
+**使用流程：**
|
|
|
+1. 组长查看待审批订单
|
|
|
+2. 在审批面板中点击"设计师分配"卡片右上角的"✏️ 编辑"按钮
|
|
|
+3. 进入编辑模式，修改设计师分配：
|
|
|
+ - 移除不合适的设计师
|
|
|
+ - 添加新的设计师（打开专业的设计师选择弹窗）
|
|
|
+ - 调整各设计师负责的空间
|
|
|
+4. 点击"保存修改"确认，或点击"取消"放弃修改
|
|
|
+5. 继续进行审批操作（通过/驳回）
|
|
|
+
|
|
|
+**改进更新（2025-10-28）：**
|
|
|
+
|
|
|
+集成了项目详情页的设计师分配弹窗组件（`DesignerTeamAssignmentModalComponent`），提供更专业的设计师选择体验：
|
|
|
+
|
|
|
+**弹窗功能特性：**
|
|
|
+- ✅ **项目组视图**：按项目组展示设计师列表
|
|
|
+- ✅ **设计师状态**：显示设计师工作状态（空闲/忙碌/对图中）
|
|
|
+- ✅ **工作量显示**：查看每个设计师当前工作量
|
|
|
+- ✅ **日历视图**：查看设计师时间安排和可用性
|
|
|
+- ✅ **空间分配**：选择设计师时同时分配负责空间
|
|
|
+- ✅ **跨组协作**：支持选择多个项目组的设计师
|
|
|
+- ✅ **实时数据**：从数据库加载真实的设计师和项目数据
|
|
|
+
|
|
|
+**交互流程：**
|
|
|
+1. 点击 **"➕ 添加设计师"** 按钮
|
|
|
+2. 弹出专业的设计师选择界面
|
|
|
+3. 选择项目组，查看该组设计师
|
|
|
+4. 查看设计师状态、工作量、时间安排
|
|
|
+5. 选择合适的设计师
|
|
|
+6. 为设计师分配负责的空间
|
|
|
+7. 确认选择，设计师自动添加到审批面板
|
|
|
+8. 继续编辑或保存修改
|
|
|
+
|
|
|
+**技术实现：**
|
|
|
+```typescript
|
|
|
+// 关键方法更新
|
|
|
+addTeamMember() // 打开设计师选择弹窗
|
|
|
+closeDesignerModal() // 关闭弹窗
|
|
|
+handleDesignerAssignment() // 处理弹窗返回的选择结果
|
|
|
+```
|
|
|
+
|
|
|
+**涉及组件：**
|
|
|
+- `DesignerTeamAssignmentModalComponent` - 设计师分配弹窗（复用）
|
|
|
+- `DesignerCalendarComponent` - 设计师日历组件（弹窗内部使用）
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
0235711