From 945eec5418ee9fa87a1cd01b3cdd1a6844a46287 Mon Sep 17 00:00:00 2001 From: LiuHao <liuhaoai545@gmail.com> Date: 星期一, 15 四月 2024 12:02:40 +0800 Subject: [PATCH] update 优化bpmn位置 --- src/components/BpmnDesign/index.vue | 521 +++++---------------------------------------------------- 1 files changed, 47 insertions(+), 474 deletions(-) diff --git a/src/components/BpmnDesign/index.vue b/src/components/BpmnDesign/index.vue index cd8f70c..1f84516 100644 --- a/src/components/BpmnDesign/index.vue +++ b/src/components/BpmnDesign/index.vue @@ -1,498 +1,71 @@ <template> - <div class="containers-bpmn"> - <!-- dark妯″紡涓� 杩炴帴绾跨殑绠ご鏍峰紡 --> - <svg width="0" height="0" style="position: absolute"> - <defs> - <marker id="markerArrow-dark-mode" viewBox="0 0 20 20" refX="11" refY="10" markerWidth="10" markerHeight="10" orient="auto"> - <path d="M 1 5 L 11 10 L 1 15 Z" class="arrow-dark" /> - </marker> - </defs> - </svg> - <div v-loading="loading" class="app-containers-bpmn"> - <el-container class="h-full"> - <el-container style="align-items: stretch"> - <el-header> - <div class="process-toolbar"> - <el-space wrap :size="10"> - <el-button size="small" type="primary" @click="saveXml">淇� 瀛�</el-button> - <el-dropdown size="small"> - <el-button size="small" type="primary"> 棰� 瑙� </el-button> - <template #dropdown> - <el-dropdown-menu> - <el-dropdown-item icon="Document" @click="previewXML">XML棰勮</el-dropdown-item> - <el-dropdown-item icon="View" @click="previewSVG"> SVG棰勮</el-dropdown-item> - </el-dropdown-menu> - </template> - </el-dropdown> - - <el-dropdown size="small"> - <el-button size="small" type="primary"> 涓� 杞� </el-button> - <template #dropdown> - <el-dropdown-menu> - <el-dropdown-item icon="Download" @click="downloadXML">涓嬭浇XML</el-dropdown-item> - <el-dropdown-item icon="Download" @click="downloadSVG"> 涓嬭浇SVG</el-dropdown-item> - </el-dropdown-menu> - </template> - </el-dropdown> - <el-tooltip effect="dark" content="鏂板缓" placement="bottom"> - <el-button size="small" icon="CirclePlus" @click="newDiagram" /> - </el-tooltip> - <el-tooltip effect="dark" content="鑷�傚簲灞忓箷" placement="bottom"> - <el-button size="small" icon="Rank" @click="fitViewport" /> - </el-tooltip> - <el-tooltip effect="dark" content="鏀惧ぇ" placement="bottom"> - <el-button size="small" icon="ZoomIn" @click="zoomViewport(true)" /> - </el-tooltip> - <el-tooltip effect="dark" content="缂╁皬" placement="bottom"> - <el-button size="small" icon="ZoomOut" @click="zoomViewport(false)" /> - </el-tooltip> - <el-tooltip effect="dark" content="鍚庨��" placement="bottom"> - <el-button size="small" icon="Back" @click="bpmnModeler.get('commandStack').undo()" /> - </el-tooltip> - <el-tooltip effect="dark" content="鍓嶈繘" placement="bottom"> - <el-button size="small" icon="Right" @click="bpmnModeler.get('commandStack').redo()" /> - </el-tooltip> - </el-space> - </div> - </el-header> - <div ref="canvas" class="canvas" /> - </el-container> - <div :class="{ 'process-panel': true, 'hide': panelFlag }"> - <div class="process-panel-bar" @click="panelBarClick"> - <div class="open-bar"> - <el-link type="default" :underline="false"> - <svg-icon class-name="open-bar" :icon-class="panelFlag ? 'caret-back' : 'caret-forward'"></svg-icon> - </el-link> - </div> - </div> - <transition enter-active-class="animate__animated animate__fadeIn"> - <div v-show="showPanel" v-if="bpmnModeler" class="panel-content"> - <PropertyPanel :modeler="bpmnModeler" /> - </div> - </transition> - </div> - </el-container> - </div> - </div> - <div> - <el-dialog v-model="perviewXMLShow" title="XML棰勮" width="80%" append-to-body> - <highlightjs :code="xmlStr" language="XML" /> - </el-dialog> - </div> - <div> - <el-dialog v-model="perviewSVGShow" title="SVG棰勮" width="80%" append-to-body> - <div style="text-align: center" v-html="svgData" /> + <div class="design"> + <el-dialog v-model="visible" width="100%" fullscreen :title="title"> + <div class="modeler"> + <bpmn-design ref="bpmnDesignRef" @save-call-back="saveCallBack"></bpmn-design> + </div> </el-dialog> </div> </template> -<script lang="ts" setup name="BpmnDesign"> -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 './assets/style/index.scss'; -import { Canvas, Modeler } from 'bpmn'; -import PropertyPanel from './panel/index.vue'; -import BpmnModeler from 'bpmn-js/lib/Modeler.js'; -import defaultXML from '@/components/BpmnDesign/assets/defaultXML'; -import flowableModdle from '@/components/BpmnDesign/assets/moddle/flowable'; -import Modules from './assets/module/index'; -import useModelerStore from '@/store/modules/modeler'; -import useDialog from '@/hooks/useDialog'; - -const emit = defineEmits(['closeCallBack', 'saveCallBack']); - -const { visible, title, openDialog, closeDialog } = useDialog({ - title: '缂栬緫娴佺▼' -}); -const modelerStore = useModelerStore(); +<script lang="ts" setup name="Design"> +import { getInfo, editModelXml } from '@/api/workflow/model'; const { proxy } = getCurrentInstance() as ComponentInternalInstance; -const panelFlag = ref(false); -const showPanel = ref(true); -const canvas = ref<HTMLDivElement>(); -const panel = ref<HTMLDivElement>(); -const bpmnModeler = ref<Modeler>(); -const zoom = ref(1); -const perviewXMLShow = ref(false); -const perviewSVGShow = ref(false); -const xmlStr = ref(''); -const svgData = ref(''); -const loading = ref(false); - -const panelBarClick = () => { - // 寤惰繜鎵ц锛屽惁鍒欎細瀵艰嚧闈㈡澘鏀惰捣鏃讹紝灞炴�ч潰鏉夸笉鏄剧ず - panelFlag.value = !panelFlag.value; - setTimeout(() => { - showPanel.value = !panelFlag.value; - }, 100); +import { ModelForm } from '@/api/workflow/model/types'; +import BpmnDesign from '@/bpmn/index.vue'; +import useDialog from '@/hooks/useDialog'; +const bpmnDesignRef = ref<InstanceType<typeof BpmnDesign>>(); +const modelForm = ref<ModelForm>(); +const emit = defineEmits(['closeCallBack']); +const { visible, title } = useDialog({ + title: '缂栬緫娴佺▼' +}); +const modelId = ref(''); +const open = async (id) => { + visible.value = true; + modelId.value = id; + const { data } = await getInfo(id); + modelForm.value = data; + bpmnDesignRef.value.initDiagram(modelForm.value.xml); }; - -/** - * 鍒濆鍖朇anvas - */ -const initCanvas = () => { - bpmnModeler.value = new BpmnModeler({ - container: canvas.value, - // 閿洏 - keyboard: { - bindTo: window // 鎴栬�厀indow锛屾敞鎰忎笌澶栭儴琛ㄥ崟鐨勯敭鐩樼洃鍚簨浠舵槸鍚﹀啿绐� - }, - propertiesPanel: { - parent: panel.value - }, - additionalModules: Modules, - moddleExtensions: { - flowable: flowableModdle +//淇濆瓨妯″瀷 +const saveCallBack = async (data) => { + await proxy?.$modal.confirm('鏄惁纭淇濆瓨锛�'); + data.loading.value = true; + modelForm.value.id = modelId.value; + modelForm.value.xml = data.xml; + modelForm.value.svg = data.svg; + modelForm.value.key = data.key; + modelForm.value.name = data.name; + editModelXml(modelForm.value).then((res) => { + if (res.code === 200) { + visible.value = false; + proxy?.$modal.msgSuccess('淇濆瓨鎴愬姛'); + emit('closeCallBack', data); } }); + data.loading.value = false; }; - -/** - * 鍒濆鍖朚odel - */ -const initModel = () => { - if (modelerStore.getModeler()) { - modelerStore.getModeler().destroy(); - modelerStore.setModeler(undefined); - } - modelerStore.setModeler(bpmnModeler.value); -}; - -/** - * 鏂板缓 - */ -const newDiagram = async () => { - await proxy?.$modal.confirm('鏄惁纭鏂板缓'); - initDiagram(); -}; - -/** - * 鍒濆鍖� - */ -const initDiagram = (xml?: string) => { - if (!xml) xml = defaultXML; - bpmnModeler.value.importXML(xml); -}; - -/** - * 鑷�傚簲灞忓箷 - */ -const fitViewport = () => { - zoom.value = bpmnModeler.value.get<Canvas>('canvas').zoom('fit-viewport'); - const bbox = document.querySelector<SVGGElement>('.app-containers-bpmn .viewport').getBBox(); - const currentViewBox = bpmnModeler.value.get<Canvas>('canvas').viewbox(); - const elementMid = { - x: bbox.x + bbox.width / 2 - 65, - y: bbox.y + bbox.height / 2 - }; - bpmnModeler.value.get<Canvas>('canvas').viewbox({ - x: elementMid.x - currentViewBox.width / 2, - y: elementMid.y - currentViewBox.height / 2, - width: currentViewBox.width, - height: currentViewBox.height - }); - zoom.value = (bbox.width / currentViewBox.width) * 1.8; -}; -/** - * 鏀惧ぇ鎴栬�呯缉灏� - * @param zoomIn true 鏀惧ぇ | false 缂╁皬 - */ -const zoomViewport = (zoomIn = true) => { - zoom.value = bpmnModeler.value.get<Canvas>('canvas').zoom(); - zoom.value += zoomIn ? 0.1 : -0.1; - bpmnModeler.value.get<Canvas>('canvas').zoom(zoom.value); -}; - -/** - * 涓嬭浇XML - */ -const downloadXML = async () => { - try { - const { xml } = await bpmnModeler.value.saveXML({ format: true }); - downloadFile(`${getProcessElement().name}.bpmn20.xml`, xml, 'application/xml'); - } catch (e) { - proxy?.$modal.msgError(e); - } -}; - -/** - * 涓嬭浇SVG - */ -const downloadSVG = async () => { - try { - const { svg } = await bpmnModeler.value.saveSVG(); - downloadFile(getProcessElement().name, svg, 'image/svg+xml'); - } catch (e) { - proxy?.$modal.msgError(e); - } -}; - -/** - * XML棰勮 - */ -const previewXML = async () => { - try { - const { xml } = await bpmnModeler.value.saveXML({ format: true }); - xmlStr.value = xml; - perviewXMLShow.value = true; - } catch (e) { - proxy?.$modal.msgError(e); - } -}; - -/** - * SVG棰勮 - */ -const previewSVG = async () => { - try { - const { svg } = await bpmnModeler.value.saveSVG(); - svgData.value = svg; - perviewSVGShow.value = true; - } catch (e) { - proxy?.$modal.msgError(e); - } -}; - -const curNodeInfo = reactive({ - curType: '', // 浠诲姟绫诲瀷 鐢ㄦ埛浠诲姟 - curNode: '', - expValue: '' //澶氱敤鎴峰拰閮ㄩ棬瑙掕壊瀹炵幇 -}); - -const downloadFile = (fileName: string, data: any, type: string) => { - const a = document.createElement('a'); - const url = window.URL.createObjectURL(new Blob([data], { type: type })); - a.href = url; - a.download = fileName; - a.click(); - window.URL.revokeObjectURL(url); -}; - -const getProcessElement = () => { - const rootElements = bpmnModeler.value?.getDefinitions().rootElements; - for (let i = 0; i < rootElements.length; i++) { - if (rootElements[i].$type === 'bpmn:Process') return rootElements[i]; - } -}; - -const getProcess = () => { - const element = getProcessElement(); - return { - id: element.id, - name: element.name - }; -}; - -const saveXml = async () => { - const { xml } = await bpmnModeler.value.saveXML({ format: true }); - const { svg } = await bpmnModeler.value.saveSVG(); - const process = getProcess(); - let data = { - xml: xml, - svg: svg, - key: process.id, - name: process.name, - loading: loading - }; - emit('saveCallBack', data); -}; - -const open = (xml?: string) => { - openDialog(); - nextTick(() => { - initDiagram(xml); - }); -}; -const close = () => { - closeDialog(); -}; - -onMounted(() => { - nextTick(() => { - initCanvas(); - initModel(); - }); -}); /** * 瀵瑰鏆撮湶瀛愮粍浠舵柟娉� */ defineExpose({ - initDiagram, - saveXml, - open, - close + open }); </script> -<style lang="scss"> -/** 澶滈棿妯″紡 绾挎潯鐨勯鑹� */ -$stroke-color-dark: white; -$bpmn-font-size: 12px; -/** 鏃ラ棿妯″紡 瀛椾綋棰滆壊 */ -$bpmn-font-color-dark: white; -/** 澶滈棿妯″紡 瀛椾綋棰滆壊 */ -$bpmn-font-color-light: #222; - -/* 鑳屾櫙缃戞牸 */ -@mixin djs-container { - background-image: linear-gradient(90deg, hsl(0deg 0% 78.4% / 15%) 10%, transparent 0), linear-gradient(hsl(0deg 0% 78.4% / 15%) 10%, transparent 0) !important; - background-size: 10px 10px !important; -} - -html[class='light'] { - /** 浠庡乏渚ф嫋鍔ㄦ椂鐨勮儗鏅浘 */ - svg.new-parent { - @include djs-container; +<style lang="scss" scoped> +.design { + :deep(.el-dialog .el-dialog__body) { + max-height: 100% !important; + min-height: calc(100vh - 80px); + padding: 10px 0 10px 0 !important; } - - /** 鍙屽嚮缂栬緫鍏冪礌鏃舵牱寮忎繚鎸佷竴鑷� */ - div.djs-direct-editing-parent { - border-radius: 10px; - background-color: transparent !important; - color: $bpmn-font-color-light; - } - - g.djs-visual { - .djs-label { - fill: $bpmn-font-color-light !important; - font-size: $bpmn-font-size !important; - } + :deep(.el-dialog__header) { + padding: 0 0 5px 0 !important; } } - -html[class='dark'] { - /** dark妯″紡涓� 杩炴帴绾跨殑绠ご鏍峰紡 */ - .arrow-dark { - stroke-width: 1px; - stroke-linecap: round; - stroke: $stroke-color-dark; - fill: $stroke-color-dark; - stroke-linejoin: round; - } - - /** 浠庡乏渚ф嫋鍔ㄦ椂鐨勮儗鏅浘 */ - svg.new-parent { - background-color: black !important; - @include djs-container; - } - - /** 鍙屽嚮缂栬緫鍏冪礌鏃舵牱寮忎繚鎸佷竴鑷� */ - div.djs-direct-editing-parent { - border-radius: 10px; - background-color: transparent !important; - color: $bpmn-font-color-dark; - } - - /** 鍏冪礌鐩稿叧璁剧疆 */ - g.djs-visual { - /** 鍏冪礌杈规 闇�瑕佸幓闄ゆ枃瀛�(.djs-label) */ - & > *:first-child:not(.djs-label) { - stroke: $stroke-color-dark !important; - } - - /** 瀛椾綋棰滆壊 */ - .djs-label { - fill: $bpmn-font-color-dark !important; - font-size: $bpmn-font-size !important; - } - - /* 杩炴帴绾挎牱寮� */ - path[data-corner-radius] { - stroke: $stroke-color-dark !important; - marker-end: url('#markerArrow-dark-mode') !important; - } - } -} - -.containers-bpmn { - height: 100%; - .app-containers-bpmn { - width: 100%; - height: 100%; - .canvas { - width: 100%; - height: 100%; - @include djs-container; - } - .el-header { - height: 35px; - padding: 0; - } - - .process-panel { - transition: width 0.25s ease-in; - .process-panel-bar { - width: 34px; - height: 40px; - .open-bar { - width: 34px; - line-height: 40px; - } - } - // 鏀惰捣闈㈡澘鏍峰紡 - &.hide { - width: 34px; - overflow: hidden; - padding: 0; - .process-panel-bar { - width: 34px; - height: 100%; - box-sizing: border-box; - display: block; - text-align: left; - line-height: 34px; - } - .process-panel-bar:hover { - background-color: #f5f7fa; - } - } - } - } -} -pre { - margin: 0; - height: 100%; - max-height: calc(80vh - 32px); - overflow-x: hidden; - overflow-y: auto; - .hljs { - word-break: break-word; - white-space: pre-wrap; - padding: 0.5em; - } -} - -.open-bar { - font-size: 20px; - cursor: pointer; - text-align: center; -} -.process-panel { - box-sizing: border-box; - padding: 0 8px 0 8px; - border-left: 1px solid #eeeeee; - box-shadow: #cccccc 0 0 8px; - max-height: 100%; - width: 25%; - height: calc(100vh - 80px); - .el-collapse { - height: calc(100vh - 162px); - overflow: auto; - } -} - -// 浠诲姟鏍� 閫忔槑搴� -//:deep(.djs-palette) { -// opacity: 0.3; -// transition: all 1s; -//} -// -//:deep(.djs-palette:hover) { -// opacity: 1; -// transition: all 1s; -//} </style> -- Gitblit v1.9.3