首页 头条正文

联博开奖:vue项目中使用bpmn-流程图json属性转xml(七篇更新完成)

欧博网址 头条 2020-05-22 15:05:25 9 0

内容概述

本系列“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中提到的节点实例element,参数2是步骤2天生的<bpmn:extensionElements>

代码实现

代码焦点主要集中在天生<bpmn:extensionElements>,并为其添加子元素。

上张图片中的this.form,属性值分为三种数据类型

1.单一值:字符串(string),数字(Number)或布尔(boolean),对应天生一个<camunda:inputParameter>,且没有子元素

2.Object:

  2.1 数组,对应天生一个<camunda:inputParameter>,且有子元素<camunda:list>,<camunda:list>包罗多个<camunda:value>

  2.2 工具,对应天生一个<camunda:inputParameter>,且有子元素<camunda:map>,<camunda:list>包罗多<camunda:entry>

焦点如下:

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});

功效验证

此时,我们修改一下表单属性,通过控制台看一下最新的xml:

可以看到,xml已经被更新,且值和页面中表单项的值完全一致。完成!七篇文章的整个项目源码是个文件夹,我太笨了,不知道怎样传到博客里。以是,想要获取bpmn完整源码的小伙伴, 可以民众号联系我,扫下面二维码或民众号搜“Lemoncool”,即可获取~

后续

直到现在,本系列“vue项目中使用bpmn-xxxx”七篇文章已经更新完成。都是总结自己开发中遇到的疑惑和知识点,不是很系统。另有许多小的知识点,不太成系统的,就没有纳入文章内,若是需要的话,后面可能会在民众号更新。

也迎接使用bpmn的小伙伴,通过博客或民众号与我交流,人人一起爬坑,共同进步!

,

欧博注册网址

www.mmsff.com欢迎进入欧博网址(Allbet Gaming),欧博网址开放会员注册、代理开户、电脑客户端下载、苹果安卓下载等业务。

|
版权声明

本文仅代表作者观点,
不代表本站欧博网址的立场。
本文系作者授权发表,未经许可,不得转载。