devbox
笔触狂放9
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

VUE+bpmn.js+iview 页面绘制流程图_bpmn-vue-iview

作者：笔触狂放9 | 2024-04-18 15:03:45

赞

踩

bpmn-vue-iview

前言：业务需求需要在页面绘制流程图，之前后台的同事都是在eclipse画的流程图，为了方便点希望能在页面上画。

我用的是iview的ui框架，用原生的话记得把按钮等标签改改。

如果用的是element-ui的话，可以到这里看看，有中文文档和特别完善的bpmn+element-ui的项目：https://blog.csdn.net/weixin_43359503/article/details/113915655

在百度取经的过程中，发现右侧的工具栏有的内容很少，有的比较全。研究之后发现是安装版本的问题，为了满足需求，工具栏当然是越多越好！

注意：并不是最新版本的就是最好的，最新版本的反而功能更少

这是较新版本的：

这是特定版本的：

 1、 先安装bpmn相关依赖

 npm install bpmn-js@7.3.1
 npm install bpmn-js-properties-panel@0.37.2
 npm install camunda-bpmn-moddle@4.4.0

注意：版本不对会出现 报错 unhandled error in event listener TypeError: bo.get is not a function

2、准备相关js文件，汉化等，文件存放的位置和在vue文件中引入时需要根据你自己的实际情况来写。这三个文件我是放在同一目录下的

（1）translations.js

  1. export default {
  2.   // Labels
  3.   'Activate the global connect tool': '激活全局连接工具',
  4.   'Append {type}': '添加 {type}',
  5.   'Add Lane above': '在上面添加道',
  6.   'Divide into two Lanes': '分割成两个道',
  7.   'Divide into three Lanes': '分割成三个道',
  8.   'Add Lane below': '在下面添加道',
  9.   'Append compensation activity': '追加补偿活动',
  10.   'Change type': '修改类型',
  11.   'Connect using Association': '使用关联连接',
  12.   'Connect using Sequence/MessageFlow or Association': '使用顺序/消息流或者关联连接',
  13.   'Connect using DataInputAssociation': '使用数据输入关联连接',
  14.   Remove: '移除',
  15.   'Activate the hand tool': '激活抓手工具',
  16.   'Activate the lasso tool': '激活套索工具',
  17.   'Activate the create/remove space tool': '激活创建/删除空间工具',
  18.   'Create expanded SubProcess': '创建扩展子过程',
  19.   'Create IntermediateThrowEvent/BoundaryEvent': '创建中间抛出事件/边界事件',
  20.   'Create Pool/Participant': '创建池/参与者',
  21.   'Parallel Multi Instance': '并行多重事件',
  22.   'Sequential Multi Instance': '时序多重事件',
  23.   DataObjectReference: '数据对象参考',
  24.   DataStoreReference: '数据存储参考',
  25.   Loop: '循环',
  26.   'Ad-hoc': '即席',
  27.   'Create {type}': '创建 {type}',
  28.   Task: '任务',
  29.   'Send Task': '发送任务',
  30.   'Receive Task': '接收任务',
  31.   'User Task': '用户任务',
  32.   'Manual Task': '手工任务',
  33.   'Business Rule Task': '业务规则任务',
  34.   'Service Task': '服务任务',
  35.   'Script Task': '脚本任务',
  36.   'Call Activity': '调用活动',
  37.   'Sub Process (collapsed)': '子流程（折叠的）',
  38.   'Sub Process (expanded)': '子流程（展开的）',
  39.   'Start Event': '开始事件',
  40.   StartEvent: '开始事件',
  41.   'Intermediate Throw Event': '中间事件',
  42.   'End Event': '结束事件',
  43.   EndEvent: '结束事件',
  44.   'Create Gateway': '创建网关',
  45.   'Create Intermediate/Boundary Event': '创建中间/边界事件',
  46.   'Message Start Event': '消息开始事件',
  47.   'Timer Start Event': '定时开始事件',
  48.   'Conditional Start Event': '条件开始事件',
  49.   'Signal Start Event': '信号开始事件',
  50.   'Error Start Event': '错误开始事件',
  51.   'Escalation Start Event': '升级开始事件',
  52.   'Compensation Start Event': '补偿开始事件',
  53.   'Message Start Event (non-interrupting)': '消息开始事件（非中断）',
  54.   'Timer Start Event (non-interrupting)': '定时开始事件（非中断）',
  55.   'Conditional Start Event (non-interrupting)': '条件开始事件（非中断）',
  56.   'Signal Start Event (non-interrupting)': '信号开始事件（非中断）',
  57.   'Escalation Start Event (non-interrupting)': '升级开始事件（非中断）',
  58.   'Message Intermediate Catch Event': '消息中间捕获事件',
  59.   'Message Intermediate Throw Event': '消息中间抛出事件',
  60.   'Timer Intermediate Catch Event': '定时中间捕获事件',
  61.   'Escalation Intermediate Throw Event': '升级中间抛出事件',
  62.   'Conditional Intermediate Catch Event': '条件中间捕获事件',
  63.   'Link Intermediate Catch Event': '链接中间捕获事件',
  64.   'Link Intermediate Throw Event': '链接中间抛出事件',
  65.   'Compensation Intermediate Throw Event': '补偿中间抛出事件',
  66.   'Signal Intermediate Catch Event': '信号中间捕获事件',
  67.   'Signal Intermediate Throw Event': '信号中间抛出事件',
  68.   'Message End Event': '消息结束事件',
  69.   'Escalation End Event': '定时结束事件',
  70.   'Error End Event': '错误结束事件',
  71.   'Cancel End Event': '取消结束事件',
  72.   'Compensation End Event': '补偿结束事件',
  73.   'Signal End Event': '信号结束事件',
  74.   'Terminate End Event': '终止结束事件',
  75.   'Message Boundary Event': '消息边界事件',
  76.   'Message Boundary Event (non-interrupting)': '消息边界事件（非中断）',
  77.   'Timer Boundary Event': '定时边界事件',
  78.   'Timer Boundary Event (non-interrupting)': '定时边界事件（非中断）',
  79.   'Escalation Boundary Event': '升级边界事件',
  80.   'Escalation Boundary Event (non-interrupting)': '升级边界事件（非中断）',
  81.   'Conditional Boundary Event': '条件边界事件',
  82.   'Conditional Boundary Event (non-interrupting)': '条件边界事件（非中断）',
  83.   'Error Boundary Event': '错误边界事件',
  84.   'Cancel Boundary Event': '取消边界事件',
  85.   'Signal Boundary Event': '信号边界事件',
  86.   'Signal Boundary Event (non-interrupting)': '信号边界事件（非中断）',
  87.   'Compensation Boundary Event': '补偿边界事件',
  88.   'Exclusive Gateway': '互斥网关',
  89.   'Parallel Gateway': '并行网关',
  90.   'Inclusive Gateway': '相容网关',
  91.   'Complex Gateway': '复杂网关',
  92.   'Event based Gateway': '事件网关',
  93.   Transaction: '转运',
  94.   'Sub Process': '子流程',
  95.   'Event Sub Process': '事件子流程',
  96.   'Collapsed Pool': '折叠池',
  97.   'Expanded Pool': '展开池',
  98.  
  99.   // Errors
  100.   'no parent for {element} in {parent}': '在{parent}里，{element}没有父类',
  101.   'no shape type specified': '没有指定的形状类型',
  102.   'flow elements must be children of pools/participants': '流元素必须是池/参与者的子类',
  103.   'out of bounds release': 'out of bounds release',
  104.   'more than {count} child lanes': '子道大于{count} ',
  105.   'element required': '元素不能为空',
  106.   'diagram not part of bpmn:Definitions': '流程图不符合bpmn规范',
  107.   'no diagram to display': '没有可展示的流程图',
  108.   'no process or collaboration to display': '没有可展示的流程/协作',
  109.   'element {element} referenced by {referenced}#{property} not yet drawn':
  110.     '由{referenced}#{property}引用的{element}元素仍未绘制',
  111.   'already rendered {element}': '{element} 已被渲染',
  112.   'failed to import {element}': '导入{element}失败',
  113.   // 属性面板的参数
  114.   Id: '编号',
  115.   Name: '名称',
  116.   General: '常规',
  117.   Details: '详情',
  118.   'Message Name': '消息名称',
  119.   Message: '消息',
  120.   Initiator: '创建者',
  121.   'Asynchronous Continuations': '持续异步',
  122.   'Asynchronous Before': '异步前',
  123.   'Asynchronous After': '异步后',
  124.   'Job Configuration': '工作配置',
  125.   Exclusive: '排除',
  126.   'Job Priority': '工作优先级',
  127.   'Retry Time Cycle': '重试时间周期',
  128.   Documentation: '文档',
  129.   'Element Documentation': '元素文档',
  130.   'History Configuration': '历史配置',
  131.   'History Time To Live': '历史的生存时间',
  132.   Forms: '表单',
  133.   'Form Key': '表单key',
  134.   'Form Fields': '表单字段',
  135.   'Business Key': '业务key',
  136.   'Form Field': '表单字段',
  137.   ID: '编号',
  138.   Type: '类型',
  139.   Label: '名称',
  140.   'Default Value': '默认值',
  141.   Validation: '校验',
  142.   'Add Constraint': '添加约束',
  143.   Config: '配置',
  144.   Properties: '属性',
  145.   'Add Property': '添加属性',
  146.   Value: '值',
  147.   Listeners: '监听器',
  148.   'Execution Listener': '执行监听',
  149.   'Event Type': '事件类型',
  150.   'Listener Type': '监听器类型',
  151.   'Java Class': 'Java类',
  152.   Expression: '表达式',
  153.   'Must provide a value': '必须提供一个值',
  154.   'Delegate Expression': '代理表达式',
  155.   Script: '脚本',
  156.   'Script Format': '脚本格式',
  157.   'Script Type': '脚本类型',
  158.   'Inline Script': '内联脚本',
  159.   'External Script': '外部脚本',
  160.   Resource: '资源',
  161.   'Field Injection': '字段注入',
  162.   Extensions: '扩展',
  163.   'Input/Output': '输入/输出',
  164.   'Input Parameters': '输入参数',
  165.   'Output Parameters': '输出参数',
  166.   Parameters: '参数',
  167.   'Output Parameter': '输出参数',
  168.   'Timer Definition Type': '定时器定义类型',
  169.   'Timer Definition': '定时器定义',
  170.   Date: '日期',
  171.   Duration: '持续',
  172.   Cycle: '循环',
  173.   Signal: '信号',
  174.   'Signal Name': '信号名称',
  175.   Escalation: '升级',
  176.   Error: '错误',
  177.   'Link Name': '链接名称',
  178.   Condition: '条件名称',
  179.   'Variable Name': '变量名称',
  180.   'Variable Event': '变量事件',
  181.   'Specify more than one variable change event as a comma separated list.':
  182.     '多个变量事件以逗号隔开',
  183.   'Wait for Completion': '等待完成',
  184.   'Activity Ref': '活动参考',
  185.   'Version Tag': '版本标签',
  186.   Executable: '可执行文件',
  187.   'External Task Configuration': '扩展任务配置',
  188.   'Task Priority': '任务优先级',
  189.   External: '外部',
  190.   Connector: '连接器',
  191.   'Must configure Connector': '必须配置连接器',
  192.   'Connector Id': '连接器编号',
  193.   Implementation: '实现方式',
  194.   'Field Injections': '字段注入',
  195.   Fields: '字段',
  196.   'Result Variable': '结果变量',
  197.   Topic: '主题',
  198.   'Configure Connector': '配置连接器',
  199.   'Input Parameter': '输入参数',
  200.   Assignee: '代理人',
  201.   'Candidate Users': '候选用户',
  202.   'Candidate Groups': '候选组',
  203.   'Due Date': '到期时间',
  204.   'Follow Up Date': '跟踪日期',
  205.   'Specify more than one group as a comma separated list.': '多个用户使用逗号隔开',
  206.   Priority: '优先级',
  207.   // eslint-disable-next-line no-template-curly-in-string
  208.   'The follow up date as an EL expression (e.g. ${someDate} or an ISO date (e.g. 2015-06-26T09:54:00)':
  209.     '跟踪日期必须符合EL表达式，如： ${someDate} ,或者一个ISO标准日期，如：2015-06-26T09:54:00',
  210.   // eslint-disable-next-line no-template-curly-in-string
  211.   'The due date as an EL expression (e.g. ${someDate} or an ISO date (e.g. 2015-06-26T09:54:00)':
  212.     '跟踪日期必须符合EL表达式，如： ${someDate} ,或者一个ISO标准日期，如：2015-06-26T09:54:00',
  213.   Variables: '变量',
  214.   'Candidate Starter Users': '选择启动候选人',
  215.   'Candidate Starter Configuration': '候选人启动器配置',
  216.   'Candidate Starter Groups': '候选人启动组',
  217.   'This maps to the process definition key.': '编号将映射到流程主键.',
  218.  
  219.   save: '保存',
  220.   Tools: '工具',
  221.   FlowGateway: '流程网关',
  222.   ProcessControl: '流程节点',
  223.   'Create StartEvent': '开始节点',
  224.   'Create EndEvent': '结束节点',
  225.   'Create ExclusiveGateway': '互斥网关',
  226.   'Create ParallelGateway': '并行网关',
  227.   'Create Task': '任务节点',
  228.   'Create UserTask': '用户任务节点',
  229.   'Condition Type': '条件类型',
  230.  
  231.   // 左侧工具箱补充汉化项 热水2020.1.12
  232.   'Create Group': '创建组',
  233.   'Create DataObjectReference': '创建数据对象引用',
  234.   'Create DataStoreReference': '创建数据存储引用',
  235.  
  236.   // 节点添加Pad 补充汉化 热水2020.1.12
  237.   'Append EndEvent': '追加结束事件节点',
  238.   'Append Gateway': '追加网关节点',
  239.   'Append UserTask': '追加用户任务节点',
  240.   'Append Intermediate/Boundary Event': '追加中间或边界事件',
  241.   'Append TextAnnotation': '追加文本批注' // 此句要有效，必须在CustomContexPadProvide给此节点增加一个translate('Append TextAnnotation')
  242. }

(2)customTranslate.js

  1. import translations from './translations';
  2.  
  3.  
  4. export default function customTranslate(template, replacements) {undefined
  5.   replacements = replacements || {};
  6.  
  7.   // Translate
  8.   template = translations[template] || template;
  9.  
  10.   // Replace
  11.   return template.replace(/{([^}]+)}/g, function(_, key) {undefined
  12.     return replacements[key] || '{' + key + '}';
  13.   });
  14. }

（3）生成流程图的默认模板  defaultXmlStr.js

  1. export var xmlStr = `
  2. <?xml version="1.0" encoding="UTF-8"?>
  3.   <bpmn2:definitions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  4.         xmlns:bpmn2="http://www.omg.org/spec/BPMN/20100524/MODEL"
  5.         xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI"
  6.         xmlns:dc="http://www.omg.org/spec/DD/20100524/DC"
  7.         id="sample-diagram"
  8.         targetNamespace="http://bpmn.io/schema/bpmn"
  9.         xsi:schemaLocation="http://www.omg.org/spec/BPMN/20100524/MODEL BPMN20.xsd">
  10.   <bpmn2:process id="Process_1" isExecutable="false">
  11.     <bpmn2:startEvent id="StartEvent_1" />
  12.   </bpmn2:process>
  13.   <bpmndi:BPMNDiagram id="BPMNDiagram_1">
  14.     <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1">
  15.       <bpmndi:BPMNShape id="_BPMNShape_StartEvent_2" bpmnElement="StartEvent_1">
  16.         <dc:Bounds x="192" y="82" width="36" height="36" />
  17.       </bpmndi:BPMNShape>
  18.     </bpmndi:BPMNPlane>
  19.   </bpmndi:BPMNDiagram>
  20. </bpmn2:definitions>`

（4）vue文件

  1. <template>
  2.  
  3.   <div class="containers" ref="content">
  4.     <div class="button-row">
  5.       <Upload :file-list="uploadBpmnFileList" :before-upload="beforeUpload" action="">
  6.         <Button class="button" type="warning">
  7.           导入BPMN
  8.         </Button>
  9.       </Upload>
  10.       <Button @click="downloadBpmn" class="button" type="success">
  11.         保存BPMN
  12.       </Button>
  13.       <!-- <Button @click="downloadXml" class="button" icon="md-download" type="success">
  14.         保存XML
  15.       </Button> -->
  16.       <Button @click="downloadSvg" class="button" type="success">
  17.         保存SVG
  18.       </Button>
  19.  
  20.       <Button @click="showXml"  class="button"  type="primary">
  21.         预览xml
  22.       </Button>
  23.  
  24.  
  25.       <ButtonGroup class="button">
  26.         <Button @click="handlerUndo">撤销</Button>
  27.         <Button @click="handlerRedo">恢复</Button>
  28.       </ButtonGroup>
  29.  
  30.       <ButtonGroup>
  31.         <Button @click="handlerZoom(0.1)">放大</Button>
  32.         <Button @click="handlerZoom(-0.1)">缩小</Button>
  33.         <Button @click="handlerZoom(0)">还原</Button>
  34.       </ButtonGroup>
  35.  
  36.       <a hidden ref="downloadLink"></a>
  37.     </div>
  38.  
  39.     <div class="canvas" ref="canvas"></div>
  40.     <div id="js-properties-panel" class="panel"></div>
  41.  
  42.     <Modal title="预览" v-model="showXmlModal"  fullscreen :mask-closable="false">
  43.        <!-- <xmp><div v-text="xmlData"></div></xmp> -->
  44.       <pre><div v-text="xmlData"></div></pre>
  45.  
  46.       <div slot="footer"></div>
  47.  
  48.     </Modal>
  49.  
  50.  
  51.  
  52.   </div>
  53.  
  54. </template>
  55.  
  56. <script>
  57.   import BpmnModeler from 'bpmn-js/lib/Modeler'
  58.  
  59.   import propertiesPanelModule from 'bpmn-js-properties-panel'
  60.   import propertiesProviderModule from 'bpmn-js-properties-panel/lib/provider/camunda'
  61.   import camundaModdleDescriptor from 'camunda-bpmn-moddle/resources/camunda'
  62.  
  63.   // BPMN国际化
  64.   import customTranslate from '@/lib/customTranslate';
  65.   // 自定义汉化模块
  66.   var customTranslateModule = {
  67.     translate: ['value', customTranslate]
  68.   };
  69.  
  70.   import {
  71.     xmlStr
  72.   } from '@/lib/defaultXmlStr';
  73.  
  74.   export default {
  75.     components: {},
  76.     data() {
  77.       return {
  78.         bpmnModeler: null,
  79.         container: null,
  80.         canvas: null,
  81.  
  82.         uploadBpmnFileList: [],
  83.         scale: 1,
  84.         showXmlModal: false,
  85.         xmlData: "",
  86.  
  87.       }
  88.     },
  89.     created() {
  90.  
  91.     },
  92.     mounted() {
  93.       this.init();
  94.          // 删除 bpmn logo  bpmn.io官方要求不给删或者隐藏，否则侵权   内部使用
  95.         // const bjsIoLogo = document.querySelector('.bjs-powered-by')
  96.         // while (bjsIoLogo.firstChild) {
  97.         // bjsIoLogo.removeChild(bjsIoLogo.firstChild)}
  98.     },
  99.     methods: {
  100.  
  101.       /**
  102.        * 初始化流程设计器对象
  103.        * @returns {Promise<void>}
  104.        */
  105.       async init() {
  106.         // 获取到属性ref为“content”的dom节点
  107.         this.container = this.$refs.content
  108.         // 获取到属性ref为“canvas”的dom节点
  109.         const canvas = this.$refs.canvas
  110.         // 创建BpmnModeler
  111.         this.bpmnModeler = new BpmnModeler({
  112.           container: canvas,
  113.           // 加入工具栏支持
  114.           propertiesPanel: {
  115.             parent: '#js-properties-panel'
  116.           },
  117.           additionalModules: [
  118.             // 左边工具栏以及节点
  119.             propertiesProviderModule,
  120.             // 右边的工具栏
  121.             propertiesPanelModule,
  122.             // 国际化
  123.             customTranslateModule,
  124.             // camundaModdleDescriptor
  125.           ],
  126.           moddleExtensions: {
  127.             // bpmn: bpmnModdleDescriptor
  128.             camunda: camundaModdleDescriptor
  129.  
  130.           }
  131.         });
  132.         // 创建新流程
  133.         await this.createNewDiagram(xmlStr);
  134.        
  135.     },
  136.       
  137.  
  138.       /**
  139.        * 创建新流程
  140.        * @param bpmn BPMN流程XML报文
  141.        * @returns {Promise<void>}
  142.        */
  143.       async createNewDiagram(bpmn) {
  144.         // 将字符串转换成图显示出来;
  145.         this.bpmnModeler.importXML(bpmn, err => {
  146.           if (err) {
  147.             console.log('err', err);
  148.  
  149.             this.$Message.error('打开模型出错,请确认该模型符合Bpmn2.0规范');
  150.           } else {
  151.             console.log("成功导入模型");
  152.           }
  153.         });
  154.       },
  155.  
  156.       handlerRedo() {
  157.         this.bpmnModeler.get("commandStack").redo();
  158.       },
  159.       handlerUndo() {
  160.         this.bpmnModeler.get("commandStack").undo();
  161.       },
  162.       handlerZoom(radio) {
  163.         const newScale = !radio ? 1.0 : this.scale + radio;
  164.         this.bpmnModeler.get("canvas").zoom(newScale);
  165.         this.scale = newScale;
  166.       },
  167.  
  168.       beforeUpload(file) {
  169.         // this.uploadBpmnFileList = [];
  170.         this.openBpmn(file);
  171.         return false;
  172.       },
  173.  
  174.  
  175.       openBpmn(file) {
  176.         const reader = new FileReader();
  177.         // 读取File对象中的文本信息，编码格式为UTF-8
  178.         reader.readAsText(file, "utf-8");
  179.         reader.onload = () => {
  180.           // 读取完毕后将文本信息导入到Bpmn建模器
  181.           this.createNewDiagram(reader.result);
  182.         };
  183.         return false;
  184.       },
  185.  
  186.       downloadBpmn() {
  187.         this.bpmnModeler.saveXML({
  188.           format: true
  189.         }, (err, xml) => {
  190.           if (!err) {
  191.             // 获取文件名
  192.             const name = `${this.getFilename(xml)}.bpmn`;
  193.             // 将文件名以及数据交给下载方法
  194.             this.download({
  195.               name: name,
  196.               data: xml
  197.             });
  198.           }
  199.         });
  200.       },
  201.  
  202.       downloadXml() {
  203.         this.bpmnModeler.saveXML({
  204.           format: true
  205.         }, (err, xml) => {
  206.           if (!err) {
  207.             // 获取文件名
  208.             const name = `${this.getFilename(xml)}.xml`;
  209.             // 将文件名以及数据交给下载方法
  210.             this.download({
  211.               name: name,
  212.               data: xml
  213.             });
  214.           }
  215.         });
  216.       },
  217.       downloadSvg() {
  218.         this.bpmnModeler.saveXML({
  219.           format: true
  220.         }, (err, xml) => {
  221.           if (!err) {
  222.             // 获取文件名
  223.             const name = `${this.getFilename(xml)}.svg`;
  224.  
  225.             // 从建模器画布中提取svg图形标签
  226.             let context = "";
  227.             const djsGroupAll = this.$refs.canvas.querySelectorAll(".djs-group");
  228.             for (let item of djsGroupAll) {
  229.               context += item.innerHTML;
  230.             }
  231.             // 获取svg的基本数据，长宽高
  232.             const viewport = this.$refs.canvas
  233.               .querySelector(".viewport")
  234.               .getBBox();
  235.  
  236.             // 将标签和数据拼接成一个完整正常的svg图形
  237.             const svg = `
  238.                         <svg
  239.                           xmlns="http://www.w3.org/2000/svg"
  240.                           xmlns:xlink="http://www.w3.org/1999/xlink"
  241.                           width="${viewport.width}"
  242.                           height="${viewport.height}"
  243.                           viewBox="${viewport.x} ${viewport.y} ${viewport.width} ${viewport.height}"
  244.                           version="1.1"
  245.                           >
  246.                           ${context}
  247.                         </svg>
  248.                       `;
  249.             // 将文件名以及数据交给下载方法
  250.             this.download({
  251.               name: name,
  252.               data: svg
  253.             });
  254.           }
  255.         });
  256.       },
  257.  
  258.       download({
  259.         name = "diagram.bpmn",
  260.         data
  261.       }) {
  262.         // 这里就获取到了之前设置的隐藏链接
  263.         const downloadLink = this.$refs.downloadLink;
  264.         // 把输就转换为URI，下载要用到的
  265.         const encodedData = encodeURIComponent(data);
  266.  
  267.         if (data) {
  268.           // 将数据给到链接
  269.           downloadLink.href = "data:application/bpmn20-xml;charset=UTF-8," + encodedData;
  270.           // 设置文件名
  271.           downloadLink.download = name;
  272.           // 触发点击事件开始下载
  273.           downloadLink.click();
  274.         }
  275.       },
  276.  
  277.       getFilename(xml) {
  278.         let start = xml.indexOf("process");
  279.         let filename = xml.substr(start, xml.indexOf(">"));
  280.         filename = filename.substr(filename.indexOf("id") + 4);
  281.         filename = filename.substr(0, filename.indexOf('"'));
  282.         return filename;
  283.       },
  284.       showXml() {
  285.       this.bpmnModeler.saveXML({ format: true }).then(({ xml }) => {
  286.         this.xmlData = xml;
  287.         this.showXmlModal = true;
  288.       });
  289.     },
  290.   },
  291.  
  292.     
  293.     computed: {}
  294.   }
  295. </script>
  296.  
  297. <style lang="less" scoped>
  298.   // 左边工具栏以及编辑节点的样式
  299.   @import '~bpmn-js/dist/assets/diagram-js.css';
  300.   @import '~bpmn-js/dist/assets/bpmn-font/css/bpmn.css';
  301.   @import '~bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css';
  302.   @import '~bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css';
  303.  
  304.   // 右边工具栏样式
  305.   @import '~bpmn-js-properties-panel/dist/assets/bpmn-js-properties-panel.css';
  306.  
  307.   .containers {
  308.     position: absolute;
  309.     background-color: #ffffff;
  310.     width: 100%;
  311.     height: 100vh;
  312.     padding: 5px;
  313.   }
  314.  
  315.   .canvas {
  316.     width: 100%;
  317.     height: 100%;
  318.   }
  319.  
  320.   .panel {
  321.     position: absolute;
  322.     right: 0;
  323.     top: 0;
  324.     width: 300px;
  325.   }
  326.  
  327.   .button-row {
  328.     margin-top: 10px;
  329.     display: flex;
  330.     flex-direction: row;
  331.     justify-content: center;
  332.  
  333.     .button {
  334.       margin-right: 10px;
  335.       font-weight: bolder;
  336.     }
  337.   }
  338. </style>

到此就可以看到流程图制作的页面了，在样式上还存在一些问题，比如用滚轮上下滚动的话可以无限滑动，得滑动滚动条才行。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/笔触狂放9/article/detail/446664
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号