vue el-input 扫码枪扫码添加数据

最新推荐文章于 2024-11-11 14:22:37 发布

DudleyLi

最新推荐文章于 2024-11-11 14:22:37 发布

阅读量4.4k

点赞数 7

文章标签： vue.js javascript

本文链接：https://blog.csdn.net/weixin_43934420/article/details/113916858

版权

在这里插入图片描述

<el-input ref="sm_input" v-model="qrcode"  placeholder="请点击输入框聚焦....." class="sm_input" :autofocus="true" @input="inputSaoMa" ></el-input>

/**
 * 点击处方外流
 */
 handleDrain () {
      this.rowData = []
      this.showInlineDialog = true
      clearInterval(this.loopTimer)
      this.loopTimer = null
      // 时时聚焦
      this.loopTimer = setInterval(() => {
        this.$nextTick(() => {
          // 扫码聚焦
          this.$refs['sm_input'].focus()
        })
      }, 300)
    },

/**
 * 扫码输入中
 */
    inputSaoMa (val) {
      // setTimeout定时器的作用是，等待扫码枪输入完，拿到完整的二维码信息，再调接口（扫码枪输入速度大概8~20毫秒，手动输速度大概是80毫秒），否则拿不到完整的二维信息。
      if (val === '') return false
      this.isShow = false
      clearTimeout(this.endTimeout)
      this.endTimeout = null
      this.endTimeout = setTimeout(() => {
        if (this.qrcode === val) {
          clearTimeout(this.endTimeout)
          console.log('输入完毕')
          this.isShow = true
          this.isReadOnly = true
          // 用二维码信息去请求数据
          this.decode({ code: val })
        }
      }, 500)
    },

/**
 * 解码接口
 */
    async decode (data) {
      const res = await decode(data)
      this.qrcode = ''
      if (res.code !== 200) {
        this.$message.error('二维码解析错误，请核对后重新扫码')
      } else {
        if (this.rowData.length > 0) {
          // 判断去重
          let isReuse = false
          this.rowData.map(item => {
            // 交替判断是否存在相同字符串（多次扫码二维码处理）
            let str = item.rawData
            let str2 = res.data.rawData
            if (str.indexOf(str2) != -1) {
              isReuse = true
              return false
            }
            if (str2.indexOf(str) != -1) {
              isReuse = true
              return false
            }
          })
          console.log(isReuse)
          if (!isReuse) {
            this.rowData.push(res.data)
          } else {
            this.$message.warning('该处方单已存在')
          }
        } else {
          this.rowData.push(res.data)
        }
      }
    },