使用bpmn进行前端流程图操作

安装

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

main.js中引用

main.js
/*左边工具栏以及编辑节点的样式*/
import "bpmn-js/dist/assets/diagram-js.css";
import "bpmn-js/dist/assets/bpmn-font/css/bpmn.css";
import "bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css";
import "bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css";
import "bpmn-js-properties-panel/dist/assets/bpmn-js-properties-panel.css";

camunda.json文件代码内引用

{"name": "Camunda","uri": "http://camunda.org/schema/1.0/bpmn","prefix": "camunda","xml": {"tagAlias": "lowerCase"},"associations": [],"types": [{"name": "Definitions","isAbstract": true,"extends": ["bpmn:Definitions"],"properties": [{"name": "diagramRelationId","isAttr": true,"type": "String"}]},{"name": "InOutBinding","superClass": ["Element"],"isAbstract": true,"properties": [{"name": "source","isAttr": true,"type": "String"},{"name": "sourceExpression","isAttr": true,"type": "String"},{"name": "target","isAttr": true,"type": "String"},{"name": "businessKey","isAttr": true,"type": "String"},{"name": "local","isAttr": true,"type": "Boolean","default": false},{"name": "variables","isAttr": true,"type": "String"}]},{"name": "In","superClass": ["InOutBinding"],"meta": {"allowedIn": ["bpmn:CallActivity"]}},{"name": "Out","superClass": ["InOutBinding"],"meta": {"allowedIn": ["bpmn:CallActivity"]}},{"name": "AsyncCapable","isAbstract": true,"extends": ["bpmn:Activity","bpmn:Gateway","bpmn:Event"],"properties": [{"name": "async","isAttr": true,"type": "Boolean","default": false},{"name": "asyncBefore","isAttr": true,"type": "Boolean","default": false},{"name": "asyncAfter","isAttr": true,"type": "Boolean","default": false},{"name": "exclusive","isAttr": true,"type": "Boolean","default": true}]},{"name": "JobPriorized","isAbstract": true,"extends": ["bpmn:Process","camunda:AsyncCapable"],"properties": [{"name": "jobPriority","isAttr": true,"type": "String"}]},{"name": "SignalEventDefinition","isAbstract": true,"extends": ["bpmn:SignalEventDefinition"],"properties": [{"name": "async","isAttr": true,"type": "Boolean","default": false}]},{"name": "ErrorEventDefinition","isAbstract": true,"extends": ["bpmn:ErrorEventDefinition"],"properties": [{"name": "errorCodeVariable","isAttr": true,"type": "String"},{"name": "errorMessageVariable","isAttr": true,"type": "String"}]},{"name": "Error","isAbstract": true,"extends": ["bpmn:Error"],"properties": [{"name": "camunda:errorMessage","isAttr": true,"type": "String"}]},{"name": "PotentialStarter","superClass": ["Element"],"properties": [{"name": "resourceAssignmentExpression","type": "bpmn:ResourceAssignmentExpression"}]},{"name": "FormSupported","isAbstract": true,"extends": ["bpmn:StartEvent","bpmn:UserTask"],"properties": [{"name": "formHandlerClass","isAttr": true,"type": "String"},{"name": "formKey","isAttr": true,"type": "String"}]},{"name": "TemplateSupported","isAbstract": true,"extends": ["bpmn:Process","bpmn:FlowElement"],"properties": [{"name": "modelerTemplate","isAttr": true,"type": "String"}]},{"name": "Initiator","isAbstract": true,"extends": [ "bpmn:StartEvent" ],"properties": [{"name": "initiator","isAttr": true,"type": "String"}]},{"name": "ScriptTask","isAbstract": true,"extends": ["bpmn:ScriptTask"],"properties": [{"name": "resultVariable","isAttr": true,"type": "String"},{"name": "resource","isAttr": true,"type": "String"}]},{"name": "Process","isAbstract": true,"extends": ["bpmn:Process"],"properties": [{"name": "candidateStarterGroups","isAttr": true,"type": "String"},{"name": "candidateStarterUsers","isAttr": true,"type": "String"},{"name": "versionTag","isAttr": true,"type": "String"},{"name": "historyTimeToLive","isAttr": true,"type": "String"},{"name": "isStartableInTasklist","isAttr": true,"type": "Boolean","default": true}]},{"name": "EscalationEventDefinition","isAbstract": true,"extends": ["bpmn:EscalationEventDefinition"],"properties": [{"name": "escalationCodeVariable","isAttr": true,"type": "String"}]},{"name": "FormalExpression","isAbstract": true,"extends": ["bpmn:FormalExpression"],"properties": [{"name": "resource","isAttr": true,"type": "String"}]},{"name": "Assignable","extends": [ "bpmn:UserTask" ],"properties": [{"name": "assignee","isAttr": true,"type": "String"},{"name": "candidateUsers","isAttr": true,"type": "String"},{"name": "candidateGroups","isAttr": true,"type": "String"},{"name": "dueDate","isAttr": true,"type": "String"},{"name": "followUpDate","isAttr": true,"type": "String"},{"name": "priority","isAttr": true,"type": "String"}]},{"name": "CallActivity","extends": [ "bpmn:CallActivity" ],"properties": [{"name": "calledElementBinding","isAttr": true,"type": "String","default": "latest"},{"name": "calledElementVersion","isAttr": true,"type": "String"},{"name": "calledElementVersionTag","isAttr": true,"type": "String"},{"name": "calledElementTenantId","isAttr": true,"type": "String"},{"name": "caseRef","isAttr": true,"type": "String"},{"name": "caseBinding","isAttr": true,"type": "String","default": "latest"},{"name": "caseVersion","isAttr": true,"type": "String"},{"name": "caseTenantId","isAttr": true,"type": "String"},{"name": "variableMappingClass","isAttr": true,"type": "String"},{"name": "variableMappingDelegateExpression","isAttr": true,"type": "String"}]},{"name": "ServiceTaskLike","extends": ["bpmn:ServiceTask","bpmn:BusinessRuleTask","bpmn:SendTask","bpmn:MessageEventDefinition"],"properties": [{"name": "expression","isAttr": true,"type": "String"},{"name": "class","isAttr": true,"type": "String"},{"name": "delegateExpression","isAttr": true,"type": "String"},{"name": "resultVariable","isAttr": true,"type": "String"}]},{"name": "DmnCapable","extends": ["bpmn:BusinessRuleTask"],"properties": [{"name": "decisionRef","isAttr": true,"type": "String"},{"name": "decisionRefBinding","isAttr": true,"type": "String","default": "latest"},{"name": "decisionRefVersion","isAttr": true,"type": "String"},{"name": "mapDecisionResult","isAttr": true,"type": "String","default": "resultList"},{"name": "decisionRefTenantId","isAttr": true,"type": "String"}]},{"name": "ExternalCapable","extends": ["camunda:ServiceTaskLike"],"properties": [{"name": "type","isAttr": true,"type": "String"},{"name": "topic","isAttr": true,"type": "String"}]},{"name": "TaskPriorized","extends": ["bpmn:Process","camunda:ExternalCapable"],"properties": [{"name": "taskPriority","isAttr": true,"type": "String"}]},{"name": "Properties","superClass": ["Element"],"meta": {"allowedIn": [ "*" ]},"properties": [{"name": "values","type": "Property","isMany": true}]},{"name": "Property","superClass": ["Element"],"properties": [{"name": "id","type": "String","isAttr": true},{"name": "name","type": "String","isAttr": true},{"name": "value","type": "String","isAttr": true}]},{"name": "Connector","superClass": ["Element"],"meta": {"allowedIn": ["camunda:ServiceTaskLike"]},"properties": [{"name": "inputOutput","type": "InputOutput"},{"name": "connectorId","type": "String"}]},{"name": "InputOutput","superClass": ["Element"],"meta": {"allowedIn": ["bpmn:FlowNode","camunda:Connector"]},"properties": [{"name": "inputOutput","type": "InputOutput"},{"name": "connectorId","type": "String"},{"name": "inputParameters","isMany": true,"type": "InputParameter"},{"name": "outputParameters","isMany": true,"type": "OutputParameter"}]},{"name": "InputOutputParameter","properties": [{"name": "name","isAttr": true,"type": "String"},{"name": "value","isBody": true,"type": "String"},{"name": "definition","type": "InputOutputParameterDefinition"}]},{"name": "InputOutputParameterDefinition","isAbstract": true},{"name": "List","superClass": [ "InputOutputParameterDefinition" ],"properties": [{"name": "items","isMany": true,"type": "InputOutputParameterDefinition"}]},{"name": "Map","superClass": [ "InputOutputParameterDefinition" ],"properties": [{"name": "entries","isMany": true,"type": "Entry"}]},{"name": "Entry","properties": [{"name": "key","isAttr": true,"type": "String"},{"name": "value","isBody": true,"type": "String"},{"name": "definition","type": "InputOutputParameterDefinition"}]},{"name": "Value","superClass": ["InputOutputParameterDefinition"],"properties": [{"name": "id","isAttr": true,"type": "String"},{"name": "name","isAttr": true,"type": "String"},{"name": "value","isBody": true,"type": "String"}]},{"name": "Script","superClass": [ "InputOutputParameterDefinition" ],"properties": [{"name": "scriptFormat","isAttr": true,"type": "String"},{"name": "resource","isAttr": true,"type": "String"},{"name": "value","isBody": true,"type": "String"}]},{"name": "Field","superClass": [ "Element" ],"meta": {"allowedIn": ["camunda:ServiceTaskLike","camunda:ExecutionListener","camunda:TaskListener"]},"properties": [{"name": "name","isAttr": true,"type": "String"},{"name": "expression","type": "String"},{"name": "stringValue","isAttr": true,"type": "String"},{"name": "string","type": "String"}]},{"name": "InputParameter","superClass": [ "InputOutputParameter" ]},{"name": "OutputParameter","superClass": [ "InputOutputParameter" ]},{"name": "Collectable","isAbstract": true,"extends": [ "bpmn:MultiInstanceLoopCharacteristics" ],"superClass": [ "camunda:AsyncCapable" ],"properties": [{"name": "collection","isAttr": true,"type": "String"},{"name": "elementVariable","isAttr": true,"type": "String"}]},{"name": "FailedJobRetryTimeCycle","superClass": [ "Element" ],"meta": {"allowedIn": ["camunda:AsyncCapable","bpmn:MultiInstanceLoopCharacteristics"]},"properties": [{"name": "body","isBody": true,"type": "String"}]},{"name": "ExecutionListener","superClass": [ "Element" ],"meta": {"allowedIn": ["bpmn:Task","bpmn:ServiceTask","bpmn:UserTask","bpmn:BusinessRuleTask","bpmn:ScriptTask","bpmn:ReceiveTask","bpmn:ManualTask","bpmn:ExclusiveGateway","bpmn:SequenceFlow","bpmn:ParallelGateway","bpmn:InclusiveGateway","bpmn:EventBasedGateway","bpmn:StartEvent","bpmn:IntermediateCatchEvent","bpmn:IntermediateThrowEvent","bpmn:EndEvent","bpmn:BoundaryEvent","bpmn:CallActivity","bpmn:SubProcess","bpmn:Process"]},"properties": [{"name": "expression","isAttr": true,"type": "String"},{"name": "class","isAttr": true,"type": "String"},{"name": "delegateExpression","isAttr": true,"type": "String"},{"name": "event","isAttr": true,"type": "String"},{"name": "script","type": "Script"},{"name": "fields","type": "Field","isMany": true}]},{"name": "TaskListener","superClass": [ "Element" ],"meta": {"allowedIn": ["bpmn:UserTask"]},"properties": [{"name": "expression","isAttr": true,"type": "String"},{"name": "class","isAttr": true,"type": "String"},{"name": "delegateExpression","isAttr": true,"type": "String"},{"name": "event","isAttr": true,"type": "String"},{"name": "script","type": "Script"},{"name": "fields","type": "Field","isMany": true},{"name": "id","type": "String","isAttr": true},{"name": "eventDefinitions","type": "bpmn:TimerEventDefinition","isMany": true}]},{"name": "FormProperty","superClass": [ "Element" ],"meta": {"allowedIn": ["bpmn:StartEvent","bpmn:UserTask"]},"properties": [{"name": "id","type": "String","isAttr": true},{"name": "name","type": "String","isAttr": true},{"name": "type","type": "String","isAttr": true},{"name": "required","type": "String","isAttr": true},{"name": "readable","type": "String","isAttr": true},{"name": "writable","type": "String","isAttr": true},{"name": "variable","type": "String","isAttr": true},{"name": "expression","type": "String","isAttr": true},{"name": "datePattern","type": "String","isAttr": true},{"name": "default","type": "String","isAttr": true},{"name": "values","type": "Value","isMany": true}]},{"name": "FormData","superClass": [ "Element" ],"meta": {"allowedIn": ["bpmn:StartEvent","bpmn:UserTask"]},"properties": [{"name": "fields","type": "FormField","isMany": true},{"name": "businessKey","type": "String","isAttr": true}]},{"name": "FormField","superClass": [ "Element" ],"properties": [{"name": "id","type": "String","isAttr": true},{"name": "label","type": "String","isAttr": true},{"name": "type","type": "String","isAttr": true},{"name": "datePattern","type": "String","isAttr": true},{"name": "defaultValue","type": "String","isAttr": true},{"name": "properties","type": "Properties"},{"name": "validation","type": "Validation"},{"name": "values","type": "Value","isMany": true}]},{"name": "Validation","superClass": [ "Element" ],"properties": [{"name": "constraints","type": "Constraint","isMany": true}]},{"name": "Constraint","superClass": [ "Element" ],"properties": [{"name": "name","type": "String","isAttr": true},{"name": "config","type": "String","isAttr": true}]},{"name": "ConditionalEventDefinition","isAbstract": true,"extends": ["bpmn:ConditionalEventDefinition"],"properties": [{"name": "variableName","isAttr": true,"type": "String"},{"name": "variableEvent","isAttr": true,"type": "String"}]}],"emumerations": [ ]
}

全部代码

<template><div class="containerBox"><div id="container"></div><div class="nodeInfo" style="width:20%"><el-form size="mini" label-width="80px" :model="form"><el-form-item label="昵称："><el-input v-model.trim="form.selfName" style="width: 25%"></el-input></el-form-item><el-form-item label="年龄："><el-checkbox-group v-model="form.interestFood"><el-checkbox label="苹果"></el-checkbox><el-checkbox label="香蕉"></el-checkbox><el-checkbox label="草莓蛋糕"></el-checkbox><el-checkbox label="西瓜"></el-checkbox></el-checkbox-group></el-form-item><h4>详细信息</h4><el-form-item label="班级："><el-input v-model.trim="form.nodeDesc.class" style="width: 25%"></el-input></el-form-item><el-form-item label="年龄："><el-input v-model.trim="form.nodeDesc.age" style="width: 25%"></el-input></el-form-item></el-form></div></div>
</template>
<script>import BpmnModeler from 'bpmn-js/lib/Modeler'import camundaExtension from './camunda.json'import {processAddOrEdit, getProcess} from '@/utils/request'// import { resolve } from 'path'export default {name: 'jsonToXml',props: {digitazationId: {type: String,default: ''},title: {type: String,default: ''}},data () {return {containerEl: null,bpmnModeler: null,nodeName: '',form: {id: '',selfName: '',nodeDesc: {class: '',age: ''},interestFood: []},chart: '<?xml version="1.0" encoding="UTF-8"?>\n' +'<bpmn:definitions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmn="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" xmlns:camunda="http://camunda.org/schema/1.0/bpmn" xmlns:di="http://www.omg.org/spec/DD/20100524/DI" id="Definitions_1" targetNamespace="http://bpmn.io/schema/bpmn">\n' +'  <bpmn:process id="Process_1" isExecutable="false">\n' +'    <bpmn:startEvent id="StartEvent_1">\n' +'      <bpmn:outgoing>Flow_09dyrc9</bpmn:outgoing>\n' +'    </bpmn:startEvent>\n' +'    <bpmn:userTask id="Activity_0igip2e" name="第一名111">\n' +'      <bpmn:extensionElements>\n' +'        <camunda:inputOutput>\n' +'          <camunda:inputParameter name="selfName">少年的你</camunda:inputParameter>\n' +'          <camunda:inputParameter name="nodeDesc">\n' +'            <camunda:map>\n' +'              <camunda:entry key="class">一年一班</camunda:entry>\n' +'              <camunda:entry key="age">8</camunda:entry>\n' +'            </camunda:map>\n' +'          </camunda:inputParameter>\n' +'          <camunda:inputParameter name="interestFood">\n' +'            <camunda:list>\n' +'              <camunda:value>苹果</camunda:value>\n' +'              <camunda:value>香蕉</camunda:value>\n' +'              <camunda:value>西瓜</camunda:value>\n' +'            </camunda:list>\n' +'          </camunda:inputParameter>\n' +'        </camunda:inputOutput>\n' +'      </bpmn:extensionElements>\n' +'      <bpmn:incoming>Flow_09dyrc9</bpmn:incoming>\n' +'      <bpmn:outgoing>Flow_03cqlix</bpmn:outgoing>\n' +'    </bpmn:userTask>\n' +'    <bpmn:endEvent id="Event_1lh7sje">\n' +'      <bpmn:incoming>Flow_03cqlix</bpmn:incoming>\n' +'    </bpmn:endEvent>\n' +'    <bpmn:sequenceFlow id="Flow_09dyrc9" sourceRef="StartEvent_1" targetRef="Activity_0igip2e" />\n' +'    <bpmn:sequenceFlow id="Flow_03cqlix" sourceRef="Activity_0igip2e" targetRef="Event_1lh7sje" />\n' +'    <bpmn:sequenceFlow id="Flow_07j5ahi" sourceRef="Activity_0igip2e" targetRef="Gateway_11lk0du" />\n' +'    <bpmn:sequenceFlow id="Flow_1bdnoii" sourceRef="Activity_0igip2e" targetRef="Gateway_11lk0du" />\n' +'  </bpmn:process>\n' +'  <bpmndi:BPMNDiagram id="BPMNDiagram_1">\n' +'    <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1">\n' +'      <bpmndi:BPMNShape id="_BPMNShape_StartEvent_2" bpmnElement="StartEvent_1">\n' +'        <dc:Bounds x="173" y="102" width="36" height="36" />\n' +'      </bpmndi:BPMNShape>\n' +'      <bpmndi:BPMNShape id="Activity_0igip2e_di" bpmnElement="Activity_0igip2e">\n' +'        <dc:Bounds x="310" y="80" width="100" height="80" />\n' +'      </bpmndi:BPMNShape>\n' +'      <bpmndi:BPMNShape id="Gateway_11lk0du_di" bpmnElement="Gateway_11lk0du">\n' +'        <dc:Bounds x="310" y="180" width="100" height="80" />\n' +'      </bpmndi:BPMNShape>\n' +'      <bpmndi:BPMNShape id="Event_1lh7sje_di" bpmnElement="Event_1lh7sje">\n' +'        <dc:Bounds x="502" y="102" width="36" height="36" />\n' +'      </bpmndi:BPMNShape>\n' +'      <bpmndi:BPMNEdge id="Flow_09dyrc9_di" bpmnElement="Flow_09dyrc9">\n' +'        <di:waypoint x="209" y="120" />\n' +'        <di:waypoint x="310" y="120" />\n' +'      </bpmndi:BPMNEdge>\n' +'      <bpmndi:BPMNEdge id="Flow_03cqlix_di" bpmnElement="Flow_03cqlix">\n' +'        <di:waypoint x="410" y="120" />\n' +'        <di:waypoint x="502" y="120" />\n' +'      </bpmndi:BPMNEdge>\n' +'    </bpmndi:BPMNPlane>\n' +'  </bpmndi:BPMNDiagram>\n' +'</bpmn:definitions>'}},mounted () {// 获取流程图if(this.title === '编辑') {this.getProcessData()}this.containerEl = document.getElementById('container')this.bpmnModeler = new BpmnModeler({container: this.containerEl,moddleExtensions: {camunda: camundaExtension}})this.showChart()},methods: {// 获取流程图getProcessData(){getProcess(this.digitazationId).then(res => {if(res.code === 200) {this.chart = res.data.nodeTextthis.showChart()}})},json2xml () {const elementRegistry = this.bpmnModeler.get('elementRegistry')const bpmnFactory = this.bpmnModeler.get('bpmnFactory')const modeling = this.bpmnModeler.get('modeling')// “elementRegistry.get” 根据节点id找到节点实例，为其在xml写入添加属性const element = elementRegistry.get(this.form.id)// 存在找不到节点的情况，那说明节点在点击后，被删除了if (element !== undefined) {const extensionElements = bpmnFactory.create('bpmn:ExtensionElements')const inputOutput = bpmnFactory.create('camunda:InputOutput')extensionElements.values = [inputOutput]inputOutput.inputParameters = []// 遍历this.form，将其各个属性进行循环写入extensionElementsfor (const nodeKey in this.form) {let inputParameter = null// 1、属性值为单个值，即布尔、字符串、数字if ((typeof this.form[nodeKey] === 'string' && this.form[nodeKey] !== '') ||typeof this.form[nodeKey] === 'boolean' ||typeof this.form[nodeKey] === 'number') {inputParameter = bpmnFactory.create('camunda:InputParameter', {name: nodeKey,// 布尔值和数字影响生成xml，都要转成字符串value: typeof this.form[nodeKey] === 'string' ? this.form[nodeKey] : JSON.stringify(this.form[nodeKey])})//  2.属性值为数组或对象} else if (typeof this.form[nodeKey] === 'object') {// 2.1 属性值为数组，对应案例中 '爱吃'字段，checkbox多选if (this.form[nodeKey] instanceof Array) {if (this.form[nodeKey].length) {inputParameter = bpmnFactory.create('camunda:InputParameter', {name: nodeKey})const list = bpmnFactory.create('camunda:List')list.items = []this.form[nodeKey].forEach((item) => {const itemValue = bpmnFactory.create('camunda:Value', {value: item})list.items.push(itemValue)})inputParameter.definition = list}} else {// 2.2 此时属性值是对象，对应案例中 '详细信息'if (JSON.stringify(this.form[nodeKey]) === '{}') continueinputParameter = bpmnFactory.create('camunda:InputParameter', {name: nodeKey})const map = bpmnFactory.create('camunda:Map')map.entries = []for (const mapKey in this.form[nodeKey]) {if (this.form[nodeKey][mapKey] !== '') {const itemValue = bpmnFactory.create('camunda:Entry', {key: mapKey,value: this.form[nodeKey][mapKey]})map.entries.push(itemValue)}inputParameter.definition = map}}}inputParameter !== null && inputOutput.inputParameters.push(inputParameter)}modeling.updateProperties(element, {extensionElements})}return new Promise(resolve => {this.bpmnModeler.saveXML({format: true}, (err, xml) => {console.log(err)resolve(xml)})})},splitBusiness2Json (businessObject) {let formData = {}// 此时这个id必须要，因为json生成xml时，节点id是找到节点的唯一标识formData['id'] = businessObject.idlet params = this.getExtensionElement(businessObject, 'camunda:InputOutput')if (params && params.inputParameters) {params.inputParameters.forEach((item) => {let definition = item.definitionif (definition) {if (definition.$type === 'camunda:List') {let arr = []definition.items.forEach((itemsItem) => {arr.push(itemsItem.value)})formData[item.name] = arr} else if (definition.$type === 'camunda:Map') {let obj = {}if (definition.entries) {definition.entries.forEach((entriesItem) => {obj[entriesItem.key] = entriesItem.value})formData[item.name] = obj}}} else {formData[item.name] = item.value}})}this.form = formData},getExtensionElement (element, type) {if (!element.extensionElements) {return}return element.extensionElements.values.filter((extensionElement) => {return extensionElement.$instanceOf(type)})[0]},addEventBusListener () {let eventBus = this.bpmnModeler.get('eventBus')// 注册节点事件，eventTypes中可以写多个事件let eventTypes = ['element.click']eventTypes.forEach((eventType) => {eventBus.on(eventType, (e) => {let {element} = eif (!element.parent) returnif (!e || element.type === 'bpmn:Process') {return false} else {if (eventType === 'element.click') {let businessObject = element.businessObject || element// 此时的businessObject 是我们想要的万能的小可爱this.splitBusiness2Json(businessObject)}}})})},// 流程图回显showChart () {this.bpmnModeler.importXML(this.chart, (err) => {if (!err) {this.addEventBusListener()}})},// 添加或编辑流程图async getProcessAddOrEdit(){let dataif(this.title === '新增'){data = {planId: this.digitazationId,nodeText: this.chart}}else {let nodeText = await this.json2xml()data = {planId: this.digitazationId,nodeText}}console.log(data)processAddOrEdit(data).then(res => {if(res.code === 200) {this.$message.success(res.data)}})}}}
</script>
<style lang="scss">
.bjs-powered-by{display: none;
}.containerBox {display: flex;justify-content: space-around;height: calc(100vh - 220px);}#container {height: calc(100% - 50px);}#container, .nodeInfo {width: 50%;display: inline-block;height: calc(100% - 50px);}
</style>

使用bpmn进行前端流程图操作相关推荐

web项目实现mysql增删改查并从前端页面操作
1.看下各个包下面的文件,我上一篇文章已经说过了,这里对上一章有一部分重复的 2.User.java是数据库元素写的一个类,代码如下 package com.hqyj.wj.model; //用户信息 ...
前端 IndexDB 操作入门教程
前端 IndexDB 操作入门教程 idb-js 基于indexdb本地数据库的封装文档地址安装: npm install idb-js --save 使用: 第一步: 引入Idb import ...
如何使用前端DOM操作制作一个便签：
如何使用前端DOM操作制作一个便签: 当你看到这张要实现功能的图片时,不知道你现在的心情如何?反正我看到这张图片的时候心情就跟着张图片的背景颜色一样灰暗! 只要你在动手敲代码前想好各大功能应该要怎么实 ...
前端js操作截取/裁剪图片
前端js操作截取/裁剪图片主要使用canvas相关api来实现图片裁剪在vue中使用 <template><div><img :src="imgSrc&qu ...
js-xlsx 前端Excel操作
js-xlsx前端Excel操作介绍 (因为excel有点长这里我将用ex替代) 有时候我们会在前端进行一些数据的操作,可能是解析ex的数据,或者是将数据导出为ex文档.在前端解析ex其实还是挺方 ...
前端流程图组件库大对比
前端流程图组件库框架对比框架技术核心是否开源是否使用过背景备注 GoJS canvas 和svg 核心代码进行了混淆融合系统使用过国外商业公司功能强大,图的种类极多,灵活,商业版本 ...
Layui的基本使用(前端登录操作步骤)
目录一.介绍layui 二.Layui相关的基本操作 1.下载Layui网站 :Layui - 经典开源模块化前端 UI 框架 ----------接下来的操作是实现一个Layui前端登录的效果-- ...
Vue+bpmn.js自定义流程图之palette（二）
自定义bpmn.js左侧工具栏palette样式一.回顾 1.预览 2.目录结构二.代码 1.paletteProvider.js文件 2.css文件 3.index.js文件三.总结一.回顾 ...
ElementUI保姆级教学完成前端CRUD操作
ElementUI 按照行业规矩, 写博客都要介绍博客所说的技术是干嘛的,长篇大论的话我就不说了,逼格不够高面试官那也虎不住,我用一句话来概括就是:饿了么写的一个非常棒的UI组件,通过 vue add ...

使用bpmn进行前端流程图操作

使用bpmn进行前端流程图操作相关推荐

最新文章

热门文章