当前位置:   article > 正文

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

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

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

闽ICP备14008679号