4. 检查项分页

本项目所有分页功能都是基于ajax的异步请求来完成的，请求参数和后台响应数据格式都使用json数据

格式。

请求参数包括页码、每页显示记录数、查询条件。

请求参数的json格式为：{currentPage:1,pageSize:10,queryString:''oldlu''}

后台响应数据包括总记录数、当前页需要展示的数据集合。

响应数据的json格式为：{total:1000,rows:[]}(其他数据都可以通过currentPage,pageSize计算得到.如下图：

4.1 完善页面

4.1.1 定义分页相关模型数据

pagination: {//分页相关模型数据
currentPage: 1,//当前页码
pageSize:10,//每页显示的记录数
total:0,//总记录数
queryString:null//查询条件
},
dataList: [],//当前页要展示的分页列表数据
1234567

4.1.2 定义分页方法

在页面中提供了findPage方法用于分页查询，为了能够在checkitem.html页面加载后直接可以展示分页数据，可以在VUE提供的钩子函数created中调用findPage方法

//钩子函数，VUE对象初始化完成后自动执行
created() {
  this.findPage();
}
1234
//分页查询
findPage() {
//分页参数
var param = {
  currentPage:this.pagination.currentPage,//页码
  pageSize:this.pagination.pageSize,//每页显示的记录数
  queryString:this.pagination.queryString//查询条件
};
//请求后台
axios.post("/checkitem/findPage.do",param).then((response)=> {
    //为模型数据赋值，基于VUE的双向绑定展示到页面
    this.dataList = response.data.rows;
    this.pagination.total = response.data.total;
  });
}

注意:个人出现了报错,使用then()时使用ES5语法出现TypeError: Cannot set property 'total' of undefined at错误,改成ES6语法解决.

4.1.3 完善分页方法执行时机

除了在created钩子函数中调用findPage方法查询分页数据之外，当用户点击查询按钮或者点击分页条中的页码时也需要调用findPage方法重新发起查询请求。

为查询按钮绑定单击事件，调用findPage方法

<el-button @click="findPage()" class="dalfBut">查询</el-button>
1

为分页条组件绑定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();
}
123456

4.2 后台代码

4.2.1 Controller

在CheckItemController中增加分页查询方法

//分页查询
@RequestMapping("/findPage")
public PageResult findPage(@RequestBody QueryPageBean queryPageBean){
  //调用Service方法
  PageResult pageResult = checkItemService.pageQuery(queryPageBean);
  return pageResult;
}

4.2.2 服务接口

在CheckItemService服务接口中扩展分页查询方法

public PageResult pageQuery(QueryPageBean queryPageBean);
1

4.2.3 服务实现类

在CheckItemServiceImpl服务实现类中实现分页查询方法，基于Mybatis分页助手插件实现分页

public PageResult pageQuery(QueryPageBean queryPageBean) {
    //获取数据
    Integer currentPage = queryPageBean.getCurrentPage();
        Integer pageSize = queryPageBean.getPageSize();
        String queryString = queryPageBean.getQueryString();
        //分页查询,基于mybatis框架提供的分页助手
        //基于线程绑定
        PageHelper.startPage(currentPage, pageSize);
        //调用Service方法
        Page<CheckItem> page = checkItemDao.selectByCondition(queryString);
        //通过Page对象获取
        long total = page.getTotal();
        List<CheckItem> rows = page.getResult();
        //封装返回值
        return new PageResult(total, rows);
}

4.2.4 Dao接口

在CheckItemDao接口中扩展分页查询方法

public Page<CheckItem> selectByCondition(String queryString);
1

注意:只有使用MyBatis的分页助手时,才可以使用Page作为返回对象(可以通过Page对象获取分页的相关信息)

4.2.5 Mapper映射文件

在CheckItemDao.xml文件中增加SQL定义

<select id="selectByCondition" parameterType="string" resultType="com.itheiheihei.pojo.CheckItem">
  select * from t_checkitem
  <if test="value != null and value.length > 0">
    where code = #{value} or name = #{value}
  </if>
</select>

5. 删除检查项

5.1 完善页面

为了防止用户误操作，点击删除按钮时需要弹出确认删除的提示，用户点击取消则不做任何操作，用户点击确定按钮再提交删除请求。

5.1.1 绑定单击事件

需要为删除按钮绑定单击事件，并且将当前行数据作为参数传递给处理函数

<el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</elbutton>

<template slot-scope="scope">:模板
slot-scope="scope"作用域插槽
scope.row:作用是获取当前数据条的对象

// 删除
handleDelete(row) {
  alert(row.id);
}

row.id获取数据条对象的id

5.1.2 弹出确认操作提示

用户点击删除按钮会执行handleDelete方法，此处需要完善handleDelete方法，弹出确认提示信息。ElementUI提供了$confirm方法来实现确认提示信息弹框效果

// 删除
handleDelete(row) {
  //alert(row.id);
  this.$confirm("确认删除当前选中记录吗？","提示",{type:'warning'}).then(()=>{
  //点击确定按钮时只需此处代码
  alert('用户点击的是确定按钮');
  });
}

5.1.3 发送请求

如果用户点击确定按钮就需要发送ajax请求，并且将当前检查项的id作为参数提交到后台进行删除操作

// 删除
handleDelete(row) {
//alert(row.id);
this.$confirm("确认删除吗？","提示",{type:'warning'}).then(()=>{
//点击确定按钮时只需此处代码
//alert('用户点击的是确定按钮');
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();
}
});
});
}

5.2 后台代码

5.2.1 Controller

在CheckItemController中增加删除方法

//删除
@RequestMapping("/delete")
  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);
}

5.2.2 服务接口

在CheckItemService服务接口中扩展删除方法

public void delete(Integer id);
1

5.2.3 服务实现类

注意：不能直接删除，需要判断当前检查项是否和检查组关联，如果已经和检查组进行了关联则不允许删除

//删除
public void delete(Integer id) throws RuntimeException{
  //查询当前检查项是否和检查组关联
  long count = checkItemDao.findCountByCheckItemId(id);
  if(count > 0){
    //当前检查项被引用，不能删除
    throw new RuntimeException("当前检查项被引用，不能删除");
  }
  checkItemDao.deleteById(id);
}

5.2.4 Dao接口

在CheckItemDao接口中扩展方法findCountByCheckItemId和deleteById

public void deleteById(Integer id);
public long findCountByCheckItemId(Integer checkItemId);
12

5.2.5 Mapper映射文件

在CheckItemDao.xml中扩展SQL语句

<!--删除-->
<delete id="deleteById" parameterType="int">
  delete from t_checkitem where id = #{id}
</delete>
<!--根据检查项id查询中间关系表-->
<select id="findCountByCheckItemId" resultType="long" parameterType="int">
  select count(*) from t_checkgroup_checkitem where checkitem_id = #{checkitem_id}
</select>

6. 编辑检查项

6.1 完善页面

用户点击编辑按钮时，需要弹出编辑窗口并且将当前记录的数据进行回显，用户修改完成后点击确定按钮将修改后的数据提交到后台进行数据库操作。

6.1.1 绑定单击事件

需要为编辑按钮绑定单击事件，并且将当前行数据作为参数传递给处理函数

<el-button type="primary" size="mini" @click="handleUpdate(scope.row)">编辑</elbutton>
1
handleUpdate(row) {
  alert(row);
}

6.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;
    //为模型数据设置值，基于VUE双向数据绑定回显到页面
    this.formData = res.data.data;
  }else{
    this.$message.error("获取数据失败，请刷新当前页面");
  }
});
}

6.1.3 发送请求

在编辑窗口中修改完成后，点击确定按钮需要提交请求，所以需要为确定按钮绑定事件并提供处理函数

<el-button type="primary" @click="handleEdit()">确定</el-button>
1
//编辑
handleEdit() {
//表单校验
this.$refs['dataEditForm'].validate((valid)=>{
  if(valid){
    //表单校验通过，发送请求
    axios.post("/checkitem/edit.do",this.formData).then((response)=> {
      //隐藏编辑窗口
      this.dialogFormVisible4Edit = false;
      if(response.data.flag){
        //编辑成功，弹出成功提示信息
        this.$message({
          message: response.data.message,
          type: 'success'
      });
      }else{
        //编辑失败，弹出错误提示信息
        this.$message.error(response.data.message);
      }
    }).finally(()=> {
      //重新发送请求查询分页数据
      this.findPage();
    });
  }else{
    //表单校验失败
    this.$message.error("表单数据校验失败");
    return false;
  }
});
}

6.2 后台代码

6.2.1 Controller

在CheckItemController中增加编辑方法

//编辑
@RequestMapping("/edit")
public Result edit(@RequestBody CheckItem checkItem){
  try {
    checkItemService.edit(checkItem);
  }catch (Exception e){
    return new Result(false,MessageConstant.EDIT_CHECKITEM_FAIL);
  }
  return new Result(true,MessageConstant.EDIT_CHECKITEM_SUCCESS);
}
@RequestMapping("/findById")
public Result findById(Integer id){
  try{
    CheckItem checkItem = checkItemService.findById(id);
    return new Result(true,MessageConstant.QUERY_CHECKITEM_SUCCESS,checkItem);
  }catch (Exception e){
    e.printStackTrace();
    //服务调用失败
    return new Result(false, MessageConstant.QUERY_CHECKITEM_FAIL);
  }
}

6.2.2 服务接口

在CheckItemService服务接口中扩展编辑方法

public void edit(CheckItem checkItem);
public CheckItem findById(Integer id);

6.2.3 服务实现类

在CheckItemServiceImpl实现类中实现编辑方法

//编辑
public void edit(CheckItem checkItem) {
  checkItemDao.edit(checkItem);
}
public CheckItem findById(Integer id) {
  return checkItemDao.findById(id);
}

6.2.4 Dao接口

在CheckItemDao接口中扩展edit方法

public void edit(CheckItem checkItem);
public CheckItem findById(Integer id);

6.2.5 Mapper映射文件