398 lines
11 KiB
Vue
Raw Normal View History

2024-01-19 18:26:18 +08:00
<template>
2024-01-25 01:53:53 +08:00
<div class="containers">
2024-02-04 11:32:36 +08:00
<div class="app-containers">
<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>
2024-01-25 14:43:20 +08:00
2024-02-04 11:32:36 +08:00
<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>
2024-01-25 14:43:20 +08:00
</div>
2024-02-04 11:32:36 +08:00
</el-header>
<div ref="canvas" class="canvas" />
2024-01-19 18:26:18 +08:00
</el-container>
2024-02-04 11:32:36 +08:00
<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>
2024-01-25 01:53:53 +08:00
</div>
2024-02-03 23:31:22 +08:00
<div class="preview-XML">
<el-dialog v-model="perviewXMLShow" title="XML预览" width="80%">
<highlightjs :code="xmlStr" language="XML" />
</el-dialog>
</div>
<div>
<el-dialog v-model="perviewSVGShow" title="SVG预览" width="80%">
<div style="text-align: center" v-html="svgData" />
</el-dialog>
</div>
2024-01-19 18:26:18 +08:00
</template>
<script lang="ts" setup name="BpmnDesign">
2024-01-23 02:46:58 +08:00
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';
2024-02-03 23:09:22 +08:00
import { Canvas, Modeler } from 'bpmn';
2024-01-19 18:26:18 +08:00
import PropertyPanel from './PropertyPanel.vue';
2024-01-20 22:09:15 +08:00
import BpmnModeler from 'bpmn-js/lib/Modeler.js';
2024-02-03 23:09:22 +08:00
import defaultXML from '@/components/BpmnDesign/assets/defaultXML';
2024-01-19 18:26:18 +08:00
import flowableModdle from '@/components/BpmnDesign/assets/moddle/flowable';
import Modules from './assets/module/index';
import useModelerStore from '@/store/modules/modeler';
2024-02-03 23:09:22 +08:00
import useDialog from '@/hooks/useDialog';
2024-01-25 01:53:53 +08:00
2024-02-03 23:31:22 +08:00
const emit = defineEmits(['closeCallBack', 'saveCallBack']);
2024-01-19 18:26:18 +08:00
2024-02-03 23:09:22 +08:00
const { visible, title, openDialog, closeDialog } = useDialog({
2024-01-25 01:53:53 +08:00
title: '编辑流程'
2024-01-19 18:26:18 +08:00
});
2024-02-03 23:09:22 +08:00
const modelerStore = useModelerStore();
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
2024-01-19 18:26:18 +08:00
2024-01-25 14:43:20 +08:00
const panelFlag = ref(false);
const showPanel = ref(true);
2024-01-19 18:26:18 +08:00
const canvas = ref<HTMLDivElement>();
const panel = ref<HTMLDivElement>();
2024-01-22 00:14:24 +08:00
const bpmnModeler = ref<Modeler>();
2024-01-19 18:26:18 +08:00
const zoom = ref(1);
const perviewXMLShow = ref(false);
const perviewSVGShow = ref(false);
const xmlStr = ref('');
const svgData = ref('');
const panelBarClick = () => {
// 延迟执行,否则会导致面板收起时,属性面板不显示
panelFlag.value = !panelFlag.value;
setTimeout(() => {
showPanel.value = !panelFlag.value;
}, 100);
};
2024-01-19 18:26:18 +08:00
/**
* 初始化Canvas
*/
const initCanvas = () => {
bpmnModeler.value = new BpmnModeler({
container: canvas.value,
// 键盘
keyboard: {
bindTo: window // 或者window注意与外部表单的键盘监听事件是否冲突
2024-01-19 18:26:18 +08:00
},
propertiesPanel: {
parent: panel.value
},
additionalModules: Modules,
moddleExtensions: {
flowable: flowableModdle
}
});
};
/**
* 初始化Model
*/
const initModel = () => {
2024-01-22 14:50:58 +08:00
if (modelerStore.getModeler()) {
modelerStore.getModeler().destroy();
modelerStore.setModeler(undefined);
2024-01-19 18:26:18 +08:00
}
2024-01-22 14:50:58 +08:00
modelerStore.setModeler(bpmnModeler.value);
2024-01-19 18:26:18 +08:00
};
/**
* 新建
*/
2024-01-22 00:14:24 +08:00
const newDiagram = async () => {
await proxy?.$modal.confirm('是否确认新建');
2024-02-03 23:09:22 +08:00
initDiagram();
2024-01-22 00:14:24 +08:00
};
2024-02-03 23:09:22 +08:00
2024-01-22 00:14:24 +08:00
/**
* 初始化
*/
2024-02-03 23:09:22 +08:00
const initDiagram = (xml?: string) => {
if (!xml) xml = defaultXML;
bpmnModeler.value.importXML(xml);
2024-01-19 18:26:18 +08:00
};
/**
* 自适应屏幕
*/
const fitViewport = () => {
2024-01-22 00:14:24 +08:00
zoom.value = bpmnModeler.value.get<Canvas>('canvas').zoom('fit-viewport');
2024-01-19 18:26:18 +08:00
const bbox = (document.querySelector('.app-containers .viewport') as SVGGElement).getBBox();
const currentViewBox = bpmnModeler.value.get('canvas').viewbox();
const elementMid = {
x: bbox.x + bbox.width / 2 - 65,
y: bbox.y + bbox.height / 2
};
bpmnModeler.value.get('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').zoom();
zoom.value += zoomIn ? 0.1 : -0.1;
bpmnModeler.value.get('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 {
2024-01-22 00:14:24 +08:00
const { svg } = await bpmnModeler.value.saveSVG();
2024-01-19 18:26:18 +08:00
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 {
2024-01-22 00:14:24 +08:00
const { svg } = await bpmnModeler.value.saveSVG();
2024-01-19 18:26:18 +08:00
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];
}
};
2024-02-03 14:09:45 +08:00
const getProcess = () => {
2024-02-03 23:09:22 +08:00
const element = getProcessElement();
2024-02-03 14:09:45 +08:00
return {
id: element.id,
name: element.name
2024-02-03 23:09:22 +08:00
};
2024-02-03 14:09:45 +08:00
};
const saveXml = async () => {
const { xml } = await bpmnModeler.value.saveXML({ format: true });
const { svg } = await bpmnModeler.value.saveSVG();
2024-02-03 23:09:22 +08:00
const process = getProcess();
console.log(xml);
console.log(svg);
console.log(process);
2024-02-03 23:31:22 +08:00
emit('saveCallBack');
2024-02-03 23:09:22 +08:00
};
const open = (xml?: string) => {
openDialog();
nextTick(() => {
initDiagram(xml);
});
};
const close = () => {
closeDialog();
2024-02-03 14:09:45 +08:00
};
2024-02-04 11:32:36 +08:00
onMounted(() => {
nextTick(() => {
initCanvas();
initModel();
});
});
2024-02-03 14:09:45 +08:00
/**
* 对外暴露子组件方法
*/
2024-02-03 23:09:22 +08:00
defineExpose({
2024-02-03 14:09:45 +08:00
initDiagram,
2024-02-03 23:09:22 +08:00
saveXml,
open,
close
2024-02-03 14:09:45 +08:00
});
2024-01-19 18:26:18 +08:00
</script>
2024-01-23 02:46:58 +08:00
<style lang="scss" scoped>
2024-01-25 01:53:53 +08:00
.containers {
2024-02-04 11:32:36 +08:00
height: 100%;
2024-01-25 01:53:53 +08:00
.app-containers {
2024-01-19 18:26:18 +08:00
width: 100%;
height: 100%;
2024-01-25 01:53:53 +08:00
.canvas {
width: 100%;
height: 100%;
background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHBhdHRlcm4gaWQ9ImEiIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHBhdGggZD0iTTAgMTBoNDBNMTAgMHY0ME0wIDIwaDQwTTIwIDB2NDBNMCAzMGg0ME0zMCAwdjQwIiBmaWxsPSJub25lIiBzdHJva2U9IiNlMGUwZTAiIG9wYWNpdHk9Ii4yIi8+PHBhdGggZD0iTTQwIDBIMHY0MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZTBlMGUwIi8+PC9wYXR0ZXJuPjwvZGVmcz48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2EpIi8+PC9zdmc+');
}
.el-header {
2024-01-25 14:43:20 +08:00
height: 35px;
padding: 0;
2024-01-25 01:53:53 +08:00
}
2024-01-25 14:43:20 +08:00
.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;
}
}
2024-01-25 01:53:53 +08:00
}
}
2024-02-03 23:31:22 +08:00
}
.preview-XML {
pre {
margin: 0;
height: 100%;
max-height: calc(80vh - 32px);
overflow-x: hidden;
overflow-y: auto;
:deep(.hljs) {
word-break: break-word;
white-space: pre-wrap;
padding: 0.5em;
2024-01-25 14:43:20 +08:00
}
}
}
2024-02-03 23:31:22 +08:00
2024-01-25 14:43:20 +08:00
.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: 480px;
2024-02-04 11:32:36 +08:00
height: calc(100vh - 80px);
2024-01-25 14:43:20 +08:00
:deep(.el-collapse) {
height: calc(100vh - 162px);
overflow: auto;
2024-01-19 18:26:18 +08:00
}
}
2024-01-19 18:26:18 +08:00
</style>