124 lines
4.0 KiB
Vue
124 lines
4.0 KiB
Vue
<template>
|
||
<div>
|
||
<!-- 流程设计器，负责绘制流程等 -->
|
||
<MyProcessDesigner
|
||
key="designer"
|
||
v-if="xmlString !== undefined"
|
||
v-model="xmlString"
|
||
:value="xmlString"
|
||
v-bind="controlForm"
|
||
keyboard
|
||
ref="processDesigner"
|
||
@init-finished="initModeler"
|
||
:additionalModel="controlForm.additionalModel"
|
||
@quit="emit('quit')"
|
||
@save="save"
|
||
/>
|
||
<!-- 流程属性器，负责编辑每个流程节点的属性 -->
|
||
<MyProcessPenal
|
||
key="penal"
|
||
:bpmnModeler="modeler as any"
|
||
:prefix="controlForm.prefix"
|
||
class="process-panel"
|
||
:model="model"
|
||
/>
|
||
</div>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import * as ModelApi from '@/api/process-boot/bpm'
|
||
import { onMounted, provide, ref } from 'vue'
|
||
import { ElMessage } from 'element-plus'
|
||
import { MyProcessDesigner, MyProcessPenal } from '@/components/bpmnProcessDesigner/package'
|
||
// 自定义元素选中时的弹出菜单（修改 默认任务 为 用户任务）
|
||
import CustomContentPadProvider from '@/components/bpmnProcessDesigner/package/designer/plugins/content-pad'
|
||
// 自定义左侧菜单（修改 默认任务 为 用户任务）
|
||
import CustomPaletteProvider from '@/components/bpmnProcessDesigner/package/designer/plugins/palette'
|
||
|
||
defineOptions({ name: 'BpmModelEditor' })
|
||
|
||
const prop = defineProps({
|
||
model: { type: Object, default: undefined }
|
||
})
|
||
const xmlString = ref(undefined) // BPMN XML
|
||
const modeler = ref(null) // BPMN Modeler
|
||
const emit = defineEmits(['quit'])
|
||
const controlForm = ref({
|
||
simulation: true,
|
||
labelEditing: false,
|
||
labelVisible: false,
|
||
prefix: 'flowable',
|
||
headerButtonSize: 'mini',
|
||
additionalModel: [CustomContentPadProvider, CustomPaletteProvider]
|
||
})
|
||
const model = ref<ModelApi.ModelVO>() // 流程模型的信息
|
||
|
||
/** 初始化 modeler */
|
||
const initModeler = item => {
|
||
setTimeout(() => {
|
||
modeler.value = item
|
||
}, 10)
|
||
}
|
||
|
||
/** 添加/修改模型 */
|
||
const save = async (bpmnXml: any, form: any) => {
|
||
const data = {
|
||
// name
|
||
// flowableXml
|
||
// category
|
||
...model.value,
|
||
flowableXml: bpmnXml, // bpmnXml 只是初始化流程图，后续修改无法通过它获得
|
||
category: form.category,
|
||
name: form.name
|
||
} as unknown as ModelApi.ModelVO
|
||
// 提交
|
||
if (data.id) {
|
||
ElMessage.success('修改成功')
|
||
} else {
|
||
await ModelApi.save(data)
|
||
ElMessage.success('新增成功')
|
||
}
|
||
// 跳转回去
|
||
emit('quit')
|
||
}
|
||
|
||
/** 初始化 */
|
||
onMounted(async () => {
|
||
const data: any = {}
|
||
if (prop.model?.deploymentId === undefined) {
|
||
if (!data.bpmnXml) {
|
||
// 首次创建的 Model 模型，它是没有 bpmnXml，此时需要给它一个默认的
|
||
data.key = Math.random().toString(36).slice(-8)
|
||
data.bpmnXml = ` <?xml version="1.0" encoding="UTF-8"?>
|
||
<definitions xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:xsd="http://www.w3.org/2001/XMLSchema" targetNamespace="http://www.activiti.org/processdef">
|
||
<process id="flow_${data.key}" name="${data.name || ''}" />
|
||
<bpmndi:BPMNDiagram id="BPMNDiagram">
|
||
<bpmndi:BPMNPlane id="flow_${data.key}_di" bpmnElement="flow_${data.key}" />
|
||
</bpmndi:BPMNDiagram>
|
||
</definitions>`
|
||
}
|
||
} else {
|
||
await ModelApi.readXml(prop.model?.deploymentId).then((res: any) => {
|
||
data.bpmnXml = res.data
|
||
})
|
||
// const data: any = {}
|
||
}
|
||
// 查询模型
|
||
|
||
setTimeout(() => {
|
||
model.value = {
|
||
...data,
|
||
bpmnXml: undefined // 清空 bpmnXml 属性
|
||
}
|
||
xmlString.value = data.bpmnXml
|
||
}, 0)
|
||
})
|
||
</script>
|
||
<style lang="scss">
|
||
.process-panel__container {
|
||
position: absolute;
|
||
top: 90px;
|
||
right: 60px;
|
||
}
|
||
</style>
|