Browse Source

feat(project-detail): 添加确认上传按钮功能以推进工作流

- 在项目详情页面中为各个阶段(建模、软装、渲染、后期)添加确认上传按钮,允许用户在上传图片后确认并推进到下一阶段。
- 实现相关的逻辑检查,确保用户在确认前已上传图片。
- 更新样式以提升按钮的可视性和用户体验。

此更新旨在增强用户交互,确保工作流的顺畅推进。
0235711 21 giờ trước cách đây
mục cha
commit
0417ce28a0

+ 40 - 0
src/app/pages/designer/project-detail/project-detail.html

@@ -1829,6 +1829,16 @@
                                                 </div>
                                               </div>
                                 } @else {
+                                  <!-- 确认上传按钮 -->
+                                  @if (canEditSection('delivery') && getSpaceImages('modeling', space.id).length > 0) {
+                                    <div class="confirm-upload-section">
+                                      <button class="confirm-upload-btn" 
+                                              (click)="confirmStageUpload('modeling')"
+                                              [disabled]="!canConfirmStageUpload('modeling')">
+                                        <span>确认上传</span>
+                                      </button>
+                                    </div>
+                                  }
                                   <div class="uploaded-images-grid">
                                                 @for (img of getSpaceImages('modeling', space.id); track img.id) {
                                       <div class="uploaded-image-item" (click)="previewImage(img)">
@@ -1975,6 +1985,16 @@
                                                 </div>
                                               </div>
                                 } @else {
+                                  <!-- 确认上传按钮 -->
+                                  @if (canEditSection('delivery') && getSpaceImages('softDecor', space.id).length > 0) {
+                                    <div class="confirm-upload-section">
+                                      <button class="confirm-upload-btn" 
+                                              (click)="confirmStageUpload('softDecor')"
+                                              [disabled]="!canConfirmStageUpload('softDecor')">
+                                        <span>确认上传</span>
+                                      </button>
+                                    </div>
+                                  }
                                   <div class="uploaded-images-grid">
                                                 @for (img of getSpaceImages('softDecor', space.id); track img.id) {
                                       <div class="uploaded-image-item" (click)="previewImage(img)">
@@ -2121,6 +2141,16 @@
                                                 </div>
                                               </div>
                                             } @else {
+                                              <!-- 确认上传按钮 -->
+                                              @if (canEditSection('delivery') && getSpaceImages('rendering', space.id).length > 0) {
+                                                <div class="confirm-upload-section">
+                                                  <button class="confirm-upload-btn" 
+                                                          (click)="confirmStageUpload('rendering')"
+                                                          [disabled]="!canConfirmStageUpload('rendering')">
+                                                    <span>确认上传</span>
+                                                  </button>
+                                                </div>
+                                              }
                                               <div class="uploaded-images-grid">
                                                 @for (img of getSpaceImages('rendering', space.id); track img.id) {
                                                   <div class="uploaded-image-item" (click)="previewImage(img)">
@@ -2267,6 +2297,16 @@
                                                 </div>
                                               </div>
                                             } @else {
+                                              <!-- 确认上传按钮 -->
+                                              @if (canEditSection('delivery') && getSpaceImages('postProduction', space.id).length > 0) {
+                                                <div class="confirm-upload-section">
+                                                  <button class="confirm-upload-btn" 
+                                                          (click)="confirmStageUpload('postProduction')"
+                                                          [disabled]="!canConfirmStageUpload('postProduction')">
+                                                    <span>确认上传</span>
+                                                  </button>
+                                                </div>
+                                              }
                                               <div class="uploaded-images-grid">
                                                 @for (img of getSpaceImages('postProduction', space.id); track img.id) {
                                                   <div class="uploaded-image-item" (click)="previewImage(img)">

+ 45 - 0
src/app/pages/designer/project-detail/project-detail.scss

@@ -3153,6 +3153,51 @@
         line-height: 1.4;
       }
       
+      // 确认上传按钮区域
+      .confirm-upload-section {
+        margin-bottom: 12px;
+        padding: 8px;
+        background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
+        border-radius: 6px;
+        border: 1px solid #dee2e6;
+        
+        .confirm-upload-btn {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          width: 100%;
+          padding: 8px 16px;
+          background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
+          color: white;
+          border: none;
+          border-radius: 4px;
+          font-size: 13px;
+          font-weight: 600;
+          cursor: pointer;
+          transition: all 0.3s ease;
+          box-shadow: 0 2px 4px rgba(40, 167, 69, 0.2);
+          height: 32px;
+          
+          &:hover:not(:disabled) {
+            background: linear-gradient(135deg, #218838 0%, #1ea085 100%);
+            transform: translateY(-1px);
+            box-shadow: 0 4px 8px rgba(40, 167, 69, 0.3);
+          }
+          
+          &:active:not(:disabled) {
+            transform: translateY(0);
+            box-shadow: 0 2px 4px rgba(40, 167, 69, 0.2);
+          }
+          
+          &:disabled {
+            background: #6c757d;
+            cursor: not-allowed;
+            opacity: 0.6;
+            box-shadow: none;
+          }
+        }
+      }
+      
       // 上传后的图片网格
       .uploaded-images-grid {
         display: grid;

+ 63 - 0
src/app/pages/designer/project-detail/project-detail.ts

@@ -5162,6 +5162,69 @@ export class ProjectDetail implements OnInit, OnDestroy {
     return process.content[spaceId].images || [];
   }
   
+  // 确认阶段上传并推进工作流
+  confirmStageUpload(stageId: string): void {
+    const stageMap: { [key: string]: ProjectStage } = {
+      'modeling': '建模',
+      'softDecor': '软装', 
+      'rendering': '渲染',
+      'postProduction': '后期'
+    };
+    
+    const currentStage = stageMap[stageId];
+    if (!currentStage) return;
+    
+    // 检查当前阶段是否有上传的图片
+    const process = this.deliveryProcesses.find(p => p.id === stageId);
+    if (!process) return;
+    
+    const hasImages = Object.values(process.content).some(space => 
+      space.images && space.images.length > 0
+    );
+    
+    if (!hasImages) {
+      alert('请先上传图片再确认');
+      return;
+    }
+    
+    // 推进到下一阶段
+    const currentIndex = this.stageOrder.indexOf(currentStage);
+    if (currentIndex < this.stageOrder.length - 1) {
+      const nextStage = this.stageOrder[currentIndex + 1];
+      
+      // 更新当前阶段
+      this.currentStage = nextStage;
+      if (this.project) {
+        this.project.currentStage = nextStage;
+      }
+      
+      // 展开下一阶段
+      this.expandedStages[nextStage] = true;
+      
+      // 滚动到下一阶段
+      setTimeout(() => {
+        this.scrollToStage(nextStage);
+      }, 100);
+      
+      console.log(`阶段推进: ${currentStage} -> ${nextStage}`);
+    } else {
+      // 如果是最后一个阶段,标记为完成
+      console.log(`交付执行阶段完成: ${currentStage}`);
+      alert('交付执行阶段已完成!');
+    }
+  }
+  
+  // 检查是否可以确认阶段上传
+  canConfirmStageUpload(stageId: string): boolean {
+    // 检查是否有上传的图片
+    const process = this.deliveryProcesses.find(p => p.id === stageId);
+    if (!process) return false;
+    
+    return Object.values(process.content).some(space => 
+      space.images && space.images.length > 0
+    );
+  }
+  
   // 获取空间备注
   getSpaceNotes(processId: string, spaceId: string): string {
     const process = this.deliveryProcesses.find(p => p.id === processId);