黑马程序员技术交流社区

标题: 【郑州校区】传智健康项目讲义第三章一 [打印本页]

作者: 我是楠楠 时间: 2019-10-23 16:32
标题: 【郑州校区】传智健康项目讲义第三章一
【郑州校区】传智健康项目讲义第三章预约管理-检查组管理一
1. 需求分析
检查组其实就是多个检查项的集合，例如有一个检查组为“一般检查”，这个检查组可以包括多个检查项：身高、体重、收缩压、舒张压等。所以在添加检查组时需要选择这个检查组包括的检查项。
检查组对应的实体类为CheckGroup，对应的数据表为t_checkgroup。检查组和检查项为多对多关系，所以需要中间表t_checkgroup_checkitem进行关联。
2. 新增检查组
2.1 完善页面
检查组管理页面对应的是checkgroup.html页面，根据产品设计的原型已经完成了页面基本结构的编写，现在需要完善页面动态效果。
2.1.1 弹出新增窗口
页面中已经提供了新增窗口，只是出于隐藏状态。只需要将控制展示状态的属性dialogFormVisible改为true即可显示出新增窗口。点击新建按钮时绑定的方法为handleCreate，所以在handleCreate方法中修改dialogFormVisible属性的值为true即可。同时为了增加用户体验度，需要每次点击新建按钮时清空表单输入项。
由于新增检查组时还需要选择此检查组包含的检查项，所以新增检查组窗口分为两部分
信息：基本信息和检查项信息，如下图

新建按钮绑定单击事件，对应的处理函数为handleCreate

[AppleScript] 纯文本查看 复制代码

<el‐button type="primary" class="butT" @click="handleCreate()">新建</el‐

button>

[AppleScript] 纯文本查看 复制代码

// 重置表单

resetForm() {

this.formData = {};

},

// 弹出添加窗口

handleCreate() {

this.resetForm();

this.dialogFormVisible = true;

}

2.1.2 动态展示检查项列表
现在虽然已经完成了新增窗口的弹出，但是在检查项信息标签页中需要动态展示所有的检查项信息列表数据，并且可以进行勾选。具体操作步骤如下：
（1）定义模型数据

[AppleScript] 纯文本查看 复制代码

tableData:[],//新增和编辑表单中对应的检查项列表数据

checkitemIds:[],//新增和编辑表单中检查项对应的复选框，基于双向绑定可以进行回显

和数据提交

（2）动态展示检查项列表数据，数据来源于上面定义的tableData模型数据

[AppleScript] 纯文本查看 复制代码

<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>

（3）完善handleCreate方法，发送ajax请求查询所有检查项数据并将结果赋值给tableData模型数据用于页面表格展示

[AppleScript] 纯文本查看 复制代码

// 弹出添加窗口

handleCreate() {

this.dialogFormVisible = true;

this.resetForm();

//默认切换到第一个标签页（基本信息）

this.activeName='first';

//重置

this.checkitemIds = [];

//发送ajax请求查询所有检查项信息

axios.get("/checkitem/findAll.do").then((res)=> {

if(res.data.flag){

//将检查项列表数据赋值给模型数据用于页面表格展示

this.tableData = res.data.data;

}else{

this.$message.error(res.data.message);

}

});

}

（4）分别在CheckItemController、CheckItemService、CheckItemServiceImpl、CheckItemDao、CheckItemDao.xml中扩展方法查询所有检查项数据CheckItemController：

[AppleScript] 纯文本查看 复制代码

//查询所有

@RequestMapping("/findAll")

public Result findAll(){

List<CheckItem> checkItemList = checkItemService.findAll();

if(checkItemList != null && checkItemList.size() > 0){

Result result = new Result(true,

MessageConstant.QUERY_CHECKITEM_SUCCESS);

result.setData(checkItemList);

return result;

}

return new Result(false,MessageConstant.QUERY_CHECKITEM_FAIL);

}

CheckItemService：

[AppleScript] 纯文本查看 复制代码

public List<CheckItem> findAll();

CheckItemServiceImpl：

[AppleScript] 纯文本查看 复制代码

public List<CheckItem> findAll() {

return checkItemDao.findAll();

}

CheckItemDao：

[AppleScript] 纯文本查看 复制代码

public List<CheckItem> findAll();

CheckItemDao.xml：

[AppleScript] 纯文本查看 复制代码

<select id="findAll" resultType="com.itheima.pojo.CheckItem">

select * from t_checkitem

</select>

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2