vue引入工作流bpmn-js

本文档记录了在Vue项目中引入bpmn-js工作流的步骤,包括如何初始化数据、模板,以及使用的关键功能如保存、上传、下载、撤销、恢复撤销、缩放等,并探讨了汉化过程。同时,作者诚邀读者提出建议,共同学习进步。
摘要由CSDN通过智能技术生成

#原因
因为工作要求引入工作流,所以采用了bpmn-js,官网上看了一下,结合网上搜索到的资料,做一个整理。

引入的方法

//先要npm install  bpmn-js bpmn-js-properties-panel camunda-bpmn-moddle这三个包
import Modeler from 'bpmn-js/lib/Modeler'
import propertiesPanelModule from 'bpmn-js-properties-panel'// 属性面板
import propertiesProviderModule from 'bpmn-js-properties-panel/lib/provider/camunda'
import camundaModdleDescriptor from 'camunda-bpmn-moddle/resources/camunda'// 扩展属性
//样式引入(工具栏和属性栏)
  @import 'node_modules/bpmn-js/dist/assets/diagram-js.css';
  @import ‘’node_modules/bpmn-js/dist/assets/bpmn-font/css/bpmn.css';
  @import 'node_modules/bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css';
  @import 'node_modules/bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css';
  @import 'node_modules/bpmn-js-properties-panel/dist/assets/bpmn-js-properties-panel.css';

#初始化数据

    async initData() {
      const vm = this
      vm.bpmnInfo.xmlStr = '<?xml version="1.0" encoding="UTF-8"?>\n' +
        '<bpmn2:definitions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmn2="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http
  • 3
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 10
    评论
Vue中使用bpmn-js可以通过以下几个步骤实现: 1. 首先,安装bpmn-js的依赖包。你可以使用npm或者yarn来进行安装,具体安装命令如下: ``` npm install bpmn-js ``` 或者 ``` yarn add bpmn-js ``` 2. 在Vue组件中引入bpmn-js的库文件。在你需要使用bpmn-js的组件中,可以使用import语句引入bpmn-js的库文件,具体代码如下: ``` import BpmnViewer from 'bpmn-js'; ``` 3. 创建一个容器来展示bpmn图。在你的Vue组件模板中,创建一个div元素作为容器来展示bpmn图,例如: ``` <div id="bpmn-container"></div> ``` 4. 在Vue组件的mounted钩子函数中初始化bpmn-js。在Vue组件的mounted钩子函数中,可以使用bpmn-js的构造函数来初始化bpmn-js,并将其绑定到之前创建的容器上,具体代码如下: ``` mounted() { const container = document.getElementById('bpmn-container'); const viewer = new BpmnViewer({ container }); // 加载和显示bpmn图的代码 } ``` 5. 加载和显示bpmn图。在初始化bpmn-js之后,你可以使用load方法加载和显示一个bpmn图。load方法接受一个bpmn图的XML字符串作为参数,具体代码如下: ``` viewer.importXML(/* bpmn图的XML字符串 */); ``` 6. 最后,你可以根据需要对bpmn图进行进一步的操作和处理,比如增加交互事件或者自定义样式等。 需要注意的是,上述代码只是一个示例,实际使用bpmn-js可能还需要更多的配置和处理。你可以根据具体的需求进行进一步的学习和开发。 引用: 'Id': '编号', 'Name': '名称', 'General': '常规', 'Details': '详情', 'Message Name': '消息名称', 'Message': '消息', 'Initiator': '创建者', 'Asynchronous continuations': '持续异步', 'Asynchronous before': '异步前', 'Asynchronous after': '异步后', 'Job configuration': '工作配置', 'Exclusive': '排除', 'Job Priority': '工作优先级', 'Retry Time Cycle': '重试时间周期', 'Documentation': '文档', 'Element Documentation': '元素文档', 'History Configuration': '历史配置', 'History Time To Live': '历史的生存时间', 'Forms': '表单',<span class="em">1</span> #### 引用[.reference_title] - *1* [bpmn-jsvue中的基本使用](https://blog.csdn.net/qq_43519131/article/details/127985956)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]
评论 10
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值