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

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

1、相应的界面前端代码

javascript 复制代码
<template>
  <div class="formDesign">
    <FlowDesign :process="process" :fields="fields" :readOnly="readOnly">
    <el-switch
      inline-prompt
      size="large"
      active-text="正常模式"
      inactive-text="暗黑模式"
      @change="handleToggleDark"
      v-model="isDark"
    />
    <el-switch
      v-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、相应的转换代码

javascript 复制代码
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 = result
    previewType.value = 'xml'
    previewModelVisible.value = true
  })
  

3、效果图

相关推荐
取个好名称7 小时前
在线查看【免费】 txt, xml(渲染), md(渲染), java, php, py, js, css 文件格式网站
xml·javascript·php
ZQ沙漠之狐9 小时前
Android Studio打开xml布局文件内存会快速增加如何设置
android·xml·android studio
我最厉害。,。11 小时前
XML&XXE 安全&无回显方案&OOB 盲注&DTD 外部实体&黑白盒挖掘
android·xml·安全
魔道不误砍柴功1 天前
Spring Boot 依赖注入与Bean管理:JavaConfig如何取代XML?
xml·spring boot·后端
凌冰_1 天前
IDEA2024 pom.xml依赖文件包报红解决
xml·java·intellij-idea
百锦再2 天前
Android Drawable 目录下的 XML 图形文件详解
android·xml·java·app·手机·安卓
sen_shan2 天前
Vue3+Vite+TypeScript+Element Plus开发-22.客制Table组件
vue.js·vue3·vite·element plus·按钮组件·表组件
Baoing_2 天前
Next.js项目生成sitemap.xml站点地图
xml·开发语言·javascript
是二牙2 天前
vue3+vite 多个环境配置
前端·vue3·vite
緑水長流*z2 天前
(03)Vue的常用指令
前端·vue.js·vue3·vue2·vue框架·vue学习笔记·vue学习教程