项目需求

在项目中我们需要使用表格的表头按钮，点击表头，发生事件。如：

表格

• 点击 一键通过 按钮之后 会发生变化，将按钮全部设置为 通过 状态
• 或者通过选择按钮来选择所希望的 按钮状态

效果图：

使用一键通过效果图

使用选择按钮效果图

代码实现

前端代码

1.表格代码

<el-table-column prop="passingStatus" header-align="center" align="center" width="260px">
          <template slot="header" slot-scope="scope">
            <el-button type="success" icon="el-icon-check" size="small" plain @click="passStatus(taskData.trainOpenId,taskData.stuId, 'selectAll')">
              一键通过
            </el-button>
          </template>
          <template slot-scope="scope">
            <el-radio-group v-model="scope.row.passingStatus" @change="passStatus(scope.row.stuTaskId,scope.row.passingStatus,'selectOne')" size="small">
              <el-radio-button label="1">通过</el-radio-button>
              <el-radio-button label="0">待评</el-radio-button>
              <el-radio-button label="2">未通过</el-radio-button>
            </el-radio-group>
          </template>
</el-table-column>

• 设置表头按钮点击事件 @click 以及表单列按钮组改变事件 @change
• 由于一键通过与单个选择都是调用同一个方法，所以添加判断状态 selectAll 与selectOne

2. JS代码

// 点击事件，一键选择为通过状态
      passStatus (id, passingIndex, status) {
        // 修改单个任务事件
        if (status === 'selectOne') {
          if (passingIndex != null) {
            this.$http({
              url: this.$http.adornUrl(`/train/trainsubmit/passStatus`),
              method: 'put',
              params: this.$http.adornParams({
                'stuTaskId': id,
                'passingStatus': passingIndex,
                'status': status
              })
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.$message({
                  message: '操作成功,更新了' + data.updateRow + '条数据',
                  type: 'success',
                  duration: 1500
                })
              } else {
                this.$message.error(data.msg)
              }
            })
          }
        } else if (status === 'selectAll') { // 一键通过事件
          this.$http({
            url: this.$http.adornUrl(`/train/trainsubmit/passStatus`),
            method: 'put',
            params: this.$http.adornParams({
              'trainOpenId': id,
              'stuId': passingIndex,
              'status': status
            })
          }).then(({data}) => {
            if (data && data.code === 0) {
              this.$message({
                message: '一键通过成功,更新了' + data.updateRow + '条数据',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.taskSubmitVisible = false
                  // 重新调用方法刷新表单
                  this.getTaskArrangeDataList(id, passingIndex)
                }
              })
            } else {
              this.$message.error(data.msg)
            }
          })
        } else {
          this.$message.error('未知异常')
        }
      },

后端代码

1.Controller处理请求

• 获取前端传过来的 判断状态 与 ID

/**
     * 任务评分一键通过与选择通过
     */
    @RequestMapping("/passStatus")
    public R passStatus(@RequestParam Map<String, Object> params) {
        // 获取状态值
        String status = (String) params.get("status");
        // 更新数据行数
        int updateRow = trainSubmitService.passStatus(params, status);
        return R.ok().put("updateRow", updateRow);
    }

2.Service业务逻辑，通过使用mybatisplus的QueryWrapper进行处理,并返回操作行数

• 设置接口

int passStatus(Map<String, Object> params ,String status);

• 定义实现类

/**
     * 更改任务状态，一键通过并返回修改行数
     * @param params
     * @param status
     * @return
     */
    @Override
    public int passStatus(Map<String, Object> params, String status) {
        int updateRow = -1;
        TrainSubmitEntity trainSubmitEntity = new TrainSubmitEntity();
        // 单个任务更改状态
        if ("selectOne".equals(status)) {
            // 任务设置通过或者不通过
            trainSubmitEntity.setPassingStatus(Integer.parseInt((String) params.get("passingStatus")) );
            // 设置任务状态为已查阅
            trainSubmitEntity.setStatus(2);
            QueryWrapper<TrainSubmitEntity> queryWrapper = new QueryWrapper<TrainSubmitEntity>()
                    .eq(params.get("stuTaskId") != null,"stu_task_id", params.get("stuTaskId"));
            updateRow = this.baseMapper.update(trainSubmitEntity, queryWrapper);
        } else if ("selectAll".equals(status)) {
            // 任务一键通过,设置状态为1，通过
            trainSubmitEntity.setPassingStatus(1);
            // 设置任务状态为已查阅
            trainSubmitEntity.setStatus(2);
            QueryWrapper<TrainSubmitEntity> queryWrapper = new QueryWrapper<TrainSubmitEntity>()
                    .eq(params.get("trainOpenId") != " ","train_open_id", Long.parseLong((String) params.get("trainOpenId")))
                    .eq(params.get("stuId") != " ", "stu_id", Long.parseLong((String) params.get("stuId")));
            updateRow = this.baseMapper.update(trainSubmitEntity, queryWrapper);
        }
        return updateRow;
    }