Vue中监听USB扫码枪触发操作

需求：用户需要扫二维码触发自动打开单据审核页面。

实现思路：

        1.二维码内容由单据单号生成

        2.USB扫码枪扫码输入时其实是模拟键盘快速输入 ，监听键盘输入

        3.对内容进行拼接， 按实际触发间隔来拼接

代码如下

var scanContent = '';

var lastScanTime = Date.now();

var submitInterval = 200;

var cutomFunc=null;

function keydownTask(event) {

 // 扫描事件正在进行中

 const now = Date.now();

 const interval = now - lastScanTime;

 if( interval > submitInterval){

  scanContent = '';

 }

    lastScanTime = Date.now();

    if (event.keyCode >= 65) {

      // 强制切换到英文输入法

      // event.preventDefault();

      // event.stopPropagation();

      // document.activeElement.blur();

    }

   

    if (event.keyCode === 13) {

      // 扫描事件已经结束

      console.log('扫描到的内容是：', scanContent);

      scanContent = '';

    } else {

      // 正常的键盘输入

      scanContent += event.key;

      setTimeout(() => {

        // 如果最后更新时间与上次时间一致则说明没有再此更新

        //let now = Date.now();

     

        let interval =now - lastScanTime;

        //console.log('触发时间', lastScanTime,now);

        if( lastScanTime == now){

         

         if(scanContent!=''){

          // 提交内容

          showTaskFlow(scanContent);

         }

        }

      }, 200);

    }

    lastScanTime = now;

}

function showTaskFlow(docNum){

  // Notification.info({

  //   duration: '4000',

  //   position: 'bottom-right',

  //   title: 'ToDoList',

  //   dangerouslyUseHTMLString: true,

  //   message: `打开任务 ${docNum}`

  // });

  // docNum 查询单据号对应的审批信息并弹出，如果没有找到信息或者单号不符合规则 则不弹出

  // 查询单号在不在代办任务中，不在则提示没有权限

  console.log('扫描到的内容是：', docNum);

  if(cutomFunc){

    cutomFunc(docNum);

  }

}

 

/**

 * 添加触发

 */

function addScanTrigger(func) {

  cutomFunc = func;

  window.addEventListener('keydown', keydownTask);

}

/**

 * 移除触发

 */

function removeScanTrigger() {

  window.removeEventListener('keydown', keydownTask);

}