VUE集成activiti工作流（1）activiti工作流引擎项目，企业erp、oa、hr、crm等企事业办公系统都可

activiti工作流引擎项目，企业erp、oa、hr、crm等企事业办公系统都可以通过activiti将其轻松落地。下面，用springboot+vue集成activiti在线编辑器，运用流行的前后端分离部署开发模式，快速开发平台，进行可插拔的工作流服务。相关集成步骤如下：

将activiti放在public即静态目录下。
通过iframe在相应的前台工作流界面引入activiti的model.html（最外层的主html，名字可能有出入）。
mounted时将this，即vuecompoennt对象赋值给iframe，这样可以在保存后进行页面切换，或者某个接口回调后控制vue界面的状态。
```
mounted(){
    this.$refs.iframe.contentWindow.vue=this
}
```

因为涉及到了权限问题，而通过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.vue.token);//mounted时传入的token
    }
}
)(XMLHttpRequest.prototype.open)
</script>

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

开发途中遇到的问题：

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

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

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

这上面便是vue集成activiti工作流的一个简要过程，大家可以去动手实践下。这有一个地址，大家可以很便捷高效的进行各种工作流的集成、开发和运用。点击VUE集成activiti工作流