SJ,XJ,RKJ优化

xwt

2025-09-25 67d42a761ea34624cfb2de3cbb38f37a319d2631

 pages/QC/RKJ/Add.vue

@@ -240,6 +240,7 @@
            Bom用料清单
         </button>
         <button class="action-btn small" @click="viewAttachmentInfo">查看附件信息</button>
         <button class="action-btn small danger" @click="showDeleteConfirmDialog" v-if="formData.id && formData.fsubmit != 1">删除单据</button>
         <button class="action-btn small" @click="saveRemarks" v-if="formData.fsubmit != 1">添加不合格描述</button>
         <button class="action-btn small primary" @click="submitInspection"
            v-if="formData.fsubmit != 1 && tableData.length > 0">提交检验</button>
@@ -419,6 +420,32 @@
            </div>
         </view>
      </view>

      <!-- 删除确认弹窗 -->
      <view v-if="showDeleteConfirm" class="overlay">
         <view class="popup delete-confirm-popup">
            <h3 class="delete-confirm-title">⚠️ 确认删除</h3>
            <div class="delete-confirm-divider"></div>
            <div class="delete-confirm-content">
               <view class="delete-warning-icon">🗑️</view>
               <view class="delete-warning-text">您确定要删除此检验单吗？</view>
               <view class="delete-warning-detail">删除后将无法恢复，请谨慎操作！</view>
               <view class="delete-countdown">
                  <view class="countdown-text">确认按钮将在 <text class="countdown-number">{{ deleteCountdown }}</text> 秒后可用</view>
                  <view class="countdown-progress">
                     <view class="countdown-bar" :style="{ width: countdownProgress + '%' }"></view>
                  </view>
               </view>
            </div>
            <div class="delete-confirm-actions">
               <button class="delete-confirm-btn cancel-btn" @click="cancelDelete">取消</button>
               <button class="delete-confirm-btn confirm-btn" 
                  :disabled="deleteCountdown > 0" 
                  :class="{ 'disabled': deleteCountdown > 0 }"
                  @click="confirmDelete">确认删除</button>
            </div>
         </view>
      </view>
   </view>
</template>

@@ -499,6 +526,12 @@
            workshopIndex: 0,
            pstypeOptions: ['', '特采/让步使用', '挑选/返工使用', '退货', '待判'],
            pstypeIndex: 0,
				
            // 删除确认相关数据
            showDeleteConfirm: false,
            deleteCountdown: 5,
            countdownProgress: 0,
            deleteTimer: null,
         };
      },
      onLoad(options) {
@@ -550,6 +583,53 @@
            } else {
               return statusMap['rejected'] || '不合格';
            }
         },

         // 显示删除确认弹窗
         showDeleteConfirmDialog() {
            this.showDeleteConfirm = true;
            this.deleteCountdown = 5;
            this.countdownProgress = 0;
            this.startDeleteCountdown();
         },
			
         // 开始倒计时
         startDeleteCountdown() {
            this.deleteTimer = setInterval(() => {
               this.deleteCountdown--;
               this.countdownProgress = ((5 - this.deleteCountdown) / 5) * 100;
					
               if (this.deleteCountdown <= 0) {
                  clearInterval(this.deleteTimer);
                  this.deleteTimer = null;
               }
            }, 1000);
         },
			
         // 取消删除
         cancelDelete() {
            this.showDeleteConfirm = false;
            if (this.deleteTimer) {
               clearInterval(this.deleteTimer);
               this.deleteTimer = null;
            }
            this.deleteCountdown = 5;
            this.countdownProgress = 0;
         },
			
         // 确认删除
         confirmDelete() {
            if (this.deleteCountdown > 0) {
               return;
            }
				
            this.showDeleteConfirm = false;
            if (this.deleteTimer) {
               clearInterval(this.deleteTimer);
               this.deleteTimer = null;
            }
				
            this.removeXJ();
         },

         removeXJ() {
@@ -2622,6 +2702,15 @@
      background-color: #2980b9;
   }

   .action-btn.danger {
      background-color: #e74c3c;
      color: #fff;
   }

   .action-btn.danger:hover {
      background-color: #c0392b;
   }

   /* 小尺寸按钮样式 */
   .action-btn.small {
      padding: 10px 12px;
@@ -3097,4 +3186,145 @@
      flex-direction: column;
      align-items: center;
   }

   /* 删除确认弹窗样式 */
   .delete-confirm-popup {
      width: 90vw;
      max-width: 400px;
      max-height: 70vh;
      display: flex;
      flex-direction: column;
   }

   .delete-confirm-title {
      font-size: 20px;
      font-weight: 700;
      color: #e74c3c;
      margin-bottom: 8px;
      text-align: center;
      letter-spacing: 1px;
   }

   .delete-confirm-divider {
      height: 2px;
      background: linear-gradient(90deg, #e74c3c 0%, #c0392b 100%);
      margin-bottom: 20px;
   }

   .delete-confirm-content {
      text-align: center;
      margin-bottom: 20px;
   }

   .delete-warning-icon {
      font-size: 48px;
      margin-bottom: 16px;
      animation: shake 0.5s ease-in-out infinite alternate;
   }

   @keyframes shake {
      0% { transform: translateX(-2px); }
      100% { transform: translateX(2px); }
   }

   .delete-warning-text {
      font-size: 18px;
      font-weight: 600;
      color: #2c3e50;
      margin-bottom: 8px;
   }

   .delete-warning-detail {
      font-size: 14px;
      color: #7f8c8d;
      margin-bottom: 20px;
      line-height: 1.4;
   }

   .delete-countdown {
      background: #f8f9fa;
      border-radius: 8px;
      padding: 16px;
      margin: 16px 0;
      border: 1px solid #e9ecef;
   }

   .countdown-text {
      font-size: 14px;
      color: #495057;
      margin-bottom: 8px;
      text-align: center;
   }

   .countdown-number {
      font-weight: 700;
      color: #e74c3c;
      font-size: 16px;
   }

   .countdown-progress {
      width: 100%;
      height: 6px;
      background: #e9ecef;
      border-radius: 3px;
      overflow: hidden;
   }

   .countdown-bar {
      height: 100%;
      background: linear-gradient(90deg, #e74c3c, #c0392b);
      border-radius: 3px;
      transition: width 1s ease;
   }

   .delete-confirm-actions {
      display: flex;
      gap: 12px;
      justify-content: center;
   }

   .delete-confirm-btn {
      padding: 12px 24px;
      border: none;
      border-radius: 8px;
      font-size: 16px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      min-width: 120px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
   }

   .delete-confirm-btn.cancel-btn {
      background: linear-gradient(135deg, #95a5a6, #7f8c8d);
      color: white;
   }

   .delete-confirm-btn.cancel-btn:hover {
      background: linear-gradient(135deg, #7f8c8d, #6c7b7d);
      transform: translateY(-1px);
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
   }

   .delete-confirm-btn.confirm-btn {
      background: linear-gradient(135deg, #e74c3c, #c0392b);
      color: white;
   }

   .delete-confirm-btn.confirm-btn:hover:not(.disabled) {
      background: linear-gradient(135deg, #c0392b, #a93226);
      transform: translateY(-1px);
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
   }

   .delete-confirm-btn.disabled {
      background: #bdc3c7;
      color: #7f8c8d;
      cursor: not-allowed;
      transform: none;
      box-shadow: none;
   }
</style>