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中提到的节点实例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的小伙伴,通过博客或公众号与我交流,大家一起爬坑,共同进步!
vue项目中使用bpmn-流程图json属性转xml(七篇更新完成)的更多相关文章
- vue项目中使用bpmn-流程图xml文件中节点属性转json结构
内容概述 本系列“vue项目中使用bpmn-xxxx”分为七篇,均为自己使用过程中用到的实例,手工原创,目前陆续更新中.主要包括vue项目中bpmn使用实例.应用技巧.基本知识点总结和需要注意事项,具 ...
- VUE项目中使用this.$forceUpdate();解决页面v-for中修改item属性值后页面v-if不改变的问题
VUE项目中使用this.$forceUpdate();解决页面v-for中修改item属性值后页面v-if不改变的问题:https://blog.csdn.net/jerrica/article/d ...
- vue项目中使用bpmn-流程图预览篇
前情提要 上文已经实现了节点操作的前进.后退.导入.导出等操作,今日来实现“流程图预览”,以及视图的放大缩小 前提:项目安装过bpmn,安装可见上篇文章 实现要点 bpmn提供了两个神器:Modele ...
- vue项目中使用bpmn-节点篇
前情提要 根据之前的操作,我们可以创建.导入.导出流程图,并对其进预览.通过此篇可以学到: 为节点添加点击.鼠标悬浮等事件 获取流程图内所有指定类型的节点 通过外部更新节点名字 获取节点实例的两种方法 ...
- vue项目中使用bpmn-为节点添加颜色
内容概述 本系列 “vue项目中使用bpmn-xxxx” 分为五篇,均为自己使用过程中用到的实例,手工原创,目前属于陆续更新中.主要包括vue项目中bpmn使用实例.应用技巧.基本知识点总结和需要注意 ...
- vue项目中使用bpmn-基础篇
内容概述 本系列“vue项目中使用bpmn-xxxx”分为五篇,均为自己使用过程中用到的实例,手工原创,目前属于陆续更新中.主要包括vue项目中bpmn使用实例.应用技巧.基本知识点总结和需要注意事项 ...
- vue项目中使用bpmn-番外篇(留言问题总结)
前情提要 “vue项目中使用bpmn-xxxx”系列的七篇文章在上周已经更新完成,发表后,有小伙伴在使用时提出了一些文章中没有讲到的问题,此篇作为番外篇,将大家提出的共性问题解答一下,欢迎大家支持原创 ...
- vue项目中使用bpmn-自定义platter
前情提要 经过前四篇的学习,我们能够实现bpmn基本绘图.预览.为节点加事件加颜色等效果,这一篇我们来说,如何自定义左侧工具栏(platter),首先看一下自定义前后效果图对比: 我们本次要实现的目标 ...
- vue 项目中实用的小技巧
# 在Vue 项目中引入Bootstrap 有时在vue项目中会根据需求引入Bootstrap,而Bootstrap又是依赖于jQuery的,在使用npm按照时,可能会出现一系列的错误 1.安装jQu ...
随机推荐
- Ubuntu忘记超级用户root密码,重新设置密码 转载
原文链接:https://blog.csdn.net/weixin_37909391/article/details/80691601 Ubuntu版本:Ubuntu 16.04.3 LTS 1启动系 ...
- Nginx四层代理
Nginx支持四层代理 http://nginx.org/en/docs/stream/ngx_stream_core_module.html 该ngx_stream_core_module模块自1. ...
- 异常:NoSuchFieldError: BEST_MATCHING_HANDLER_ATTRIBUTE
出现的原因 pom 依赖之间不匹配导致 当前的 pom 调整后访问资源成功后面的 pom
- Android:RelativeLayout 内容居中
Android RelativeLayout 内容居中解决办法: 使用Linearlayout本来利用父控件的gravity属性是很好解决的.但是对应RelativeLayout虽然有gravity属 ...
- html+css的用户注册界面
注册界面样图 代码实现 html部分 <!DOCTYPE html> <html lang="en"> <head> <meta char ...
- JS的String()、toString()、valueOf()的一些隐秘特性
toString()方法 要把一个值转换为一个字符串,最常用的就是,使用几乎每个值都有的toString()方法,这个方法唯一要做的就是返回相应值的字符串表现. 数值.布尔值.对象和字符串值(没错,每 ...
- 手把手教你用Node.js爬虫爬取网站数据
个人网站 https://iiter.cn 程序员导航站 开业啦,欢迎各位观众姥爷赏脸参观,如有意见或建议希望能够不吝赐教! 开始之前请先确保自己安装了Node.js环境,还没有安装的的童鞋请自行百度 ...
- ACM算法--二分法--模板
// 在单调递增序列a中查找>=x的数中最小的一个(即x或x的后继) while (l < r) { int mid = (l + r) / 2; if (a[mid] >= x) ...
- 无向图求割点(找桥)tarjan
本博客参考了李煜东的<算法竞赛进阶指南>,大家要是觉得这篇文章写的不错请大家支持正版.豆瓣图书 我在之前的博客中讲解了搜索序时间戳,这次我们讲讲追溯值的概念. 追溯值: 设subtree( ...
- andorid jar/库源码解析之EventBus
目录:andorid jar/库源码解析 EventBus: 作用: 用于不同Activity,Service等之间传递消息(数据). 栗子: A页面:onCreate定义 EventBus.ge ...