134 lines
3.5 KiB
Vue
134 lines
3.5 KiB
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: "Barcodescan",
|
||
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>
|
||
|