dengzedong
2024-12-17 f9b459a3fefd5fab0ee8e19268adb9d9eadab2a7
提交 | 用户 | 时间
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>