feat(bpm): 支持流程打印渲染业务表单

- 在 vue3、vben antd、vben ele 打印弹窗中动态加载业务表单组件
- 未启用自定义打印模板且流程表单字段为空时,使用 formCustomViewPath 渲染业务详情
- 业务表单独立于打印表格渲染,避免表格单元格内嵌页面导致布局和分页问题
- 保留 readonly、print-mode 作为业务详情组件打印态适配约定
master
YunaiV 2026-06-11 01:21:56 +08:00
parent caa6fa9be3
commit 394a3d075a
1 changed files with 22 additions and 0 deletions

View File

@ -14,6 +14,7 @@ import {
getStrDictOptions
} from '@/utils/dict'
import { decodeFields } from '@/utils/formCreate'
import { registerComponent } from '@/utils/routerHelper'
interface FormFieldItem {
html: string
@ -58,6 +59,7 @@ const userName = computed(() => userStore.user.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 open = async (id: string) => {
loading.value = true
@ -66,6 +68,7 @@ const open = async (id: string) => {
printTime.value = formatDate(new Date(), 'YYYY-MM-DD HH:mm')
initPrintDataMap()
await parseFormFields()
initBusinessFormComponent()
} finally {
loading.value = false
}
@ -73,6 +76,12 @@ const open = async (id: string) => {
}
defineExpose({ open })
const initBusinessFormComponent = () => {
const businessFormPath =
printData.value?.processInstance?.processDefinition?.formCustomViewPath || ''
BusinessFormComponent.value = businessFormPath ? registerComponent(businessFormPath) : undefined
}
const parseFormFields = async () => {
if (!printData.value) return
@ -498,6 +507,19 @@ const printObj = ref({
<div v-html="item.html"></div>
</td>
</tr>
</tbody>
</table>
<!-- 业务表单独立成块渲染不嵌入表格单元格避免宽度与分页受限 -->
<div v-if="BusinessFormComponent && formFields.length === 0" class="mt-20px">
<component
:is="BusinessFormComponent"
:id="printData.processInstance.businessKey"
:readonly="true"
:print-mode="true"
/>
</div>
<table class="mt-20px w-100%" border="1" style="border-collapse: collapse">
<tbody>
<tr>
<td class="p-5px w-100% text-center" colspan="4">
<h4>流程节点</h4>