feat: [BPM 工作流] Simple 模型图浏览模式

apps/web-antd/src/components/simple-process-design/components/simple-process-model.vue

@@ -249,7 +249,7 @@ onMounted(() => {
       />
     </div>
   </div>
-  <!-- TODO 这个好像暂时没有用到。保存失败弹窗 -->
+
   <Modal
     v-model:open="errorDialogVisible"
     title="保存失败"

apps/web-antd/src/components/simple-process-design/components/simple-process-viewer.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import type { SimpleFlowNode } from '../consts';
+
+import { provide, ref, watch } from 'vue';
+
+import { useWatchNode } from '../helpers';
+import SimpleProcessModel from './simple-process-model.vue';
+
+defineOptions({ name: 'SimpleProcessViewer' });
+
+const props = withDefaults(
+  defineProps<{
+    flowNode: SimpleFlowNode;
+    // 流程实例
+    processInstance?: any;
+    // 流程任务
+    tasks?: any[];
+  }>(),
+  {
+    processInstance: undefined,
+    tasks: () => [] as any[],
+  },
+);
+const approveTasks = ref<any[]>(props.tasks);
+const currentProcessInstance = ref(props.processInstance);
+const simpleModel = useWatchNode(props);
+watch(
+  () => props.tasks,
+  (newValue) => {
+    approveTasks.value = newValue;
+  },
+);
+watch(
+  () => props.processInstance,
+  (newValue) => {
+    currentProcessInstance.value = newValue;
+  },
+);
+// 提供给后代组件使用
+provide('tasks', approveTasks);
+provide('processInstance', currentProcessInstance);
+</script>
+<template>
+  <SimpleProcessModel :flow-node="simpleModel" :readonly="true" />
+</template>

apps/web-antd/src/components/simple-process-design/index.ts

@@ -4,4 +4,8 @@ export { default as HttpRequestSetting } from './components/nodes-config/modules
 
 export { default as SimpleProcessDesigner } from './components/simple-process-designer.vue';
 
+export { default as SimpleProcessViewer } from './components/simple-process-viewer.vue';
+
+export type { SimpleFlowNode } from './consts';
+
 export { parseFormFields } from './helpers';