思路:前端传给后端的是long数组,后端返回json信息告知前端操作成功
前端:
HTML:
单个按钮调整位置通过style来控制
<!-- 批量操作按钮 -->
<el-button @click="deleteCertificateBatch()" v-permission="'certificate:delete'" type="primary" plain style="float:right">批量删除</el-button>
JS:
写在data() return中
multipleSelection: [] ,// 批量选择中选择的记录列表
methods:中
deleteCertificateBatch(){
//批量删除
this.$confirm("此操作将永久删除信息, 是否继续?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(() => {
// 确定执行 then 方法
var idList = [];
// 遍历数组得到每个 id 值,设置到 idList 里面
for (var i = 0; i < this.multipleSelection.length; i++) {
var obj = this.multipleSelection[i];
var id = obj.id;
idList.push(id);
}
this.api({
url: "/certificate/deleteCertificateBatch",
method: "post",
data: idList
}).then(() => {
this.$message.success('删除成功')
this.getList()
}).catch(() => {
this.$message.error("删除失败")
})
});
},
后端:
Controller层:
/**
* 批量删除
*/
@RequiresPermissions("certificate:delete")
@PostMapping("deleteCertificateBatch")
public JSONObject deleteCertificateBatch(@RequestBody Long[] id){
return certificateService.deleteCertificateBatch(id);
}
Service层
/**
* 批量删除
*/
@Transactional(rollbackFor = Exception.class)
public JSONObject deleteCertificateBatch(Long[] id) {
certificateDao.deleteCertificateBatch(id);
return CommonUtil.successJson();
}
Dao层
/**
* 批量删除
* @return
*/
Long deleteCertificateBatch(Long[] id);
Mapper:
动态处理用到了foreach,collection一般有三种状态,参考了以下文章mybatis 中 foreach collection 的用法_BUG弄潮儿的博客-CSDN博客
<update id="deleteCertificateBatch" parameterType="Long">
update cert_info
SET
status = 0, deleted = b'1'
where id in
<foreach collection="array" item="id" open="(" separator="," close=")">
#{id}
</foreach>
</update>
中途遇到了一些问题,前端传了数组回来后端处理数组的同时要传JSON告知前端处理成功,所以在controller和service层要对格式进行转换,通过service的return CommonUtil.successJson();告知前端处理成功。