刷卡、扫码、插卡获取卡号，根据卡号请求数据；

业务需求：医院会进行刷卡 扫码 插卡等操作快速获取患者信息

一、刷卡和扫码

刷卡和扫码其实是同一种操作。刷卡/扫码和普通的键盘输入的区别就是：刷卡/扫码的速度快，而普通的键盘输入的速度慢。

<el-input
   v-model="form.cardNo"
   @keyup.native="($event) => {handleCardNoChange2($event)}"
   autofocus>
</el-input>

handleCardNoChange2(e, r, t) {
   this.keydown(e, r, t);
},

//监听键盘事件
keydown(e, r, t) {
  this.readCardFlag = false
  let nowdate = Date.now();
  let key = window.event.keyCode;//key=13或108时为键盘的enter键
  if (key == 13 || key == 108) {
    if (nowdate - (this.lastdate || 0) <= 30) {
      //距上次按键间隔小于30毫秒，则为扫码枪或刷卡输入
      this.readCardFlag = true //扫码标识
      this.lastdate = null;
      -----------------------------
      this.search('scanInput')
    }else{
      // 距上次按键间隔大于30毫秒，则为人工输入
      this.readCardFlag = false //扫码标识
      this.search('handInput')
    }
  } else {
    //console.log('键盘事件非enter键');
    this.readCardFlag = false
    this.lastdate = nowdate;
  }
},

更新：近日发现扫码的时候，现场确不触发 this.search('scanInput')函数，查明原因是因为扫码的时候设置了中文输入法将键盘的enter事件(keycode:13)吞了，所以没办法触发查询，改为英文就可以即可。但是用户不可能每次在扫码前都手动去切换输入法为英文，太不人性化了。

解决方式：查询参考VUE扫码枪中文输入法兼容自动回车事件(下)_条形码扫描后有回车事件_Jessie.Zhai的博客-CSDN博客

但感觉很麻烦，有更简单方式的可以交流！ 

二、插卡

插卡和刷卡是不一样的，刷卡可以直接获取到卡号，而插卡的卡一般是芯片卡，，而插卡是需要联调dll的接口去请求查询芯片卡的信息。

1、需要一个按钮触发读卡事件

2、触发读卡

<el-button
  type="primary"
  @click="readCard"
  :disabled="form.searchBtnDisabled">
    读卡
</el-button>

readCard(){
      this.insertCardFlag = true
      let nowDate = moment().startOf("day").format("YYYYMMDD");//20230908
      let nowTime = moment().format('YYYY-MM-DD HH:mm:ss');//2023-09-08 12:20:01
      let serialNum = 100000000 || Math.random().toString().slice(-9)
            if (localStorage.cardId) {
                serialNum = parseInt(localStorage.cardId) + 1;
            }
            localStorage.cardId = serialNum;
      let hospitalCode = '12345678800'
      let dataJson = {
            "jysj":nowTime,//2023-09-05 07:16:42
            "xxlxm":"S000",
            "xxfhm":"",
            "fhxx":"",
            "bbh":"0001",
            "msgid":  `${hospitalCode}${nowDate}${serialNum}`,//医疗机构代码11位+日期8位+流水号9位
            "xzqhdm":"",
            "jgdm":hospitalCode,//医疗机构代码
            "czybm":"4910",
            "czyxm":"秦红娟",
            "xxnr":{
                "cardtype":"1",
                "carddata":""
            },
            "jyqd":"10",
            "jyyzm":"",
            "zdjbhs":""
        }
      insertCard(JSON.stringify({Ab: JSON.stringify(dataJson)})).then(
          (res) => {
            let cardRes = JSON.parse(res)
              if(cardRes.xxnr && cardRes.xxnr?.kh){//查到卡号的时候才走查询
                this.form.cardNo = cardRes.xxnr?.kh//卡号
                this.insertCardRes = cardRes.xxnr
                this.search()
              }else{
                this.insertCardFlag = false
                this.$message.warning(cardRes.fhxx)
              }
          }
        ).catch((error) => {
          this.$message.error('读卡失败！请联系管理员')
          // 测试读卡接口：展示患者基本信息
          // let testPat = {
          //   xm:'测试111',
          //   xb:1,
          //   sfzh:'110101202311074158',
          //   lxdh:'13777778898',
          //   txdz:'上海市普陀区大渡河路',
          // }
          // this.$bus.$emit('showPatBasicInfo',testPat)
        })
    },