From a1d7e81859f554f3a53680cc35f0f49bf1f77098 Mon Sep 17 00:00:00 2001
From: wwf <1971391498@qq.com>
Date: 星期四, 14 五月 2026 14:37:02 +0800
Subject: [PATCH] 导入项目
---
src/components/bpmnProcessDesigner/package/designer/ProcessDesigner.vue | 655 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 655 insertions(+), 0 deletions(-)
diff --git a/src/components/bpmnProcessDesigner/package/designer/ProcessDesigner.vue b/src/components/bpmnProcessDesigner/package/designer/ProcessDesigner.vue
new file mode 100644
index 0000000..00e887c
--- /dev/null
+++ b/src/components/bpmnProcessDesigner/package/designer/ProcessDesigner.vue
@@ -0,0 +1,655 @@
+<template>
+ <div class="my-process-designer">
+ <div class="my-process-designer__header" style="z-index: 999; display: table-row-group">
+ <slot name="control-header"></slot>
+ <template v-if="!$slots['control-header']">
+ <ElButtonGroup key="file-control">
+ <XButton preIcon="ep:folder-opened" title="鎵撳紑鏂囦欢" @click="refFile.click()" />
+ <el-tooltip effect="light" placement="bottom">
+ <template #content>
+ <div style="color: #409eff">
+ <!-- <el-button link @click="downloadProcessAsXml()">涓嬭浇涓篨ML鏂囦欢</el-button> -->
+ <XTextButton title="涓嬭浇涓篨ML鏂囦欢" @click="downloadProcessAsXml()" />
+ <br />
+
+ <!-- <el-button link @click="downloadProcessAsSvg()">涓嬭浇涓篠VG鏂囦欢</el-button> -->
+ <XTextButton title="涓嬭浇涓篠VG鏂囦欢" @click="downloadProcessAsSvg()" />
+ <br />
+
+ <!-- <el-button link @click="downloadProcessAsBpmn()">涓嬭浇涓築PMN鏂囦欢</el-button> -->
+ <XTextButton title="涓嬭浇涓築PMN鏂囦欢" @click="downloadProcessAsBpmn()" />
+ </div>
+ </template>
+ <XButton title="涓嬭浇鏂囦欢" preIcon="ep:download" />
+ </el-tooltip>
+ <el-tooltip effect="light">
+ <XButton preIcon="ep:view" title="娴忚" />
+ <template #content>
+ <!-- <el-button link @click="previewProcessXML">棰勮XML</el-button> -->
+ <XTextButton title="棰勮XML" @click="previewProcessXML" />
+ <br />
+ <!-- <el-button link @click="previewProcessJson">棰勮JSON</el-button> -->
+ <XTextButton title="棰勮JSON" @click="previewProcessJson" />
+ </template>
+ </el-tooltip>
+ <el-tooltip
+ v-if="props.simulation"
+ effect="light"
+ :content="simulationStatus ? '閫�鍑烘ā鎷�' : '寮�鍚ā鎷�'"
+ >
+ <XButton preIcon="ep:cpu" title="妯℃嫙" @click="processSimulation" />
+ </el-tooltip>
+ </ElButtonGroup>
+ <ElButtonGroup key="align-control">
+ <el-tooltip effect="light" content="鍚戝乏瀵归綈">
+ <!-- <el-button
+ class="align align-left"
+ icon="el-icon-s-data"
+ @click="elementsAlign('left')"
+ /> -->
+ <XButton
+ preIcon="fa:align-left"
+ class="align align-bottom"
+ @click="elementsAlign('left')"
+ />
+ </el-tooltip>
+ <el-tooltip effect="light" content="鍚戝彸瀵归綈">
+ <!-- <el-button
+ class="align align-right"
+ icon="el-icon-s-data"
+ @click="elementsAlign('right')"
+ /> -->
+ <XButton
+ preIcon="fa:align-left"
+ class="align align-top"
+ @click="elementsAlign('right')"
+ />
+ </el-tooltip>
+ <el-tooltip effect="light" content="鍚戜笂瀵归綈">
+ <!-- <el-button
+ class="align align-top"
+ icon="el-icon-s-data"
+ @click="elementsAlign('top')"
+ /> -->
+ <XButton
+ preIcon="fa:align-left"
+ class="align align-left"
+ @click="elementsAlign('top')"
+ />
+ </el-tooltip>
+ <el-tooltip effect="light" content="鍚戜笅瀵归綈">
+ <!-- <el-button
+ class="align align-bottom"
+ icon="el-icon-s-data"
+ @click="elementsAlign('bottom')"
+ /> -->
+ <XButton
+ preIcon="fa:align-left"
+ class="align align-right"
+ @click="elementsAlign('bottom')"
+ />
+ </el-tooltip>
+ <el-tooltip effect="light" content="姘村钩灞呬腑">
+ <!-- <el-button
+ class="align align-center"
+ icon="el-icon-s-data"
+ @click="elementsAlign('center')"
+ /> -->
+ <!-- class="align align-center" -->
+ <XButton
+ preIcon="fa:align-left"
+ class="align align-center"
+ @click="elementsAlign('center')"
+ />
+ </el-tooltip>
+ <el-tooltip effect="light" content="鍨傜洿灞呬腑">
+ <!-- <el-button
+ class="align align-middle"
+ icon="el-icon-s-data"
+ @click="elementsAlign('middle')"
+ /> -->
+ <XButton
+ preIcon="fa:align-left"
+ class="align align-middle"
+ @click="elementsAlign('middle')"
+ />
+ </el-tooltip>
+ </ElButtonGroup>
+ <ElButtonGroup key="scale-control">
+ <el-tooltip effect="light" content="缂╁皬瑙嗗浘">
+ <!-- <el-button
+ :disabled="defaultZoom < 0.2"
+ icon="el-icon-zoom-out"
+ @click="processZoomOut()"
+ /> -->
+ <XButton
+ preIcon="ep:zoom-out"
+ @click="processZoomOut()"
+ :disabled="defaultZoom < 0.2"
+ />
+ </el-tooltip>
+ <el-button>{{ Math.floor(defaultZoom * 10 * 10) + '%' }}</el-button>
+ <el-tooltip effect="light" content="鏀惧ぇ瑙嗗浘">
+ <!-- <el-button
+ :disabled="defaultZoom > 4"
+ icon="el-icon-zoom-in"
+ @click="processZoomIn()"
+ /> -->
+ <XButton preIcon="ep:zoom-in" @click="processZoomIn()" :disabled="defaultZoom > 4" />
+ </el-tooltip>
+ <el-tooltip effect="light" content="閲嶇疆瑙嗗浘骞跺眳涓�">
+ <!-- <el-button icon="el-icon-c-scale-to-original" @click="processReZoom()" /> -->
+ <XButton preIcon="ep:scale-to-original" @click="processReZoom()" />
+ </el-tooltip>
+ </ElButtonGroup>
+ <ElButtonGroup key="stack-control">
+ <el-tooltip effect="light" content="鎾ら攢">
+ <!-- <el-button :disabled="!revocable" icon="el-icon-refresh-left" @click="processUndo()" /> -->
+ <XButton preIcon="ep:refresh-left" @click="processUndo()" :disabled="!revocable" />
+ </el-tooltip>
+ <el-tooltip effect="light" content="鎭㈠">
+ <!-- <el-button
+ :disabled="!recoverable"
+ icon="el-icon-refresh-right"
+ @click="processRedo()"
+ /> -->
+ <XButton preIcon="ep:refresh-right" @click="processRedo()" :disabled="!recoverable" />
+ </el-tooltip>
+ <el-tooltip effect="light" content="閲嶆柊缁樺埗">
+ <!-- <el-button icon="el-icon-refresh" @click="processRestart" /> -->
+ <XButton preIcon="ep:refresh" @click="processRestart()" />
+ </el-tooltip>
+ </ElButtonGroup>
+ </template>
+ <!-- 鐢ㄤ簬鎵撳紑鏈湴鏂囦欢-->
+ <input
+ type="file"
+ id="files"
+ ref="refFile"
+ style="display: none"
+ accept=".xml, .bpmn"
+ @change="importLocalFile"
+ />
+ </div>
+ <div class="my-process-designer__container">
+ <div
+ class="my-process-designer__canvas"
+ ref="bpmnCanvas"
+ id="bpmnCanvas"
+ style="width: 1680px; height: 800px"
+ ></div>
+ <!-- <div id="js-properties-panel" class="panel"></div> -->
+ <!-- <div class="my-process-designer__canvas" ref="bpmn-canvas"></div> -->
+ </div>
+ <Dialog
+ title="棰勮"
+ v-model="previewModelVisible"
+ width="80%"
+ :scroll="true"
+ max-height="600px"
+ >
+ <div>
+ <pre><code v-dompurify-html="highlightedCode(previewResult)" class="hljs"></code></pre>
+ </div>
+ </Dialog>
+ </div>
+</template>
+
+<script lang="ts" setup>
+// import 'bpmn-js/dist/assets/diagram-js.css' // 宸﹁竟宸ュ叿鏍忎互鍙婄紪杈戣妭鐐圭殑鏍峰紡
+// import 'bpmn-js/dist/assets/bpmn-font/css/bpmn.css'
+// import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css'
+// import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css'
+// import 'bpmn-js-properties-panel/dist/assets/bpmn-js-properties-panel.css' // 鍙充晶妗嗘牱寮�
+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";
+// import propertiesPanelModule from 'bpmn-js-properties-panel'
+// import propertiesProviderModule from 'bpmn-js-properties-panel/lib/provider/camunda'
+// 鏍囩瑙ｆ瀽 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 xml2js from 'xml-js'
+// import xml2js from 'fast-xml-parser'
+import { XmlNode, XmlNodeType, parseXmlString } from 'steady-xml'
+// 浠ｇ爜楂樹寒鎻掍欢
+// import hljs from 'highlight.js/lib/highlight'
+// import 'highlight.js/styles/github-gist.css'
+// hljs.registerLanguage('xml', 'highlight.js/lib/languages/xml')
+// hljs.registerLanguage('json', 'highlight.js/lib/languages/json')
+// const eventName = reactive({
+// name: ''
+// })
+import hljs from 'highlight.js' // 瀵煎叆浠ｇ爜楂樹寒鏂囦欢
+import 'highlight.js/styles/github.css' // 瀵煎叆浠ｇ爜楂樹寒鏍峰紡
+
+defineOptions({ name: 'MyProcessDesigner' })
+
+const bpmnCanvas = ref()
+const refFile = ref()
+const emit = defineEmits([
+ 'destroy',
+ 'init-finished',
+ 'save',
+ 'commandStack-changed',
+ 'input',
+ 'change',
+ 'canvas-viewbox-changed',
+ // eventName.name
+ 'element-click'
+])
+
+const props = defineProps({
+ value: String, // xml 瀛楃涓�
+ // valueWatch: true, // xml 瀛楃涓茬殑 watch 鐘舵��
+ processId: String, // 娴佺▼ key 鏍囪瘑
+ processName: String, // 娴佺▼ name 鍚嶅瓧
+ formId: Number, // 娴佺▼ form 琛ㄥ崟缂栧彿
+ translations: {
+ // 鑷畾涔夌殑缈昏瘧鏂囦欢
+ type: Object,
+ default: () => {}
+ },
+ additionalModel: [Object, Array], // 鑷畾涔塵odel
+ moddleExtension: {
+ // 鑷畾涔塵oddle
+ type: 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: 'camunda'
+ },
+ 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
+ }
+})
+
+/**
+ * 浠ｇ爜楂樹寒
+ */
+const highlightedCode = (code: string) => {
+ // 楂樹寒
+ if (previewType.value === 'json') {
+ code = JSON.stringify(code, null, 2)
+ }
+ const result = hljs.highlight(code, { language: previewType.value, ignoreIllegals: true })
+ return result.value || ' '
+}
+
+provide('configGlobal', props)
+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 additionalModules = computed(() => {
+ console.log(props.additionalModel, 'additionalModel')
+ 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);
+ // }
+ console.log(props.prefix, 'props.prefix ')
+ 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(() => {
+ console.log(props.onlyCustomizeModdle, 'props.onlyCustomizeModdle')
+ console.log(props.moddleExtension, 'props.moddleExtension')
+ console.log(props.prefix, 'props.prefix')
+ 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
+})
+console.log(additionalModules, 'additionalModules()')
+console.log(moddleExtensions, 'moddleExtensions()')
+const initBpmnModeler = () => {
+ if (bpmnModeler) return
+ let data = document.getElementById('bpmnCanvas')
+ console.log(data, 'data')
+ console.log(props.keyboard, 'props.keyboard')
+ console.log(additionalModules, 'additionalModules()')
+ console.log(moddleExtensions, 'moddleExtensions()')
+
+ bpmnModeler = new BpmnModeler({
+ // container: this.$refs['bpmn-canvas'],
+ // container: getCurrentInstance(),
+ // container: needClass,
+ // container: bpmnCanvas.value,
+ container: data,
+ // width: '100%',
+ // 娣诲姞鎺у埗鏉�
+ // propertiesPanel: {
+ // parent: '#js-properties-panel'
+ // },
+ keyboard: props.keyboard ? { bindTo: document } : null,
+ // additionalModules: additionalModules.value,
+ additionalModules: additionalModules.value,
+ moddleExtensions: moddleExtensions.value
+
+ // additionalModules: [
+ // additionalModules.value
+ // propertiesPanelModule,
+ // propertiesProviderModule
+ // propertiesProviderModule
+ // ],
+ // moddleExtensions: { camunda: moddleExtensions.value }
+ })
+
+ // bpmnModeler.createDiagram()
+
+ // console.log(bpmnModeler, 'bpmnModeler111111')
+ emit('init-finished', bpmnModeler)
+ initModelListeners()
+}
+
+const initModelListeners = () => {
+ const EventBus = bpmnModeler.get('eventBus')
+ console.log(EventBus, 'EventBus')
+ // 娉ㄥ唽闇�瑕佺殑鐩戝惉浜嬩欢, 灏�. 鏇挎崲涓� - , 閬垮厤瑙ｆ瀽寮傚父
+ props.events.forEach((event: any) => {
+ EventBus.on(event, function (eventObj) {
+ let eventName = event.replace(/\./g, '-')
+ // eventName.name = eventName
+ let element = eventObj ? eventObj.element : null
+ console.log(eventName, 'eventName')
+ console.log(element, 'element')
+ emit('element-click', element, eventObj)
+ // emit(eventName, element, eventObj)
+ })
+ })
+ // 鐩戝惉鍥惧舰鏀瑰彉杩斿洖xml
+ EventBus.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('input', xml)
+ emit('change', xml)
+ emit('save', 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 } = viewbox
+ defaultZoom.value = Math.floor(scale * 100) / 100
+ })
+}
+/* 鍒涘缓鏂扮殑娴佺▼鍥� */
+const createNewDiagram = async (xml) => {
+ console.log(xml, '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 {
+ // console.log(xmlString, 'xmlString')
+ // console.log(this.bpmnModeler.importXML);
+ let { warnings } = await bpmnModeler.importXML(xmlString)
+ console.log(warnings, 'warnings')
+ if (warnings && warnings.length) {
+ warnings.forEach((warn) => console.warn(warn))
+ }
+ } catch (e: any) {
+ console.error(`[Process Designer Warn]: ${e.message || e}`)
+ }
+}
+
+// 涓嬭浇娴佺▼鍥惧埌鏈湴
+const downloadProcess = async (type) => {
+ 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(), xml)
+ downloadFunc(href, filename)
+ } else {
+ const { err, svg } = await bpmnModeler.saveSVG()
+ // 璇诲彇寮傚父鏃舵姏鍑哄紓甯�
+ if (err) {
+ return console.error(err)
+ }
+ let { href, filename } = setEncoded('SVG', 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, data) => {
+ const filename = 'diagram'
+ const encodedData = encodeURIComponent(data)
+ return {
+ filename: `${filename}.${type}`,
+ href: `data:application/${
+ type === 'svg' ? 'text/xml' : 'bpmn20-xml'
+ };charset=UTF-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.result
+ createNewDiagram(xmlStr)
+ emit('save', xmlStr)
+ }
+}
+/* ------------------------------------------------ refs methods ------------------------------------------------------ */
+const downloadProcessAsXml = () => {
+ downloadProcess('xml')
+}
+const downloadProcessAsBpmn = () => {
+ downloadProcess('bpmn')
+}
+const downloadProcessAsSvg = () => {
+ downloadProcess('svg')
+}
+const processSimulation = () => {
+ simulationStatus.value = !simulationStatus.value
+ console.log(bpmnModeler.get('toggleMode', 'strict'), "bpmnModeler.get('toggleMode')")
+ props.simulation && bpmnModeler.get('toggleMode', 'strict').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) / 100
+ if (newZoom > 4) {
+ throw new Error('[Process Designer Warn ]: The zoom ratio cannot be greater than 4')
+ }
+ defaultZoom.value = newZoom
+ bpmnModeler.get('canvas').zoom(defaultZoom.value)
+}
+const processZoomOut = (zoomStep = 0.1) => {
+ let newZoom = Math.floor(defaultZoom.value * 100 - zoomStep * 100) / 100
+ if (newZoom < 0.2) {
+ throw new Error('[Process Designer Warn ]: The zoom ratio cannot be less than 0.2')
+ }
+ defaultZoom.value = newZoom
+ bpmnModeler.get('canvas').zoom(defaultZoom.value)
+}
+const processReZoom = () => {
+ defaultZoom.value = 1
+ bpmnModeler.get('canvas').zoom('fit-viewport', 'auto')
+}
+const processRestart = () => {
+ recoverable.value = false
+ revocable.value = false
+ createNewDiagram(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 閿�夋嫨澶氫釜鍏冪礌瀵归綈')
+ // alert('璇锋寜浣� Ctrl 閿�夋嫨澶氫釜鍏冪礌瀵归綈
+ return
+ }
+ ElMessageBox.confirm('鑷姩瀵归綈鍙兘閫犳垚鍥惧舰鍙樺舰锛屾槸鍚︾户缁紵', '璀﹀憡', {
+ confirmButtonText: '纭畾',
+ cancelButtonText: '鍙栨秷',
+ type: 'warning'
+ }).then(() => {
+ Align.trigger(SelectedElements, align)
+ })
+}
+/*----------------------------- 鏂规硶缁撴潫 ---------------------------------*/
+const previewProcessXML = () => {
+ console.log(bpmnModeler.saveXML, 'bpmnModeler')
+ bpmnModeler.saveXML({ format: true }).then(({ xml }) => {
+ // console.log(xml, 'xml111111')
+ previewResult.value = xml
+ previewType.value = 'xml'
+ previewModelVisible.value = true
+ })
+}
+const previewProcessJson = () => {
+ bpmnModeler.saveXML({ format: true }).then(({ xml }) => {
+ const rootNodes = new XmlNode(XmlNodeType.Root, parseXmlString(xml))
+ previewResult.value = rootNodes.parent?.toJSON() as unknown as string
+ previewType.value = 'json'
+ previewModelVisible.value = true
+ })
+}
+
+/* ------------------------------------------------ 鑺嬮亾婧愮爜 methods ------------------------------------------------------ */
+onMounted(() => {
+ initBpmnModeler()
+ createNewDiagram(props.value)
+})
+onBeforeUnmount(() => {
+ if (bpmnModeler) bpmnModeler.destroy()
+ emit('destroy', bpmnModeler)
+ bpmnModeler = null
+})
+</script>
--
Gitblit v1.8.0