feat(bpm): 支持流程打印渲染业务表单
- 在 vue3、vben antd、vben ele 打印弹窗中动态加载业务表单组件 - 未启用自定义打印模板且流程表单字段为空时,使用 formCustomViewPath 渲染业务详情 - 业务表单独立于打印表格渲染,避免表格单元格内嵌页面导致布局和分页问题 - 保留 readonly、print-mode 作为业务详情组件打印态适配约定master
parent
caa6fa9be3
commit
394a3d075a
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue