From f89b0365a12e5fc7511a7b8f046a26042694c369 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Thu, 11 Jun 2026 01:21:56 +0800
Subject: [PATCH] =?UTF-8?q?feat(bpm):=20=E6=94=AF=E6=8C=81=E6=B5=81?=
 =?UTF-8?q?=E7=A8=8B=E6=89=93=E5=8D=B0=E6=B8=B2=E6=9F=93=E4=B8=9A=E5=8A=A1?=
 =?UTF-8?q?=E8=A1=A8=E5=8D=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 在 vue3、vben antd、vben ele 打印弹窗中动态加载业务表单组件
- 未启用自定义打印模板且流程表单字段为空时，使用 formCustomViewPath 渲染业务详情
- 业务表单独立于打印表格渲染，避免表格单元格内嵌页面导致布局和分页问题
- 保留 readonly、print-mode 作为业务详情组件打印态适配约定
---
 .../detail/modules/process-print.vue          | 31 ++++++++++++++++++-
 .../detail/modules/process-print.vue          | 31 ++++++++++++++++++-
 2 files changed, 60 insertions(+), 2 deletions(-)

diff --git a/apps/web-antd/src/views/bpm/processInstance/detail/modules/process-print.vue b/apps/web-antd/src/views/bpm/processInstance/detail/modules/process-print.vue
index 25833a809..d953015c3 100644
--- a/apps/web-antd/src/views/bpm/processInstance/detail/modules/process-print.vue
+++ b/apps/web-antd/src/views/bpm/processInstance/detail/modules/process-print.vue
@@ -2,7 +2,7 @@
 import type { BpmProcessInstanceApi } from '#/api/bpm/processInstance';
 import type { SystemAreaApi } from '#/api/system/area';
 
-import { computed, ref } from 'vue';
+import { computed, ref, shallowRef } from 'vue';
 
 import { useVbenModal } from '@vben/common-ui';
 import { DICT_TYPE } from '@vben/constants';
@@ -19,6 +19,7 @@ import { getAreaTree } from '#/api/system/area';
 import { getSimpleDeptList } from '#/api/system/dept';
 import { getSimpleUserList } from '#/api/system/user';
 import { decodeFields } from '#/components/form-create';
+import { registerComponent } from '#/utils';
 
 const userStore = useUserStore();
 
@@ -54,6 +55,7 @@ const userName = computed(() => userStore.userInfo?.nickname ?? '');
 const printTime = ref(formatDate(new Date(), 'YYYY-MM-DD HH:mm'));
 const formFields = ref<FormFieldItem[]>([]);
 const printDataMap = ref<Record<string, string>>({});
+const BusinessFormComponent = shallowRef<any>();
 
 /** 打印配置 */
 const printObj = ref({
@@ -93,6 +95,17 @@ async function fetchPrintData(id: string) {
   printTime.value = formatDate(new Date(), 'YYYY-MM-DD HH:mm');
   initPrintDataMap();
   await parseFormFields();
+  initBusinessFormComponent();
+}
+
+/** 初始化业务表单组件 */
+function initBusinessFormComponent() {
+  const businessFormPath =
+    printData.value?.processInstance.processDefinition?.formCustomViewPath ||
+    '';
+  BusinessFormComponent.value = businessFormPath
+    ? registerComponent(businessFormPath)
+    : undefined;
 }
 
 /** 解析表单字段 */
@@ -595,6 +608,22 @@ function getPrintTemplateHTML() {
                 <div v-html="item.html"></div>
               </td>
             </tr>
+          </tbody>
+        </table>
+        <!-- 业务表单：独立成块渲染，不嵌入表格单元格，避免宽度与分页受限 -->
+        <div
+          v-if="BusinessFormComponent && formFields.length === 0"
+          class="mt-3"
+        >
+          <component
+            :is="BusinessFormComponent"
+            :id="printData.processInstance.businessKey"
+            :readonly="true"
+            :print-mode="true"
+          />
+        </div>
+        <table class="mt-3 w-full border-collapse">
+          <tbody>
             <tr>
               <td
                 class="w-full border border-black p-1.5 text-center"
diff --git a/apps/web-ele/src/views/bpm/processInstance/detail/modules/process-print.vue b/apps/web-ele/src/views/bpm/processInstance/detail/modules/process-print.vue
index 62f256a25..8f968d3fa 100644
--- a/apps/web-ele/src/views/bpm/processInstance/detail/modules/process-print.vue
+++ b/apps/web-ele/src/views/bpm/processInstance/detail/modules/process-print.vue
@@ -2,7 +2,7 @@
 import type { BpmProcessInstanceApi } from '#/api/bpm/processInstance';
 import type { SystemAreaApi } from '#/api/system/area';
 
-import { computed, ref } from 'vue';
+import { computed, ref, shallowRef } from 'vue';
 
 import { useVbenModal } from '@vben/common-ui';
 import { DICT_TYPE } from '@vben/constants';
@@ -19,6 +19,7 @@ import { getAreaTree } from '#/api/system/area';
 import { getSimpleDeptList } from '#/api/system/dept';
 import { getSimpleUserList } from '#/api/system/user';
 import { decodeFields } from '#/components/form-create';
+import { registerComponent } from '#/utils';
 
 const userStore = useUserStore();
 
@@ -54,6 +55,7 @@ const userName = computed(() => userStore.userInfo?.nickname ?? '');
 const printTime = ref(formatDate(new Date(), 'YYYY-MM-DD HH:mm'));
 const formFields = ref<FormFieldItem[]>([]);
 const printDataMap = ref<Record<string, string>>({});
+const BusinessFormComponent = shallowRef<any>();
 
 /** 打印配置 */
 const printObj = ref({
@@ -93,6 +95,17 @@ async function fetchPrintData(id: string) {
   printTime.value = formatDate(new Date(), 'YYYY-MM-DD HH:mm');
   initPrintDataMap();
   await parseFormFields();
+  initBusinessFormComponent();
+}
+
+/** 初始化业务表单组件 */
+function initBusinessFormComponent() {
+  const businessFormPath =
+    printData.value?.processInstance.processDefinition?.formCustomViewPath ||
+    '';
+  BusinessFormComponent.value = businessFormPath
+    ? registerComponent(businessFormPath)
+    : undefined;
 }
 
 /** 解析表单字段 */
@@ -595,6 +608,22 @@ function getPrintTemplateHTML() {
                 <div v-html="item.html"></div>
               </td>
             </tr>
+          </tbody>
+        </table>
+        <!-- 业务表单：独立成块渲染，不嵌入表格单元格，避免宽度与分页受限 -->
+        <div
+          v-if="BusinessFormComponent && formFields.length === 0"
+          class="mt-3"
+        >
+          <component
+            :is="BusinessFormComponent"
+            :id="printData.processInstance.businessKey"
+            :readonly="true"
+            :print-mode="true"
+          />
+        </div>
+        <table class="mt-3 w-full border-collapse">
+          <tbody>
             <tr>
               <td
                 class="w-full border border-black p-1.5 text-center"