建设银行网站点不了,crm管理系统销售,万网提供的网站建设服务的具体项目,网站怎么做导航更多ruoyi-nbcio功能请看演示系统
gitee源代码地址
前后端代码#xff1a; https://gitee.com/nbacheng/ruoyi-nbcio
演示地址#xff1a;RuoYi-Nbcio后台管理系统 http://122.227.135.243:9666/
更多nbcio-boot功能请看演示系统
gitee源代码地址
后端代码#xff1a…更多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代码如下
templatediv classmy-process-designerdiv classmy-process-designer__headerslot namecontrol-header/slottemplate v-if!$slots[control-header]el-button-group keyfile-controlel-button :sizeheaderButtonSize :typeheaderButtonType iconel-icon-edit-outline clickonSave保存流程/el-buttonel-button :sizeheaderButtonSize :typeheaderButtonType :iconFolderOpened click$refs.refFile.click()打开文件/el-buttonel-tooltip effectlighttemplate #contentel-button :sizeheaderButtonSize typeprimary clickdownloadProcessAsXml()下载为XML文件/el-buttonbr /el-button :sizeheaderButtonSize typeprimary clickdownloadProcessAsSvg()下载为SVG文件/el-buttonbr /el-button :sizeheaderButtonSize typeprimary clickdownloadProcessAsBpmn()下载为BPMN文件/el-button/templateel-button :sizeheaderButtonSize :typeheaderButtonType :iconDownload下载文件/el-button/el-tooltipel-tooltip effectlighttemplate #contentel-button :sizeheaderButtonSize typeprimary clickpreviewProcessXML预览XML/el-buttonbr /el-button :sizeheaderButtonSize typeprimary clickpreviewProcessJson预览JSON/el-button/templateel-button :sizeheaderButtonSize :typeheaderButtonType :iconView预览/el-button/el-tooltipel-tooltip v-ifsimulation effectlight :contentthis.simulationStatus ? 退出模拟 : 开启模拟el-button :sizeheaderButtonSize :typeheaderButtonType :iconCpu clickprocessSimulation模拟/el-button/el-tooltip/el-button-groupel-button-group keyalign-controlel-tooltip effectlight content向左对齐el-button :sizeheaderButtonSize classalign align-left :iconHistogram clickelementsAlign(left) //el-tooltipel-tooltip effectlight content向右对齐el-button :sizeheaderButtonSize classalign align-right :iconHistogram clickelementsAlign(right) //el-tooltipel-tooltip effectlight content向上对齐el-button :sizeheaderButtonSize classalign align-top :iconHistogram clickelementsAlign(top) //el-tooltipel-tooltip effectlight content向下对齐el-button :sizeheaderButtonSize classalign align-bottom :iconHistogram clickelementsAlign(bottom) //el-tooltipel-tooltip effectlight content水平居中el-button :sizeheaderButtonSize classalign align-center :iconHistogram clickelementsAlign(center) //el-tooltipel-tooltip effectlight content垂直居中el-button :sizeheaderButtonSize classalign align-middle :iconHistogram clickelementsAlign(middle) //el-tooltip/el-button-groupel-button-group keyscale-controlel-tooltip effectlight content缩小视图el-button :sizeheaderButtonSize :disableddefaultZoom 0.2 :iconZoomOut clickprocessZoomOut() //el-tooltipel-button :sizeheaderButtonSize{{ Math.floor(this.defaultZoom * 10 * 10) % }}/el-buttonel-tooltip effectlight content放大视图el-button :sizeheaderButtonSize :disableddefaultZoom 4 :iconZoomIn clickprocessZoomIn() //el-tooltipel-tooltip effectlight content重置视图并居中el-button :sizeheaderButtonSize :iconScaleToOriginal clickprocessReZoom() //el-tooltip/el-button-groupel-button-group keystack-controlel-tooltip effectlight content撤销el-button :sizeheaderButtonSize :disabled!revocable :iconRefreshLeft clickprocessUndo() //el-tooltipel-tooltip effectlight content恢复el-button :sizeheaderButtonSize :disabled!recoverable :iconRefreshRight clickprocessRedo() //el-tooltipel-tooltip effectlight content重新绘制el-button :sizeheaderButtonSize :iconRefresh clickprocessRestart //el-tooltip/el-button-group/template!-- 用于打开本地文件--input typefile idfiles refrefFile styledisplay: none accept.xml, .bpmn changeimportLocalFile //divdiv classmy-process-designer__containerdiv classmy-process-designer__canvas refbpmn-canvas/div/divel-dialog title预览 width60% v-modelpreviewModelVisible append-to-body destroy-on-closehighlightjs :languagepreviewType :codepreviewResult styleheight: 80vh //el-dialog!--el-dialog :title预览${previewType} width60% v-modelpreviewModelVisible append-to-body destroy-on-closeCodemirrorv-model:valuepreviewResult:optionscmOptionsborder:height700//el-dialog--/div
/templatescript
import { Histogram, Cpu, Refresh, RefreshLeft, RefreshRight, ZoomOut, ZoomIn, View, Download, FolderOpened, ScaleToOriginal } from element-plus/icons-vue
import BpmnModeler from bpmn-js/lib/Modeler;
import DefaultEmptyXML from ./plugins/defaultEmpty;
// 翻译方法
import customTranslate from ./plugins/translate/customTranslate;
import translationsCN from ./plugins/translate/zh;
// 模拟流转流程
import tokenSimulation from bpmn-js-token-simulation;
// 标签解析构建器
// import bpmnPropertiesProvider from bpmn-js-properties-panel/lib/provider/bpmn;
// 标签解析 Moddle
import camundaModdleDescriptor from ./plugins/descriptor/camundaDescriptor.json;
import activitiModdleDescriptor from ./plugins/descriptor/activitiDescriptor.json;
import flowableModdleDescriptor from ./plugins/descriptor/flowableDescriptor.json;
// 标签解析 Extension
import camundaModdleExtension from ./plugins/extension-moddle/camunda;
import activitiModdleExtension from ./plugins/extension-moddle/activiti;
import flowableModdleExtension from ./plugins/extension-moddle/flowable;
// 引入json转换与高亮
// import X2JS from x2js;
import convert from xml-js;import Codemirror from codemirror-editor-vue3;
import codemirror/theme/monokai.css
import codemirror/mode/javascript/javascript.js;
import codemirror/mode/xml/xml.js;export default {name: MyProcessDesigner,componentName: MyProcessDesigner,components: {Codemirror},setup() {return {Histogram, Cpu, Refresh, RefreshLeft, RefreshRight, ZoomOut, ZoomIn, View, Download, FolderOpened, ScaleToOriginal}},emits: [destroy, init-finished, commandStack-changed, update:modelValue, change, canvas-viewbox-changed, element-click],props: {modelValue: String, // xml 字符串processId: String,processName: String,translations: Object, // 自定义的翻译文件options: {type: Object,default: () ({})}, // 自定义的翻译文件additionalModel: [Object, Array], // 自定义modelmoddleExtension: Object, // 自定义moddleonlyCustomizeAddi: {type: Boolean,default: false},onlyCustomizeModdle: {type: Boolean,default: false},simulation: {type: Boolean,default: true},keyboard: {type: Boolean,default: true},prefix: {type: String,default: flowable},events: {type: Array,default: () [element.click]},headerButtonSize: {type: String,default: small,validator: value [default, medium, small, mini].indexOf(value) ! -1},headerButtonType: {type: String,default: primary,validator: value [default, primary, success, warning, danger, info].indexOf(value) ! -1}},data() {return {defaultZoom: 1,previewModelVisible: false,simulationStatus: false,previewResult: ,previewType: xml,recoverable: false,revocable: false,cmOptions: {mode: xml, // 语言模式theme: monokai, // 主题lineNumbers: true, // 显示行号smartIndent: true, // 智能缩进readOnly: true,indentUnit: 2, // 智能缩进单位为4个空格长度foldGutter: true, // 启用行槽中的代码折叠styleActiveLine: true // 显示选中行的样式}};},computed: {additionalModules() {const Modules [];// 仅保留用户自定义扩展模块if (this.onlyCustomizeAddi) {if (Object.prototype.toString.call(this.additionalModel) [object Array]) {return this.additionalModel || [];}return [this.additionalModel];}// 插入用户自定义扩展模块if (Object.prototype.toString.call(this.additionalModel) [object Array]) {Modules.push(...this.additionalModel);} else {this.additionalModel Modules.push(this.additionalModel);}// 翻译模块const TranslateModule {translate: [value, customTranslate(this.translations || translationsCN)]};Modules.push(TranslateModule);// 模拟流转模块if (this.simulation) {Modules.push(tokenSimulation);}// 根据需要的流程类型设置扩展元素构建模块// if (this.prefix bpmn) {// Modules.push(bpmnModdleExtension);// }if (this.prefix camunda) {Modules.push(camundaModdleExtension);}if (this.prefix flowable) {Modules.push(flowableModdleExtension);}if (this.prefix activiti) {Modules.push(activitiModdleExtension);}return Modules;},moddleExtensions() {const Extensions {};// 仅使用用户自定义模块if (this.onlyCustomizeModdle) {return this.moddleExtension || null;}// 插入用户自定义模块if (this.moddleExtension) {for (let key in this.moddleExtension) {Extensions[key] this.moddleExtension[key];}}// 根据需要的 流程类型 设置 对应的解析文件if (this.prefix activiti) {Extensions.activiti activitiModdleDescriptor;}if (this.prefix flowable) {Extensions.flowable flowableModdleDescriptor;}if (this.prefix camunda) {Extensions.camunda camundaModdleDescriptor;}return Extensions;}},mounted() {this.initBpmnModeler();this.createNewDiagram(this.modelValue);// this.$once(hook:beforeUnmount, () {// if (this.bpmnModeler) this.bpmnModeler.destroy();// this.$emit(destroy, this.bpmnModeler);// this.bpmnModeler null;// });},beforeUnmount() {if (this.bpmnModeler) this.bpmnModeler.destroy();this.$emit(destroy, this.bpmnModeler);this.bpmnModeler null;},methods: {onSave () {return new Promise((resolve, reject) {if (this.bpmnModeler null) {reject();}this.bpmnModeler.saveXML({ format: true }).then(({ xml }) {this.$emit(save, xml);resolve(xml);});})},initBpmnModeler() {if (this.bpmnModeler) return;this.bpmnModeler new BpmnModeler({container: this.$refs[bpmn-canvas],keyboard: this.keyboard ? { bindTo: document } : null,additionalModules: this.additionalModules,moddleExtensions: this.moddleExtensions,...this.options});this.$emit(init-finished, this.bpmnModeler);this.initModelListeners();},initModelListeners() {const EventBus this.bpmnModeler.get(eventBus);const that this;// 注册需要的监听事件, 将. 替换为 - , 避免解析异常this.events.forEach(event {EventBus.on(event, function(eventObj) {let eventName event.replace(/\./g, -);let element eventObj ? eventObj.element : null;that.$emit(eventName, element, eventObj);});});// 监听图形改变返回xmlEventBus.on(commandStack.changed, async event {try {this.recoverable this.bpmnModeler.get(commandStack).canRedo();this.revocable this.bpmnModeler.get(commandStack).canUndo();let { xml } await this.bpmnModeler.saveXML({ format: true });this.$emit(commandStack-changed, event);this.$emit(update:modelValue, xml);this.$emit(change, xml);} catch (e) {console.error([Process Designer Warn]: ${e.message || e});}});// 监听视图缩放变化this.bpmnModeler.on(canvas.viewbox.changed, ({ viewbox }) {this.$emit(canvas-viewbox-changed, { viewbox });const { scale } viewbox;this.defaultZoom Math.floor(scale * 100) / 100;});},/* 创建新的流程图 */async createNewDiagram(xml) {// 将字符串转换成图显示出来let newId this.processId || Process_${new Date().getTime()};let newName this.processName || 业务流程_${new Date().getTime()};let xmlString xml || DefaultEmptyXML(newId, newName, this.prefix);try {let { warnings } await this.bpmnModeler.importXML(xmlString);if (warnings warnings.length) {warnings.forEach(warn console.warn(warn));}} catch (e) {console.error([Process Designer Warn]: ${e?.message || e});}},// 下载流程图到本地/*** param {string} type* param {*} name*/async downloadProcess(type, name) {try {const _this this;// 按需要类型创建文件并下载if (type xml || type bpmn) {const { err, xml } await this.bpmnModeler.saveXML();// 读取异常时抛出异常if (err) {console.error([Process Designer Warn ]: ${err.message || err});}let { href, filename } _this.setEncoded(type.toUpperCase(), name, xml);downloadFunc(href, filename);} else {const { err, svg } await this.bpmnModeler.saveSVG();// 读取异常时抛出异常if (err) {return console.error(err);}let { href, filename } _this.setEncoded(SVG, name, svg);downloadFunc(href, filename);}} catch (e) {console.error([Process Designer Warn ]: ${e.message || e});}// 文件下载方法function downloadFunc(href, filename) {if (href filename) {let a document.createElement(a);a.download filename; //指定下载的文件名a.href href; // URL对象a.click(); // 模拟点击URL.revokeObjectURL(a.href); // 释放URL 对象}}},// 根据所需类型进行转码并返回下载地址setEncoded(type, filename diagram, data) {const encodedData encodeURIComponent(data);return {filename: ${filename}.${type},href: data:application/${type svg ? text/xml : bpmn20-xml};charsetUTF-8,${encodedData},data: data};},// 加载本地文件importLocalFile() {const that this;const file this.$refs.refFile.files[0];const reader new FileReader();reader.readAsText(file);reader.onload function() {let xmlStr this.result;that.createNewDiagram(xmlStr);};},/* ------------------------------------------------ refs methods ------------------------------------------------------ */downloadProcessAsXml() {this.downloadProcess(xml);},downloadProcessAsBpmn() {this.downloadProcess(bpmn);},downloadProcessAsSvg() {this.downloadProcess(svg);},processSimulation() {this.simulationStatus !this.simulationStatus;this.simulation this.bpmnModeler.get(toggleMode).toggleMode();},processRedo() {this.bpmnModeler.get(commandStack).redo();},processUndo() {this.bpmnModeler.get(commandStack).undo();},processZoomIn(zoomStep 0.1) {let newZoom Math.floor(this.defaultZoom * 100 zoomStep * 100) / 100;if (newZoom 4) {throw new Error([Process Designer Warn ]: The zoom ratio cannot be greater than 4);}this.defaultZoom newZoom;this.bpmnModeler.get(canvas).zoom(this.defaultZoom);},processZoomOut(zoomStep 0.1) {let newZoom Math.floor(this.defaultZoom * 100 - zoomStep * 100) / 100;if (newZoom 0.2) {throw new Error([Process Designer Warn ]: The zoom ratio cannot be less than 0.2);}this.defaultZoom newZoom;this.bpmnModeler.get(canvas).zoom(this.defaultZoom);},processZoomTo(newZoom 1) {if (newZoom 0.2) {throw new Error([Process Designer Warn ]: The zoom ratio cannot be less than 0.2);}if (newZoom 4) {throw new Error([Process Designer Warn ]: The zoom ratio cannot be greater than 4);}this.defaultZoom newZoom;this.bpmnModeler.get(canvas).zoom(newZoom);},processReZoom() {this.defaultZoom 1;this.bpmnModeler.get(canvas).zoom(fit-viewport, auto);},processRestart() {this.recoverable false;this.revocable false;this.createNewDiagram(null);},elementsAlign(align) {const Align this.bpmnModeler.get(alignElements);const Selection this.bpmnModeler.get(selection);const SelectedElements Selection.get();if (!SelectedElements || SelectedElements.length 1) {this.$message.warning(请按住 Ctrl 键选择多个元素对齐);return;}this.$confirm(自动对齐可能造成图形变形是否继续, 警告, {confirmButtonText: 确定,cancelButtonText: 取消,type: warning}).then(() Align.trigger(SelectedElements, align));},/*----------------------------- 方法结束 ---------------------------------*/previewProcessXML() {this.bpmnModeler.saveXML({ format: true }).then(({ xml }) {this.previewResult xml;this.previewType xml;//this.cmOptions.mode xmlthis.previewModelVisible true;});},previewProcessJson() {this.bpmnModeler.saveXML({ format: true }).then(({ xml }) {this.previewResult convert.xml2json(xml, { spaces: 2 });this.previewType json;this.previewModelVisible true;});}}
};
/script2、修改成vue3后的代码如下
templatediv classmy-process-designerdiv classmy-process-designer__headerslot namecontrol-header/slottemplate v-if!$slots[control-header]el-button-group keyfile-controlel-button :sizeheaderButtonSize :typeheaderButtonType iconel-icon-edit-outline clickonSave保存流程/el-buttonel-button :sizeheaderButtonSize :typeheaderButtonType :iconFolderOpened clickrefFile.click()打开文件/el-buttonel-tooltip effectlighttemplate #contentel-button :sizeheaderButtonSize typeprimary clickdownloadProcessAsXml()下载为XML文件/el-buttonbr /el-button :sizeheaderButtonSize typeprimary clickdownloadProcessAsSvg()下载为SVG文件/el-buttonbr /el-button :sizeheaderButtonSize typeprimary clickdownloadProcessAsBpmn()下载为BPMN文件/el-button/templateel-button :sizeheaderButtonSize :typeheaderButtonType :iconDownload下载文件/el-button/el-tooltipel-tooltip effectlighttemplate #contentel-button :sizeheaderButtonSize typeprimary clickpreviewProcessXML预览XML/el-buttonbr /el-button :sizeheaderButtonSize typeprimary clickpreviewProcessJson预览JSON/el-button/templateel-button :sizeheaderButtonSize :typeheaderButtonType :iconView预览/el-button/el-tooltipel-tooltip v-ifsimulation effectlight :contentsimulationStatus ? 退出模拟 : 开启模拟el-button :sizeheaderButtonSize :typeheaderButtonType :iconCpu clickprocessSimulation模拟/el-button/el-tooltip/el-button-groupel-button-group keyalign-controlel-tooltip effectlight content向左对齐el-button :sizeheaderButtonSize classalign align-left :iconHistogram clickelementsAlign(left) //el-tooltipel-tooltip effectlight content向右对齐el-button :sizeheaderButtonSize classalign align-right :iconHistogram clickelementsAlign(right) //el-tooltipel-tooltip effectlight content向上对齐el-button :sizeheaderButtonSize classalign align-top :iconHistogram clickelementsAlign(top) //el-tooltipel-tooltip effectlight content向下对齐el-button :sizeheaderButtonSize classalign align-bottom :iconHistogram clickelementsAlign(bottom) //el-tooltipel-tooltip effectlight content水平居中el-button :sizeheaderButtonSize classalign align-center :iconHistogram clickelementsAlign(center) //el-tooltipel-tooltip effectlight content垂直居中el-button :sizeheaderButtonSize classalign align-middle :iconHistogram clickelementsAlign(middle) //el-tooltip/el-button-groupel-button-group keyscale-controlel-tooltip effectlight content缩小视图el-button :sizeheaderButtonSize :disableddefaultZoom 0.2 :iconZoomOut clickprocessZoomOut() //el-tooltipel-button :sizeheaderButtonSize{{ Math.floor(defaultZoom * 10 * 10) % }}/el-buttonel-tooltip effectlight content放大视图el-button :sizeheaderButtonSize :disableddefaultZoom 4 :iconZoomIn clickprocessZoomIn() //el-tooltipel-tooltip effectlight content重置视图并居中el-button :sizeheaderButtonSize :iconScaleToOriginal clickprocessReZoom() //el-tooltip/el-button-groupel-button-group keystack-controlel-tooltip effectlight content撤销el-button :sizeheaderButtonSize :disabled!revocable :iconRefreshLeft clickprocessUndo() //el-tooltipel-tooltip effectlight content恢复el-button :sizeheaderButtonSize :disabled!recoverable :iconRefreshRight clickprocessRedo() //el-tooltipel-tooltip effectlight content重新绘制el-button :sizeheaderButtonSize :iconRefresh clickprocessRestart //el-tooltip/el-button-group/template!-- 用于打开本地文件--input typefile idfiles refrefFile styledisplay: none accept.xml, .bpmn changeimportLocalFile //divdiv classmy-process-designer__containerdiv classmy-process-designer__canvas id bpmnCanvas refbpmnCanvas/div/divel-dialog title预览 width60% v-modelpreviewModelVisible append-to-body destroy-on-closehighlightjs :languagepreviewType :codepreviewResult styleheight: 80vh //el-dialog!--el-dialog :title预览${previewType} width60% v-modelpreviewModelVisible append-to-body destroy-on-closeCodemirrorv-model:valuepreviewResult:optionscmOptionsborder:height700//el-dialog--/div
/templatescript langts setup
import { Histogram, Cpu, Refresh, RefreshLeft, RefreshRight, ZoomOut, ZoomIn, View, Download, FolderOpened, ScaleToOriginal } from element-plus/icons-vue
import { ElMessage, ElMessageBox } from element-plus
import BpmnModeler from bpmn-js/lib/Modeler;
import DefaultEmptyXML from ./plugins/defaultEmpty;
// 翻译方法
import customTranslate from ./plugins/translate/customTranslate;
import translationsCN from ./plugins/translate/zh;
// 模拟流转流程
import tokenSimulation from bpmn-js-token-simulation;
// 标签解析构建器
// import bpmnPropertiesProvider from bpmn-js-properties-panel/lib/provider/bpmn;
// 标签解析 Moddle
import camundaModdleDescriptor from ./plugins/descriptor/camundaDescriptor.json;
import activitiModdleDescriptor from ./plugins/descriptor/activitiDescriptor.json;
import flowableModdleDescriptor from ./plugins/descriptor/flowableDescriptor.json;
// 标签解析 Extension
import camundaModdleExtension from ./plugins/extension-moddle/camunda;
import activitiModdleExtension from ./plugins/extension-moddle/activiti;
import flowableModdleExtension from ./plugins/extension-moddle/flowable;
// 引入json转换与高亮
// import X2JS from x2js;
import convert from xml-js;import Codemirror from codemirror-editor-vue3;
import codemirror/theme/monokai.css
import codemirror/mode/javascript/javascript.js;
import codemirror/mode/xml/xml.js;defineOptions({ name: MyProcessDesigner })const refFile ref()
const emit defineEmits([destroy,init-finished,commandStack-changed,update:modelValue,change,canvas-viewbox-changed,element-click
])const props defineProps({modelValue: String, // xml 字符串processId: String, // 流程 key 标识processName: String, // 流程 name 名字formId: Number, // 流程 form 表单编号translations: {// 自定义的翻译文件type: Object,default: () {}},options: {type: Object,default: () ({})}, // 自定义的翻译文件additionalModel: [Object, Array], // 自定义modelmoddleExtension: {// 自定义moddletype: Object,default: () {}},onlyCustomizeAddi: {type: Boolean,default: false},onlyCustomizeModdle: {type: Boolean,default: false},simulation: {type: Boolean,default: true},keyboard: {type: Boolean,default: true},prefix: {type: String,default: flowable},events: {type: Array,default: () [element.click]},headerButtonSize: {type: String,default: small,validator: (value: string) [default, medium, small, mini].indexOf(value) ! -1},headerButtonType: {type: String,default: primary,validator: (value: string) [default, primary, success, warning, danger, info].indexOf(value) ! -1}
})let bpmnModeler: any null
const defaultZoom ref(1)
const previewModelVisible ref(false)
const simulationStatus ref(false)
const previewResult ref()
const previewType ref(xml)
const recoverable ref(false)
const revocable ref(false)const cmOptions ref({mode: xml, // 语言模式theme: monokai, // 主题lineNumbers: true, // 显示行号smartIndent: true, // 智能缩进readOnly: true,indentUnit: 2, // 智能缩进单位为4个空格长度foldGutter: true, // 启用行槽中的代码折叠styleActiveLine: true // 显示选中行的样式
})const additionalModules computed(() {const Modules: any[] []// 仅保留用户自定义扩展模块if (props.onlyCustomizeAddi) {if (Object.prototype.toString.call(props.additionalModel) [object Array]) {return props.additionalModel || []}return [props.additionalModel]}// 插入用户自定义扩展模块if (Object.prototype.toString.call(props.additionalModel) [object Array]) {Modules.push(...(props.additionalModel as any[]))} else {props.additionalModel Modules.push(props.additionalModel)}// 翻译模块const TranslateModule {translate: [value, customTranslate(props.translations || translationsCN)]}Modules.push(TranslateModule)// 模拟流转模块if (props.simulation) {Modules.push(tokenSimulation)}// 根据需要的流程类型设置扩展元素构建模块// if (this.prefix bpmn) {// Modules.push(bpmnModdleExtension);// }if (props.prefix camunda) {Modules.push(camundaModdleExtension)}if (props.prefix flowable) {Modules.push(flowableModdleExtension)}if (props.prefix activiti) {Modules.push(activitiModdleExtension)}return Modules
})const moddleExtensions computed(() {const Extensions: any {}// 仅使用用户自定义模块if (props.onlyCustomizeModdle) {return props.moddleExtension || null}// 插入用户自定义模块if (props.moddleExtension) {for (let key in props.moddleExtension) {Extensions[key] props.moddleExtension[key]}}// 根据需要的 流程类型 设置 对应的解析文件if (props.prefix activiti) {Extensions.activiti activitiModdleDescriptor}if (props.prefix flowable) {Extensions.flowable flowableModdleDescriptor}if (props.prefix camunda) {Extensions.camunda camundaModdleDescriptor}return Extensions
})const onSave async () {return new Promise((resolve, reject) {if (bpmnModeler null) {reject();}bpmnModeler.saveXML({ format: true }).then(({ xml }) {// 触发 save 事件emit(save, xml)resolve(xml);});})
}const initBpmnModeler () {if (bpmnModeler) returnlet container document.getElementById(bpmnCanvas)bpmnModeler new BpmnModeler({container: container,keyboard: props.keyboard ? { bindTo: document } : null,additionalModules: additionalModules.value,moddleExtensions: moddleExtensions.value,...props.options})console.log(initBpmnModeler bpmnModeler,bpmnModeler)emit(init-finished, bpmnModeler)initModelListeners()
}const initModelListeners () {const EventBus bpmnModeler.get(eventBus)// 注册需要的监听事件, 将. 替换为 - , 避免解析异常props.events.forEach((event: any) {EventBus.on(event, function (eventObj) {let eventName event.replace(/\./g, -)let element eventObj ? eventObj.element : nullemit(element-click, element, eventObj)// emit(eventName, element, eventObj)})})// 监听图形改变返回xmlEventBus.on(commandStack.changed, async (event) {try {recoverable.value bpmnModeler.get(commandStack).canRedo()revocable.value bpmnModeler.get(commandStack).canUndo()let { xml } await bpmnModeler.saveXML({ format: true })emit(commandStack-changed, event)emit(update:modelValue, xml)emit(change, xml)} catch (e: any) {console.error([Process Designer Warn]: ${e.message || e})}})// 监听视图缩放变化bpmnModeler.on(canvas.viewbox.changed, ({ viewbox }) {emit(canvas-viewbox-changed, { viewbox })const { scale } viewboxdefaultZoom.value Math.floor(scale * 100) / 100})
}
/* 创建新的流程图 */
const createNewDiagram async (xml) {// 将字符串转换成图显示出来let newId props.processId || Process_${new Date().getTime()}let newName props.processName || 业务流程_${new Date().getTime()}let xmlString xml || DefaultEmptyXML(newId, newName, props.prefix)try {let { warnings } await bpmnModeler.importXML(xmlString)if (warnings warnings.length) {warnings.forEach((warn) console.warn(warn))}} catch (e: any) {console.error([Process Designer Warn]: ${e.message || e})}
}// 下载流程图到本地/*** param {string} type* param {*} name*/
const downloadProcess async (type, name) {try {// 按需要类型创建文件并下载if (type xml || type bpmn) {const { err, xml } await bpmnModeler.saveXML()// 读取异常时抛出异常if (err) {console.error([Process Designer Warn ]: ${err.message || err})}let { href, filename } setEncoded(type.toUpperCase(), name, xml)downloadFunc(href, filename)} else {const { err, svg } await bpmnModeler.saveSVG()// 读取异常时抛出异常if (err) {return console.error(err)}let { href, filename } setEncoded(SVG, name, svg)downloadFunc(href, filename)}} catch (e: any) {console.error([Process Designer Warn ]: ${e.message || e})}// 文件下载方法function downloadFunc(href, filename) {if (href filename) {let a document.createElement(a)a.download filename //指定下载的文件名a.href href // URL对象a.click() // 模拟点击URL.revokeObjectURL(a.href) // 释放URL 对象}}
}
// 根据所需类型进行转码并返回下载地址
const setEncoded (type, filename diagram, data) {const encodedData encodeURIComponent(data)return {filename: ${filename}.${type},href: data:application/${type svg ? text/xml : bpmn20-xml};charsetUTF-8,${encodedData},data: data}
}// 加载本地文件
const importLocalFile () {const file refFile.value.files[0]const reader new FileReader()reader.readAsText(file)reader.onload function () {let xmlStr this.resultcreateNewDiagram(xmlStr)}
}
/* ------------------------------------------------ refs methods ------------------------------------------------------ */
const downloadProcessAsXml () {downloadProcess(xml)
}
const downloadProcessAsBpmn () {downloadProcess(bpmn)
}
const downloadProcessAsSvg () {downloadProcess(svg)
}
const processSimulation () {simulationStatus.value !simulationStatus.valueprops.simulation bpmnModeler.get(toggleMode).toggleMode()
}
const processRedo () {bpmnModeler.get(commandStack).redo()
}
const processUndo () {bpmnModeler.get(commandStack).undo()
}
const processZoomIn (zoomStep 0.1) {let newZoom Math.floor(defaultZoom.value * 100 zoomStep * 100) / 100if (newZoom 4) {throw new Error([Process Designer Warn ]: The zoom ratio cannot be greater than 4)}defaultZoom.value newZoombpmnModeler.get(canvas).zoom(defaultZoom.value)
}
const processZoomOut (zoomStep 0.1) {let newZoom Math.floor(defaultZoom.value * 100 - zoomStep * 100) / 100if (newZoom 0.2) {throw new Error([Process Designer Warn ]: The zoom ratio cannot be less than 0.2)}defaultZoom.value newZoombpmnModeler.get(canvas).zoom(defaultZoom.value)
}
const processZoomTo (newZoom 1) {if (newZoom 0.2) {throw new Error([Process Designer Warn ]: The zoom ratio cannot be less than 0.2);}if (newZoom 4) {throw new Error([Process Designer Warn ]: The zoom ratio cannot be greater than 4);}defaultZoom.value newZoom;bpmnModeler.get(canvas).zoom(newZoom);
}const processReZoom () {defaultZoom.value 1bpmnModeler.get(canvas).zoom(fit-viewport, auto)
}const processRestart () {recoverable.value falserevocable.value falsecreateNewDiagram(null)
}
const elementsAlign (align) {const Align bpmnModeler.get(alignElements)const Selection bpmnModeler.get(selection)const SelectedElements Selection.get()if (!SelectedElements || SelectedElements.length 1) {ElMessage.warning(请按住 Shift 键选择多个元素对齐)return}ElMessageBox.confirm(自动对齐可能造成图形变形是否继续, 警告, {confirmButtonText: 确定,cancelButtonText: 取消,type: warning}).then(() {Align.trigger(SelectedElements, align)})
}
/*----------------------------- 方法结束 ---------------------------------*/
const previewProcessXML () {bpmnModeler.saveXML({ format: true }).then(({ xml }) {previewResult.value xmlpreviewType.value xml//cmOptions.value[mode] xmlpreviewModelVisible.value true})
}
const previewProcessJson () {bpmnModeler.saveXML({ format: true }).then(({ xml }) {previewResult.value convert.xml2json(xml, { spaces: 2 });previewType.value json;previewModelVisible.value true;})
}onMounted(() {initBpmnModeler()createNewDiagram(props.modelValue)
})onBeforeUnmount(() {if (bpmnModeler) bpmnModeler.destroy()emit(destroy, bpmnModeler)bpmnModeler null
})
/script3、效果图如下
