本章对检查组管理进行开发
一.新增检查组
1.修改新增弹层可见属性，添加重置表单功能
2.动态刷新检查组包含的检查项信息
<tr v-for="c in tableData">使用for循环来遍历查询出tableData中的数据
tableData是一个数组对象，定义在VUE中的一个模型数据，对应当前能够查询到的所有检查项的数据。
里面的数据应该是从数据库中搜索出来的所有检查项信息，包装成一个检查项对象，然后将所有的信息放到一个集合中，最终转成一个JSON数据，也就是tableData。
遍历tableData将里面的值展示在表格中就可以实现前端效果
如何为tableData赋值：发送一个ajax请求，查出所有的数据，把这个数据赋值给tableData即可
3.如何实现查询所有数据
前端代码
//发送ajax请求查询所有检查项信息,转为json，赋值给tableData
axios.get("/checkitem/findAll.do").then((res) => {
if(res.data.flag){//查询操作成功
this.tableData = res.data.data;
}else{//查询数据操作失败
this.$message.error(res.data.message);
}
});
},复选框效果，点击第二三四列也可以让复选框选中
标签的id都和input的id相同，所以会实现复选框效果
选中的检查项绑定到了模型数据中，复选框绑定的模型数据对应的值：value，提交时模型数据对应的value值进行提交即可
4.新增检查组_表单提交
重置复选框表单和新建检查组时的默认展示界面
当点击新增检查组时，v-model对应的模型数据就是默认展示的tab，所以将activeName设置为first，就是默认展示name为first的tab界面
this.checkitemIds = [];//重置复选框//添加
handleAdd () {
// alert(this.checkitemIds);
//表单校验
//发送ajax请求将模型数据提交到后台处理
axios.post("/checkgroup/add.do?checkitemIds=" + this.checkitemIds, this.formData).then((response)=> {
//关闭新增窗口
this.dialogFormVisible = false;
if(response.data.flag){
//新增成功，弹出成功提示
this.$message({
message: response.data.message,
type: 'success'
});
}else{
//新增失败，弹出错误提示
this.$message.error(response.data.message);
}
}).finally(()=> {
this.findPage();
});
},注意这里的表单检验功能没有做，后续需要补充
后端代码：
分别在CheckGroupController、CheckGroupService、CheckGroupServiceImpl、CheckGroupDao、CheckGroupDao.xml中扩展方法查询所有检查项数据
@RestController
@RequestMapping("/checkgroup")
public class CheckGroupController {
@Reference
private CheckGroupService checkGroupService;
//新增检查组
@RequestMapping("/add")
public Result add(@RequestBody CheckGroup checkGroup,Integer[] checkitemIds){//前端提交的是json数据，需要添加注解@RequestBody
try{
checkGroupService.add(checkGroup,checkitemIds);
}catch (Exception e){
e.printStackTrace();
return new Result(false, MessageConstant.ADD_CHECKGROUP_FAIL);
}
return new Result(true,MessageConstant.ADD_CHECKGROUP_SUCCESS);
}
}public interface CheckGroupService {
public void add(CheckGroup checkGroup, Integer[] checkitemIds);
}@Service(interfaceClass = CheckGroupService.class)
@Transactional
public class CheckGroupServiceImpl implements CheckGroupService {
//新增检查组，同时需要让检查组关联检查项
@Autowired
private CheckGroupDao checkGroupDao;
public void add(CheckGroup checkGroup, Integer[] checkitemIds){
//新增检查组，操作检查组表
checkGroupDao.add(checkGroup);
//设置检查组和检查项的多对多关联关系，操作中间关系表
Integer checkGroupId = checkGroup.getId();
if(checkitemIds != null && checkitemIds.length > 0){
for (Integer checkitemId : checkitemIds) {//将选中的复选框检查项遍历出来
Map<String,Integer> map = new HashMap<>();
map.put("checkgroup_id",checkGroupId);
map.put("checkitem_id",checkitemId);
checkGroupDao.setCheckGroupAndCheckItem(map);
}
}
}
}public interface CheckGroupDao {
public void add(CheckGroup checkGroup);
public void setCheckGroupAndCheckItem(Map map);
}<mapper namespace="com.itheima.dao.CheckGroupDao">
<!--插入检查组数据-->
<insert id="add" parameterType="com.itheima.pojo.CheckGroup">
<!--新增的检查组记录的id是自增的，通过mybatis框架提供的selectKey标签获得自增产生的id，并且赋值给CheckGroup实体类的id属性 -->
<selectKey resultType="java.lang.Integer" order="AFTER" keyProperty="id">
SELECT LAST_INSERT_ID()
</selectKey>
insert into t_checkgroup(code,name,sex,helpCode,remark,attention)
values
(#{code},#{name},#{sex},#{helpCode},#{remark},#{attention})
</insert>
<!--设置检查组和检查项多对多关系-->
<insert id="setCheckGroupAndCheckItem" parameterType="map">
insert into t_checkgroup_checkitem(checkgroup_id,checkitem_id)
values
(#{checkgroup_id},#{checkitem_id})
</insert>
</mapper>LAST_INSERT_ID()，获得新建记录的ID
selectKey的作用是获得新建的记录的ID
order="AFTER"，有此属性的sql语句将会在执行完其它sql语句再执行本语句
keyProperty="id"，将获得的ID封装给实体类的id
二.检查组分页查询
前端代码
1.findPage()
封装分页参数param（页码，每页显示记录数，查询条件
发送ajax请求，为VUE的模型对象赋值，进行前端展示
2.findPage()调用时机
页面加载完成时(钩子函数
用户点击查询按钮时(为查询按钮绑定单击事件
用户点击分页条中页码时(为分页组件绑定current-change事件，此事件是分页条组件自己定义的事件，当页码改变时触发，对应的处理函数为handleCurrentChange
后台代码
1.Controller
参数的传递有以下两种方法
PageResult pageResult = checkGroupService.pageQuery(
queryPageBean.getCurrentPage(),
queryPageBean.getPageSize(),
queryPageBean.getQueryString()
);
return pageResult;
//调用Service方法，在Controller中对queryPageBean的三个参数进行获取return checkGroupService.pageQuery(queryPageBean);
//直接将queryPageBean传递给Service，在Service中对queryPageBean三个参数进行操作2.Service
3.ServiceImpl
分页查询使用mybatis提供的分页查询助手插件
PageHelper.startPage(currentPage,pageSize);4.Dao接口
创建方法
5.Mapper文件
三.编辑检查组
前端代码
1.基本信息回显
检查组信息回显，检查项信息回显
2.提交更新好的检查组内容
总共发送三次ajax请求
handleUpdate(row) {
// 弹出编辑窗口
this.dialogFormVisible4Edit = true;
//1.发送ajax请求，根据id查询当前检查组信息，用于前端回显
axios.get("/checkgroup/findById.do?id=" + row.id).then((res) => {
if(res.data.flag){
//本次操作成功
this.formData = res.data.data;
}else{
// 本次操作失败
this.$messages.error(res.data.messages);
}
});
//2.发送ajax请求查询所有检查项信息,转为json，赋值给tableData,用于展示所有检查项
axios.get("/checkitem/findAll.do").then((res) => {
if(res.data.flag){//查询操作成功
this.tableData = res.data.data;
//3.发送ajax请求，查询当前检查组包含的所有检查项id，用于展示检查组包含的检查项（页面复选框回显
axios.get("/checkgroup/findCheckItemIdsByCheckGroupId.do?id=" + row.id).then((res) =>{
this.checkitemIds = res.data.data;
});
}else{//查询数据操作失败
this.$message.error(res.data.message);
}
});
},2.提交更新后的表单
//编辑
handleEdit () {
//发送ajax请求，将修改后的表单数据（检查组信息，检查项信息）提交到后台进行处理
axios.post("/checkgroup/edit.do?checkitemIds=" + this.checkitemIds,this.formData).then((res) =>{
//关闭编辑窗口
this.dialogFormVisible4Edit = false;
if(response.data.flag){
//编辑成功，弹出成功提示
this.$message({
message: response.data.message,
type: 'success'
});
}else{
//编辑失败，弹出错误提示
this.$message.error(response.data.message);
}
}).finally(()=> {
this.findPage();
});
},后端代码
前端发送了一个ajax请求，后端的Controller就要提供一个方法来应对
1.findById,findAll
2.findCheckItemIdsByCheckGroupId //根据检查组ID查询关联的检查项ID
3.edit
Controller
service
serviceImpl
其中更新检查项功能，检查项关联的检查组如果减少或增加或不变，或者原先的检查组减少，新增了其他检查组。后台如何实现？
可以直接把原先的检查组记录直接删除，因为编辑检查组界面会显示原先的检查项记录，在数据库中对原先的记录删除，前端的记录不变，对检查组复选框进行操作，得到的记录就是更新后的记录。
//编辑检查组信息，同时需要关联检查项
public void edit(CheckGroup checkGroup, Integer[] checkitemIds) {
//修改检查组基本信息，操作检查表t_checkgroup表
checkGroupDao.edit(checkGroup);
//修改当前检查组关联的检查项，操作中间关系表
checkGroupDao.deleteAssociation(checkGroup.getId());
//重新建立当前检查组和检查表的关联关系，可以直接使用添加检查组时写的建立关联方法
Integer checkGroupId = checkGroup.getId();
this.setCheckGroupAndCheckItem(checkGroupId,checkitemIds);
}
//以上新增和编辑方法都涉及到了一部分的重复代码，可以对这部分代码进行抽取,写成一个方法，使用时直接调用
//建立检查组和检查项的多对多关系
public void setCheckGroupAndCheckItem(Integer checkGroupId,Integer[] checkitemIds){
if(checkitemIds != null && checkitemIds.length > 0){
for (Integer checkitemId : checkitemIds) {//将选中的复选框检查项遍历出来
Map<String,Integer> map = new HashMap<>();
map.put("checkgroup_id",checkGroupId);
map.put("checkitem_id",checkitemId);
checkGroupDao.setCheckGroupAndCheckItem(map);
}
}
}Dao
mapper
四.删除检查组
1.前端代码
弹出确认删除弹框
首先将检查组和检查项的关联关系删除，再对检查组进行删除
// 删除
handleDelete(row) {
this.$confirm("确定要删除这条数据吗？","提示",{
type:"warning"
}).then(()=>{
//用户点击确定按钮，发送ajax请求，将要删除数据的id提交到controller进行处理
axios.get("/checkgroup/delete.do?id=" + row.id).then((res)=>{
if(res.data.flag){
//执行成功
//弹出删除成功提示信息
this.$message({
type:"success",
message:res.data.message
});
}else{
//执行失败
this.$message.error(res.data.message);
}
this.findPage();
});
}).catch(()=>{
this.$message({
type:"info",
message:"操作取消"
});
});
}2.后端代码
分别在CheckGroupController、CheckGroupService、CheckGroupServiceImpl、CheckGroupDao、CheckGroupDao.xml中扩展方法删除根据ID查询的关联记录和检查项记录
扫一扫
2641
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
