Flowable-UI 详解

csdn_tom_168

于 2025-07-13 00:25:14 发布

阅读量352

点赞数 4

CC 4.0 BY-SA版权

分类专栏：工作流引擎文章标签： Flowable UI 学习

本文链接：https://blog.youkuaiyun.com/csdn_tom_168/article/details/149302147

工作流引擎专栏收录该内容

5 篇文章

订阅专栏

Flowable-UI 是 Flowable 官方提供的可视化流程套件，包含流程设计器（Modeler）、任务应用（Task App）、管理控制台（Admin App）三大核心模块，用于实现流程的建模、调试、监控和用户交互。以下从功能架构、部署方式、核心模块详解及企业级应用实践角度全面解析：

一、Flowable-UI 整体架构

前端：基于 AngularJS + Bootstrap 的响应式 Web 应用
后端：Spring Boot 微服务架构
核心服务：
- Flowable-IDM：统一身份认证（用户/组/权限）
- Flowable-Modeler：BPMN/DMN/CMMN 可视化设计器
- Flowable-Task：用户任务处理应用
- Flowable-Admin：流程运维监控台

二、四大核心模块详解

1. Flowable Modeler - 流程设计器

核心功能：
- 拖拽式建模：支持 BPMN 2.0、DMN 1.3、CMMN 1.1 规范
- 实时校验：自动检查节点连通性、属性完整性
- 版本管理：保存历史版本并对比差异
- 表单设计：集成 Form Builder 设计动态表单（需商业版）
操作示例：
企业级特性：
- 协作模式：多人同时编辑（基于 WebSocket 同步）
- 自定义模板：预置行业标准流程模板（如 ISO 审核）

2. Flowable Task App - 任务处理中心

用户功能：
- 待办列表：自动拉取分配给用户的流程任务
- 任务处理：审批/填写表单/上传附件/添加批注
- 委托与转办：临时移交任务给其他用户
- 流程跟踪：图形化展示当前任务位置
管理员功能：
- 任务重分配：强制修改任务负责人
- 设置截止时间：动态计算 SLA 超时预警
集成扩展：
- 消息中心：邮件/钉钉/企业微信通知
- 移动端适配：PWA (Progressive Web App) 支持

3. Flowable Admin - 运维监控台

核心监控维度：
模块监控指标
流程引擎 运行中实例数/任务积压/DB连接池
异步作业 作业队列深度/失败重试次数
性能分析 平均任务处理时间/节点停留时长
关键操作：
- 流程实例干预：挂起/激活/删除运行中实例
- 历史数据审计：精确查询任意节点的变量快照
- 批处理任务：批量清理历史数据（保留策略配置）
企业级插件：
- Prometheus 导出器：监控指标对接 Grafana 看板
- 日志追踪：关联业务 ID 的分布式链路跟踪

模块	监控指标
流程引擎	运行中实例数/任务积压/DB连接池
异步作业	作业队列深度/失败重试次数
性能分析	平均任务处理时间/节点停留时长

4. Flowable IDM - 统一身份服务

功能架构：
核心能力：
- 多源认证：同步 LDAP/Active Directory/数据库用户
- 细粒度授权：基于 RBAC 控制模块访问权限
- 租户隔离：为不同客户分配独立用户体系

配置示例（idm-application.properties）：

# 启用LDAP同步
idm.sync.ldap.enabled=true
idm.sync.ldap.server=ldap://corp.com:389
idm.sync.ldap.baseDn=ou=users,dc=corp,dc=com

三、部署方案详解

方案 1：All-in-One 快速启动（开发环境）

# 下载官方War包
wget https://repo.flowable.com/nexus/content/groups/public/org/flowable/flowable-ui/6.7.2/flowable-ui.war

# 启动嵌入式Tomcat
java -jar flowable-ui.war

访问 http://localhost:8080/flowable-ui 默认账号 admin/test

方案 2：Docker 容器化部署（生产推荐）

# docker-compose.yml
version: '3'
services:
  flowable-ui:
    image: flowable/flowable-ui:latest
    ports:
      - "8080:8080"
    environment:
      - SPRING_DATASOURCE_URL=jdbc:postgresql://db:5432/flowable
      - SPRING_DATASOURCE_USERNAME=flowable
      - SPRING_DATASOURCE_PASSWORD=Secret123!
  db:
    image: postgres:14
    volumes:
      - pgdata:/var/lib/postgresql/data
volumes:
  pgdata:

方案 3：Kubernetes 高可用部署

# flowable-ui-deployment.yaml
apiVersion: apps/v1
kind: Deployment
metadata:
  name: flowable-ui
spec:
  replicas: 3
  selector:
    matchLabels:
      app: flowable-ui
  template:
    spec:
      containers:
      - name: ui
        image: flowable/flowable-ui:7.0.0
        envFrom:
        - configMapRef:
            name: flowable-config
---
# 通过Ingress暴露服务
apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  name: flowable-ingress
spec:
  rules:
  - host: bpm.corp.com
    http:
      paths:
      - path: /
        pathType: Prefix
        backend:
          service:
            name: flowable-ui-service
            port: 
              number: 8080

四、企业级集成实践

1. 单点登录集成（OAuth 2.0）

# application.properties
security.oauth2.client.client-id=flowable-client
security.oauth2.client.client-secret=@KEYRANDOM@
security.oauth2.client.access-token-uri=https://sso.corp.com/oauth/token
security.oauth2.client.user-authorization-uri=https://sso.corp.com/oauth/authorize
security.oauth2.resource.user-info-uri=https://sso.corp.com/userinfo

2. 自定义扩展开发

添加新菜单（修改 app-cfg.js）：

FLOWABLE.CONFIG = {
    "apps": [
        {"id": "tasks", "title": "待办任务", "url": "/task"},
        {"id": "custom-report", "title": "自定义报表", "url": "/custom-report"}
    ]
};

开发自定义表单控件：

angular.module('flowableModeler')
  .controller('CustomFormCtrl', function($scope) {
    $scope.customField = { value: '' };
    // 与后端变量绑定
    $scope.$watch('customField.value', function(v) {
        $scope.field.value = v;
    });
  });

五、关键问题解决方案

问题场景	根因分析	解决方案
设计器保存时报权限错误	IDM未配置模型保存权限	在Admin控制台分配 `modeler:models:edit` 权限
任务列表加载缓慢	历史数据表未分区	对 `ACT_HI_TASKINST` 按时间分区
流程图渲染位置错乱	BPMN文件包含非法坐标	使用Modeler的 `Auto Layout` 功能重新排版
集成LDAP后登录失败	用户属性映射错误	检查 `idm.ldap.attribute.email` 映射配置

六、最佳实践建议

生产环境优化：
- 启用 GZIP 压缩前端资源
- 配置 CDN 加速静态文件（/flowable-ui/static/**）
- 数据库连接池使用 HikariCP 替代 DBCP
安全加固：
- 强制 HTTPS 访问
- 定期轮转 flowable-default.key 加密密钥
- 禁用 Swagger 等开发接口（flowable.rest.app-enabled=false）
高可用设计：
- 前端层：Nginx 负载均衡 + Keepalived
- 后端层：Redis 共享会话 + 数据库读写分离