扫码监听，输入框修改

src/plugin/KeyScaner.js

@@ -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 if (ev.key == "Delete" || ev.key == "Backspace") {
-        else {
+            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;
         }
     };

src/views/warehouse/IONewOrder.vue

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

src/views/warehouse/addHosOrder.vue

@@ -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) {
             //onInput事件在检测到回车键按下或在连续输入后超过500ms没有继续输入时触发
-            inputer.innerText += (text + "\n");
+            if (text.includes("delete")) {
-            console.log("--------" + text);
+                inputer.innerText = "";
-            // this.formData.code =
+                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();//别忘了给要监听的节点放置焦点，如果是div一类默认不具备焦点的节点需要给它加上“tabindex”属性。不建议传入document、Body等全局节点，可能会影响其它输入控件的流畅性。
 
@@ -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>
 
 

src/views/warehouse/addOrder.vue

@@ -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) {
             //onInput事件在检测到回车键按下或在连续输入后超过500ms没有继续输入时触发
-            inputer.innerText += (text + "\n");
+            if (text.includes("delete")) {
-            console.log("--------" + text);
+                inputer.innerText = "";
-            // this.formData.code =
+                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();//别忘了给要监听的节点放置焦点，如果是div一类默认不具备焦点的节点需要给它加上“tabindex”属性。不建议传入document、Body等全局节点，可能会影响其它输入控件的流畅性。
+
+
     },
     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>