扫码监听,输入框修改

master
anthonywj 3 years ago
parent dbc416cd9d
commit 29f94afbbd

@ -5,7 +5,7 @@
* 20200421
* 1.0
*/
const KeyScaner = /** @class */ (function () {
const KeyScaner = /** @class */ (function () {
function KeyScaner(_dom) {
this.keybufs = [];
this.altBuf = [];
@ -15,12 +15,14 @@
* 在收集到文本输入时触发
* @param text 收集到的连续文本
*/
this.onInput = function (text) { };
this.onInput = function (text) {
};
this.dom = _dom;
_dom.addEventListener('keydown', this.onKeyDown.bind(this));
_dom.addEventListener('keyup', this.onKeyUp.bind(this));
this.interval = setInterval(this.onTick.bind(this), 100);
}
KeyScaner.prototype.appendChar = function (c) {
this.keybufs.push(c);
};
@ -30,41 +32,40 @@
if (ev.shiftKey || ev.ctrlKey || ev.metaKey) {
return;
}
}
else if (ev.key == "Shift") {
} else if (ev.key == "Shift") {
if (ev.altKey || ev.ctrlKey || ev.metaKey) {
return;
}
this.isShift = true;
}
else if (ev.key == "Enter") {
} else if (ev.key == "Enter") {
if (ev.shiftKey || ev.altKey || ev.ctrlKey || ev.metaKey) {
return;
}
console.log("监听到回车键。。。。。。。。。。。。。。。。。。。");
this.appendChar("\r");
this.completeInput(); //立即完成输入
}
else {
} else if (ev.key == "Delete" || ev.key == "Backspace") {
console.log("监听到删除键。。。。。。。。。。。。。。。。。。。");
this.dom.innerTex = "";
this.appendChar("delete");
this.completeInput(); //立即完成输入
} else {
if (ev.key.length == 1) {
var charCode = ev.key.charCodeAt(0);
if (charCode >= 48 && charCode <= 57) {
if (ev.altKey) {
this.altBuf.push(ev.key);
}
else {
} else {
this.appendChar(ev.key);
}
}
else if ((charCode >= 65 && charCode <= 90) || (charCode >= 97 && charCode <= 122)) {
} else if ((charCode >= 65 && charCode <= 90) || (charCode >= 97 && charCode <= 122)) {
//忽略大小写锁定键直接通过SHIFT键判断大小写
if (ev.shiftKey) {
this.appendChar(ev.key.toUpperCase());
}
else {
} else {
this.appendChar(ev.key.toLowerCase());
}
}
else {
} else {
this.appendChar(ev.key);
}
}
@ -81,8 +82,7 @@
this.appendChar(c);
this.altBuf = [];
}
}
else if (ev.key == "Shift") {
} else if (ev.key == "Shift") {
this.isShift = false;
}
};

@ -331,7 +331,7 @@ export default {
page: 1,
status: 10,
limit: 10,
locStorageCode:null,
locStorageCode: null,
},
checkStatus: {
'-1': "草稿",

@ -181,20 +181,28 @@
</el-row>
<el-row :gutter="20">
<el-col :span="2">
<el-col :span="3">
<div class="ao-text">
<span>条码</span>
<el-link
@click.native.stop="scanChange()"
target="_blank">{{ scanText }}
</el-link>
</div>
</el-col>
<el-col :span="16">
<el-form-item prop="code">
<el-input
v-if="!isScan"
@focus="getInputFocus($event)"
@keypress.enter.native="enterKey($event)"
v-model="formData.code"
ref='inputRef'
id="inputer"
v-model="formData.code"
></el-input>
<div id="inputer" tabindex="0" v-if="isScan"></div>
<!-- <input type="text" id="inputer" ime-mode="disabled" tabindex="0">-->
</el-form-item>
</el-col>
<el-col :span="2">
@ -210,6 +218,11 @@
</el-row>
<!-- <div>-->
<!-- <input type="text" id="inputer" ime-mode="disabled" tabindex="0" >-->
<!-- </div>-->
<!-- <div id="inputer" tabindex="0"></div>-->
<el-row :gutter="20">
<el-col :span="16" style="margin-left: 40px">
<el-checkbox v-model="sitcomScan"></el-checkbox>
@ -218,8 +231,6 @@
<div class="text item" style="margin-left: 30px"> 条码数量{{ total }}
</div>
</el-col>
</el-row>
<el-table v-loading="loading" :data="codeArray" style="width: 100%;" max-height="350" height="350"
:row-style="rowStyle"
@ -382,6 +393,8 @@ export default {
{required: true, message: "请输入条码", trigger: "blur"}
],
},
isScan: true,
scanText: "扫码录入:",
corpOrderIdDisabled: false,
codeArray: [],
total: 0,
@ -478,7 +491,10 @@ export default {
this.formData.corpOrderId = this.formData.corpOrderId.trim();
this.actionEnable = true;
if (event == null) {
this.$refs.inputRef.focus();
// this.$refs.inputRef.focus();
var inputer = document.getElementById("inputer");
this.formData.code = inputer.innerText.replace("\r", "");
inputer.focus();
} else event.target.select();
if (this.$isBlank(this.formData.action)) {
this.$message.warning("请选择单据类型!");
@ -607,6 +623,16 @@ export default {
});
},
scanChange() {
this.isScan = !this.isScan;
if (this.isScan) {
this.scanText = "扫码录入:";
} else {
this.scanText = "手动录入:";
}
},
unitChange(row) {
console.log(row);
this.formData.fromCorpId = row.erpId;
@ -644,6 +670,8 @@ export default {
},
getInputFocus(event) {
event.currentTarget.select();
// var inputer = document.getElementById("inputer");
// inputer.focus();
},
tableSelection() {
this.$refs.multipleTable.clearSelection();
@ -884,13 +912,24 @@ export default {
event.preventDefault();
event.stopPropagation();
};
var that = this;
var inputer = document.getElementById("inputer");
window.sc = new A.KeyScaner(inputer);//DOM
sc.onInput = function (text) {
//onInput500ms
inputer.innerText += (text + "\n");
console.log("--------" + text);
// this.formData.code =
if (text.includes("delete")) {
inputer.innerText = "";
that.formData.code = "";
return;
}
if (that.sitcomScan) {
inputer.innerText = inputer.innerText + text;//.replace("\r", "")
console.log(" inputer.innerText" + inputer.innerText);
} else {
inputer.innerText = text;
that.formData.code = inputer.innerText;
that.addCode(null);
}
};
inputer.focus();//divtabindexdocumentBody
@ -951,6 +990,31 @@ export default {
margin-top: 10px;
}
#inputer {
width: 100%;
min-height: 30px;
background-color: white;
border: #d0d0d0;
border-style: solid;
border-width: 0.1px;
color: #4a4a4a;
}
#inputer:focus {
width: 100%;
min-height: 30px;
background-color: white;
border: #0080FF;
border-style: solid;
border-width: 0.1px;
color: #4a4a4a;
}
.ime-disabled {
ime-mode: disabled;
}
</style>

@ -112,32 +112,42 @@
</el-card>
<el-card>
<el-row :gutter="20">
<el-col :span="2">
<el-col :span="3">
<div class="ao-text">
<span>条码</span>
<el-link
@click.native.stop="scanChange()"
target="_blank">{{ scanText }}
</el-link>
</div>
</el-col>
<el-col :span="19">
<el-col :span="16">
<el-form-item prop="code">
<el-input
v-if="!isScan"
@focus="getInputFocus($event)"
@keypress.enter.native="enterKey($event)"
v-model="formData.code"
ref='inputRef'
@focus="getInputFocus($event)"
v-model="formData.code"
></el-input>
</el-form-item>
<div id="inputer" tabindex="0" v-if="isScan"></div>
<!-- <input type="text" id="inputer" ime-mode="disabled" tabindex="0">-->
</el-form-item>
</el-col>
<el-col :span="2">
<el-button
type="primary"
size="small"
@click.native.stop="addCode()"
style="height: 31px; margin-left: 2px"
>确定
style="height: 31px; margin-left: 20px"
>添加
</el-button
>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="16" style="margin-left: 40px">
@ -148,7 +158,6 @@
</div>
</el-col>
</el-row>
<el-table v-loading="loading" :data="codeArray" style="width: 100%;" max-height="350" height="350"
:row-style="rowStyle"
@ -311,6 +320,8 @@ export default {
{required: true, message: "请输入条码", trigger: "blur"}
],
},
isScan: true,
scanText: "扫码录入:",
visiblV: 0,
corpOrderIdDisabled: false,
codeArray: [],
@ -358,7 +369,15 @@ export default {
});
},
scanChange() {
this.isScan = !this.isScan;
if (this.isScan) {
this.scanText = "扫码录入:";
} else {
this.scanText = "手动录入:";
}
},
saveOrder() {
if (this.formData.billType == null || this.formData.billType == '') {
this.$message.error('未选择扫码单据类型');
@ -401,7 +420,10 @@ export default {
},
addCode(event) {
if (event == null) {
this.$refs.inputRef.focus();
// this.$refs.inputRef.focus();
var inputer = document.getElementById("inputer");
this.formData.code = inputer.innerText.replace("\r", "");
inputer.focus();
} else event.target.select();
if (this.$isBlank(this.formData.billType)) {
this.$message.warning("请选择单据类型!");
@ -693,15 +715,29 @@ export default {
event.preventDefault();
event.stopPropagation();
};
var that = this;
var inputer = document.getElementById("inputer");
window.sc = new A.KeyScaner(inputer);//DOM
sc.onInput = function (text) {
//onInput500ms
inputer.innerText += (text + "\n");
console.log("--------" + text);
// this.formData.code =
if (text.includes("delete")) {
inputer.innerText = "";
that.formData.code = "";
return;
}
if (that.sitcomScan) {
inputer.innerText = inputer.innerText + text;//.replace("\r", "")
console.log(" inputer.innerText" + inputer.innerText);
} else {
inputer.innerText = text;
that.formData.code = inputer.innerText;
that.addCode(null);
}
};
inputer.focus();//divtabindexdocumentBody
},
created() {
this.formData.code = '';
@ -745,8 +781,7 @@ export default {
},
};
</script>
<style>
<style scoped>
.ao-text {
width: 100%;
font-size: 13px;
@ -755,6 +790,27 @@ export default {
text-align: right;
margin-top: 10px;
}
#inputer {
width: 100%;
min-height: 30px;
background-color: white;
border: #d0d0d0;
border-style: solid;
border-width: 0.1px;
color: #4a4a4a;
}
#inputer:focus {
width: 100%;
min-height: 30px;
background-color: white;
border: #0080FF;
border-style: solid;
border-width: 0.1px;
color: #4a4a4a;
}
</style>

Loading…
Cancel
Save