前后端分离下的流程集成:一份 Toolkit 落地清单

引擎独立部署,前端自己写,两者只靠一组 HTTP 接口和五个参数对接------这是工作量最小、边界最清晰的一种集成方式。文章按「复制什么、配什么、传什么、注意什么」四段整理,附组件 props 与 API 速查。

1. 演示地址

项目 内容
地址 toolkit.ccbpm.cn
账号 admin
密码 123

打开演示站,可以直观感受:把 Toolkit 放进业务系统后,发起、待办、办理、审核是怎样「长」在自家页面上的。


2. 什么是驰骋 Toolkit?

2.1 用一句话理解

Toolkit 是一组可原样拷贝进您前端工程的「流程能力积木箱」。

它不是整站门户,也不替代您的业务表单设计;它负责把「发送、退回、审核、选人、会签......」这些流程动作,变成您页面上可直接使用的组件和 API。

2.2 它长什么样

  • Toolkit 本质上是一组静态前端文件组成的目录 (Vue3 工程里对应 src/Toolkit/)。
  • 把这个目录放进您自己的前端架构后,通过 HTTP API 与独立运行的 ccbpm / CCFlow / JFlow 服务器对话。
  • Toolkit 与您的前端「同生共死」:路由、菜单、皮肤、布局仍由您掌控;流程办理能力由 Toolkit 提供。

可以把关系想象成:

markdown 复制代码
您的前端系统(菜单、业务页、自绘表单)
        │
        │  引入 Toolkit 组件 / 调用 Dev2Interface
        ▼
   Toolkit 目录(工具栏、审核组件、WorkOpt、流程 API)
        │
        │  WF/Comm/ProcessRequest + Token
        ▼
   ccbpm 服务器(BP.WF 引擎、节点属性、流程属性)

2.3 目前提供哪些版本

版本 说明
Vue3 Toolkit 当前主推与本仓库权威实现(Vue3/src/Toolkit),原生 Vue3,不再依赖 ant-design-vue / naive-ui
H5 / Vue2 Toolkit 产品分发包(如 CCFast)中仍可能提供,用于存量技术栈;新项目优先 Vue3
React Toolkit 不再作为推荐交付形态;请统一到 Vue3 Toolkit,或通过 iframe / API 对接

旧文档里若仍写「React 版 Toolkit」,以本文与仓库 Toolkit/README.md 为准。

2.4 Toolkit 能帮您做什么

能力 通俗理解 落地方式
嵌入流程组件 把「流程遥控器」嵌进自己的表单页 ToolBar(发送/退回/移交...)、WorkCheck(审核意见)、WorkOpt(选人/会签/挂起...)、父子流程 SubFlow
调用流程 API 不自己拼 HTTP,直接调方法 Dev2Interface:发起、发送、保存、退回、撤销、删除、终止、会签、抄送等
按设计器配置减负 节点上勾了「可退回」,工具栏就出现退回;审核组件开了才显示 后端 InitToolBar、节点审核属性 FWCSta / FWCShowModel 驱动前端
绑定功能页面到菜单 不想自绘发起/待办列表时,直接挂产品页 通过 Vue3 FEForward / iframe 嵌入 GL_Start、GL_TodoList 等(见第 7 章)
快速搭办理页 自绘业务区 + Toolkit 工具栏/审核区 SDK 表单模式(非耦合集成,见第 5 章)

2.5 Toolkit 边界(避免误用)

写清楚「不做啥」,比夸大「啥都能」更重要:

属于 Toolkit 不属于 Toolkit(用产品主站或自研)
办理工具栏、审核组件、WorkOpt 弹窗 完整表单设计器、从表完整 UI(主站 WF/CCForm/Dtl)
前端 Dev2Interface 流程门面 流程设计器、权限组织维护整站
Token / 请求封装 / TurnTo 跳转辅助 报表大屏、CCBill 单据全套(Dev2InterfaceCCBill 仅主站保留)
嵌入办理页所需的样式与原生 UI 控件 发起/待办列表页本体(列表在产品 GenerList,可 iframe 复用)

ccbpm 首先推荐使用 Toolkit 做二次开发:您保留业务表单与菜单体系,引擎侧的「会跑流程」能力用积木拼上去即可。


3. Toolkit 集成工作示意图

读图要点:

  1. Toolkit 文件夹放在您的前端开发目录里(整包复制,不要拆散)。
  2. 它通过 API 与 ccbpm 服务器交互------服务器可独立部署,前后端分离。
  3. 您的业务页面负责「填什么」;Toolkit 负责「怎么送、怎么退、怎么签」。

统一请求通道(与主站一致):

配置项 含义 常见值
VITE_GLOB_API_URL 后端 Host 如 http://localhost:56146/
REQUEST_URL Handler 入口相对路径 WF/Comm/ProcessRequest
开发代理 Vite 把 /api 转到后端 见第 6 章
Token 登录态 URL 参数 / setRequestToken / localStorage 键 ccflow_token

后端侧,Toolkit 前端大量调用:

  • BP.WF.HttpHandler.WF_TSDev2Interface ------ TS/Toolkit 专用流程 API
  • BP.WF.HttpHandler.WF_MyFlow ------ 办理初始化、InitToolBar、发送等
  • BP.WF.HttpHandler.WF_WorkOpt ------ 选人、审核、会签等操作面板
  • BP.WF.HttpHandler.WF_MyView / WF_MyCC ------ 查看器 / 抄送处理器初始化

4. 集成模式怎么选?

把「自家系统」和「驰骋引擎」拼在一起,常见有三条路。Toolkit 对应其中工作量较小、个性化最强的一条。

模式 形象比喻 谁画表单 谁画工具栏/审核 适用
非耦合(SDK + Toolkit) 引擎是发动机,车身您自己造 您的前端 Toolkit 组件嵌入您的页 前后端分离、表单个性化强、推荐
半耦合(嵌入式表单 SelfForm) 驰骋外壳 + 中间嵌您的业务页 您的页(iframe) 驰骋 MyFlowSelfForm 壳 想少写工具栏,又要自定义中间表单
整站嵌入(iframe 产品前端) 直接把驰骋前台「嵌窗」进系统 驰骋前端 驰骋前端 最快上线四大菜单与三大处理器

设计器里的对应项:节点表单方案 SDK 表单 ≈ 非耦合;嵌入式表单 ≈ 半耦合。智能 SDK(SmartSDKFrm.js)属历史方案,新项目请用 Vue3 Toolkit,不再展开。


5. 非耦合集成(Toolkit / SDK 表单)------推荐

5.1 这是什么体验?

工作量较小、边界清晰的集成模式:

  • ccbpm 独立部署、独立运行;
  • 您把 Toolkit 目录引进前端;
  • 业务表单完全由您渲染;
  • 流程动作通过 Toolkit 组件或 Dev2Interface 完成。

如下图:

可以把它想成:您装修客厅,驰骋只提供「开关面板」和「水电接口」。

开关(工具栏按钮)亮不亮,由节点属性决定;水电(发送/退回)由引擎执行。

5.2 典型页面结构

swift 复制代码
┌─────────────────────────────────────────────┐
│  ToolBar:发送 | 保存 | 退回 | 移交 | 轨迹 ... │  ← Toolkit
├─────────────────────────────────────────────┤
│                                             │
│         您自己的业务表单(任意技术栈 UI)      │  ← 宿主系统
│                                             │
├─────────────────────────────────────────────┤
│  WorkCheck:审核意见 / 签名 / 附件 / 轨迹    │  ← Toolkit
└─────────────────────────────────────────────┘

可选:退回信息条 ToolbarFlow、父子流程 WorkOpt/SubFlow.vue、发送选人等 WorkOpt 弹窗(由工具栏自动拉起)。

5.3 设计器侧怎么配

  1. 流程/节点表单方案选择 SDK 表单 (NodeFormType.SDKForm)。
  2. 表单 URL 指向您的办理页(可用变量 @SDKFromServHost,或配置 VITE_GLOB_SDKFROESERV_HOST)。
  3. 在节点属性中启停按钮(退回、移交、抄送、结束等)------运行时由 InitToolBar 下发给 ToolBar。
  4. 在节点审核组件属性中配置 FWCSta(是否显示/可编辑)、FWCShowModel(普通/轨迹/时间轴)、FWCLab(标题文案)等。

5.4 打开办理页必传参数

参数 说明
WorkID 工作实例 ID
NodeID / FK_Node 当前节点
FlowNo / FK_Flow 流程编号
Token 登录令牌(务必与后端会话一致)
PageType MyFlow(办理)/ MyView(查看)/ MyCC(抄送)
FID 分流合流等场景的父工作 ID(按需)
IsReadonly 1 只读
CCNodeID 抄送场景下审核配置以抄送节点为准时使用

Toolkit 提供 parseFlowUrlParams / buildWorkOptParams 帮助您从路由 query 归一化这些参数。


6. 环境准备:把 Toolkit「接上电」

6.1 整包复制

请复制整个 src/Toolkit/,不要只挑子目录 。内部引用均为相对路径(独立宿主工程中,Dev2Interface.ts 应使用包内 ./utils/gener/HttpHandler,而非主站别名 /@/)。

目录摘要:

bash 复制代码
Toolkit/
├── index.ts                 # 导出入口(自动引入 toolkit.css)
├── ToolBar.vue              # 工作处理器工具栏
├── ToolbarFlow.vue          # 退回信息条
├── WorkOptModalHost.vue     # WorkOpt 弹窗宿主
├── Dev2Interface.ts         # 流程 API 门面
├── config/                  # API 地址、Token
├── adapters/                # WebUser 等可替换适配
├── components/              # 原生 UI(Modal/Drawer/Tree/Table)
├── styles/toolkit.css       # tk-* 样式
├── utils/                   # HttpHandler、TurnTo、参数解析...
├── WorkCheck/               # 审核组件
└── WorkOpt/                 # 选人、会签、挂起、父子流程等

6.2 依赖

bash 复制代码
pnpm add vue vue-router axios dayjs lodash-es

6.3 .env 与代理

env 复制代码
VITE_GLOB_API_URL=http://localhost:8085/

vite.config.ts 开发代理示例:

ts 复制代码
server: {
  proxy: {
    '/api': {
      target: 'http://localhost:8085',
      changeOrigin: true,
      rewrite: (path) => path.replace(/^\/api/, ''),
    },
  },
},

6.4 Token:别让「钥匙」丢了

每次进入办理页建议:

ts 复制代码
import { setRequestToken } from '@/Toolkit';

onMounted(() => setRequestToken(String(route.query.Token || '')));
watch(toolbarParams, (p) => setRequestToken(String(p.Token || '')), { deep: true });

获取 Token 的常见方式:调用后端 Port_Login(或贵司封装的单点登录),再把 Token 拼进打开办理页的 URL。


7. 把功能页面绑到自己的菜单(免自绘列表)

若您暂时不想自己画「发起 / 待办 / 在途」列表,可以走整站嵌入 或 FEForward 转发页:部署 Vue3 前端后,用 iframe 打开对应 action。

示例(部署地址假设为 https://bpm.your.com):

text 复制代码
https://bpm.your.com/#/FEForward?action=GL_Start&token=您的Token

当前常用 action:

action 功能
GL_Start 发起
GL_TodoList 待办
GL_Running 在途(运行中)
GL_CC 抄送
GL_Batch 批处理
GL_Draft 草稿
GL_RecentWork 近期工作
GL_RecentStart 近期发起
MyFlow 单独打开办理(需再带 WorkID 等参数)
FlowTree / FrmTree 流程树 / 表单树

第三方系统接入步骤要点:

  1. 打包 Vue3 时设置 VITE_GLOB_IS_THIRDPART_SYSTEM=1,VITE_GLOB_API_URL 指向真实后端。
  2. 业务系统登录后换取 ccbpm Token(/WF/API/Port_Login 或 Java 侧 Dev2Interface.Port_Login)。
  3. 菜单 iframe 的 src 带上 action 与 token。

说明:这些列表页属于产品前端能力;Toolkit 包聚焦办理组件与 API。两者可组合------列表用 iframe,办理页用 SDK+Toolkit。


8. 快速接入示例(SDK 办理页)

以下示例展示「工具栏 + 审核组件」最小闭环(完整说明见仓库 Vue3/src/Toolkit/README.md):

vue 复制代码
<template>
  <div>
    <ToolBar :params="toolbarParams" :before-flow-send="beforeFlowSend" />
    <WorkCheck
      v-if="workCheckVisible"
      ref="workCheckRef"
      :params="workCheckParams"
      :node-info="nodeInfo"
      :is-readonly="workCheckReadonly"
      :examine-mode="examineMode"
    />
    <!-- 中间区域:放置您自己的业务表单 -->
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted, watch, ref } from 'vue';
import { useRoute } from 'vue-router';
import {
  ToolBar,
  WorkCheck,
  setRequestToken,
  buildWorkOptParams,
  parseFlowUrlParams,
  useWorkCheckFwcSta,
} from '@/Toolkit';

const route = useRoute();
const workCheckRef = ref<InstanceType<typeof WorkCheck>>();
const queryReadonly = computed(() => parseInt(String(route.query.IsReadonly ?? '0'), 10) === 1);

const toolbarParams = computed(() =>
  buildWorkOptParams(parseFlowUrlParams(route.query as Record<string, unknown>)),
);

const { nodeInfo, examineMode, workCheckVisible, workCheckReadonly, beforeFlowSend: saveWorkCheckBeforeSend } =
  useWorkCheckFwcSta(toolbarParams, { queryIsReadonly: queryReadonly });

const workCheckParams = computed(() => ({
  DoWhat: 'WorkCheck',
  WorkID: toolbarParams.value.WorkID,
  NodeID: toolbarParams.value.NodeID ?? toolbarParams.value.FK_Node,
  FK_Node: toolbarParams.value.FK_Node ?? toolbarParams.value.NodeID,
  FlowNo: toolbarParams.value.FlowNo ?? toolbarParams.value.FK_Flow,
  Token: toolbarParams.value.Token,
}));

async function beforeFlowSend(): Promise<boolean> {
  return saveWorkCheckBeforeSend(workCheckRef);
}

onMounted(() => setRequestToken(String(route.query.Token || '')));
watch(toolbarParams, (p) => setRequestToken(String(p.Token || '')), { deep: true });
</script>

发送前钩子 beforeFlowSend 的典型职责:先保存审核意见,再允许发送------就像登机前先核验登机牌。


9. 核心组件详解

9.1 ToolBar ------ 工作处理器的「遥控器」

职责 :根据当前节点 InitToolBar 返回的按钮列表,渲染并执行发送、保存、退回等操作。

常用 props:

参数 必填 说明
params 是 WorkID、NodeID、FlowNo、Token 等
beforeFlowSend 否 发送前异步钩子;返回 false 则中止发送

发送时的几种分支(由引擎规则决定,前端只是「听话」):

  1. 普通发送:下一节点与接收人已由方向条件算好,一点即发。
  2. 需要选人 (IsSelectEmps ≠ 0):弹出接受人面板。
  3. CondModel = 1 :发送后弹出到达节点面板(ToNodesPanel),由办理人选择走向。

工具栏常见按钮(是否出现取决于节点配置):

按钮 No 含义
Send 发送
Save 保存
Draft / SaveAsDraft 存为草稿
Return 退回
Shift 移交
CC 抄送
Hungup 挂起
UnSend 撤销发送
Delete / CanCelFlow / EndFlow 删除 / 取消 / 结束
HuiQian 系列 会签、加主持人、会签发送等
Track 轨迹
FixFlow / FixFlowUn 冻结 / 解冻
PreplaceWoker 预置处理人
DelayedSend 延期发送
NodeToolBar 设计器配置的自定义「函数型」按钮
QRCode / Help / Scrip 等 二维码、帮助、小纸条等扩展入口

保存业务数据时,可通过 params 携带:

  • paras:主表字段串
  • dtls:从表数据
  • aths:附件信息

对应后端 WF_TSDev2Interface.Node_SaveWork。

9.2 WorkCheck ------ 审核组件

职责:意见填写、常用短语、手写签名、审核附件、轨迹/时间轴展示。

FWCSta(审核状态)决定组件生死:

FWCSta 行为
0 不显示
1 可编辑;发送前应保存审核意见
2 只读

推荐使用 useWorkCheckFwcSta:自动处理显隐、只读,并提供发送前保存。

注意:

  • 不要写死 examineMode='normalMode',应跟随节点 FWCShowModel(普通 / 轨迹 / 时间轴)。
  • WorkCheck 不渲染区块标题 ;宿主请读取 FWCLab(默认「审核信息」)自行展示,用法类似父子流程的 SFLab。

9.3 WorkOpt ------ 操作弹窗集群

由工具栏在需要时打开,例如:

  • 发送选人、到达节点选择
  • 会签加人
  • 挂起、删除实例
  • 分配、预置下一步接受人
  • 父子流程 SubFlow.vue(展示子流程列表、发起子流程;标题文案看 SFLab / SFSta)

宿主一般只需挂好 WorkOptModalHost(随 ToolBar 体系使用),无需逐个手写弹窗。

9.4 ToolbarFlow ------ 退回信息条

当工作是被退回回来的,顶部可展示退回原因、退回附件等,避免办理人「莫名其妙又看到自己的单」。


10. 前端 API:Dev2Interface(不用自己拼接口)

Toolkit 内的 Dev2Interface.ts 是面向 TS 的流程门面,底层打到 BP.WF.HttpHandler.WF_TSDev2Interface(及部分 MyFlow / WorkOpt Handler)。

10.1 常用方法速查

方法 作用
Flow_Start 发起流程
Node_CreateBlank 创建空白 WorkID
Node_CreateBlankThenDelEndCreate 创建前清理再创建(特殊场景)
Node_SendWork / Node_SendWorkByJson 发送
Node_SaveWork 保存主表/从表/附件参数
Node_ReturnWork 退回
Node_ShiftWork 移交
Node_SetDraft 设为草稿
Flow_DeleteFlow / Flow_DoDeleteDraft 删除流程 / 草稿
Flow_DoUnSend 撤销发送
Flow_DoFlowOver 结束流程
Flow_SetFlowParas 设置流程全局参数
Node_SetParentInfo 设置父流程信息
Node_HuiQian_* / HuiQian_SaveAndClose 会签相关
MyFlow_Init / MyView_Init / MyCC_Init 三大处理器初始化
CC_Init / Node_CC_WriteTo_CClist 等 抄送
Accepter_Init 接受人面板数据
Upload_File 上传
Port_SendMsg* 发消息

使用建议:能嵌 ToolBar 就优先嵌组件------按钮权限、选人弹窗、TurnTo 跳转都已编排好;只有高度定制的页面才直接裸调 API。

10.2 与后端核心 SDK 的关系

C# 侧完整业务能力在 BP.WF.Dev2Interface(列表查询、发送、退回、抄送等);

WF_TSDev2Interface 是给前端 Toolkit/TS 调用的 HttpHandler 薄封装 。

Java(JFlow)侧有对等 API 命名习惯,集成思路一致。

四大菜单数据若您要自绘列表,也可直接调引擎 API,例如:

菜单 引擎 API(概念)
发起 DB_GenerCanStartFlowsOfDataTable / DB_StarFlows
待办 DB_GenerEmpWorksOfDataTable
在途 DB_GenerRuning
抄送 DB_CCList

11. 半耦合:嵌入式表单(对照了解)

当节点表单方案为 嵌入式表单(SelfForm) 时:

  • 头部:驰骋工具栏
  • 中部:您的 URL(iframe)
  • 尾部:审核组件

系统会把 FK_Flow、FK_Node、WorkID、Token 等参数拼到您的 URL 后。

您的页面需实现 Save():保存成功返回 true,失败返回 false------外壳点「发送」时会先调它,像安检门一样拦住不完整的数据。

该模式不必整包引入 Toolkit 办理组件(外壳已有),但若您希望完全自控 UI,仍应回到第 5 章的 SDK + Toolkit。


12. 发送之后去哪里?TurnTo 与嵌入约定

  • 发送成功后的跳转由 utils/turnToNavigate.ts(如 handleTurnToResponse)处理。
  • 嵌入驰骋流程中心时:
    • 父 → 子:下发 Token、关闭指令等(可参考主站 MyFlowSelfForm.vue);
    • 子 → 父:办结后 postMessage 关闭 Tab(如 type: 2)。
  • SDK / 测试容器:WF/Admin/TestingContainer/Default.vue。

13. 常见问题

现象 排查方向
请求 401 页面是否 setRequestToken;Token 是否过期
后端地址不对 VITE_GLOB_API_URL 与 Vite proxy 是否一致
CondModel=1 却弹出选人 核对设计器转向规则;Toolkit 通过 loadNodeRow 读 CondModel
审核区不显示 FWCSta 是否为 0;参数是否齐全;是否使用了 useWorkCheckFwcSta
轨迹模式不对 勿写死 examineMode;跟随 FWCShowModel
工具栏按钮缺失 到节点属性检查按钮启用;看 InitToolBar 返回
自定义用户信息 替换 adapters/WebUser.ts
独立工程 HttpHandler 报错 确认 Dev2Interface 引用的是 Toolkit 包内路径,而非主站 /@/

客户复制清单

项 说明
整包复制 含 components/、styles/、WorkOpt/、WorkCheck/
Token setRequestToken + watch
导出常用 ToolBar、WorkCheck、ToolbarFlow、setRequestToken、buildWorkOptParams、useWorkCheckFwcSta、loadNodeRow、Dev2Interface
主站独有勿强拷 Dev2InterfaceCCBill.ts(单据)按需保留

14. 和「四大菜单、三大处理器」的关系

Toolkit 解决的是:打开一张单之后怎么办 。

产品级入口仍可概括为:

复制代码
发起 / 待办  ──► 工作处理器 MyFlow   ──► ToolBar + 表单 + WorkCheck
在途 / 完成  ──► 工作查看器 MyView   ──► 催办 / 撤销 / 轨迹(只读向)
抄送        ──► 抄送处理器 MyCC     ──► 知晓、打印、轨迹

非耦合集成时:列表可自绘或 iframe;处理器页面由您用 Toolkit 拼装,行为与产品三大处理器对齐。


15. 小结:怎么开始最省事

  1. 本地跑通演示:toolkit.ccbpm.cn (admin / 123)。
  2. 整包复制 Vue3/src/Toolkit 到您的前端。
  3. 配好 VITE_GLOB_API_URL、代理与 Token。
  4. 节点表单方案选 SDK 表单,URL 指向您的办理页。
  5. 页面上嵌入 ToolBar + 自绘表单 + WorkCheck。
  6. 需要列表页时,用 FEForward iframe 挂上发起/待办/在途/抄送。

这样,您得到的是:自家产品的脸面 + 驰骋引擎的筋骨------也是 ccbpm 最推荐的 Toolkit 集成路径。


附录 A. 相关代码与文档索引

资源 路径
Toolkit 唯一集成说明 Vue3/src/Toolkit/README.md
Toolkit 入口 Vue3/src/Toolkit/index.ts
前端流程 API Vue3/src/Toolkit/Dev2Interface.ts
TS 专用 Handler CCFlow/Components/BP.WF/HttpHandler/WF_TSDev2Interface.cs
引擎核心 SDK CCFlow/Components/BP.WF/Dev2Interface.cs
办理 Handler CCFlow/Components/BP.WF/HttpHandler/WF_MyFlow.cs
iframe 接入说明 Vue3/doc/Iframe接入项目.md
表单方案(SDK/嵌入式)说明 Vue3/src/WF/Admin/AttrNode/FrmSln/GPE_FrmSln.ts
相关推荐
开源驰骋低代码_工作流7 天前
交互层是产品还是框架:四大菜单与三大处理器的对比视角
bpmn-js
开源驰骋低代码_工作流14 天前
不做甘特图控件:流程引擎之上的工程运行时怎么设计
bpmn-js
开源驰骋低代码_工作流14 天前
三类任务、一个工作台:把项目执行收进流程平台的产品设计
bpmn-js
开源驰骋低代码_工作流15 天前
同一道请假审批,六款 Java 工作流引擎的实现路径与成本对比
bpmn-js
开源驰骋低代码_工作流15 天前
把请假审批交给六款 .NET 引擎:实现路径、场景适配与相对打分
bpmn-js
开源驰骋低代码_工作流20 天前
不走寻常路的 ORM:Map/Attr 元数据体系如何同时驱动持久化与表单渲染
bpmn-js
zm4351 年前
bpmn.js 自定义绘制流程图节点
前端·bpmn-js
Solon阿杰1 年前
solon-flow基于bpmnJs的流程设计器
javascript·bpmn-js
MiyueFE2 年前
07-源码篇6:Featrues 体验优化与功能扩展(一)
bpmn-js