审批流设计器（前端）

[VUE + element-ui](#VUE + element-ui)

VUE + element-ui

基于 Vue 2 或 Vue 3 + Element UI 的可视化工作流设计器，支持拖拽搭建、智能连线、缩放锁定与双语切换。
可方便地嵌入任何 Web 应用或流程引擎配置页。

核心特性

🖱️ 可视化搭建：从控件库拖拽节点到画布，自由排列。
➰ 贝塞尔连线：从节点四角连接点拖出曲线，自动吸附目标。
🔒 演示/锁定模式：一键锁定画布，禁止所有编辑操作。
🔍 无极缩放：30% ~ 250% 平滑缩放，适配不同屏幕。
🌐 完整双语：中文 / English 一键切换，节点标签与提示实时更新。
🎨 场景化高亮：一键将所有节点连线变为浅绿，恢复默认亦瞬间完成。
📝 备注编辑：双击节点描述或连线中间标签，即可写入自定义说明。
📦 JSON 导入导出：完整流程数据序列化 / 反序列化，便于持久化。

快速开始

下载解压缩 TCFlow.html 用浏览器打开即可。

属性

名称	类型	默认值	说明
lang	String	'zh'	初始语言，可选 'zh' / 'en'
nodes	Array	[]	初始节点数组
edges	Array	[]	初始连线数组
isLocked	boolean	false	是否处于锁定状态

节点对象结构：

json 复制代码

{
  "id": "guid",//节点id
  "type": "start",  // 节点类型：start/approve/condition/property/end/mail/joint/cc 其他可自行扩展
  "label": "开始节点",//标题
  "typeDesc": "流程开始",//描述
  "x": 100,//x坐标
  "y": 150,//y坐标
  "bgColor": null //背景色
}

连线对象结构：

json 复制代码

{
  "id": "guid",//连接线id
  "sourceId": "nodeId",//起始节点的ID
  "sourceDir": "right",//起始节点连接线的位置
  "targetId": "nodeId",//目标节点的ID
  "targetDir": "left",//目标节点连接线的位置
  "desc": "",//连接线描述
  "lineColor": null//连接线颜色
}

TCFlowVUE2.zip

TCFlowVUE3.zip

学习交流使用

联系邮箱:tantu666@163.com