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