From b84d8a871ec7600dba7aa5519e0d9c582570e072 Mon Sep 17 00:00:00 2001
From: jason <2667446@qq.com>
Date: Tue, 10 Feb 2026 23:22:59 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20[bpm]=20=E6=B5=81=E7=A8=8B=E8=A1=A8?=
 =?UTF-8?q?=E5=8D=95=E5=B1=95=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 env/.env                                      |   3 +
 src/api/bpm/task/index.ts                     |   1 +
 .../processInstance/detail/audit/index.vue    |  11 ++
 .../detail/components/form-detail.vue         | 153 ++++++++++++++--
 .../detail/components/operation-button.vue    |  29 ++-
 .../processInstance/detail/index.vue          |  10 +-
 .../processInstance/form-webview/index.vue    | 165 ++++++++++++++++++
 7 files changed, 350 insertions(+), 22 deletions(-)
 create mode 100644 src/pages-bpm/processInstance/form-webview/index.vue

diff --git a/env/.env b/env/.env
index b7fc154..95d5fba 100644
--- a/env/.env
+++ b/env/.env
@@ -27,6 +27,9 @@ VITE_UPLOAD_TYPE=server
 # 静态资源地址
 VITE_STATIC_BASEURL = 'http://test.yudao.iocoder.cn'
 
+# BPM 移动端流程嵌入地址（用于 webview 嵌入 vben 项目的流程表单页面）
+VITE_BPM_FORM_URL = 'http://localhost:5666/bpm/mobile/form-preview'
+
 # 认证模式，'single' | 'double' ==> 单token | 双token
 VITE_AUTH_MODE = 'double'
 
diff --git a/src/api/bpm/task/index.ts b/src/api/bpm/task/index.ts
index 41174f6..bffd2fa 100644
--- a/src/api/bpm/task/index.ts
+++ b/src/api/bpm/task/index.ts
@@ -52,6 +52,7 @@ export function approveTask(data: {
   reason: string
   signPicUrl?: string // 签名图片 URL
   nextAssignees?: Record<string, number[]> // 下一个节点审批人
+  variables?: Record<string, any>
 }) {
   return http.put<boolean>('/bpm/task/approve', data)
 }
diff --git a/src/pages-bpm/processInstance/detail/audit/index.vue b/src/pages-bpm/processInstance/detail/audit/index.vue
index 4d55d0e..d57d339 100644
--- a/src/pages-bpm/processInstance/detail/audit/index.vue
+++ b/src/pages-bpm/processInstance/detail/audit/index.vue
@@ -110,6 +110,7 @@ const props = defineProps<{
   processInstanceId?: string
   taskId?: string
   pass?: string
+  updateFormValues?: string
 }>()
 
 definePage({
@@ -281,6 +282,15 @@ async function handleSubmit() {
   formLoading.value = true
   try {
     if (isApprove.value) {
+      let variables = {}
+      // 从 props 中获取更新的表单数据
+      if (props.updateFormValues) {
+        try {
+          variables = JSON.parse(decodeURIComponent(props.updateFormValues))
+        } catch (parseError) {
+          console.error('[approve] 解析更新表单的数据失败:', parseError)
+        }
+      }
       // 审批通过
       await approveTask({
         id: taskId.value as string,
@@ -289,6 +299,7 @@ async function handleSubmit() {
         nextAssignees: Object.keys(approveUserSelectAssignees.value).length > 0
           ? approveUserSelectAssignees.value
           : undefined,
+        variables,
       })
     } else {
       // 审批拒绝
diff --git a/src/pages-bpm/processInstance/detail/components/form-detail.vue b/src/pages-bpm/processInstance/detail/components/form-detail.vue
index 9de8f1f..c1775bf 100644
--- a/src/pages-bpm/processInstance/detail/components/form-detail.vue
+++ b/src/pages-bpm/processInstance/detail/components/form-detail.vue
@@ -1,4 +1,119 @@
 <!-- 表单详情：流程表单/业务表单 -->
+<script lang="ts" setup>
+import type { ProcessDefinition, ProcessInstance } from '@/api/bpm/processInstance'
+import { computed, onMounted, onUnmounted, ref, toRaw } from 'vue'
+// 特殊：业务表单组件（uniapp 小程序不支持动态组件，需要静态导入）
+import LeaveDetail from '@/pages-bpm/oa/leave/detail/index.vue'
+import { useTokenStore } from '@/store/token'
+import { BpmFieldPermissionType, BpmModelFormType } from '@/utils/constants'
+
+const props = defineProps<{
+  /** 流程定义 */
+  processDefinition?: ProcessDefinition
+  /** 流程实例 */
+  processInstance?: ProcessInstance
+  /** 任务ID（可选） */
+  taskId?: string
+}>()
+
+const tokenStore = useTokenStore()
+
+// 表单加载状态
+const formLoading = ref(false)
+const formError = ref<string | null>(null)
+
+// 缓存的流程表单修改的数据（通过全局事件接收）
+const cachedFormUpdateData = ref<Record<string, any> | null>(null)
+
+// 构建 webview URL
+const formUrl = computed(() => {
+  if (props.processDefinition?.formType !== BpmModelFormType.NORMAL) {
+    return ''
+  }
+  // 从环境变量获取表单域名
+  const baseUrl = import.meta.env.VITE_BPM_FORM_URL
+  if (!baseUrl) {
+    console.error('VITE_BPM_FORM_URL 环境变量未配置')
+    return ''
+  }
+  // 获取当前 token
+  const token = tokenStore.validToken
+  // 构建 URL 参数（兼容小程序，不使用 URLSearchParams）
+  const params: string[] = []
+  if (props.processInstance?.id) {
+    params.push(`processInstanceId=${encodeURIComponent(props.processInstance.id)}`)
+  }
+  if (props.taskId) {
+    params.push(`taskId=${encodeURIComponent(props.taskId)}`)
+  }
+  if (token) {
+    params.push(`token=${encodeURIComponent(token)}`)
+  }
+  // 添加 type 参数区分 H5 和小程序
+  // #ifdef H5
+  params.push('type=h5')
+  // #endif
+  // #ifndef H5
+  params.push('type=miniapp')
+  // #endif
+  return `${baseUrl}?${params.join('&')}`
+})
+
+/**
+ * 跳转到 web-view 页面查看表单
+ */
+function goToFormWebview() {
+  if (formUrl.value) {
+    uni.navigateTo({
+      url: `/pages-bpm/processInstance/form-webview/index?url=${encodeURIComponent(formUrl.value)}`,
+    })
+  }
+}
+
+/**
+ * 监听表单提交事件
+ */
+function handleFormSubmit(formSumbitData: Record<string, any>) {
+  if (formSumbitData) {
+    const { fieldPermissions, formValue } = formSumbitData
+    cachedFormUpdateData.value = getUpdatedProcessInstanceVariables(fieldPermissions, formValue)
+  }
+}
+
+/** 从可以编辑的流程表单字段，获取需要修改的流程实例的变量 */
+function getUpdatedProcessInstanceVariables(fieldPermissions: Record<string, string>, formValue: Record<string, any>) {
+  const variables: any = {}
+  Object.keys(fieldPermissions).forEach((item: string) => {
+    if (BpmFieldPermissionType.WRITE === fieldPermissions[item]) {
+      variables[item] = formValue[item]
+    }
+  })
+  return variables
+}
+
+// 监听全局事件
+onMounted(() => {
+  uni.$on('bpm-form-submit', handleFormSubmit)
+})
+
+onUnmounted(() => {
+  uni.$off('bpm-form-submit', handleFormSubmit)
+})
+
+/**
+ * 获取流程表单修改的数据
+ * @returns 表单数据对象 | null
+ */
+function getFormData(): Record<string, any> | null {
+  return toRaw(cachedFormUpdateData.value)
+}
+
+// 暴露方法给父组件
+defineExpose({
+  getFormData,
+})
+</script>
+
 <template>
   <view class="mx-24rpx mt-24rpx overflow-hidden rounded-16rpx bg-white">
     <!-- 标题 -->
@@ -18,25 +133,31 @@
         暂不支持该业务表单，请参考 LeaveDetail 配置
       </view>
     </template>
-    <!-- TODO @jason：表单内容：流程表单 -->
+    <!-- 表单内容：流程表单（统一使用 webview 展示） -->
     <template v-else-if="processDefinition?.formType === BpmModelFormType.NORMAL">
-      <view class="px-24rpx py-32rpx text-26rpx text-[#999]">
-        流程表单仅 PC 端支持预览
+      <!-- 统一使用 webview 全屏方式 -->
+      <view
+        v-if="formUrl"
+        class="mt-12rpx border-t-1rpx border-t-[#eee] border-t-solid p-24rpx"
+        @click="goToFormWebview"
+      >
+        <view class="flex items-center justify-between">
+          <view class="flex items-center">
+            <wd-icon name="view" size="40rpx" color="#1890ff" />
+            <text class="ml-16rpx text-28rpx text-[#333]">表单详情</text>
+          </view>
+          <wd-icon name="arrow-right" size="32rpx" color="#999" />
+        </view>
       </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>
+<style lang="scss" scoped>
+.form-loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 64rpx 24rpx;
+}
+</style>
diff --git a/src/pages-bpm/processInstance/detail/components/operation-button.vue b/src/pages-bpm/processInstance/detail/components/operation-button.vue
index 939d633..5ac6f2b 100644
--- a/src/pages-bpm/processInstance/detail/components/operation-button.vue
+++ b/src/pages-bpm/processInstance/detail/components/operation-button.vue
@@ -96,11 +96,17 @@ const moreOperations = ref<MoreOperationType[]>([]) // 更多操作
 const runningTask = ref<Task>()
 const processInstance = ref<ProcessInstance>()
 const reasonRequire = ref<boolean>(false)
+const formDetailRef = ref<{ getFormData: () => Record<string, unknown> | null }>() // 表单详情组件引用
 
 /** 初始化 */
-function init(theProcessInstance: ProcessInstance, task: Task) {
+function init(
+  theProcessInstance: ProcessInstance,
+  task: Task,
+  formDetail?: { getFormData: () => Record<string, any> | null },
+) {
   processInstance.value = theProcessInstance
   runningTask.value = task
+  formDetailRef.value = formDetail
   if (task) {
     reasonRequire.value = task.reasonRequire ?? false
     // TODO @jason：这里的判断，是否可以简化哈？就是默认计算出按钮，然后根据数量，去渲染具体的按钮。
@@ -191,9 +197,13 @@ function init(theProcessInstance: ProcessInstance, task: Task) {
 /** 跳转到相应的操作页面 */
 function handleOperation(operationType: number) {
   switch (operationType) {
-    case BpmTaskOperationButtonTypeEnum.APPROVE:
-      uni.navigateTo({ url: `/pages-bpm/processInstance/detail/audit/index?processInstanceId=${processInstance.value.id}&taskId=${runningTask.value?.id}&pass=true` })
+    case BpmTaskOperationButtonTypeEnum.APPROVE: {
+      // 获取更新的表单数据
+      const formValues = getFormData()
+      const updateFormValues = encodeURIComponent(JSON.stringify(formValues || {}))
+      uni.navigateTo({ url: `/pages-bpm/processInstance/detail/audit/index?processInstanceId=${processInstance.value.id}&taskId=${runningTask.value?.id}&updateFormValues=${updateFormValues}&pass=true` })
       break
+    }
     case BpmTaskOperationButtonTypeEnum.REJECT:
       uni.navigateTo({ url: `/pages-bpm/processInstance/detail/audit/index?processInstanceId=${processInstance.value.id}&taskId=${runningTask.value?.id}&pass=false` })
       break
@@ -306,6 +316,17 @@ function isShowProcessStartCancel() {
   return isProcessStartUser() && !isEndProcessStatus(processInstance.value?.status)
 }
 
+/**
+ * 获取表单数据（供外部调用或审批操作时使用）
+ * @returns 表单数据对象 | null
+ */
+function getFormData(): Record<string, any> | null {
+  if (formDetailRef.value?.getFormData) {
+    return formDetailRef.value.getFormData()
+  }
+  return null
+}
+
 /** 暴露方法 */
-defineExpose({ init })
+defineExpose({ init, getFormData })
 </script>
diff --git a/src/pages-bpm/processInstance/detail/index.vue b/src/pages-bpm/processInstance/detail/index.vue
index a6f775a..36365bc 100644
--- a/src/pages-bpm/processInstance/detail/index.vue
+++ b/src/pages-bpm/processInstance/detail/index.vue
@@ -41,7 +41,12 @@
     </view>
 
     <!-- 区域：审批详情（表单） -->
-    <FormDetail :process-definition="processDefinition" :process-instance="processInstance" />
+    <FormDetail
+      ref="formDetailRef"
+      :process-definition="processDefinition"
+      :process-instance="processInstance"
+      :task-id="props.taskId"
+    />
 
     <!-- 区域：审批进度 -->
     <view class="mx-24rpx mt-24rpx rounded-16rpx bg-white">
@@ -95,6 +100,7 @@ const tasks = ref<Task[]>([])
 const activityNodes = ref<ApprovalNodeInfo[]>([]) // 审批节点信息
 
 const operationButtonRef = ref() // 操作按钮组件 ref
+const formDetailRef = ref<InstanceType<typeof FormDetail>>() // 表单详情组件 ref
 
 /** 返回上一页 */
 function handleBack() {
@@ -128,7 +134,7 @@ async function loadProcessInstance() {
   // 获取审批节点，显示 Timeline 的数据
   activityNodes.value = data.activityNodes
 
-  operationButtonRef.value?.init(data.processInstance, data.todoTask)
+  operationButtonRef.value?.init(data.processInstance, data.todoTask, formDetailRef.value)
 }
 
 /** 加载任务列表 */
diff --git a/src/pages-bpm/processInstance/form-webview/index.vue b/src/pages-bpm/processInstance/form-webview/index.vue
new file mode 100644
index 0000000..846213c
--- /dev/null
+++ b/src/pages-bpm/processInstance/form-webview/index.vue
@@ -0,0 +1,165 @@
+<!-- 表单 web-view 页面（全平台统一使用） -->
+<script lang="ts" setup>
+/**
+ * web-view（H5 和小程序统一使用）
+ * 由于 web-view 强制全屏，无法嵌入页面中
+ * 因此使用独立页面来展示表单内容
+ *
+ * URL 参数说明：
+ * - type: 区分平台类型（h5 或 miniapp）
+ * - processInstanceId: 流程实例ID
+ * - taskId: 任务ID（可选）
+ * - token: 认证令牌
+ *
+ * 注意：小程序 web-view 的 @message 事件不是实时的
+ * 只有在后退、销毁、分享时才会收到消息
+ */
+import { onMounted, onUnmounted, ref } from 'vue'
+
+const props = defineProps<{
+  url: string // web-view 的 URL（需要 encodeURIComponent 编码）
+}>()
+
+definePage({
+  style: {
+    navigationBarTitleText: '',
+    navigationStyle: 'custom',
+  },
+})
+
+// 解码 URL
+const webviewUrl = ref(decodeURIComponent(props.url || ''))
+
+// 加载状态
+const isLoading = ref(true)
+
+// 最大等待时间（毫秒）：超过此时间强制隐藏加载遮罩
+const MAX_LOADING_TIME = 8000
+
+// 设置最大等待时间，防止一直显示加载状态
+let loadingTimer: ReturnType<typeof setTimeout> | null = null
+onMounted(() => {
+  loadingTimer = setTimeout(() => {
+    if (isLoading.value) {
+      isLoading.value = false
+    }
+  }, MAX_LOADING_TIME)
+})
+
+/**
+ * web-view HTML 加载完成
+ * 注意：此时 vben 页面可能还在请求数据
+ * 因此需要延迟一段时间再隐藏加载遮罩
+ */
+function onWebviewLoad() {
+  // 延迟隐藏加载状态
+  // vben 页面加载包括：HTML 解析 -> JS 执行 -> API 请求 -> 渲染
+  setTimeout(() => {
+    isLoading.value = false
+    if (loadingTimer) {
+      clearTimeout(loadingTimer)
+      loadingTimer = null
+    }
+  }, 5000)
+}
+
+/**
+ * web-view 消息处理
+ * 注意：小程序端只有在后退/销毁/分享时才会收到消息，不是实时的
+ */
+function onWebviewMessage(event: any) {
+  // 可能有多条累积, 取最后一个消息
+  const messages = event.detail?.data || []
+  if (messages.length > 0) {
+    const data = messages.at(-1)
+    const formData = data || null
+    // 发送全局事件
+    uni.$emit('bpm-form-submit', formData)
+  }
+}
+
+// #ifdef H5
+// H5 端：监听 postMessage 消息
+function handleMessage(event: MessageEvent) {
+  const { data } = event
+  if (data?.source !== 'bpm-mobile-form') {
+    return
+  }
+  switch (data.type) {
+    case 'FORM_SUBMIT': {
+      // 表单提交时，通过全局事件发送数据
+      const formSumbitData = data.data || null
+      // 发送全局事件
+      uni.$emit('bpm-form-submit', formSumbitData)
+      break
+    }
+  }
+}
+
+onMounted(() => {
+  window.addEventListener('message', handleMessage)
+})
+onUnmounted(() => {
+  window.removeEventListener('message', handleMessage)
+})
+// #endif
+</script>
+
+<template>
+  <view class="webview-page">
+    <!-- 加载状态遮罩（白色背景，遮盖 vben 的 loading） -->
+    <view v-if="isLoading" class="loading-mask">
+      <wd-loading color="#1890ff" />
+      <text class="loading-text">加载表单中...</text>
+    </view>
+
+    <!-- web-view 全屏展示 -->
+    <web-view
+      v-if="webviewUrl"
+      :src="webviewUrl"
+      @load="onWebviewLoad"
+      @message="onWebviewMessage"
+    />
+
+    <!-- URL 无效时显示错误 -->
+    <view v-else class="error-container">
+      <text class="text-28rpx text-[#999]">表单地址无效</text>
+    </view>
+  </view>
+</template>
+
+<style lang="scss" scoped>
+.webview-page {
+  width: 100%;
+  height: 100vh;
+  background-color: #fff;
+}
+
+// 加载遮罩：白色背景，覆盖整个页面
+.loading-mask {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 9999;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background-color: #fff;
+}
+
+.loading-text {
+  margin-top: 24rpx;
+  font-size: 28rpx;
+  color: #999;
+}
+
+.error-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 50vh;
+}
+</style>
-- 
Gitee