Flowable7.x学习笔记（十）分页查询已部署 BPMN XML 流程

前言

上一篇文章我们已经完成了流程的部署功能，那么下一步就是要激活流程了，但是我们要需要明确的指定具体要激活部署后的哪一条流程，所以我们先把已部署的基础信息以及具体定义信息分页查询出来，本文先把基础代码生成以及完成分页查询已部署的基础信息。

一、基础代码生成

这一步代码自动生成步骤与同专栏中的这一篇文章：Flowable7.x学习笔记（六）Vue3+SpringBoot3实现流程定义保存功能 中的第二步是完全一样的，这边我就只把代码贴出来，如果想要知道具体是怎么生成的请查看这篇文章。

① 实体类

package com.ceair.entity;

import com.baomidou.mybatisplus.annotation.TableField;
import com.baomidou.mybatisplus.annotation.TableName;
import com.baomidou.mybatisplus.annotation.IdType;

import java.io.Serial;
import java.time.LocalDateTime;
import com.baomidou.mybatisplus.annotation.TableId;
import java.io.Serializable;
import lombok.Data;
import lombok.EqualsAndHashCode;
import lombok.experimental.Accessors;

/**
 * <p>
 * 流程部署基础信息表
 * </p>
 *
 * @author wangbaohai
 * @since 2025-04-20
 */
@Data
@EqualsAndHashCode(callSuper = false)
@Accessors(chain = true)
@TableName("ACT_RE_DEPLOYMENT")
public class ActReDeployment implements Serializable {

    @Serial
    private static final long serialVersionUID = 1L;

    @TableId(value = "ID_", type = IdType.ASSIGN_ID)
    private String id;

    @TableField("NAME_")
    private String name;

    @TableField("CATEGORY_")
    private String category;

    @TableField("KEY_")
    private String key;

    @TableField("TENANT_ID_")
    private String tenantId;

    @TableField("DEPLOY_TIME_")
    private LocalDateTime deployTime;

    @TableField("DERIVED_FROM_")
    private String derivedFrom;

    @TableField("DERIVED_FROM_ROOT_")
    private String derivedFromRoot;

    @TableField("PARENT_DEPLOYMENT_ID_")
    private String parentDeploymentId;

    @TableField("ENGINE_VERSION_")
    private String engineVersion;


}

package com.ceair.entity;

import com.baomidou.mybatisplus.annotation.TableField;
import com.baomidou.mybatisplus.annotation.TableName;
import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableId;

import java.io.Serial;
import java.io.Serializable;
import lombok.Data;
import lombok.EqualsAndHashCode;
import lombok.experimental.Accessors;

/**
 * <p>
 * 流程部署定义信息表
 * </p>
 *
 * @author wangbaohai
 * @since 2025-04-20
 */
@Data
@EqualsAndHashCode(callSuper = false)
@Accessors(chain = true)
@TableName("ACT_RE_PROCDEF")
public class ActReProcdef implements Serializable {

    @Serial
    private static final long serialVersionUID = 1L;

    @TableId(value = "ID_", type = IdType.ASSIGN_ID)
    private String id;

    @TableField("REV_")
    private Integer rev;

    @TableField("CATEGORY_")
    private String category;

    @TableField("NAME_")
    private String name;

    @TableField("KEY_")
    private String key;

    @TableField("VERSION_")
    private Integer version;

    @TableField("DEPLOYMENT_ID_")
    private String deploymentId;

    @TableField("RESOURCE_NAME_")
    private String resourceName;

    @TableField("DGRM_RESOURCE_NAME_")
    private String dgrmResourceName;

    @TableField("DESCRIPTION_")
    private String description;

    @TableField("HAS_START_FORM_KEY_")
    private Integer hasStartFormKey;

    @TableField("HAS_GRAPHICAL_NOTATION_")
    private Integer hasGraphicalNotation;

    @TableField("SUSPENSION_STATE_")
    private Integer suspensionState;

    @TableField("TENANT_ID_")
    private String tenantId;

    @TableField("ENGINE_VERSION_")
    private String engineVersion;

    @TableField("DERIVED_FROM_")
    private String derivedFrom;

    @TableField("DERIVED_FROM_ROOT_")
    private String derivedFromRoot;

    @TableField("DERIVED_VERSION_")
    private Integer derivedVersion;


}

② mapper 接口

package com.ceair.mapper;

import com.ceair.entity.ActReDeployment;
import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import org.apache.ibatis.annotations.Mapper;

/**
 * <p>
 * 流程部署定义信息表 Mapper 接口
 * </p>
 *
 * @author wangbaohai
 * @since 2025-04-20
 */
@Mapper
public interface ActReDeploymentMapper extends BaseMapper<ActReDeployment> {

}

package com.ceair.mapper;

import com.ceair.entity.ActReProcdef;
import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import org.apache.ibatis.annotations.Mapper;

/**
 * <p>
 * 流程部署基础信息表 Mapper 接口
 * </p>
 *
 * @author wangbaohai
 * @since 2025-04-20
 */
@Mapper
public interface ActReProcdefMapper extends BaseMapper<ActReProcdef> {

}

③ 服务

package com.ceair.service;

import com.ceair.entity.ActReDeployment;
import com.baomidou.mybatisplus.extension.service.IService;

/**
 * <p>
 * 流程部署定义信息表 服务类
 * </p>
 *
 * @author wangbaohai
 * @since 2025-04-20
 */
public interface IActReDeploymentService extends IService<ActReDeployment> {

}

package com.ceair.service;

import com.ceair.entity.ActReProcdef;
import com.baomidou.mybatisplus.extension.service.IService;

/**
 * <p>
 * 流程部署基础信息表 服务类
 * </p>
 *
 * @author wangbaohai
 * @since 2025-04-20
 */
public interface IActReProcdefService extends IService<ActReProcdef> {

}

④ 服务实现

package com.ceair.service.impl;

import com.ceair.entity.ActReDeployment;
import com.ceair.mapper.ActReDeploymentMapper;
import com.ceair.service.IActReDeploymentService;
import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import org.springframework.stereotype.Service;

/**
 * <p>
 * 流程部署基础信息表 服务实现类
 * </p>
 *
 * @author wangbaohai
 * @since 2025-04-20
 */
@Service
public class ActReDeploymentServiceImpl extends ServiceImpl<ActReDeploymentMapper, ActReDeployment> implements IActReDeploymentService {

}

package com.ceair.service.impl;

import com.ceair.entity.ActReProcdef;
import com.ceair.mapper.ActReProcdefMapper;
import com.ceair.service.IActReProcdefService;
import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import org.springframework.stereotype.Service;

/**
 * <p>
 *  服务实现类
 * </p>
 *
 * @author wangbaohai
 * @since 2025-04-20
 */
@Service
public class ActReProcdefServiceImpl extends ServiceImpl<ActReProcdefMapper, ActReProcdef> implements IActReProcdefService {

}

⑤ XML

<?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.ceair.mapper.ActReDeploymentMapper">

    <!-- 通用查询映射结果 -->
    <resultMap id="BaseResultMap" type="com.ceair.entity.ActReDeployment">
        <id column="ID_" property="id" />
        <result column="NAME_" property="name" />
        <result column="CATEGORY_" property="category" />
        <result column="KEY_" property="key" />
        <result column="TENANT_ID_" property="tenantId" />
        <result column="DEPLOY_TIME_" property="deployTime" />
        <result column="DERIVED_FROM_" property="derivedFrom" />
        <result column="DERIVED_FROM_ROOT_" property="derivedFromRoot" />
        <result column="PARENT_DEPLOYMENT_ID_" property="parentDeploymentId" />
        <result column="ENGINE_VERSION_" property="engineVersion" />
    </resultMap>

    <sql id="Base_Column_List">
        ID_, NAME_, CATEGORY_, KEY_, TENANT_ID_, DEPLOY_TIME_,
        DERIVED_FROM_, DERIVED_FROM_ROOT_, PARENT_DEPLOYMENT_ID_, ENGINE_VERSION_
    </sql>

</mapper>

<?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.ceair.mapper.ActReProcdefMapper">

    <!-- 通用查询映射结果 -->
    <resultMap id="BaseResultMap" type="com.ceair.entity.ActReProcdef">
        <id column="ID_" property="id" />
        <result column="REV_" property="rev" />
        <result column="CATEGORY_" property="category" />
        <result column="NAME_" property="name" />
        <result column="KEY_" property="key" />
        <result column="VERSION_" property="version" />
        <result column="DEPLOYMENT_ID_" property="deploymentId" />
        <result column="RESOURCE_NAME_" property="resourceName" />
        <result column="DGRM_RESOURCE_NAME_" property="dgrmResourceName" />
        <result column="DESCRIPTION_" property="description" />
        <result column="HAS_START_FORM_KEY_" property="hasStartFormKey" />
        <result column="HAS_GRAPHICAL_NOTATION_" property="hasGraphicalNotation" />
        <result column="SUSPENSION_STATE_" property="suspensionState" />
        <result column="TENANT_ID_" property="tenantId" />
        <result column="ENGINE_VERSION_" property="engineVersion" />
        <result column="DERIVED_FROM_" property="derivedFrom" />
        <result column="DERIVED_FROM_ROOT_" property="derivedFromRoot" />
        <result column="DERIVED_VERSION_" property="derivedVersion" />
    </resultMap>

    <sql id="Base_Column_List">
        ID_, REV_, CATEGORY_, NAME_, KEY_, VERSION_, DEPLOYMENT_ID_,
        RESOURCE_NAME_, DGRM_RESOURCE_NAME_, DESCRIPTION_, HAS_START_FORM_KEY_,
        HAS_GRAPHICAL_NOTATION_, SUSPENSION_STATE_, TENANT_ID_,
        ENGINE_VERSION_, DERIVED_FROM_, DERIVED_FROM_ROOT_, DERIVED_VERSION_
    </sql>

</mapper>

二、后端：完成部署信息分页查询功能

① 创建请求参数

package com.ceair.entity.request;

import lombok.Data;

import java.io.Serial;
import java.io.Serializable;

/**
 * @author wangbaohai
 * @ClassName QueryActReDeploymentReq
 * @description: 分页查询流程部署基础信息请求对象
 * @date 2025年04月20日
 * @version: 1.0.0
 */
@Data
public class QueryActReDeploymentReq implements Serializable {

    @Serial
    private static final long serialVersionUID = 1L;

    /**
     * 页面请求参数-流程Key
     */
    private String processKey;

    /**
     * 页面请求对象，用于封装分页查询的相关参数。
     * 该对象通常包含页码、每页记录数等信息，用于在分页查询时传递给服务层或数据访问层。
     */
    private PageReq pageReq;

}

② 创建响应参数VO

package com.ceair.entity.vo;

import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableField;
import com.baomidou.mybatisplus.annotation.TableId;
import com.fasterxml.jackson.annotation.JsonFormat;
import lombok.Data;
import org.springframework.format.annotation.DateTimeFormat;

import java.io.Serial;
import java.io.Serializable;
import java.time.LocalDateTime;

/**
 * @author wangbaohai
 * @ClassName ActReDeploymentVO
 * @description: 流程部署基础信息VO
 * @date 2025年04月21日
 * @version: 1.0.0
 */
@Data
public class ActReDeploymentVO implements Serializable {

    @Serial
    private static final long serialVersionUID = 1L;

    private String id;

    private String name;

    private String category;

    private String key;

    private String tenantId;

    @DateTimeFormat(pattern = "yyyy-MM-dd")
    @JsonFormat(pattern = "yyyy-MM-dd",timezone = "GMT+8")
    private LocalDateTime deployTime;

    private String derivedFrom;

    private String derivedFromRoot;

    private String parentDeploymentId;

    private String engineVersion;

}

③ 创建模型转换工具

package com.ceair.utils;

import com.ceair.entity.ActReDeployment;
import com.ceair.entity.vo.ActReDeploymentVO;
import org.mapstruct.Mapper;
import org.mapstruct.factory.Mappers;

/**
 * @author wangbaohai
 * @ClassName ActReDeploymentStructMapper
 * @description: 活动部署基础信息结构映射器
 * @date 2025年04月21日
 * @version: 1.0.0
 */
@Mapper
public interface ActReDeploymentStructMapper {

    // 映射器的实例，通过Mappers工具类获取
    ActReDeploymentStructMapper INSTANCE = Mappers.getMapper(ActReDeploymentStructMapper.class);

    /**
     * 将ActReDeployment实体转换为VO(view object)对象
     * @param actReDeployment 不得为空的ActReDeployment实体
     * @return 转换后的ActReDeploymentVO对象
     */
    default ActReDeploymentVO toVO(ActReDeployment actReDeployment) {
        if (actReDeployment == null) {
            throw new IllegalArgumentException("Input parameter 'actReDeployment' cannot be null.");
        }
        return mapToVO(actReDeployment);
    }

    /**
     * 实际执行ActReDeployment到ActReDeploymentVO转换的方法
     * @param actReDeployment ActReDeployment实体
     * @return 转换后的ActReDeploymentVO对象
     */
    ActReDeploymentVO mapToVO(ActReDeployment actReDeployment);

    /**
     * 将ActReDeploymentVO对象转换回ActReDeployment实体
     * @param actReDeploymentVO 不得为空的ActReDeploymentVO对象
     * @return 转换后的ActReDeployment实体
     */
    default ActReDeployment toEntity(ActReDeploymentVO actReDeploymentVO) {
        if (actReDeploymentVO == null) {
            throw new IllegalArgumentException("Input parameter 'actReDeploymentVO' cannot be null.");
        }

        return mapToEntity(actReDeploymentVO);
    }

    /**
     * 实际执行ActReDeploymentVO到ActReDeployment转换的方法
     * @param actReDeploymentVO ActReDeploymentVO对象
     * @return 转换后的ActReDeployment实体
     */
    ActReDeployment mapToEntity(ActReDeploymentVO actReDeploymentVO);

}

④ 创建服务

/**
 * 分页查询 ActReDeployment 数据。
 * <p>
 * 该方法根据传入的查询条件对象 {@code QueryActReDeploymentReq}，返回分页后的 {@code ActReDeployment} 数据。
 *
 * @param queryActReDeploymentReq 查询条件对象，包含分页信息和筛选条件。
 *                                例如：分页参数（页码、每页大小）、部署名称、部署时间范围等。
 *                                如果为 null，则可能返回所有数据或默认分页结果，具体行为由实现决定。
 * @return 返回一个 {@code Page<ActReDeployment>} 对象，包含查询结果的分页信息。
 * 结果中包括当前页的数据列表、总记录数、总页数等分页相关信息。
 */
Page<ActReDeployment> queryActReDeploymentWithPage(QueryActReDeploymentReq queryActReDeploymentReq);

⑤ 创建服务实现

/**
 * 查询流程部署基础信息并分页返回结果。
 *
 * @param queryActReDeploymentReq 查询条件请求对象，包含分页信息和其他查询参数。
 *                                如果为 null 或其内部的分页信息为 null，则使用默认分页参数。
 * @return 返回一个分页对象 Page<ActReDeployment>，包含查询到的流程部署基础信息。
 * 如果查询过程中发生异常，则抛出 BusinessException。
 */
@Override
public Page<ActReDeployment> queryActReDeploymentWithPage(QueryActReDeploymentReq queryActReDeploymentReq) {
    // 初始化分页工具以及参数，默认为第一页，每页10条数据
    long current = 1;
    long size = 10;

    // 检查请求对象及其分页参数是否为空，并根据需要设置分页参数
    if (queryActReDeploymentReq != null && queryActReDeploymentReq.getPageReq() != null) {
        current = queryActReDeploymentReq.getPageReq().getCurrent() > 0 ?
                queryActReDeploymentReq.getPageReq().getCurrent() : current;
        size = queryActReDeploymentReq.getPageReq().getSize() > 0 ?
                queryActReDeploymentReq.getPageReq().getSize() : size;
    }

    // 初始化分页对象，用于存储分页查询结果
    Page<ActReDeployment> page = new Page<>(current, size);

    // 调用 mapper 进行分页查询，捕获可能的异常并记录日志
    try {
        return this.baseMapper.queryActReDeploymentWithPage(page, queryActReDeploymentReq);
    } catch (Exception e) {
        // 捕获异常并记录日志，避免系统崩溃
        log.error("查询流流程部署基础信息分页失败，请求参数: {}", queryActReDeploymentReq, e);
        throw new BusinessException("查询流程部署基础信息分页失败，请稍后重试", e);
    }
}

⑥ 创建自定义SQL

<sql id="Base_Column_List">

ID_, NAME_, CATEGORY_, KEY_, TENANT_ID_, DEPLOY_TIME_,

DERIVED_FROM_, DERIVED_FROM_ROOT_, PARENT_DEPLOYMENT_ID_, ENGINE_VERSION_

</sql>

<select id="queryActReDeploymentWithPage" resultMap="BaseResultMap">

SELECT <include refid="Base_Column_List" /> FROM ACT_RE_DEPLOYMENT

<where>

<if test="queryActReDeploymentReq.processKey != null and queryActReDeploymentReq.processKey != ''">

AND KEY_ LIKE CONCAT('%', #{queryActReDeploymentReq.processKey}, '%')

</if>

</where>

</select>

⑦ 创建接口

/**
 * 分页查询流程部署基础信息。
 *
 * @param queryActReDeploymentReq 流程部署基础信息查询请求对象，包含分页和筛选条件等信息，不能为空。
 * @return 包含流程部署基础信息视图对象列表的分页结果。如果查询或转换失败，则返回错误信息。
 * <p>
 * 功能描述：
 * 1. 调用服务层方法查询流程部署基础信息，并返回分页结果。
 * 2. 将查询结果中的记录转换为视图对象（VO）列表。
 * 3. 返回封装的分页结果对象，包含转换后的视图对象列表和总记录数。
 * 4. 如果查询或转换过程中发生异常，记录错误日志并返回错误信息。
 */
@PreAuthorize("hasAnyAuthority('/api/v1/actReDeployment/page')")
@Parameter(name = "queryActReDeploymentReq", description = "流程部署基础信息查询请求对象", required = true)
@Operation(summary = "分页查询流程部署基础信息")
@PostMapping("/page")
public PageResult<List<ActReDeploymentVO>> queryActReDeploymentWithPage(@RequestBody QueryActReDeploymentReq queryActReDeploymentReq) {
    try {
        // 调用服务层方法查询流程部署基础信息，并返回分页结果
        Page<ActReDeployment> page = actReDeploymentService.queryActReDeploymentWithPage(queryActReDeploymentReq);

        // 将查询结果中的记录转换为视图对象（VO）列表
        List<ActReDeploymentVO> list =
                Optional.ofNullable(page.getRecords()).orElse(Collections.emptyList()).parallelStream().map(record -> {
                    try {
                        // 使用映射器将实体对象转换为视图对象
                        return ActReDeploymentStructMapper.INSTANCE.toVO(record);
                    } catch (Exception e) {
                        // 记录转换失败的错误信息
                        log.error("转换流程部署基础信息失败 具体原因为 : {}", e.getMessage());
                        return null;
                    }
                }).filter(Objects::nonNull).toList();

        // 返回包含转换后列表和列表大小的PageResult对象
        return PageResult.success(list, page.getTotal());
    } catch (Exception e) {
        // 记录查询失败的错误信息，并返回错误结果
        log.error("查流程部署基础信息失败 具体原因为 : {}", e.getMessage());
        return PageResult.error("流程部署基础信息失败：" + e.getMessage());
    }
}

三、前端：完成分页查询功能

① 创建参数

// 分页请求参数
export interface PageReq {
  current: number // 当前页码，默认值为 1
  size: number // 每页显示记录数，默认值为 10
}

// 分页查询流程部署请求对象
export interface QueryActReDeploymentReq {
  processKey: string // 页面请求参数-流程Key
  pageReq: PageReq // 分页请求对象，包含页码、每页记录数等信息
}

// 流程部署对象
export interface ActReDeploymentVO {
  id: string // 主键ID（Java 中 String）
  name: string // 部署名称
  category: string // 类别
  key: string // 流程 Key
  tenantId: string // 租户 ID
  deployTime: string // 部署时间，格式 "yyyy-MM-dd" 或 ISO 字符串
  derivedFrom: string // 源自（derivedFrom）
  derivedFromRoot: string // 源自根（derivedFromRoot）
  parentDeploymentId: string// 父部署 ID
  engineVersion: string // 引擎版本
}

② 创建接口

import type { QueryActReDeploymentReq } from './actReDeploymentType'
import request from '@/utils/http/request'

// 分页查询部署信息
export function pageActReDeployment(data: QueryActReDeploymentReq) {
  return request.post<any>({
    url: '/pm-process/api/v1/actReDeployment/page',
    data,
  })
}

③ 创建查询界面

<script lang="ts" setup>
import type { ActReDeploymentVO, QueryActReDeploymentReq } from '@/api/actReDeployment/actReDeploymentType'
import { pageActReDeployment } from '@/api/actReDeployment/actReDeploymentApi'
import useLayoutStore from '@/store/modules/setting'
import { ElMessage } from 'element-plus'
import { onMounted, ref } from 'vue'

// 使用layout组件小仓库
const layoutStore = useLayoutStore()

// 定义响应式数据 processKey 收集查询条件的流程Key
const processKey = ref('')
// 定义响应式数据 currentPage 收集当前页码
const currentPage = ref<number>(1)
// 定义响应式数据 pageSize 收集每页显示的条数
const pageSize = ref<number>(10)
// 定义响应式数据 total 收集总数据条数
const total = ref<number>(0)
// 定义响应式数据 actReDeploymentList 表示流程定义列表
const actReDeploymentList = ref<ActReDeploymentVO[]>([])
// 表格列定义
const tableColumns = [
  { label: '#', type: 'index', align: 'center', width: '50px' },
  { label: 'ID', prop: 'id', align: 'center' },
  { label: '部署名称', prop: 'name', align: 'center' },
  { label: '流程Key', prop: 'key', align: 'center' },
  { label: '部署时间', prop: 'deployTime', align: 'center' },
]

/**
 * onMounted 生命周期钩子函数
 *
 * 在组件挂载完成后执行以下操作：
 * 1. 初始化分页参数和流程名称。
 * 2. 调用函数获取流程定义的分页数据。
 *
 * @param {Function} callback - Vue 的 onMounted 钩子函数的回调，无参数和返回值。
 */
onMounted(() => {
  // 初始化分页参数：当前页为第一页，每页显示10条数据
  currentPage.value = 1
  pageSize.value = 10

  // 初始化流程名称为空字符串
  processKey.value = ''

  // 调用函数获取流程定义的分页数据
  getActReDeploymentPageData()
})

/**
 * 获取流程部署分页数据的异步函数。
 *
 * @function getActReDeploymentPageData
 * @description 该函数用于组装分页查询参数，调用分页接口获取流程部署数据，并处理成功或失败的结果。
 *              如果查询成功，更新流程列表；如果失败，捕获异常并显示错误消息。
 *
 * @returns {Promise<void>} 无返回值，异步操作完成后更新相关状态或显示错误信息。
 */
async function getActReDeploymentPageData() {
  try {
    // 组装分页查询参数，包含部署Key和分页信息
    const queryParams: QueryActReDeploymentReq = {
      processKey: processKey.value,
      pageReq: {
        current: currentPage.value,
        size: pageSize.value,
      },
    }

    // 调用分页接口
    const result: any = await pageActReDeployment(queryParams)

    // 判断查询结果是否成功，成功则更新流程列表和总记录数
    if (result.success && result.code === 200) {
      actReDeploymentList.value = result.data
    }
  }
  catch (error) {
    // 捕获异常并提取错误信息
    let errorMessage = '未知错误'
    if (error instanceof Error) {
      errorMessage = error.message
    }

    // 显示异常错误消息
    ElMessage({
      message: `查询失败: ${errorMessage || '未知错误'}`,
      type: 'error',
    })
  }
}

// 重置查询条件
function resetQuery() {
  layoutStore.refresh = !layoutStore.refresh
}

/**
 * 处理页面数据的函数。
 * 该函数调用获取流程定义页面数据的方法。
 *
 * @function handerPageData
 */
function handerPageData() {
  // 调用获取流程定义页面数据的函数
  getActReDeploymentPageData()
}
</script>

<template>
  <!-- 查询条件区域 -->
  <el-card style="height: 75px;">
    <el-form :inline="true" class="form-inline">
      <el-form-item label="流程Key">
        <el-input
          v-model.trim="processKey"
          placeholder="请输入流程Key"
          maxlength="50"
          show-word-limit
        />
      </el-form-item>
      <el-form-item>
        <el-button v-hasButton="`btn.actReDeployment.page`" type="primary" icon="Search" @click="getActReDeploymentPageData">
          查询
        </el-button>
        <el-button icon="Refresh" @click="resetQuery">
          重置
        </el-button>
      </el-form-item>
    </el-form>
  </el-card>

  <!-- 查询结果列表区域 -->
  <el-card style="margin: 10px 0px;">
    <el-table style="margin: 10px 0px;" :border="true" :data="actReDeploymentList">
      <!-- ID 区域 -->
      <el-table-column type="selection" align="center" width="50px" />
      <!-- 表格数据 区域 -->
      <el-table-column
        v-for="(column, index) in tableColumns"
        :key="index"
        :type="column.type"
        :label="column.label"
        :prop="column.prop"
        :align="column.align"
        :width="column.width"
      />
    </el-table>
    <!-- 分页器 -->
    <el-pagination
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="[10, 20, 30, 40, 50]"
      layout="prev, pager, next, jumper,->, sizes, total"
      :total="Math.max(total, 0)"
      @current-change="getActReDeploymentPageData"
      @size-change="handerPageData"
    />
  </el-card>
</template>

<style scoped>
.form-inline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap; /* 适配小屏幕 */
}
</style>

四、配置权限

① 增加菜单

② 增加按钮

③ 分配权限

五、查询结果展示

六、后记

本篇文章的前后端仓库地址请查询专栏第一篇文章

本文的后端分支是 process-5

本文的前端分支是 process-7