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

最新推荐文章于 2024-03-12 10:36:27 发布
最新推荐文章于 2024-03-12 10:36:27 发布
阅读量1.4k 收藏 1
点赞数 2
分类专栏： vue相关知识 文章标签： 前端 流程图 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ssy001128/article/details/128951314
版权

安装

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>

易鹤鹤.
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
bpmn.js一个基于Bpmn 2.0的前端工作流展示和绘制工具
飞云先生
02-07 1220
这里引用咖啡兔在《Activiti实战》一书中对于工作流的描述：工作流（Work Flow）引擎被广泛应用于各种信息化系统中，将原本散乱甚至混乱的业务梳理后制定成业务规范流程，进而约束业务的规范化处理和运转。需求人员、开发人员共同协作制定了符合BPMN 2.0规范的流程定义，之后将其部署到工作流引擎中，由它自动驱动业务流程的进行。定义：收集业务需求并转化为流程定义。发布：在系统管理（平台）中发布流程定义。执行：体的流程引擎按照事先定义的流程处理路线以任务驱动的方式执行业务流程。
基于BPMN流程引擎驱动的前端研发平台
02-12
基于BPMN流程引擎驱动的前端研发平台 阿里巴巴-前端技术专家在全球互联网大会GIAC 2017上的分享
【仅记录】vue和activiti前后端分离的bpmn工作流搭建及部分问题解决方法
weixin_52022921的博客
05-19 8192
因为项目组需要一个工作流，所以我也是第一次使用bpmn-js工作流。 做的前后端分离的版本，前端是vue-element框架，后端是activiti的。 写这篇主要是为了记录（仅记录前端）自己从开始搭建看的教学贴 & 中间遇到的一些小问题的解决方法，如果后续还有别的问题也都会一并更新到这里，内容比较多。 （先放一下自己搭建好的工作流绘制页面） bpmn官网：https://bpmn.io/toolkit/bpmn-js/ bpmn官方在线绘制流程图：https://demo.bp.
最好用的流程编辑器bpmn-js系列之基本使用
最新发布
广漂程序猿DevinRock
03-12 2608
接触bpmn-js不久，边学边写，文章难免出错，各位多多包含。想要打造一个好用的适合自己的流程编辑器，需要了解的内容比较多，bpmn-js会分多篇文章来介绍，这是本系列的第一篇，下一篇介绍bpmn-js的数据保存等内容，欢迎关注部分小伙伴对流程编辑器不了解，或是对BPMN不了解，我搭建了个在线的Demo:，点击链接即可轻松体验，建议PC端打开效果更好。
bpmn-js VUE前端部署及汉化
Ydada_的博客
10-25 9450
bpmn-js VUE前端部署及汉化 版权声明：转载请附上原文出处链接和本声明。 今天给大家分享一款JS工作流绘制框架：bpmn-js，官网地址：bpmn-js，通过这个框架可以在网页上编写工作流，支持在线编写并绑定业务，使用方法如下： 首先安装bpmn-js依赖 npm install --save bpmn-js npm install --save camunda-bpmn-moddl...
前端利用bpmn-js实现工作流
01-25
前端html实现，附件附上
【Vue + bpmn】前端实现画流程图
zuo0407的博客
06-28 9657
新业务下来要搞流程图，作为笔记仅供参考，记录此次渡劫历程 技术：使用vue + ts + bpmn 安装bpmn.js 实现创建编辑流程图，首先我们需要安装 bpmn.js。材料要先有，才能根据自己的需要去锻造适合自己的兵器 npm i bpmn.js --save -D 注：安装完成后可以在node-modules中找到bpmn-font，bpmn-js，bpmn-moddle文件夹 ts文件引入bpmn // 左侧工具栏及编辑节点的样式 import 'bpmn-js/dist/assets/diag
uniapp app实现流程图功能
zmx781284440的博客
06-03 704
app流程图
前端使用bpmn-js写流程图
03-31
使用bpmn-js写流程图 vue项目 优化了UI和去掉了多余的图标 右侧栏目加入了收缩和自定义 地址端口在configUrl.js修改
vue使用flowable绘制流程图.docx
12-11
vue使用flowable绘制流程图
bpmn.js 2.0流程编辑器 搭配 Activiti 7.0 进行工作流编辑器集成开发
03-03
在浏览器中创建、嵌入和扩展 BPMN 图。单独使用它或将其集成到您的应用程序中。 1.使用基于Web 的建模组件 轻松创建您自己的 BPMN 2.0 图表。 2.使用该工具包将 BPMN 2.0 图表嵌入到您的应用程序中。 使用对您和您的...
BPMN Tutorial
08-19
IBM bpmn的英文版详细介绍以及例子，适合新手入门。
bpmn-js-examples, 关于如何使用bpmn的示例.zip
10-10
bpmn-js-examples, 关于如何使用bpmn的示例 bpmn-js例子这个库包含了许多例子，展示了如何使用js将它集成到你的应用程序中。 基础知识 simple-bower -展示如何
vue项目中使用bpmn为节点添加颜色的方法
01-19
bpmn是比较方便的绘制流程图的插件，官方demo https://github.com/bpmn-io/bpmn-js-examples 本文主要包括vue项目中bpmn使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考...
bpmn-to-image:将BPMN 2.0图表转换为PDF文档或PNG文件
05-07
bpmn到图像 将转换为PDF文档，SVG或PNG文件。 用法 该软件包公开了bpmn-to-image命令行实用程序，该实用程序使您可以将BPMN 2.0图表转换为PNG和PDF文档： $ bpmn-to-image --help Convert a BPMN 2.0 diagrams to...
springboot集成Camunda，加前端bpmn页面流程编辑器
Yang_RR的博客
02-21 7382
一般Camunda会自动初始化mysql生成act_开头的49张表，如需手动初始化sql，可去官网找到对应版本（此例中Camunda版本为7.18.0）的sql脚本文件，然后如上启动流程的时候给流程变量flag初始化和赋值，后续提交任务的时候，也可随时通过修改流程变量的值来控制流程分支的走向。其中：”可执行文件“，这个选项需要勾选上，不然流程部署后，3.b.启动流程实例步骤获取不到definitionId。其中流程变量deptMajor，在启动流程时候，需要定义数据类型（值可以先不定义）
2.2.2 BPMN Process Elements
Blockchain 101
09-12 220
流程建模一致性/Process Modeling Conformance 类型集由 协作/Collaboration 和 流程/Process 图元素组成
Flowable集成bpmn.js流程中心开源系统前台
liuwenjun05101的博客
05-31 2618
企业级流程中心前台视频地址系统预览源码地址安装步骤1、配置数据源2、启动应用程序3、访问路径4、登录账号密码 视频地址 系统预览 源码地址 github源码地址 码云源码地址 安装步骤 1、配置数据源 修改flow-front-rest模块下的resources配置文件application-local.properties spring.datasource.druid.url=jdbc:mysql://localhost:3306/flow?autoReconnect=t
BPMN2.0 Process, Choreography, and Collaboration
来啊 快活啊
06-06 881
BPMN2.0文档中定义中三种类型的图，Process, Choreography 和 Collaboration 。 Collaboration 一个 Collaboration 图中通常包含两个或者更多的泳池（Pool），各个 Pool 之间使用 Message 连接 。 Process Private Non-executable (internal) Business Proces...
bpmn.js流程设计
08-30
使用BPMN.js，你可以创建各种类型的流程图，包括流程定义、任务、网关、事件、子流程等。它支持拖放操作和交互式编辑，让用户能够轻松地创建和修改流程图。 此外，BPMN.js还提供了丰富的API和扩展点，使开发人员...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值