传智健康-检查项管理
传智健康-检查项管理
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 {
@Autowired
private 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接口在同
一目录下
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-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>
定义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，会丢失属性total
Page<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>