一、前端代码
1 <el-table 2 ref="multipleTable" 3 :data="tableData" 4 stripe 5 style="width: 99%;margin-bottom: 10px;" 6 border 7 :height="$publicjs.tableHeight" 8 @selection-change="changeCheckBoxValue" 9 > 10 <el-table-column type="selection" width="55" /> 11 <el-table-column type="index" label="序号" width="60px" /> 12 <el-table-column prop="jobName" label="任务名称" /> 13 <el-table-column show-overflow-tooltip prop="beanName" label="Bean名称" width="260px" /> 14 <el-table-column show-overflow-tooltip prop="methodName" label="执行方法" /> 15 <el-table-column prop="jarName" label="jar包名称" /> 16 <el-table-column show-overflow-tooltip prop="cronExpression" label="cron表达式" /> 17 <el-table-column label="异常详情" width="100px"> 18 <template slot-scope="scope"> 19 <el-button v-show="scope.row.exceptionDetail" size="mini" type="text" @click="info(scope.row.exceptionDetail)">查看详情</el-button> 20 </template> 21 </el-table-column> 22 <el-table-column prop="time" label="耗时(毫秒)" /> 23 <el-table-column prop="isPause" label="状态" width="100px"> 24 <template slot-scope="scope"> 25 <el-tag :type="scope.row.isSuccess ? ‘success‘ : ‘warning‘">{{ scope.row.isSuccess ? ‘成功‘ : ‘失败‘ }}</el-tag> 26 </template> 27 </el-table-column> 28 <el-table-column show-overflow-tooltip prop="createTime" :formatter="dateFormatter" label="创建日期" /> 29 </el-table>
二、前端js方法
changeCheckBoxValue(val) { if(val.length >0){ val.forEach(element => { this.ids.push(element.logId); }); } }, // 删除功能 handleDel() { let _this = this; // 判断是否选择记录 if( _this.ids.length <= 0){ _this.$message({message:‘请至少选择一条记录进行删除‘,type:‘warning‘}); }else{ _this.$confirm("此操作将删除操作日志记录, 是否继续?", "提示", { confirmButtonText: "确定", cancelButtonText: "取消", type: "warning" }) .then(() => { delLog(_this.ids).then(res => { if (res.code == 200) { _this.$message({ message: res.message, type: "success" }); _this.currentPage = 1; //更新表格 _this.loadList(_this.currentPage, _this.pageCount); } else { _this.$message({ message: res.message, type: "error" }); } }); }) .catch(() => {}); } },
三、调用后台方法js
1 // 批量删除执行日志 2 export function delLog(ids) { 3 return request({ 4 url: ‘api/quartzLog‘, 5 method: ‘delete‘, 6 data: ids 7 }) 8 }
四、后台服务端接收前端参数进行数据库操作
1 @Slf4j 2 @RestController 3 @RequiredArgsConstructor 4 @RequestMapping("/quartzLog") 5 @Api(tags = "系统:执行日志管理") 6 public class QuartzLogController { 7 8 private final QuartzLogService quartzLogService; 9 10 @ApiOperation(value = "删除") 11 @DeleteMapping 12 public Response<Integer> delete(@RequestBody Set<Long> ids){ 13 int re = quartzLogService.delete(ids); 14 if (re > 0) { 15 return new Response<>(ErrorCode.SUCESS_CODE, "删除成功", re); 16 } else { 17 return new Response<>(ErrorCode.INTERNAL, "删除失败,未知错误", null); 18 } 19 } 20 }
五、服务层操作
1 @Override 2 public int delete(Set<Long> ids) { 3 Map<String, Object> map = new HashMap<>(); 4 map.put("ids", ids); 5 mapper.deletes(map); 6 return 1; 7 }
六、具体方法执行
1 <!--批量删除--> 2 <delete id="deletes"> 3 delete FROM sys_quartz_log WHERE log_id in 4 <foreach item="item" index="index" collection="ids" open="(" separator="," close=")"> 5 #{item} 6 </foreach> 7 </delete>