提交

heshaofeng

10 天以前 b6a40a2d8fdcffb3accfc7e424c0726a87a59ddf

 ÏîÄ¿´úÂë/WIDESEA_WMSClient/src/views/outbound/BatchPickingConfirm.vue

@@ -586,62 +586,430 @@
    },

   openSplitDialog() {
      console.log('开始打开拆包弹窗');
      
      if (this.isOpeningDialog) {
        console.log('正在打开弹窗，跳过');
        return;
      }
      console.log('紧急修复版：打开拆包弹窗');
      
      if (!this.scanData.palletCode) {
        this.$message.warning('请先扫描托盘码');
        return;
      }
      
      this.isOpeningDialog = true;
      // 1. å…³é—­æ‰€æœ‰Vue弹窗
      this.closeAllDialogs();
      
      // 2. å¼ºåˆ¶ä»ŽDOM中移除所有弹窗
      setTimeout(() => {
        const dialogs = document.querySelectorAll('.custom-dialog-overlay');
        dialogs.forEach(dialog => {
          if (dialog.parentNode) {
            dialog.parentNode.removeChild(dialog);
          }
        });
        
        // å¦‚果已经存在手动弹窗，先移除
        if (this.manualDialog && this.manualDialog.parentNode) {
          this.manualDialog.parentNode.removeChild(this.manualDialog);
        }
        
        // 3. ç­‰å¾…一帧
        requestAnimationFrame(() => {
          // 4. ç›´æŽ¥åˆ›å»ºæ–°å¼¹çª—，不依赖Vue的响应式系统
          this.createManualSplitDialog();
        });
      }, 10);
    },
    
    // åˆ›å»ºæ‰‹åŠ¨æ‹†åŒ…弹窗
    createManualSplitDialog() {
      const newDialog = document.createElement('div');
      newDialog.className = 'custom-dialog-overlay emergency-fix';
      
      // ç”ŸæˆéšæœºID用于事件绑定
      const dialogId = 'manual-dialog-' + Date.now();
      newDialog.id = dialogId;
      
      // å­˜å‚¨å¼•ç”¨
      this.manualDialog = newDialog;
      
      // å¼¹çª—内容
      newDialog.innerHTML = `
        <div class="custom-dialog-wrapper">
          <div class="custom-dialog" style="width: 500px;">
            <div class="custom-dialog-header">
              <h3 style="margin: 0; color: #303133;">拆包操作</h3>
              <button class="close-button" onclick="document.getElementById('${dialogId}').remove()" style="
                font-size: 18px;
                color: #909399;
                padding: 0;
                width: 24px;
                height: 24px;
                display: flex;
                align-items: center;
                justify-content: center;
                background: none;
                border: none;
                cursor: pointer;
              ">×</button>
            </div>
            <div class="custom-dialog-body" style="padding: 20px;">
              <div style="margin-bottom: 15px;">
                <div style="display: flex; align-items: center; margin-bottom: 5px;">
                  <span style="width: 100px; text-align: right; padding-right: 12px; color: #606266;">订单编号:</span>
                  <input type="text" value="${this.scanData.orderNo}" disabled style="
                    flex: 1;
                    padding: 8px 12px;
                    border: 1px solid #dcdfe6;
                    border-radius: 4px;
                    background-color: #f5f7fa;
                    color: #909399;
                  ">
                </div>
              </div>
              
              <div style="margin-bottom: 15px;">
                <div style="display: flex; align-items: center; margin-bottom: 5px;">
                  <span style="width: 100px; text-align: right; padding-right: 12px; color: #606266;">托盘编号:</span>
                  <input type="text" value="${this.scanData.palletCode}" disabled style="
                    flex: 1;
                    padding: 8px 12px;
                    border: 1px solid #dcdfe6;
                    border-radius: 4px;
                    background-color: #f5f7fa;
                    color: #909399;
                  ">
                </div>
              </div>
              
              <div style="margin-bottom: 15px;">
                <div style="display: flex; align-items: center; margin-bottom: 5px;">
                  <span style="width: 100px; text-align: right; padding-right: 12px; color: #606266;">原条码:</span>
                  <div style="flex: 1; display: flex; align-items: center; gap: 10px;">
                    <input type="text" id="${dialogId}-barcode" placeholder="扫描原条码" style="
                      flex: 1;
                      padding: 8px 12px;
                      border: 1px solid #dcdfe6;
                      border-radius: 4px;
                    ">
                    <button id="${dialogId}-viewChain" style="
                      padding: 8px 16px;
                      background: #409eff;
                      color: white;
                      border: none;
                      border-radius: 4px;
                      cursor: pointer;
                      white-space: nowrap;
                    ">查看拆包链</button>
                  </div>
                </div>
              </div>
              
              <div style="margin-bottom: 15px;">
                <div style="display: flex; align-items: center; margin-bottom: 5px;">
                  <span style="width: 100px; text-align: right; padding-right: 12px; color: #606266;">物料编码:</span>
                  <input type="text" id="${dialogId}-materiel" disabled style="
                    flex: 1;
                    padding: 8px 12px;
                    border: 1px solid #dcdfe6;
                    border-radius: 4px;
                    background-color: #f5f7fa;
                    color: #909399;
                  ">
                </div>
              </div>
              
              <div style="margin-bottom: 15px;">
                <div style="display: flex; align-items: center; margin-bottom: 5px;">
                  <span style="width: 100px; text-align: right; padding-right: 12px; color: #606266;">剩余数量:</span>
                  <input type="text" id="${dialogId}-remain" disabled style="
                    flex: 1;
                    padding: 8px 12px;
                    border: 1px solid #dcdfe6;
                    border-radius: 4px;
                    background-color: #f5f7fa;
                    color: #909399;
                  ">
                </div>
              </div>
              
              <div style="margin-bottom: 15px;">
                <div style="display: flex; align-items: center; margin-bottom: 5px;">
                  <span style="width: 100px; text-align: right; padding-right: 12px; color: #606266;">拆包数量:</span>
                  <div style="flex: 1;">
                    <input type="number" id="${dialogId}-splitQty" value="1" min="0.01" step="0.01" style="
                      width: 100%;
                      padding: 8px 12px;
                      border: 1px solid #dcdfe6;
                      border-radius: 4px;
                    ">
                  </div>
                </div>
              </div>
            </div>
            
            <div class="custom-dialog-footer" style="
              padding: 10px 20px 20px;
              text-align: right;
              border-top: 1px solid #ebeef5;
            ">
              <button id="${dialogId}-cancel" style="
                padding: 9px 15px;
                background: white;
                color: #606266;
                border: 1px solid #dcdfe6;
                border-radius: 4px;
                cursor: pointer;
                margin-right: 10px;
              ">取消</button>
              <button id="${dialogId}-confirm" style="
                padding: 9px 15px;
                background: #409eff;
                color: white;
                border: none;
                border-radius: 4px;
                cursor: pointer;
              ">确认拆包</button>
            </div>
          </div>
        </div>
      `;
      
      // æ·»åŠ æ ·å¼
      newDialog.style.cssText = `
        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: 999999;
      `;
      
      // å¼¹çª—容器样式
      const wrapper = newDialog.querySelector('.custom-dialog-wrapper');
      if (wrapper) {
        wrapper.style.position = 'relative';
        wrapper.style.zIndex = '1000000';
      }
      
      // å¼¹çª—内容样式
      const dialog = newDialog.querySelector('.custom-dialog');
      if (dialog) {
        dialog.style.background = 'white';
        dialog.style.borderRadius = '4px';
        dialog.style.maxWidth = '90vw';
        dialog.style.maxHeight = '90vh';
        dialog.style.boxShadow = '0 2px 12px 0 rgba(0, 0, 0, 0.1)';
        dialog.style.overflow = 'auto';
      }
      
      // å¼¹çª—头部样式
      const header = newDialog.querySelector('.custom-dialog-header');
      if (header) {
        header.style.display = 'flex';
        header.style.justifyContent = 'space-between';
        header.style.alignItems = 'center';
        header.style.padding = '20px 20px 10px';
        header.style.borderBottom = '1px solid #ebeef5';
      }
      
      document.body.appendChild(newDialog);
      console.log('紧急弹窗已创建');
      
      // ç»‘定事件
      this.bindManualDialogEvents(dialogId);
      
      // è‡ªåŠ¨èšç„¦åˆ°æ¡ç è¾“入框
      setTimeout(() => {
        const barcodeInput = document.getElementById(`${dialogId}-barcode`);
        if (barcodeInput) {
          barcodeInput.focus();
          // æ·»åŠ å›žè½¦é”®ç›‘听
          barcodeInput.addEventListener('keyup', (event) => {
            if (event.key === 'Enter') {
              this.onManualSplitBarcodeScan(dialogId);
            }
          });
        }
      }, 100);
    },
    
    // ç»‘定手动弹窗事件
    bindManualDialogEvents(dialogId) {
      const vm = this; // ä¿å­˜Vue实例引用
      
      // æŸ¥çœ‹æ‹†åŒ…链按钮
      const viewChainBtn = document.getElementById(`${dialogId}-viewChain`);
      if (viewChainBtn) {
        viewChainBtn.onclick = () => {
          const barcodeInput = document.getElementById(`${dialogId}-barcode`);
          if (barcodeInput && barcodeInput.value.trim()) {
            vm.viewSplitChainFromManualDialog(barcodeInput.value.trim(), dialogId);
          } else {
            ElMessage.warning('请先输入条码');
          }
        };
      }
      
      // å–消按钮
      const cancelBtn = document.getElementById(`${dialogId}-cancel`);
      if (cancelBtn) {
        cancelBtn.onclick = () => {
          const dialog = document.getElementById(dialogId);
          if (dialog && dialog.parentNode) {
            dialog.parentNode.removeChild(dialog);
          }
        };
      }
      
      // ç¡®è®¤æ‹†åŒ…按钮
      const confirmBtn = document.getElementById(`${dialogId}-confirm`);
      if (confirmBtn) {
        confirmBtn.onclick = () => {
          vm.handleManualSplitPackage(dialogId);
        };
      }
      
      // æ¡ç è¾“入框变化事件
      const barcodeInput = document.getElementById(`${dialogId}-barcode`);
      if (barcodeInput) {
        // é˜²æŠ–处理
        let timeout;
        barcodeInput.addEventListener('input', () => {
          clearTimeout(timeout);
          timeout = setTimeout(() => {
            if (barcodeInput.value.trim()) {
              vm.onManualSplitBarcodeScan(dialogId);
            }
          }, 500);
        });
      }
    },
    
    // æ‰‹åŠ¨å¼¹çª—的条码扫描处理
    async onManualSplitBarcodeScan(dialogId) {
      const barcodeInput = document.getElementById(`${dialogId}-barcode`);
      if (!barcodeInput || !barcodeInput.value.trim()) return;
      
      const barcode = barcodeInput.value.trim();
      
      try {
        // æ–¹æ³•1: ä½¿ç”¨ setTimeout ç¡®ä¿å¼‚步执行
        setTimeout(() => {
          console.log('执行弹窗打开逻辑');
        const res = await http.post('/api/OutboundBatchPicking/split-package-info', {
          orderNo: this.scanData.orderNo,
          palletCode: this.scanData.palletCode,
          barcode: barcode
        });

        if (res.status) {
          // æ›´æ–°ç‰©æ–™ç¼–码
          const materielInput = document.getElementById(`${dialogId}-materiel`);
          if (materielInput) {
            materielInput.value = res.data.materielCode || '';
          }
          
          // å…ˆå…³é—­æ‰€æœ‰å¼¹çª—
          this.closeAllDialogsImmediately();
          // æ›´æ–°å‰©ä½™æ•°é‡
          const remainInput = document.getElementById(`${dialogId}-remain`);
          if (remainInput) {
            remainInput.value = res.data.remainQuantity || 0;
          }
          
          // ä½¿ç”¨ requestAnimationFrame ç¡®ä¿åœ¨ä¸‹ä¸€å¸§æ‰“å¼€
          requestAnimationFrame(() => {
            console.log('设置弹窗状态为 true');
            
            // é‡ç½®è¡¨å•
            this.resetSplitForm();
            this.splitForm.orderNo = this.scanData.orderNo;
            this.splitForm.palletCode = this.scanData.palletCode;
            
            // å…³é”®ï¼šç›´æŽ¥è®¾ç½®å¼¹çª—状态
            this.showCustomSplitDialog = true;
            
            console.log('弹窗状态已设置，等待DOM更新');
            
            // ä½¿ç”¨ nextTick ç¡®ä¿DOM更新完成
            this.$nextTick(() => {
              console.log('DOM更新完成，弹窗应该显示了');
              this.isOpeningDialog = false;
              
              // å°è¯•èšç„¦åˆ°è¾“入框
              setTimeout(() => {
                const input = this.$refs.splitFormRef?.$el?.querySelector('input');
                if (input) {
                  input.focus();
                  console.log('输入框已聚焦');
                }
              }, 100);
            });
          });
        }, 0);
        
          // æ›´æ–°æ‹†åŒ…数量（默认为1，不超过剩余数量）
          const splitQtyInput = document.getElementById(`${dialogId}-splitQty`);
          if (splitQtyInput) {
            const maxQty = res.data.remainQuantity || 0;
            splitQtyInput.max = maxQty;
            const currentVal = parseFloat(splitQtyInput.value) || 1;
            if (currentVal > maxQty) {
              splitQtyInput.value = Math.min(1, maxQty);
            }
          }
        } else {
          ElMessage.error(res.message || '获取拆包信息失败');
        }
      } catch (error) {
        console.error('打开拆包弹窗出错:', error);
        this.isOpeningDialog = false;
        console.error('获取拆包信息失败:', error);
        ElMessage.error('获取拆包信息失败');
      }
    },
    
    // ä»Žæ‰‹åŠ¨å¼¹çª—查看拆包链
    viewSplitChainFromManualDialog(barcode, dialogId) {
      // å…ˆå…³é—­æ‰‹åŠ¨å¼¹çª—
      const dialog = document.getElementById(dialogId);
      if (dialog && dialog.parentNode) {
        dialog.parentNode.removeChild(dialog);
      }
      
      // å»¶è¿Ÿä¸€ä¸‹ï¼Œç„¶åŽæ‰“å¼€Vue的拆包链弹窗
      setTimeout(() => {
        this.viewSplitChain(barcode);
      }, 50);
    },
    
    // å¤„理手动弹窗的拆包操作
    async handleManualSplitPackage(dialogId) {
      const barcodeInput = document.getElementById(`${dialogId}-barcode`);
      const splitQtyInput = document.getElementById(`${dialogId}-splitQty`);
      
      if (!barcodeInput || !barcodeInput.value.trim()) {
        ElMessage.warning('请输入原条码');
        return;
      }
      
      if (!splitQtyInput || !splitQtyInput.value || parseFloat(splitQtyInput.value) <= 0) {
        ElMessage.warning('请输入有效的拆包数量');
        return;
      }
      
      const originalBarcode = barcodeInput.value.trim();
      const splitQuantity = parseFloat(splitQtyInput.value);
      
      try {
        // æ˜¾ç¤ºåŠ è½½çŠ¶æ€
        const confirmBtn = document.getElementById(`${dialogId}-confirm`);
        if (confirmBtn) {
          confirmBtn.disabled = true;
          confirmBtn.textContent = '处理中...';
        }
        
        const res = await http.post('/api/OutboundBatchPicking/split-package', {
          orderNo: this.scanData.orderNo,
          palletCode: this.scanData.palletCode,
          originalBarcode: originalBarcode,
          splitQuantity: splitQuantity
        });
        
        if (res.status) {
          ElMessage.success('拆包成功');
          
          // å…³é—­æ‰‹åŠ¨å¼¹çª—
          const dialog = document.getElementById(dialogId);
          if (dialog && dialog.parentNode) {
            dialog.parentNode.removeChild(dialog);
          }
          
          // é‡æ–°åŠ è½½æ•°æ®
          await this.loadPalletData();
        } else {
          ElMessage.error(res.message || '拆包失败');
          
          // æ¢å¤æŒ‰é’®çŠ¶æ€
          if (confirmBtn) {
            confirmBtn.disabled = false;
            confirmBtn.textContent = '确认拆包';
          }
        }
      } catch (error) {
        console.error('拆包失败:', error);
        ElMessage.error('拆包失败');
        
        // æ¢å¤æŒ‰é’®çŠ¶æ€
        const confirmBtn = document.getElementById(`${dialogId}-confirm`);
        if (confirmBtn) {
          confirmBtn.disabled = false;
          confirmBtn.textContent = '确认拆包';
        }
      }
    },
      closeAllDialogsImmediately() {
@@ -910,11 +1278,26 @@
    closeAllDialogs() {
      this.activeDialog = null;
      // ç¡®ä¿æ‰€æœ‰å¼¹çª—状态都被重置
// å…³é—­Vue弹窗
      this.showCustomSplitDialog = false;
      this.showRevertSplitDialog = false;
      this.showBatchReturnDialog = false;
      this.showEmptyPalletDialog = false;
      this.showSplitChainDialog = false;
      
      // å…³é—­æ‰‹åŠ¨å¼¹çª—
      if (this.manualDialog && this.manualDialog.parentNode) {
        this.manualDialog.parentNode.removeChild(this.manualDialog);
        this.manualDialog = null;
      }
      
      // ç§»é™¤æ‰€æœ‰ç´§æ€¥å¼¹çª—
      const emergencyDialogs = document.querySelectorAll('.emergency-fix');
      emergencyDialogs.forEach(dialog => {
        if (dialog.parentNode) {
          dialog.parentNode.removeChild(dialog);
        }
      });
    },

    // å›žåº“相关方法
@@ -1318,4 +1701,140 @@
    width: 100%;
  }
}

/* åŽŸæœ‰çš„样式保持不变 */
.OutboundPicking-container {
  padding: 20px;
}

.scanner-form {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.scanner-form .el-input {
  width: 200px;
}

.summary-info {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.table-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  padding: 0 10px;
}

.selection-count {
  font-size: 12px;
  color: #909399;
}

/* åŽŸæœ‰çš„自定义弹窗样式 */
.custom-dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}

.custom-dialog-wrapper {
  position: relative;
  z-index: 2001;
}

.custom-dialog {
  background: white;
  border-radius: 4px;
  width: 500px;
  max-width: 90vw;
  max-height: 90vh;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  overflow: auto;
}

.custom-dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 20px 10px;
  border-bottom: 1px solid #ebeef5;
}

.custom-dialog-header h3 {
  margin: 0;
  color: #303133;
}

.close-button {
  font-size: 18px;
  color: #909399;
  padding: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.close-button:hover {
  color: #409EFF;
  background-color: transparent;
}

.custom-dialog-body {
  padding: 20px;
}

.custom-dialog-footer {
  padding: 10px 20px 20px;
  text-align: right;
  border-top: 1px solid #ebeef5;
}

.custom-dialog-footer .el-button {
  margin-left: 10px;
}

@media (max-width: 768px) {
  .custom-dialog {
    width: 95vw;
    margin: 10px;
  }
  
  .scanner-form {
    flex-direction: column;
    align-items: stretch;
  }
  
  .scanner-form .el-input {
    width: 100%;
  }
}

/* æ–°å¢žï¼šæ‰‹åŠ¨å¼¹çª—的按钮悬停效果 */
:deep(button) {
  transition: all 0.3s;
}

:deep(button:hover) {
  opacity: 0.8;
}

:deep(button:active) {
  opacity: 0.6;
}
</style>