VUE实现PDA设备的扫码功能

1、实现需求

按下PDA设备的扫描键，扫描成功后将扫描到的编码值自动填充到输入框内，点击确定按钮将编码通过接口传递到后端。代码如下：

<template>
  <div>
    <input class="input" ref="searchInput" v-model="codeValue" placeholder="请输入条形码"/>
    <div class="btn">
      <button @click="submitBtn()">确定</button>
    </div>
  </div>
</template>

2、执行方法

接口请求需要安装axios，安装命令如下：

npm install axios

<script>
import axios from 'axios'
export default {
  data() {
    return {
      codeValue: '',
      code: '',
      lastTime: '',
      nextTime: '',
      lastCode: '',
      nextCode: '',
      dtmainId: ''
    }
  },
  created() {
    // 自动获取input输入框焦点
    this.$nextTick( () => {
        this.$refs.searchInput.focus();
    })
    // 模拟用户按下键盘按钮事件，触发扫描方法
    window.document.onkeypress = (e) => {
      if (window.event) { // IE
        this.nextCode = e.keyCode
      } else if (e.which) { // Netscape/Firefox/Opera
        this.nextCode = e.which
      }
 
      if (e.which === 13) { // 键盘回车事件
        if (this.code.length < 3) return // 扫码枪的速度很快，手动输入的时间不会让code的长度大于2，所以这里不会对扫码枪有效
        console.log('扫码结束。')
        console.log('条形码：', this.code)
        this.parseQRCode(this.code) // 获取到扫码枪输入的内容，做别的操作
        this.lastCode = ''
        this.lastTime = ''
        return
      }
 
      this.nextTime = new Date().getTime()
      if (!this.lastTime && !this.lastCode) {
        this.code = '' // 清空上次的条形码
        this.code += e.key
        console.log('扫码开始---', this.code)
      }
      if (this.lastCode && this.lastTime && this.nextTime - this.lastTime > 500) { // 当扫码前有keypress事件时,防止首字缺失
        this.code = e.key
        console.log('防止首字缺失。。。', this.code)
      } else if (this.lastCode && this.lastTime) {
        this.code += e.key
        console.log('扫码中。。。', this.code)
      }
      this.lastCode = this.nextCode
      this.lastTime = this.nextTime
    }
  },
  methods: {
    parseQRCode(code) {
      if (code.length === 13) {
        // 处理自己的逻辑
        this.$emit('barCode', code) //通知父组件
      } else if (code.length === 23) {
        console.log('B类条码:' + code)
      } else if (code.length === 0) {
        console.log('请输入条码！')
      } else {
        alert('条码不合法：' + code)
      }
      this.codeValue = code
    },
    // 提交数据
    submitBtn(){
      // 发送网络请求
      let that = this;
      axios.get('http://10.66.53.11:30003/receive/emergency?receiveNo=' + this.codeValue).then(function (response) {
          console.log(response);
          alert('提交成功！')
          that.codeValue = ''
      }).catch(function (error) {
          console.log(error);
          alert('提交失败！')
          that.codeValue = ''
      });
    }
  }
}
</script>

3、样式设置

<style>
  .input{
    height: 30px;
  }
  .btn{
    margin-top: 15px;
  }
  .btn button{
    width: 50px;
    height: 30px;
    background-color: #409EFF;
    color: #fff;
    border: none;
    border-radius: 4px;
  }
</style>

4、效果预览