赞
踩
安装
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.nodeText
- this.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,将其各个属性进行循环写入extensionElements
- for (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]) === '{}') continue
- inputParameter = 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.id
- let params = this.getExtensionElement(businessObject, 'camunda:InputOutput')
- if (params && params.inputParameters) {
- params.inputParameters.forEach((item) => {
- let definition = item.definition
- if (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} = e
- if (!element.parent) return
- if (!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 data
- if(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>
-

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