feat: 发起流程页面-流程时间线的数据获取接口联调与展示

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

@@ -61,9 +61,14 @@
                     </form-create>
                   </el-col>
 
-                  <el-col :span="7">
-                    <!-- 审批记录时间线 -->
-                    <!-- <ProcessInstanceTimeline ref="timelineRef" :approve-nodes="approveNodes" /> -->
+                  <el-col :span="6" :offset="1">
+                    <!-- 流程时间线 -->
+                    <ProcessInstanceTimeline
+                      ref="timelineRef"
+                      :approve-nodes="approveNodes"
+                      :show-status-icon="false"
+                      candidateField="candidateUserList"
+                    />
                   </el-col>
                 </el-row>
               </el-scrollbar>
@@ -82,6 +87,7 @@
         <div class="b-t-solid border-t-1px border-[var(--el-border-color)]">
           <!-- 操作栏按钮 -->
           <div
+            v-if="activeTab === 'form'"
             class="h-50px bottom-10 text-14px flex items-center color-#32373c dark:color-#fff font-bold btn-container"
           >
             <el-button plain type="success" @click="submitForm">
@@ -99,6 +105,7 @@
 <script lang="ts" setup>
 import { setConfAndFields2 } from '@/utils/formCreate'
 import ProcessInstanceBpmnViewer from '../detail/ProcessInstanceBpmnViewer.vue'
+import ProcessInstanceTimeline from '../detail/ProcessInstanceTimeline.vue'
 import type { ApiAttrs } from '@form-create/element-ui/types/config'
 import { useTagsViewStore } from '@/store/modules/tagsView'
 import * as ProcessInstanceApi from '@/api/bpm/processInstance'
@@ -126,11 +133,13 @@ const startUserSelectAssignees = ref({}) // 发起人选择审批人的数据
 const startUserSelectAssigneesFormRules = ref({}) // 发起人选择审批人的表单 Rules
 const userList = ref<any[]>([]) // 用户列表
 const bpmnXML: any = ref(null) // BPMN 数据
-
 /** 当前的Tab */
 const activeTab = ref('form')
 const emit = defineEmits(['cancel'])
-/** 处理选择流程的按钮操作 **/
+// 审批节点信息
+const approveNodes = ref<ProcessInstanceApi.ApprovalNodeInfo[]>([])
+
+/** 设置表单信息、获取流程图数据 **/
 const initProcessInfo = async (row, formVariables?) => {
   // 重置指定审批人
   startUserSelectTasks.value = []
@@ -141,6 +150,11 @@ const initProcessInfo = async (row, formVariables?) => {
   if (row.formType == 10) {
     // 设置表单
     setConfAndFields2(detailForm, row.formConf, row.formFields, formVariables)
+    await nextTick()
+    fApi.value?.btn.show(false) // 隐藏提交按钮
+    // 获取流程审批信息
+    getApprovalDetail(row)
+
     // 加载流程图
     const processDefinitionDetail = await DefinitionApi.getProcessDefinition(row.id)
     if (processDefinitionDetail) {
@@ -174,6 +188,23 @@ const initProcessInfo = async (row, formVariables?) => {
     // 这里暂时无需加载流程图，因为跳出到另外个 Tab；
   }
 }
+
+/** 获取审批详情 */
+const getApprovalDetail = async (row) => {
+  try {
+    const param = {
+      processDefinitionId: row.id
+    }
+    const data = await ProcessInstanceApi.getApprovalDetail(param)
+    if (!data) {
+      message.error('查询不到审批详情信息！')
+      return
+    }
+    // 获取审批节点，显示 Timeline 的数据
+    approveNodes.value = data.approveNodes
+  } finally {
+  }
+}
 /** 提交按钮 */
 const submitForm = async (formData) => {
   if (!fApi.value || props.selectProcessDefinition) {

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

@@ -56,7 +56,6 @@ import * as DefinitionApi from '@/api/bpm/definition'
 import * as ProcessInstanceApi from '@/api/bpm/processInstance'
 import { CategoryApi } from '@/api/bpm/category'
 import ProcessDefinitionDetail from './ProcessDefinitionDetail.vue'
-import { categoryList as cl, processDefinitionList as pl } from './mock'
 
 defineOptions({ name: 'BpmProcessInstanceCreate' })
 
@@ -74,8 +73,6 @@ const getList = async () => {
   try {
     // 流程分类
     categoryList.value = await CategoryApi.getCategorySimpleList()
-    // 测试数据
-    categoryList.value = cl
     if (categoryList.value.length > 0) {
       categoryActive.value = categoryList.value[0]
     }
@@ -83,8 +80,6 @@ const getList = async () => {
     processDefinitionList.value = await DefinitionApi.getProcessDefinitionList({
       suspensionState: 1
     })
-    // 测试数据
-    processDefinitionList.value = pl as any
 
     // 如果 processInstanceId 非空，说明是重新发起
     if (processInstanceId?.length > 0) {

src/views/bpm/processInstance/create/mock.js

@@ -1,117 +0,0 @@
-// 模拟流程分类数据
-export const categoryList = [
-  { name: '审批流程', code: 'approval' },
-  { name: '管理流程', code: 'management' }
-]
-
-// 模拟流程定义数据
-export const processDefinitionList = [
-  {
-    id: '1',
-    key: 'process_1',
-    name: '请假申请',
-    category: 'approval',
-    icon: 'https://picsum.photos/200?r=1',
-    formType: 10,
-    formConf:
-      '{"form":{"inline":false,"hideRequiredAsterisk":false,"labelPosition":"right","size":"default","labelWidth":"100px"},"resetBtn":{"show":false,"innerText":"重置"},"submitBtn":{"show":true,"innerText":"提交"}}',
-    formFields: [
-      '{"type":"input","field":"F1yrm2sosxgeabc","title":"请假原因","info":"","$required":false,"props":{"type":"text","placeholder":"请输入123"},"_fc_id":"id_Fhrbm2sosxgeacc","name":"ref_Festm2sosxgeadc","display":true,"hidden":false,"_fc_drag_tag":"input"}',
-      '{"type":"radio","field":"F9r3m2sp1b34aec","title":"请假类型","info":"","$required":false,"props":{"_optionType":2},"_fc_id":"id_F4nwm2sp1b34afc","name":"ref_Fkodm2sp1b34agc","display":true,"hidden":false,"_fc_drag_tag":"radio","options":[{"label":"事假","value":"1"},{"label":"婚假","value":"2"},{"label":"丧假","value":"3"}]}'
-    ],
-    startUserSelectTasks: [
-      { id: 'task1', name: '部门经理' },
-      { id: 'task2', name: '人力资源' }
-    ]
-  },
-  {
-    id: '2',
-    key: 'process_2',
-    name: '报销申请',
-    category: 'approval',
-    icon: 'https://picsum.photos/200?r=2',
-    formType: 10,
-    formConf:
-      '{"form":{"inline":false,"hideRequiredAsterisk":false,"labelPosition":"right","size":"default","labelWidth":"100px"},"resetBtn":{"show":false,"innerText":"重置"},"submitBtn":{"show":true,"innerText":"提交"}}',
-    formFields: [
-      '{"type":"input","field":"F1yrm2sosxgeabc","title":"请假原因","info":"","$required":false,"props":{"type":"text","placeholder":"请输入123"},"_fc_id":"id_Fhrbm2sosxgeacc","name":"ref_Festm2sosxgeadc","display":true,"hidden":false,"_fc_drag_tag":"input"}',
-      '{"type":"radio","field":"F9r3m2sp1b34aec","title":"请假类型","info":"","$required":false,"props":{"_optionType":2},"_fc_id":"id_F4nwm2sp1b34afc","name":"ref_Fkodm2sp1b34agc","display":true,"hidden":false,"_fc_drag_tag":"radio","options":[{"label":"事假","value":"1"},{"label":"婚假","value":"2"},{"label":"丧假","value":"3"}]}'
-    ],
-    startUserSelectTasks: [{ id: 'task3', name: '财务' }]
-  },
-  {
-    id: '3',
-    key: 'process_1',
-    name: '请假申请',
-    category: 'approval',
-    icon: 'https://picsum.photos/200?r=1',
-    formType: 10,
-    formConf: {}, // 根据需要定义表单配置
-    formFields: [], // 根据需要定义表单字段
-    startUserSelectTasks: [
-      { id: 'task1', name: '部门经理' },
-      { id: 'task2', name: '人力资源' }
-    ]
-  },
-  {
-    id: '4',
-    key: 'process_2',
-    name: '报销申请',
-    category: 'approval',
-    icon: 'https://picsum.photos/200?r=2',
-    formType: 10,
-    formConf: {},
-    formFields: [],
-    startUserSelectTasks: [{ id: 'task3', name: '财务' }]
-  },
-  {
-    id: '5',
-    key: 'process_1',
-    name: '请假申请',
-    category: 'approval',
-    icon: 'https://picsum.photos/200?r=1',
-    formType: 10,
-    formConf: {}, // 根据需要定义表单配置
-    formFields: [], // 根据需要定义表单字段
-    startUserSelectTasks: [
-      { id: 'task1', name: '部门经理' },
-      { id: 'task2', name: '人力资源' }
-    ]
-  },
-  {
-    id: '6',
-    key: 'process_2',
-    name: '报销申请',
-    category: 'approval',
-    icon: 'https://picsum.photos/200?r=2',
-    formType: 10,
-    formConf: {},
-    formFields: [],
-    startUserSelectTasks: [{ id: 'task3', name: '财务' }]
-  },
-  {
-    id: '7',
-    key: 'process_1',
-    name: '请假申请',
-    category: 'approval',
-    icon: 'https://picsum.photos/200?r=1',
-    formType: 10,
-    formConf: {}, // 根据需要定义表单配置
-    formFields: [], // 根据需要定义表单字段
-    startUserSelectTasks: [
-      { id: 'task1', name: '部门经理' },
-      { id: 'task2', name: '人力资源' }
-    ]
-  },
-  {
-    id: '8',
-    key: 'process_2',
-    name: '报销申请',
-    category: 'approval',
-    icon: 'https://picsum.photos/200?r=2',
-    formType: 10,
-    formConf: {},
-    formFields: [],
-    startUserSelectTasks: [{ id: 'task3', name: '财务' }]
-  }
-]

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

@@ -15,6 +15,7 @@
         >
           <img class="w-full h-full" :src="getApprovalNodeImg(activity.nodeType)" alt="" />
           <div
+            v-if="showStatusIcon"
             class="position-absolute top-17px left-17px bg-#fff rounded-full flex items-center p-2px"
           >
             <el-icon :size="12" :color="getApprovalNodeColor(activity.status)">
@@ -131,11 +132,18 @@ import auditorSvg from '@/assets/svgs/bpm/auditor.svg'
 import copySvg from '@/assets/svgs/bpm/copy.svg'
 import conditionSvg from '@/assets/svgs/bpm/condition.svg'
 import parallelSvg from '@/assets/svgs/bpm/parallel.svg'
+import finishSvg from '@/assets/svgs/bpm/finish.svg'
 
 defineOptions({ name: 'BpmProcessInstanceTimeline' })
-defineProps<{
-  approveNodes: ProcessInstanceApi.ApprovalNodeInfo[] // 审批节点信息
-}>()
+withDefaults(
+  defineProps<{
+    approveNodes: ProcessInstanceApi.ApprovalNodeInfo[] // 审批节点信息
+    showStatusIcon?: boolean // 是否显示头像右下角状态图标
+  }>(),
+  {
+    showStatusIcon: true // 默认值为 true
+  }
+)
 
 // 审批节点
 const statusIconMap2 = {
@@ -180,6 +188,8 @@ const statusIconMap = {
 }
 
 const nodeTypeSvgMap = {
+  // 结束节点
+  [NodeType.END_EVENT_NODE]: { color: '#ffffff', svg: finishSvg },
   // 发起人节点
   [NodeType.START_USER_NODE]: { color: '#ffffff', svg: starterSvg },
   // 审批人节点