第2章预约管理-检查项管理-CFANZ编程社区

第2章预约管理-检查项管理

需求分析

云和健康管理系统是一款应用于健康管理机构的业务系统，实现健康管理机构工作内容可视化、患者管理专业化、健康评估数字化、健康干预流程化、知识库集成化，从而提高健康管理师的工作效率，加强与患者间的互动，增强管理者对健康管理机构运营情况的了解。

系统分为云和健康后台管理系统和移动端应用两部分。其中后台系统提供给健康管理机构内部人员（包括系统管理员、健康管理师等）使用，微信端应用提供给健康管理机构的用户（体检用户）使用。

本项目功能架构图：

通过上面的功能架构图可以看到，云和健康后台管理系统有会员管理、预约管理、健康评估、健康干预等功能。移动端有会员管理、体检预约、体检报告等功能。后台系统和移动端应用都会通过Dubbo调用服务层发布的服务来完成具体的操作。本项目属于典型的SOA架构形式。

本章节完成的功能开发是预约管理功能，包括检查项管理、检查组管理、体检套餐管理、预约设置等（参见产品原型）。预约管理属于系统的基础功能，主要就是管理一些体检的基础数据。

基础环境搭建

导入预约管理模块数据表

操作步骤：

（1）使用navicat工具创建本项目使用的数据库yh_health

（2）导入sql脚本yh_health.sql

导入预约管理模块实体类

将资料中提供的POJO实体类复制到health_common工程中。

导入项目所需公共资源

项目开发过程中一般会提供一些公共资源，供多个模块或者系统来使用。

本章节我们导入的公共资源有：

（1）返回消息常量类MessageConstant，放到health_common工程中

package cn.yunhe.constant;

/**
 * 消息常量
 */
public class MessageConstant {
    public static final String DELETE_CHECKITEM_FAIL = "删除检查项失败";
    public static final String DELETE_CHECKITEM_SUCCESS = "删除检查项成功";
    public static final String ADD_CHECKITEM_SUCCESS = "新增检查项成功";
    public static final String ADD_CHECKITEM_FAIL = "新增检查项失败";
    public static final String EDIT_CHECKITEM_FAIL = "编辑检查项失败";
    public static final String EDIT_CHECKITEM_SUCCESS = "编辑检查项成功";
    public static final String QUERY_CHECKITEM_SUCCESS = "查询检查项成功";
    public static final String QUERY_CHECKITEM_FAIL = "查询检查项失败";
    public static final String UPLOAD_SUCCESS = "上传成功";
    public static final String ADD_CHECKGROUP_FAIL = "新增检查组失败";
    public static final String ADD_CHECKGROUP_SUCCESS = "新增检查组成功";
    public static final String DELETE_CHECKGROUP_FAIL = "删除检查组失败";
    public static final String DELETE_CHECKGROUP_SUCCESS = "删除检查组成功";
    public static final String QUERY_CHECKGROUP_SUCCESS = "查询检查组成功";
    public static final String QUERY_CHECKGROUP_FAIL = "查询检查组失败";
    public static final String EDIT_CHECKGROUP_FAIL = "编辑检查组失败";
    public static final String EDIT_CHECKGROUP_SUCCESS = "编辑检查组成功";
    public static final String PIC_UPLOAD_SUCCESS = "图片上传成功";
    public static final String PIC_UPLOAD_FAIL = "图片上传失败";
    public static final String ADD_SETMEAL_FAIL = "新增套餐失败";
    public static final String ADD_SETMEAL_SUCCESS = "新增套餐成功";
    public static final String IMPORT_ORDERSETTING_FAIL = "批量导入预约设置数据失败";
    public static final String IMPORT_ORDERSETTING_SUCCESS = "批量导入预约设置数据成功";
    public static final String GET_ORDERSETTING_SUCCESS = "获取预约设置数据成功";
    public static final String GET_ORDERSETTING_FAIL = "获取预约设置数据失败";
    public static final String ORDERSETTING_SUCCESS = "预约设置成功";
    public static final String ORDERSETTING_FAIL = "预约设置失败";
    public static final String ADD_MEMBER_FAIL = "新增会员失败";
    public static final String ADD_MEMBER_SUCCESS = "新增会员成功";
    public static final String DELETE_MEMBER_FAIL = "删除会员失败";
    public static final String DELETE_MEMBER_SUCCESS = "删除会员成功";
    public static final String EDIT_MEMBER_FAIL = "编辑会员失败";
    public static final String EDIT_MEMBER_SUCCESS = "编辑会员成功";
    public static final String TELEPHONE_VALIDATECODE_NOTNULL = "手机号和验证码都不能为空";
    public static final String LOGIN_SUCCESS = "登录成功";
    public static final String VALIDATECODE_ERROR = "验证码输入错误";
    public static final String QUERY_ORDER_SUCCESS = "查询预约信息成功";
    public static final String QUERY_ORDER_FAIL = "查询预约信息失败";
    public static final String QUERY_SETMEALLIST_SUCCESS = "查询套餐列表数据成功";
    public static final String QUERY_SETMEALLIST_FAIL = "查询套餐列表数据失败";
    public static final String QUERY_SETMEAL_SUCCESS = "查询套餐数据成功";
    public static final String QUERY_SETMEAL_FAIL = "查询套餐数据失败";
    public static final String SEND_VALIDATECODE_FAIL = "验证码发送失败";
    public static final String SEND_VALIDATECODE_SUCCESS = "验证码发送成功";
    public static final String SELECTED_DATE_CANNOT_ORDER = "所选日期不能进行体检预约";
    public static final String ORDER_FULL = "预约已满";
    public static final String HAS_ORDERED = "已经完成预约，不能重复预约";
    public static final String ORDER_SUCCESS = "预约成功";
    public static final String GET_USERNAME_SUCCESS = "获取当前登录用户名称成功";
    public static final String GET_USERNAME_FAIL = "获取当前登录用户名称失败";
    public static final String GET_MENU_SUCCESS = "获取当前登录用户菜单成功";
    public static final String GET_MENU_FAIL = "获取当前登录用户菜单失败";
    public static final String GET_MEMBER_NUMBER_REPORT_SUCCESS = "获取会员统计数据成功";
    public static final String GET_MEMBER_NUMBER_REPORT_FAIL = "获取会员统计数据失败";
    public static final String GET_SETMEAL_COUNT_REPORT_SUCCESS = "获取套餐统计数据成功";
    public static final String GET_SETMEAL_COUNT_REPORT_FAIL = "获取套餐统计数据失败";
    public static final String GET_BUSINESS_REPORT_SUCCESS = "获取运营统计数据成功";
    public static final String GET_BUSINESS_REPORT_FAIL = "获取运营统计数据失败";
    public static final String GET_SETMEAL_LIST_SUCCESS = "查询套餐列表数据成功";
    public static final String GET_SETMEAL_LIST_FAIL = "查询套餐列表数据失败";
}

（2）返回结果Result和PageResult类，放到health_common工程中

package cn.yunhe.entity;
import io.swagger.annotations.ApiModel;
import io.swagger.annotations.ApiModelProperty;
import lombok.Data;

import java.io.Serializable;
/**
 * 封装返回结果
 */
@ApiModel("返回结果")
@Data
public class Result implements Serializable{
    @ApiModelProperty("执行是否成功,true为执行成功 false为执行失败")
    private boolean flag;//执行结果，true为执行成功 false为执行失败
    @ApiModelProperty("提示信息，主要用于页面提示信息")
    private String message;//返回提示信息，主要用于页面提示信息
    @ApiModelProperty("返回的数据")
    private Object data;//返回数据
    public Result(boolean flag, String message) {
        super();
        this.flag = flag;
        this.message = message;
    }
    public Result(boolean flag, String message, Object data) {
        this.flag = flag;
        this.message = message;
        this.data = data;
    }

}

package cn.yunhe.entity;

import io.swagger.annotations.ApiModel;
import io.swagger.annotations.ApiModelProperty;
import lombok.AllArgsConstructor;
import lombok.Data;

import java.io.Serializable;
import java.util.List;

@ApiModel("分页结果")
@Data
@AllArgsConstructor
public class PageResult implements Serializable {
    @ApiModelProperty("总记录数")
    private Long total;//总记录数

    @ApiModelProperty("当前页的结果集")
    private List rows;//当前页结果
}

（3）封装查询条件的QueryPageBean类，放到health_common工程中

package cn.yunhe.entity;

import io.swagger.annotations.ApiModel;
import io.swagger.annotations.ApiModelProperty;
import lombok.Data;

import java.io.Serializable;

@ApiModel("分页查询对象")
@Data
public class QueryPageBean implements Serializable {
    @ApiModelProperty("当前页码")
    private Integer currentPage;//页码
    @ApiModelProperty("页码尺寸")
    private Integer pageSize;//每页记录数
    @ApiModelProperty("查询条件")
    private String queryString;//查询条件
}

注意：后续随着项目开发还会陆续导入其他一些公共资源。

添加全局异常处理器

1、在health_common中添加自定义异常BusinessException

package cn.yunhe.exception;

import lombok.Data;

/**
 * 自定义异常
 */
@Data
public class BusinessException extends RuntimeException{
    private String message;

    public BusinessException(String message){
        super(message);
        this.message = message;
    }
}

2、在health_backend中添加全局异常处理器GlobalExceptionHandler

package cn.yunhe.interceptor;

import cn.yunhe.entity.Result;
import cn.yunhe.exception.BusinessException;
import lombok.extern.slf4j.Slf4j;
import org.springframework.web.bind.annotation.ControllerAdvice;
import org.springframework.web.bind.annotation.ExceptionHandler;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.ResponseBody;

/**
 * 全局异常处理器
 */
@Slf4j
@ControllerAdvice
public class GlobalExceptionHandler {

    /**
     * 处理自定义异常
     */
    @ExceptionHandler(value= BusinessException.class)
    @ResponseBody
    public Result processBusinessExcetion(BusinessException e){
        log.error("=====>>>发生了自定义异常信息："+e.getMessage());
        return new Result(false, e.getMessage());
    }

    /**
     * 处理系统异常
     */
    @ExceptionHandler(value= Exception.class)
    @ResponseBody
    public Result processExcetion(Exception e){
        e.printStackTrace();
        log.error("=====>>>发生了系统异常信息："+e.getMessage());
        return new Result(false, "发生未知异常！");
    }
}

添加swagger2配置类

在health_backend中添加配置类SwaggerConfig

package cn.yunhe.config;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import springfox.documentation.builders.ApiInfoBuilder;
import springfox.documentation.builders.PathSelectors;
import springfox.documentation.builders.RequestHandlerSelectors;
import springfox.documentation.service.ApiInfo;
import springfox.documentation.spi.DocumentationType;
import springfox.documentation.spring.web.plugins.Docket;
import springfox.documentation.swagger2.annotations.EnableSwagger2;

@Configuration
@EnableSwagger2
public class SwaggerConfig {
    @Bean
    public Docket docket(){
        return new Docket(DocumentationType.SWAGGER_2)
                .apiInfo(apiInfo())
                .select()
                .apis(RequestHandlerSelectors.basePackage("cn.yunhe.controller"))//要扫描的包
                .paths(PathSelectors.any())//指定的请求路径
                .build();
    }
    //配置swagger信息  apiinfo
    private ApiInfo apiInfo(){
        return new ApiInfoBuilder()
                .title("云和健康")
                .description("云体检健康管理系统")
                .version("v3.0")
                .contact("云和数据")
                .build();

    }

}

常见注解：

@Api：用在请求的类上，表示对类的说明`
    `tags="说明该类的作用，可以在UI界面上看到的注解"`
    `value="该参数没什么意义，在UI界面上也看不到，所以不需要配置"`


`@ApiOperation：用在请求的方法上，说明方法的用途、作用`
    `value="说明方法的用途、作用"`
    `notes="方法的备注说明"`


`@ApiImplicitParams：用在请求的方法上，表示一组参数说明`
    `@ApiImplicitParam：用在@ApiImplicitParams注解中，指定一个请求参数的各个方面`
        `name：参数名`
        `value：参数的汉字说明、解释`
        `required：参数是否必须传`
        `paramType：参数放在哪个地方`
            `· header --> 请求参数的获取：@RequestHeader`
            `· query --> 请求参数的获取：@RequestParam`
            `· path（用于restful接口）--> 请求参数的获取：@PathVariable`
            `· body`
            `· form（不常用）    
        dataType：参数类型，默认String，其它值dataType="Integer"       
        defaultValue：参数的默认值`

`@ApiResponses：用在请求的方法上，表示一组响应`
    `@ApiResponse：用在@ApiResponses中，一般用于表达一个错误的响应信息`
        `code：数字，例如400`
        `message：信息，例如"请求参数没填好"`
        `response：抛出异常的类`

`@ApiModel：用于响应类上，表示一个返回响应数据的信息`
            `（这种一般用在post创建的时候，使用@RequestBody这样的场景，`
            `请求参数无法使用@ApiImplicitParam注解进行描述的时候）`
    `@ApiModelProperty：用在属性上，描述响应类的属性`
`@ApiIgnore()用于类，方法，方法参数 表示这个方法或者类被忽略`

新增检查项

完善页面

检查项管理页面对应的是checkitem.html页面，根据产品设计的原型已经完成了页面基本结构的编写，现在需要完善页面动态效果。

弹出新增窗口

页面中已经提供了新增窗口，只是处于隐藏状态。只需要将控制展示状态的属性dialogFormVisible改为true就可以显示出新增窗口。

新建按钮绑定的方法为handleCreate，所以在handleCreate方法中修改dialogFormVisible属性的值为true即可。同时为了增加用户体验度，需要每次点击新建按钮时清空表单输入项。

// 重置表单
resetForm() {
	this.formData = {};
},
// 弹出添加窗口
handleCreate() {
	this.resetForm();
	this.dialogFormVisible = true;
}

输入校验

rules: {//校验规则
	code: [{ required: true, message: '项目编码为必填项', trigger: 'blur' }],
	name: [{ required: true, message: '项目名称为必填项', trigger: 'blur' }]
}

提交表单数据

点击新增窗口中的确定按钮时，触发handleAdd方法，所以需要在handleAdd方法中进行完善。

handleAdd () {
  //校验表单输入项是否合法
  this.$refs['dataAddForm'].validate((valid) => {
    if (valid) {
      //表单数据校验通过，发送ajax请求将表单数据提交到后台
      axios.post("/checkitem/add",this.formData).then((response)=> {
        //隐藏新增窗口
        this.dialogFormVisible = false;
        //判断后台返回的flag值，true表示添加操作成功，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;
    }
  });
}

后台代码

Controller

在health_backend工程中创建CheckItemController

package cn.yunhe.controller;

/**
 * 体检检查项管理
 */
@Api(tags = "检查项管理模块")
@RestController
@RequestMapping("/checkitem")
public class CheckItemController {
    @Reference
    private CheckItemService checkItemService;

    //新增
    @ApiOperation(value = "添加检查项")
    @RequestMapping("/add")
    public Result add(@RequestBody CheckItem checkItem){
        checkItemService.add(checkItem);
        return new Result(true, MessageConstant.ADD_CHECKITEM_SUCCESS);
    }
}

服务接口

在health_interface工程中创建CheckItemService接口

package cn.yunhe.service;
import cn.yunhe.pojo.CheckItem;
import java.util.List;
/**
 * 检查项服务接口
 */
public interface CheckItemService {
    void add(CheckItem checkItem)throws BusinessException;
}

服务实现类

在health_service_provider工程中创建CheckItemServiceImpl实现类

package cn.yunhe.service;


@Service
public class CheckItemServiceImpl implements CheckItemService {
    @Autowired
    private CheckItemMapper checkItemMapper;

	@Override
    public void add(CheckItem checkItem) throws BusinessException{
        if (checkItem==null||StringUtils.isEmpty(checkItem.getCode())
            ||StringUtils.isEmpty(checkItem.getName())){
            throw new BusinessException("检查项必要参数为空");
        }
        //判断code和name是否存在
        if (checkCode(checkItem.getCode())||checkName(checkItem.getName())){
            throw new BusinessException("编码或名称已经存在");
        }
        checkItemMapper.insert(checkItem);
    }

    /**
     * 判断检查项编码是否存在
     * @param code 检查项编码
     */
    private boolean checkCode(String code){
        LambdaQueryWrapper<CheckItem> queryWrapper =
                new LambdaQueryWrapper<CheckItem>().eq(CheckItem::getCode, code);
        Integer count = checkItemMapper.selectCount(queryWrapper);
        return count>0;
    }

    /**
     * 判断检查项名称是否存在
     * @param name 检查项名称
     */
    private boolean checkName(String name){
        LambdaQueryWrapper<CheckItem> queryWrapper =
                new LambdaQueryWrapper<CheckItem>().eq(CheckItem::getName, name);
        Integer count = checkItemMapper.selectCount(queryWrapper);
        return count>0;
    }
}

测试并观察swagger2页面

请求地址为：http://localhost:8100/swagger-ui.html

检查项分页

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

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

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

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

响应数据的json格式为：{total:1000,rows:[]}

如下图：

完善页面

定义分页相关模型数据

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

定义分页方法

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

//钩子函数，VUE对象初始化完成后自动执行
created() {
  this.findPage();
}

//分页查询
findPage() {
	axios.post('/checkitem/findPage',this.pagination).then((res)=>{
        this.dataList=res.data.rows;
        this.pagination.total = res.data.total;
    });
}

完善分页方法执行时机

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

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

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

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

后台代码

Controller

在CheckItemController中增加分页查询方法

//分页查询
@ApiOperation(value = "分页查询检查项")
@PostMapping("/findPage")
public PageResult findPage(@RequestBody QueryPageBean queryPageBean){
    PageResult page= checkItemService.findPage(queryPageBean);
    return page;
}

服务接口

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

PageResult findPage(QueryPageBean queryPageBean)throws BusinessException;

服务实现类

在CheckItemServiceImpl服务实现类中实现分页查询方法

@Override
public PageResult findPage(QueryPageBean queryPageBean) {
    Page<CheckItem> page = new Page<>(queryPageBean.getCurrentPage(),queryPageBean.getPageSize());
    LambdaQueryWrapper queryWrapper = null;
    String queryString = queryPageBean.getQueryString();
    if (!StringUtils.isEmpty(queryString)){
        queryWrapper = new LambdaQueryWrapper<CheckItem>().like(CheckItem::getName,queryString).or()
            .eq(CheckItem::getCode,queryString);
    }

    IPage iPage = checkItemMapper.selectPage(page, queryWrapper);

    return new PageResult(iPage.getTotal(),iPage.getRecords());
}

删除检查项

完善页面

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

绑定单击事件

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

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

// 删除
handleDelete(row) {
    
}

弹出确认操作提示

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

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

发送请求

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

handleDelete(row) {
    this.$confirm("确认删除当前选中记录吗？","提示",{type:'warning'}).then(()=>{
        axios.delete('/checkitem/delete/'+row.id).then((res)=>{
            if (res.data.flag){
                //删除成功
                this.$message({
                    message: res.data.message,
                    type: 'success'
                });
            }else {
                this.$message.error(res.data.message);
            }
            this.findPage();
        });
    });
}

后台代码

Controller

在CheckItemController中增加删除方法

//删除
@ApiOperation(value = "删除检查项")
@ApiImplicitParam(name = "id",value = "检查项id",paramType = "path",required = true)
@DeleteMapping("/delete/{id}")
public Result delete(@PathVariable("id") Integer id){
     checkItemService.deleteById(id);
     return new Result(true,MessageConstant.DELETE_CHECKITEM_SUCCESS);
}

服务接口

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

void delete(Integer id)throws BusinessException;

服务实现类

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

@Autowired
private CheckGroupAndItemMapper checkGroupAndItemMapper;
@Override
public void deleteById(Integer id) {
    LambdaQueryWrapper<CheckGroupAndItem> queryWrapper = new LambdaQueryWrapper<>();
    queryWrapper.eq(CheckGroupAndItem::getCheckitemId,id);
    List<CheckGroupAndItem> checkGroupAndItems = checkGroupAndItemMapper.selectList(queryWrapper);
    if (checkGroupAndItems==null||checkGroupAndItems.size()==0){
        checkItemMapper.deleteById(id);
    }else {
        //当前检查项被引用，不能删除
        throw new BusinessException("当前检查项被引用，不能删除");
    }
}

Mapper接口

创建CheckGroupAndItemMapper

package cn.yunhe.mapper;

import cn.yunhe.pojo.CheckGroupAndItem;
import com.baomidou.mybatisplus.core.mapper.BaseMapper;

public interface CheckGroupAndItemMapper extends BaseMapper<CheckGroupAndItem> {
}

编辑检查项

完善页面

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

绑定单击事件

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

<el-button type="primary" size="mini" @click="handleUpdate(scope.row)">编辑</el-button>

handleUpdate(row) {
  alert(row);
}

弹出编辑窗口回显数据

当前页面中的编辑窗口已经提供好了，默认处于隐藏状态。在handleUpdate方法中需要将编辑窗口展示出来，并且需要发送ajax请求查询当前检查项数据用于回显

// 弹出编辑窗口
handleUpdate(row) {
  //发送请求获取检查项信息
  axios.get("/checkitem/findById/" + row.id).then((res)=>{
    if(res.data.flag){
      //设置编辑窗口属性，dialogFormVisible4Edit为true表示显示
      this.dialogFormVisible4Edit = true;
      //为模型数据设置值，基于VUE双向数据绑定回显到页面
      this.formData = res.data.data;
    }else{
      this.$message.error("获取数据失败，请刷新当前页面");
    }
  });
}

发送请求

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

<el-button type="primary" @click="handleEdit()">确定</el-button>

//编辑
handleEdit() {
    this.$refs['dataEditForm'].validate((valid)=>{
        if (valid){
            axios.put('/checkitem/edit',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;
        }

    });

}

后台代码

Controller

在CheckItemController中增加编辑方法

@ApiOperation("根据id获取检查项")
@ApiImplicitParam(name = "id",value = "检查项id",paramType = "path",required = true)
@GetMapping("/findById/{id}")
public Result findById(@PathVariable("id")Integer id){
     CheckItem checkItem = checkItemService.findById(id);
     return  new Result(true, MessageConstant.QUERY_CHECKITEM_SUCCESS,checkItem);
}

@ApiOperation("编辑检查项")
@PutMapping("/edit")
public Result edit(@RequestBody CheckItem checkItem){
     checkItemService.edit(checkItem);
     return  new Result(true, MessageConstant.EDIT_CHECKGROUP_SUCCESS,checkItem);
}

服务接口

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

/**
 * 根据id获取检查项
 * @param id
 */
CheckItem findById(Integer id)throws BusinessException;

/**
 * 编辑检查项
 * @param checkItem
 */
void edit(CheckItem checkItem)throws BusinessException;

服务实现类

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

@Override
public CheckItem findById(Integer id) {
    return checkItemMapper.selectById(id);
}

@Override
public void edit(CheckItem checkItem) {
    if (checkItem==null||checkItem.getId().equals(0)||StringUtils.isEmpty(checkItem.getCode())
        ||StringUtils.isEmpty(checkItem.getName())){
        throw new BusinessException("编辑数据非法");
    }
 	//获取原来的检查项
    CheckItem origin = checkItemMapper.selectById(checkItem.getId());
    //获取检查项原来的编码和名称
    String originName = origin.getName();
    String originCode = origin.getCode();
    //获取现在的检查项名称和编码
    String name = checkItem.getName();
    String code = checkItem.getCode();
    //如果检查项编码和原来不一致，要进行重复检查。
    if (!originCode.equals(code)&&checkCode(code)){
        throw new BusinessException("检查项编码已存在!");
    }
    //检查项名称同上
    if (!originName.equals(name)&&checkName(name)){
        throw new BusinessException("检查项名称已存在!");
    }
    checkItemMapper.updateById(checkItem);
}

第2章 预约管理-检查项管理

第2章 预约管理-检查项管理

需求分析

基础环境搭建

导入预约管理模块数据表

导入预约管理模块实体类

导入项目所需公共资源

添加全局异常处理器

添加swagger2配置类

新增检查项

完善页面

弹出新增窗口

输入校验

提交表单数据

后台代码

Controller

服务接口

服务实现类

测试并观察swagger2页面

检查项分页

完善页面

定义分页相关模型数据

定义分页方法

完善分页方法执行时机

后台代码

Controller

服务接口

服务实现类

删除检查项

完善页面

绑定单击事件

弹出确认操作提示

发送请求

后台代码

Controller

服务接口

服务实现类

Mapper接口

编辑检查项

完善页面

绑定单击事件

弹出编辑窗口回显数据

发送请求

后台代码

Controller

服务接口

服务实现类

第2章预约管理-检查项管理

第2章预约管理-检查项管理