workflow-bpmn-modeler 使用教程

最新推荐文章于 2024-09-13 22:05:47 发布

刘冶琳Maddox

最新推荐文章于 2024-09-13 22:05:47 发布

阅读量800

点赞数 24

本文链接：https://blog.csdn.net/gitblog_00697/article/details/141046775

版权

workflow-bpmn-modeler 使用教程

项目地址:https://gitcode.com/gh_mirrors/wo/workflow-bpmn-modeler

项目介绍

workflow-bpmn-modeler 是一个基于 Vue 和 bpmn.io@7.0 实现的工作流设计器，专门用于 Flowable 的流程设计。该项目提供了一个直观的界面，使用户能够轻松地设计和管理业务流程。通过集成 Vue 和 bpmn.io，它不仅提供了强大的功能，还确保了良好的用户体验和开发效率。

项目快速启动

安装

首先，你需要通过 Yarn 安装 workflow-bpmn-modeler：

yarn add workflow-bpmn-modeler

使用

在你的 Vue 项目中，你可以这样使用 bpmn-modeler 组件：

<template>
  <div>
    <bpmn-modeler ref="refNode" :xml="xml" :users="users" :groups="groups" :categorys="categorys" :is-view="false" @save="save" />
  </div>
</template>

<script>
import bpmnModeler from "workflow-bpmn-modeler";

export default {
  components: {
    bpmnModeler
  },
  data() {
    return {
      xml: "", // 后端查询到的xml
      users: [
        { name: "张三", id: "zhangsan" },
        { name: "李四", id: "lisi" },
        { name: "王五", id: "wangwu" }
      ],
      groups: [
        { name: "开发组", id: "dev" },
        { name: "测试组", id: "test" },
        { name: "产品组", id: "product" }
      ],
      categorys: [
        { name: "项目管理", id: "project" },
        { name: "日常工作", id: "daily" },
        { name: "其他", id: "other" }
      ]
    };
  },
  methods: {
    save(data) {
      console.log("保存的数据:", data);
    }
  }
};
</script>