当前位置：首页 > news >正文

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

news 2025/7/30 0:24:56

因为这个项目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、效果图