现在需要实现一个功能:新增/删除某个施工人员,并填写它占有总工程的比例,不能超过100%。
功能1:限制单个人员的比例,输入框不能填写数字以外的内容,不能填写负数,也不能超过100%。可以使用oninput进行限制:
οninput="value=value.replace(/[^\d]/g,'')>100?100:value.replace(/[^\d]/g,'')"
通过value.replace方法将所有非数字替换成空,然后判断它是否超过100%。如果超过,则将其替换成100%。
功能2:添加新增/删除操作,用于增加施工人员以及对应的施工占比,其中vue部分如下:
<el-col :span="1"> <el-button type="danger" @click="deleteMan(item,index)">删除</el-button> </el-col> <el-col :span="1"> <el-button type="primary" @click="add" v-if="index == arrayData.length - 1">新增</el-button> </el-col>
其中arrayData为当前施工信息,这里数组不能为空。dataNum为当前计数:
arrayData:[{ id:0, realName:'', userId:'', userName:'', orgId:'', workRate:'' }], dataNum:0,
添加与删除部分代码,限制至少有一位人员参与:
deleteMan(item,index){ if(this.arrayData.length<=1){//如果只有一个输入框则不可以删除 this.$message.error('无法删除最后一名人员') return false } this.$confirm(`确定移除${item.realName}施工占比?`,'提示',{ confirmButtonText: '确定', cancleButtonText: '取消', type: 'danger' }).then(() => { this.arrayData.splice(index,1)//删除了数组中对应的数据也就将这个位置的输入框删除 this.dataNum-- }) }, add(item){ if(this.arrayData[this.dataNum].realName === ''){ this.$message.warning('请先填写上一位人员') return false } this.arrayData.push(//增加就push进数组一个新值 { id:++this.dataNum, realName:'', userId:'', //id userName:'', //账号 orgId:'', workRate:'' } ) },
功能3:限制所有施工人员的施工占比总和不能大于100%,首先是vue部分,通过函数进行计算:
<el-form-item label="施工占比"> <el-input v-model="item.workRate" οninput="value=value.replace(/[^\d]/g,'')>100?100:value.replace(/[^\d]/g,'')" @change="calculateWorkRate(item.id)"> <template slot="append">%</template> </el-input> </el-form-item>
限制施工占比的方法部分js代码,通过监控当前id内容的变化来计算是否超出100%:
calculateWorkRate(id){ let rate = 0; let over = 0; this.arrayData.forEach(item => { rate += item.workRate == '' ? 0 : parseInt(item.workRate) if(rate > 100) over = 100 - rate else over = 0 }) this.arrayData[id].workRate = parseInt(this.arrayData[id].workRate) + over },
最后是完整的vue部分,其中handleBtnAdd方法是选择对应施工人员:
<el-row v-for="(item,index) in arrayData" :key="item.id"> <el-col :span="10"> <el-form-item label="施工人员" > <el-input v-model="item.realName" :readonly="true"> <template slot="append" ><el-button type="primary" @click="handleBtnAdd">{{ "选择" }}</el-button></template> </el-input> </el-form-item> </el-col> <el-col :span="10"> <el-form-item label="施工占比"> <el-input v-model="item.workRate" οninput="value=value.replace(/[^\d]/g,'')>100?100:value.replace(/[^\d]/g,'')" @change="calculateWorkRate(item.id)"> <template slot="append">%</template> </el-input> </el-form-item> </el-col> <el-col :span="1" style="margin-left: 10px"> <el-button type="danger" @click="deleteMan(item,index)">删除</el-button> </el-col> <el-col :span="1" style="margin-left: 30px"> <el-button type="primary" @click="add" v-if="index == arrayData.length - 1">新增</el-button> </el-col> </el-row>