Merge branch 'master' of http://git.fmode.cn:3000/nkkj/yss-project

src/app/shared/components/consultation-order-panel/consultation-order-panel.component.html

@@ -1,36 +1,49 @@
 <div class="consultation-order-panel">
-  <!-- 订单分配头部 -->
-  <div class="order-assignment-header">
-    <h2 class="assignment-title">订单分配</h2>
-    <div class="assignment-actions">
-      <button 
-        class="assign-designer-btn"
-        (click)="showTeamAssignmentModal = true"
-        [class.assigned]="selectedDesigner"
-      >
-        @if (selectedDesigner) {
-          <span class="designer-info">
-            <i class="icon-user"></i>
-            {{ selectedDesigner.name }}
-          </span>
-        } @else {
-          <span>分配设计师</span>
-        }
-      </button>
-      
-      <button 
-        class="create-order-btn" 
-        (click)="createOrder()"
-        [disabled]="!canCreateOrder()"
-        [class.disabled]="!canCreateOrder()"
-      >
-        <span>创建订单</span>
-      </button>
+  <!-- 面板头部 -->
+  <div class="panel-header">
+    <h1 class="panel-title">创建咨询订单</h1>
+    <p class="panel-subtitle">填写客户信息和项目需求</p>
+    
+    <!-- 紧凑型流程进度卡片 -->
+    <div class="compact-stage-indicators">
+      <div class="stage-chain">
+        <div class="stage-dot" [class]="getStageStatusClass('customerInfo')" 
+             title="客户信息 - {{ getStageStatusText('customerInfo') }}">
+          <span class="stage-number">1</span>
+        </div>
+        <div class="stage-connector" [class]="stageCompletionStatus.customerInfo ? 'completed' : 'pending'"></div>
+        
+        <div class="stage-dot" [class]="getStageStatusClass('projectRequirements')" 
+             title="项目需求 - {{ getStageStatusText('projectRequirements') }}">
+          <span class="stage-number">2</span>
+        </div>
+        <div class="stage-connector" [class]="stageCompletionStatus.projectRequirements ? 'completed' : 'pending'"></div>
+        
+        <div class="stage-dot" [class]="getStageStatusClass('teamAssignment')" 
+             title="团队分配 - {{ getStageStatusText('teamAssignment') }}">
+          <span class="stage-number">3</span>
+        </div>
+        <div class="stage-connector" [class]="stageCompletionStatus.teamAssignment ? 'completed' : 'pending'"></div>
+        
+        <div class="stage-dot" [class]="getStageStatusClass('orderConfirmation')" 
+             title="订单确认 - {{ getStageStatusText('orderConfirmation') }}">
+          <span class="stage-number">4</span>
+        </div>
+      </div>
+    </div>
+    
+    <div class="progress-indicator">
+      <div class="progress-bar">
+        <div class="progress-fill" [style.width.%]="getProgressPercentage()"></div>
+      </div>
+      <span class="progress-text">{{ getProgressPercentage() | number:'1.0-0' }}% 完成</span>
     </div>
   </div>
 
   <!-- 可滚动内容区域 -->
   <div class="panel-content">
+
+
     <!-- 客户信息显示 -->
     @if (syncData?.customerInfo) {
       <section class="synced-customer-info">
@@ -300,6 +313,34 @@
       }
     </section>
   </div>
+
+  <!-- 底部提交区域 -->
+  <div class="panel-footer">
+    <button 
+      class="submit-btn" 
+      (click)="submitForm()"
+      [disabled]="isSubmitting || !isFormValid()"
+      [class.disabled]="isSubmitting || !isFormValid()"
+    >
+      @if (isSubmitting) {
+        <span>分配团队中...</span>
+      } @else {
+        <span>创建订单</span>
+      }
+    </button>
+    
+    <!-- 表单验证提示 -->
+    @if (!isFormValid()) {
+      <div class="validation-hint">
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <circle cx="12" cy="12" r="10"></circle>
+          <line x1="12" y1="8" x2="12" y2="12"></line>
+          <line x1="12" y1="16" x2="12.01" y2="16"></line>
+        </svg>
+        请填写完整的项目信息
+      </div>
+    }
+  </div>
 </div>
 
 <!-- 团队分配弹窗 -->

src/app/shared/components/consultation-order-panel/consultation-order-panel.component.scss

@@ -37,96 +37,27 @@ $ios-spacing-xl: 32px;
   display: flex;
   flex-direction: column;
   font-family: $ios-font-family;
+  border: 1px solid $ios-border;
   overflow: hidden;
 
-  // 订单分配头部
-  .order-assignment-header {
+  // 面板头部
+  .panel-header {
     padding: $ios-spacing-md $ios-spacing-lg;
     background: linear-gradient(135deg, $ios-background 0%, $ios-background-secondary 100%);
     border-bottom: 1px solid $ios-border;
     flex-shrink: 0;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
 
-    .assignment-title {
+    .panel-title {
       font-size: 18px;
       font-weight: 600;
       color: $ios-text-primary;
       margin: 0;
     }
 
-    .assignment-actions {
-      display: flex;
-      gap: $ios-spacing-md;
-      align-items: center;
-
-      .assign-designer-btn {
-        padding: 8px 16px;
-        background: $ios-background;
-        border: 2px solid $ios-primary;
-        border-radius: $ios-radius;
-        color: $ios-primary;
-        font-size: 14px;
-        font-weight: 500;
-        cursor: pointer;
-        transition: $ios-transition;
-        display: flex;
-        align-items: center;
-        gap: 6px;
-        min-width: 120px;
-        justify-content: center;
-
-        &:hover {
-          background: $ios-primary;
-          color: white;
-        }
-
-        &.assigned {
-          background: $ios-success;
-          border-color: $ios-success;
-          color: white;
-
-          &:hover {
-            background: color.adjust($ios-success, $lightness: -10%);
-          }
-        }
-
-        .designer-info {
-          display: flex;
-          align-items: center;
-          gap: 4px;
-
-          .icon-user {
-            font-size: 12px;
-          }
-        }
-      }
-
-      .create-order-btn {
-        padding: 10px 20px;
-        background: $ios-primary;
-        border: none;
-        border-radius: $ios-radius;
-        color: white;
-        font-size: 14px;
-        font-weight: 600;
-        cursor: pointer;
-        transition: $ios-transition;
-        min-width: 100px;
-
-        &:hover:not(.disabled) {
-          background: $ios-primary-dark;
-          transform: translateY(-1px);
-          box-shadow: $ios-shadow-md;
-        }
-
-        &.disabled {
-          background: $ios-text-tertiary;
-          cursor: not-allowed;
-          opacity: 0.6;
-        }
-      }
+    .panel-subtitle {
+      font-size: 14px;
+      color: $ios-text-secondary;
+      margin: 4px 0 0 0;
     }
   }
 

src/app/shared/components/consultation-order-panel/consultation-order-panel.component.ts

@@ -60,70 +60,6 @@ export class ConsultationOrderPanelComponent implements OnInit, OnChanges {
   showTeamAssignmentModal = false;
   selectedDesigner: Designer | null = null;
 
-  // 新增：自动分配用的设计师池（与弹窗组件保持一致的数据结构）
-  private allDesigners: Designer[] = [
-    {
-      id: '1',
-      name: '张设计师',
-      role: '高级室内设计师',
-      avatar: '/assets/images/default-avatar.svg',
-      skills: ['现代简约', '北欧风格', '工业风'],
-      workload: { level: 'low', percentage: 30, text: '轻度' },
-      recentTasks: [
-        { id: '1', name: '海景别墅设计', projectName: '海景别墅设计', stage: 'modeling', deadline: '2024-01-15' },
-        { id: '2', name: '现代公寓改造', projectName: '现代公寓改造', stage: 'rendering', deadline: '2024-01-20' }
-      ]
-    },
-    {
-      id: '2',
-      name: '李设计师',
-      role: '资深设计总监',
-      avatar: '/assets/images/default-avatar.svg',
-      skills: ['欧式古典', '美式乡村', '中式传统'],
-      workload: { level: 'medium', percentage: 65, text: '中度' },
-      recentTasks: [
-        { id: '3', name: '豪华会所设计', projectName: '豪华会所设计', stage: 'soft-decoration', deadline: '2024-01-18' },
-        { id: '4', name: '商业空间规划', projectName: '商业空间规划', stage: 'post-production', deadline: '2024-01-25' },
-        { id: '5', name: '私人定制住宅', projectName: '私人定制住宅', stage: 'modeling', deadline: '2024-02-01' }
-      ]
-    },
-    {
-      id: '3',
-      name: '王设计师',
-      role: '创意设计师',
-      avatar: '/assets/images/default-avatar.svg',
-      skills: ['极简主义', '日式禅风', '斯堪的纳维亚'],
-      workload: { level: 'high', percentage: 85, text: '重度' },
-      recentTasks: [
-        { id: '6', name: '艺术画廊设计', projectName: '艺术画廊设计', stage: 'rendering', deadline: '2024-01-12' },
-        { id: '7', name: '精品酒店套房', projectName: '精品酒店套房', stage: 'soft-decoration', deadline: '2024-01-16' },
-        { id: '8', name: '创意办公空间', projectName: '创意办公空间', stage: 'post-production', deadline: '2024-01-22' },
-        { id: '9', name: '高端住宅项目', projectName: '高端住宅项目', stage: 'modeling', deadline: '2024-01-28' }
-      ]
-    },
-    {
-      id: '4',
-      name: '陈设计师',
-      role: '室内设计师',
-      avatar: '/assets/images/default-avatar.svg',
-      skills: ['新中式', '轻奢风格', '混搭风格'],
-      workload: { level: 'low', percentage: 20, text: '轻度' },
-      recentTasks: [
-        { id: '10', name: '温馨家庭住宅', projectName: '温馨家庭住宅', stage: 'modeling', deadline: '2024-01-30' }
-      ]
-    },
-    // 新增：完全空闲的设计师用于自动分配展示
-    {
-      id: '5',
-      name: '赵设计师',
-      role: '室内设计师',
-      avatar: '/assets/images/default-avatar.svg',
-      skills: ['现代简约', '北欧风格'],
-      workload: { level: 'low', percentage: 0, text: '空闲' },
-      recentTasks: []
-    }
-  ];
-
   // 样式选项
   styleOptions = [
     '现代简约', '北欧风', '工业风', '新中式', '法式轻奢', '日式', '美式', '混搭'
@@ -373,67 +309,14 @@ export class ConsultationOrderPanelComponent implements OnInit, OnChanges {
     return this.customerForm.valid && this.requirementForm.valid;
   }
 
-  // 检查是否可以创建订单（放宽条件：仅需表单有效即可点击创建，设计师由系统自动分配或人工分配）
-  canCreateOrder(): boolean {
-    return this.isFormValid();
-  }
-
-  // 创建订单方法（支持自动分配空闲设计师）
-  createOrder() {
-    // 表单未通过校验则不允许创建
-    if (!this.isFormValid()) {
-      return;
-    }
-
-    // 若尚未选择设计师，尝试自动分配空闲设计师
-    if (!this.selectedDesigner) {
-      const assigned = this.autoAssignDesignerIfAvailable();
-      if (!assigned) {
-        // 无空闲设计师：阻止创建并弹出分配弹窗
-        this.showTeamAssignmentModal = true;
-        return;
-      }
-    }
-
-    this.isSubmitting = true;
-    
-    // 构建完整的项目数据
-    const formData = {
-      customerInfo: this.customerForm.value,
-      requirementInfo: this.requirementForm.value,
-      preferenceTags: this.preferenceTags,
-      roleContext: this.roleContext,
-      createdAt: new Date()
-    };
-    
-    const projectData = {
-      customerInfo: this.customerForm.value,
-      requirementInfo: this.requirementForm.value,
-      preferenceTags: this.preferenceTags,
-      assignedDesigner: this.selectedDesigner,
-      createdAt: new Date()
-    };
-    
-    // 先触发订单创建事件（用于数据同步）
-    this.orderCreated.emit(formData);
-    
-    // 再触发项目创建成功事件（用于阶段推进）
-    this.projectCreated.emit(projectData);
-    
-    // 重置表单
-    this.customerForm.reset({
-      customerType: '新客户'
-    });
-    this.requirementForm.reset();
-    this.preferenceTags = [];
-    this.selectedCustomer = null;
-    this.selectedDesigner = null;
-    this.isSubmitting = false;
-  }
-
-  // 提交表单 - 保留原有逻辑但简化
+  // 提交表单 - 优化流程：直接进入团队分配
   submitForm() {
-    this.createOrder();
+    if (this.isFormValid()) {
+      this.isSubmitting = true;
+      
+      // 直接显示团队分配弹窗，无需先触发订单创建事件
+      this.showTeamAssignmentModal = true;
+    }
   }
 
   // 关闭团队分配弹窗
@@ -481,22 +364,4 @@ export class ConsultationOrderPanelComponent implements OnInit, OnChanges {
     this.preferenceTags = [];
     this.selectedCustomer = null;
   }
-
-  // 新增：查找空闲设计师（低负载且在项少于等于1）
-  private findAvailableDesigners(): Designer[] {
-    return this.allDesigners.filter(d => d.workload.level === 'low' && (d.recentTasks?.length || 0) === 0);
-  }
-
-  // 新增：自动随机分配空闲设计师
-  private autoAssignDesignerIfAvailable(): boolean {
-    const candidates = this.findAvailableDesigners();
-    if (candidates.length === 0) {
-      return false;
-    }
-    const randomIndex = Math.floor(Math.random() * candidates.length);
-    this.selectedDesigner = candidates[randomIndex];
-    // 更新阶段状态（选择了设计师）
-    this.checkStageCompletion();
-    return true;
-  }
 }