基于jeecgboot-vue3的Flowable流程-集成仿钉钉流程(四)支持json和xml的显示

因为这个项目license问题无法开源,更多技术支持与服务请加入我的知识星球。

1、相应的界面前端代码

<template><div class="formDesign"><FlowDesign :process="process" :fields="fields" :readOnly="readOnly"><el-switchinline-promptsize="large"active-text="正常模式"inactive-text="暗黑模式"@change="handleToggleDark"v-model="isDark"/><el-switchv-model="readOnly"size="large"active-text="只读模式"inactive-text="编辑模式"inline-prompt:active-value="true":inactive-value="false"/><el-button-group><el-button @click="viewJson" size="small" type="primary" round icon="View"> 查看Json</el-button></el-button-group><el-button-group><el-button @click="viewXmlBpmn" size="small" type="primary" round icon="View"> 查看XML </el-button></el-button-group><el-button-group><el-button @click="converterBpmn" size="small" type="primary" round icon="View"> 预览bpmn </el-button></el-button-group></FlowDesign><el-dialog title="预览" width="60%" v-model="previewModelVisible" append-to-body destroy-on-close><highlightjs :language="previewType" :code="previewResult" style="height: 80vh" /></el-dialog><!-- Bpmn流程图 --><el-dialog :title="processView.title" v-model="processView.open" width="70%" append-to-body><process-viewer :key="`designer-${processView.title}`" :xml="processView.xmlData" :style="{height: '500px'}" /></el-dialog></div></template>

2、相应的转换代码


const viewJson = () => {const processJson = JSON.stringify(process.value,undefined, 2); previewResult.value = processJson; previewType.value = 'json'previewModelVisible.value = true
}
const viewXmlBpmn = () => {const processModel = {code: 'test',name: '测试',icon: {name: 'el:HomeFilled',color: '#409EFF'},process: process.value,enable: true,version: 1,sort: 0,groupId: '',remark: ''}const xmlData = viewXml(processModel)xmlData.then((result) => {previewResult.value = resultpreviewType.value = 'xml'previewModelVisible.value = true})

3、效果图

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/373387.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

从两眼放光到心碎一地《长相思》第二季搞笑爱情转折

这《长相思》第二季的剧情&#xff0c; 简直是心脏按摩器升级版啊&#xff01; 爷爷一开口&#xff0c;要给玱玹安排馨悦当王后 我这小心脏差点就跟着‘嘭’一声 "哎呀&#xff0c;以为要上演宫廷版《速度与激情》 结果小夭女神一出手&#xff0c; 不是醋坛子翻&#…

视图库对接系列(GA-T 1400)十四、视图库对接系列(本级)新增、修改订阅

说明 之前我们已经对接的设备,设备的话比较简单,是设备主动推送数据到平台的。 相信大家已经会了,那今天开始的话,我们来做对接平台,相对难点点。 但搞懂了核心的订阅流程的话,其实就不难了。 对接平台 订阅接口 订阅接口的话,有几个,添加、查询、更新、删除、取消…

SpringIOC原理

SpringIOC原理 1.概念 Spring通过一个配置文件描述Bean及Bean之间的依赖关系&#xff0c;利用Java语言的反射功能实例化Bean并建立Bean之间的依赖关系。Spring的IOC容器在完成这些底层工作的基础上&#xff0c;还提供了Bean实例缓存、生命周期管理、Bean实例代理、事件发布、…

欧拉部署nginx

1.下载nginx 下载地址&#xff1a;https://nginx.org/en/download.html 选择稳定版本 下的镜像文件进行下载 2.解压Nginx包 cd /root/nginx tar -zxvf nginx-1.26.0.tar.gz cd nginx-1.26.03.安装nginx相关依赖 yum -y install gcc zlib zlib-devel pcre-devel openssl o…

Games101——光珊化——深度缓存——shading着色 1

深度缓存 如何解决远近的问题&#xff0c;能正确的覆盖 按照画作来说&#xff0c;先画出远处的物体&#xff0c;再画出近处的物体&#xff0c;近处会将其覆盖&#xff0c;这种算法叫做画家算法 但事实上&#xff0c;排序不仅要花更多的时间&#xff0c;而且排序并不容易&…

U盘启动快捷键查询

电脑开机一般默认自身硬盘启动系统&#xff0c;如需要U盘重装系统&#xff0c;开机时一直按对应机型的U盘启动快捷键&#xff0c;选择对应USB设备即可U盘启动。 一、品牌台式 二、品牌笔记本 三、组装电脑

【LabVIEW学习篇 - 1】:初始LabVIEW

文章目录 初始LabView前面板和程序框图前面板&#xff08;Front Panel&#xff09;程序框图&#xff08;Block Diagram&#xff09;交互和工作流程 练手小案例&#xff1a;LabView中实现加法操作 初始LabView LabVIEW&#xff08;Laboratory Virtual Instrument Engineering W…

【电脑应用技巧】如何寻找电脑应用的安装包华为电脑、平板和手机资源交换

电脑的初学者可能会直接用【百度】搜索电脑应用程序的安装包&#xff0c;但是这样找到的电脑应用程序安装包经常会被加入木马或者强制捆绑一些不需要的应用装入电脑。 今天告诉大家一个得到干净电脑应用程序安装包的方法&#xff0c;就是用【联想的应用商店】。联想电脑我是一点…

深入理解循环神经网络(RNN)

深入理解循环神经网络&#xff08;RNN&#xff09; 循环神经网络&#xff08;Recurrent Neural Network, RNN&#xff09;是一类专门处理序列数据的神经网络&#xff0c;广泛应用于自然语言处理、时间序列预测、语音识别等领域。本文将详细解释RNN的基本结构、工作原理以及其优…

阐述 C 语言中的参数传递机制

&#x1f345;关注博主&#x1f397;️ 带你畅游技术世界&#xff0c;不错过每一次成长机会&#xff01; &#x1f4d9;C 语言百万年薪修炼课程 通俗易懂&#xff0c;深入浅出&#xff0c;匠心打磨&#xff0c;死磕细节&#xff0c;6年迭代&#xff0c;看过的人都说好。 文章目…

从海上长城到数字防线:视频技术在海域边防现代化中的创新应用

随着全球化和科技发展的加速&#xff0c;海域安全问题日益凸显其重要性。海域边防作为国家安全的第一道防线&#xff0c;其监控和管理面临着诸多挑战。近年来&#xff0c;视频技术的快速发展为海域边防场景提供了新的解决方案&#xff0c;其高效、实时、远程的监控特点极大地提…

增强现实(AR)与虚拟现实(VR)的区别?

随着科技的飞速发展&#xff0c;增强现实&#xff08;AR&#xff09;与虚拟现实&#xff08;VR&#xff09;技术在各个领域展现出巨大的潜力和应用前景。这两种技术虽然在体验和实现方式上有所不同&#xff0c;但都为用户提供了全新的感知体验。本文将详细解析AR和VR的概念、区…

《Windows API每日一练》9.13资源-鼠标位图和字符串

鼠标指针位图&#xff08;Mouse Cursor Bitmap&#xff09;是用于表示鼠标指针外观的图像。在 Windows 窗口编程中&#xff0c;可以使用自定义的鼠标指针位图来改变鼠标的外观&#xff0c;并提供更加个性化的用户体验。 ■以下是一些与鼠标指针位图相关的要点&#xff1a; ●…

17集 如何用ESP-IDF编译ESP-DL深度学习工程-《MCU嵌入式AI开发笔记》

17集 如何用ESP-IDF编译ESP-DL深度学习工程-《MCU嵌入式AI开发笔记》 参考文档&#xff1a;ESP-DL 用户指南&#xff1a; https://docs.espressif.com/projects/esp-dl/zh_CN/latest/esp32/index.html 和https://docs.espressif.com/projects/esp-dl/zh_CN/latest/esp32/get-s…

详细分析@FunctionalInterface的基本知识(附Demo)

目录 前言1. 基本知识2. Demo 前言 Java的基本知识推荐阅读&#xff1a; java框架 零基础从入门到精通的学习路线 附开源项目面经等&#xff08;超全&#xff09;Spring框架从入门到学精&#xff08;全&#xff09; 1. 基本知识 FunctionalInterface 是 Java 8 引入的一个注…

gitee上传和下载idea项目的流程

环境&#xff1a;idea2022 一、上传项目 1、在gitee中新建一个仓库。 2、打开所要上传的项目的文件夹&#xff0c;点击Git Bash&#xff0c;生成.git文件夹。 3、在idea中打开所要上传的项目&#xff0c;在控制台的Terminal菜单中&#xff0c;输入git add . (注意&#xf…

爆破器材期刊

《爆破器材》简介   《爆破器材》自1958年创刊以来&#xff0c;深受广大读者喜爱&#xff0c;是中国兵工学会主办的中央级技术刊物&#xff0c;在国内外公开发行&#xff0c;近几年已发行到10个国家和地区。《爆破器材》杂志被美国著名检索机构《化学文摘》&#xff08;CA&a…

【持续集成_03课_Linux部署Sonar+Gogs+Jenkins】

一、通过虚拟机搭建Linux环境-CnetOS 1、安装virtualbox&#xff0c;和Vmware是一样的&#xff0c;只是box更轻量级 1&#xff09;需要注意内存选择&#xff0c;4G 2、启动完成后&#xff0c;需要获取服务器IP地址 命令 ip add 服务器IP地址 通过本地的工具&#xff0c;进…

无人机对地面运动目标定位---获取目标的移动方向和速度

目录 一、引子 我们利用单目无人机通过等时间间隔拍照的形式对地面某移动目标进行定位&#xff0c;当前&#xff0c;我们已经获得了每张相片上该目标的三维坐标&#xff0c;并且知道该无人机在飞行过程中拍照的时间间隔&#xff0c;那么我们就可以通过一定的计算&#xff0c;得…

Zabbix Sia Zabbix 逻辑漏洞(CVE-2022-23134)

前言 CVE-2022-23134是一个中等严重度的漏洞&#xff0c;影响Zabbix Web前端。这个漏洞允许未经身份验证的用户访问setup.php文件的某些步骤&#xff0c;这些步骤通常只对超级管理员开放。利用这个漏洞&#xff0c;攻击者可以通过跳过某些步骤来重新配置Zabbix前端&#xff0c…