| 提交 | 用户 | 时间 | ||
| 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' | |
| 9259c2 | 34 | import { getForm, FormVO } from '@/api/bpm/form' |
| 820397 | 35 | |
| H | 36 | defineOptions({ name: 'BpmModelEditor' }) |
| 37 | ||
| 38 | const router = useRouter() // 路由 | |
| 39 | const { query } = useRoute() // 路由的查询 | |
| 40 | const message = useMessage() // 国际化 | |
| 9259c2 | 41 | |
| H | 42 | // 表单信息 |
| 43 | const formFields = ref<string[]>([]) | |
| 44 | const formType = ref(20) | |
| 45 | provide('formFields', formFields) | |
| 46 | provide('formType', formType) | |
| 820397 | 47 | |
| H | 48 | const xmlString = ref(undefined) // BPMN XML |
| 49 | const modeler = ref(null) // BPMN Modeler | |
| 50 | const controlForm = ref({ | |
| 51 | simulation: true, | |
| 52 | labelEditing: false, | |
| 53 | labelVisible: false, | |
| 54 | prefix: 'flowable', | |
| 55 | headerButtonSize: 'mini', | |
| 56 | additionalModel: [CustomContentPadProvider, CustomPaletteProvider] | |
| 57 | }) | |
| 58 | const model = ref<ModelApi.ModelVO>() // 流程模型的信息 | |
| 59 | ||
| 60 | /** 初始化 modeler */ | |
| 61 | const initModeler = (item) => { | |
| 62 | setTimeout(() => { | |
| 63 | modeler.value = item | |
| 64 | }, 10) | |
| 65 | } | |
| 66 | ||
| 67 | /** 添加/修改模型 */ | |
| 3e359e | 68 | const save = async (bpmnXml: string) => { |
| 820397 | 69 | const data = { |
| H | 70 | ...model.value, |
| 71 | bpmnXml: bpmnXml // bpmnXml 只是初始化流程图，后续修改无法通过它获得 | |
| 72 | } as unknown as ModelApi.ModelVO | |
| 73 | // 提交 | |
| 74 | if (data.id) { | |
| 3e359e | 75 | await ModelApi.updateModelBpmn(data) |
| 820397 | 76 | message.success('修改成功') |
| H | 77 | } else { |
| 3e359e | 78 | await ModelApi.updateModelBpmn(data) |
| 820397 | 79 | message.success('新增成功') |
| H | 80 | } |
| 81 | // 跳转回去 | |
| 82 | close() | |
| 83 | } | |
| 84 | ||
| 85 | /** 关闭按钮 */ | |
| 86 | const close = () => { | |
| 87 | router.push({ path: '/bpm/manager/model' }) | |
| 88 | } | |
| 89 | ||
| 90 | /** 初始化 */ | |
| 91 | onMounted(async () => { | |
| 92 | const modelId = query.modelId as unknown as number | |
| 93 | if (!modelId) { | |
| 94 | message.error('缺少模型 modelId 编号') | |
| 95 | return | |
| 96 | } | |
| 97 | // 查询模型 | |
| 98 | const data = await ModelApi.getModel(modelId) | |
| 99 | if (!data.bpmnXml) { | |
| 100 | // 首次创建的 Model 模型，它是没有 bpmnXml，此时需要给它一个默认的 | |
| 101 | data.bpmnXml = ` <?xml version="1.0" encoding="UTF-8"?> | |
| 102 | <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"> | |
| 103 | <process id="${data.key}" name="${data.name}" isExecutable="true" /> | |
| 104 | <bpmndi:BPMNDiagram id="BPMNDiagram"> | |
| 105 | <bpmndi:BPMNPlane id="${data.key}_di" bpmnElement="${data.key}" /> | |
| 106 | </bpmndi:BPMNDiagram> | |
| 107 | </definitions>` | |
| 108 | } | |
| 9259c2 | 109 | |
| H | 110 | formType.value = data.formType |
| 111 | if (data.formType === 10) { | |
| 112 | const bpmnForm = (await getForm(data.formId)) as unknown as FormVO | |
| 113 | formFields.value = bpmnForm?.fields | |
| 114 | } | |
| 115 | ||
| 820397 | 116 | model.value = { |
| H | 117 | ...data, |
| 118 | bpmnXml: undefined // 清空 bpmnXml 属性 | |
| 119 | } | |
| 120 | xmlString.value = data.bpmnXml | |
| 121 | }) | |
| 122 | </script> | |
| 123 | <style lang="scss"> | |
| 124 | .process-panel__container { | |
| 125 | position: absolute; | |
| 126 | top: 90px; | |
| 127 | right: 60px; | |
| 128 | } | |
| 129 | </style> | |
