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

最新推荐文章于 2024-08-13 19:49:46 发布
最新推荐文章于 2024-08-13 19:49:46 发布
阅读量1.5k 收藏 2
点赞数 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>

易鹤鹤.
关注
专栏目录
前端利用bpmn-js实现工作流
01-25
前端html实现，附件附上
activiti工作流集成解决方案，快速与Java整合，包含流程设计器，方便迁移至现有系统
xx_123321456的博客
10-20 985
前言 activiti工作流，企业erp、oa、hr、crm等审批系统轻松落地，请假审批demo从流程绘制到审批结束实例。 一、项目形式 springboot+vue+activiti集成了activiti在线编辑器，快速开发平台，可插拔工作流服务。 二、项目介绍 本项目拥有用户管理，部门管理，代码生成，系统监管，报表，大屏展示，业务审批等功能。功能太强大，只能粗矿的介绍，所见即所得，体验一下吧。 三、工作流 1.流程模型绘制 进入流程模型菜单，创建流程模型，这里涉及到网关流转，需要设置流转
（React/Vue+BPMN.js）前端项目——BPMN工作流设计器
最新发布
警警的博客
08-13 1325
如果你需要更复杂的集成，或者现有的解决方案不满足你的需求，你可以考虑自己封装一个 React 组件，将bpmn.js的功能按照你的需求进行封装。
基于BPMN流程引擎驱动的前端研发平台
02-12
基于BPMN流程引擎驱动的前端研发平台 阿里巴巴-前端技术专家在全球互联网大会GIAC 2017上的分享
bpmn-js VUE前端部署及汉化
Ydada_的博客
10-25 9667
bpmn-js VUE前端部署及汉化 版权声明：转载请附上原文出处链接和本声明。 今天给大家分享一款JS工作流绘制框架：bpmn-js，官网地址：bpmn-js，通过这个框架可以在网页上编写工作流，支持在线编写并绑定业务，使用方法如下： 首先安装bpmn-js依赖 npm install --save bpmn-js npm install --save camunda-bpmn-moddl...
关于工作流开发前端选型的一点个人见解（bpmn.js与LogicFlow）
weixin_43359503的博客
12-20 2804
首先需要明确的一点是，本文的出发点纯粹是针对工作流开发的场景的选型对比，其他业务场景下建议重新调研。工作流，即 Workflow，是对工作流程及其各操作步骤之间业务规则的抽象、概括描述。工作流建模，即将工作流程中的工作如何前后组织在一起的逻辑和规则，在计算机中以恰当的模型表达并对其实施计算。工作流要解决的主要问题是：为实现某个业务目标，利用计算机在多个参与者之间按某种预定规则自动传递文档、信息或者任务。以上是维基百科对工作流技术的定义。之所以称为技术。
bpmn.js一个基于Bpmn 2.0的前端工作流展示和绘制工具
油墨香^-^的博客
05-31 536
这里引用咖啡兔在《Activiti实战》一书中对于工作流的描述：工作流（Work Flow）引擎被广泛应用于各种信息化系统中，将原本散乱甚至混乱的业务梳理后制定成业务规范流程，进而约束业务的规范化处理和运转。需求人员、开发人员共同协作制定了符合BPMN 2.0规范的流程定义，之后将其部署到工作流引擎中，由它自动驱动业务流程的进行。完整的工作流周期如上：定义：收集业务需求并转化为流程定义。发布：在系统管理（平台）中发布流程定义。
前端使用bpmn-js写流程图
03-31
在本项目中，开发者已经利用 `bpmn-js` 在 Vue 框架下实现了流程图的绘制，并对 UI 进行了优化，移除了不必要的图标，并添加了右侧栏目的收缩和自定义功能。 首先，我们来深入理解 `bpmn-js`。`bpmn-js` 是由 bpmn....
vue使用flowable绘制流程图.docx
12-11
用户在界面上对流程图进行操作，修改后通过`save`事件将更新后的XML数据发送回后端进行保存。`users`、`groups`和`categorys`属性则提供了流程图中角色和分类的定义，它们可以映射到Flowable中的用户、组和类别，...
bpmn-js_流程图js_bpmn_
09-29
BPMN-js的出现，使得开发者无需深厚的图形设计背景，也能在Web应用中轻松实现流程图的绘制和操作。 ### BPMN介绍 1. **BPMN元素**：BPMN包括多种元素，如事件（Event）、任务（Task）、网关（Gateway）和泳道...
bpmn简单使用（制作流程图）
m0_59074147的博客
08-06 901
【代码】bpmn简单使用（制作流程图）
bpmn流程图
weixin_48399505的博客
10-18 798
vue2 bpmn流程图
【Vue + bpmn】前端实现画流程图
热门推荐
zuo0407的博客
06-28 1万+
新业务下来要搞流程图，作为笔记仅供参考，记录此次渡劫历程 技术：使用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 945
app流程图
springboot集成Camunda，加前端bpmn页面流程编辑器
Yang_RR的博客
02-21 8542
一般Camunda会自动初始化mysql生成act_开头的49张表，如需手动初始化sql，可去官网找到对应版本（此例中Camunda版本为7.18.0）的sql脚本文件，然后如上启动流程的时候给流程变量flag初始化和赋值，后续提交任务的时候，也可随时通过修改流程变量的值来控制流程分支的走向。其中：”可执行文件“，这个选项需要勾选上，不然流程部署后，3.b.启动流程实例步骤获取不到definitionId。其中流程变量deptMajor，在启动流程时候，需要定义数据类型（值可以先不定义）
前端优化：使用bpmn-js在Vue项目中实现流程图定制与UI优化
资源摘要信息:"前端使用bpmn-js写流程图" 知识点： 1. bpmn-js介绍： bpmn-js是一个基于BPMN 2.0规范的开源流程图绘制库，它是基于diagram-js库开发的，diagram-js是一个通用的图形绘制库。bpmn-js旨在提供流程图...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值