vue 集成 activiti

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新年快乐！