devbox
木道寻08
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

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

作者：木道寻08 | 2024-08-12 21:52:57

赞

踩

bpmn 前端

安装

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

main.js中引用

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

camunda.json文件  代码内引用

  1. {
  2.   "name": "Camunda",
  3.   "uri": "http://camunda.org/schema/1.0/bpmn",
  4.   "prefix": "camunda",
  5.   "xml": {
  6.     "tagAlias": "lowerCase"
  7.   },
  8.   "associations": [],
  9.   "types": [
  10.     {
  11.       "name": "Definitions",
  12.       "isAbstract": true,
  13.       "extends": [
  14.         "bpmn:Definitions"
  15.       ],
  16.       "properties": [
  17.         {
  18.           "name": "diagramRelationId",
  19.           "isAttr": true,
  20.           "type": "String"
  21.         }
  22.       ]
  23.     },
  24.     {
  25.       "name": "InOutBinding",
  26.       "superClass": [
  27.         "Element"
  28.       ],
  29.       "isAbstract": true,
  30.       "properties": [
  31.         {
  32.           "name": "source",
  33.           "isAttr": true,
  34.           "type": "String"
  35.         },
  36.         {
  37.           "name": "sourceExpression",
  38.           "isAttr": true,
  39.           "type": "String"
  40.         },
  41.         {
  42.           "name": "target",
  43.           "isAttr": true,
  44.           "type": "String"
  45.         },
  46.         {
  47.           "name": "businessKey",
  48.           "isAttr": true,
  49.           "type": "String"
  50.         },
  51.         {
  52.           "name": "local",
  53.           "isAttr": true,
  54.           "type": "Boolean",
  55.           "default": false
  56.         },
  57.         {
  58.           "name": "variables",
  59.           "isAttr": true,
  60.           "type": "String"
  61.         }
  62.       ]
  63.     },
  64.     {
  65.       "name": "In",
  66.       "superClass": [
  67.         "InOutBinding"
  68.       ],
  69.       "meta": {
  70.         "allowedIn": [
  71.           "bpmn:CallActivity"
  72.         ]
  73.       }
  74.     },
  75.     {
  76.       "name": "Out",
  77.       "superClass": [
  78.         "InOutBinding"
  79.       ],
  80.       "meta": {
  81.         "allowedIn": [
  82.           "bpmn:CallActivity"
  83.         ]
  84.       }
  85.     },
  86.     {
  87.       "name": "AsyncCapable",
  88.       "isAbstract": true,
  89.       "extends": [
  90.         "bpmn:Activity",
  91.         "bpmn:Gateway",
  92.         "bpmn:Event"
  93.       ],
  94.       "properties": [
  95.         {
  96.           "name": "async",
  97.           "isAttr": true,
  98.           "type": "Boolean",
  99.           "default": false
  100.         },
  101.         {
  102.           "name": "asyncBefore",
  103.           "isAttr": true,
  104.           "type": "Boolean",
  105.           "default": false
  106.         },
  107.         {
  108.           "name": "asyncAfter",
  109.           "isAttr": true,
  110.           "type": "Boolean",
  111.           "default": false
  112.         },
  113.         {
  114.           "name": "exclusive",
  115.           "isAttr": true,
  116.           "type": "Boolean",
  117.           "default": true
  118.         }
  119.       ]
  120.     },
  121.     {
  122.       "name": "JobPriorized",
  123.       "isAbstract": true,
  124.       "extends": [
  125.         "bpmn:Process",
  126.         "camunda:AsyncCapable"
  127.       ],
  128.       "properties": [
  129.         {
  130.           "name": "jobPriority",
  131.           "isAttr": true,
  132.           "type": "String"
  133.         }
  134.       ]
  135.     },
  136.     {
  137.       "name": "SignalEventDefinition",
  138.       "isAbstract": true,
  139.       "extends": [
  140.         "bpmn:SignalEventDefinition"
  141.       ],
  142.       "properties": [
  143.         {
  144.           "name": "async",
  145.           "isAttr": true,
  146.           "type": "Boolean",
  147.           "default": false
  148.         }
  149.       ]
  150.     },
  151.     {
  152.       "name": "ErrorEventDefinition",
  153.       "isAbstract": true,
  154.       "extends": [
  155.         "bpmn:ErrorEventDefinition"
  156.       ],
  157.       "properties": [
  158.         {
  159.           "name": "errorCodeVariable",
  160.           "isAttr": true,
  161.           "type": "String"
  162.         },
  163.         {
  164.           "name": "errorMessageVariable",
  165.           "isAttr": true,
  166.           "type": "String"
  167.         }
  168.       ]
  169.     },
  170.     {
  171.       "name": "Error",
  172.       "isAbstract": true,
  173.       "extends": [
  174.         "bpmn:Error"
  175.       ],
  176.       "properties": [
  177.         {
  178.           "name": "camunda:errorMessage",
  179.           "isAttr": true,
  180.           "type": "String"
  181.         }
  182.       ]
  183.     },
  184.     {
  185.       "name": "PotentialStarter",
  186.       "superClass": [
  187.         "Element"
  188.       ],
  189.       "properties": [
  190.         {
  191.           "name": "resourceAssignmentExpression",
  192.           "type": "bpmn:ResourceAssignmentExpression"
  193.         }
  194.       ]
  195.     },
  196.     {
  197.       "name": "FormSupported",
  198.       "isAbstract": true,
  199.       "extends": [
  200.         "bpmn:StartEvent",
  201.         "bpmn:UserTask"
  202.       ],
  203.       "properties": [
  204.         {
  205.           "name": "formHandlerClass",
  206.           "isAttr": true,
  207.           "type": "String"
  208.         },
  209.         {
  210.           "name": "formKey",
  211.           "isAttr": true,
  212.           "type": "String"
  213.         }
  214.       ]
  215.     },
  216.     {
  217.       "name": "TemplateSupported",
  218.       "isAbstract": true,
  219.       "extends": [
  220.         "bpmn:Process",
  221.         "bpmn:FlowElement"
  222.       ],
  223.       "properties": [
  224.         {
  225.           "name": "modelerTemplate",
  226.           "isAttr": true,
  227.           "type": "String"
  228.         }
  229.       ]
  230.     },
  231.     {
  232.       "name": "Initiator",
  233.       "isAbstract": true,
  234.       "extends": [ "bpmn:StartEvent" ],
  235.       "properties": [
  236.         {
  237.           "name": "initiator",
  238.           "isAttr": true,
  239.           "type": "String"
  240.         }
  241.       ]
  242.     },
  243.     {
  244.       "name": "ScriptTask",
  245.       "isAbstract": true,
  246.       "extends": [
  247.         "bpmn:ScriptTask"
  248.       ],
  249.       "properties": [
  250.         {
  251.           "name": "resultVariable",
  252.           "isAttr": true,
  253.           "type": "String"
  254.         },
  255.         {
  256.           "name": "resource",
  257.           "isAttr": true,
  258.           "type": "String"
  259.         }
  260.       ]
  261.     },
  262.     {
  263.       "name": "Process",
  264.       "isAbstract": true,
  265.       "extends": [
  266.         "bpmn:Process"
  267.       ],
  268.       "properties": [
  269.         {
  270.           "name": "candidateStarterGroups",
  271.           "isAttr": true,
  272.           "type": "String"
  273.         },
  274.         {
  275.           "name": "candidateStarterUsers",
  276.           "isAttr": true,
  277.           "type": "String"
  278.         },
  279.         {
  280.           "name": "versionTag",
  281.           "isAttr": true,
  282.           "type": "String"
  283.         },
  284.         {
  285.           "name": "historyTimeToLive",
  286.           "isAttr": true,
  287.           "type": "String"
  288.         },
  289.         {
  290.           "name": "isStartableInTasklist",
  291.           "isAttr": true,
  292.           "type": "Boolean",
  293.           "default": true
  294.         }
  295.       ]
  296.     },
  297.     {
  298.       "name": "EscalationEventDefinition",
  299.       "isAbstract": true,
  300.       "extends": [
  301.         "bpmn:EscalationEventDefinition"
  302.       ],
  303.       "properties": [
  304.         {
  305.           "name": "escalationCodeVariable",
  306.           "isAttr": true,
  307.           "type": "String"
  308.         }
  309.       ]
  310.     },
  311.     {
  312.       "name": "FormalExpression",
  313.       "isAbstract": true,
  314.       "extends": [
  315.         "bpmn:FormalExpression"
  316.       ],
  317.       "properties": [
  318.         {
  319.           "name": "resource",
  320.           "isAttr": true,
  321.           "type": "String"
  322.         }
  323.       ]
  324.     },
  325.     {
  326.       "name": "Assignable",
  327.       "extends": [ "bpmn:UserTask" ],
  328.       "properties": [
  329.         {
  330.           "name": "assignee",
  331.           "isAttr": true,
  332.           "type": "String"
  333.         },
  334.         {
  335.           "name": "candidateUsers",
  336.           "isAttr": true,
  337.           "type": "String"
  338.         },
  339.         {
  340.           "name": "candidateGroups",
  341.           "isAttr": true,
  342.           "type": "String"
  343.         },
  344.         {
  345.           "name": "dueDate",
  346.           "isAttr": true,
  347.           "type": "String"
  348.         },
  349.         {
  350.           "name": "followUpDate",
  351.           "isAttr": true,
  352.           "type": "String"
  353.         },
  354.         {
  355.           "name": "priority",
  356.           "isAttr": true,
  357.           "type": "String"
  358.         }
  359.       ]
  360.     },
  361.     {
  362.       "name": "CallActivity",
  363.       "extends": [ "bpmn:CallActivity" ],
  364.       "properties": [
  365.         {
  366.           "name": "calledElementBinding",
  367.           "isAttr": true,
  368.           "type": "String",
  369.           "default": "latest"
  370.         },
  371.         {
  372.           "name": "calledElementVersion",
  373.           "isAttr": true,
  374.           "type": "String"
  375.         },
  376.         {
  377.           "name": "calledElementVersionTag",
  378.           "isAttr": true,
  379.           "type": "String"
  380.         },
  381.         {
  382.           "name": "calledElementTenantId",
  383.           "isAttr": true,
  384.           "type": "String"
  385.         },
  386.         {
  387.           "name": "caseRef",
  388.           "isAttr": true,
  389.           "type": "String"
  390.         },
  391.         {
  392.           "name": "caseBinding",
  393.           "isAttr": true,
  394.           "type": "String",
  395.           "default": "latest"
  396.         },
  397.         {
  398.           "name": "caseVersion",
  399.           "isAttr": true,
  400.           "type": "String"
  401.         },
  402.         {
  403.           "name": "caseTenantId",
  404.           "isAttr": true,
  405.           "type": "String"
  406.         },
  407.         {
  408.           "name": "variableMappingClass",
  409.           "isAttr": true,
  410.           "type": "String"
  411.         },
  412.         {
  413.           "name": "variableMappingDelegateExpression",
  414.           "isAttr": true,
  415.           "type": "String"
  416.         }
  417.       ]
  418.     },
  419.     {
  420.       "name": "ServiceTaskLike",
  421.       "extends": [
  422.         "bpmn:ServiceTask",
  423.         "bpmn:BusinessRuleTask",
  424.         "bpmn:SendTask",
  425.         "bpmn:MessageEventDefinition"
  426.       ],
  427.       "properties": [
  428.         {
  429.           "name": "expression",
  430.           "isAttr": true,
  431.           "type": "String"
  432.         },
  433.         {
  434.           "name": "class",
  435.           "isAttr": true,
  436.           "type": "String"
  437.         },
  438.         {
  439.           "name": "delegateExpression",
  440.           "isAttr": true,
  441.           "type": "String"
  442.         },
  443.         {
  444.           "name": "resultVariable",
  445.           "isAttr": true,
  446.           "type": "String"
  447.         }
  448.       ]
  449.     },
  450.     {
  451.       "name": "DmnCapable",
  452.       "extends": [
  453.         "bpmn:BusinessRuleTask"
  454.       ],
  455.       "properties": [
  456.         {
  457.           "name": "decisionRef",
  458.           "isAttr": true,
  459.           "type": "String"
  460.         },
  461.         {
  462.           "name": "decisionRefBinding",
  463.           "isAttr": true,
  464.           "type": "String",
  465.           "default": "latest"
  466.         },
  467.         {
  468.           "name": "decisionRefVersion",
  469.           "isAttr": true,
  470.           "type": "String"
  471.         },
  472.         {
  473.           "name": "mapDecisionResult",
  474.           "isAttr": true,
  475.           "type": "String",
  476.           "default": "resultList"
  477.         },
  478.         {
  479.           "name": "decisionRefTenantId",
  480.           "isAttr": true,
  481.           "type": "String"
  482.         }
  483.       ]
  484.     },
  485.     {
  486.       "name": "ExternalCapable",
  487.       "extends": [
  488.         "camunda:ServiceTaskLike"
  489.       ],
  490.       "properties": [
  491.         {
  492.           "name": "type",
  493.           "isAttr": true,
  494.           "type": "String"
  495.         },
  496.         {
  497.           "name": "topic",
  498.           "isAttr": true,
  499.           "type": "String"
  500.         }
  501.       ]
  502.     },
  503.     {
  504.       "name": "TaskPriorized",
  505.       "extends": [
  506.         "bpmn:Process",
  507.         "camunda:ExternalCapable"
  508.       ],
  509.       "properties": [
  510.         {
  511.           "name": "taskPriority",
  512.           "isAttr": true,
  513.           "type": "String"
  514.         }
  515.       ]
  516.     },
  517.     {
  518.       "name": "Properties",
  519.       "superClass": [
  520.         "Element"
  521.       ],
  522.       "meta": {
  523.         "allowedIn": [ "*" ]
  524.       },
  525.       "properties": [
  526.         {
  527.           "name": "values",
  528.           "type": "Property",
  529.           "isMany": true
  530.         }
  531.       ]
  532.     },
  533.     {
  534.       "name": "Property",
  535.       "superClass": [
  536.         "Element"
  537.       ],
  538.       "properties": [
  539.         {
  540.           "name": "id",
  541.           "type": "String",
  542.           "isAttr": true
  543.         },
  544.         {
  545.           "name": "name",
  546.           "type": "String",
  547.           "isAttr": true
  548.         },
  549.         {
  550.           "name": "value",
  551.           "type": "String",
  552.           "isAttr": true
  553.         }
  554.       ]
  555.     },
  556.     {
  557.       "name": "Connector",
  558.       "superClass": [
  559.         "Element"
  560.       ],
  561.       "meta": {
  562.         "allowedIn": [
  563.           "camunda:ServiceTaskLike"
  564.         ]
  565.       },
  566.       "properties": [
  567.         {
  568.           "name": "inputOutput",
  569.           "type": "InputOutput"
  570.         },
  571.         {
  572.           "name": "connectorId",
  573.           "type": "String"
  574.         }
  575.       ]
  576.     },
  577.     {
  578.       "name": "InputOutput",
  579.       "superClass": [
  580.         "Element"
  581.       ],
  582.       "meta": {
  583.         "allowedIn": [
  584.           "bpmn:FlowNode",
  585.           "camunda:Connector"
  586.         ]
  587.       },
  588.       "properties": [
  589.         {
  590.           "name": "inputOutput",
  591.           "type": "InputOutput"
  592.         },
  593.         {
  594.           "name": "connectorId",
  595.           "type": "String"
  596.         },
  597.         {
  598.           "name": "inputParameters",
  599.           "isMany": true,
  600.           "type": "InputParameter"
  601.         },
  602.         {
  603.           "name": "outputParameters",
  604.           "isMany": true,
  605.           "type": "OutputParameter"
  606.         }
  607.       ]
  608.     },
  609.     {
  610.       "name": "InputOutputParameter",
  611.       "properties": [
  612.         {
  613.           "name": "name",
  614.           "isAttr": true,
  615.           "type": "String"
  616.         },
  617.         {
  618.           "name": "value",
  619.           "isBody": true,
  620.           "type": "String"
  621.         },
  622.         {
  623.           "name": "definition",
  624.           "type": "InputOutputParameterDefinition"
  625.         }
  626.       ]
  627.     },
  628.     {
  629.       "name": "InputOutputParameterDefinition",
  630.       "isAbstract": true
  631.     },
  632.     {
  633.       "name": "List",
  634.       "superClass": [ "InputOutputParameterDefinition" ],
  635.       "properties": [
  636.         {
  637.           "name": "items",
  638.           "isMany": true,
  639.           "type": "InputOutputParameterDefinition"
  640.         }
  641.       ]
  642.     },
  643.     {
  644.       "name": "Map",
  645.       "superClass": [ "InputOutputParameterDefinition" ],
  646.       "properties": [
  647.         {
  648.           "name": "entries",
  649.           "isMany": true,
  650.           "type": "Entry"
  651.         }
  652.       ]
  653.     },
  654.     {
  655.       "name": "Entry",
  656.       "properties": [
  657.         {
  658.           "name": "key",
  659.           "isAttr": true,
  660.           "type": "String"
  661.         },
  662.         {
  663.           "name": "value",
  664.           "isBody": true,
  665.           "type": "String"
  666.         },
  667.         {
  668.           "name": "definition",
  669.           "type": "InputOutputParameterDefinition"
  670.         }
  671.       ]
  672.     },
  673.     {
  674.       "name": "Value",
  675.       "superClass": [
  676.         "InputOutputParameterDefinition"
  677.       ],
  678.       "properties": [
  679.         {
  680.           "name": "id",
  681.           "isAttr": true,
  682.           "type": "String"
  683.         },
  684.         {
  685.           "name": "name",
  686.           "isAttr": true,
  687.           "type": "String"
  688.         },
  689.         {
  690.           "name": "value",
  691.           "isBody": true,
  692.           "type": "String"
  693.         }
  694.       ]
  695.     },
  696.     {
  697.       "name": "Script",
  698.       "superClass": [ "InputOutputParameterDefinition" ],
  699.       "properties": [
  700.         {
  701.           "name": "scriptFormat",
  702.           "isAttr": true,
  703.           "type": "String"
  704.         },
  705.         {
  706.           "name": "resource",
  707.           "isAttr": true,
  708.           "type": "String"
  709.         },
  710.         {
  711.           "name": "value",
  712.           "isBody": true,
  713.           "type": "String"
  714.         }
  715.       ]
  716.     },
  717.     {
  718.       "name": "Field",
  719.       "superClass": [ "Element" ],
  720.       "meta": {
  721.         "allowedIn": [
  722.           "camunda:ServiceTaskLike",
  723.           "camunda:ExecutionListener",
  724.           "camunda:TaskListener"
  725.         ]
  726.       },
  727.       "properties": [
  728.         {
  729.           "name": "name",
  730.           "isAttr": true,
  731.           "type": "String"
  732.         },
  733.         {
  734.           "name": "expression",
  735.           "type": "String"
  736.         },
  737.         {
  738.           "name": "stringValue",
  739.           "isAttr": true,
  740.           "type": "String"
  741.         },
  742.         {
  743.           "name": "string",
  744.           "type": "String"
  745.         }
  746.       ]
  747.     },
  748.     {
  749.       "name": "InputParameter",
  750.       "superClass": [ "InputOutputParameter" ]
  751.     },
  752.     {
  753.       "name": "OutputParameter",
  754.       "superClass": [ "InputOutputParameter" ]
  755.     },
  756.     {
  757.       "name": "Collectable",
  758.       "isAbstract": true,
  759.       "extends": [ "bpmn:MultiInstanceLoopCharacteristics" ],
  760.       "superClass": [ "camunda:AsyncCapable" ],
  761.       "properties": [
  762.         {
  763.           "name": "collection",
  764.           "isAttr": true,
  765.           "type": "String"
  766.         },
  767.         {
  768.           "name": "elementVariable",
  769.           "isAttr": true,
  770.           "type": "String"
  771.         }
  772.       ]
  773.     },
  774.     {
  775.       "name": "FailedJobRetryTimeCycle",
  776.       "superClass": [ "Element" ],
  777.       "meta": {
  778.         "allowedIn": [
  779.           "camunda:AsyncCapable",
  780.           "bpmn:MultiInstanceLoopCharacteristics"
  781.         ]
  782.       },
  783.       "properties": [
  784.         {
  785.           "name": "body",
  786.           "isBody": true,
  787.           "type": "String"
  788.         }
  789.       ]
  790.     },
  791.     {
  792.       "name": "ExecutionListener",
  793.       "superClass": [ "Element" ],
  794.       "meta": {
  795.         "allowedIn": [
  796.           "bpmn:Task",
  797.           "bpmn:ServiceTask",
  798.           "bpmn:UserTask",
  799.           "bpmn:BusinessRuleTask",
  800.           "bpmn:ScriptTask",
  801.           "bpmn:ReceiveTask",
  802.           "bpmn:ManualTask",
  803.           "bpmn:ExclusiveGateway",
  804.           "bpmn:SequenceFlow",
  805.           "bpmn:ParallelGateway",
  806.           "bpmn:InclusiveGateway",
  807.           "bpmn:EventBasedGateway",
  808.           "bpmn:StartEvent",
  809.           "bpmn:IntermediateCatchEvent",
  810.           "bpmn:IntermediateThrowEvent",
  811.           "bpmn:EndEvent",
  812.           "bpmn:BoundaryEvent",
  813.           "bpmn:CallActivity",
  814.           "bpmn:SubProcess",
  815.           "bpmn:Process"
  816.         ]
  817.       },
  818.       "properties": [
  819.         {
  820.           "name": "expression",
  821.           "isAttr": true,
  822.           "type": "String"
  823.         },
  824.         {
  825.           "name": "class",
  826.           "isAttr": true,
  827.           "type": "String"
  828.         },
  829.         {
  830.           "name": "delegateExpression",
  831.           "isAttr": true,
  832.           "type": "String"
  833.         },
  834.         {
  835.           "name": "event",
  836.           "isAttr": true,
  837.           "type": "String"
  838.         },
  839.         {
  840.           "name": "script",
  841.           "type": "Script"
  842.         },
  843.         {
  844.           "name": "fields",
  845.           "type": "Field",
  846.           "isMany": true
  847.         }
  848.       ]
  849.     },
  850.     {
  851.       "name": "TaskListener",
  852.       "superClass": [ "Element" ],
  853.       "meta": {
  854.         "allowedIn": [
  855.           "bpmn:UserTask"
  856.         ]
  857.       },
  858.       "properties": [
  859.         {
  860.           "name": "expression",
  861.           "isAttr": true,
  862.           "type": "String"
  863.         },
  864.         {
  865.           "name": "class",
  866.           "isAttr": true,
  867.           "type": "String"
  868.         },
  869.         {
  870.           "name": "delegateExpression",
  871.           "isAttr": true,
  872.           "type": "String"
  873.         },
  874.         {
  875.           "name": "event",
  876.           "isAttr": true,
  877.           "type": "String"
  878.         },
  879.         {
  880.           "name": "script",
  881.           "type": "Script"
  882.         },
  883.         {
  884.           "name": "fields",
  885.           "type": "Field",
  886.           "isMany": true
  887.         },
  888.         {
  889.           "name": "id",
  890.           "type": "String",
  891.           "isAttr": true
  892.         },
  893.         {
  894.           "name": "eventDefinitions",
  895.           "type": "bpmn:TimerEventDefinition",
  896.           "isMany": true
  897.         }
  898.       ]
  899.     },
  900.     {
  901.       "name": "FormProperty",
  902.       "superClass": [ "Element" ],
  903.       "meta": {
  904.         "allowedIn": [
  905.           "bpmn:StartEvent",
  906.           "bpmn:UserTask"
  907.         ]
  908.       },
  909.       "properties": [
  910.         {
  911.           "name": "id",
  912.           "type": "String",
  913.           "isAttr": true
  914.         },
  915.         {
  916.           "name": "name",
  917.           "type": "String",
  918.           "isAttr": true
  919.         },
  920.         {
  921.           "name": "type",
  922.           "type": "String",
  923.           "isAttr": true
  924.         },
  925.         {
  926.           "name": "required",
  927.           "type": "String",
  928.           "isAttr": true
  929.         },
  930.         {
  931.           "name": "readable",
  932.           "type": "String",
  933.           "isAttr": true
  934.         },
  935.         {
  936.           "name": "writable",
  937.           "type": "String",
  938.           "isAttr": true
  939.         },
  940.         {
  941.           "name": "variable",
  942.           "type": "String",
  943.           "isAttr": true
  944.         },
  945.         {
  946.           "name": "expression",
  947.           "type": "String",
  948.           "isAttr": true
  949.         },
  950.         {
  951.           "name": "datePattern",
  952.           "type": "String",
  953.           "isAttr": true
  954.         },
  955.         {
  956.           "name": "default",
  957.           "type": "String",
  958.           "isAttr": true
  959.         },
  960.         {
  961.           "name": "values",
  962.           "type": "Value",
  963.           "isMany": true
  964.         }
  965.       ]
  966.     },
  967.     {
  968.       "name": "FormData",
  969.       "superClass": [ "Element" ],
  970.       "meta": {
  971.         "allowedIn": [
  972.           "bpmn:StartEvent",
  973.           "bpmn:UserTask"
  974.         ]
  975.       },
  976.       "properties": [
  977.         {
  978.           "name": "fields",
  979.           "type": "FormField",
  980.           "isMany": true
  981.         },
  982.         {
  983.           "name": "businessKey",
  984.           "type": "String",
  985.           "isAttr": true
  986.         }
  987.       ]
  988.     },
  989.     {
  990.       "name": "FormField",
  991.       "superClass": [ "Element" ],
  992.       "properties": [
  993.         {
  994.           "name": "id",
  995.           "type": "String",
  996.           "isAttr": true
  997.         },
  998.         {
  999.           "name": "label",
  1000.           "type": "String",
  1001.           "isAttr": true
  1002.         },
  1003.         {
  1004.           "name": "type",
  1005.           "type": "String",
  1006.           "isAttr": true
  1007.         },
  1008.         {
  1009.           "name": "datePattern",
  1010.           "type": "String",
  1011.           "isAttr": true
  1012.         },
  1013.         {
  1014.           "name": "defaultValue",
  1015.           "type": "String",
  1016.           "isAttr": true
  1017.         },
  1018.         {
  1019.           "name": "properties",
  1020.           "type": "Properties"
  1021.         },
  1022.         {
  1023.           "name": "validation",
  1024.           "type": "Validation"
  1025.         },
  1026.         {
  1027.           "name": "values",
  1028.           "type": "Value",
  1029.           "isMany": true
  1030.         }
  1031.       ]
  1032.     },
  1033.     {
  1034.       "name": "Validation",
  1035.       "superClass": [ "Element" ],
  1036.       "properties": [
  1037.         {
  1038.           "name": "constraints",
  1039.           "type": "Constraint",
  1040.           "isMany": true
  1041.         }
  1042.       ]
  1043.     },
  1044.     {
  1045.       "name": "Constraint",
  1046.       "superClass": [ "Element" ],
  1047.       "properties": [
  1048.         {
  1049.           "name": "name",
  1050.           "type": "String",
  1051.           "isAttr": true
  1052.         },
  1053.         {
  1054.           "name": "config",
  1055.           "type": "String",
  1056.           "isAttr": true
  1057.         }
  1058.       ]
  1059.     },
  1060.     {
  1061.       "name": "ConditionalEventDefinition",
  1062.       "isAbstract": true,
  1063.       "extends": [
  1064.         "bpmn:ConditionalEventDefinition"
  1065.       ],
  1066.       "properties": [
  1067.         {
  1068.           "name": "variableName",
  1069.           "isAttr": true,
  1070.           "type": "String"
  1071.         },
  1072.         {
  1073.           "name": "variableEvent",
  1074.           "isAttr": true,
  1075.           "type": "String"
  1076.         }
  1077.       ]
  1078.     }
  1079.   ],
  1080.   "emumerations": [ ]
  1081. }

 

全部代码

  1. <template>
  2.   <div class="containerBox">
  3.     <div id="container"></div>
  4.     <div class="nodeInfo" style="width:20%">
  5.       <el-form size="mini" label-width="80px" :model="form">
  6.         <el-form-item label="昵称：">
  7.           <el-input v-model.trim="form.selfName" style="width: 25%"></el-input>
  8.         </el-form-item>
  9.         <el-form-item label="年龄：">
  10.           <el-checkbox-group v-model="form.interestFood">
  11.             <el-checkbox label="苹果"></el-checkbox>
  12.             <el-checkbox label="香蕉"></el-checkbox>
  13.             <el-checkbox label="草莓蛋糕"></el-checkbox>
  14.             <el-checkbox label="西瓜"></el-checkbox>
  15.           </el-checkbox-group>
  16.         </el-form-item>
  17.         <h4>详细信息</h4>
  18.         <el-form-item label="班级：">
  19.           <el-input v-model.trim="form.nodeDesc.class" style="width: 25%"></el-input>
  20.         </el-form-item>
  21.         <el-form-item label="年龄：">
  22.           <el-input v-model.trim="form.nodeDesc.age" style="width: 25%"></el-input>
  23.         </el-form-item>
  24.       </el-form>
  25.     </div>
  26.   </div>
  27. </template>
  28. <script>
  29.   import BpmnModeler from 'bpmn-js/lib/Modeler'
  30.   import camundaExtension from './camunda.json'
  31.   import {processAddOrEdit, getProcess} from '@/utils/request'
  32.   // import { resolve } from 'path'
  33.  
  34. export default {
  35.     name: 'jsonToXml',
  36.     props: {
  37.       digitazationId: {
  38.         type: String,
  39.         default: ''
  40.       },
  41.       title: {
  42.         type: String,
  43.         default: ''
  44.       }
  45.     },
  46.     data () {
  47.       return {
  48.         containerEl: null,
  49.         bpmnModeler: null,
  50.         nodeName: '',
  51.         form: {
  52.           id: '',
  53.           selfName: '',
  54.           nodeDesc: {
  55.             class: '',
  56.             age: ''
  57.           },
  58.           interestFood: []
  59.         },
  60.         chart: '<?xml version="1.0" encoding="UTF-8"?>\n' +
  61.           '<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' +
  62.           '  <bpmn:process id="Process_1" isExecutable="false">\n' +
  63.           '    <bpmn:startEvent id="StartEvent_1">\n' +
  64.           '      <bpmn:outgoing>Flow_09dyrc9</bpmn:outgoing>\n' +
  65.           '    </bpmn:startEvent>\n' +
  66.           '    <bpmn:userTask id="Activity_0igip2e" name="第一名111">\n' +
  67.           '      <bpmn:extensionElements>\n' +
  68.           '        <camunda:inputOutput>\n' +
  69.           '          <camunda:inputParameter name="selfName">少年的你</camunda:inputParameter>\n' +
  70.           '          <camunda:inputParameter name="nodeDesc">\n' +
  71.           '            <camunda:map>\n' +
  72.           '              <camunda:entry key="class">一年一班</camunda:entry>\n' +
  73.           '              <camunda:entry key="age">8</camunda:entry>\n' +
  74.           '            </camunda:map>\n' +
  75.           '          </camunda:inputParameter>\n' +
  76.           '          <camunda:inputParameter name="interestFood">\n' +
  77.           '            <camunda:list>\n' +
  78.           '              <camunda:value>苹果</camunda:value>\n' +
  79.           '              <camunda:value>香蕉</camunda:value>\n' +
  80.           '              <camunda:value>西瓜</camunda:value>\n' +
  81.           '            </camunda:list>\n' +
  82.           '          </camunda:inputParameter>\n' +
  83.           '        </camunda:inputOutput>\n' +
  84.           '      </bpmn:extensionElements>\n' +
  85.           '      <bpmn:incoming>Flow_09dyrc9</bpmn:incoming>\n' +
  86.           '      <bpmn:outgoing>Flow_03cqlix</bpmn:outgoing>\n' +
  87.           '    </bpmn:userTask>\n' +
  88.  
  89.           '    <bpmn:endEvent id="Event_1lh7sje">\n' +
  90.           '      <bpmn:incoming>Flow_03cqlix</bpmn:incoming>\n' +
  91.           '    </bpmn:endEvent>\n' +
  92.           '    <bpmn:sequenceFlow id="Flow_09dyrc9" sourceRef="StartEvent_1" targetRef="Activity_0igip2e" />\n' +
  93.           '    <bpmn:sequenceFlow id="Flow_03cqlix" sourceRef="Activity_0igip2e" targetRef="Event_1lh7sje" />\n' +
  94.           '    <bpmn:sequenceFlow id="Flow_07j5ahi" sourceRef="Activity_0igip2e" targetRef="Gateway_11lk0du" />\n' +
  95.           '    <bpmn:sequenceFlow id="Flow_1bdnoii" sourceRef="Activity_0igip2e" targetRef="Gateway_11lk0du" />\n' +
  96.           '  </bpmn:process>\n' +
  97.           '  <bpmndi:BPMNDiagram id="BPMNDiagram_1">\n' +
  98.           '    <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1">\n' +
  99.           '      <bpmndi:BPMNShape id="_BPMNShape_StartEvent_2" bpmnElement="StartEvent_1">\n' +
  100.           '        <dc:Bounds x="173" y="102" width="36" height="36" />\n' +
  101.           '      </bpmndi:BPMNShape>\n' +
  102.           '      <bpmndi:BPMNShape id="Activity_0igip2e_di" bpmnElement="Activity_0igip2e">\n' +
  103.           '        <dc:Bounds x="310" y="80" width="100" height="80" />\n' +
  104.           '      </bpmndi:BPMNShape>\n' +
  105.           '      <bpmndi:BPMNShape id="Gateway_11lk0du_di" bpmnElement="Gateway_11lk0du">\n' +
  106.           '        <dc:Bounds x="310" y="180" width="100" height="80" />\n' +
  107.           '      </bpmndi:BPMNShape>\n' +
  108.           '      <bpmndi:BPMNShape id="Event_1lh7sje_di" bpmnElement="Event_1lh7sje">\n' +
  109.           '        <dc:Bounds x="502" y="102" width="36" height="36" />\n' +
  110.           '      </bpmndi:BPMNShape>\n' +
  111.           '      <bpmndi:BPMNEdge id="Flow_09dyrc9_di" bpmnElement="Flow_09dyrc9">\n' +
  112.           '        <di:waypoint x="209" y="120" />\n' +
  113.           '        <di:waypoint x="310" y="120" />\n' +
  114.           '      </bpmndi:BPMNEdge>\n' +
  115.           '      <bpmndi:BPMNEdge id="Flow_03cqlix_di" bpmnElement="Flow_03cqlix">\n' +
  116.           '        <di:waypoint x="410" y="120" />\n' +
  117.           '        <di:waypoint x="502" y="120" />\n' +
  118.           '      </bpmndi:BPMNEdge>\n' +
  119.           '    </bpmndi:BPMNPlane>\n' +
  120.           '  </bpmndi:BPMNDiagram>\n' +
  121.           '</bpmn:definitions>'
  122.       }
  123.     },
  124.     mounted () {
  125.       // 获取流程图
  126.       if(this.title === '编辑') {
  127.         this.getProcessData()
  128.       }
  129.       this.containerEl = document.getElementById('container')
  130.       this.bpmnModeler = new BpmnModeler({
  131.         container: this.containerEl,
  132.         moddleExtensions: {camunda: camundaExtension}
  133.       })
  134.       this.showChart()
  135.     },
  136.     methods: {
  137.       // 获取流程图
  138.       getProcessData(){
  139.         getProcess(this.digitazationId).then(res => {
  140.           if(res.code === 200) {
  141.             this.chart = res.data.nodeText
  142.             this.showChart()
  143.           }
  144.         })
  145.       },
  146.       json2xml () {
  147.         const elementRegistry = this.bpmnModeler.get('elementRegistry')
  148.         const bpmnFactory = this.bpmnModeler.get('bpmnFactory')
  149.         const modeling = this.bpmnModeler.get('modeling')
  150.         // “elementRegistry.get” 根据节点id找到节点实例，为其在xml写入添加属性
  151.         const element = elementRegistry.get(this.form.id)
  152.         // 存在找不到节点的情况，那说明节点在点击后，被删除了
  153.         if (element !== undefined) {
  154.           const extensionElements = bpmnFactory.create('bpmn:ExtensionElements')
  155.           const inputOutput = bpmnFactory.create('camunda:InputOutput')
  156.           extensionElements.values = [inputOutput]
  157.           inputOutput.inputParameters = []
  158.           // 遍历this.form，将其各个属性进行循环写入extensionElements
  159.           for (const nodeKey in this.form) {
  160.             let inputParameter = null
  161.             // 1、属性值为单个值，即布尔、字符串、数字
  162.             if (
  163.               (typeof this.form[nodeKey] === 'string' && this.form[nodeKey] !== '') ||
  164.               typeof this.form[nodeKey] === 'boolean' ||
  165.               typeof this.form[nodeKey] === 'number'
  166.             ) {
  167.               inputParameter = bpmnFactory.create('camunda:InputParameter', {
  168.                 name: nodeKey,
  169.                   // 布尔值和数字影响生成xml，都要转成字符串
  170.                 value: typeof this.form[nodeKey] === 'string' ? this.form[nodeKey] : JSON.stringify(this.form[nodeKey])
  171.               }
  172.               )
  173.               //  2.属性值为数组或对象
  174.             } else if (typeof this.form[nodeKey] === 'object') {
  175.               // 2.1 属性值为数组，对应案例中 '爱吃'字段，checkbox多选
  176.               if (this.form[nodeKey] instanceof Array) {
  177.                 if (this.form[nodeKey].length) {
  178.                   inputParameter = bpmnFactory.create('camunda:InputParameter', {name: nodeKey})
  179.                   const list = bpmnFactory.create('camunda:List')
  180.                   list.items = []
  181.                   this.form[nodeKey].forEach((item) => {
  182.                     const itemValue = bpmnFactory.create('camunda:Value', {value: item})
  183.                     list.items.push(itemValue)
  184.                   })
  185.                   inputParameter.definition = list
  186.                 }
  187.               } else {
  188.                 // 2.2 此时属性值是对象，对应案例中 '详细信息'
  189.                 if (JSON.stringify(this.form[nodeKey]) === '{}') continue
  190.                 inputParameter = bpmnFactory.create('camunda:InputParameter', {name: nodeKey})
  191.                 const map = bpmnFactory.create('camunda:Map')
  192.                 map.entries = []
  193.                 for (const mapKey in this.form[nodeKey]) {
  194.                   if (this.form[nodeKey][mapKey] !== '') {
  195.                     const itemValue = bpmnFactory.create('camunda:Entry', {
  196.                       key: mapKey,
  197.                       value: this.form[nodeKey][mapKey]
  198.                     })
  199.                     map.entries.push(itemValue)
  200.                   }
  201.                   inputParameter.definition = map
  202.                 }
  203.               }
  204.             }
  205.             inputParameter !== null && inputOutput.inputParameters.push(inputParameter)
  206.           }
  207.           modeling.updateProperties(element, {extensionElements})
  208.         }
  209.         return new Promise(resolve => {
  210.           this.bpmnModeler.saveXML({format: true}, (err, xml) => {
  211.             console.log(err)
  212.             resolve(xml)
  213.           })
  214.         })
  215.       },
  216.       splitBusiness2Json (businessObject) {
  217.         let formData = {}
  218.         // 此时这个id必须要，因为json生成xml时，节点id是找到节点的唯一标识
  219.         formData['id'] = businessObject.id
  220.         let params = this.getExtensionElement(businessObject, 'camunda:InputOutput')
  221.         if (params && params.inputParameters) {
  222.           params.inputParameters.forEach((item) => {
  223.             let definition = item.definition
  224.             if (definition) {
  225.               if (definition.$type === 'camunda:List') {
  226.                 let arr = []
  227.                 definition.items.forEach((itemsItem) => {
  228.                   arr.push(itemsItem.value)
  229.                 })
  230.                 formData[item.name] = arr
  231.               } else if (definition.$type === 'camunda:Map') {
  232.                 let obj = {}
  233.                 if (definition.entries) {
  234.                   definition.entries.forEach((entriesItem) => {
  235.                     obj[entriesItem.key] = entriesItem.value
  236.                   })
  237.                   formData[item.name] = obj
  238.                 }
  239.               }
  240.             } else {
  241.               formData[item.name] = item.value
  242.             }
  243.           })
  244.         }
  245.         this.form = formData
  246.       },
  247.  
  248.       getExtensionElement (element, type) {
  249.         if (!element.extensionElements) {
  250.           return
  251.         }
  252.         return element.extensionElements.values.filter((extensionElement) => {
  253.           return extensionElement.$instanceOf(type)
  254.         })[0]
  255.       },
  256.       addEventBusListener () {
  257.         let eventBus = this.bpmnModeler.get('eventBus')
  258.         // 注册节点事件，eventTypes中可以写多个事件
  259.         let eventTypes = ['element.click']
  260.         eventTypes.forEach((eventType) => {
  261.           eventBus.on(eventType, (e) => {
  262.             let {element} = e
  263.             if (!element.parent) return
  264.             if (!e || element.type === 'bpmn:Process') {
  265.               return false
  266.             } else {
  267.               if (eventType === 'element.click') {
  268.                 let businessObject = element.businessObject || element
  269.                 // 此时的businessObject 是我们想要的万能的小可爱
  270.                 this.splitBusiness2Json(businessObject)
  271.               }
  272.             }
  273.           })
  274.         })
  275.       },
  276.       // 流程图回显
  277.       showChart () {
  278.         this.bpmnModeler.importXML(this.chart, (err) => {
  279.           if (!err) {
  280.             this.addEventBusListener()
  281.           }
  282.         })
  283.       },
  284.       // 添加或编辑流程图
  285.       async getProcessAddOrEdit(){
  286.         let data
  287.         if(this.title === '新增'){
  288.           data = {
  289.             planId: this.digitazationId,
  290.             nodeText: this.chart
  291.           }
  292.         }else {
  293.           let nodeText = await this.json2xml()
  294.           data = {
  295.             planId: this.digitazationId,
  296.             nodeText
  297.           }
  298.         }
  299.         console.log(data)
  300.         processAddOrEdit(data).then(res => {
  301.           if(res.code === 200) {
  302.             this.$message.success(res.data)
  303.           }
  304.         })
  305.       }
  306.     }
  307.   }
  308. </script>
  309. <style lang="scss">
  310. .bjs-powered-by{
  311.   display: none;
  312. }
  313.   .containerBox {
  314.     display: flex;
  315.     justify-content: space-around;
  316.     height: calc(100vh - 220px);
  317.   }
  318.   #container {
  319.       height: calc(100% - 50px);
  320.     }
  321.  
  322.     #container, .nodeInfo {
  323.       width: 50%;
  324.       display: inline-block;
  325.       height: calc(100% - 50px);
  326.     }
  327. </style>
  328.

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

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

  

闽ICP备14008679号