前言
????????上一篇文章我們已經完成了流程的部署功能，那么下一步就是要激活流程了，但是我們要需要明確的指定具體要激活部署后的哪一條流程，所以我們先把已部署的基礎信息以及具體定義信息分頁查詢出來，本文先把基礎代碼生成以及完成分頁查詢已部署的基礎信息。
一、基礎代碼生成
? ? ? ? 這一步代碼自動生成步驟與同專欄中的這一篇文章：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 {@Serialprivate 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 {@Serialprivate 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 {@Serialprivate 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 {@Serialprivate 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 // 當前頁碼，默認值為 1size: number // 每頁顯示記錄數，默認值為 10
}// 分頁查詢流程部署請求對象
export interface QueryActReDeploymentReq {processKey: string // 頁面請求參數-流程KeypageReq: PageReq // 分頁請求對象，包含頁碼、每頁記錄數等信息
}// 流程部署對象
export interface ActReDeploymentVO {id: string // 主鍵ID（Java 中 String）name: string // 部署名稱category: string // 類別key: string // 流程 KeytenantId: string // 租戶 IDdeployTime: string // 部署時間，格式 "yyyy-MM-dd" 或 ISO 字符串derivedFrom: string // 源自（derivedFrom）derivedFromRoot: string // 源自根（derivedFromRoot）parentDeploymentId: string// 父部署 IDengineVersion: 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 = 1pageSize.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-inputv-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-columnv-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-paginationv-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
