添加音频播放和优化调拨明细查询方法

heshaofeng

2026-02-02 deb12fd2b06ccc821104aa475a8fb784c39dfb2c

 ÏîÄ¿´úÂë/WIDESEA_WMSClient/src/extension/inbound/extend/Pallet.vue

@@ -175,7 +175,7 @@
import http from '@/api/http.js';
import VolBox from '@/components/basic/VolBox.vue';

// é˜²æŠ–函数保持不变
// é˜²æŠ–函数
function debounce(func, wait) {
  let timeout;
  return function () {
@@ -218,6 +218,15 @@
      isSubmitting: false,
      palletGroupedBarcodes: {},

      // éŸ³é¢‘配置
      audioConfig: {
        successPath: '/assets/audio/success.mp3', // å¯¹åº” public ä¸‹çš„路径
        errorPath: '/assets/audio/error.mp3'
     },
      // ç¼“存音频实例，避免重复创建
      successAudio: null,
      errorAudio: null,

      totalStockSum: 0,
      totalStockCount: 0,
      uniqueUnit: '',
@@ -251,7 +260,11 @@
            trigger: 'change'
          }
        ]
      }
      },
      
      // æ–°å¢žï¼šé”®ç›˜äº‹ä»¶ç›‘听标记
      keyPressListenerAdded: false,
      isDialogClosing: false
    }
  },

@@ -272,6 +285,26 @@
  },
  
  watch: {
    // ç›‘听show变量变化
    show(newVal) {
      if (newVal === true) {
        console.log('弹框打开，重置数据');
        this.isDialogClosing = false;
        this.resetData();
        this.$nextTick(() => {
          setTimeout(() => {
            this.fetchUnpalletMaterialDetails();
            this.addKeyPressListener(); // æ·»åŠ é”®ç›˜äº‹ä»¶ç›‘听
          }, 300);
        });
      } else if (newVal === false && !this.isDialogClosing) {
        console.log('弹框关闭，移除事件监听');
        this.isDialogClosing = true;
        this.removeKeyPressListener(); // ç§»é™¤é”®ç›˜äº‹ä»¶ç›‘听
        this.resetData();
      }
    },
    
    visible(newVal, oldVal) {
      this.palletVisible = newVal;

@@ -306,15 +339,109 @@
  },
  
  mounted() {
    document.addEventListener('keypress', this.handleKeyPress);
    // ä¸åœ¨mounted时添加监听，在弹窗打开时添加
  },
  
  beforeDestroy() {
    document.removeEventListener('keypress', this.handleKeyPress);
    // ç¡®ä¿ç»„件销毁时移除监听
    this.removeKeyPressListener();
    this.clearAllTimers();

     this.removeKeyPressListener();
     this.clearAllTimers();
  
   //销毁音频实例
    this.successAudio = null;
    this.errorAudio = null;
  },
  
  methods: {

    /**
   * åˆå§‹åŒ–音频实例（懒加载，只创建一次）
   * @param {String} type - éŸ³é¢‘类型：success/error
   * @returns {Audio} éŸ³é¢‘实例
   */
  initAudioInstance(type) {
    if (type === 'success' && this.successAudio) {
      return this.successAudio;
    }
    if (type === 'error' && this.errorAudio) {
      return this.errorAudio;
    }
    
    const audioPath = type === 'success' 
      ? this.audioConfig.successPath 
      : this.audioConfig.errorPath;
    
    const audioInstance = new Audio(audioPath);
    
    // ç¼“存音频实例
    if (type === 'success') {
      this.successAudio = audioInstance;
    } else {
      this.errorAudio = audioInstance;
    }
    
    // éŸ³é¢‘加载失败回调（可选，用于调试）
    audioInstance.onerror = (err) => {
      console.error(`【${type} éŸ³é¢‘】加载失败`, err);
    };
    
    return audioInstance;
  },
  
  /**
   * æ’­æ”¾éŸ³é¢‘
   * @param {String} type - éŸ³é¢‘类型：success/error
   */
  playAudio(type) {
    try {
      const audioInstance = this.initAudioInstance(type);
      
      // é‡ç½®æ’­æ”¾è¿›åº¦ï¼ˆé¿å…é‡å¤æ’­æ”¾æ—¶éŸ³é¢‘未结束）
      audioInstance.currentTime = 0;
      
      // æ’­æ”¾éŸ³é¢‘（返回 Promise å¤„理播放结果，兼容部分浏览器限制）
      audioInstance.play().catch((err) => {
        console.warn('音频播放失败（可能是浏览器自动播放策略限制）', err);
      });
    } catch (err) {
      console.error('播放音频时发生异常', err);
    }
  },
  
  /**
   * æ’­æ”¾æˆåŠŸéŸ³é¢‘
   */
  playSuccessAudio() {
    this.playAudio('success');
  },
  
  /**
   * æ’­æ”¾å¤±è´¥éŸ³é¢‘
   */
  playErrorAudio() {
    this.playAudio('error');
  },
    // æ·»åŠ é”®ç›˜äº‹ä»¶ç›‘听
    addKeyPressListener() {
      if (!this.keyPressListenerAdded) {
        document.addEventListener('keypress', this.handleKeyPress);
        this.keyPressListenerAdded = true;
        console.log('键盘事件监听已添加');
      }
    },
    
    // ç§»é™¤é”®ç›˜äº‹ä»¶ç›‘听
    removeKeyPressListener() {
      if (this.keyPressListenerAdded) {
        document.removeEventListener('keypress', this.handleKeyPress);
        this.keyPressListenerAdded = false;
        console.log('键盘事件监听已移除');
      }
    },
    
    open() {
      this.show = true;
      this.orderNo = "";
@@ -322,6 +449,13 @@
      this.initLocationTypes();
      this.initwarehouseTypes();
      this.fetchUnpalletMaterialDetails();
      
      // å¼¹çª—打开时添加键盘事件监听
      this.$nextTick(() => {
        setTimeout(() => {
          this.addKeyPressListener();
        }, 100);
      });
    },
    
    validateLocationType(rule, value, callback) {
@@ -529,6 +663,8 @@
    },
    
    handleDialogClose() {
      // å…ˆç§»é™¤é”®ç›˜äº‹ä»¶ç›‘听
      this.removeKeyPressListener();
      this.show = false;
      this.resetData();
    },
@@ -665,6 +801,7 @@
        this.error = `条码 ${currentBarcode} å·²è¢«å½“前托盘组盘，请勿重复操作`;
        this.barcode = '';
        this.focusBarcodeInput();
        this.playErrorAudio();
        return;
      }

@@ -674,6 +811,7 @@
        .then(valid => {
          if (!valid) {
            this.isSubmitting = false;
            this.playErrorAudio();
            return;
          }
          
@@ -740,6 +878,8 @@
          this.scanCode = '';
          this.isScanning = false;

          this.playSuccessAudio();

          setTimeout(() => {
            this.focusBarcodeInput();
          }, 100);
@@ -797,6 +937,11 @@

    // å¤„理扫码枪输入
    handleKeyPress(event) {
      // æ£€æŸ¥å¼¹çª—是否显示
      if (!this.show || this.isDialogClosing) {
        return;
      }
      
      if (this.isManualInput || this.isSubmitting) {
        return;
      }