| 提交 | 用户 | 时间 | ||
| 820397 | 1 | <template> |
| H | 2 | <ContentWrap> |
| 3 | <!-- 流程设计器，负责绘制流程等 --> | |
| 4 | <MyProcessDesigner | |
| 5 | key="designer" | |
| 6 | v-if="xmlString !== undefined" | |
| 7 | v-model="xmlString" | |
| 8 | :value="xmlString" | |
| 9 | v-bind="controlForm" | |
| 10 | keyboard | |
| 11 | ref="processDesigner" | |
| 12 | @init-finished="initModeler" | |
| 13 | :additionalModel="controlForm.additionalModel" | |
| 14 | @save="save" | |
| 15 | /> | |
| 16 | <!-- 流程属性器，负责编辑每个流程节点的属性 --> | |
| 17 | <MyProcessPenal | |
| 18 | key="penal" | |
| 19 | :bpmnModeler="modeler as any" | |
| 20 | :prefix="controlForm.prefix" | |
| 21 | class="process-panel" | |
| 22 | :model="model" | |
| 23 | /> | |
| 24 | </ContentWrap> | |
| 25 | </template> | |
| 26 | ||
| 27 | <script lang="ts" setup> | |
| 28 | import { MyProcessDesigner, MyProcessPenal } from '@/components/bpmnProcessDesigner/package' | |
| 29 | // 自定义元素选中时的弹出菜单（修改 默认任务 为 用户任务） | |
| 30 | import CustomContentPadProvider from '@/components/bpmnProcessDesigner/package/designer/plugins/content-pad' | |
| 31 | // 自定义左侧菜单（修改 默认任务 为 用户任务） | |
| 32 | import CustomPaletteProvider from '@/components/bpmnProcessDesigner/package/designer/plugins/palette' | |
| 33 | import * as ModelApi from '@/api/bpm/model' | |
| 34 | ||
| 35 | defineOptions({ name: 'BpmModelEditor' }) | |
| 36 | ||
| 37 | const router = useRouter() // 路由 | |
| 38 | const { query } = useRoute() // 路由的查询 | |
| 39 | const message = useMessage() // 国际化 | |
| 40 | ||
| 41 | const xmlString = ref(undefined) // BPMN XML | |
| 42 | const modeler = ref(null) // BPMN Modeler | |
| 43 | const controlForm = ref({ | |
| 44 | simulation: true, | |
| 45 | labelEditing: false, | |
| 46 | labelVisible: false, | |
| 47 | prefix: 'flowable', | |
| 48 | headerButtonSize: 'mini', | |
| 49 | additionalModel: [CustomContentPadProvider, CustomPaletteProvider] | |
| 50 | }) | |
| 51 | const model = ref<ModelApi.ModelVO>() // 流程模型的信息 | |
| 52 | ||
| 53 | /** 初始化 modeler */ | |
| 54 | const initModeler = (item) => { | |
| 55 | setTimeout(() => { | |
| 56 | modeler.value = item | |
| 57 | }, 10) | |
| 58 | } | |
| 59 | ||
| 60 | /** 添加/修改模型 */ | |
| 3e359e | 61 | const save = async (bpmnXml: string) => { |
| 820397 | 62 | const data = { |
| H | 63 | ...model.value, |
| 64 | bpmnXml: bpmnXml // bpmnXml 只是初始化流程图，后续修改无法通过它获得 | |
| 65 | } as unknown as ModelApi.ModelVO | |
| 66 | // 提交 | |
| 67 | if (data.id) { | |
| 3e359e | 68 | await ModelApi.updateModelBpmn(data) |
| 820397 | 69 | message.success('修改成功') |
| H | 70 | } else { |
| 3e359e | 71 | await ModelApi.updateModelBpmn(data) |
| 820397 | 72 | message.success('新增成功') |
| H | 73 | } |
| 74 | // 跳转回去 | |
| 75 | close() | |
| 76 | } | |
| 77 | ||
| 78 | /** 关闭按钮 */ | |
| 79 | const close = () => { | |
| 80 | router.push({ path: '/bpm/manager/model' }) | |
| 81 | } | |
| 82 | ||
| 83 | /** 初始化 */ | |
| 84 | onMounted(async () => { | |
| 85 | const modelId = query.modelId as unknown as number | |
| 86 | if (!modelId) { | |
| 87 | message.error('缺少模型 modelId 编号') | |
| 88 | return | |
| 89 | } | |
| 90 | // 查询模型 | |
| 91 | const data = await ModelApi.getModel(modelId) | |
| 92 | if (!data.bpmnXml) { | |
| 93 | // 首次创建的 Model 模型，它是没有 bpmnXml，此时需要给它一个默认的 | |
| 94 | data.bpmnXml = ` <?xml version="1.0" encoding="UTF-8"?> | |
| 95 | <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"> | |
| 96 | <process id="${data.key}" name="${data.name}" isExecutable="true" /> | |
| 97 | <bpmndi:BPMNDiagram id="BPMNDiagram"> | |
| 98 | <bpmndi:BPMNPlane id="${data.key}_di" bpmnElement="${data.key}" /> | |
| 99 | </bpmndi:BPMNDiagram> | |
| 100 | </definitions>` | |
| 101 | } | |
| 102 | model.value = { | |
| 103 | ...data, | |
| 104 | bpmnXml: undefined // 清空 bpmnXml 属性 | |
| 105 | } | |
| 106 | xmlString.value = data.bpmnXml | |
| 107 | }) | |
| 108 | </script> | |
| 109 | <style lang="scss"> | |
| 110 | .process-panel__container { | |
| 111 | position: absolute; | |
| 112 | top: 90px; | |
| 113 | right: 60px; | |
| 114 | } | |
| 115 | </style> | |
