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>

定义变量:

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

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

javascript 复制代码
const handleDialog = ()=>{
	showDialog.value = true
	let obj = {
		code: '',
		no: '',
		name: '',
		num: ''
	}
	tableDataDialog.value.push(obj)
}

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

javascript 复制代码
const save = ()=>{
		let length = tableDataDialog.value.length
		let size = new Set(tableDataDialog.value.map(item=>item.code)).size
		if(size !== length){
			ElMessage('物流号码不能重复')
			return
		}
		let obj = {}
		let len = tableDataDialog.value[0].code.toString().length
	tableData.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().length
				if(noLen < len){
					item.no = '0' + item.no//如果输入的为带00xx前缀的号码,自动生成要做补0操作,不然会把0自动去掉
					noLen++
				}
			}
			tableData.push(obj)
			showDialog.value = false
		}
	})
}
相关推荐
逐·風2 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#
Devil枫3 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
尚梦4 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
GIS程序媛—椰子4 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
前端青山4 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享5 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
程序媛小果5 小时前
基于java+SpringBoot+Vue的旅游管理系统设计与实现
java·vue.js·spring boot
从兄6 小时前
vue 使用docx-preview 预览替换文档内的特定变量
javascript·vue.js·ecmascript
凉辰6 小时前
设计模式 策略模式 场景Vue (技术提升)
vue.js·设计模式·策略模式
清灵xmf7 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询