flowable + vue3样例

以下是使用 Flowable 和 Vue3 搭建的一个简单示例：

1. 安装 Flowable Modeler

首先，需要安装 Flowable Modeler。可以从 Flowable 官方网站下载最新版本的 Flowable Modeler。安装好后，启动 Flowable Modeler。

2. 创建一个 Flowable 流程

在 Flowable Modeler 中创建一个简单的流程。可以使用以下步骤：

- 点击左侧工具栏中的“Process Diagram”按钮，创建一个新的流程。
- 在画布上添加几个任务节点，例如用户任务、服务任务和网关。
- 将这些节点连接起来，形成一个流程。

3. 导出 Flowable 流程

完成流程设计后，可以将其导出为 BPMN 2.0 文件。将导出的文件保存到本地磁盘。

4. 创建 Vue3 应用程序

使用 Vue CLI 创建一个新的 Vue3 应用程序。可以使用以下命令：

vue create flowable-vue3

5. 安装 Flowable 和相关依赖

进入新创建的应用程序目录，并安装 Flowable 和相关依赖。可以使用以下命令：

cd flowable-vue3
npm install --save flowable-js-modeler flowable-js-task

6. 加载 Flowable 流程

在 Vue3 应用程序中加载导出的 BPMN 2.0 文件。可以使用以下代码：

import FlowableModeler from 'flowable-js-modeler';

const modeler = new FlowableModeler({
  container: '#modeler',
});

modeler.load({
  url: 'path/to/your/bpmn/file.bpmn',
});

7. 添加 Flowable 任务列表

在 Vue3 应用程序中添加一个 Flowable 任务列表，以显示用户的待办任务。可以使用以下代码：

<template>
  <div>
    <h1>My Tasks</h1>
    <ul>
      <li v-for="task in tasks" :key="task.id">{{ task.name }}</li>
    </ul>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';
import FlowableTask from 'flowable-js-task';

export default {
  setup() {
    const tasks = ref([]);

    onMounted(() => {
      const taskService = new FlowableTask.TaskService({
        apiUri: 'http://localhost:8080/flowable-task/process-api',
      });

      taskService.getTasks({
        assignee: 'kermit',
      }).then((result) => {
        tasks.value = result.data;
      });
    });

    return {
      tasks,
    };
  },
};
</script>

上述代码将通过 Flowable 任务 API 获取分配给“kermit”用户的所有任务，并在页面上显示它们的名称。

8. 运行 Vue3 应用程序

最后，使用以下命令启动 Vue3 应用程序：

npm run serve

现在可以通过浏览器访问应用程序，在屏幕上显示 Flowable 流程并查看 Flowable 任务列表。