activiti 前端代码地址：https://github.com/Funnyman-S/spring-boot-with-activiti-modeler/tree/master/src/main/resources/public
下载下来之后，将代码放到public文件夹下面。
步骤：
1.新建Vue文件
<template>
<div class="modeler">
<iframe :src="src" frameborder="0" class="iframe"></iframe>
</div>
</template>
<script>
import { mapGetters, mapState } from "vuex";
import api from "@/config/api";
export default {
data() {
return {
src: ""
};
},
components: {},
computed: {
...mapState("perModeler", {
modelId: state => state.modelId
}),
...mapGetters([
"token"
]),
// src() {
// return "/activiti1/modeler.html?modelId=" + this.modelId;// activiti主html路径
// },
apiUrl() {
return process.env.VUE_APP_API;// 后台部署的api服务
},
},
created() {
this.src = "/activiti1/modeler.html?modelId=" + this.modelId;
},
mounted() {
window.getMyVue = this;
},
methods: {}
};
</script>
<style lang="scss" scoped>
.iframe {
width: 100%;
height: calc(100vh - 154px);
}
</style>
2.找到activiti前端modeler.html文件，加上：
调接口使用你的系统的token。
<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>
3.找到app-cfg.js文件，修改接口地址（vue使用代理地址）
/*
* Activiti Modeler component part of the Activiti project
* Copyright 2005-2014 Alfresco Software, Ltd. All rights reserved.
*
* This library is free software; you can redistribute it and/or
* modify it under the terms of the GNU Lesser General Public
* License as published by the Free Software Foundation; either
* version 2.1 of the License, or (at your option) any later version.
*
* This library is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
* Lesser General Public License for more details.
* You should have received a copy of the GNU Lesser General Public
* License along with this library; if not, write to the Free Software
* Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA
*/
‘use strict‘;
var ACTIVITI = ACTIVITI || {};
ACTIVITI.CONFIG = {
‘contextRoot‘: window.parent.getMyVue.apiUrl + ‘/service‘, // vue文件中自己定义的代理地址，比如vue.config.js中的代理"apis"
};
vue,config.js:
devServer: {
host: "127.0.0.1",
hot: true,
port: 8000,
inline: true,
proxy: {
"/apis": {
// target: "http://888888888/",
changeOrigin: true,
pathRewrite: {
"/apis": "",
},
},
},
},
可能出现的问题;
1.打开页面显示不出样式，获取不到资源：检查路径是否正确，modeler.html下面的js、css资源是否可以获取到。
2.json请求文件报错，找到请求位置，检查路径是否正确。
3.渲染不出流程图，modelId是必带的参数，必带必带必带！！
最后：2021新年快乐！
原文：https://www.cnblogs.com/sxdjy/p/14384411.html