vue项目 element UI input框扫码枪扫描过快 出现数据丢失问题(已解决二)

news2024/11/25 14:41:07

项目需求:
输入框要掉两个接口,根据第一个验证接口返回的code,弹不同的框,点击弹框确认再掉第二个接口
在这里插入图片描述
在这里插入图片描述
根据客户现场反应,扫描枪快速扫描会出现 料号前几位字符丢失 不完整的问题。于是开始了测试之路。

解决方案探索

1.首先考虑 ,可能是因为扫描过快,服务端接口还没返回过来,输入框就已经清空了值 导致条码有丢失字符的现象,所以我这边做了一个缓存,将输入框的值存到一个数组中去,定时上传到接口。 【x】
2.考虑到可能是因为vue原因影响,就将element的 el-input,改为原生js Input框。【x】
3.输入框加自动聚焦自定义指令,确保输入完成输入框不会失去焦点 【x】,因为el-input enter键触发完成后,输入框焦点还在。 【x】

4.最后分析,让客户给现场的服务器日志发送过来,查看前端传到接口中的 条码 是怎样的一个缺失状态。
通过查看 服务器日志,发现输入框在调取第一个验证接口时,条码发送的是完整的 并没有缺失,紧接着调取的第二个接口 条码就出现了问题。

**第二个接口传值时: 条码会多出来几位,导致第二次再去扫入,第二次的条码会丢失几位 **

查到问题 就好解决啦~

错误代码:

this.barcode: 输入框的值

verifyPutIn:输入框第一次调用的 验证接口

在这里插入图片描述

getInput():调用第二个接口的方法

在这里插入图片描述

问题就出在

第二个接口方法里,传参的时候, code:this.barcode,code 是又从输入框获取了一次值,这个时候就会有问题
因为扫码枪在快速扫描的时候,速度很快,字符过长,页面读取速度会有些慢,这时候重新从输入框获取值,这个值并不是刚开始的输入值了,可能会带有第二次扫入的几个字符

所以服务器日志中看到的, 第二个接口传过来的条码号会多字符,第二次条码号的前几位 字符****会丢失 就是这个原因啦 !!!

解决方法

第二个接口调取时code值 不要再从输入框获取,而是把第一个接口传的输入框值传过来,给第二个接口用

完整代码 如下

<el-input  v-model="barcode" clearable size="small" placeholder="请扫描条码编号" style="width: 200px" 
 class="filter-item" @keyup.enter.native="toQuery()"  />
  <script>
   export default {
     data() {
       return {
         barcode:''
       }
    } 
   methods: {
    toQuery() {
      let verifyParam = {};
      verifyParam = {
        barcode: this.barcode,
        name: this.pageOrderName,
      };
      this.barcode = null;
      verifyPutIn(verifyParam).then((res) => {
        if (res.code == 0) {
          this.getInput(verifyParam.barcode);
        } else {
          this.$confirm(
            res.msg, res.code == -1 ? "是否强制⼊库?" : "强制⼊库",
            {
              confirmButtonText: window.vm.$i18n.t("backTips.confirm"),
              cancelButtonText: window.vm.$i18n.t("backTips.cancel"),
              type: "warning",
            }
          ).then(() => {
            this.getInput(verifyParam.barcode);
          });
        }
      });
    },
    getInput(codeStr) {
      this.queryParams = {
        code: codeStr,
        name: this.pageOrderName,
      };
      operatePos(this.queryParams).then((res) => {
        if (res.code == 0) {
          this.name = "";
          // 开启自动播放
          this.audio.autoplay = true;
          this.audio.src = this.successUrl;
          if (res.data) {
            this.sonList = res.data;
            this.getNumList(this.sonList);
            this.poData = res.data.lastScanBoxCode.slice(
              res.data.lastScanBoxCode.length - 1
            );
            this.boxName = res.data.currentRfid.slice(0, 2);
            this.boxPartitionCounts = [];
            for (let i = 0; i < res.data.boxPartitionCounts.length; i++) {
              this.boxPartitionCounts.push({
                latticeNumber: this.boxNoList[i],
                amount: res.data.boxPartitionCounts[i],
              });
            }
            this.resSize = res.data.platsize;
          }
          this.$infoMsg.showInfoMsg(res.msg, this);
        } else {
          // 开启自动播放
          this.audio.autoplay = true;
          this.audio.src = this.errorUrl;
          this.$infoMsg.showErrorMsg(res.msg, this);
        }
      });
    }, 
 }
  </script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/48554.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

数据可视化,销量第一的新能源汽车是什么?比亚迪新能源汽车销量接近60万辆

去年以来&#xff0c;新能源汽车火热度席卷全球&#xff0c;中国的新能源汽车无论制造或者销售&#xff0c;数量增长迅猛。下面小编用一款数据可视化软件&#xff0c;带你用可视化数据解读高端制造背后&#xff0c;中国新能源汽车的具体销售情况。同样如果你工作上有数据报表需…

[附源码]计算机毕业设计springboot酒店物联网平台系统

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM mybatis Maven Vue 等等组成&#xff0c;B/S模式 M…

全国省市县 经纬度的 json数据(提供原文件),写Java代码,入库(提供代码)

目录 1 需求2 分析1 需求 有一个全国省市县 经纬度的 json数据,我想要使用代码入库 如何操作,代码咋写 2 分析 首先分析json结构, 一般拿到一个json数据,如果最外层不是 { } 包裹的,那么自己手动加一个 以上这个是自己加的,这个就是key 值就是list 集合 分析完json数…

【并发】深入理解Java线程的底层原理

线程基础知识 线程与进程 进程 操作系统会以进程为单位&#xff0c;分配系统资源&#xff08;CPU时间片、内存等资源&#xff09;&#xff0c;进程是资源分配的最小单位。 当一个程序被运行&#xff0c;从磁盘加载这个程序的代码至内存&#xff0c;这时就开启了一个进程。 线…

LDcad零件新增与导入

LDcad大颗粒小颗粒套装导入方法&#xff0c;以后LDcad也可以用套装搭建模型了。 LDcad大颗粒小颗粒套装导入方法&#xff0c; 以后LDcad也可以用套装搭建模型了。 有个遗憾&#xff0c;就是零件不全。 具体导入方法看下文。 我们可以看到。这些套装都有对应的图标。方便…

环境温湿度在线监测如何实现?有何应用场景?

温度、湿度等环境数据与人们生活生产息息相关。温湿度传感器作为能将温度量和湿度量转换成容易被测量处理的电信号的设备或装置&#xff0c;广泛应用于工农业生产、气象、环保、国防、科研等经常需要对环境或设备的温度与湿度进行测量的领域&#xff0c;因此也产生了对温湿度远…

ASP.NET Core 3.1系列(15)——Entity Framework Core之DB First

1、前言 本文开始介绍一些关于Entity Framework Core的内容。在EFCore中&#xff0c;常用的为DB First模式和Code First模式&#xff0c;下面就来介绍一下如何在EFCore中使用DB First模式生成实体类和数据库上下文。 2、创建测试数据库 在SQL Server中新建一个数据库Dao&…

2016-04《信息资源管理 02378》真卷解析,逐题解析+背诵技巧

本系列博客合计 21 篇&#xff0c;每篇都将解析一张《信息资源管理》真卷&#xff0c;并附带答案解析与背诵技巧。 全国 2016 年 4 月自学考试信息资源管理试题&#xff08;02378&#xff09; 单选题 1、按信息表现形式划分&#xff0c;信息可分为&#xff08;C&#xff09; …

JavaScript的Web api接口

JavaScript的Web api 文章目录JavaScript的Web api选中元素事件操作元素获取/元素内容获取/修改元素属性获取/修改表单元素属性实现一个显示/隐藏 密码的功能实现一个加减计算器复选框全选/全不选获取/修改样式属性点击文字放大字体实现白天模式与夜间模式的切换操作节点新增节…

【附源码】计算机毕业设计JAVA住房公积金筹集子系统的网站系统

【附源码】计算机毕业设计JAVA住房公积金筹集子系统的网站系统 目运行 环境项配置&#xff1a; Jdk1.8 Tomcat8.5 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xf…

3D漫游:所见即所得的形式,构建线上数字展厅

企业在数字化转型的大环境下&#xff0c;较为常用的当属数字展厅了&#xff0c;数字展厅能够为企业、行业协会、展销基地以及体验中心助力&#xff0c;以所见即所得的形式构建线上数字空间&#xff0c;满足企业的数字化展示和数字化营销。3D漫游&#xff0c;更加沉浸式的三维空…

使用 Hibernate Envers 进行实体审计

业务应用程序中的常见要求是在特定数据更改时存储版本控制信息;当某事发生变化时&#xff0c;谁改变了它&#xff0c;改变了什么。在这篇博文中&#xff0c;我们将介绍Hibernate Envers&#xff0c;它是Hibernate JPA库的一个组件&#xff0c;它为实体类提供了一个简单的审计/版…

【Linux网络配置实战】服务器Network静态路由配置

【Linux网络配置实战】服务器Network静态路由配置一、环境介绍1.环境规划2.实验目的二、检查各节点IP地址1.检查server01服务器上2.检查server02服务器网卡3.检查route01上的网卡三、在route01上启动IP包转发四、查看当前两节点互通情况1.查看server01和server02连通状态2.查看…

新手小白可以做什么互联网项目,副业项目应该怎么选择

现在网上的信息这么冗杂&#xff0c;有没有可靠的副业项目呢&#xff1f;怎样才能找到适合自己的副业呢&#xff1f; 说实话&#xff0c;在网上找副业并不难&#xff0c;搜索一下就会出来很多&#xff0c;但新手小白不知道如何选择&#xff0c;导致焦虑&#xff0c;一个重要的…

helm2.0安装及部署

一、helm简介 Helm是Deis (https://deis.com/) 开发的一个用于kubernetes的包管理器。每个包称为一个Chart&#xff0c;一个Chart是一个目录&#xff08;一般情况下会将目录进行打包压缩&#xff0c;形成name-version.tgz格式的单一文件&#xff0c;方便传输和存储&#xff09…

Linux 如何设置代理

安装部署 clash 是一款用 Go 语言开发的软件&#xff0c;所以我可以直接下载预编译的版本进行部署。 下载地址&#xff1a;https://github.com/Dreamacro/clash/releases/download/v1.8.0/clash-linux-amd64-v1.8.0.gz软件的作者提供了多种架构下预编译的二进制文件&#xff0…

67 - 经典问题解析五(指针的判别 构造中的异常)

---- 整理自狄泰软件唐佐林老师课程 1. 问题一 编写程序判断一个变量是不是指针&#xff1f; 1.1 指针的判别 C中仍然支持C语言中的可变参数函数C编译器的 匹配调用 优先级&#xff1a;重载函数 > 函数模板 > 变参函数 #include <iostream> #include <strin…

16-JavaSE基础巩固项目:拼图小游戏

阶段项目-拼图小游戏 一、项目介绍 1、目的 锻炼逻辑思维能力&#xff0c;让我们知道前面学习的知识点在实际开发中的应用场景。 1、为了学习一个新知识&#xff1a;GUI GUI全称&#xff1a;Graphical User Interface&#xff08;又称图形用户接口&#xff09;是指采用图形化…

三维地质建模数据处理

三维地质建模计算在地质工程、地球物理、矿产勘查等领域获得了广泛的应用&#xff0c;常用软件包括GOCAD、Surpac、XModel、DMine等。通过三维地质建模&#xff0c;既可以表达空间几何对象&#xff0c;也可以表现空间属性分布&#xff0c;进而实现地下三维空间可视化、地质解释…

win11 L2TP连接尝试失败,因为安全层在初始化与远程计算机的协商时遇到了一个处理错误

连接公司内网遇到的问题。。。。修改了&#xff08;不是翻墙&#xff0c;审核一下&#xff09; 在所有情况之前先尝试用手机热点试一下&#xff0c;排除网络问题&#xff0c; 今天遇到就移动的热点WiFi登不上公司内网&#xff0c;电信联通都行 所以先试试换个运营商热点看看…