import ElementUI from "element-ui"; // ui框架导入
import 'element-ui/lib/theme-chalk/index.css' // ui css 样式导入
import axios from 'axios'
Vue.prototype.$axios = axios
Vue.config.productionTip = false
Vue.use(ElementUI)

搭建后端springBoot项目

导入pom文件

        <!--    web 框架    -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
            <version>2.2.0.RELEASE</version>
        </dependency>
        <!--    安全认证框架    
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-security</artifactId>
            <version>2.2.0.RELEASE</version>
        </dependency> -->
        <!--    数据源    -->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>8.0.28</version>
        </dependency>

        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>2.1.3</version>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter</artifactId>
            <version>2.2.0.RELEASE</version>
        </dependency>
        <!-- flowable 工作流jar -->
        <dependency>
            <groupId>org.flowable</groupId>
            <artifactId>flowable-spring-boot-starter</artifactId>
            <version>6.3.0</version>
        </dependency>

编写yml 配置文件

server:
  port: 8001

spring:
  security:

    user:
      name: admin
      password: admin
  # 数据源配置     
  datasource:
    driver-class-name: com.mysql.cj.jdbc.Driver
    username: bhz
    password: Bhz123456
    url: jdbc:mysql://localhost:3306/csvn?serverTimezone=Asia/Shanghai&nullCatalogMeansCurrent=true

  mvc:
    view:
      suffix: .html
flowable:
  #  是否主动更新创建flowable关联表
  database-schema-update: true
  idm:
    enabled: true
  async-executor-activate: false
# mapper 映射文件配置
mybatis:
  mapper-locations: classpath:mapper/*.xml
  configuration:
    map-underscore-to-camel-case: true

自动更新异常问题数据源配置添加&nullCatalogMeansCurrent=true

问题参考: Flowable工作流启动错误：java.sql.SQLSyntaxErrorException: Table ‘act_ge_property‘ doesn‘t exist_java flowable 在流程启动之后报错,事物回滚了,流程正常启动了-CSDN博客

前端基础配置 bpmn 文件使用

import bpmnModeler from 'workflow-bpmn-modeler'

参数(常用)	数据类型	含义
:xml	String	流程图展示xml字符串
@save	function	模型保存方法
:users	[{name:'',id:''}]	用户信息
:groups	[{name:'',id:''}]	组信息
:categorys	[{name:'',id:''}]	流程分类
:is-view	true\|false	是否可编辑

截图展示前端样式

流程分类

人员users 属性

组 groups 属性

@save 保存方法参数

    save(bpmn) {
      console.log(bpmn)
    }

后端接口

实体类接受前端传过来的数据

package com.bu.sys.flow.dto;

import lombok.Data;

/**
 * @author haizhuangbu
 * @date 2024/5/17 20:54
 * @mark FlowDto
 */
@Data
public class FlowDto {

    private ProcessDto process;

    private String xml;

    private String svg;


}

flowUtils 工作流工具类

package com.bu.utils;

import com.bu.sys.flow.dto.FlowDto;
import com.bu.sys.flow.dto.ProcessDto;
import org.flowable.engine.*;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Component;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;

/**
 * @author haizhuangbu
 * @date 2024/5/17 17:42
 * @mark FlowUtils 工作流工具
 */
@Component
public class FlowUtils {

    @Autowired
    private RepositoryService repositoryService; // 流程图部署

    @Autowired
    private RuntimeService runtimeService; // 启动流程

    @Autowired
    private TaskService taskService; // 任务执行

    @Autowired
    private IdentityService identityService; // 用户信息

    @Autowired
    private HistoryService historyService; // 历史信息


    public void saveFlow(FlowDto flowDto) {
        ProcessDto process = flowDto.getProcess();
        repositoryService.createDeployment()
                // 第一参数 流程名称、第二个参数 xml 类型
                .addString(process.getName(), flowDto.getXml())
                .category(process.getCategory())
                .name(process.getName())
                .key(process.getName())
                .deploy();
    }


}

保存之后数据库保存到 ACT_RE_DEPLOYMENT、xml 数据保存到 ACT_GE_BYTEARRAY

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

Vue

echarts堆叠柱状图

Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...