devbox
Gausst松鼠会
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

ruoyi-nbcio-plus基于vue3的flowable流程设计器主界面升级修改_flowable vue3流程设计器

作者：Gausst松鼠会 | 2024-04-13 19:06:34

赞

踩

flowable vue3流程设计器

更多ruoyi-nbcio功能请看演示系统

gitee源代码地址

前后端代码： https://gitee.com/nbacheng/ruoyi-nbcio

演示地址：RuoYi-Nbcio后台管理系统 http://122.227.135.243:9666/

更多nbcio-boot功能请看演示系统 

gitee源代码地址

后端代码： https://gitee.com/nbacheng/nbcio-boot

前端代码：https://gitee.com/nbacheng/nbcio-vue.git

在线演示（包括H5） ： http://122.227.135.243:9888

1、原有ProcessDesigner.vue的vue2代码如下：

  1. <template>
  2.   <div class="my-process-designer">
  3.     <div class="my-process-designer__header">
  4.       <slot name="control-header"></slot>
  5.       <template v-if="!$slots['control-header']">
  6.         <el-button-group key="file-control">
  7.           <el-button :size="headerButtonSize" :type="headerButtonType" icon="el-icon-edit-outline" @click="onSave">保存流程</el-button>
  8.           <el-button :size="headerButtonSize" :type="headerButtonType" :icon="FolderOpened" @click="$refs.refFile.click()">打开文件</el-button>
  9.           <el-tooltip effect="light">
  10.             <template #content>
  11.               <el-button :size="headerButtonSize" type="primary" @click="downloadProcessAsXml()">下载为XML文件</el-button>
  12.               <br />
  13.               <el-button :size="headerButtonSize" type="primary" @click="downloadProcessAsSvg()">下载为SVG文件</el-button>
  14.               <br />
  15.               <el-button :size="headerButtonSize" type="primary" @click="downloadProcessAsBpmn()">下载为BPMN文件</el-button>
  16.             </template>
  17.             <el-button :size="headerButtonSize" :type="headerButtonType" :icon="Download">下载文件</el-button>
  18.           </el-tooltip>
  19.           <el-tooltip effect="light">
  20.             <template #content>
  21.               <el-button :size="headerButtonSize" type="primary" @click="previewProcessXML">预览XML</el-button>
  22.               <br />
  23.               <el-button :size="headerButtonSize" type="primary" @click="previewProcessJson">预览JSON</el-button>
  24.             </template>
  25.             <el-button :size="headerButtonSize" :type="headerButtonType" :icon="View">预览</el-button>
  26.           </el-tooltip>
  27.           <el-tooltip v-if="simulation" effect="light" :content="this.simulationStatus ? '退出模拟' : '开启模拟'">
  28.             <el-button :size="headerButtonSize" :type="headerButtonType" :icon="Cpu" @click="processSimulation">
  29.               模拟
  30.             </el-button>
  31.           </el-tooltip>
  32.         </el-button-group>
  33.         <el-button-group key="align-control">
  34.           <el-tooltip effect="light" content="向左对齐">
  35.             <el-button :size="headerButtonSize" class="align align-left" :icon="Histogram" @click="elementsAlign('left')" />
  36.           </el-tooltip>
  37.           <el-tooltip effect="light" content="向右对齐">
  38.             <el-button :size="headerButtonSize" class="align align-right" :icon="Histogram" @click="elementsAlign('right')" />
  39.           </el-tooltip>
  40.           <el-tooltip effect="light" content="向上对齐">
  41.             <el-button :size="headerButtonSize" class="align align-top" :icon="Histogram" @click="elementsAlign('top')" />
  42.           </el-tooltip>
  43.           <el-tooltip effect="light" content="向下对齐">
  44.             <el-button :size="headerButtonSize" class="align align-bottom" :icon="Histogram" @click="elementsAlign('bottom')" />
  45.           </el-tooltip>
  46.           <el-tooltip effect="light" content="水平居中">
  47.             <el-button :size="headerButtonSize" class="align align-center" :icon="Histogram" @click="elementsAlign('center')" />
  48.           </el-tooltip>
  49.           <el-tooltip effect="light" content="垂直居中">
  50.             <el-button :size="headerButtonSize" class="align align-middle" :icon="Histogram" @click="elementsAlign('middle')" />
  51.           </el-tooltip>
  52.         </el-button-group>
  53.         <el-button-group key="scale-control">
  54.           <el-tooltip effect="light" content="缩小视图">
  55.             <el-button :size="headerButtonSize" :disabled="defaultZoom < 0.2" :icon="ZoomOut" @click="processZoomOut()" />
  56.           </el-tooltip>
  57.           <el-button :size="headerButtonSize">{{ Math.floor(this.defaultZoom * 10 * 10) + "%" }}</el-button>
  58.           <el-tooltip effect="light" content="放大视图">
  59.             <el-button :size="headerButtonSize" :disabled="defaultZoom > 4" :icon="ZoomIn" @click="processZoomIn()" />
  60.           </el-tooltip>
  61.           <el-tooltip effect="light" content="重置视图并居中">
  62.             <el-button :size="headerButtonSize" :icon="ScaleToOriginal" @click="processReZoom()" />
  63.           </el-tooltip>
  64.         </el-button-group>
  65.         <el-button-group key="stack-control">
  66.           <el-tooltip effect="light" content="撤销">
  67.             <el-button :size="headerButtonSize" :disabled="!revocable" :icon="RefreshLeft" @click="processUndo()" />
  68.           </el-tooltip>
  69.           <el-tooltip effect="light" content="恢复">
  70.             <el-button :size="headerButtonSize" :disabled="!recoverable" :icon="RefreshRight" @click="processRedo()" />
  71.           </el-tooltip>
  72.           <el-tooltip effect="light" content="重新绘制">
  73.             <el-button :size="headerButtonSize" :icon="Refresh" @click="processRestart" />
  74.           </el-tooltip>
  75.         </el-button-group>
  76.       </template>
  77.       <!-- 用于打开本地文件-->
  78.       <input type="file" id="files" ref="refFile" style="display: none" accept=".xml, .bpmn" @change="importLocalFile" />
  79.     </div>
  80.     <div class="my-process-designer__container">
  81.       <div class="my-process-designer__canvas" ref="bpmn-canvas"></div>
  82.     </div>
  83.     <el-dialog title="预览" width="60%" v-model="previewModelVisible" append-to-body destroy-on-close>
  84.       <highlightjs :language="previewType" :code="previewResult" style="height: 80vh" />
  85.     </el-dialog>
  86.     <!--<el-dialog :title="`预览${previewType}`" width="60%" v-model="previewModelVisible" append-to-body destroy-on-close>
  87.         <Codemirror
  88.           v-model:value="previewResult"
  89.           :options="cmOptions"
  90.           border
  91.           :height="700"
  92.         />
  93.     </el-dialog>-->
  94.   </div>
  95. </template>
  96.  
  97. <script>
  98. import { Histogram, Cpu, Refresh, RefreshLeft, RefreshRight, ZoomOut, ZoomIn, View, Download, FolderOpened, ScaleToOriginal } from '@element-plus/icons-vue'
  99. import BpmnModeler from "bpmn-js/lib/Modeler";
  100. import DefaultEmptyXML from "./plugins/defaultEmpty";
  101. // 翻译方法
  102. import customTranslate from "./plugins/translate/customTranslate";
  103. import translationsCN from "./plugins/translate/zh";
  104. // 模拟流转流程
  105. import tokenSimulation from "bpmn-js-token-simulation";
  106. // 标签解析构建器
  107. // import bpmnPropertiesProvider from "bpmn-js-properties-panel/lib/provider/bpmn";
  108. // 标签解析 Moddle
  109. import camundaModdleDescriptor from './plugins/descriptor/camundaDescriptor.json';
  110. import activitiModdleDescriptor from './plugins/descriptor/activitiDescriptor.json';
  111. import flowableModdleDescriptor from './plugins/descriptor/flowableDescriptor.json';
  112. // 标签解析 Extension
  113. import camundaModdleExtension from './plugins/extension-moddle/camunda';
  114. import activitiModdleExtension from './plugins/extension-moddle/activiti';
  115. import flowableModdleExtension from './plugins/extension-moddle/flowable';
  116. // 引入json转换与高亮
  117. // import X2JS from "x2js";
  118. import convert from "xml-js";
  119.  
  120. import Codemirror from 'codemirror-editor-vue3';
  121. import 'codemirror/theme/monokai.css'
  122. import 'codemirror/mode/javascript/javascript.js';
  123. import 'codemirror/mode/xml/xml.js';
  124.  
  125. export default {
  126.   name: "MyProcessDesigner",
  127.   componentName: "MyProcessDesigner",
  128.   components: {
  129.     Codemirror
  130.   },
  131.   setup() {
  132.     return {
  133.       Histogram, Cpu, Refresh, RefreshLeft, RefreshRight, ZoomOut, ZoomIn, View, Download, FolderOpened, ScaleToOriginal
  134.     }
  135.   },
  136.   emits: ['destroy', 'init-finished', 'commandStack-changed', 'update:modelValue', 'change', 'canvas-viewbox-changed', 'element-click'],
  137.   props: {
  138.     modelValue: String, // xml 字符串
  139.     processId: String,
  140.     processName: String,
  141.     translations: Object, // 自定义的翻译文件
  142.     options: {
  143.       type: Object,
  144.       default: () => ({})
  145.     }, // 自定义的翻译文件
  146.     additionalModel: [Object, Array], // 自定义model
  147.     moddleExtension: Object, // 自定义moddle
  148.     onlyCustomizeAddi: {
  149.       type: Boolean,
  150.       default: false
  151.     },
  152.     onlyCustomizeModdle: {
  153.       type: Boolean,
  154.       default: false
  155.     },
  156.     simulation: {
  157.       type: Boolean,
  158.       default: true
  159.     },
  160.     keyboard: {
  161.       type: Boolean,
  162.       default: true
  163.     },
  164.     prefix: {
  165.       type: String,
  166.       default: "flowable"
  167.     },
  168.     events: {
  169.       type: Array,
  170.       default: () => ["element.click"]
  171.     },
  172.     headerButtonSize: {
  173.       type: String,
  174.       default: "small",
  175.       validator: value => ["default", "medium", "small", "mini"].indexOf(value) !== -1
  176.     },
  177.     headerButtonType: {
  178.       type: String,
  179.       default: "primary",
  180.       validator: value => ["default", "primary", "success", "warning", "danger", "info"].indexOf(value) !== -1
  181.     }
  182.   },
  183.   data() {
  184.     return {
  185.       defaultZoom: 1,
  186.       previewModelVisible: false,
  187.       simulationStatus: false,
  188.       previewResult: "",
  189.       previewType: "xml",
  190.       recoverable: false,
  191.       revocable: false,
  192.       cmOptions: {
  193.         mode: 'xml', // 语言模式
  194.         theme: 'monokai', // 主题
  195.         lineNumbers: true, // 显示行号
  196.         smartIndent: true, // 智能缩进
  197.         readOnly: true,
  198.         indentUnit: 2, // 智能缩进单位为4个空格长度
  199.         foldGutter: true, // 启用行槽中的代码折叠
  200.         styleActiveLine: true // 显示选中行的样式
  201.       }
  202.     };
  203.   },
  204.   computed: {
  205.     additionalModules() {
  206.       const Modules = [];
  207.       // 仅保留用户自定义扩展模块
  208.       if (this.onlyCustomizeAddi) {
  209.         if (Object.prototype.toString.call(this.additionalModel) === "[object Array]") {
  210.           return this.additionalModel || [];
  211.         }
  212.         return [this.additionalModel];
  213.       }
  214.  
  215.       // 插入用户自定义扩展模块
  216.       if (Object.prototype.toString.call(this.additionalModel) === "[object Array]") {
  217.         Modules.push(...this.additionalModel);
  218.       } else {
  219.         this.additionalModel && Modules.push(this.additionalModel);
  220.       }
  221.  
  222.       // 翻译模块
  223.       const TranslateModule = {
  224.         translate: ["value", customTranslate(this.translations || translationsCN)]
  225.       };
  226.       Modules.push(TranslateModule);
  227.  
  228.       // 模拟流转模块
  229.       if (this.simulation) {
  230.         Modules.push(tokenSimulation);
  231.       }
  232.  
  233.       // 根据需要的流程类型设置扩展元素构建模块
  234.       // if (this.prefix === "bpmn") {
  235.       //   Modules.push(bpmnModdleExtension);
  236.       // }
  237.       if (this.prefix === "camunda") {
  238.         Modules.push(camundaModdleExtension);
  239.       }
  240.       if (this.prefix === "flowable") {
  241.         Modules.push(flowableModdleExtension);
  242.       }
  243.       if (this.prefix === "activiti") {
  244.         Modules.push(activitiModdleExtension);
  245.       }
  246.  
  247.       return Modules;
  248.     },
  249.     moddleExtensions() {
  250.       const Extensions = {};
  251.       // 仅使用用户自定义模块
  252.       if (this.onlyCustomizeModdle) {
  253.         return this.moddleExtension || null;
  254.       }
  255.  
  256.       // 插入用户自定义模块
  257.       if (this.moddleExtension) {
  258.         for (let key in this.moddleExtension) {
  259.           Extensions[key] = this.moddleExtension[key];
  260.         }
  261.       }
  262.  
  263.       // 根据需要的 "流程类型" 设置 对应的解析文件
  264.       if (this.prefix === "activiti") {
  265.         Extensions.activiti = activitiModdleDescriptor;
  266.       }
  267.       if (this.prefix === "flowable") {
  268.         Extensions.flowable = flowableModdleDescriptor;
  269.       }
  270.       if (this.prefix === "camunda") {
  271.         Extensions.camunda = camundaModdleDescriptor;
  272.       }
  273.  
  274.       return Extensions;
  275.     }
  276.   },
  277.   mounted() {
  278.     this.initBpmnModeler();
  279.     this.createNewDiagram(this.modelValue);
  280.     // this.$once("hook:beforeUnmount", () => {
  281.     //   if (this.bpmnModeler) this.bpmnModeler.destroy();
  282.     //   this.$emit("destroy", this.bpmnModeler);
  283.     //   this.bpmnModeler = null;
  284.     // });
  285.   },
  286.   beforeUnmount() {
  287.     if (this.bpmnModeler) this.bpmnModeler.destroy();
  288.     this.$emit("destroy", this.bpmnModeler);
  289.     this.bpmnModeler = null;
  290.   },
  291.   methods: {
  292.     onSave () {
  293.       return new Promise((resolve, reject) => {
  294.         if (this.bpmnModeler == null) {
  295.           reject();
  296.         }
  297.         this.bpmnModeler.saveXML({ format: true }).then(({ xml }) => {
  298.           this.$emit('save', xml);
  299.           resolve(xml);
  300.         });
  301.       })
  302.     },
  303.     initBpmnModeler() {
  304.       if (this.bpmnModeler) return;
  305.       this.bpmnModeler = new BpmnModeler({
  306.         container: this.$refs["bpmn-canvas"],
  307.         keyboard: this.keyboard ? { bindTo: document } : null,
  308.         additionalModules: this.additionalModules,
  309.         moddleExtensions: this.moddleExtensions,
  310.         ...this.options
  311.       });
  312.       this.$emit("init-finished", this.bpmnModeler);
  313.       this.initModelListeners();
  314.     },
  315.     initModelListeners() {
  316.       const EventBus = this.bpmnModeler.get("eventBus");
  317.       const that = this;
  318.       // 注册需要的监听事件, 将. 替换为 - , 避免解析异常
  319.       this.events.forEach(event => {
  320.         EventBus.on(event, function(eventObj) {
  321.           let eventName = event.replace(/\./g, "-");
  322.           let element = eventObj ? eventObj.element : null;
  323.           that.$emit(eventName, element, eventObj);
  324.         });
  325.       });
  326.       // 监听图形改变返回xml
  327.       EventBus.on("commandStack.changed", async event => {
  328.         try {
  329.           this.recoverable = this.bpmnModeler.get("commandStack").canRedo();
  330.           this.revocable = this.bpmnModeler.get("commandStack").canUndo();
  331.           let { xml } = await this.bpmnModeler.saveXML({ format: true });
  332.           this.$emit("commandStack-changed", event);
  333.           this.$emit('update:modelValue', xml);
  334.           this.$emit("change", xml);
  335.         } catch (e) {
  336.           console.error(`[Process Designer Warn]: ${e.message || e}`);
  337.         }
  338.       });
  339.       // 监听视图缩放变化
  340.       this.bpmnModeler.on("canvas.viewbox.changed", ({ viewbox }) => {
  341.         this.$emit("canvas-viewbox-changed", { viewbox });
  342.         const { scale } = viewbox;
  343.         this.defaultZoom = Math.floor(scale * 100) / 100;
  344.       });
  345.     },
  346.     /* 创建新的流程图 */
  347.     async createNewDiagram(xml) {
  348.       // 将字符串转换成图显示出来
  349.       let newId = this.processId || `Process_${new Date().getTime()}`;
  350.       let newName = this.processName || `业务流程_${new Date().getTime()}`;
  351.       let xmlString = xml || DefaultEmptyXML(newId, newName, this.prefix);
  352.       try {
  353.         let { warnings } = await this.bpmnModeler.importXML(xmlString);
  354.         if (warnings && warnings.length) {
  355.           warnings.forEach(warn => console.warn(warn));
  356.         }
  357.       } catch (e) {
  358.         console.error(`[Process Designer Warn]: ${e?.message || e}`);
  359.       }
  360.     },
  361.  
  362.     // 下载流程图到本地
  363.     /**
  364.      * @param {string} type
  365.      * @param {*} name
  366.      */
  367.     async downloadProcess(type, name) {
  368.       try {
  369.         const _this = this;
  370.         // 按需要类型创建文件并下载
  371.         if (type === "xml" || type === "bpmn") {
  372.           const { err, xml } = await this.bpmnModeler.saveXML();
  373.           // 读取异常时抛出异常
  374.           if (err) {
  375.             console.error(`[Process Designer Warn ]: ${err.message || err}`);
  376.           }
  377.           let { href, filename } = _this.setEncoded(type.toUpperCase(), name, xml);
  378.           downloadFunc(href, filename);
  379.         } else {
  380.           const { err, svg } = await this.bpmnModeler.saveSVG();
  381.           // 读取异常时抛出异常
  382.           if (err) {
  383.             return console.error(err);
  384.           }
  385.           let { href, filename } = _this.setEncoded("SVG", name, svg);
  386.           downloadFunc(href, filename);
  387.         }
  388.       } catch (e) {
  389.         console.error(`[Process Designer Warn ]: ${e.message || e}`);
  390.       }
  391.       // 文件下载方法
  392.       function downloadFunc(href, filename) {
  393.         if (href && filename) {
  394.           let a = document.createElement("a");
  395.           a.download = filename; //指定下载的文件名
  396.           a.href = href; //  URL对象
  397.           a.click(); // 模拟点击
  398.           URL.revokeObjectURL(a.href); // 释放URL 对象
  399.         }
  400.       }
  401.     },
  402.  
  403.     // 根据所需类型进行转码并返回下载地址
  404.     setEncoded(type, filename = "diagram", data) {
  405.       const encodedData = encodeURIComponent(data);
  406.       return {
  407.         filename: `${filename}.${type}`,
  408.         href: `data:application/${type === "svg" ? "text/xml" : "bpmn20-xml"};charset=UTF-8,${encodedData}`,
  409.         data: data
  410.       };
  411.     },
  412.  
  413.     // 加载本地文件
  414.     importLocalFile() {
  415.       const that = this;
  416.       const file = this.$refs.refFile.files[0];
  417.       const reader = new FileReader();
  418.       reader.readAsText(file);
  419.       reader.onload = function() {
  420.         let xmlStr = this.result;
  421.         that.createNewDiagram(xmlStr);
  422.       };
  423.     },
  424.     /* ------------------------------------------------ refs methods ------------------------------------------------------ */
  425.     downloadProcessAsXml() {
  426.       this.downloadProcess("xml");
  427.     },
  428.     downloadProcessAsBpmn() {
  429.       this.downloadProcess("bpmn");
  430.     },
  431.     downloadProcessAsSvg() {
  432.       this.downloadProcess("svg");
  433.     },
  434.     processSimulation() {
  435.       this.simulationStatus = !this.simulationStatus;
  436.       this.simulation && this.bpmnModeler.get("toggleMode").toggleMode();
  437.     },
  438.     processRedo() {
  439.       this.bpmnModeler.get("commandStack").redo();
  440.     },
  441.     processUndo() {
  442.       this.bpmnModeler.get("commandStack").undo();
  443.     },
  444.     processZoomIn(zoomStep = 0.1) {
  445.       let newZoom = Math.floor(this.defaultZoom * 100 + zoomStep * 100) / 100;
  446.       if (newZoom > 4) {
  447.         throw new Error("[Process Designer Warn ]: The zoom ratio cannot be greater than 4");
  448.       }
  449.       this.defaultZoom = newZoom;
  450.       this.bpmnModeler.get("canvas").zoom(this.defaultZoom);
  451.     },
  452.     processZoomOut(zoomStep = 0.1) {
  453.       let newZoom = Math.floor(this.defaultZoom * 100 - zoomStep * 100) / 100;
  454.       if (newZoom < 0.2) {
  455.         throw new Error("[Process Designer Warn ]: The zoom ratio cannot be less than 0.2");
  456.       }
  457.       this.defaultZoom = newZoom;
  458.       this.bpmnModeler.get("canvas").zoom(this.defaultZoom);
  459.     },
  460.     processZoomTo(newZoom = 1) {
  461.       if (newZoom < 0.2) {
  462.         throw new Error("[Process Designer Warn ]: The zoom ratio cannot be less than 0.2");
  463.       }
  464.       if (newZoom > 4) {
  465.         throw new Error("[Process Designer Warn ]: The zoom ratio cannot be greater than 4");
  466.       }
  467.       this.defaultZoom = newZoom;
  468.       this.bpmnModeler.get("canvas").zoom(newZoom);
  469.     },
  470.     processReZoom() {
  471.       this.defaultZoom = 1;
  472.       this.bpmnModeler.get("canvas").zoom("fit-viewport", "auto");
  473.     },
  474.     processRestart() {
  475.       this.recoverable = false;
  476.       this.revocable = false;
  477.       this.createNewDiagram(null);
  478.     },
  479.     elementsAlign(align) {
  480.       const Align = this.bpmnModeler.get("alignElements");
  481.       const Selection = this.bpmnModeler.get("selection");
  482.       const SelectedElements = Selection.get();
  483.       if (!SelectedElements || SelectedElements.length <= 1) {
  484.         this.$message.warning("请按住 Ctrl 键选择多个元素对齐");
  485.         return;
  486.       }
  487.       this.$confirm("自动对齐可能造成图形变形，是否继续？", "警告", {
  488.         confirmButtonText: "确定",
  489.         cancelButtonText: "取消",
  490.         type: "warning"
  491.       }).then(() => Align.trigger(SelectedElements, align));
  492.     },
  493.     /*-----------------------------    方法结束     ---------------------------------*/
  494.     previewProcessXML() {
  495.       this.bpmnModeler.saveXML({ format: true }).then(({ xml }) => {
  496.         this.previewResult = xml;
  497.         this.previewType = 'xml';
  498.         //this.cmOptions.mode = 'xml'
  499.         this.previewModelVisible = true;
  500.       });
  501.     },
  502.     previewProcessJson() {
  503.       this.bpmnModeler.saveXML({ format: true }).then(({ xml }) => {
  504.         this.previewResult = convert.xml2json(xml, { spaces: 2 });
  505.         this.previewType = "json";
  506.         this.previewModelVisible = true;
  507.       });
  508.     }
  509.   }
  510. };
  511. </script>

2、修改成vue3后的代码如下：

  1. <template>
  2.   <div class="my-process-designer">
  3.     <div class="my-process-designer__header">
  4.       <slot name="control-header"></slot>
  5.       <template v-if="!$slots['control-header']">
  6.         <el-button-group key="file-control">
  7.           <el-button :size="headerButtonSize" :type="headerButtonType" icon="el-icon-edit-outline" @click="onSave">保存流程</el-button>
  8.           <el-button :size="headerButtonSize" :type="headerButtonType" :icon="FolderOpened" @click="refFile.click()">打开文件</el-button>
  9.           <el-tooltip effect="light">
  10.             <template #content>
  11.               <el-button :size="headerButtonSize" type="primary" @click="downloadProcessAsXml()">下载为XML文件</el-button>
  12.               <br />
  13.               <el-button :size="headerButtonSize" type="primary" @click="downloadProcessAsSvg()">下载为SVG文件</el-button>
  14.               <br />
  15.               <el-button :size="headerButtonSize" type="primary" @click="downloadProcessAsBpmn()">下载为BPMN文件</el-button>
  16.             </template>
  17.             <el-button :size="headerButtonSize" :type="headerButtonType" :icon="Download">下载文件</el-button>
  18.           </el-tooltip>
  19.           <el-tooltip effect="light">
  20.             <template #content>
  21.               <el-button :size="headerButtonSize" type="primary" @click="previewProcessXML">预览XML</el-button>
  22.               <br />
  23.               <el-button :size="headerButtonSize" type="primary" @click="previewProcessJson">预览JSON</el-button>
  24.             </template>
  25.             <el-button :size="headerButtonSize" :type="headerButtonType" :icon="View">预览</el-button>
  26.           </el-tooltip>
  27.           <el-tooltip v-if="simulation" effect="light" :content="simulationStatus ? '退出模拟' : '开启模拟'">
  28.             <el-button :size="headerButtonSize" :type="headerButtonType" :icon="Cpu" @click="processSimulation">
  29.               模拟
  30.             </el-button>
  31.           </el-tooltip>
  32.         </el-button-group>
  33.         <el-button-group key="align-control">
  34.           <el-tooltip effect="light" content="向左对齐">
  35.             <el-button :size="headerButtonSize" class="align align-left" :icon="Histogram" @click="elementsAlign('left')" />
  36.           </el-tooltip>
  37.           <el-tooltip effect="light" content="向右对齐">
  38.             <el-button :size="headerButtonSize" class="align align-right" :icon="Histogram" @click="elementsAlign('right')" />
  39.           </el-tooltip>
  40.           <el-tooltip effect="light" content="向上对齐">
  41.             <el-button :size="headerButtonSize" class="align align-top" :icon="Histogram" @click="elementsAlign('top')" />
  42.           </el-tooltip>
  43.           <el-tooltip effect="light" content="向下对齐">
  44.             <el-button :size="headerButtonSize" class="align align-bottom" :icon="Histogram" @click="elementsAlign('bottom')" />
  45.           </el-tooltip>
  46.           <el-tooltip effect="light" content="水平居中">
  47.             <el-button :size="headerButtonSize" class="align align-center" :icon="Histogram" @click="elementsAlign('center')" />
  48.           </el-tooltip>
  49.           <el-tooltip effect="light" content="垂直居中">
  50.             <el-button :size="headerButtonSize" class="align align-middle" :icon="Histogram" @click="elementsAlign('middle')" />
  51.           </el-tooltip>
  52.         </el-button-group>
  53.         <el-button-group key="scale-control">
  54.           <el-tooltip effect="light" content="缩小视图">
  55.             <el-button :size="headerButtonSize" :disabled="defaultZoom < 0.2" :icon="ZoomOut" @click="processZoomOut()" />
  56.           </el-tooltip>
  57.           <el-button :size="headerButtonSize">{{ Math.floor(defaultZoom * 10 * 10) + "%" }}</el-button>
  58.           <el-tooltip effect="light" content="放大视图">
  59.             <el-button :size="headerButtonSize" :disabled="defaultZoom > 4" :icon="ZoomIn" @click="processZoomIn()" />
  60.           </el-tooltip>
  61.           <el-tooltip effect="light" content="重置视图并居中">
  62.             <el-button :size="headerButtonSize" :icon="ScaleToOriginal" @click="processReZoom()" />
  63.           </el-tooltip>
  64.         </el-button-group>
  65.         <el-button-group key="stack-control">
  66.           <el-tooltip effect="light" content="撤销">
  67.             <el-button :size="headerButtonSize" :disabled="!revocable" :icon="RefreshLeft" @click="processUndo()" />
  68.           </el-tooltip>
  69.           <el-tooltip effect="light" content="恢复">
  70.             <el-button :size="headerButtonSize" :disabled="!recoverable" :icon="RefreshRight" @click="processRedo()" />
  71.           </el-tooltip>
  72.           <el-tooltip effect="light" content="重新绘制">
  73.             <el-button :size="headerButtonSize" :icon="Refresh" @click="processRestart" />
  74.           </el-tooltip>
  75.         </el-button-group>
  76.       </template>
  77.       <!-- 用于打开本地文件-->
  78.       <input type="file" id="files" ref="refFile" style="display: none" accept=".xml, .bpmn" @change="importLocalFile" />
  79.     </div>
  80.     <div class="my-process-designer__container">
  81.       <div class="my-process-designer__canvas" id = "bpmnCanvas" ref="bpmnCanvas"></div>
  82.     </div>
  83.     <el-dialog title="预览" width="60%" v-model="previewModelVisible" append-to-body destroy-on-close>
  84.       <highlightjs :language="previewType" :code="previewResult" style="height: 80vh" />
  85.     </el-dialog>
  86.     <!--<el-dialog :title="`预览${previewType}`" width="60%" v-model="previewModelVisible" append-to-body destroy-on-close>
  87.         <Codemirror
  88.           v-model:value="previewResult"
  89.           :options="cmOptions"
  90.           border
  91.           :height="700"
  92.         />
  93.     </el-dialog>-->
  94.   </div>
  95. </template>
  96.  
  97. <script lang="ts" setup>
  98. import { Histogram, Cpu, Refresh, RefreshLeft, RefreshRight, ZoomOut, ZoomIn, View, Download, FolderOpened, ScaleToOriginal } from '@element-plus/icons-vue'
  99. import { ElMessage, ElMessageBox } from 'element-plus'
  100. import BpmnModeler from "bpmn-js/lib/Modeler";
  101. import DefaultEmptyXML from "./plugins/defaultEmpty";
  102. // 翻译方法
  103. import customTranslate from "./plugins/translate/customTranslate";
  104. import translationsCN from "./plugins/translate/zh";
  105. // 模拟流转流程
  106. import tokenSimulation from "bpmn-js-token-simulation";
  107. // 标签解析构建器
  108. // import bpmnPropertiesProvider from "bpmn-js-properties-panel/lib/provider/bpmn";
  109. // 标签解析 Moddle
  110. import camundaModdleDescriptor from './plugins/descriptor/camundaDescriptor.json';
  111. import activitiModdleDescriptor from './plugins/descriptor/activitiDescriptor.json';
  112. import flowableModdleDescriptor from './plugins/descriptor/flowableDescriptor.json';
  113. // 标签解析 Extension
  114. import camundaModdleExtension from './plugins/extension-moddle/camunda';
  115. import activitiModdleExtension from './plugins/extension-moddle/activiti';
  116. import flowableModdleExtension from './plugins/extension-moddle/flowable';
  117. // 引入json转换与高亮
  118. // import X2JS from "x2js";
  119. import convert from "xml-js";
  120.  
  121. import Codemirror from 'codemirror-editor-vue3';
  122. import 'codemirror/theme/monokai.css'
  123. import 'codemirror/mode/javascript/javascript.js';
  124. import 'codemirror/mode/xml/xml.js';
  125.  
  126. defineOptions({ name: 'MyProcessDesigner' })
  127.  
  128. const refFile = ref()
  129. const emit = defineEmits([
  130.   'destroy',
  131.   'init-finished',
  132.   'commandStack-changed',
  133.   'update:modelValue',
  134.   'change',
  135.   'canvas-viewbox-changed',
  136.   'element-click'
  137. ])
  138.  
  139. const props = defineProps({
  140.   modelValue: String, // xml 字符串
  141.   processId: String, // 流程 key 标识
  142.   processName: String, // 流程 name 名字
  143.   formId: Number, // 流程 form 表单编号
  144.   translations: {
  145.     // 自定义的翻译文件
  146.     type: Object,
  147.     default: () => {}
  148.   },
  149.   options: {
  150.     type: Object,
  151.     default: () => ({})
  152.   }, // 自定义的翻译文件
  153.   additionalModel: [Object, Array], // 自定义model
  154.   moddleExtension: {
  155.     // 自定义moddle
  156.     type: Object,
  157.     default: () => {}
  158.   },
  159.   onlyCustomizeAddi: {
  160.     type: Boolean,
  161.     default: false
  162.   },
  163.   onlyCustomizeModdle: {
  164.     type: Boolean,
  165.     default: false
  166.   },
  167.   simulation: {
  168.     type: Boolean,
  169.     default: true
  170.   },
  171.   keyboard: {
  172.     type: Boolean,
  173.     default: true
  174.   },
  175.   prefix: {
  176.     type: String,
  177.     default: 'flowable'
  178.   },
  179.   events: {
  180.     type: Array,
  181.     default: () => ['element.click']
  182.   },
  183.   headerButtonSize: {
  184.     type: String,
  185.     default: 'small',
  186.     validator: (value: string) => ['default', 'medium', 'small', 'mini'].indexOf(value) !== -1
  187.   },
  188.   headerButtonType: {
  189.     type: String,
  190.     default: 'primary',
  191.     validator: (value: string) =>
  192.       ['default', 'primary', 'success', 'warning', 'danger', 'info'].indexOf(value) !== -1
  193.   }
  194. })
  195.  
  196. let bpmnModeler: any = null
  197. const defaultZoom = ref(1)
  198. const previewModelVisible = ref(false)
  199. const simulationStatus = ref(false)
  200. const previewResult = ref('')
  201. const previewType = ref('xml')
  202. const recoverable = ref(false)
  203. const revocable = ref(false)
  204.  
  205. const cmOptions = ref({
  206. 	mode: 'xml', // 语言模式
  207.         theme: 'monokai', // 主题
  208.         lineNumbers: true, // 显示行号
  209.         smartIndent: true, // 智能缩进
  210.         readOnly: true,
  211.         indentUnit: 2, // 智能缩进单位为4个空格长度
  212.         foldGutter: true, // 启用行槽中的代码折叠
  213.         styleActiveLine: true // 显示选中行的样式
  214. })
  215.  
  216. const additionalModules = computed(() => {
  217.   const Modules: any[] = []
  218.   // 仅保留用户自定义扩展模块
  219.   if (props.onlyCustomizeAddi) {
  220.     if (Object.prototype.toString.call(props.additionalModel) == '[object Array]') {
  221.       return props.additionalModel || []
  222.     }
  223.     return [props.additionalModel]
  224.   }
  225.  
  226.   // 插入用户自定义扩展模块
  227.   if (Object.prototype.toString.call(props.additionalModel) == '[object Array]') {
  228.     Modules.push(...(props.additionalModel as any[]))
  229.   } else {
  230.     props.additionalModel && Modules.push(props.additionalModel)
  231.   }
  232.  
  233.   // 翻译模块
  234.   const TranslateModule = {
  235.     translate: ['value', customTranslate(props.translations || translationsCN)]
  236.   }
  237.   Modules.push(TranslateModule)
  238.  
  239.   // 模拟流转模块
  240.   if (props.simulation) {
  241.     Modules.push(tokenSimulation)
  242.   }
  243.  
  244.   // 根据需要的流程类型设置扩展元素构建模块
  245.   // if (this.prefix === "bpmn") {
  246.   //   Modules.push(bpmnModdleExtension);
  247.   // }
  248.   if (props.prefix === 'camunda') {
  249.     Modules.push(camundaModdleExtension)
  250.   }
  251.   if (props.prefix === 'flowable') {
  252.     Modules.push(flowableModdleExtension)
  253.   }
  254.   if (props.prefix === 'activiti') {
  255.     Modules.push(activitiModdleExtension)
  256.   }
  257.  
  258.   return Modules
  259. })
  260.  
  261. const moddleExtensions = computed(() => {
  262.   const Extensions: any = {}
  263.   // 仅使用用户自定义模块
  264.   if (props.onlyCustomizeModdle) {
  265.     return props.moddleExtension || null
  266.   }
  267.  
  268.   // 插入用户自定义模块
  269.   if (props.moddleExtension) {
  270.     for (let key in props.moddleExtension) {
  271.       Extensions[key] = props.moddleExtension[key]
  272.     }
  273.   }
  274.  
  275.   // 根据需要的 "流程类型" 设置 对应的解析文件
  276.   if (props.prefix === 'activiti') {
  277.     Extensions.activiti = activitiModdleDescriptor
  278.   }
  279.   if (props.prefix === 'flowable') {
  280.     Extensions.flowable = flowableModdleDescriptor
  281.   }
  282.   if (props.prefix === 'camunda') {
  283.     Extensions.camunda = camundaModdleDescriptor
  284.   }
  285.   return Extensions
  286. })
  287.  
  288. const onSave = async () => {
  289.       return new Promise((resolve, reject) => {
  290.         if (bpmnModeler == null) {
  291.           reject();
  292.         }
  293.         bpmnModeler.saveXML({ format: true }).then(({ xml }) => {
  294.           // 触发 save 事件
  295.           emit('save', xml)
  296.           resolve(xml);
  297.         });
  298.       })
  299. }
  300.  
  301. const initBpmnModeler = () => {
  302.   if (bpmnModeler) return
  303.   let container = document.getElementById('bpmnCanvas')
  304.  
  305.   bpmnModeler = new BpmnModeler({
  306.     container: container,
  307.     keyboard: props.keyboard ? { bindTo: document } : null,
  308.     additionalModules: additionalModules.value,
  309.     moddleExtensions: moddleExtensions.value,
  310.     ...props.options
  311.   })
  312.   console.log("initBpmnModeler bpmnModeler",bpmnModeler)
  313.   emit('init-finished', bpmnModeler)
  314.   initModelListeners()
  315. }
  316.  
  317. const initModelListeners = () => {
  318.   const EventBus = bpmnModeler.get('eventBus')
  319.   // 注册需要的监听事件, 将. 替换为 - , 避免解析异常
  320.   props.events.forEach((event: any) => {
  321.     EventBus.on(event, function (eventObj) {
  322.       let eventName = event.replace(/\./g, '-')
  323.       let element = eventObj ? eventObj.element : null
  324.       emit('element-click', element, eventObj)
  325.       // emit(eventName, element, eventObj)
  326.     })
  327.   })
  328.   // 监听图形改变返回xml
  329.   EventBus.on('commandStack.changed', async (event) => {
  330.     try {
  331.       recoverable.value = bpmnModeler.get('commandStack').canRedo()
  332.       revocable.value = bpmnModeler.get('commandStack').canUndo()
  333.       let { xml } = await bpmnModeler.saveXML({ format: true })
  334.       emit('commandStack-changed', event)
  335.       emit('update:modelValue', xml)
  336.       emit('change', xml)
  337.     } catch (e: any) {
  338.       console.error(`[Process Designer Warn]: ${e.message || e}`)
  339.     }
  340.   })
  341.   // 监听视图缩放变化
  342.   bpmnModeler.on('canvas.viewbox.changed', ({ viewbox }) => {
  343.     emit('canvas-viewbox-changed', { viewbox })
  344.     const { scale } = viewbox
  345.     defaultZoom.value = Math.floor(scale * 100) / 100
  346.   })
  347. }
  348. /* 创建新的流程图 */
  349. const createNewDiagram = async (xml) => {
  350.   // 将字符串转换成图显示出来
  351.   let newId = props.processId || `Process_${new Date().getTime()}`
  352.   let newName = props.processName || `业务流程_${new Date().getTime()}`
  353.   let xmlString = xml || DefaultEmptyXML(newId, newName, props.prefix)
  354.   try {
  355.     let { warnings } = await bpmnModeler.importXML(xmlString)
  356.     if (warnings && warnings.length) {
  357.       warnings.forEach((warn) => console.warn(warn))
  358.     }
  359.   } catch (e: any) {
  360.     console.error(`[Process Designer Warn]: ${e.message || e}`)
  361.   }
  362. }
  363.  
  364. // 下载流程图到本地
  365.     /**
  366.      * @param {string} type
  367.      * @param {*} name
  368.      */
  369. const downloadProcess = async (type, name) => {
  370.   try {
  371.     // 按需要类型创建文件并下载
  372.     if (type === 'xml' || type === 'bpmn') {
  373.       const { err, xml } = await bpmnModeler.saveXML()
  374.       // 读取异常时抛出异常
  375.       if (err) {
  376.         console.error(`[Process Designer Warn ]: ${err.message || err}`)
  377.       }
  378.       let { href, filename } = setEncoded(type.toUpperCase(), name, xml)
  379.       downloadFunc(href, filename)
  380.     } else {
  381.       const { err, svg } = await bpmnModeler.saveSVG()
  382.       // 读取异常时抛出异常
  383.       if (err) {
  384.         return console.error(err)
  385.       }
  386.       let { href, filename } = setEncoded('SVG', name, svg)
  387.       downloadFunc(href, filename)
  388.     }
  389.   } catch (e: any) {
  390.     console.error(`[Process Designer Warn ]: ${e.message || e}`)
  391.   }
  392.   // 文件下载方法
  393.   function downloadFunc(href, filename) {
  394.     if (href && filename) {
  395.       let a = document.createElement('a')
  396.       a.download = filename //指定下载的文件名
  397.       a.href = href //  URL对象
  398.       a.click() // 模拟点击
  399.       URL.revokeObjectURL(a.href) // 释放URL 对象
  400.     }
  401.   }
  402. }
  403. // 根据所需类型进行转码并返回下载地址
  404. const setEncoded = (type, filename = 'diagram', data) => {
  405.   const encodedData = encodeURIComponent(data)
  406.   return {
  407.     filename: `${filename}.${type}`,
  408.     href: `data:application/${type === "svg" ? "text/xml" : "bpmn20-xml"};charset=UTF-8,${encodedData}`,
  409.     data: data
  410.   }
  411. }
  412.  
  413. // 加载本地文件
  414. const importLocalFile = () => {
  415.   const file = refFile.value.files[0]
  416.   const reader = new FileReader()
  417.   reader.readAsText(file)
  418.   reader.onload = function () {
  419.     let xmlStr = this.result
  420.     createNewDiagram(xmlStr)
  421.   }
  422. }
  423. /* ------------------------------------------------ refs methods ------------------------------------------------------ */
  424. const downloadProcessAsXml = () => {
  425.   downloadProcess('xml')
  426. }
  427. const downloadProcessAsBpmn = () => {
  428.   downloadProcess('bpmn')
  429. }
  430. const downloadProcessAsSvg = () => {
  431.   downloadProcess('svg')
  432. }
  433. const processSimulation = () => {
  434.   simulationStatus.value = !simulationStatus.value
  435.   props.simulation && bpmnModeler.get('toggleMode').toggleMode()
  436. }
  437. const processRedo = () => {
  438.   bpmnModeler.get('commandStack').redo()
  439. }
  440. const processUndo = () => {
  441.   bpmnModeler.get('commandStack').undo()
  442. }
  443. const processZoomIn = (zoomStep = 0.1) => {
  444.   let newZoom = Math.floor(defaultZoom.value * 100 + zoomStep * 100) / 100
  445.   if (newZoom > 4) {
  446.     throw new Error('[Process Designer Warn ]: The zoom ratio cannot be greater than 4')
  447.   }
  448.   defaultZoom.value = newZoom
  449.   bpmnModeler.get('canvas').zoom(defaultZoom.value)
  450. }
  451. const processZoomOut = (zoomStep = 0.1) => {
  452.   let newZoom = Math.floor(defaultZoom.value * 100 - zoomStep * 100) / 100
  453.   if (newZoom < 0.2) {
  454.     throw new Error('[Process Designer Warn ]: The zoom ratio cannot be less than 0.2')
  455.   }
  456.   defaultZoom.value = newZoom
  457.   bpmnModeler.get('canvas').zoom(defaultZoom.value)
  458. }
  459. const processZoomTo = (newZoom = 1) => {
  460.       if (newZoom < 0.2) {
  461.         throw new Error("[Process Designer Warn ]: The zoom ratio cannot be less than 0.2");
  462.       }
  463.       if (newZoom > 4) {
  464.         throw new Error("[Process Designer Warn ]: The zoom ratio cannot be greater than 4");
  465.       }
  466.       defaultZoom.value = newZoom;
  467.       bpmnModeler.get("canvas").zoom(newZoom);
  468. }
  469.  
  470. const processReZoom = () => {
  471.   defaultZoom.value = 1
  472.   bpmnModeler.get('canvas').zoom('fit-viewport', 'auto')
  473. }
  474.  
  475. const processRestart = () => {
  476.   recoverable.value = false
  477.   revocable.value = false
  478.   createNewDiagram(null)
  479. }
  480. const elementsAlign = (align) => {
  481.   const Align = bpmnModeler.get('alignElements')
  482.   const Selection = bpmnModeler.get('selection')
  483.   const SelectedElements = Selection.get()
  484.   if (!SelectedElements || SelectedElements.length <= 1) {
  485.     ElMessage.warning('请按住 Shift 键选择多个元素对齐')
  486.     return
  487.   }
  488.   ElMessageBox.confirm('自动对齐可能造成图形变形，是否继续？', '警告', {
  489.     confirmButtonText: '确定',
  490.     cancelButtonText: '取消',
  491.     type: 'warning'
  492.   }).then(() => {
  493.     Align.trigger(SelectedElements, align)
  494.   })
  495. }
  496. /*-----------------------------    方法结束     ---------------------------------*/
  497. const previewProcessXML = () => {
  498.   bpmnModeler.saveXML({ format: true }).then(({ xml }) => {
  499.     previewResult.value = xml
  500.     previewType.value = 'xml'
  501.     //cmOptions.value['mode'] = 'xml'
  502.     previewModelVisible.value = true
  503.   })
  504. }
  505. const previewProcessJson = () => {
  506.   bpmnModeler.saveXML({ format: true }).then(({ xml }) => {
  507.     previewResult.value = convert.xml2json(xml, { spaces: 2 });
  508.     previewType.value = "json";
  509.     previewModelVisible.value = true;
  510.   })
  511. }
  512.  
  513. onMounted(() => {
  514.   initBpmnModeler()
  515.   createNewDiagram(props.modelValue)
  516. })
  517.  
  518. onBeforeUnmount(() => {
  519.   if (bpmnModeler) bpmnModeler.destroy()
  520.   emit('destroy', bpmnModeler)
  521.   bpmnModeler = null
  522. })
  523. </script>

3、效果图如下：

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Gausst松鼠会/article/detail/418040
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号