admin-sjzx/src/views/pqs/process/definition/editor/index.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)
            console.log('🚀 ~ onMounted ~ data.key:', data.key)
            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="${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 = {}
    }
    // 查询模型

    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>