对接扫码枪

src/components/ScanEntry.vue

@@ -1,6 +1,7 @@
 <template>
     <div class="BarCodeScannerDiv">
-        <input required="" type="text" class="input" v-model.trim="scanEntryData" ref="scanInput">
+        <input required="" type="text" class="input" v-model.trim="scanEntryData" ref="scanInput" @keydown="handleScanInput">
+        <i v-show="scanEntryData" class="el-icon-circle-close cleanInputIcon"  @click="clearData()"></i>
         <span class="highlight"></span>
         <span class="bar"></span>
         <label>{{label}}</label>
@@ -8,6 +9,7 @@
 </template>
   
   <script>
+
   export default {
         name: 'scanEntry',
         data() {
@@ -19,48 +21,65 @@
             label:{
                 type: String,
                 default: '',
+            },
+            onFocus:{
+                type: Boolean,
+                default: false
             }
-        },
 
-        mounted() {
-            this.setFocus();
-            this.$refs.scanInput.addEventListener('keydown', this.handleScanInput);
         },
 
+        watch: {
+            onFocus:{
+                handler(newValue){
+                    if(newValue){                    
+                        this.setFocus();                    
+                    }
+                },
+                immediate: true
+            }
+              
+        },
+      
         beforeDestroy() {
             this.$refs.scanInput.removeEventListener('keydown', this.handleScanInput);
+            console.log('scanEntry beforeDestroy');
         },
         methods: {
             setFocus() {
                 this.$nextTick(() => {
-                this.$refs.scanInput.focus();
-                });
+                    this.$refs.scanInput.focus();
+                },1000);
             },
 
             handleScanInput(event) {
 
-            const input = event.target;
-
-            const inputValue = input.value;
-
-            this.scanEntryData = input.value;
+                const input = event.target;
 
+                const inputValue = input.value;
 
-            if (event.key === 'Enter') {
+                this.scanEntryData = inputValue;
+           
+                if (event.key === 'Enter') {
+                    this.$emit('scanEntryFun', inputValue);
+                    
+                    setTimeout(() => {
 
-                setTimeout(() => {
+                        input.value = '';
 
-                    input.value = '';
+                        this.scanEntryData = '';
 
-                    this.scanEntryData = '';
+                    }, 1000);
 
-                }, 100);
+                }
 
-                this.$emit('scanEntryFun', inputValue);
+            },
 
+            clearData() {
+                this.scanEntryData = '';
+                this.showData = '';
+                this.$refs.scanInput.focus();
             }
-
-            },
     },
   
 }
@@ -159,4 +178,13 @@ label {
   background: transparent;
  }
 }
+
+.cleanInputIcon{
+ font-size: 20px;
+  color: gray;
+  position: absolute;
+  top: 15px;
+  left: 95%;
+  z-index: 990;
+}
 </style>

src/views/major/productionIn.vue

@@ -74,8 +74,8 @@
       </parentTable>
     </y-page-list-layout>
     <el-dialog :visible.sync="warehouseDialog" width="25%" center top="35vh" custom-class="doWarehouseClass"
-      @closed="cleanWareHouseProductionType()">
-      <ScanEntry ref="scanEntry" @scanEntryFun="handleScanEntry" label="请扫描二维码或输入产品号" />
+      @closed="cleanWareHouseProduction()">
+      <ScanEntry ref="scanEntry" @scanEntryFun="handleScanEntry" label="请扫描二维码或输入产品号" :onFocus="warehouseDialog"/>
       <span slot="footer" class="dialog-footer">
         <el-button @click="warehouseDialog = false">取 消</el-button>
         <el-button type="primary" @click="doWareHouse()">确 定</el-button>
@@ -181,8 +181,9 @@ export default {
         }
         return '报告';
     },
-    cleanWareHouseProductionType() {
+    cleanWareHouseProduction() {
       this.scanEntryData = null;
+      this.$refs.scanEntry.clearData();
     },
     handleScanEntry(scanData) {
       this.scanEntryData = scanData;
@@ -197,6 +198,7 @@ export default {
         this.$api.businessProduction.commonWareHouse(productionNo).then(res=>{
           if (res.code === 200 && res.data){
               this.$message({type:'success',message:"操作成功"});
+              this.$refs.scanEntry.clearData();
           }
         })
       }else{