vue项目中使用bpmn-流程图json属性转xml（七篇更新完成）

内容概述

本系列“vue项目中使用bpmn-xxxx”分为七篇，均为自己使用过程中用到的实例，手工原创，目前陆续更新中。主要包括vue项目中bpmn使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。如果转载或通过爬虫直接爬的，格式特别丑，请来原创看：我是作者原文

前情提要

上一节我们讨论了将xml中的节点属性，转成前端常用的json格式。这一篇，我们来讨论更改了json后，如何写入到xml中去。首先，我们通过一张图看看流程图xml和json结构的对应关系。一定要仔细看，这张图理解了，这篇文章就理解一半了。

思路分析

xlm中，属性包裹在<bpmn:extensionElements>中，下一层分别是<camunda:inputOutput>和<camunda:inputParameter>，inputParameter的下一层，会有三种格式。上一节我们读取属性也是按照这个顺序，层层遍历拿到的属性值。

所以，我们本次的出发点，是根据json各字段的属性类型，从里向外为<bpmn:extensionElements>添加内容。步骤如下：

1.elementRegistry.get 和节点id找到节点实例element，因为写入xml的时候需要知道为哪个节点写属性

2.bpmnFactory.create ，顾名思义，作用为创建标签。通过该方法创建<bpmn:extensionElements>元素，并通过对this.form的遍历，不断为其添加子元素。

3.通过modeling.updateProperties(element, {extensionElements});更新business中的节点xml。参数1 步骤1中提到的节点实例e