pc端接入扫码枪录入商品

很多人在做涉及到仓储业务的后台系统的时候,会涉及到接入扫码枪,其实扫码枪并没有想象中的那么难,今天就来记录一下我是如何接入扫码枪的
不论是手持式的扫码枪还是小滚筒式扫描枪或者平台式扫描枪,其原理都是一样的,都可以看作是一个键盘在自动输入条码/二维码解析出来的内容,ok,理论存在,可以实践

DOM结构

  <div>
    <input
      ref={ref => (this.password = ref)}
      type="password"
      autoComplete="new-password"
      style={{ height: "28px", width: "100%", opacity: 0 }}
      onKeyUp={this.keyup}
      onChange={this.handleChangeScanInput}
      value={scanOriginalValue}
      id="scanInput"
      onBlur={() => this.mouseEvent()}
    />
  </div>
  <div>
{/*这里要在state中存一下当前输入框的焦点状态,用来展示重新获取焦点的按钮方法*/}
    {this.state.isShowFouceBtn && (
      <Button onClick={this.handleSetFocus}>继续录入</Button>
    )}
  </div>
</div>

1. 为什么要用password?

因为扫码枪是一个键盘,有的条码内包含英文字符,如果是中文输入法的话,就会输入汉字,这是不对的,鉴于password的特殊性,它输入的内容只能是英文,所以要用密码框(如果感觉不好看可以给隐藏掉)。

2. 为什么要有继续录入?

涉及到业务的特殊性,我的这个使用场景大多数在仓库,可能会误触到鼠标,这样的话就会失去焦点,进而导致录入不上,所以要有重新获取输入框焦点的方法

公共utils方法

/**
 * 将扫码获取的url参数解析出来返回对象格式
 * @param {String} url 扫码获取的url
 * @return {Object} obj 解析出来的参数
 */
export const getUrlParams = url => {
  let obj = {};
  if (url) {
    let formateUrl = url.slice(url.indexOf('?'));
    let index = formateUrl.indexOf('?');
    if (index !== -1) {
      let str = formateUrl.substr(1);
      let arr = str.split('&');
      for (let i = 0; i < arr.length; i++) {
        obj[arr[i].split('=')[0]] = arr[i].split('=')[1];
      }
    }
  }
  return obj;
}

js逻辑

// 鼠标事件
mouseEvent = () => {
  this.setState({
    isShowFouceBtn: true
  });
};

// 重置当前扫码信息
resetScanStateData = () => {
  setTimeout(() => {
    this.setState(
      {
        scanOriginalValue: "",
        scanValue: "",
        parsingProgress: 0,
        showParsingProgress: false
      },
      () => {
        this.password.focus();
      }
    );
  }, 500);
};

// 键盘事件
keyup = e => {
  if (e.keyCode === 13) {
    const urlParams = getUrlParams(this.state.scanOriginalValue);
    const { scanList, list } = this.state;
    if (urlParams.type === "1") {
      // 查重 (业务需求 需要查重两次)
      let scanDeduplicationIndex = scanList.findIndex(
        item => item.barCode === urlParams.barCode
      );
      let documentIndex = list.findIndex(
        item => item.barCode === urlParams.barCode
      );
      if (scanDeduplicationIndex !== -1) {
        message.error("当前扫描设备与扫码录入设备重复！");
        this.resetScanStateData();
        return;
      }
      if (documentIndex !== -1) {
        message.error("当前扫描设备与单据明细已录入设备重复！");
        this.resetScanStateData();
        return;
      }
      this.setState(
        {
          scanValue: urlParams.barCode
        },
        () => {
          // 调用接口
          this.queryScanData({ barCode: urlParams.barCode });
        }
      );
    } else {
      message.error("未知条码!");
      this.resetScanStateData();
    }
  }
};

// 键盘事件
handleChangeScanInput = e => {
  const { parsingProgress } = this.state;
  console.log(parsingProgress);
  this.setState({
    scanOriginalValue: e.target.value,
    isShowParsingProgress: true
  });
};

// 获取焦点
handleSetFocus = () => {
  this.password.focus();
  this.setState({
    isShowFouceBtn: false
  });
};

为什么要监听e.keyCode === 13?

为了提高录入效率,扫码枪设置了回车换行的功能,当扫码枪解析完条码/二维码内容后,会帮我们按下回车键,这个时候我们就可以将已经解析的内容添加到我们的list中去

下面是我的扫码枪的配置,品牌不同配置不同,仅供参考

此文章仅供交流学习