Vue集成activity工作流

全栈程序员站长

发布于 2022-06-29 09:35:14

1.4K0

发布于 2022-06-29 09:35:14

文章被收录于专栏：全栈程序员必看全栈程序员必看

大家好，又见面了，我是你们的朋友全栈君。

情景：

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

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

步骤：

将activiti放在public即静态目录下。

通过iframe在相应的前台工作流界面引入activiti的model.html（最外层的主html，名字可能有出入）。

mounted时将this，即vuecompoennt对象赋值给iframe，这样可以在保存后进行页面切换，或者某个接口回调后控制vue界面的状态。

因为涉及到了权限问题，而通过iframe引入的页面本身不会跟我们系统的请求头一致，需要在页面主html文件加上下面一段代码。

配置下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格式的文件，导致无法展示界面。

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/132434.html原文链接：https://javaforall.cn

本文参与?腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2022年6月1，如有侵权请联系 cloudcommunity@tencent.com 删除

vue.js

本文分享自作者个人站点/博客?前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与?腾讯云自媒体分享计划? ，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度