传智健康——四、预约检查组管理(详细功能实现)

1. 预约检查组管理

1.0 前端页面准备

预约检查组管理和预约检查项管理的代码有很大的相似性,下面将完成预约检查组的功能。首先要先准备好前端页面checkgroup.html.checkgroup.html如下:

<!DOCTYPE html>
<html>
    <head>
        <!-- 页面meta -->
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>传智健康</title>
        <meta name="description" content="传智健康">
        <meta name="keywords" content="传智健康">
        <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
        <!-- 引入样式 -->
        <link rel="stylesheet" href="../plugins/elementui/index.css">
        <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
        <link rel="stylesheet" href="../css/style.css">
        <!-- 引入组件库 -->
        <script type="text/javascript" src="../js/jquery.min.js"></script>
        <script src="../js/vue.js"></script>
        <script src="../plugins/elementui/index.js"></script>
        <script src="../js/axios-0.18.0.js"></script>
        <style>
            .datatable {
                position: relative;
                box-sizing: border-box;
                -webkit-box-flex: 1;
                width: 100%;
                max-width: 100%;
                font-size: 14px;
                color: rgb(96, 98, 102);
                overflow: hidden;
                flex: 1 1 0%;
            }
            .datatable td, .datatable th {
                padding: 12px 0;
                min-width: 0;
                -webkit-box-sizing: border-box;
                box-sizing: border-box;
                text-overflow: ellipsis;
                vertical-align: middle;
                position: relative;
                text-align: left;
            }
        </style>
    </head>
    <body class="hold-transition">
        <div id="app">
            <div class="content-header">
                <h1>预约管理<small>检查组管理</small></h1>
                <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
                    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item>预约管理</el-breadcrumb-item>
                    <el-breadcrumb-item>检查组管理</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
            <div class="app-container">
                <div class="box">
                    <div class="filter-container">
                        <el-input placeholder="编码/名称/助记码" v-model="pagination.queryString" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter"></el-input>
                        <el-button @click="findPage2()" class="dalfBut">查询</el-button>
                        <el-button type="primary" class="butT" @click="handleCreate()">新建</el-button>
                    </div>
                    <el-table size="small" current-row-key="id" :data="dataList" stripe highlight-current-row>
                        <el-table-column type="index" align="center" label="序号"></el-table-column>
                        <el-table-column prop="code" label="检查组编码" align="center"></el-table-column>
                        <el-table-column prop="name" label="检查组名称" align="center"></el-table-column>
                        <el-table-column label="适用性别" align="center">
                            <template slot-scope="scope">
                                <span>{{ scope.row.sex == '0' ? '不限' : scope.row.sex == '1' ? '男' : '女'}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="helpCode" label="助记码" align="center"></el-table-column>
                        <el-table-column prop="remark" label="说明" align="center"></el-table-column>
                        <el-table-column label="操作" align="center">
                            <template slot-scope="scope">
                                <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">编辑</el-button>
                                <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="pagination-container">
                        <el-pagination
                            class="pagiantion"
                            @current-change="handleCurrentChange"
                            :current-page="pagination.currentPage"
                            :page-size="pagination.pageSize"
                            layout="total, prev, pager, next, jumper"
                            :total="pagination.total">
                        </el-pagination>
                    </div>
                    <!-- 新增标签弹层 -->
                    <div class="add-form">
                        <el-dialog title="新增检查组" :visible.sync="dialogFormVisible">
                            <template>
                                <el-tabs v-model="activeName" type="card">
                                    <el-tab-pane label="基本信息" name="first">
                                        <el-form label-position="right" label-width="100px">
                                            <el-row>
                                                <el-col :span="12">
                                                    <el-form-item label="编码">
                                                        <el-input v-model="formData.code"/>
                                                    </el-form-item>
                                                </el-col>
                                                <el-col :span="12">
                                                    <el-form-item label="名称">
                                                        <el-input v-model="formData.name"/>
                                                    </el-form-item>
                                                </el-col>
                                            </el-row>
                                            <el-row>
                                                <el-col :span="12">
                                                    <el-form-item label="适用性别">
                                                        <el-select v-model="formData.sex">
                                                            <el-option label="不限" value="0"></el-option>
                                                            <el-option label="男" value="1"></el-option>
                                                            <el-option label="女" value="2"></el-option>
                                                        </el-select>
                                                    </el-form-item>
                                                </el-col>
                                                <el-col :span="12">
                                                    <el-form-item label="助记码">
                                                        <el-input v-model="formData.helpCode"/>
                                                    </el-form-item>
                                                </el-col>
                                            </el-row>
                                            <el-row>
                                                <el-col :span="24">
                                                    <el-form-item label="说明">
                                                        <el-input v-model="formData.remark" type="textarea"></el-input>
                                                    </el-form-item>
                                                </el-col>
                                            </el-row>
                                            <el-row>
                                                <el-col :span="24">
                                                    <el-form-item label="注意事项">
                                                        <el-input v-model="formData.attention" type="textarea"></el-input>
                                                    </el-form-item>
                                                </el-col>
                                            </el-row>
                                        </el-form>
                                    </el-tab-pane>
                                    <el-tab-pane label="检查项信息" name="second">
									<div class="checkScrol">
                                        <table class="datatable">
                                            <thead>
                                            <tr>
                                                <th>选择</th>
                                                <th>项目编码</th>
                                                <th>项目名称</th>
                                                <th>项目说明</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            <tr v-for="c in tableData">

                                                <td>
                                                    <input :id="c.id" v-model="checkitemIds" type="checkbox" :value="c.id">
                                                </td>
                                                <td><label :for="c.id">{{c.code}}</label></td>
                                                <td><label :for="c.id">{{c.name}}</label></td>
                                                <td><label :for="c.id">{{c.remark}}</label></td>
                                            </tr>
                                            </tbody>
                                        </table>
									</div>
                                    </el-tab-pane>
                                </el-tabs>
                            </template>
                            <div slot="footer" class="dialog-footer">
                                <el-button @click="dialogFormVisible = false">取消</el-button>
                                <el-button type="primary" @click="handleAdd()">确定</el-button>
                            </div>
                        </el-dialog>
                    </div>

                    <!-- 编辑标签弹层 -->
                    <div class="add-form">
                        <el-dialog title="编辑检查组" :visible.sync="dialogFormVisible4Edit">
                            <template>
                                <el-tabs v-model="activeName" type="card">
                                    <el-tab-pane label="基本信息" name="first">
                                        <el-form label-position="right" label-width="100px">
                                            <el-row>
                                                <el-col :span="12">
                                                    <el-form-item label="编码">
                                                        <el-input v-model="formData.code"/>
                                                    </el-form-item>
                                                </el-col>
                                                <el-col :span="12">
                                                    <el-form-item label="名称">
                                                        <el-input v-model="formData.name"/>
                                                    </el-form-item>
                                                </el-col>
                                            </el-row>
                                            <el-row>
                                                <el-col :span="12">
                                                    <el-form-item label="适用性别">
                                                        <el-select v-model="formData.sex">
                                                            <el-option label="不限" value="0"></el-option>
                                                            <el-option label="男" value="1"></el-option>
                                                            <el-option label="女" value="2"></el-option>
                                                        </el-select>
                                                    </el-form-item>
                                                </el-col>
                                                <el-col :span="12">
                                                    <el-form-item label="助记码">
                                                        <el-input v-model="formData.helpCode"/>
                                                    </el-form-item>
                                                </el-col>
                                            </el-row>
                                            <el-row>
                                                <el-col :span="24">
                                                    <el-form-item label="说明">
                                                        <el-input v-model="formData.remark" type="textarea"></el-input>
                                                    </el-form-item>
                                                </el-col>
                                            </el-row>
                                            <el-row>
                                                <el-col :span="24">
                                                    <el-form-item label="注意事项">
                                                        <el-input v-model="formData.attention" type="textarea"></el-input>
                                                    </el-form-item>
                                                </el-col>
                                            </el-row>
                                        </el-form>
                                    </el-tab-pane>
                                    <el-tab-pane label="检查项信息" name="second">
										<div class="checkScrol">
											<table class="datatable">
												<thead>
													<tr>
														<th>选择</th>
														<th>项目编码</th>
														<th>项目名称</th>
														<th>项目说明</th>
													</tr>
												</thead>
												<tbody>
													<tr v-for="c in tableData">
														<td>
															<input :id="c.id" v-model="checkitemIds" type="checkbox" :value="c.id">
														</td>
														<td><label :for="c.id">{{c.code}}</label></td>
														<td><label :for="c.id">{{c.name}}</label></td>
														<td><label :for="c.id">{{c.remark}}</label></td>
													</tr>
												</tbody>
											</table>
										</div>
                                    </el-tab-pane>
                                </el-tabs>
                            </template>
                            <div slot="footer" class="dialog-footer">
                                <el-button @click="dialogFormVisible4Edit = false">取消</el-button>
                                <el-button type="primary" @click="handleEdit()">确定</el-button>
                            </div>
                        </el-dialog>
                    </div>
                </div>
            </div>
        </div>
    </body>

    <script>
        var vue = new Vue({
            el: '#app',
            data:{
                activeName:'first',//添加/编辑窗口Tab标签名称
                pagination: {//分页相关属性
                    currentPage: 1,
                    pageSize:10,
                    total:100,
                    queryString:null,
                },
                dataList: [],//列表数据
                formData: {},//表单数据
                tableData:[],//新增和编辑表单中对应的检查项列表数据
                checkitemIds:[],//新增和编辑表单中检查项对应的复选框,基于双向绑定可以进行回显和数据提交
                dialogFormVisible: false,//控制添加窗口显示/隐藏
                dialogFormVisible4Edit:false//控制编辑窗口显示/隐藏
            },
            created() {
                //vue钩子函数 异步请求加载数据 /checkgroup.do
                //querypagebean(用户输入的参数、页码、每页记录数)  分页组件:total rows
                this.findPage();
            },
            methods: {
               
            }
        })
    </script>
</html>

1.1 查询检查组

1.1.1 代码思路分析

正确查询所有检查组并将其展示到页面上,数据库中检查组如下所示:
在这里插入图片描述
(1)在前台页面中发出请求查询所有检查组,定义findAll方法用于查询。
(2)为了能够在checkgroup.html页面加载后直接可以展示数据,要钩子函数created中调用findAll方法
(3)后台中编写代码实现t_checkgroup表的查询

1.1.2 前台代码

在前台页面中发出请求查询所有检查组,定义findAll方法用于查询。为了能够在checkgroup.html页面加载后直接可以展示数据,要钩子函数created中调用findAll方法

created() {
                
                this.findAll();
            },

1.1.3 后台代码

(1)在CheckGroupController中新建查询所有检查组的方法findAll()

/**
     * 查询所有检查组
     * @return
     */
    @RequestMapping(value = "/findAll")
    public Result findAll() {

        try {
            List<CheckGroup> checkGroupList=checkGroupService.findAll();
            return new Result(true, MessageConstant.QUERY_CHECKGROUP_SUCCESS,checkGroupList);
        } catch (Exception e) {
            e.printStackTrace();
            return new Result(false, MessageConstant.QUERY_CHECKGROUP_FAIL);
        }
    }

(2)CheckGroupService中扩展findAll()方法

 /**
     * 查询所有检查组
     * @return
     */
    List<CheckGroup> findAll();

(3)在CheckGroupServiceImpl中扩展findAll()方法

 /**
     * 查询所有检查组
     * @return
     */
    @Override
    public List<CheckGroup> findAll() {
       return checkGroupDao.findAll();
    }

(4)在CheckGroupDao中扩展findAll方法

/**
     * 查询所有检查组
     */
    List<CheckGroup> findAll();

(5)在CheckGroupDao.xml中编写findAll方法,在t_checkgroup表中查询所有检查组。

<!--查询所有检查组-->
    <select id="findAll" resultType="com.itheima.pojo.CheckGroup">
        select * from t_checkgroup
    </select>

1.1.4 查询检查组效果展示

在这里插入图片描述

1.2 新增检查组

1.2.1 代码思路分析

(1)在前端页面为新建二字绑定单击事件,弹出新增窗口,并向后端发送请求实现动态展示检查项列表(这个功能在检查项管理时已经实现即checkitem/findAll.do)
(2)在前端新增检查组并勾选检查项数据,前端新增窗口点击确定要向后端发出保存请求
(3)后端执行保存操作:保存检查组数据;保存检查组和检查项中间表数据

1.2.2 前台代码

(1)在前端页面为新建二字绑定单击事件handleCreate(),弹出新增窗口,并向后端发送请求实现动态展示检查项列表(这个功能在检查项管理时已经实现即checkitem/findAll.do)
在这里插入图片描述

// 弹出添加窗口  新建按钮
                handleCreate() {
                    this.resetForm();
                  //弹出新增检查组窗口
                    this.dialogFormVisible=true;
                    //查询检查项列表数据
                    axios.get("/checkitem/findAll.do").then(res=>{
                        if(res.data.flag){
                            this.tableData=res.data.data;
                            //查询所有检查项成功
                            this.$message({
                                message:res.data.message,
                                type:"success"
                            });
                        }
                    })
                },

(2)在前端新增检查组并勾选检查项数据,前端新增窗口点击确定要向后端发出保存请求
在这里插入图片描述
在这里插入图片描述

1.2.3 后台代码

(1) CheckGroupController中添加新增add()方法,后端传输过来的是整个checkGroup对象以及检查项的ids。

@RequestMapping(value = "/add")
    public Result add(@RequestBody CheckGroup checkGroup,Integer[] checkitemIds) {

        try {
            checkGroupService.add(checkGroup,checkitemIds);
            return new Result(true, MessageConstant.ADD_CHECKGROUP_SUCCESS);
        } catch (Exception e) {
            e.printStackTrace();
            return new Result(false, MessageConstant.ADD_CHECKGROUP_FAIL);
        }
    }

(2) CheckGroupService中扩展add方法

/**
     * 新增检查组
     * @param checkGroup
     * @param checkitemIds
     */
    void add(CheckGroup checkGroup, Integer[] checkitemIds);

(3)CheckGroupServiceImpl中扩展add方法

@Override
    public void add(CheckGroup checkGroup, Integer[] checkitemIds) {
        //1.往检查组表新增一条记录
        checkGroupDao.add(checkGroup);
        //2.往中间表新增关联id记录,在下面的方法中循环遍历
        // 抽取代码,别的也可以调用
        setCheckGroupAndCheckItem(checkGroup.getId(),checkitemIds);
    }
 public void  setCheckGroupAndCheckItem(Integer groupId,Integer[] checkitemIds){
        if(checkitemIds!=null&&checkitemIds.length>0){
            for (Integer checkitemId : checkitemIds) {
                Map<String,Integer> map=new HashMap<>();
                map.put("grounId",groupId);
                map.put("checkitemId",checkitemId);
                checkGroupDao.setCheckGroupAndCheckItem(map);
            }
        }

(4)CheckGroupDao中扩展add方法和往检查组检查项中间表插入数据的setCheckGroupAndCheckItem方法

/**
     * 新增检查组
     * @param checkGroup
     */
    void add(CheckGroup checkGroup);

    /**
     * 往中间表插入记录
     * @param map
     */
    void setCheckGroupAndCheckItem(Map<String, Integer> map);

(5)CheckGroupDao.xml中实现add方法和往检查组检查项中间表插入数据的setCheckGroupAndCheckItem方法

<!--新增检查组-->
    <insert id="add" parameterType="com.itheima.pojo.CheckGroup">
        <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="hashmap">
        insert into t_checkgroup_checkitem(checkgroup_id,checkitem_id)
        values
        (#{grounId},#{checkitemId})
    </insert>

1.2.4 新增检查组效果展示

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

1.3 检查组分页

1.3.1 代码思路分析

(1)定义分页相关模型数据和分页的方法findPage();同时在页面钩子函数要加载分页的方法findPage()。
(2)新增页面的确定也要绑定分页查询方法
(3)当用户点击查询按钮或者点击分页条中的页码时也需要调用findPage方法重新发起查询请求。
(4)点击页面查询时能够发送请求,根据输入的关键字正确查询
(5)前端携带参数给后端,后端实现分页

1.3.2 前台代码

(1)定义分页相关模型数据和分页的方法findPage();同时在页面钩子函数要加载分页的方法findPage(),此处和检查项一致
(2)新增页面的确定也要绑定分页查询方法
(3)当用户点击查询按钮或者点击分页条中的页码时也需要调用findPage方法重新发起查询请求。点击页面查询时能够发送请求,根据输入的关键字正确查询。
在这里插入图片描述

1.3.3 后台代码

(1)在CheckGroupController中创建findPage方法

/**
     * 检查组分页
     * @param queryPageBean
     * @return
     */
    @RequestMapping("/findPage")
    public PageResult findPage(@RequestBody QueryPageBean queryPageBean) {
        try {
            PageResult pageResult= checkGroupService.findPage(queryPageBean.getCurrentPage(),queryPageBean.getPageSize(),queryPageBean.getQueryString());
            return pageResult;
        } catch (Exception e) {
            e.printStackTrace();
            return null;
        }
    }

(2)在CheckGroupService中扩展findPage方法

 /**
     * 检查组分页
     * @param currentPage
     * @param pageSize
     * @param queryString
     * @return
     */
    PageResult findPage(Integer currentPage, Integer pageSize, String queryString);

(3)在CheckGroupService中扩展findPage方法,并实现根据条件查询功能

@Override
    public PageResult findPage(Integer currentPage, Integer pageSize, String queryString) {

        //设置分页参数
        PageHelper.startPage(currentPage,pageSize);
        //需要分页的语句
        Page<CheckGroup> checkGroupPage= checkGroupDao.selectByCondition(queryString);

        return new PageResult(checkGroupPage.getTotal(),checkGroupPage.getResult());
    }

(4)在CheckGroupDao中扩展查询功能的selectByCondition方法

 /**
     * 检查组分页
     * @param queryString
     * @return
     */
    Page<CheckGroup> selectByCondition(String queryString);

(5)在CheckGroupDao.xml中实现selectByCondition方法

<!--检查组分页查询-->
    <select id="selectByCondition" parameterType="string" resultType="com.itheima.pojo.CheckGroup">
        select * from t_checkgroup
        <if test="value !=null and value.length>0">
            where name =#{value} or code =#{value} or helpCode =#{helpCode}
        </if>
    </select>

1.3.4 检查组分页效果展示

在这里插入图片描述
也可以根据编码/名称/助记码实现查询,下面以编码为例查询:
在这里插入图片描述

1.4 编辑检查组

1.4.1 代码思路分析

(1)在前端为编辑二字绑定单击事件,弹出编辑检查组的框。
(2)回显数据:- 回显检查组数据;回显查询检查项列表;当前检查组具有的检查项的复选框需要选中
(3)编辑检查框点击确定二字的时候需要向后端发送请求,后端执行操作
(4)-后端需要先保存编辑检查组;首先 删除检查项和检查组中间表数据(原来的)再重新新增检查项和检查组中间表数据

1.4.2 前台代码

(1)在前端为编辑二字绑定单击事件,弹出编辑检查组的框。
在这里插入图片描述
(2)回显数据:- 回显检查组数据;回显查询检查项列表;当前检查组具有的检查项的复选框需要选中

 // 弹出编辑窗口
                handleUpdate(row) {
                    //编辑检查组
                    //1.点确定的时候弹出编辑框,检查项回显
                    //弹出编辑窗口
                    this.dialogFormVisible4Edit = true;
                    //回显数据 根据检查组id查询检查组数据
                    axios.get("/checkgroup/findById.do?groupId="+row.id).then(res=>{
                        this.$message({
                            message: res.data.message,
                            type: res.data.flag ? 'success':"error"
                        });
                        if(res.data.flag) {
                            //如果查询检查组回显成功再显示
                            this.formData = res.data.data;
                            //如果检查组查询成功 再查询检查项列表
                            axios.post('/checkitem/findAll.do').then(res=>{
                                this.$message({
                                    message: res.data.message,
                                    type: res.data.flag ? 'success':"error"
                                });
                                if(res.data.flag) {
                                    //检查项列表回显
                                    this.tableData = res.data.data;

                                    //查询检查项列表成功后 根据检查组id查询检查项ids  [28,29,30]
                                    axios.get('/checkgroup/findCheckItemIdsByCheckGroupId.do?groupId='+row.id).then(res=>{
                                        //List<Integer> == res.data.data  [28,29,30]
                                        this.$message({
                                            message: res.data.message,
                                            type: res.data.flag ? 'success':"error"
                                        });
                                        if(res.data.flag) {
                                            this.checkitemIds = res.data.data;
                                        }
                                    })
                                }

                            })
                        }

                    })
                },

(3)为编辑检查框的确定二字绑定单击事件,点击后需要后端发送edit请求,后端执行操作。
在这里插入图片描述

//编辑
                handleEdit() {
                    //1.关闭弹出窗口
                    this.dialogFormVisible4Edit=false;
                    //提交表单数据 检查组对象和检查ids
                    axios.post("/checkgroup/edit.do?checkitemIds="+this.checkitemIds,this.formData).then(res=>{
                        this.$message({
                            message: res.data.message,
                            type: res.data.flag ? 'success':"error"
                        });
                        //重新刷新页面
                        this.findPage();
                    })

                },

1.4.3 后台代码

后端需要先保存编辑检查组;首先 删除检查项和检查组中间表数据(原来的)再重新新增检查项和检查组中间表数据。
(1)在CheckGroupController中创建findCheckItemIdsByCheckGroupId方法,edit方法和findById方法。findCheckItemIdsByCheckGroupId方法和findById方法可以实现回显检查组数据;回显查询检查项列表;当前检查组具有的检查项的复选框选中。edit方法方法是更新数据。

 @RequestMapping(value = "/findById")
    public Result findById(Integer groupId) {

        try {
            CheckGroup checkGroup=checkGroupService.findById(groupId);
            return new Result(true, MessageConstant.QUERY_CHECKGROUP_SUCCESS,checkGroup);
        } catch (Exception e) {
            e.printStackTrace();
            return new Result(false, MessageConstant.QUERY_CHECKGROUP_FAIL);
        }
    }
 /**
     * 根据groupid查询CheckItemIds
     * @param groupId
     * @return
     */
    @RequestMapping(value = "/findCheckItemIdsByCheckGroupId")
    public Result findCheckItemIdsByCheckGroupId(Integer groupId) {

        try {
            List<Integer> integerList=checkGroupService.findCheckItemIdsByCheckGroupId(groupId);
            return new Result(true, MessageConstant.QUERY_CHECKGROUP_SUCCESS,integerList);
        } catch (Exception e) {
            e.printStackTrace();
            return new Result(false, MessageConstant.QUERY_CHECKGROUP_FAIL);
        }
    }

    /**
     * 编辑检查组
     * @param checkGroup
     * @param checkitemIds
     * @return
     */
    @RequestMapping(value = "/edit")
    public Result edit(@RequestBody CheckGroup checkGroup,Integer[] checkitemIds) {

        try {
            checkGroupService.edit(checkGroup,checkitemIds);
            return new Result(true, MessageConstant.EDIT_CHECKGROUP_SUCCESS);
        } catch (Exception e) {
            e.printStackTrace();
            return new Result(false,MessageConstant.EDIT_CHECKGROUP_FAIL);
        }
    }

(2)在CheckGroupService中创建findById方法,findCheckItemIdsByCheckGroupId方法和edit方法。

 /**
     * 根据id回显检查组
     * @param groupId
     * @return
     */
    CheckGroup findById(Integer groupId);
/**
     * 根据GroupId查询CheckItemIds
     * @param groupId
     * @return
     */
    List<Integer> findCheckItemIdsByCheckGroupId(Integer groupId);

    /**
     * 编辑检查组
     * @param checkGroup
     * @param checkitemIds
     */
    void edit(CheckGroup checkGroup, Integer[] checkitemIds);

(3)在CheckGroupServiceImpl中创建findById方法,findCheckItemIdsByCheckGroupId和edit方法。其中findById方法是实现回显检查组,edit方法首先 删除检查项和检查组中间表数据(原来的)(deleteAssociation方法)再重新新增检查项和检查组中间表数据(setCheckGroupAndCheckItem方法)

 /**
     * 根据id回显检查组
     * @param groupId
     * @return
     */
    @Override
    public CheckGroup findById(Integer groupId) {
        return checkGroupDao.findById(groupId);
    }
 @Override
    public List<Integer> findCheckItemIdsByCheckGroupId(Integer groupId) {
        return checkGroupDao.findCheckItemIdsByCheckGroupId(groupId);
    }

    /**
     * 编辑检查组
     * @param checkGroup
     * @param checkitemIds
     */
    @Override
    public void edit(CheckGroup checkGroup, Integer[] checkitemIds) {
        //更新检查组表 update语句
        checkGroupDao.edit(checkGroup);
        //先删除检查组关联的检查记录(中间表)
        checkGroupDao.deleteAssociation(checkGroup.getId());
        //重新建立关联关系(插入中间表)
        setCheckGroupAndCheckItem(checkGroup.getId(),checkitemIds);

    }

(4)在CheckGroupDao中扩展findById方法,edit方法,deleteAssociation方法,setCheckGroupAndCheckItem方法

<!--根据id回显检查项-->
    <select id="findById" parameterType="int" resultType="com.itheima.pojo.CheckGroup">
        select * from t_checkgroup where id=#{groupId}
    </select>
/**
     * findCheckItemIdsByCheckGroupId
     * @param groupId
     * @return
     */
    List<Integer> findCheckItemIdsByCheckGroupId(Integer groupId);

    /**
     * 更新检查组
     * @param checkGroup
     */
    void edit(CheckGroup checkGroup);

    /**
     * 删除关联表
     * @param groupId
     */
    void deleteAssociation(Integer groupId);

(5)在CheckGroupDao.xml中操作数据库实现findById方法,edit方法,deleteAssociation方法,setCheckGroupAndCheckItem方法。

<!--根据id回显检查项-->
    <select id="findById" parameterType="int" resultType="com.itheima.pojo.CheckGroup">
        select * from t_checkgroup where id=#{groupId}
    </select>

    <!--findCheckItemIdsByCheckGroupId-->
    <select id="findCheckItemIdsByCheckGroupId" resultType="int" parameterType="int">
        SELECT checkitem_id FROM t_checkgroup_checkitem  where checkgroup_id=#{groupId}
    </select>

    <!--编辑-->
    <update id="edit" parameterType="com.itheima.pojo.CheckGroup">
        update t_checkgroup
        <set>
            <if test="code!=null and code.length>0">
                code=#{code},
            </if>
            <if test="name!=null and name.length>0">
                name=#{name},
            </if>
            <if test="helpCode!=null and helpCode.length>0">
                helpCode=#{helpCode},
            </if>
            <if test="sex!=null and sex.length>0">
                sex=#{sex},
            </if>
            <if test="remark!=null and remark.length>0">
                remark=#{remark},
            </if>
            <if test="attention!=null and attention.length>0">
                attention=#{attention},
            </if>
        </set>
        where id = #{id}
    </update>

    <!--删除中间关系表-->
    <delete id="deleteAssociation" parameterType="int">
        delete from t_checkgroup_checkitem where checkgroup_id=#{groupId}
    </delete>

1.4.4 编辑检查组效果展示

(1)根据id回显检查项和基本数据成功
在这里插入图片描述
(2)新增检查组关联项,编号0003,改变基本信息助记码为RYJC。点击确定会发出edit请求
在这里插入图片描述
在这里插入图片描述
观察改变后的效果
在这里插入图片描述

1.5 删除检查组

1.5.1 代码思路分析

(1)在前端要为删除二字绑定单击事件去向后端发出删除的请求,并把id传给后端,为了防止用户误删需要添加“是否确定”来提醒用户。
(2)如果用户点击确定按钮就需要发送ajax请求,并且将当前检查项的id作为参数提交到后台进行删除操作。
(3)在后台删除时要先判断当前检查组是否和套餐、检查项关联,若关联需要弹出提示“当前检查组已关联,删除失败”,否则执行删除操作。

1.5.2 前台代码

(1)在前端要为删除二字绑定单击事件去向后端发出删除的请求,并把id传给后端,为了防止用户误删需要添加“是否确定”来提醒用户。
在这里插入图片描述
(2)如果用户点击确定按钮就需要发送ajax请求,并且将当前检查项的id作为参数提交到后台进行删除操作。

// 删除检查组
                 //前端:提示是否确定删除,确定的话发送删除请求
                    //后端:查询检查组和检查表项关系是否存在,存在则无法删除
                    //查询检查组和套餐表关系是否存在,存在则无法删除
                handleDelete(row) {
                    this.$confirm('确认要删除检查组吗, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        //发送删除请求
                        axios.get('/checkgroup/deleteById.do?id='+row.id).then(res=>{
                            this.$message({
                                message: res.data.message,
                                type: res.data.flag ? 'success':"error"
                            });
                            //重新加载数据
                            this.findPage();
                        })

                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        });
                    });

1.5.3 后台代码

(1)在CheckGroupController中创建deleteById方法

 /**
     * 删除检查组
     * @param id
     * @return
     */
    @RequestMapping(value = "/deleteById")
    public Result deleteById(Integer id) {

        try {
            checkGroupService.deleteById(id);
            return new Result(true, MessageConstant.DELETE_CHECKGROUP_SUCCESS);
        } catch (RuntimeException e) {
            e.printStackTrace();
            return new Result(false, e.getMessage());
        }catch (Exception e) {
            e.printStackTrace();
            return new Result(false, MessageConstant.DELETE_CHECKGROUP_FAIL);
        }
    }

(2)在CheckGroupService中扩展deleteById方法

 /**
     * 删除检查组
     * @param id
     */
    void deleteById(Integer id);

(3)在CheckGroupServiceImpl中扩展deleteById方法
查询检查组和检查项表关系是否存在,对应的方法分别为findCountByCheckGroupIdO和findCountByCheckGroupIdT,存在则无法删除。不存在调用deleteById方法删除。

 /**
     * 删除检查组
     * @param id
     */
    @Override
    public void deleteById(Integer id) {
        //业务角度考虑
        //查询检查组和检查项表关系是否存在,存在则无法删除
        int count = checkGroupDao.findCountByCheckGroupIdO(id);
        if(count>0){
            throw new RuntimeException(MessageConstant.DELETE_CHECKITEM_GROUP_FAIL);//一定要install
        }
        //查询检查组和套餐表关系是否存在,存在则无法删除
        int count2 = checkGroupDao.findCountByCheckGroupIdT(id);
        if(count2>0){
            throw new RuntimeException(MessageConstant.DELETE_CHECKGROUP_SETMEAL_FAIL);//一定要install
        }
        //以上两个关系都不存在,则可以删除
        checkGroupDao.deleteById(id);
    }

(4)在CheckGroupDao中扩展deleteById方法
,findCountByCheckGroupIdO方法和findCountByCheckGroupIdT方法

/**
     * //查询检查组和检查项表关系是否存在,存在则无法删除
     * @param id
     * @return
     */
    int findCountByCheckGroupIdO(Integer id);

    /**
     * //查询检查组和套餐关系是否存在,存在则无法删除
     * @param id
     * @return
     */
    int findCountByCheckGroupIdT(Integer id);

    /**
     * 删除检查组
     * @param id
     */
    void deleteById(Integer id);

(5)在CheckGroupDao.xml文件中操作数据库实现deleteById方法
,findCountByCheckGroupIdO方法和findCountByCheckGroupIdT方法

<!--查询检查组和检查项表关系是否存在-->
    <select id="findCountByCheckGroupIdO" parameterType="int" resultType="int">
        select count(*) from t_checkgroup_checkitem where checkgroup_id = #{id}
    </select>


    <!--查询检查组和套餐表关系是否存在-->
    <select id="findCountByCheckGroupIdT" parameterType="int" resultType="int">
        select count(*) from t_setmeal_checkgroup where checkgroup_id = #{id}
    </select>
    <!--删除检查组-->
    <delete id="deleteById" parameterType="int">
        delete from t_checkgroup where id = #{id}
    </delete>

1.5.4 删除检查组效果展示

(1)为了测试需要新建一个不和检查项关联的检查组,如下所示。
在这里插入图片描述
(2)删除检查组
在这里插入图片描述
(3)测试删除和检查项关联的检查组,能正确给出提示信息。
在这里插入图片描述

2. 预约检查组管理总结

可以发现检查组管理和检查项管理很是相似,关键的改变是在于数据回显更加复杂以及新增/删除的功能时要考虑对中间表的操作
再次强调代码逻辑十分重要,请分析清楚逐步实现!!!!!

  • 2
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值