当前位置：首页 > news >正文

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

news 来源：原创 2024/5/15 11:27:28

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

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}})
}