传智健康-检查项管理
传智健康-检查项管理
1、新增检查项
1.1、完善页面
检查项管理页面对应的是checkitem.html页面,根据产品设计的原型已经完成了页面基本结构的编写,
现在需要完善页面动态效果。
1.2弹出新增窗口
页面中已经提供了新增窗口,只是处于隐藏状态。只需要将控制展示状态的属性dialogFormVisible改为
true就可以显示出新增窗口。
新建按钮绑定的方法为handleCreate,所以在handleCreate方法中修改dialogFormVisible属性的值为
true即可。同时为了增加用户体验度,需要每次点击新建按钮时清空表单输入项。
// 弹出添加窗口handleCreate() {this.dialogFormVisible=true;//弹出添加窗口this.resetForm();//重置数据this.$refs["dataAddForm"].clearValidate();//清除校验残留信息},
1.3 输入校验
rules: {//校验规则code: [{ required: true, message: '项目编码为必填项', trigger: 'blur' }],name: [{ required: true, message: '项目名称为必填项', trigger: 'blur' }]}
1.4提交表单数据
点击新增窗口中的确定按钮时,触发handleAdd方法,所以需要在handleAdd方法中进行完善。
//添加
handleAdd () {this.$refs['dataAddForm'].validate((valid)=>{if (valid){//校验通过,发送post请求axios.post("/checkitem/add.do",this.formData).then((res)=>{//关闭新增窗口this.dialogFormVisible=false;if (res.data.flag){//成功//新增成功以后,调用findPage分页查询,查出最新数据this.findPage();//提示消息this.$message({message: res.data.message,type:'success'});}else {//失败this.$message({message:res.data.message,type:'error'})}});}else {//校验失败this.$message.error("新增失败,请输入正确的内容");return false;}});
},
1.5后台代码
1.5.1Controller
在health_service_provider工程中创建CheckItemServiceImpl实现类
/*** @Description: TODO* @author: scott* @date: 2021年05月30日 15:47*/
@RestController
@RequestMapping("/checkitem")
public class CheckItemController {@Reference//使用doubbo远程调用时用Reference,private CheckItemService checkItemService;//新增@RequestMapping("/add")public Result add(@RequestBody CheckItem checkItem){System.out.println(checkItem.getName());try {checkItemService.add(checkItem);}catch (Exception e){return new Result(false, MessageConstant.ADD_CHECKITEM_FAIL);}return new Result(true,MessageConstant.ADD_CHECKITEM_SUCCESS);}
}
1.5.2服务接口
在health_interface工程中创建CheckItemService接口
/*** 检查项服务接口*/
public interface CheckItemService {//新增public void add(CheckItem checkItem);
}
1.5.3服务实现类
在health_service_provider工程中创建CheckItemServiceImpl实现类
/*** @Description: TODO* @author: scott* @date: 2021年05月30日 15:49*/
@Service(interfaceClass = CheckItemService.class)
@Transactional
public class CheckItemServiceImpl implements CheckItemService {@Autowiredprivate CheckItemDao checkItemDao;public void add(CheckItem checkItem) {System.out.println("CheckItemServiceImpl-----"+checkItem.getSex());checkItemDao.add(checkItem);}
}
1.5.4Dao接口
在health_service_provider工程中创建CheckItemDao接口,本项目是基于Mybatis的Mapper代理技术
实现持久层操作,故只需要提供接口和Mapper映射文件,无须提供实现类
public interface CheckItemDao {public void add(CheckItem checkItem);
}
1.5.5Mapper映射文件
在health_service_provider工程中创建CheckItemDao.xml映射文件,需要和CheckItemDao接口在同
一目录下
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN""http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
<mapper namespace="com.itheima.dao.CheckItemDao"><!--新增--><insert id="add" parameterType="com.itheima.pojo.CheckItem">insert into t_checkitem(code,name,sex,age,price,type,remark,attention)values(#{code},#{name},#{sex},#{age},#{price},#{type},#{remark},#{attention})</insert>
</mapper>
2、检查项分页
本项目所有分页功能都是基于ajax的异步请求来完成的,请求参数和后台响应数据格式都使用json数据
格式。
请求参数包括页码、每页显示记录数、查询条件。
请求参数的json格式为:{currentPage:1,pageSize:10,queryString:’‘itcast’’}
后台响应数据包括总记录数、当前页需要展示的数据集合。
2.1完善页面
2.1.1 定义分页相关模型数据
pagination: {//分页相关模型数据currentPage: 1,//当前页码pageSize:10,//每页显示的记录数total:0,//总记录数queryString:null//查询条件},
2.1.2 定义分页方法
在页面中提供了findPage方法用于分页查询,为了能够在checkitem.html页面加载后直接可以展示分页
数据,可以在VUE提供的钩子函数created中调用findPage方法
//钩子函数,VUE对象初始化完成后自动执行created() {this.findPage();},
//分页查询
findPage() {//分页参数var param ={currentPage: this.pagination.currentPage,pageSize: this.pagination.pageSize,queryString: this.pagination.queryString};//请求后台axios.post("/checkitem/findPage.do",param).then((res)=>{//为模型数据赋值this.dataList = res.data.rows;this.pagination.total = res.data.total;})
},
2.1.3完善分页方法执行时机
除了在created钩子函数中调用findPage方法查询分页数据之外,当用户点击查询按钮或者点击分页条
中的页码时也需要调用findPage方法重新发起查询请求。
为查询按钮绑定单击事件,调用findPage方法
为分页条组件绑定current-change事件,此事件是分页条组件自己定义的事件,当页码改变时触发,对
应的处理函数为handleCurrentChange
<el-paginationclass="pagiantion"@current-change="handleCurrentChange":current-page="pagination.currentPage":page-size="pagination.pageSize"layout="total, prev, pager, next, jumper":total="pagination.total">
</el-pagination>
定义handleCurrentChange方法
//切换页码
handleCurrentChange(currentPage) {//currentPage为切换后的页码this.pagination.currentPage = currentPage;this.findPage();
}
2.2 后台代码
2.2.1Controller
在CheckItemController中增加分页查询方法
//分页查询
@RequestMapping("/findPage")
public PageResult findPage(@RequestBody QueryPageBean queryPageBean){PageResult pageResult = checkItemService.pageQuery(queryPageBean.getCurrentPage(),queryPageBean.getPageSize(),queryPageBean.getQueryString());return pageResult;
}
2.2.2 服务接口
在CheckItemService服务接口中扩展分页查询方法
public PageResult pageQuery(Integer currentPage, Integer pageSize, String
queryString);
2.2.3 服务实现类
在CheckItemServiceImpl服务实现类中实现分页查询方法,基于Mybatis分页助手插件实现分页
public PageResult pageQuery(Integer currentPage, Integer pageSize, String queryString) {PageHelper.startPage(currentPage,pageSize);//不能直接返回page,会丢失属性totalPage<CheckItem> page = checkItemDao.selectByCondition(queryString);return new PageResult(page.getTotal(),page.getResult());}
2.2.4Dao接口
在CheckItemDao接口中扩展分页查询方法
public Page<CheckItem> selectByCondition(String queryString);
2.2.5 Mapper映射文件
在CheckItemDao.xml文件中增加SQL定义
<select id="selectByCondition" parameterType="string" resultType="com.itheima.pojo.CheckItem">select * from t_checkitem<if test="value != null and value.length > 0">where code = #{value} or name = #{value}</if></select>
3、删除检查项
3.1 完善页面
为了防止用户误操作,点击删除按钮时需要弹出确认删除的提示,用户点击取消则不做任何操作,用户
点击确定按钮再提交删除请求。
3.1.1 绑定单击事件
需要为删除按钮绑定单击事件,并且将当前行数据作为参数传递给处理函数
<el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
// 删除
handleDelete(row) {alert(row.id);
}
3.1.2弹出确认操作提示
用户点击删除按钮会执行handleDelete方法,此处需要完善handleDelete方法,弹出确认提示信息。
ElementUI提供了$confirm方法来实现确认提示信息弹框效果
// 删除
handleDelete(row) {this.$confirm('此操作将永久删除该文件, 是否继续?', '提示',{type: 'warning'}).then(()=>{//点击确定按钮时只需此处代码alert('用户点击的是确定按钮');})
}
3.1.3 发送请求
如果用户点击确定按钮就需要发送ajax请求,并且将当前检查项的id作为参数提交到后台进行删除操作
// 删除
handleDelete(row) {this.$confirm('此操作将永久删除该文件, 是否继续?', '提示',{type: 'warning'}).then(()=>{axios.get("/checkitem/delete.do?id="+row.id).then((res)=>{if (!res.data.flag){//删除失败this.$message.error(res.data.message)}else {//删除成功this.$message({message: res.data.message,type:'success'});this.findPage();}})}).catch(()=>{})
}
3.2 后台代码
3.2.1 Controller
在CheckItemController中增加删除方法
//删除
@RequestMapping(value = "/delete",produces = "application/json; charset=utf-8")public Result delete(Integer id){try {checkItemService.delete(id);}catch (RuntimeException e){return new Result(false,e.getMessage());}catch (Exception e){return new Result(false,MessageConstant.DELETE_CHECKITEM_FAIL);}return new Result(true,MessageConstant.DELETE_CHECKITEM_SUCCESS);}
3.2.2服务接口
在CheckItemService服务接口中扩展删除方法
public void delete(Integer id);
3.2.3 服务实现类
注意:不能直接删除,需要判断当前检查项是否和检查组关联,如果已经和检查组进行了关联则不允许
删除
//删除public void delete(Integer id) throws RuntimeException{//查询当前检查项是否和检查组关联Long count = checkItemDao.findCountByCheckItemId(id);if (count>0){//当前检查项被引用,不能删除throw new RuntimeException("当前检查项被引用,不能删除");}checkItemDao.deleteById(id);}
3.2.4 Dao接口
在CheckItemDao接口中扩展方法findCountByCheckItemId和deleteById
public void deleteById(Integer id);
public Long findCountByCheckItemId(Integer checkItemId);
3.2.5 Mapper映射文件
在CheckItemDao.xml中扩展SQL语句
<delete id="deleteById" parameterType="int">delete from t_checkitem where id = #{id}
</delete><select id="findCountByCheckItemId" parameterType="int" resultType="long">select count(*) from t_checkgroup_checkitem where checkitem_id = #{checkitem_id}
</select>
4、编辑检查项
4.1 完善页面
用户点击编辑按钮时,需要弹出编辑窗口并且将当前记录的数据进行回显,用户修改完成后点击确定按
钮将修改后的数据提交到后台进行数据库操作。
4.1.1 绑定单击事件
需要为编辑按钮绑定单击事件,并且将当前行数据作为参数传递给处理函数
handleUpdate(row) {alert(row);
}
4.1.2 弹出编辑窗口回显数据
当前页面中的编辑窗口已经提供好了,默认处于隐藏状态。在handleUpdate方法中需要将编辑窗口展
示出来,并且需要发送ajax请求查询当前检查项数据用于回显
// 弹出编辑窗口
handleUpdate(row) {//发送请求获取检查项信息axios.get("/checkitem/findById.do?id="+row.id).then((res)=>{if (res.data.flag){//设置编辑窗口属性,dialogFormVisible4Edit为true表示显示this.dialogFormVisible4Edit=true;this.formData = res.data.data;}else {this.$message.error("获取数据失败,请刷新当前页面");}})},
4.1.3 发送请求
在编辑窗口中修改完成后,点击确定按钮需要提交请求,所以需要为确定按钮绑定事件并提供处理函数
handleEdit
<el-button type="primary" @click="handleEdit()">确定</el-button>
//编辑
handleEdit() {//表单校验this.$refs['dataEditForm'].validate((valid)=>{if (valid){//校验通过axios.post("/checkitem/edit.do",this.formData).then((res)=>{//隐藏编辑窗口this.dialogFormVisible4Edit=false;if (res.data.flag){//请求成功this.$message({message:res.data.message,type:'success'})}else {this.$message.error(res.data.message)}});}else {//校验失败this.$message.error("数据校验失败,请重新填写!")}})
},
4.2 后台代码
4.2.1 Controller
在CheckItemController中增加编辑方法
//根据id查询检查项@RequestMapping("/findById")public Result findById(Integer id){CheckItem item = null;try {item = checkItemService.findById(id);return new Result(true,MessageConstant.QUERY_CHECKITEM_SUCCESS,item);}catch (Exception e){return new Result(false,MessageConstant.QUERY_CHECKITEM_FAIL);}}@RequestMapping("/edit")public Result edit(@RequestBody CheckItem checkItem){try {checkItemService.edit(checkItem);return new Result(true,MessageConstant.EDIT_CHECKITEM_SUCCESS);}catch (Exception e){return new Result(false,MessageConstant.EDIT_CHECKITEM_FAIL);}}
4.2.2 服务接口
在CheckItemService服务接口中扩展编辑方法
public void edit(CheckItem checkItem);
public CheckItem findById(Integer id);
4.2.3 服务实现类
在CheckItemServiceImpl实现类中实现编辑方法
public CheckItem findById(Integer id) {return checkItemDao.selectById(id);
}public void edit(CheckItem checkItem) {checkItemDao.edit(checkItem);
}
4.2.4 Dao接口
在CheckItemDao接口中扩展edit方法
public CheckItem selectById(Integer id);
public void edit(CheckItem checkItem);
4.2.5 Mapper映射文件
在CheckItemDao.xml中扩展SQL语句
<select id="selectById" parameterType="int" resultType="com.itheima.pojo.CheckItem">select * from t_checkitem where id = #{id}</select><update id="edit" parameterType="com.itheima.pojo.CheckItem">update t_checkitem<set><if test="name != null">name = #{name},</if><if test="sex != null">sex = #{sex},</if><if test="code != null">code = #{code},</if><if test="age != null">age = #{age},</if><if test="price != null">price = #{price},</if><if test="type != null">type = #{type},</if><if test="attention != null">attention = #{attention},</if><if test="remark != null">remark = #{remark},</if></set>where id = #{id}</update>
传智健康-检查项管理相关推荐
- 传智健康day05 预约管理-预约设置
1. 需求分析 前面我们已经完成了检查项管理.检查组管理.套餐管理等.接下来我们需要进行预约设置,其实就是设置每一天的体检预约最大数量.客户可以通过微信端在线预约,在线预约时需要选择体检的时间,如果客 ...
- Day_05 传智健康项目-预约管理-预约设置
第5章 预约管理-预约设置 1. 需求分析 前面我们已经完成了检查项管理.检查组管理.套餐管理等.接下来我们需要进行预约设置,其实就是设置每一天的体检预约最大数量.客户可以通过微信端在线预约,在线预约 ...
- Day_04 传智健康项目-预约管理-套餐管理
第4章 预约管理-套餐管理 1. 图片存储方案 1.1 介绍 在实际开发中,我们会有很多处理不同功能的服务器.例如: 应用服务器:负责部署我们的应用 数据库服务器:运行我们的数据库 文件服务器:负责存 ...
- 传智健康day04 预约管理-套餐管理
1. 图片存储方案 1.1 介绍 在实际开发中,我们会有很多处理不同功能的服务器.例如: 应用服务器:负责部署我们的应用 数据库服务器:运行我们的数据库 文件服务器:负责存储用户上传文件的服务器 分服 ...
- 传智健康2.0-2-预约管理-检查项管理
第2章 预约管理-检查项管理 1. 需求分析 传智健康管理系统是一款应用于健康管理机构的业务系统,实现健康管理机构工作内容可视化.患者管理专业化.健康评估数字化.健康干预流程化.知识库集成化,从而提高 ...
- 传智健康——五、预约套餐管理(详细功能实现)
文章目录 1. 预约套餐管理 1.0 前端页面准备 1.1 套餐分页 1.1.1 代码思路分析 1.1.2 前台代码 1.1.3 后台代码 1.1.4 套餐分页效果展示 1.2 新增套餐 1.2.1 ...
- 医疗管理系统-检查项管理
目录 1. 需求分析 2. 基础环境搭建 2.1 导入预约管理模块数据表 2.2 导入预约管理模块实体类 2.3 导入项目所需公共资源 3. 新增检查项 3.1 完善页面 3.1.1 弹出新增窗口 3 ...
- Day_06 传智健康项目-移动端开发-体检预约
第6章 移动端开发-体检预约 1. 移动端开发 1.1 移动端开发方式 随着移动互联网的兴起和手机的普及,目前移动端应用变得愈发重要,成为了各个商家的必争之地.例如,我们可以使用手机购物.支付.打车. ...
- 【项目一】医疗实战-传智健康
传智健康 一.项目概述 1.1 项目介绍 1.2 技术架构 1.3 功能架构 二.环境搭建 2.1 项目结构 2.2 maven项目搭建 三.Power Designer和ElementUI 3.1 ...
最新文章
- UART0串口编程(六):串口(UART0)之UC/OS(二)UC/OS下的串口接收任务编程
- 令人作呕的OpenSSL
- 数据结构源码笔记(C语言):直接选择排序
- 内容生态变现价值凸显,“长期主义者”触宝驶入快车道
- Tensorflow2.0与Tensorflow1.0的理解
- java面试题十二 String返回类型
- Visual Studio Code Go插件配置选项
- xxl-job搭建与使用
- android textview 添加阴影效果:Paint.setShadowLayer is not supported
- 联通沃云服务器型号,云服务器
- 算法----其他排序
- 【预测模型】基于BP神经网络实短时交通流预测matlab代码
- ST-Link 驱动安装
- 我国最早着手建设专用计算机广域网的是,计算机网络信息技术在畜牧养殖方面应用...
- 从傅里叶级数到拉普拉斯变换
- 通往财富自由之路详细笔记(16)
- 笔试一道honor的嵌入式软件程序编写题目【c语言字符串】
- 在状态栏StatusBar中添加网速实时显示
- openstack rally安装失败后折腾一遭
- 少儿教育和游戏的火花在哪里?