vue3输入单号和张数,自动生成连号的单号

需求: 输入连号事件,需要在表格中输入物流单号,物流号码,生成的数量,名称,点击确定自动生成固定数量的连号物流单号

1.页面布局

<div><el-button type="primary" size="default" @click="handleDialog">输入连号</el-button></div><br/><br/><el-table:data="tableData"style="width: 80vw; margin-bottom: 20px"border><el-table-column prop="code" label="快递代码" width="200"></el-table-column><el-table-column prop="no" label="快递单号"></el-table-column><el-table-column prop="name" label="名称"></el-table-column><!-- <el-table-column prop="optes" label="操作"></el-table-column> --></el-table>

弹出层代码:

<el-dialog v-model="showDialog"><el-table:data="tableDataDialog"style="width: 80vw; margin-bottom: 20px"border><el-table-column prop="code" label="快递代码" width="200"><template #default="{row}"><el-input v-model="row.code" maxlength="10"></el-input></template></el-table-column><el-table-column prop="no" label="快递单号"><template #default="{row}"><el-input v-model="row.no" maxlength="8"></el-input></template></el-table-column><el-table-column prop="name" label="名称"><template #default="{row}"><el-input v-model="row.name"></el-input></template></el-table-column><el-table-column prop="num" label="张数"><template #default="{row}"><el-input v-model="row.num" minlength="1"></el-input></template></el-table-column></el-table><el-button type="info" size="default" @click="save">确定</el-button></el-dialog>

定义变量:

const tableData = reactive([])//生成之后的table表格
const tableDataDialog = ref([])//弹出层的表格
const showDialog = ref(false)//控制弹出层显隐

点击输入连号自动先插入一条空数据,用于输入相应地内容

const handleDialog = ()=>{showDialog.value = truelet obj = {code: '',no: '',name: '',num: ''}tableDataDialog.value.push(obj)
}

点击保存时,将弹出层输入的单号,号码,和数量进行数据组装,然后放入到tableData中,关闭弹出层

const save = ()=>{let length = tableDataDialog.value.lengthlet size = new Set(tableDataDialog.value.map(item=>item.code)).sizeif(size !== length){ElMessage('物流号码不能重复')return}let obj = {}let len = tableDataDialog.value[0].code.toString().lengthtableData.value = []tableDataDialog.value.forEach((item)=>{for(var i=0;i<item.num;i++){obj = {code: item.code,no: item.no,name: item.name}item.no++item.no = item.no.toString()for(var j=0;j<len;j++){let noLen = item.no.toString().lengthif(noLen < len){item.no = '0' + item.no//如果输入的为带00xx前缀的号码,自动生成要做补0操作,不然会把0自动去掉noLen++}}tableData.push(obj)showDialog.value = false}})
}

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

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

相关文章

最新版阿里云Linux CentOS7 ecs-user用户安装Mysql8详细教程(超简单)

经过两天的踩坑后&#xff0c;终于成功安装&#xff0c;并找到了最快捷的安装方式。接下来就由我来给大家介绍不踩坑安装大法&#xff01; 一、下载Mysql 首先前往Mysql官网下载 MySQL官方下载地址 第一步&#xff0c;选择安装包&#xff0c;这是最关键的一步&#xff0c;选错安…

使用query请求数据出现500的报错

我在写项目的时候遇到了一个问题&#xff0c;就是在存商品id的时候我将它使用了JSON.stringify的格式转换了&#xff01;&#xff01;&#xff01;于是便爆出了500这个错误&#xff01;&#xff01;&#xff01; 我将JSON.stringify的格式去除之后&#xff0c;它就正常显示了&…

昇腾ACL应用开发之硬件编解码dvpp

1.前言 在我们进行实际的应用开发时&#xff0c;都会随着对一款产品或者AI芯片的了解加深&#xff0c;大家都会想到有什么可以加速预处理啊或者后处理的手段&#xff1f;常见的不同厂家对于应用开发的时候&#xff0c;都会提供一个硬件解码和硬件编码的能力&#xff0c;这也是抛…

Docker 命令详解:容器、镜像、网络和数据卷管理

文章目录 1. docker run2. docker pull3. docker images4. docker ps5. docker stop6. docker rm7. docker commit8. docker exec9. docker logs10. docker network11. docker volume12. docker save13. docker load14. docker tag15. docker search16. docker diff17. docker …

sql注入之sqli-labs/less-3 单引号加括号闭合

输入单引号试探&#xff1a; id1 报错信息里面出现 ) 说明闭合符合里面还有个 ) 再次试探&#xff1a;id1 ) order by 3 -- 查看回显位置&#xff1a; id-1%20%27)%20union%20select%201,2,3%20-- 查看数据库&#xff1a; id-1%20%27)%20union%20select%201,2,database()%2…

Kerberos协议攻防之黄金票据控制整个公司电脑

&#x1f449;重点内容&#xff1a; 1、网络认证、本地认证、域认证的优略势 2、域认证之Kerberos协议的认证流程详解 3、TGT、Krbtgt、KDC、TGS搞懂这些绕口的概念 4、深入理解黄金票据攻击Golden Ticket Attack 5、实战&#xff01;通过黄金票据控制内网中所有的电脑

DC-2靶机详解

写写自己打DC-2的过程 使用工具 kali DC-2的靶机下载地址为&#xff1a;https://www.vulnhub.com/entry/dc-2,311/ 环境配置。 Kali和DC-2都设置为NAT模式&#xff0c;都为仅主机模式也可以。 信息收集 arp-scan -l nmap -sn 192.168.236.0/24 获取靶机ip&#xff1a;192.16…

基于springboot+vue的工厂车间管理系统

博主主页&#xff1a;猫头鹰源码 博主简介&#xff1a;Java领域优质创作者、CSDN博客专家、阿里云专家博主、公司架构师、全网粉丝5万、专注Java技术领域和毕业设计项目实战&#xff0c;欢迎高校老师\讲师\同行交流合作 ​主要内容&#xff1a;毕业设计(Javaweb项目|小程序|Pyt…

【Linux】输入系统应用

# 前置知识 (1)输入子系统分为三层&#xff0c;分别是事件处理层、核心层、设备驱动层&#xff1b; (2)鼠标移动、键盘按键按下等输入事件都需要通过设备驱动层→核心层→事件处理层→用户空间&#xff0c;层层上报&#xff0c;直到应用程序; 事件处理层 (1)事情处理层主要是负…

【八】【SQL】子查询和where

显示与SMITH同一部门的员工 mysql> select *from emp where enameSMITH; ----------------------------------------------------------------------- | empno | ename | job | mgr | hiredate | sal | comm | deptno | --------------------------------…

Python调用C,python call c,pybind11

文章目录 前言1.将pybind11 clone至当前项目下的extern目录下2.在CmakeLists.txt中将pybind11项目包含3.接口cpp文件格式4.编译5.导入Python使用6.性能比较pybind11项目地址 前言 通过https://github.com/pybind/pybind11项目实现Python调用C/C代码 实现步骤 1.将pybind11 cl…

腾讯云4核8G服务器申请费用多少?性能如何?支持几个人?

腾讯云4核8G服务器支持多少人在线访问&#xff1f;支持25人同时访问。实际上程序效率不同支持人数在线人数不同&#xff0c;公网带宽也是影响4核8G服务器并发数的一大因素&#xff0c;假设公网带宽太小&#xff0c;流量直接卡在入口&#xff0c;4核8G配置的CPU内存也会造成计算…

大数据报告检测到风险等级太高是怎么回事呢?

随着金融风控越来越多元化&#xff0c;大数据作为新兴的技术被运用到贷前风控中去了&#xff0c;不少人也了解过自己的大数据&#xff0c;但是由于相关知识不足&#xff0c;看不懂报告&#xff0c;在常见的问题中&#xff0c;大数据检测到风险等级太高是怎么回事呢?小易大数据…

《javascript高级程序设计》学习笔记 | 21.2.错误处理

关注[前端小讴]&#xff0c;阅读更多原创技术文章 错误处理 相关代码 → try/catch 语句 ES3 新增了try/catch语句&#xff0c;基本语法与 Java 中的 try/catch 一样 try {// 可能出错的代码const a 3;a 4; } catch (error) {// 出错时执行的代码console.log("An er…

vsomeip源码剖析--00环境搭建

环境 Win11 WSL2 Ubuntu22.04安装依赖 sudo apt-get install cmake sudo apt-get install libboost-system1.71-dev libboost-thread1.71-dev libboost-log1.71-dev源码编译 获取源码 https://github.com/COVESA/vsomeip.git编译 cd vsomeip mkdir build cd build// 一般…

漫漫数学之旅035

文章目录 经典格言数学习题古今评注名人小传 - 黎勒•笛卡尔 经典格言 完美的数和完美的人是同样罕见的。——黎勒•笛卡尔&#xff08;Ren Descrates&#xff09; 完美的数和完美的人都是极为罕见的。这句话表达了一个哲学观点&#xff0c;即无论是在数学领域还是人类自身&am…

Spring框架相关问题

RabbitMQ相关问题 Spring框架相关问题 一、Spring容器中的Bean是线程安全的吗&#xff1f;二、如何保证Spring容器中的Bean是线程安全的呢&#xff1f;三、什么情况下会触发Spring事务回滚&#xff1f;四、如果事务方法抛出IOException&#xff0c;是否会触发Spring事务回滚&a…

Zookeeper学习2:原理、常用脚本、选举机制、监听器

文章目录 原理选举机制&#xff08;重点&#xff09;情况1&#xff1a;正常启动集群情况2&#xff1a;集群启动完&#xff0c;中途有机器挂了 监听器客户端向服务端写入数据客户端向服务端Leader节点写入客户端向服务端Follower节点写入 Paxos算法&#xff08;每个节点都可以提…

AMDGPU KFD Test 编译使用

ROCT-Thunk-Interface是一个用于在ROCm软件堆栈中提供设备无关性的层。它是ROCm的一部分,允许不同的硬件平台(如AMD GPU和Intel CPU)使用相同的API进行计算。 要安装ROCT-Thunk-Interface,首先需要创建一个新的目录,并进入该目录: mkdir rocm-build cd rocm-build然后,…

ng : 无法将ng项识别为 cmdlet、函数、脚本文件或可运行程序的名称

ng : 无法将“ng”项识别为 cmdlet、函数、脚本文件或可运行程序的名称”&#xff0c;出现这种错误&#xff0c;那说明你angular-cli没有下载所以环境变量里没有相应的东西 1、需要在cmd里输入npm install -g angular/cli 2、之后运行angular命令时还可能出现这种错误 “ng : …