传智健康_day3

本章对检查组管理进行开发

一.新增检查组

1.修改新增弹层可见属性，添加重置表单功能

2.动态刷新检查组包含的检查项信息

使用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 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);
}

    
    
        
        
            SELECT LAST_INSERT_ID()
        
        insert into t_checkgroup(code,name,sex,helpCode,remark,attention)
        values
        (#{code},#{name},#{sex},#{helpCode},#{remark},#{attention})
    

    
    
        insert into t_checkgroup_checkitem(checkgroup_id,checkitem_id)
        values
        (#{checkgroup_id},#{checkitem_id})
    

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 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查询的关联记录和检查项记录