【功能修改】发起流程时，如果是 Simple 模型展示 Simple 流程图

Author: cooling-jason

src/views/bpm/processInstance/create/ProcessDefinitionDetail.vue

@@ -71,8 +71,17 @@
           <!-- 流程图 -->
           <el-tab-pane label="流程图" name="diagram">
             <div class="form-scroll-area">
-              <!-- 流程图预览 -->
-              <ProcessInstanceBpmnViewer :bpmn-xml="bpmnXML" />
+              <!-- BPMN 流程图预览 -->
+              <ProcessInstanceBpmnViewer 
+                :bpmn-xml="bpmnXML" 
+                v-if="BpmModelType.BPMN === selectProcessDefinition.modelType" 
+              />
+
+              <!-- Simple 流程图预览 -->
+              <ProcessInstanceSimpleViewer 
+                :simple-json="simpleJson" 
+                v-if="BpmModelType.SIMPLE === selectProcessDefinition.modelType" 
+              />
             </div>
           </el-tab-pane>
         </el-tabs>
@@ -98,7 +107,9 @@
 </template>
 <script lang="ts" setup>
 import { decodeFields, setConfAndFields2 } from '@/utils/formCreate'
+import { BpmModelType } from '@/utils/constants'
 import ProcessInstanceBpmnViewer from '../detail/ProcessInstanceBpmnViewer.vue'
+import ProcessInstanceSimpleViewer from '../detail/ProcessInstanceSimpleViewer.vue'
 import ProcessInstanceTimeline from '../detail/ProcessInstanceTimeline.vue'
 import type { ApiAttrs } from '@form-create/element-ui/types/config'
 import { useTagsViewStore } from '@/store/modules/tagsView'
@@ -127,6 +138,7 @@ const startUserSelectAssignees = ref({}) // 发起人选择审批人的数据
 const startUserSelectAssigneesFormRules = ref({}) // 发起人选择审批人的表单 Rules
 const userList = ref<any[]>([]) // 用户列表
 const bpmnXML: any = ref(null) // BPMN 数据
+const simpleJson = ref<string|undefined>() // Simple 设计器数据 json 格式
 /** 当前的Tab */
 const activeTab = ref('form')
 const emit = defineEmits(['cancel'])
@@ -162,6 +174,7 @@ const initProcessInfo = async (row: any, formVariables?: any) => {
     const processDefinitionDetail = await DefinitionApi.getProcessDefinition(row.id)
     if (processDefinitionDetail) {
       bpmnXML.value = processDefinitionDetail.bpmnXml
+      simpleJson.value = processDefinitionDetail.simpleModel
       startUserSelectTasks.value = processDefinitionDetail.startUserSelectTasks
 
       // 设置指定审批人

src/views/bpm/processInstance/detail/ProcessInstanceSimpleViewer.vue

@@ -1,6 +1,10 @@
 <template>
   <div v-loading="loading" class="mb-20px">
-      <SimpleProcessViewer :flow-node="simpleModel" :tasks="tasks" :process-instance="processInstance"/>
+    <SimpleProcessViewer
+      :flow-node="simpleModel"
+      :tasks="tasks"
+      :process-instance="processInstance"
+    />
   </div>
 </template>
 <script lang="ts" setup>
@@ -12,72 +16,51 @@ defineOptions({ name: 'BpmProcessInstanceSimpleViewer' })
 
 const props = defineProps({
   loading: propTypes.bool.def(false), // 是否加载中
-  modelView: propTypes.object
+  modelView: propTypes.object,
+  simpleJson: propTypes.string // Simple 模型结构数据 (json 格式)
 })
 const simpleModel = ref()
 // 用户任务
 const tasks = ref([])
 // 流程实例
 const processInstance = ref()
-// /** 只有 loading 完成时，才去加载流程列表 */
-// watch(
-//   () => props.loading,
-//   async (value) => {
-//     if (value && props.id) {
-//       const modelView = await ProcessInstanceApi.getProcessInstanceBpmnModelView(props.id)
-//       if (modelView) {
-//         tasks.value = modelView.tasks
-//         processInstance.value = modelView.processInstance
-//         // 已经拒绝的活动节点编号集合，只包括 UserTask
-//         const rejectedTaskActivityIds: string[] = modelView.rejectedTaskActivityIds
-//         // 进行中的活动节点编号集合， 只包括 UserTask
-//         const unfinishedTaskActivityIds: string[] = modelView.unfinishedTaskActivityIds
-//         // 已经完成的活动节点编号集合， 包括 UserTask、Gateway 等
-//         const finishedActivityIds: string[] = modelView.finishedTaskActivityIds
-//         // 已经完成的连线节点编号集合，只包括 SequenceFlow
-//         const finishedSequenceFlowActivityIds: string[] = modelView.finishedSequenceFlowActivityIds
-//         setSimpleModelNodeTaskStatus(
-//           modelView.simpleModel,
-//           modelView.processInstance.status,
-//           rejectedTaskActivityIds,
-//           unfinishedTaskActivityIds,
-//           finishedActivityIds,
-//           finishedSequenceFlowActivityIds
-//         )
-//         simpleModel.value = modelView.simpleModel
-//       }
-//     }
-//   }
-// )
+
+/** 监控模型视图 包括任务列表、进行中的活动节点编号等 */
 watch(
   () => props.modelView,
   async (newModelView) => {
     if (newModelView) {
-      if (newModelView) {
-        tasks.value = newModelView.tasks
-        processInstance.value = newModelView.processInstance
-        // 已经拒绝的活动节点编号集合，只包括 UserTask
-        const rejectedTaskActivityIds: string[] = newModelView.rejectedTaskActivityIds
-        // 进行中的活动节点编号集合， 只包括 UserTask
-        const unfinishedTaskActivityIds: string[] = newModelView.unfinishedTaskActivityIds
-        // 已经完成的活动节点编号集合， 包括 UserTask、Gateway 等
-        const finishedActivityIds: string[] = newModelView.finishedTaskActivityIds
-        // 已经完成的连线节点编号集合，只包括 SequenceFlow
-        const finishedSequenceFlowActivityIds: string[] = newModelView.finishedSequenceFlowActivityIds
-        setSimpleModelNodeTaskStatus(
-          newModelView.simpleModel,
-          newModelView.processInstance.status,
-          rejectedTaskActivityIds,
-          unfinishedTaskActivityIds,
-          finishedActivityIds,
-          finishedSequenceFlowActivityIds
-        )
-        simpleModel.value = newModelView.simpleModel
-      }
+      tasks.value = newModelView.tasks
+      processInstance.value = newModelView.processInstance
+      // 已经拒绝的活动节点编号集合，只包括 UserTask
+      const rejectedTaskActivityIds: string[] = newModelView.rejectedTaskActivityIds
+      // 进行中的活动节点编号集合， 只包括 UserTask
+      const unfinishedTaskActivityIds: string[] = newModelView.unfinishedTaskActivityIds
+      // 已经完成的活动节点编号集合， 包括 UserTask、Gateway 等
+      const finishedActivityIds: string[] = newModelView.finishedTaskActivityIds
+      // 已经完成的连线节点编号集合，只包括 SequenceFlow
+      const finishedSequenceFlowActivityIds: string[] = newModelView.finishedSequenceFlowActivityIds
+      setSimpleModelNodeTaskStatus(
+        newModelView.simpleModel,
+        newModelView.processInstance.status,
+        rejectedTaskActivityIds,
+        unfinishedTaskActivityIds,
+        finishedActivityIds,
+        finishedSequenceFlowActivityIds
+      )
+      simpleModel.value = newModelView.simpleModel
+    }
+  }
+)
+/** 监控模型结构数据 */
+watch(
+  () => props.simpleJson,
+  async (value) => {
+    if (value) {
+      simpleModel.value = JSON.parse(value)
     }
   }
 )
-
 const setSimpleModelNodeTaskStatus = (
   simpleModel: SimpleFlowNode | undefined,
   processStatus: number,