项目需求
在项目中我们需要使用表格的表头按钮，点击表头，发生事件。如：
表格
- 点击 一键通过 按钮之后 会发生变化，将按钮全部设置为 通过 状态
- 或者通过选择按钮来选择所希望的 按钮状态
效果图：
使用一键通过效果图
使用选择按钮效果图
代码实现
前端代码
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
- 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;
}
