精华内容
下载资源
问答
  • 宣传官网 http://xb.exrick.cn 在线Demo http://xboot.exrick.cn 开源版Github地址 https://github.com/Exrick/x-boot 开发文档 https://www.kancloud.cn/exrick/xboot/1009234 ... 集成Activ...
    • 宣传官网 http://xb.exrick.cn
    • 在线Demo http://xboot.exrick.cn
    • 开源版Github地址 https://github.com/Exrick/x-boot
    • 开发文档 https://www.kancloud.cn/exrick/xboot/1009234
    • 获取完整版 http://xpay.exrick.cn/pay?xboot
      在这里插入图片描述

    集成Activiti 5.22,考虑到文档资料较多未选用新版本(模型设计器改动较大)或Flowable

    整合Activiti 5.22

    • 添加依赖,因项目已使用Mybatis-Plus,需在这里排除其mybatis依赖
    <!-- Activiti -->
    <dependency>
        <groupId>org.activiti</groupId>
        <artifactId>activiti-spring-boot-starter-basic</artifactId>
        <version>5.22.0</version>
        <exclusions>
            <exclusion>
                <groupId>org.mybatis</groupId>
                <artifactId>mybatis</artifactId>
            </exclusion>
        </exclusions>
    </dependency>
    <!-- Activiti流程图 -->
    <dependency>
        <groupId>org.activiti</groupId>
        <artifactId>activiti-diagram-rest</artifactId>
        <version>5.22.0</version>
    </dependency>
    <!-- Activiti在线设计 -->
    <dependency>
        <groupId>org.activiti</groupId>
        <artifactId>activiti-modeler</artifactId>
        <version>5.22.0</version>
    </dependency>
    
    • 入口类排除Activiti的Security校验
    // Activiti5.22需要排除Security
    @SpringBootApplication(exclude = SecurityAutoConfiguration.class)
    public class XbootApplication {
    
        public static void main(String[] args) {
            SpringApplication.run(XbootApplication.class, args);
        }
    }
    
    • 配置参考
    # 工作流
    spring:
        activiti:
          check-process-definitions: false
          db-identity-used: true
          # 自动生成Activiti相关表 第一次生成后建议关闭提高运行速度
          database-schema-update: true
          # 保存历史数据级别设置为full最高级别,便于历史数据的追溯
          history-level: full
    

    整合模型设计器

    • 下载Activiti 5.22源码Source Code
      https://github.com/Activiti/Activiti/tree/activiti-5.22.0
      https://github.com/Activiti/Activiti/releases/tag/activiti-5.22.0
      -> https://github.com/Activiti/Activiti/archive/activiti-5.22.0.zip
    • 进入modules目录,拷贝图中圈出所需文件
      https://github.com/Activiti/Activiti/tree/activiti-5.22.0/modules
    • 其中stencilset.json可到网上找汉化版本替换,并确认该文件是否放到了resources目录下,如果不是需要修改StencilsetRestResource.java中"stencilset.json"为"xxx/stencilset.json",因此按上图配置此处需替换为InputStream stencilsetStream = this.getClass().getClassLoader().getResourceAsStream("static/stencilset.json");
    • 修改StencilsetRestResource.javaModelEditorJsonRestResource.javaModelSaveRestResource.java就是接口的请求路径前缀,加上@RequestMapping(“xxx”),XBoot中为/xboot/act
    • 接着修改对应app-cfg.js
    ACTIVITI.CONFIG = {'contextRoot' : '/xboot/act', };
    
    • 修改JsonpCallbackFilte.java加上@WebFilter("/xxx/*"),XBoot中为@WebFilter("/xboot/act/*")
    • ModelSaveRestResource.java参数修改
    public void saveModel(@PathVariable String modelId,
                          @RequestParam String name, @RequestParam String description,
                          @RequestParam String json_xml, @RequestParam String svg_xml)
    
    • 测试访问 localhost:8888/modeler.html?modelId=1会出现空白页,集成成功。由于modelId=1随意输入,后台并无id=1的数据,所以报错,具体新建一个模型的接口自行百度即可,当然也可付费获取完整版。
    展开全文
  • 作为没用过工作流的一员,之前看过vue引入activiti工作流的案例,但是组件中存在很多问题,这个是我修改过并且成功调用,大家可以供参考,富含Java代码(Jfinal),后续出spring版本的, 前台版本vue4.0版本, ...
  • 基于前后端分离项目引入activiti工作流引擎,某些配置信息需根据自己项目情况修改
  • Vue集成activity工作流

    万次阅读 热门讨论 2019-08-17 17:40:38
    情景: 由于activiti与系统应用主题样式出入较大,协商后决定将activiti的... 通过iframe在相应的前台工作流界面引入activiti的model.html(最外层的主html,名字可能有出入)。 mounted时将this,即vuecompo...

    情景:

    由于activiti与系统应用主题样式出入较大,协商后决定将activiti的editor-app放在前台。

    ps:主要iframe解决多项目集成,重写httpRequest添加token,但都2020年了,其实优选微前端方案集成。

    步骤:

    1. 将activiti放在public即静态目录下。
    2. 通过iframe在相应的前台工作流界面引入activiti的model.html(最外层的主html,名字可能有出入)。
    3. mounted时将this,即vuecompoennt对象赋值给iframe,这样可以在保存后进行页面切换,或者某个接口回调后控制vue界面的状态。
      mounted(){
          window.getMyVue = this;//全局存入当前vue实例,供activiti调用
      }
    4. 因为涉及到了权限问题,而通过iframe引入的页面本身不会跟我们系统的请求头一致,需要在页面主html文件加上下面一段代码。
      //model.html
      <script>
         (
          function(open){
          XMLHttpRequest.prototype.open = function(method,url,async,user,pass){
              open.call(this,method,url,async,user,pass);//this指XMLHttpRequest
              this.setRequestHeader("token",window.parent.getMyVue.token);//mounted时传入的token
          }
      	}
      	)(XMLHttpRequest.prototype.open)
      </script>

       

    5. 配置下url的config文件,通过network调试查看那个接口有问题,在activiti文件目录全局搜对应问题。
    6. 至此,已完成接入。

    下面是自己做activiti集成时的代码,供参考:

    //vue中引入activi代码

    <template>
        <div class="full-screen">
            <div class="main-section flex-column">
                <iframe ref="activit" width="100%" height="100%" :src="src" style="border:none"></iframe>
            </div>
        </div>
    </template>
    <script>
      import Api from '@/config';//服务器地址配置
      import Vue from 'vue';
      import {getToken} from '@/utils/auth';//登陆人的token
      export default{
        computed:{
            src(){
             return Api.preUrl + "/modeler.html?modelId=" + this.$store.modelId;//activiti主html路径 
            },
            apiUrl(){
            retirm Api.apiUrl + "/api-hclp-activiti-server";//后台部署的api服务
            },
            token(){
            return getToken();//token
        }
       },
        methods:{
        goto(){
        this.$message.success("保存模型成功");
        this.$router.push({name:"/sys/activiti"})    
    }    
    },
        mounted(){
        window.getMyVue = this;//全局存入当前vue实例,供activiti调用    
    }
    }
    </script>

    //修改activiti中app-cfg改变调用地址

    var ACTIVITI = ACTIVITI || {};
    ACTIVITI.CONFIG = {
        contextRoot:(function(){
        return window.parent.getMyVue.apiUrl;//上一步将vue实例传入的父窗口
        })()
    }

     

    toolbar-default-actions.js  文件是工具栏的控制函数,可在此文件内部调用vue的生命周期来完成业务中例如保存成功后的业务逻辑(如跳转页面)

     

    效果图:

    效果图

    开发途中遇到的问题:

    1.请求与vue不共享,不带请求头,需要手动在文件里扩展XMLHttpRequest。

    2.X/JSON报错,不影响开发。

    3.有个{model}/json的接口获取编辑器配置内容,起初因后台缺少某个json格式的文件,导致无法展示界面。

    展开全文
  • SpringBoot2.4.2+Vue集成Activiti6流程引擎

    千次阅读 2021-03-30 09:41:56
    基于以前做办公系统的经验,我就选择了activiti流程引擎,不过版本已经更新了好几个了,集成方式也变了。于是我开始找资料,大多都是后端集成的方式,包括前端代码也喜欢放在后端resources中,我感觉这种方式很不...

    一、背景

    最近因为项目需求,我们需要引入一个流程引擎框架。基于以前做办公系统的经验,我就选择了activiti流程引擎框架,不过版本已经更新了好几个了,前后端技术也更新了,集成方式也不同了。于是我开始找资料,发现大多都是后端集成的方式,包括前端代码也喜欢放在后端resources中,这是五年前的模式了,我感觉这种方式很不友好。况且,目前都采用前后端分离的架构模式,前端框架也比较成熟和流行,我们还把html放在后端,从前端、后端、部署三个层面都显的很鸡肋,后面零零散散找了一些资料,踩了很多坑,奋斗了几个晚上,终于集成完毕。因此写个博客记录一下,有描述不详细的地方,欢迎留言,我目前还留存一点记忆,可以解答,哈哈。

    二、前端集成

    2.1、搭建一个vue项目,将activiti6的前端代码放在public目录下(前端代码可以去官网下载)

    2.2、集成模型设计。新建一个vue文件,内容如下

    <template>
      <div style="position:relative;height: 100%;">
        <iframe
          id="iframe"
          :src="modelerUrl"
          frameborder="0"
          width="100%"
          height="720px"
          scrolling="auto"
        />
        <Spin v-if="modelerLoading" fix size="large" />
      </div>
    </template>
    
    <script>
    import { getToken } from '@/utils/auth'
    export default {
      name: 'ModelDefine',
      components: {},
    
      data() {
        return {
          modelerLoading: true,
          modelerUrl: '/static/modeler.html?modelId=' + this.$route.query.id + '&time=' + new Date().getTime()
        }
      },
      computed: {
        token() {
          return 'Bearer ' + getToken()
        }
      },
      created() {},
      mounted() {
        window.getMyVue = this
      },
      methods: {}
    }
    </script>
    <style lang="scss" scoped>
    .iframe {
      width: 100%;
      height: calc(100vh - 154px);
    }
    </style>
    

    结果如图:

    2.3、对接token。每个系统都有自己的登录逻辑,activiti前端支持对接项目的token。打开static/modeler.html添加一下代码

      <script>
        (
          function (open) {
            XMLHttpRequest.prototype.open = function (method, url, async, user, pass) {
              open.call(this, method, url, async, user, pass);  //this指XMLHttpRequest
              this.setRequestHeader("Authorization", window.parent.getMyVue.token); //mounted时传入的token
            };
          }
        )(XMLHttpRequest.prototype.open);
      </script>

    2.4、修改接口配置。activiti默认的api配置也是支持修改的,可以对应我们自己的业务系统的路由。打开static/editor-app/app-cfg.js

    完成上述几步,前端集成基本告一段落了,需要我们重写后台接口,完成模型的新建和保存。

    三、后端集成

    3.1、搭建一个springboot工程,本次使用的springboot2.4.2

    3.2、集成jar包

            <!-- activiti 流程引擎 -->
            <dependency>
                <groupId>org.activiti</groupId>
                <artifactId>activiti-engine</artifactId>
                <version>6.0.0</version>
                <exclusions>
                    <exclusion>
                        <groupId>org.mybatis</groupId>
                        <artifactId>mybatis</artifactId>
                    </exclusion>
                </exclusions>
            </dependency>
            <dependency>
                <groupId>org.activiti</groupId>
                <artifactId>activiti-json-converter</artifactId>
                <version>6.0.0</version>
            </dependency>
            <dependency>
                <groupId>org.activiti</groupId>
                <artifactId>activiti-spring-boot-starter-basic</artifactId>
                <version>6.0.0</version>
            </dependency>
    
            <dependency>
                <groupId>org.apache.xmlgraphics</groupId>
                <artifactId>batik-codec</artifactId>
                <version>1.7</version>
            </dependency>
            <dependency>
                <groupId>org.apache.xmlgraphics</groupId>
                <artifactId>batik-css</artifactId>
                <version>1.7</version>
            </dependency>
            <dependency>
                <groupId>org.apache.xmlgraphics</groupId>
                <artifactId>batik-svg-dom</artifactId>
                <version>1.7</version>
            </dependency>
            <dependency>
                <groupId>org.apache.xmlgraphics</groupId>
                <artifactId>batik-svggen</artifactId>
                <version>1.7</version>
            </dependency>

    3.3、配置activiti(springboot项目的yml文件)

    spring:
      activiti:
        check-process-definitions: false  # 自动检查、部署流程定义文件
        database-schema-update: true  # 自动更新数据库结构
        process-definition-location-prefix: classpath:/processes  # 流程定义文件存储目录

    3.4、重写新增模型接口

        /**
         * 新增模型
         * */
        @PostMapping("/add")
        public AjaxResult addModel(@RequestBody ModelEntityForAdd newModel){
            ObjectNode modelNode = objectMapper.createObjectNode();
            modelNode.put(MODEL_NAME, newModel.getName());
            modelNode.put(MODEL_DESCRIPTION, newModel.getDescription());
            modelNode.put(MODEL_REVISION, "1");
    
            Model model = repositoryService.newModel();
            model.setName(newModel.getName());
            model.setKey(newModel.getKey());
            model.setCategory(newModel.getCategory());
            model.setMetaInfo(modelNode.toString());
    
            repositoryService.saveModel(model);
            String id = model.getId();
    
            //完善ModelEditorSource
            ObjectNode editorNode = objectMapper.createObjectNode();
            editorNode.put("id", "canvas");
            editorNode.put("resourceId", "canvas");
            ObjectNode stencilSetNode = objectMapper.createObjectNode();
            stencilSetNode.put("namespace", "http://b3mn.org/stencilset/bpmn2.0#");
            editorNode.putPOJO("stencilset", stencilSetNode);
            repositoryService.addModelEditorSource(id, editorNode.toString().getBytes(StandardCharsets.UTF_8));
            return AjaxResult.success(id);
        }

    3.5、重写获取流程定义接口

    /**
         * 获取流程定义json数据
         *
         * @param modelId
         * @return
         */
        @GetMapping(value = "/{modelId}/json")
        public ObjectNode getEditorJson(@PathVariable String modelId) {
            ObjectNode modelNode = null;
    
            Model model = repositoryService.getModel(modelId);
    
            if (model != null) {
                try {
                    if (StringUtils.isNotEmpty(model.getMetaInfo())) {
                        modelNode = (ObjectNode) objectMapper.readTree(model.getMetaInfo());
                    } else {
                        modelNode = objectMapper.createObjectNode();
                        modelNode.put(MODEL_NAME, model.getName());
                    }
                    modelNode.put(MODEL_ID, model.getId());
                    byte[] modelEditorSource = repositoryService.getModelEditorSource(model.getId());
                    ObjectNode editorJsonNode = (ObjectNode) objectMapper.readTree(new String(modelEditorSource, StandardCharsets.UTF_8));
                    modelNode.putPOJO("model", editorJsonNode);
    
                } catch (Exception e) {
                    throw new ActivitiException("Error creating model JSON", e);
                }
            }
            return modelNode;
        }

    3.6、重写保存模型接口

    /**
         * 保存流程定义数据
         */
        @PutMapping(value = "/{modelId}/save")
        public void saveModel(@PathVariable String modelId, @RequestParam("name") String name, @RequestParam("json_xml") String json_xml,
                              @RequestParam("svg_xml") String svg_xml, @RequestParam("description") String description) {
            try {
                Model model = repositoryService.getModel(modelId);
    
                ObjectNode modelJson = (ObjectNode) objectMapper.readTree(model.getMetaInfo());
    
                modelJson.put(MODEL_NAME, name);
                modelJson.put(MODEL_DESCRIPTION, description);
                model.setMetaInfo(modelJson.toString());
                model.setName(name);
                model.setVersion(model.getVersion() + 1);
                repositoryService.saveModel(model);
    
                repositoryService.addModelEditorSource(model.getId(), Objects.requireNonNull(json_xml.getBytes(StandardCharsets.UTF_8)));
    
                InputStream svgStream = new ByteArrayInputStream(Objects.requireNonNull(svg_xml.getBytes(StandardCharsets.UTF_8)));
                TranscoderInput input = new TranscoderInput(svgStream);
    
                PNGTranscoder transcoder = new PNGTranscoder();
                // Setup output
                ByteArrayOutputStream outStream = new ByteArrayOutputStream();
                TranscoderOutput output = new TranscoderOutput(outStream);
    
                // Do the transformation
                transcoder.transcode(input, output);
                final byte[] result = outStream.toByteArray();
                repositoryService.addModelEditorSourceExtra(model.getId(), result);
                outStream.close();
    
            } catch (Exception e) {
                throw new ActivitiException("Error saving model", e);
            }
        }

    完成上述三个接口,再结合前端,就基本完成了模型的创建、编辑、保存了。至于后续的模型部署、流程实例等等,网上都有很多资料了。

    展开全文
  • activiti工作流,企业erp、oa、hr、crm等审批系统轻松落地,请假审批demo从流程绘制到审批结束实例。 一、项目形式 springboot+vue+activiti集成了activiti在线编辑器,快速开发平台,可插拔工作流服务。 二、...

    前言

    activiti工作流,企业erp、oa、hr、crm等审批系统轻松落地,请假审批demo从流程绘制到审批结束实例。

    一、项目形式

    springboot+vue+activiti集成了activiti在线编辑器,快速开发平台,可插拔工作流服务。

    二、项目介绍

    本项目拥有用户管理,部门管理,代码生成,系统监管,报表,大屏展示,业务审批等功能。功能太强大,只能粗矿的介绍,所见即所得,体验一下吧。

    三、工作流

    1.流程模型绘制

    进入流程模型菜单,创建流程模型,这里涉及到网关流转,需要设置流转条件,我们这里是三十岁以上的走下面分支,三十岁以下的走上面的分支。点击分支线,设置流转条件即可。${age<=30}。保存后我们在列表中点击发布即可。

    绘制流程

    设置流转条件

    在这里插入图片描述

    2.流程配置

    发布后,就到了已发布模型列表,在启用之前,我们需要先对进行节点设置和关联具体单据。

    已发布模型

    审批人员可以根据角色,直接指定人,部门,部门负责人,发起人部门负责人来进行配置,基本上满足所有的流转需求,并且可以设置表单变量。

    节点设置

    设置流程表单,目前就做了一个请假的测试表单,并且可以对相应角色授权,做到自定义权限。

    设置关联表单

    设置完后启动即可。

    3.流程提交

    填写请假表单

    填写表单发起申请

    列表

    提交单据,优先级分为普通,重要,紧急。消息通知可以选择站内通知,短信,邮件。

    提交表单

    提交之后可以撤回单据。

    撤回

    查看流程流转进度情况。

    查看流转进度

    也可以挂起,删除流程。

    挂起

    4.流程审批

    办理人审批列表,可以处理单据(驳回或者通过),也可以委托他人待办。

    审批待办

    审批通过。

    在这里插入图片描述

    委托他人待代。

    委托他人待办

    审批通过后进入已办列表。

    已办列表

    年龄大于30岁,进入下面分支流转。

    流程查看

    审批通过。

    审批通过

    5.待办信息推送

    站内消息推送。

    在这里插入图片描述

    总结

    上面只是展示了平台的审批流功能,还有其他很多功能没展示出来,自己也写了一些非常好用的组件,做到系统敏捷快速开发,大大减少开发时间和成本,目前正在对接移动端审批。之前由于没有时间去部署线上测试环境,考虑近期部署,目前可以单独找我,远程演示,有需要源码的联系我。q:2500564056。

    鸣谢: jeecgboot开源版JEECG官方网站 - 基于BPM的低代码开发平台 咖啡兔activiti实战咖啡兔的博客

    展开全文
  • 宣传官网 http://xb.exrick.cn 在线Demo http://xboot.exrick.cn 开源版Github地址 https://github.com/Exrick/x-boot 开发文档 https://www.kancloud.cn/exrick/xboot/1009234 获取完整版 ... ...
  • 宣传官网 xb.exrick.cn 在线Demo xboot.exrick.cn 开源版Github地址 github.com/Exrick/x-bo… ... Stomp是一种简单()文本定向消息协议,提供了一个可互操作的链接格式。允许stomp客户端与任意sto...
  • Stomp是一种简单()文本定向消息协议,提供了一个可互操作的链接格式。允许stomp客户端与任意stomp消息代理(Broker)进行交互。STOMP协议由于设计简单,易于开发客户端,因此在多种语言和多种平台上得到广泛地...
  • 项目详情:https://blog.csdn.net/weixin_41039677/article/details/117516337?spm=1001.2014.3001.5501
  • activiti工作流,企业erp、oa、hr、crm等审批系统轻松落地,请假审批demo从流程绘制到审批结束实例。 一、项目形式 springboot+vue+activiti集成了activiti在线编辑器,快速开发平台,可插拔工作流服务。 二、...
  • 我这个快速开发平台在系统基础功能(用户管理,部门管理…)上整合了工作流,你可以直接用来开发ERP,OA,CRM等企业级应用,不用再担心如何再去花大量的时间集成工作流进来。博主是个人开发者。研究工作流有几年了,...
  • QQ 313596790 官网:www.fhadmin.org 下载地址特别注意: Springboot 工作流 前后分离 + 跨域 版本 (权限控制到菜单和按钮)后台框架:springboot2.1.2+ activiti6.0.0+ mybaits+maven+接口前端页面:html +vue.js ...
  • java开发oa系统源码下载 平台简介 一直想做一款后台管理系统,看了很多优秀的开源项目但是发现没有合适的。于是利用空闲休息时间开始自己写了一套后台系统。如此有了若依。她可以用于所有的Web应用程序,如网站管理...
  • 代码介绍 -------------本商品为 :springcloud + Springboot 微服务\分布式 工作流 前后分离 + 跨域 版本 (权限控制到菜单和按钮)后台框架 :springcloud Greenwich.SR1 + springboot 2.1.4 + activiti6.0.0 + ...
  • 3.zuul网关路由服务:分发请求,统一管理过滤,结合 ribbon 负载均衡、 hystrix断路器 4.springboot-admin 监控中心服务:统一界面管理,查看各个服务运行状态 actuator健康检查 二:工作流服务 -------------------...
  • 特别注意:Springboot 工作流前后分离 + 跨域 版本 (权限控制到菜单和按钮) 后台框架:springboot2.1.2+activiti6.0.0+mybaits+maven+接口 前端页面:html +vue.js 形式 jquery ajax 异步跨域 json 格式数据交互...
  • 1、项目下载地址:链接: ... 2、项目导入之后的结构 3、修改db.properties,修改成自己的数据库, 4、修改activiti-custom-contetxt.xml 把defaultAutoCommit的value值修改成true,同时创建数据库的时候,一定...
  • 工作流引擎:Activiti 数据库连接池:druid 视图框架:spring mvc 持久层框架:MyBatis 模板引擎:freemarker 缓存:redis、ehcache 定时:quartz 2.3.0 前端页面:layui 博客前端:vue、iview 源...

空空如也

空空如也

1 2 3 4 5 ... 18
收藏数 357
精华内容 142
关键字:

vue集成activiti工作流

vue 订阅