feat：【bpm】流程详情界面：增加业务表单的展示

src/api/bpm/processInstance/index.ts

@@ -9,6 +9,21 @@ export interface User {
   deptName?: string
 }
 
+/** 流程定义 */
+export interface ProcessDefinition {
+  id: string
+  key: string
+  name: string
+  description?: string
+  icon?: string
+  category: string
+  formType?: number
+  formId?: number
+  formCustomCreatePath?: string
+  formCustomViewPath?: string
+  suspensionState: number
+}
+
 /** 流程实例 */
 export interface ProcessInstance {
   id: string
@@ -20,12 +35,20 @@ export interface ProcessInstance {
   startTime?: number
   endTime?: number
   startUser?: User
+  businessKey?: string
+  processDefinition?: ProcessDefinition
   summary?: {
     key: string
     value: string
   }[]
 }
 
+/** 审批详情 */
+export interface ApprovalDetail {
+  processInstance: ProcessInstance
+  processDefinition: ProcessDefinition
+}
+
 /** 抄送流程实例 */
 export interface ProcessInstanceCopy {
   id: string
@@ -54,6 +77,11 @@ export function getProcessInstance(id: string) {
   return http.get<ProcessInstance>(`/bpm/process-instance/get?id=${id}`)
 }
 
+/** 获取审批详情 */
+export function getApprovalDetail(params: { processInstanceId: string, activityId?: string, taskId?: string }) {
+  return http.get<ApprovalDetail>('/bpm/process-instance/get-approval-detail', params)
+}
+
 /** 新增流程实例 */
 export function createProcessInstance(data: {
   processDefinitionId: string

src/pages-bpm/oa/leave/detail/index.vue

@@ -1,7 +1,8 @@
 <template>
-  <view class="yd-page-container">
-    <!-- 顶部导航栏 -->
+  <view :class="embedded ? '' : 'yd-page-container'">
+    <!-- 顶部导航栏（仅路由访问时显示） -->
     <wd-navbar
+      v-if="!embedded"
       title="请假详情"
       left-arrow placeholder safe-area-inset-top fixed
       @click-left="handleBack"
@@ -9,7 +10,7 @@
 
     <!-- 详情内容 -->
     <view>
-      <wd-cell-group border>
+      <wd-cell-group :border="!embedded">
         <wd-cell title="请假类型">
           <dict-tag :type="DICT_TYPE.BPM_OA_LEAVE_TYPE" :value="formData.type" />
         </wd-cell>
@@ -36,6 +37,7 @@ import { formatDateTime } from '@/utils/date'
 
 const props = defineProps<{
   id?: number | string
+  embedded?: boolean // 是否作为嵌入组件使用（非路由访问）
 }>()
 
 definePage({
@@ -46,7 +48,7 @@ definePage({
 })
 
 const toast = useToast()
-const formData = ref<Leave>({})
+const formData = ref<Partial<Leave>>({})
 
 /** 返回上一页 */
 function handleBack() {

src/pages-bpm/processInstance/detail/components/form-detail.vue

@@ -0,0 +1,42 @@
+<!-- 表单详情：流程表单/业务表单 -->
+<template>
+  <view class="mx-24rpx mt-24rpx overflow-hidden rounded-16rpx bg-white">
+    <!-- 标题 -->
+    <view class="px-24rpx pt-24rpx text-28rpx text-[#333] font-bold">
+      审批详情
+    </view>
+    <!-- 表单内容：业务表单 -->
+    <template v-if="processDefinition?.formType === BpmModelFormType.CUSTOM">
+      <!-- OA 请假详情 -->
+      <LeaveDetail
+        v-if="processDefinition?.formCustomViewPath === '/bpm/oa/leave/detail'"
+        :id="processInstance?.businessKey"
+        embedded
+      />
+      <!-- 未配置的业务表单 -->
+      <view v-else class="px-24rpx py-32rpx text-26rpx text-[#999]">
+        暂不支持该业务表单，请参考 LeaveDetail 配置
+      </view>
+    </template>
+    <!-- TODO @jason：表单内容：流程表单 -->
+    <template v-else-if="processDefinition?.formType === BpmModelFormType.NORMAL">
+      <view class="px-24rpx py-32rpx text-26rpx text-[#999]">
+        流程表单仅 PC 端支持预览
+      </view>
+    </template>
+  </view>
+</template>
+
+<script lang="ts" setup>
+import type { ProcessDefinition, ProcessInstance } from '@/api/bpm/processInstance'
+// 特殊：业务表单组件（uniapp 小程序不支持动态组件，需要静态导入）
+import LeaveDetail from '@/pages-bpm/oa/leave/detail/index.vue'
+import { BpmModelFormType } from '@/utils/constants'
+
+defineProps<{
+  /** 流程定义 */
+  processDefinition?: ProcessDefinition
+  /** 流程实例 */
+  processInstance?: ProcessInstance
+}>()
+</script>

src/pages-bpm/processInstance/detail/index.vue

@@ -8,7 +8,7 @@
       @click-left="handleBack"
     />
 
-    <!-- 流程信息卡片 -->
+    <!-- 区域：流程信息（基本信息） -->
     <view class="mx-24rpx mt-24rpx overflow-hidden rounded-16rpx bg-white">
       <view class="p-24rpx">
         <!-- 标题和状态 -->
@@ -37,20 +37,10 @@
       </view>
     </view>
 
-    <!-- 摘要信息 -->
-    <view v-if="processInstance.summary?.length" class="mx-24rpx mt-24rpx overflow-hidden rounded-16rpx bg-white">
-      <view class="p-24rpx">
-        <view class="mb-16rpx text-28rpx text-[#333] font-bold">
-          审批信息
-        </view>
-        <view v-for="(item, index) in processInstance.summary" :key="index" class="mb-8rpx flex">
-          <text class="text-26rpx text-[#999]">{{ item.key }}：</text>
-          <text class="text-26rpx text-[#333]">{{ item.value }}</text>
-        </view>
-      </view>
-    </view>
+    <!-- 区域：审批详情（表单） -->
+    <FormDetail :process-definition="processDefinition" :process-instance="processInstance" />
 
-    <!-- 审批记录 -->
+    <!-- 区域：审批记录 TODO @jason：抽成类似 /Users/yunai/Java/yudao-ui-admin-vben-v5/apps/web-antd/src/views/bpm/processInstance/detail/modules/task-list.vue -->
     <view class="mx-24rpx mt-24rpx overflow-hidden rounded-16rpx bg-white">
       <view class="p-24rpx">
         <view class="mb-16rpx flex items-center justify-between">
@@ -95,7 +85,9 @@
       </view>
     </view>
 
-    <!-- 底部操作栏 -->
+    <!-- TODO 待开发：区域：流程评论 -->
+
+    <!-- 区域：底部操作栏 TODO @jason：抽成类似：/Users/yunai/Java/yudao-ui-admin-vben-v5/apps/web-antd/src/views/bpm/processInstance/detail/modules/operation-button.vue -->
     <view v-if="runningTask" class="yd-detail-footer">
       <view class="yd-detail-footer-actions">
         <wd-button type="error" plain class="flex-1" @click="handleReject">
@@ -110,17 +102,18 @@
 </template>
 
 <script lang="ts" setup>
-import type { ProcessInstance } from '@/api/bpm/processInstance'
+import type { ProcessDefinition, ProcessInstance } from '@/api/bpm/processInstance'
 import type { Task } from '@/api/bpm/task'
 // TODO @芋艿：缺少功能的补全！！！！
 import { onLoad } from '@dcloudio/uni-app'
 import { computed, ref } from 'vue'
 import { useToast } from 'wot-design-uni'
-import { getProcessInstance } from '@/api/bpm/processInstance'
+import { getApprovalDetail } from '@/api/bpm/processInstance'
 import { getTaskListByProcessInstanceId } from '@/api/bpm/task'
 import { useUserStore } from '@/store'
 import { navigateBackPlus } from '@/utils'
 import { formatDateTime, formatPast } from '@/utils/date'
+import FormDetail from './components/form-detail.vue'
 
 definePage({
   style: {
@@ -133,6 +126,7 @@ const userStore = useUserStore()
 const toast = useToast()
 const processInstanceId = ref('')
 const processInstance = ref<Partial<ProcessInstance>>({})
+const processDefinition = ref<Partial<ProcessDefinition>>({})
 const tasks = ref<Task[]>([])
 const orderAsc = ref(true)
 
@@ -261,7 +255,13 @@ function handleReject() {
 /** 加载流程实例 */
 async function loadProcessInstance() {
   try {
-    processInstance.value = await getProcessInstance(processInstanceId.value)
+    const data = await getApprovalDetail({ processInstanceId: processInstanceId.value })
+    if (!data || !data.processInstance) {
+      toast.show('查询不到审批详情信息')
+      return
+    }
+    processInstance.value = data.processInstance
+    processDefinition.value = data.processDefinition || {}
   } catch (error) {
     console.error('[detail] 加载流程实例失败:', error)
   }

src/pages-bpm/utils/index.ts

@@ -3,6 +3,7 @@
  * - key: PC 端路径 (formCustomCreatePath / formCustomViewPath)
  * - value: 移动端路径
  * 原因是：目前暂时没有 mobile 端的自定义表单字段，所以暂时需要硬编码映射关系
+ * 另外：需要在 src/pages-bpm/processInstance/detail/components/form-detail.vue 里，增加使用类似 LeaveDetail 的使用
  */
 const PC_TO_MOBILE_PATH_MAP: Record<string, string> = {
   // OA 请假