1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
| <script setup lang="ts">
| import { ref, watch } from 'vue';
|
| import { MyProcessViewer } from '#/views/bpm/components/bpmn-process-designer/package';
|
| defineOptions({ name: 'ProcessInstanceBpmnViewer' });
|
| const props = withDefaults(
| defineProps<{
| bpmnXml?: string;
| loading?: boolean; // 是否加载中
| modelView?: object;
| }>(),
| {
| loading: false,
| modelView: () => ({}),
| bpmnXml: '',
| },
| );
|
| // BPMN 流程图数据
| const view = ref({
| bpmnXml: '',
| });
|
| /** 监控 modelView 更新 */
| watch(
| () => props.modelView,
| async (newModelView) => {
| // 加载最新
| if (newModelView) {
| // @ts-expect-error: viewer instance type is broader than local ref typing
| view.value = newModelView;
| }
| },
| );
|
| /** 监听 bpmnXml */
| watch(
| () => props.bpmnXml,
| (value) => {
| view.value.bpmnXml = value;
| },
| );
| </script>
|
| <template>
| <div
| v-loading="loading"
| class="h-full w-full overflow-auto rounded-lg border border-gray-200 bg-white p-4"
| >
| <MyProcessViewer
| key="processViewer"
| :xml="view.bpmnXml"
| :view="view"
| class="h-full min-h-[500px] w-full"
| />
| </div>
| </template>
|
|
