# JeecgBoot集成步骤

JeecgBoot任何版本都可以按照如下方式进行集成

# 新增jeecg-module-camunda

第一个目标就是在JeecgBoot项目下,新建一个模块jeecg-module-camunda,专门管理流程引擎相关代码。 在IDEA中选中项目,右键点击:New->Module,直接点击Next,创建名称为jeecg-module-activiti的模块。
接下来请按照如下步骤,逐步完成所有的配置

foo

并且在该模块pom.xml添加如下依赖

<dependencies>
    <dependency>
        <groupId>org.jeecgframework.boot</groupId>
        <artifactId>jeecg-boot-base-core</artifactId>
    </dependency>
</dependencies>

# 新增依赖声明,项目根pom.xml->dependencyManagement

<properties>
    <camunda.spring-boot.version>7.18.0</camunda.spring-boot.version>
    <groovy.version>2.4.21</groovy.version>
    <http.builder.version>0.7.1</http.builder.version>
    <hutool.version>5.3.8</hutool.version>
</properties>

<dependencyManagement>
    <!--在dependencyManagement声明camunda依赖-->
    <dependency>
        <groupId>org.camunda.bpm.springboot</groupId>
        <artifactId>camunda-bpm-spring-boot-starter-webapp</artifactId>
        <version>${camunda.spring-boot.version}</version>
    </dependency>

    <dependency>
        <groupId>org.camunda.bpm.springboot</groupId>
        <artifactId>camunda-bpm-spring-boot-starter</artifactId>
        <version>${camunda.spring-boot.version}</version>
    </dependency>
    <dependency>
        <groupId>org.camunda.bpm.springboot</groupId>
        <artifactId>camunda-bpm-spring-boot-starter-rest</artifactId>
        <version>${camunda.spring-boot.version}</version>
    </dependency>
    <dependency>
        <groupId>org.codehaus.groovy</groupId>
        <artifactId>groovy-all</artifactId>
        <version>${groovy.version}</version>
    </dependency>
    <!--groovy发送Http请求,底层是对HTTPClient封装 HttpBuilder-->
    <dependency>
        <groupId>org.codehaus.groovy.modules.http-builder</groupId>
        <artifactId>http-builder</artifactId>
        <version>${http.builder.version}</version>
    </dependency>
    <dependency>
        <groupId>cn.hutool</groupId>
        <artifactId>hutool-all</artifactId>
        <version>${hutool.version}</version>
    </dependency>
</dependencyManagement>

在jeecg-module-camunda模块中追加camunda相关模块

<dependency>
    <groupId>org.camunda.bpm.springboot</groupId>
    <artifactId>camunda-bpm-spring-boot-starter-rest</artifactId>
    <!--排除mybatis依赖,避免启动出现异常-->
    <exclusions>
        <exclusion>
            <groupId>org.mybatis</groupId>
            <artifactId>mybatis</artifactId>
        </exclusion>
    </exclusions>
</dependency>
<dependency>
    <groupId>org.codehaus.groovy</groupId>
    <artifactId>groovy-all</artifactId>
</dependency>
<dependency>
    <groupId>org.codehaus.groovy.modules.http-builder</groupId>
    <artifactId>http-builder</artifactId>
</dependency>
<dependency>
    <groupId>cn.hutool</groupId>
    <artifactId>hutool-all</artifactId>
</dependency>
 <dependency>
    <groupId>org.projectlombok</groupId>
    <artifactId>lombok</artifactId>
    <scope>provided</scope>
</dependency>
<dependency>
    <groupId>org.jeecgframework.boot</groupId>
    <artifactId>jeecg-system-local-api</artifactId>
</dependency>

camunda依赖需要排除mybatis,避免启动异常

# application.yml配置文件,主要针对dev,prod,test三个文件

camunda:
  bpm:
    admin-user:
      id: admin
      password: 123456
# 该配置主要用于登陆camunda管理页面
# 管理页面地址:http://localhost:8080/jeecg-boot/camunda/app/welcome/default/#!/login

# 新增mysql中url属性参数nullCatalogMeansCurrent=true

 master:
    url: jdbc:mysql://xxx&nullCatalogMeansCurrent=true
    username: xx
    password: xx
    driver-class-name: com.mysql.cj.jdbc.Driver
#  在url后面添加nullCatalogMeansCurrent=true

# 如若不添加,启动应用可能报如下错误
### SQL: select * from ACT_GE_PROPERTY where NAME_ = ?
### Cause: java.sql.SQLSyntaxErrorException: Table 'jeecg-camunda.act_ge_property' doesn't exist

# 将jeecg-module-camunda模块集成到system中

在jeecg-module-system->jeecg-system-start的pom.xml新增jeecg-module-camunda

<!--camunda模块-->
<dependency>
    <groupId>org.jeecgframework.boot</groupId>
    <artifactId>jeecg-module-camunda</artifactId>
    <version>${jeecgboot.version}</version>
</dependency>

# 配置SwaggerConfig

@Configuration
@EnableSwagger2    //开启 Swagger2
@EnableKnife4j     //开启 knife4j,可以不写
@Import(BeanValidatorPluginsConfiguration.class)
public class Swagger2Config implements WebMvcConfigurer {
    //--省去其他代码,这个配置会将camunda模块接口单独生成一个分组--
    @Bean
    public Docket camundaApi() {
        return new Docket(DocumentationType.SWAGGER_2)
                .apiInfo(apiInfo()).groupName("Camunda模块")
                .select()
                //此包路径下的类,才生成接口文档
                .apis(RequestHandlerSelectors.basePackage("org.jeecg.modules.camunda"))
                //加了ApiOperation注解的类,才生成接口文档
                .apis(RequestHandlerSelectors.withMethodAnnotation(ApiOperation.class))
                .paths(PathSelectors.any())
                .build()
                .securitySchemes(Collections.singletonList(securityScheme()));
    }
}    

上述配置可以将camunda模块相关接口以单独的分组进行展示

# 新增ISysBaseAPI的接口

public interface ISysBaseAPI extends CommonAPI {
     List<LoginUser> getUserList(List<String> userNameList);
}

@Slf4j
@Service
public class SysBaseApiImpl implements ISysBaseAPI {

    @Override
	public List<LoginUser> getUserList(List<String> userNameList) {
		if (CollectionUtil.isEmpty(userNameList)) {
			return Collections.EMPTY_LIST;
		}
		QueryWrapper<SysUser> queryWrapper = new QueryWrapper<SysUser>().eq("status", 1).eq("del_flag", 0);
		queryWrapper.in("username", userNameList);
		List<SysUser> sysUserList = userMapper.selectList(queryWrapper);
		if (CollectionUtil.isEmpty(sysUserList)) {
			return null;
		}
		List<LoginUser> loginUserList = new ArrayList<>();
		for (SysUser sysUser : sysUserList) {
			LoginUser loginUser = new LoginUser();
			BeanUtils.copyProperties(sysUser, loginUser);
			//去掉用户敏感信息
			loginUser.setPassword(null);
			loginUser.setRelTenantIds(null);
			loginUser.setDepartIds(null);
			loginUserList.add(loginUser);
		}
		return loginUserList;
	}
}

camunda流程引擎模块需要调用system模块用户信息,用于流程信息的展示

完成以上配置,便可以将交付于您的camunda模块boot代码,拷贝进camunda模块当中。

# JeecgVue集成步骤

# 集成Bpmn-Js

第一步,找到交付于您的Bpmn-Js.md,按照步骤在自己项目安装相应依赖。
非常关键的一步!!!

# 注册a-timeline时间线组件

在审批的场景需要按照时间线显示信息,JeecgBoot需要我们按需加载这个组件。步骤如下:

定位到:src/commponents/registerGlobComp.ts

import type { App } from 'vue';
import { Icon } from './Icon';
import AIcon from '/@/components/jeecg/AIcon.vue';
//Tinymce富文本
import Editor from '/@/components/Tinymce/src/Editor.vue';

import { Button, JUploadButton } from './Button';

// 按需注册antd的组件
import {
  Button as AntButton,
  Select,
  //TODO: 省去其他的组件,在末尾添加时间线组件
  Timeline,
} from 'ant-design-vue';
const compList = [AntButton.Group, Icon, AIcon, JUploadButton];

import DragEngine from '@qiaoqiaoyun/drag-free';
import('@qiaoqiaoyun/drag-free/lib/index.css');

export function registerGlobComp(app: App) {
  compList.forEach((comp) => {
    app.component(comp.name || comp.displayName, comp);
  });
  app.component(Editor.name, Editor);

  app
    .use(Select)
    //TODO: 省去其他的组件,在末尾添加时间线组件
    .use(Timeline);
  console.log("注册antd组件完成!");
}

TODO处的代码,需要大家手动进行添加。

# 集成自定义组件库

JeecgFlow产品为支持工作流业务开发,自定义了很多组件。在src/components文件夹下,命令为Custom。 需要我们将交付代码的文件夹进行复制到新项目中。

foo

集成之后的效果如上图,如此在页面中可以加载相应组件,简化开发。以上组件包括自研的高亮组件,以及子流程相关组件。

# 集成页面相关代码

这一部分是整个前端代码的核心,也是我们配置菜单的基础。 主要操作就是将交付于您的项目中src/views的camunda模块复制到 新项目中。

foo

复制之后的效果如图,后台配置菜单就以此为准。如果您需要二次开发也可以在此基础上进行扩展!

# Bpmn-js汉化教程

如果您不需要汉化,可以跳过这一步。Bpmn-Js汉化 (opens new window)

# 构建项目运行环境

# 初始化数据库

找到JeecgBoot项目下的db文件夹,并且找到jeecgboot-mysql-5.7.sql脚本文件。
在自己的数据库环境创建一个新的数据库:
Character Set: utf8mb4_general_ci
Collation: utf8mb4_general_ci

执行上述脚本,完成数据库的初始化。
注意: 流程引擎的相关表是应用启动后自动生成,以act_开头。并且mysql版本必须5.7+

 演示账号
 登录账号1:jeecg
 登录密码1:jeecg#123456

 登录账号2:admin
 登录密码2:123456

登陆后将密码进行修改哦!

# 修改application.yml配置

主要修改文件: application-dev.yml,application-test.yml,application-prod.yml

datasource:
    master:
      url: your-database?characterEncoding=UTF-8&useUnicode=true&useSSL=false&tinyInt1isBit=false&allowPublicKeyRetrieval=true&serverTimezone=Asia/Shanghai&nullCatalogMeansCurrent=true
      username: your-database-name
      password: your-database-password
      driver-class-name: com.mysql.cj.jdbc.Driver

修改mysql配置信息

redis:
    database: 0
    host: your-redis-address
    password: 'your-redis-password'
    port: 6379

修改redis配置

oss:
    endpoint: xx
    accessKey: xx
    secretKey: xx
    bucketName: markkkkdkd
    staticDomain: https://markkkkdkd.oss-cn-beijing.aliyuncs.com

官方目前是采用阿里云OSS, 如果您是使用七牛云或其他,请查询相关资料进行解决。

# 初始化角色用户菜单信息

用户与角色进行绑定,角色与菜单进行绑定。 即可以实现不同用户登陆看到不同的菜单。

foo

创建测试所需的角色,请参考camunda演示站 (opens new window)进行配置, 用管理员账号进行登陆.

foo

创建测试所需的用户,并且绑定上面创建的角色,请参考camunda演示站 (opens new window)进行配置, 用管理员账号进行登陆.

foo

创建测试所需的菜单,并且绑定上面创建的角色,请参考camunda演示站 (opens new window)进行配置, 用管理员账号进行登陆.

# 导出模型

在这我们以请假流程为例进行讲解,使用admin登陆系统后台,使用关羽账号登陆camunda演示站 (opens new window) 在模型管理下找到请假案例,点击右侧更多->设计

foo

# 导入模型

将上一个步骤导出的模型,在您自己的项目的模型管理页面点击导入模型。即可完成模型部署。

foo

# 发起流程

完成上述操作, 便可以在请假案例菜单中,发起流程进行审批啦

foo

官网的案例会不断增多,每一个流程案例我们会单独开一个菜单.
如果您想迁移到自己项目,操作步骤一样