SpringBoot2.4.2+Vue集成Activiti6流程引擎

一、背景

最近因为项目需求，我们需要引入一个流程引擎框架。基于以前做办公系统的经验，我就选择了activiti流程引擎框架，不过版本已经更新了好几个了，前后端技术也更新了，集成方式也不同了。于是我开始找资料，发现大多都是后端集成的方式，包括前端代码也喜欢放在后端resources中，这是五年前的模式了，我感觉这种方式很不友好。况且，目前都采用前后端分离的架构模式，前端框架也比较成熟和流行，我们还把html放在后端，从前端、后端、部署三个层面都显的很鸡肋，后面零零散散找了一些资料，踩了很多坑，奋斗了几个晚上，终于集成完毕。因此写个博客记录一下，有描述不详细的地方，欢迎留言，我目前还留存一点记忆，可以解答，哈哈。

二、前端集成

2.1、搭建一个vue项目，将activiti6的前端代码放在public目录下（前端代码可以去官网下载）

2.2、集成模型设计。新建一个vue文件，内容如下

<template>
  <div style="position:relative;height: 100%;">
    <iframe
      id="iframe"
      :src="modelerUrl"
      frameborder="0"
      width="100%"
      height="720px"
      scrolling="auto"
    />
    <Spin v-if="modelerLoading" fix size="large" />
  </div>
</template>

<script>
import { getToken } from '@/utils/auth'
export default {
  name: 'ModelDefine',
  components: {},

  data() {
    return {
      modelerLoading: true,
      modelerUrl: '/static/modeler.html?modelId=' + this.$route.query.id + '&time=' + new Date().getTime()
    }
  },
  computed: {
    token() {
      return 'Bearer ' + getToken()
    }
  },
  created() {},
  mounted() {
    window.getMyVue = this
  },
  methods: {}
}
</script>
<style lang="scss" scoped>
.iframe {
  width: 100%;
  height: calc(100vh - 154px);
}
</style>

结果如图：