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

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

1.页面布局

输入连号
	


	
		
		
		
		
		
	
1
2
3
4
5
6
7
8
9
10
11
12
13

弹出层代码：

		
			
				
			
			
				
			
			
				
			
			
				
			
			
		
		确定
	
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

定义变量：

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

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

const handleDialog = ()=>{
	showDialog.value = true
	let obj = {
		code: '',
		no: '',
		name: '',
		num: ''
	}
	tableDataDialog.value.push(obj)
}
1
2
3
4
5
6
7
8
9
10

点击保存时，将弹出层输入的单号，号码，和数量进行数据组装，然后放入到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
		}
	})
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31