引擎独立部署,前端自己写,两者只靠一组 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 集成工作示意图
读图要点:
- Toolkit 文件夹放在您的前端开发目录里(整包复制,不要拆散)。
- 它通过 API 与 ccbpm 服务器交互------服务器可独立部署,前后端分离。
- 您的业务页面负责「填什么」;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 专用流程 APIBP.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 设计器侧怎么配
- 流程/节点表单方案选择 SDK 表单 (
NodeFormType.SDKForm)。 - 表单 URL 指向您的办理页(可用变量
@SDKFromServHost,或配置VITE_GLOB_SDKFROESERV_HOST)。 - 在节点属性中启停按钮(退回、移交、抄送、结束等)------运行时由
InitToolBar下发给ToolBar。 - 在节点审核组件属性中配置
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 |
流程树 / 表单树 |
第三方系统接入步骤要点:
- 打包 Vue3 时设置
VITE_GLOB_IS_THIRDPART_SYSTEM=1,VITE_GLOB_API_URL指向真实后端。 - 业务系统登录后换取 ccbpm Token(
/WF/API/Port_Login或 Java 侧Dev2Interface.Port_Login)。 - 菜单 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 则中止发送 |
发送时的几种分支(由引擎规则决定,前端只是「听话」):
- 普通发送:下一节点与接收人已由方向条件算好,一点即发。
- 需要选人 (
IsSelectEmps ≠ 0):弹出接受人面板。 - 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)。
- 父 → 子:下发 Token、关闭指令等(可参考主站
- 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. 小结:怎么开始最省事
- 本地跑通演示:toolkit.ccbpm.cn (
admin/123)。 - 整包复制
Vue3/src/Toolkit到您的前端。 - 配好
VITE_GLOB_API_URL、代理与 Token。 - 节点表单方案选 SDK 表单,URL 指向您的办理页。
- 页面上嵌入
ToolBar+ 自绘表单 +WorkCheck。 - 需要列表页时,用
FEForwardiframe 挂上发起/待办/在途/抄送。
这样,您得到的是:自家产品的脸面 + 驰骋引擎的筋骨------也是 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 |