基于jeecgboot-vue3的Flowable流程-集成仿钉钉流程（五）仿钉钉流程的json数据保存与显示

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

1、需要做一个界面保存与显示仿钉钉的流程，先建一个表，用online建

2、通过上面生成代码，放入到相应的前后端工程里

3、修改前端仿钉钉流程的设计功能，在原来list页面上增加一个对话框，如下：

<el-dialog :title="designerData.name" class="ddDialog" v-model="designerOpen" append-to-body fullscreen><ding-designerref="ddDesigner"v-loading="designerLoading":process = "flowJsonData"@save="onSaveDesigner"/></el-dialog>

4、增加一个上面的仿钉钉流程组件

<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><el-button-group><el-button @click="save" size="small" type="primary" round icon="View"> 保存 </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><script setup lang="ts" name="DingDesigner">
import { ref, reactive, toRaw, onMounted } from 'vue';
import '@/views/lowflow/styles/index.scss'// If you want to use ElMessage, import it.
import 'element-plus/dist/index.css';
import 'element-plus/theme-chalk/display.css';import FlowDesign from '@/views/lowflow/flowDesign/index.vue'
import type { Field } from '@/views/lowflow/components/Render/type'
import type { EndNode, FlowNode, StartNode } from '@/views/lowflow/flowDesign/nodes/type'
import { viewXml, ddToBpmnXml } from '@/views/lowflow/api/modules/model'
import ProcessViewer from '@/components/ProcessViewer/index.vue';
import { useMessage } from '/@/hooks/web/useMessage';const { createMessage, createConfirm } = useMessage();const props = defineProps({process: {type: Object,required: true},
});const emit = defineEmits(['save'
])const previewModelVisible = ref(false)
const previewResult = ref('')
const previewType = ref('xml')const processView =  reactive<any>({title: '',open: false,xmlData:'',
})// 流程节点
/*const process = ref<FlowNode>({id: 'root',pid: undefined,type: 'start',name: '流程开始',executionListeners: [],formProperties: [],child: {id: 'end',pid: 'root',type: 'end',name: '流程结束',executionListeners: [],child: undefined} as EndNode
} as StartNode)*/// 表单字段
const fields = ref<Field[]>([{id: 'field_da2w55',type: 'formItem',label: '请假人',name: 'UserSelector',value: null,readonly: false,required: true,hidden: false,props: {multiple: false,disabled: false,placeholder: '请选择用户',style: {width: '100%'}}},{id: 'field_fa2w40',type: 'formItem',label: '请假天数',name: 'ElInputNumber',value: null,readonly: false,required: true,hidden: false,props: {disabled: false,placeholder: '请假天数',style: {width: '100%'},min: 0,max: 100,step: 1,precision: 0}},{id: 'field_d42t45',type: 'formItem',label: '请假事由',name: 'ElSelect',value: null,readonly: false,required: true,hidden: false,props: {disabled: false,multiple: false,placeholder: '请选择请假事由',options: [{label: '事假',value: '事假'},{label: '病假',value: '病假'},{label: '婚假',value: '婚假'},{label: '产假',value: '产假'},{label: '丧假',value: '丧假'},{label: '其他',value: '其他'}],style: {width: '100%'}}},{id: 'field_522g58',type: 'formItem',label: '请假原因',name: 'ElInput',value: null,readonly: false,required: true,hidden: false,props: {type: 'textarea',placeholder: '请输入请假原因',autosize: {minRows: 3,maxRows: 3},disabled: false,style: {width: '100%'}}}
])
// 是否只读
const readOnly = ref(false)
// 是否暗黑模式
const isDark = ref(false)const viewJson = () => {const processJson = JSON.stringify(props.process,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: props.process,enable: true,version: 1,sort: 0,groupId: '',remark: ''}const xmlData = viewXml(processModel)xmlData.then((result) => {previewResult.value = resultpreviewType.value = 'xml'previewModelVisible.value = true})}
const converterBpmn = () => {const processModel = {code: 'test',name: '测试',icon: {name: 'el:HomeFilled',color: '#409EFF'},process: props.process,enable: true,version: 1,sort: 0,groupId: '',remark: ''}ddToBpmnXml(processModel).then(res => {console.log("ddToBpmnXml res",res)processView.xmlData = res.resultprocessView.title = "Bpmn流程图预览"processView.open = true})  
}const save = () => {const flowData = props.processemit('save', flowData);
}const handleToggleDark = () => {if (isDark.value) {document.documentElement.classList.add('dark')} else {document.documentElement.classList.remove('dark')}
}onMounted(() => {});</script><style scoped lang="scss">.formDesign {z-index: 999;top: 120px;height: 100%;}
</style>

5、效果图如下：