情景:
由于activiti与系统应用主题样式出入较大,协商后决定将activiti的editor-app放在前台。
ps:主要iframe解决多项目集成,重写httpRequest添加token,但都2020年了,其实优选微前端方案集成。
步骤:
- 将activiti放在public即静态目录下。
- 通过iframe在相应的前台工作流界面引入activiti的model.html(最外层的主html,名字可能有出入)。
- mounted时将this,即vuecompoennt对象赋值给iframe,这样可以在保存后进行页面切换,或者某个接口回调后控制vue界面的状态。
mounted(){ window.getMyVue = this;//全局存入当前vue实例,供activiti调用 }
- 因为涉及到了权限问题,而通过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>
- 配置下url的config文件,通过network调试查看那个接口有问题,在activiti文件目录全局搜对应问题。
- 至此,已完成接入。
下面是自己做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格式的文件,导致无法展示界面。