vue3输入单号和张数如何自动生成连号的单号
作者:小端-吃瓜
最近遇到这样的需求输入连号事件,需要在表格中输入物流单号,物流号码,生成的数量,名称,点击确定自动生成固定数量的连号物流单号,本文重点介绍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 = true let obj = { code: '', no: '', name: '', num: '' } tableDataDialog.value.push(obj) }
点击保存时,将弹出层输入的单号,号码,和数量进行数据组装,然后放入到tableData中,关闭弹出层
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 } }) }
到此这篇关于vue3输入单号和张数,自动生成连号的单号的文章就介绍到这了,更多相关vue自动生成连号的单号内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!