springboot2+activiti7+bpmn-js使用入门

已于 2023-06-09 15:59:24 修改
阅读量6.9k 收藏 33
点赞数 5
分类专栏： Java及框架 文章标签： spring boot activiti vue
于 2021-06-29 19:35:14 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/nzgry_csdn/article/details/118342217
版权

springboot2+activiti7+bpmn-js使用入门

本示例使用springboot2+activiti7+bpmn-js(vue+elementUI)环境；

官网：https://www.activiti.org/

目录

搭建

  • 首先搭建好springboot项目的开发环境；
  • 添加maven依赖（目前git上最新版是7.1.0.M13，但是我在阿里云的maven仓库里找到的最新的是7.1.0.M6）
<properties>
    <java.version>1.8</java.version>
    <activiti.version>7.1.0.M6</activiti.version>
</properties>
<dependency>
    <groupId>xml-apis</groupId>
    <artifactId>xml-apis</artifactId>
    <version>1.4.01</version>
</dependency>
<dependency>
    <groupId>org.activiti.dependencies</groupId>
    <artifactId>activiti-dependencies</artifactId>
    <version>${activiti.version}</version>
    <type>pom</type>
</dependency>
<dependency>
    <groupId>org.activiti</groupId>
    <artifactId>activiti-spring-boot-starter</artifactId>
    <version>${activiti.version}</version>
</dependency>
<dependency>
    <groupId>org.activiti</groupId>
    <artifactId>activiti-image-generator</artifactId>
    <version>${activiti.version}</version>
</dependency>
  • 修改application.properties
# activiti配置
# 自动部署验证设置:true-开启（默认）、false-关闭
spring.activiti.check-process-definitions=false
# 自动创建表
# spring.activiti.database-schema-update=drop-create
spring.activiti.database-schema-update=false
# 使用历史表
spring.activiti.db-history-used=true
spring.activiti.history-level=full
# 关闭自动部署
spring.activiti.deployment-mode=never-fail
# 自动部署文件路径前后缀
# spring.activiti.process-definition-location-prefix=classpath:/process/
# spring.activiti.process-definition-location-suffixes=**.bpmn,**.bpmn20.xml
  • 启动类@SpringBootApplication注解加一下参数（关闭activiti自带的权限）
@SpringBootApplication(exclude = {
        org.springframework.boot.autoconfigure.security.servlet.SecurityAutoConfiguration.class,
        org.springframework.boot.actuate.autoconfigure.security.servlet.ManagementWebSecurityAutoConfiguration.class
})
  • 到此就可以读取指定目录下的流程配置文件使用流程了（我这里没用这种方式）。

表结构和组件

activiti工作流总共包含25张表，都已act_开头（activiti7与老版本的activiti表结构还是有些小变化的）；其中：

  • ACT_GE_：通用，用在各种情况下，2张；
  • ACT_HI_：历史，8张，默认提供了4种历史级别：
    • none：不保存历史记录，性能最好；
    • activity：保存流程实例、任务、活动信息；
    • audit：默认，保存实例、任务、活动、表单属性；
    • full：保存完整的历史记录；
  • ACT_RE_：仓库，3张，保存一些静态信息，如流程定义、资源（图片，规则等）；
  • ACT_RU_：运行，10张，保存流程实例、任务、变量等运行时数据，流程结束后会立即移除数据；
  • 还有两张：ACT_EVT_LOG：存储事件处理日志；ACT_PROCDEF_INFO：流程定义信息；

(老版本的activiti少了4张ACT_RU_，多了4张ACT_ID_的表（用于管理用户和用户组，作用不大）)

常用的流程服务组件有：

  • RepositoryService：提供管理流程定义和部署的API；
  • RuntimeService：在流程运行时对流程实例进行管理与控制；
  • TaskService：对流程任务进行管理，如：任务提醒、任务完成和创建；
  • ManagementService：提供对流程引擎进行管理和维护的服务；
  • HistoryService：对流程历史数据进行操作；
  • DynamicBpmnService：实现在不重新部署流程的情况下对流程模型进行部分修改；

流程设计器

依赖

  • 首先需要搭建好vue+elementUI的开发环境；
  • 安装：yarn add bpmn-js bpmn-js-properties-panel（注意bpmn-js的版本不能太高，不然整合activiti可能会报错，我这里使用的这个版本）
"bpmn-js": "~7.5.0",
"bpmn-js-properties-panel": "~0.43.1",

整合activiti

bpmn-js整合activiti需要下面这个json

{
  "name": "Activiti",
  "uri": "http://activiti.org/bpmn",
  "prefix": "activiti",
  "xml": {
    "tagAlias": "lowerCase"
  },
  "associations": [],
  "types": [
    {
      "name": "Definitions",
      "isAbstract": true,
      "extends": [
        "bpmn:Definitions"
      ],
      "properties": [
        {
          "name": "diagramRelationId",
          "isAttr": true,
          "type": "String"
        }
      ]
    },
    {
      "name": "InOutBinding",
      "superClass": [
        "Element"
      ],
      "isAbstract": true,
      "properties": [
        {
          "name": "source",
          "isAttr": true,
          "type": "String"
        },
        {
          "name": "sourceExpression",
          "isAttr": true,
          "type": "String"
        },
        {
          "name": "target",
          "isAttr": true,
          "type": "String"
        },
        {
          "name": "businessKey",
          "isAttr": true,
          "type": "String"
        },
        {
          "name": "local",
          "isAttr": true,
          "type": "Boolean",
          "default": false
        },
        {
          "name": "variables",
          "isAttr": true,
          "type": "String"
        }
      ]
    },
    {
      "name": "In",
      "superClass": [
        "InOutBinding"
      ],
      "meta": {
        "allowedIn": [
          "bpmn:CallActivity"
        ]
      }
    },
    {
      "name": "Out",
      "superClass": [
        "InOutBinding"
      ],
      "meta": {
        "allowedIn": [
          "bpmn:CallActivity"
        ]
      }
    },
    {
      "name": "AsyncCapable",
      "isAbstract": true,
      "extends": [
        "bpmn:Activity",
        "bpmn:Gateway",
        "bpmn:Event"
      ],
      "properties": [
        {
          "name": "async",
          "isAttr": true,
          "type": "Boolean",
          "default": false
        },
        {
          "name": "asyncBefore",
          "isAttr": true,
          "type": "Boolean",
          "default": false
        },
        {
          "name": "asyncAfter",
          "isAttr": true,
          "type": "Boolean",
          "default": false
        },
        {
          "name": "exclusive",
          "isAttr": true,
          "type": "Boolean",
          "default": true
        }
      ]
    },
    {
      "name": "JobPriorized",
      "isAbstract": true,
      "extends": [
        "bpmn:Process",
        "activiti:AsyncCapable"
      ],
      "properties": [
        {
          "name": "jobPriority",
          "isAttr": true,
          "type": "String"
        }
      ]
    },
    {
      "name": "SignalEventDefinition",
      "isAbstract": true,
      "extends": [
        "bpmn:SignalEventDefinition"
      ],
      "properties": [
        {
          "name": "async",
          "isAttr": true,
          "type": "Boolean",
          "default": false
        }
      ]
    },
    {
      "name": "ErrorEventDefinition",
      "isAbstract": true,
      "extends": [
        "bpmn:ErrorEventDefinition"
      ],
      "properties": [
        {
          "name": "errorCodeVariable",
          "isAttr": true,
          "type": "String"
        },
        {
          "name": "errorMessageVariable",
          "isAttr": true,
          "type": "String"
        }
      ]
    },
    {
      "name": "Error",
      "isAbstract": true,
      "extends": [
        "bpmn:Error"
      ],
      "properties": [
        {
          "name": "activiti:errorMessage",
          "isAttr": true,
          "type": "String"
        }
      ]
    },
    {
      "name": "PotentialStarter",
      "superClass": [
        "Element"
      ],
      "properties": [
        {
          "name": "resourceAssignmentExpression",
          "type": "bpmn:ResourceAssignmentExpression"
        }
      ]
    },
    {
      "name": "FormSupported",
      "isAbstract": true,
      "extends": [
        "bpmn:StartEvent",
        "bpmn:UserTask"
      ],
      "properties": [
        {
          "name": "formHandlerClass",
          "isAttr": true,
          "type": "String"
        },
        {
          "name": "formKey",
          "isAttr": true,
          "type": "String"
        }
      ]
    },
    {
      "name": "TemplateSupported",
      "isAbstract": true,
      "extends": [
        "bpmn:Process",
        "bpmn:FlowElement"
      ],
      "properties": [
        {
          "name": "modelerTemplate",
          "isAttr": true,
          "type": "String"
        }
      ]
    },
    {
      "name": "Initiator",
      "isAbstract": true,
      "extends": [
        "bpmn:StartEvent"
      ],
      "properties": [
        {
          "name": "initiator",
          "isAttr": true,
          "type": "String"
        }
      ]
    },
    {
      "name": "ScriptTask",
      "isAbstract": true,
      "extends": [
        "bpmn:ScriptTask"
      ],
      "properties": [
        {
          "name": "resultVariable",
          "isAttr": true,
          "type": "String"
        },
        {
          "name": "resource",
          "isAttr": true,
          "type": "String"
        }
      ]
    },
    {
      "name": "Process",
      "isAbstract": true,
      "extends": [
        "bpmn:Process"
      ],
      "properties": [
        {
          "name": "candidateStarterGroups",
          "isAttr": true,
          "type": "String"
        },
        {
          "name": "candidateStarterUsers",
          "isAttr": true,
          "type": "String"
        },
        {
          "name": "versionTag",
          "isAttr": true,
          "type": "String"
        },
        {
          "name": "historyTimeToLive",
          "isAttr": true,
          "type": "String"
        },
        {
          "name": "isStartableInTasklist",
          "isAttr": true,
          "type": "Boolean",
          "default": true
        },
        {
          "name": "executionListener",
          "isAbstract": true,
          "type": "Expression"
        }
      ]
    },
    {
      "name": "EscalationEventDefinition",
      "isAbstract": true,
      "extends": [
        "bpmn:EscalationEventDefinition"
      ],
      "properties": [
        {
          "name": "escalationCodeVariable",
          "isAttr": true,
          "type": "String"
        }
      ]
    },
    {
      "name": "FormalExpression",
      "isAbstract": true,
      "extends": [
        "bpmn:FormalExpression"
      ],
      "properties": [
        {
          "name": "resource",
          "isAttr": true,
          "type": "String"
        }
      ]
    },
    {
      "name": "multiinstance_type",
      "superClass": [
        "Element"
      ]
    },
    {
      "name": "multiinstance_condition",
      "superClass": [
        "Element"
      ]
    },
    {
      "name": "Assignable",
      "extends": [
        "bpmn:UserTask"
      ],
      "properties": [
        {
          "name": "assignee",
          "isAttr": true,
          "type": "String"
        },
        {
          "name": "candidateUsers",
          "isAttr": true,
          "type": "String"
        },
        {
          "name": "candidateGroups",
          "isAttr": true,
          "type": "String"
        },
        {
          "name": "dueDate",
          "isAttr": true,
          "type": "String"
        },
        {
          "name": "followUpDate",
          "isAttr": true,
          "type": "String"
        },
        {
          "name": "priority",
          "isAttr": true,
          "type": "String"
        },
        {
          "name": "multiinstance_condition",
          "isAttr": true,
          "type": "String"
        }
      ]
    },
    {
      "name": "CallActivity",
      "extends": [
        "bpmn:CallActivity"
      ],
      "properties": [
        {
          "name": "calledElementBinding",
          "isAttr": true,
          "type": "String",
          "default": "latest"
        },
        {
          "name": "calledElementVersion",
          "isAttr": true,
          "type": "String"
        },
        {
          "name": "calledElementVersionTag",
          "isAttr": true,
          "type": "String"
        },
        {
          "name": "calledElementTenantId",
          "isAttr": true,
          "type": "String"
        },
        {
          "name": "caseRef",
          "isAttr": true,
          "type": "String"
        },
        {
          "name": "caseBinding",
          "isAttr": true,
          "type": "String",
          "default": "latest"
        },
        {
          "name": "caseVersion",
          "isAttr": true,
          "type": "String"
        },
        {
          "name": "caseTenantId",
          "isAttr": true,
          "type": "String"
        },
        {
          "name": "variableMappingClass",
          "isAttr": true,
          "type": "String"
        },
        {
          "name": "variableMappingDelegateExpression",
          "isAttr": true,
          "type": "String"
        }
      ]
    },
    {
      "name": "ServiceTaskLike",
      "extends": [
        "bpmn:ServiceTask",
        "bpmn:BusinessRuleTask",
        "bpmn:SendTask",
        "bpmn:MessageEventDefinition"
      ],
      "properties": [
        {
          "name": "expression",
          "isAttr": true,
          "type": "String"
        },
        {
          "name": "class",
          "isAttr": true,
          "type": "String"
        },
        {
          "name": "delegateExpression",
          "isAttr": true,
          "type": "String"
        },
        {
          "name": "resultVariable",
          "isAttr": true,
          "type": "String"
        }
      ]
    },
    {
      "name": "DmnCapable",
      "extends": [
        "bpmn:BusinessRuleTask"
      ],
      "properties": [
        {
          "name": "decisionRef",
          "isAttr": true,
          "type": "String"
        },
        {
          "name": "decisionRefBinding",
          "isAttr": true,
          "type": "String",
          "default": "latest"
        },
        {
          "name": "decisionRefVersion",
          "isAttr": true,
          "type": "String"
        },
        {
          "name": "mapDecisionResult",
          "isAttr": true,
          "type": "String",
          "default": "resultList"
        },
        {
          "name": "decisionRefTenantId",
          "isAttr": true,
          "type": "String"
        }
      ]
    },
    {
      "name": "ExternalCapable",
      "extends": [
        "activiti:ServiceTaskLike"
      ],
      "properties": [
        {
          "name": "type",
          "isAttr": true,
          "type": "String"
        },
        {
          "name": "topic",
          "isAttr": true,
          "type": "String"
        }
      ]
    },
    {
      "name": "TaskPriorized",
      "extends": [
        "bpmn:Process",
        "activiti:ExternalCapable"
      ],
      "properties": [
        {
          "name": "taskPriority",
          "isAttr": true,
          "type": "String"
        }
      ]
    },
    {
      "name": "Properties",
      "superClass": [
        "Element"
      ],
      "meta": {
        "allowedIn": [
          "*"
        ]
      },
      "properties": [
        {
          "name": "values",
          "type": "Property",
          "isMany": true
        }
      ]
    },
    {
      "name": "Property",
      "superClass": [
        "Element"
      ],
      "properties": [
        {
          "name": "id",
          "type": "String",
          "isAttr": true
        },
        {
          "name": "name",
          "type": "String",
          "isAttr": true
        },
        {
          "name": "value",
          "type": "String",
          "isAttr": true
        }
      ]
    },
    {
      "name": "Connector",
      "superClass": [
        "Element"
      ],
      "meta": {
        "allowedIn": [
          "activiti:ServiceTaskLike"
        ]
      },
      "properties": [
        {
          "name": "inputOutput",
          "type": "InputOutput"
        },
        {
          "name": "connectorId",
          "type": "String"
        }
      ]
    },
    {
      "name": "InputOutput",
      "superClass": [
        "Element"
      ],
      "meta": {
        "allowedIn": [
          "bpmn:FlowNode",
          "activiti:Connector"
        ]
      },
      "properties": [
        {
          "name": "inputOutput",
          "type": "InputOutput"
        },
        {
          "name": "connectorId",
          "type": "String"
        },
        {
          "name": "inputParameters",
          "isMany": true,
          "type": "InputParameter"
        },
        {
          "name": "outputParameters",
          "isMany": true,
          "type": "OutputParameter"
        }
      ]
    },
    {
      "name": "InputOutputParameter",
      "properties": [
        {
          "name": "name",
          "isAttr": true,
          "type": "String"
        },
        {
          "name": "value",
          "isBody": true,
          "type": "String"
        },
        {
          "name": "definition",
          "type": "InputOutputParameterDefinition"
        }
      ]
    },
    {
      "name": "InputOutputParameterDefinition",
      "isAbstract": true
    },
    {
      "name": "List",
      "superClass": [
        "InputOutputParameterDefinition"
      ],
      "properties": [
        {
          "name": "items",
          "isMany": true,
          "type": "InputOutputParameterDefinition"
        }
      ]
    },
    {
      "name": "Map",
      "superClass": [
        "InputOutputParameterDefinition"
      ],
      "properties": [
        {
          "name": "entries",
          "isMany": true,
          "type": "Entry"
        }
      ]
    },
    {
      "name": "Entry",
      "properties": [
        {
          "name": "key",
          "isAttr": true,
          "type": "String"
        },
        {
          "name": "value",
          "isBody": true,
          "type": "String"
        },
        {
          "name": "definition",
          "type": "InputOutputParameterDefinition"
        }
      ]
    },
    {
      "name": "Value",
      "superClass": [
        "InputOutputParameterDefinition"
      ],
      "properties": [
        {
          "name": "id",
          "isAttr": true,
          "type": "String"
        },
        {
          "name": "name",
          "isAttr": true,
          "type": "String"
        },
        {
          "name": "value",
          "isBody": true,
          "type": "String"
        }
      ]
    },
    {
      "name": "Script",
      "superClass": [
        "InputOutputParameterDefinition"
      ],
      "properties": [
        {
          "name": "scriptFormat",
          "isAttr": true,
          "type": "String"
        },
        {
          "name": "resource",
          "isAttr": true,
          "type": "String"
        },
        {
          "name": "value",
          "isBody": true,
          "type": "String"
        }
      ]
    },
    {
      "name": "Field",
      "superClass": [
        "Element"
      ],
      "meta": {
        "allowedIn": [
          "activiti:ServiceTaskLike",
          "activiti:ExecutionListener",
          "activiti:TaskListener"
        ]
      },
      "properties": [
        {
          "name": "name",
          "isAttr": true,
          "type": "String"
        },
        {
          "name": "expression",
          "type": "String"
        },
        {
          "name": "stringValue",
          "isAttr": true,
          "type": "String"
        },
        {
          "name": "string",
          "type": "String"
        }
      ]
    },
    {
      "name": "InputParameter",
      "superClass": [
        "InputOutputParameter"
      ]
    },
    {
      "name": "OutputParameter",
      "superClass": [
        "InputOutputParameter"
      ]
    },
    {
      "name": "Collectable",
      "isAbstract": true,
      "extends": [
        "bpmn:MultiInstanceLoopCharacteristics"
      ],
      "superClass": [
        "activiti:AsyncCapable"
      ],
      "properties": [
        {
          "name": "collection",
          "isAttr": true,
          "type": "String"
        },
        {
          "name": "elementVariable",
          "isAttr": true,
          "type": "String"
        }
      ]
    },
    {
      "name": "FailedJobRetryTimeCycle",
      "superClass": [
        "Element"
      ],
      "meta": {
        "allowedIn": [
          "activiti:AsyncCapable",
          "bpmn:MultiInstanceLoopCharacteristics"
        ]
      },
      "properties": [
        {
          "name": "body",
          "isBody": true,
          "type": "String"
        }
      ]
    },
    {
      "name": "ExecutionListener",
      "superClass": [
        "Element"
      ],
      "meta": {
        "allowedIn": [
          "bpmn:Task",
          "bpmn:ServiceTask",
          "bpmn:UserTask",
          "bpmn:BusinessRuleTask",
          "bpmn:ScriptTask",
          "bpmn:ReceiveTask",
          "bpmn:ManualTask",
          "bpmn:ExclusiveGateway",
          "bpmn:SequenceFlow",
          "bpmn:ParallelGateway",
          "bpmn:InclusiveGateway",
          "bpmn:EventBasedGateway",
          "bpmn:StartEvent",
          "bpmn:IntermediateCatchEvent",
          "bpmn:IntermediateThrowEvent",
          "bpmn:EndEvent",
          "bpmn:BoundaryEvent",
          "bpmn:CallActivity",
          "bpmn:SubProcess",
          "bpmn:Process"
        ]
      },
      "properties": [
        {
          "name": "expression",
          "isAttr": true,
          "type": "String"
        },
        {
          "name": "class",
          "isAttr": true,
          "type": "String"
        },
        {
          "name": "delegateExpression",
          "isAttr": true,
          "type": "String"
        },
        {
          "name": "event",
          "isAttr": true,
          "type": "String"
        },
        {
          "name": "script",
          "type": "Script"
        },
        {
          "name": "fields",
          "type": "Field",
          "isMany": true
        }
      ]
    },
    {
      "name": "TaskListener",
      "superClass": [
        "Element"
      ],
      "meta": {
        "allowedIn": [
          "bpmn:UserTask"
        ]
      },
      "properties": [
        {
          "name": "expression",
          "isAttr": true,
          "type": "String"
        },
        {
          "name": "class",
          "isAttr": true,
          "type": "String"
        },
        {
          "name": "delegateExpression",
          "isAttr": true,
          "type": "String"
        },
        {
          "name": "event",
          "isAttr": true,
          "type": "String"
        },
        {
          "name": "script",
          "type": "Script"
        },
        {
          "name": "fields",
          "type": "Field",
          "isMany": true
        }
      ]
    },
    {
      "name": "FormProperty",
      "superClass": [
        "Element"
      ],
      "meta": {
        "allowedIn": [
          "bpmn:StartEvent",
          "bpmn:UserTask"
        ]
      },
      "properties": [
        {
          "name": "id",
          "type": "String",
          "isAttr": true
        },
        {
          "name": "name",
          "type": "String",
          "isAttr": true
        },
        {
          "name": "type",
          "type": "String",
          "isAttr": true
        },
        {
          "name": "required",
          "type": "String",
          "isAttr": true
        },
        {
          "name": "readable",
          "type": "String",
          "isAttr": true
        },
        {
          "name": "writable",
          "type": "String",
          "isAttr": true
        },
        {
          "name": "variable",
          "type": "String",
          "isAttr": true
        },
        {
          "name": "expression",
          "type": "String",
          "isAttr": true
        },
        {
          "name": "datePattern",
          "type": "String",
          "isAttr": true
        },
        {
          "name": "default",
          "type": "String",
          "isAttr": true
        },
        {
          "name": "values",
          "type": "Value",
          "isMany": true
        }
      ]
    },
    {
      "name": "FormProperty",
      "superClass": [
        "Element"
      ],
      "properties": [
        {
          "name": "id",
          "type": "String",
          "isAttr": true
        },
        {
          "name": "label",
          "type": "String",
          "isAttr": true
        },
        {
          "name": "type",
          "type": "String",
          "isAttr": true
        },
        {
          "name": "datePattern",
          "type": "String",
          "isAttr": true
        },
        {
          "name": "defaultValue",
          "type": "String",
          "isAttr": true
        },
        {
          "name": "properties",
          "type": "Properties"
        },
        {
          "name": "validation",
          "type": "Validation"
        },
        {
          "name": "values",
          "type": "Value",
          "isMany": true
        }
      ]
    },
    {
      "name": "Validation",
      "superClass": [
        "Element"
      ],
      "properties": [
        {
          "name": "constraints",
          "type": "Constraint",
          "isMany": true
        }
      ]
    },
    {
      "name": "Constraint",
      "superClass": [
        "Element"
      ],
      "properties": [
        {
          "name": "name",
          "type": "String",
          "isAttr": true
        },
        {
          "name": "config",
          "type": "String",
          "isAttr": true
        }
      ]
    },
    {
      "name": "ConditionalEventDefinition",
      "isAbstract": true,
      "extends": [
        "bpmn:ConditionalEventDefinition"
      ],
      "properties": [
        {
          "name": "variableName",
          "isAttr": true,
          "type": "String"
        },
        {
          "name": "variableEvent",
          "isAttr": true,
          "type": "String"
        }
      ]
    }
  ],
  "emumerations": []
}

使用

<template>
  <div style="width: 100%; height: 100%">
    <div ref="bpmn" style="width: 100%; height: 100%;"></div>
    <div ref="panel" class="panel"></div>
    <button @click="showSave = true" class="saveBtn" style="margin-left: -50px;">保存</button>
    <button @click="loadData" class="saveBtn" style="margin-left: 50px;">重置</button>
    
    <el-dialog title="保存流程图" :visible.sync="showSave">
      <el-form :model="model">
        <el-form-item label="key">
          <el-input v-model="model.key" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="name">
          <el-input v-model="model.name" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showSave = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  
  // 这个只能预览
  // import BpmnViewer from 'bpmn-js/lib/Viewer'
  import Modeler from 'bpmn-js/lib/Modeler'
  // 面板
  import propertiesPanelModule from 'bpmn-js-properties-panel'
  import propertiesProviderModule from 'bpmn-js-properties-panel/lib/provider/bpmn'
  // 适应activiti
  import activiti from '@/components/activiti/activiti.json'
  // 汉化
  /// import customTranslate from '@/components/activiti/customTranslate.js'
  
  export default {
    data() {
      return {
        showSave: false, model: {id: '', key: '', name: '', xml: ''}, modeler: null
      }
    },
    mounted() {
      this.modeler = new Modeler({
        container: this.$refs.bpmn, propertiesPanel: {parent: this.$refs.panel},
        additionalModules: [
          propertiesPanelModule, propertiesProviderModule,
          /// {translate: ['value', customTranslate]}
        ],
        moddleExtensions: {
          activiti: activiti
        }
      })
      this.loadData()
    },
    methods: {
      loadData() {
        this.model.id = this.$route.query.id
        new Promise(resolve => {
          if (this.model.id) {
            this.$apis.act.act.getModel.req({id: this.model.id}).then(res => {
              if (res.data && res.data.metaInfo) {
                this.model = res.data
              }
              resolve(this.model.metaInfo)
            })
          } else {
            resolve()
          }
        }).then(xml => {
          xml ? this.modeler.importXML(xml) : this.modeler.createDiagram()
        })
      },
      save() {
        this.modeler.saveXML().then(xml => {
          this.model.xml = xml.xml
          this.$apis.act.act.saveModel.req(this.model).then(res => {
            this.$message({type: 'success', message: '成功'})
            this.$router.push({path: '/bpmn/modelEdit', query: {id: res.data.id}})
            this.loadData()
          })
        })
        /*this.modeler.saveSVG().then(b => {
          console.log(b)
        })*/
      },
    }
  }
</script>

<style scoped>
  /* 基础样式 */
  @import '~bpmn-js/dist/assets/diagram-js.css';
  @import '~bpmn-js/dist/assets/bpmn-font/css/bpmn.css';
  @import '~bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css';
  @import '~bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css';
  /* 右侧面板样式 */
  @import '~bpmn-js-properties-panel/dist/assets/bpmn-js-properties-panel.css';
  
  .saveBtn {
    position: absolute;
    top: 80%;
    left: 50%;
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 18px;
    cursor: pointer;
  }
  
  .panel {
    position: absolute;
    box-sizing: border-box;
    width: 400px;
    height: 100%;
    padding: 10px 15px;
    top: 80px;
    right: 15px;
    overflow: auto;
  }
</style>

API

数据查询

activiti的每一个服务组件都有一个query对象，可以通过服务组件的createXxxQuery方法得到；可用于查询流程数据（可以查询model、部署的流程、流程实例、流程历史等信息），这里就不细说了；

保存流程设计

@PostMapping("/saveModel")
@ApiOperation("保存流程")
public R<String> saveModel(String id, String name, String xml) {
    Model model = repositoryService.getModel(id);
    if (model == null) {
        model = repositoryService.newModel();
    }
    model.setMetaInfo(xml);
    model.setName(name);
    model.setKey("testKey");
    //保存模型
    repositoryService.saveModel(model);
    return R.success(model.getId());
}

部署

流程部署可以根据model、xml、zip等不同的数据源来部署，这里是根据流程设计器保存的提供的xml来部署流程，部署成功后会在ACT_RE_的部分表中有体现。

@GetMapping("/deploy")
@ApiOperation("部署流程")
public R<String> deploy(String modelId) {
    Model model = repositoryService.getModel(modelId);
    String deploymentId = model.getDeploymentId();
    if (StringUtils.hasText(deploymentId)) {
        return R.error("流程已部署" + deploymentId);
    }
    // 部署流程
    Deployment deployment = repositoryService.createDeployment().name(model.getName()).key(model.getKey())
        .addString(model.getName() + ".bpmn20.xml", model.getMetaInfo()).deploy();
    model.setDeploymentId(deployment.getId());
    repositoryService.saveModel(model);
    return R.success(deployment.getId());
}

启动

@GetMapping("/start")
@ApiOperation("启动流程")
public R<String> start(String deploymentId, String businessKey) {
    ProcessDefinition processDefinition = repositoryService.createProcessDefinitionQuery()
        .deploymentId(deploymentId).active().latestVersion().singleResult();
    List<ProcessInstance> list = runtimeService.createProcessInstanceQuery()
        .processDefinitionId(processDefinition.getId()).processInstanceBusinessKey(businessKey).list();
    if (list != null && !list.isEmpty()) {
        return R.error("businessKey重复");
    }
    // 启动流程
    ProcessInstance processInstance = runtimeService.startProcessInstanceById(processDefinition.getId(), businessKey);
    return R.success(processInstance.getId());
}

审批

@GetMapping("/audit")
@ApiOperation("审核流程")
public R audit(String processInstanceId) {
    Task task = taskService.createTaskQuery().processInstanceId(processInstanceId).singleResult();
    if (task == null) {
        return R.error("任务不存在");
    }
    // 通过
    taskService.complete(task.getId());
    // 驳回
    /// taskService.resolveTask(task.getId());
    return R.success();
}

流程图

这里返回的是svg图片

@GetMapping("/img")
@ApiOperation("流程图")
public R<String> img(String defId, String businessKey) throws IOException {
    BpmnModel bpmnModel = repositoryService.getBpmnModel(defId);
    List<String> activityIds = new ArrayList<>();
    HistoricProcessInstance processInstance = historyService.createHistoricProcessInstanceQuery().processInstanceBusinessKey(businessKey).singleResult();
    List<HistoricActivityInstance> list1 = historyService.createHistoricActivityInstanceQuery().processInstanceId(processInstance.getId()).list();
    for (HistoricActivityInstance instance : list1) {
        activityIds.add(instance.getActivityId());
    }
    ProcessDiagramGenerator imageGenerator = new DefaultProcessDiagramGenerator();
    String activityFontName = "宋体";
    String labelFontName = "宋体";
    String annotationFontName = "宋体";
    Process process = bpmnModel.getMainProcess();
    List<String> flows = new ArrayList<>();
    for (FlowElement flowElement : process.getFlowElements()) {
        boolean isExecute = (flowElement instanceof Activity || flowElement instanceof Event) && activityIds.contains(flowElement.getId());
        if (isExecute) {
            flows.addAll(((FlowNode) flowElement).getIncomingFlows().stream().map(BaseElement::getId).collect(Collectors.toList()));
        }
    }
    InputStream is = imageGenerator.generateDiagram(bpmnModel, activityIds, flows,
                                                    activityFontName, labelFontName, annotationFontName, true);
    byte[] bytes = new byte[is.available()];
    int len = is.read(bytes);
    is.close();
    String svgImg = new String(bytes, 0, len);
    return R.success(svgImg);
}

到此，一个简单的流程就可以使用上面的api来操作了。

## name
关注
  • 5
    点赞
  • 踩
  • 33
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
SpringBoot 2.7.2 分模块整合 activiti 7.1.0.M6
IamLagrange的博客
08-16 1454
SpringBoot 2.7.2 分模块整合 activiti 7.1.0.M6
Activiti BPMN2.0 designer
12-17
鉴于Activiti BPMN2.0 Designer在线安装方式基本安装不成功，所以提供离线下载文件及安装步骤供大家使用。
若依微服务整合activiti7.1.0.M6
Stone的博客
07-21 3080
在主项目的pom中添加如下代码，其中lombok和activiti-image-generator可以不加，一定要加spring-boot-starter-security，因为不知道为什么activiti的7.1.0.M6版本中去除了security的部分依赖，导致不能直接集成security，需要添加spring-boot-starter-security才行。 步骤2 在你的activiti模块的pom文件中添加如下代码 步骤3 添加对应的代码，目录及源码如下（security目录下的源码即可） A
工作流Activiti7基础
最新发布
2303_79633394的博客
06-06 1844
我们现在的任务是UEL表达式来动态分配代理人的，其中的流程部署和任务执行的方式都一样，唯一不同的是，启动流程实例的时候，需要设置流程变量，来给刚才的${assignee0} 和 ${assignee1}赋值，这样就能做到，多个人申请流程，是多套流程实例，每一套都有可能是不同的人来去处理任务。因此不同意，则应该是终止流程而不是完成节点。不过，在实际的开发中，不同的部门有不同的人，这个执行人应该是一个变量，不应该写死，所以，固定分配可以在我们做demo的时候使用，在业务开发的过程中，需要使用动态的设置代理人。
vue+bpmnjs+activiti 基本使用
qq_42155347的博客
03-19 4450
vue+bpmnjs+activiti 基本使用
springboot2+activiti 7 -- maven工程依赖配置和创建表结构
01-07
springboot2+activiti 7 整合-- 创建activiti数据库 （一）创建工程，贴出maven配置 （二）创建 activiti.cfg.xml文件 （三）建表程序
activiti6.0通过bpmn.js展示高亮流程图(前端绘制流程图)
instanceof_zjl的博客
06-23 9776
activiti6.0通过bpmn.js展示高亮流程图(前端绘制流程图)
基于Springboot+Activiti的办公系统autumn-oa.zip
05-19
该项目利用了基于springboot + vue + mysql的开发模式框架实现的课设系统，包括了项目的源码资源、sql文件、相关指引文档等等。 【项目资源】：包含前端、后端、移动开发、操作系统、人工智能、物联网、信息化管理...
springboot+activiti7 入门小demo
11-02
首先，让我们从标题"springboot+activiti7 入门小demo"开始，这个标题暗示了这是一个基于Spring Boot的小型项目，旨在帮助初学者理解如何集成和使用Activiti 7。Spring Boot以其"开箱即用"的特性，简化了Java应用的...
activiti 7 + springboot2（六） SpringBoot2 整合 Activiti7
01-10
（一）首先 pom.xml 文件中引入相关的依赖 ...（二）springboot 的配置文件 application.yml中添加相关的配置 （三）流程资源 （四）编写Applocation主程序 （五）编写基于SpringBootTest的测试程序
activiti-bpmn-model-5.21.0-API文档-中文版.zip
07-13
赠送jar包：activiti-bpmn-model-5.21.0.jar； 赠送原API文档：activiti-bpmn-model-5.21.0-javadoc.jar； 赠送源代码：activiti-bpmn-model-5.21.0-sources.jar； 赠送Maven依赖信息文件：activiti-bpmn-model-...
vue使用bpmn结合activiti版
RubyLinT的博客
12-11 6625
1.首先安装包： npm i bpmn-js 安装bpmn-js-properties-panel、activiti-bpmn-moddle： 修改package.json： "bpmn-js-properties-panel":"https://github.com/RubyLinT/bpmn-js-properties-panel.git", "activiti-bpmn-mod...
【Bpmn.js】activiti 流程编辑器
m0_71621983的博客
07-20 6702
流程编辑器什么是流程编辑器：流程编辑器是一种用于创建、编辑和管理流程图的工具。它提供了一个可视化的界面，使用户能够以图形化的方式定义和配置流程的各个步骤、条件和流程间的关系。流程编辑器通常用于业务流程管理、工作流程管理和业务流程自动化等领域。它可以帮助用户轻松地设计和管理复杂的流程，而无需编写大量的代码。通过拖拽和连接不同的图形元素，用户可以定义流程的起始点、结束点、流程分支、条件判断、任务执行等。流程编辑器还通常提供了一些额外的功能，如版本控制、权限管理、流程模板的导入和导出等。
Activity工作流(七)：BPMN规范及框架整合
专治八阿哥的孟老师
03-21 683
业务流程模型注解（Business Process Modeling Notation -BPMN）是业务流程模型的一种标准图形注解。这个标准 是由对象管理组（Object Management Group -OMG）维护的。包含以下部分：流对象：事件、活动、网关连接对象：序列流、消息流、关联泳道：池、道人工制品：数据对象、组、注释。
springboot+Activiti7整合实践 (三) 流程定义
刘一线的博客
01-08 1621
工作流，activiti7流程设计，借鉴芋道，去掉设计阶段的代办人、代办人组等设计，单独处理。
vue3集成bpmn-js——适配activiti工作流
热门推荐
qq_34731982的博客
11-18 1万+
1、安装bpmn-js npm install bpmn-js 2、vue引入相关依赖 import { markRaw } from 'vue'; import 'bpmn-js/dist/assets/diagram-js.css'; import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css'; import BpmnModeler from 'bpmn-js/lib/Modeler'; 3、页面 <div id="co
小程序-云开发-实现生成小程序码
itclanCoder
09-26 2328
虽互不曾谋面,但希望能和您成为笔尖下的朋友以读书,技术,生活为主,偶尔撒点鸡汤不作,不敷衍,意在真诚吐露,用心分享点击左上方,可关注本刊标星公众号（ID：itclanCoder）如果不知...
springBoot2整合Activiti7
wuningw的博客
05-17 957
springBoot2整合Activiti7
activiti7整合.bpmn-js
08-09
activiti7是一个用于业务流程管理和工作流管理的开源框架，而.bpmn-js是一个用于在浏览器中显示和编辑BPMN 2.0流程图的工具库。将activiti7与.bpmn-js整合在一起，可以实现在activiti7中通过.bpmn-js展示和编辑流程图的功能。 首先，要实现activiti7与.bpmn-js的整合，需要在项目中引入.bpmn-js的库文件，并确保activiti7的版本与.bpmn-js的版本兼容。 接下来，在activiti7中新建一个用于展示和编辑BPMN 2.0流程图的页面。可以使用activiti7提供的组件和方法，结合.bpmn-js提供的功能，实现该页面的相关功能。 在该页面中，可以使用activiti7提供的API获取流程定义的相关信息，并将其传递给.bpmn-js进行展示。同时，可以使用.bpmn-js提供的API，实现流程图的交互功能，例如放大缩小、拖拽、连接节点等。 如果需要编辑流程图，可以在该页面中添加一个编辑按钮，点击后，调用.bpmn-js提供的API，进入编辑模式。在编辑模式下，可以添加、删除、修改流程图的节点和连接线等。 编辑完成后，可以保存流程图的修改，将其更新到activiti7的数据库中，以便后续的业务流程执行。 通过activiti7整合.bpmn-js，可以使用户能够方便地在activiti7中展示和编辑流程图，提升业务流程管理和工作流管理的效率和用户体验。同时，由于.bpmn-js是一个功能强大的工具库，整合后还可以扩展各种流程图相关的功能，满足不同的业务需求。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值