127 lines
4.0 KiB
Vue
127 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 => {
|
|||
|
|
const data = {
|
|||
|
|
// name
|
|||
|
|
// flowableXml
|
|||
|
|
// category
|
|||
|
|
...model.value,
|
|||
|
|
flowableXml: bpmnXml, // bpmnXml 只是初始化流程图，后续修改无法通过它获得
|
|||
|
|
category: '',
|
|||
|
|
name: ''
|
|||
|
|
} as unknown as ModelApi.ModelVO
|
|||
|
|
// 提交
|
|||
|
|
if (data.id) {
|
|||
|
|
await ModelApi.updateModel(data)
|
|||
|
|
ElMessage.success('修改成功')
|
|||
|
|
} else {
|
|||
|
|
await ModelApi.createModel(data)
|
|||
|
|
ElMessage.success('新增成功')
|
|||
|
|
}
|
|||
|
|
// 跳转回去
|
|||
|
|
close()
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/** 关闭按钮 */
|
|||
|
|
const close = () => {}
|
|||
|
|
const randomStr = () => {
|
|||
|
|
return Math.random().toString(36).slice(-8)
|
|||
|
|
}
|
|||
|
|
/** 初始化 */
|
|||
|
|
onMounted(async () => {
|
|||
|
|
const data: any = {}
|
|||
|
|
if (prop.model?.deploymentId === undefined) {
|
|||
|
|
if (!data.bpmnXml) {
|
|||
|
|
// 首次创建的 Model 模型，它是没有 bpmnXml，此时需要给它一个默认的
|
|||
|
|
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="${data.key}" name="${data.name}" />
|
|||
|
|
<bpmndi:BPMNDiagram id="BPMNDiagram">
|
|||
|
|
<bpmndi:BPMNPlane id="${data.key}_di" bpmnElement="${data.key}" />
|
|||
|
|
</bpmndi:BPMNDiagram>
|
|||
|
|
</definitions>`
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
await ModelApi.readXml(prop.model?.deploymentId).then((res: any) => {
|
|||
|
|
data.bpmnXml = res.data
|
|||
|
|
})
|
|||
|
|
// const data: any = {}
|
|||
|
|
}
|
|||
|
|
// 查询模型
|
|||
|
|
|
|||
|
|
model.value = {
|
|||
|
|
...data,
|
|||
|
|
bpmnXml: undefined // 清空 bpmnXml 属性
|
|||
|
|
}
|
|||
|
|
xmlString.value = data.bpmnXml
|
|||
|
|
})
|
|||
|
|
</script>
|
|||
|
|
<style lang="scss">
|
|||
|
|
.process-panel__container {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 90px;
|
|||
|
|
right: 60px;
|
|||
|
|
}
|
|||
|
|
</style>
|