VUE多选框多选人员自定义分配积分

本文介绍了一个积分分配系统的设计实现,该系统支持平均分配与自由分配两种模式,并详细展示了如何通过前端技术实现人员的选择与积分的自动计算。文章还涵盖了如何处理用户交互事件,如积分分配类型更改时的响应及积分分配的验证。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

<!-- 多选框-->
<el-form ref="form" :model="form" label-width="100px" style="margin-top:30px">
  <el-form-item  label="可分配积分">
    <el-input :disabled="true" v-model="totalScore" style="width: 300px"></el-input>
  </el-form-item>
  <el-form-item  label="分配类型">
    <el-radio-group @change="typeOfAllocation" v-model="radio">
      <el-radio  label="1">平均分配</el-radio>
      <el-radio  label="2">自由分配</el-radio>
    </el-radio-group>
  </el-form-item>
  <el-form-item label="选择人员">
    <el-checkbox-group v-model="checkedUsers" @change="handleCheckedUsersChange">
      <el-checkbox   v-for="(items,Index) in users" :label="items.username"         :key="Index">
        {{items.username}}
        <el-input :disabled="items.disabled" type="number" v-model="items.value">
        </el-input>
        <!-- readonly=" true" -->
      </el-checkbox>
    </el-checkbox-group>
  </el-form-item>
</el-form>
form:{},
arr:[],
//分配方式
radio: "1",
//多选框选中
checkedUsers: [],
//多选框列表
users:[ ],
//可分配积分
totalScore:1000,

<!-- 查询人员组装多选框数据-->
async editUserScoreDlg(){
  let result = await this.$http.get('/user/listByUserId', {
    userId: this.multipleSelection.userId
  });
  this.personOptions = result.data
  for(var i=0;i<this.personOptions.length;i++){
    this.personOptions[i].disabled=true;
    this.personOptions[i].value=null;
  }
  this.users = JSON.parse(JSON.stringify(this.personOptions));
  this.userScoreDialogVisible=true;
},

typeOfAllocation(val) {
  if(val == 1) {
    var snum = 0;
    for(var i = 0; i<this.users.length;i++) {
      this.users[i].disabled = true;//平均分配输入框禁用
      this.users[i].value = null;//清除缓存
      for(var j = 0; j < this.checkedUsers.length;j++) {
        if(this.users[i].username == this.checkedUsers[j]) {
          if( snum < this.arr.length) {
            this.users[i].value=this.arr[snum];
            var user=this.users[i];
            this.$set(this.users,i,user)
            snum++;
          }
        }
      }
    }
  } else if(val == 2) {
    if(this.checkedUsers != []) {
      for(var i = 0;i < this.checkedUsers.length;i++) {
        for(var j = 0;j<this.users.length;j++) {
          if(this.users[j].username == this.checkedUsers[i]) {
            this.users[j].disabled = false;//自由分配选中解除禁用
            var user=this.users[j];
            this.$set(this.users,j,user)
          }
        }
      }
    }
  }
},


theNumber() {
  let that = this;
  var x = that.checkedUsers.length;
  var num = this.totalScore / x;
  var yushu = this.totalScore % x;
  var arr  = [];
  for (var k = 0; k < x - yushu; k++) {
    arr.push(Math.floor(num));
  }
  for (var i = 0; i < yushu; i++) {
    arr.push(Math.ceil(num));
  }
  that.arr = arr;
},
//选择人员发生改变时
handleCheckedUsersChange() {
  this.theNumber();
  this.typeOfAllocation(this.radio);

},
//提交计算人员得分
async submitAddUserScoreForm(){
  var workLoadList  = [];
  var score=0;
  for(var i = 0;i < this.checkedUsers.length;i++) {
    for (var j = 0; j < this.users.length; j++) {
      if(this.users[j].username == this.checkedUsers[i]) {
        if (this.users[j].value != null && this.users[j].value != '0') {
          score = this.users[j].value + score;
          var workLoad={};
          workLoad.score=this.users[j].value;
          workLoad.userId=this.users[j].id;
          workLoad.workId=this.multipleSelection.id;
          workLoadList.push(workLoad);
        }
      }
    }
  }
  
  if(score>this.totalScore){
    //分配的积分大于可分配积分
    this.$message.info('已超出可分配积分范围,请重新分配')
  }else if(score==0){
    //分配的积分为0
    this.$message.info('积分未正确分配,请重新分配')
  }else if(workLoadList.length==0){
    //未分配人员
    this.$message.error('积分未正确分配,请重新分配')
  }else{
    let result = await this.$http.post(
      '/workload/saveWorkIfOrder',
      workLoadList
    )
    if (result.success) {
      this.$message.success('分配积分成功')
      this.initData()
      this.userScoreDialogVisible = false
    } else  {
      this.$message.error('分配积分失败')
    }
  }
},

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值