erp-el-element/CommonInput/Barcodescan.vue

134 lines
3.5 KiB
Vue
Raw Normal View History

2024-05-06 15:14:21 +08:00
<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>