erp-el-element/CommonInput/Barcodescan.vue

<template>
  <div>
    <!-- 阻止扫码枪的Enter事件自动提交el-form的提交特性 -->
    <!-- <el-form @submit.native.prevent>
        <el-form-item label="输入条码">
          <el-input
            v-model="barcode"
            type="text"
            placeholder="输入条码"
            @keyup.native="handleKeyUp"
          ></el-input>
        </el-form-item>
      </el-form> -->
  </div>
</template>
    <script>
let barcodeVue = {
  name: "erpBarcodescan",
  props: {
    shopName: {
      type: String,
    },
  },
  data() {
    return {
      realBarcode: "",
      keyupLastTime: undefined,
      name: undefined,
      regexRules: [],
    };
  },
  created() {
    let that = this;
    // 监听页面的keyup事件
    document.onkeyup = function (e) {
      that.handleKeyUp(e);
    };
    this.name = this.shopName;
    this.initRegexRules();
  },
  methods: {
    // 初始化条码规则（自定义）
    initRegexRules() {
      this.regexRules = [
        {
          regex: "/^IN(\\w|\\d)+$/",
          value: "putInStorageNumber",
        },
        {
          regex: "/^CH(\\w|\\d)+$/",
          value: "checkNumber",
        },
        {
          regex: "/^AL(\\w|\\d)+$/",
          value: "allocateNumber",
        },
        {
          regex: "/^\\d{12}$/",
          value: "orderNumber",
        },
        {
          regex: "/^SR(\\w|\\d)+$/",
          value: "transferNumber",
        },
        {
          regex: "/^\\d{12}-\\d{3}$/",
          value: "sendNo",
        },
        {
          regex: "/^PL\\d{10}$/",
          value: "wavePickingNumber",
        },
        {
          regex: "/^PL\\d{10}-\\d{3}$/",
          value: "wavePickingGroupNumber",
        },
        {
          regex: "/^(\\w|\\d)*-[\\w|\\d]*-\\d*-[A-Z]-\\d*/",
          value: "location",
        },
      ];
    },
    // 处理keyup事件
    handleKeyUp(e) {
      let gap = 0;
      if (this.keyupLastTime) {
        gap = new Date().getTime() - this.keyupLastTime;
        if (gap > 50) {
          gap = 0;
          this.realBarcode = "";
        }
      }
      this.keyupLastTime = new Date().getTime();
      // 输入法会触发keyup事件，key为Process，跳过即可
      if (e.key != "Process" && gap < 50) {
        if (e.key.trim().length == 1) {
          // 输入单个字母或者数字
          this.realBarcode += e.key;
        } else if (e.key.trim() == "Enter") {
          // 根据规则，判断barcode类型，返回数据（自定义规则）
          if (this.realBarcode) {
            let data = {
              type: this.barcodeRule(this.realBarcode),
              code: this.realBarcode,
              isLocal: this.isLocal(this.realBarcode),
            };
            this.$emit("handle", data);
            this.realBarcode = "";
          }
        }
      }
    },
    // 判断条码类型，如果没找到，则返回类型为barCode
    barcodeRule(barcode) {
      let value;
      this.regexRules.some((item, index) => {
        let regex = eval(item.regex);
        if (regex.test(barcode)) {
          value = item.value;
          return true;
        }
      });
      return value ? value : "barCode";
    },
    // 根据条码是否包含门店名，判断是否本地条码
    isLocal(barcode) {
      return this.name ? barcode.indexOf(this.name) != -1 : undefined;
    },
  },
};

export default { ...barcodeVue };
</script>