黑马程序员技术交流社区

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

作者: 我是楠楠 时间: 2019-10-30 15:58
标题: 【郑州校区】传智健康项目讲义第四章四

【郑州校区】传智健康项目讲义第四章四

2. 新增套餐
2.1 需求分析
套餐其实就是检查组的集合，例如有一个套餐为“入职体检套餐”，这个体检套餐可以包括多个检查组：一般检查、血常规、尿常规、肝功三项等。所以在添加套餐时需要选择这个套餐包括的检查组。
套餐对应的实体类为Setmeal，对应的数据表为t_setmeal。套餐和检查组为多对多关系，所以需要中间表t_setmeal_checkgroup进行关联。
2.2 完善页面
套餐管理页面对应的是setmeal.html页面，根据产品设计的原型已经完成了页面基本结构的编写，现在需要完善页面动态效果。
2.2.1 弹出新增窗口
页面中已经提供了新增窗口，只是出于隐藏状态。只需要将控制展示状态的属性dialogFormVisible改为true接口显示出新增窗口。点击新建按钮时绑定的方法为handleCreate，所以在handleCreate方法中修改dialogFormVisible属性的值为true即可。同时为了增加用户体验度，需要每次点击新建按钮时清空表单输入项。
由于新增套餐时还需要选择此套餐包含的检查组，所以新增套餐窗口分为两部分信息：
基本信息和检查组信息，如下图：

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

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

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

button>

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

// 重置表单

resetForm() {

this.formData = {};

this.activeName='first';

this.checkgroupIds = [];

this.imageUrl = null;

}

// 弹出添加窗口

handleCreate() {

this.dialogFormVisible = true;

this.resetForm();

}

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

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

tableData:[],//添加表单窗口中检查组列表数据

checkgroupIds:[],//添加表单窗口中检查组复选框对应id

（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="checkgroupIds" 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();

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

if(res.data.flag){

this.tableData = res.data.data;

}else{

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

}

});

}

（4）分别在CheckGroupController、CheckGroupService、CheckGroupServiceImpl、CheckGroupDao、CheckGroupDao.xml中扩展方法查询所有检查组数据CheckGroupController：

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

//查询所有

@RequestMapping("/findAll")

public Result findAll(){

List<CheckGroup> checkGroupList = checkGroupService.findAll();

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

Result result = new Result(true,

MessageConstant.QUERY_CHECKGROUP_SUCCESS);

result.setData(checkGroupList);

return result;

}

return new Result(false,MessageConstant.QUERY_CHECKGROUP_FAIL);

}

CheckGroupService：

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

List<CheckGroup> findAll();

CheckGroupServiceImpl：

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

 public List<CheckGroup> findAll() {

return checkGroupDao.findAll();

}

CheckGroupDao：

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

List<CheckGroup> findAll();

CheckGroupDao.xml：

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

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

select * from t_checkgroup

</select>

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

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