feat(bpm): 支持流程打印渲染业务表单
- 在 vue3、vben antd、vben ele 打印弹窗中动态加载业务表单组件 - 未启用自定义打印模板且流程表单字段为空时,使用 formCustomViewPath 渲染业务详情 - 业务表单独立于打印表格渲染,避免表格单元格内嵌页面导致布局和分页问题 - 保留 readonly、print-mode 作为业务详情组件打印态适配约定pull/361/MERGE
parent
fb80749156
commit
f89b0365a1
|
|
@ -2,7 +2,7 @@
|
||||||
import type { BpmProcessInstanceApi } from '#/api/bpm/processInstance';
|
import type { BpmProcessInstanceApi } from '#/api/bpm/processInstance';
|
||||||
import type { SystemAreaApi } from '#/api/system/area';
|
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 { useVbenModal } from '@vben/common-ui';
|
||||||
import { DICT_TYPE } from '@vben/constants';
|
import { DICT_TYPE } from '@vben/constants';
|
||||||
|
|
@ -19,6 +19,7 @@ import { getAreaTree } from '#/api/system/area';
|
||||||
import { getSimpleDeptList } from '#/api/system/dept';
|
import { getSimpleDeptList } from '#/api/system/dept';
|
||||||
import { getSimpleUserList } from '#/api/system/user';
|
import { getSimpleUserList } from '#/api/system/user';
|
||||||
import { decodeFields } from '#/components/form-create';
|
import { decodeFields } from '#/components/form-create';
|
||||||
|
import { registerComponent } from '#/utils';
|
||||||
|
|
||||||
const userStore = useUserStore();
|
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 printTime = ref(formatDate(new Date(), 'YYYY-MM-DD HH:mm'));
|
||||||
const formFields = ref<FormFieldItem[]>([]);
|
const formFields = ref<FormFieldItem[]>([]);
|
||||||
const printDataMap = ref<Record<string, string>>({});
|
const printDataMap = ref<Record<string, string>>({});
|
||||||
|
const BusinessFormComponent = shallowRef<any>();
|
||||||
|
|
||||||
/** 打印配置 */
|
/** 打印配置 */
|
||||||
const printObj = ref({
|
const printObj = ref({
|
||||||
|
|
@ -93,6 +95,17 @@ async function fetchPrintData(id: string) {
|
||||||
printTime.value = formatDate(new Date(), 'YYYY-MM-DD HH:mm');
|
printTime.value = formatDate(new Date(), 'YYYY-MM-DD HH:mm');
|
||||||
initPrintDataMap();
|
initPrintDataMap();
|
||||||
await parseFormFields();
|
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>
|
<div v-html="item.html"></div>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</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>
|
<tr>
|
||||||
<td
|
<td
|
||||||
class="w-full border border-black p-1.5 text-center"
|
class="w-full border border-black p-1.5 text-center"
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,7 @@
|
||||||
import type { BpmProcessInstanceApi } from '#/api/bpm/processInstance';
|
import type { BpmProcessInstanceApi } from '#/api/bpm/processInstance';
|
||||||
import type { SystemAreaApi } from '#/api/system/area';
|
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 { useVbenModal } from '@vben/common-ui';
|
||||||
import { DICT_TYPE } from '@vben/constants';
|
import { DICT_TYPE } from '@vben/constants';
|
||||||
|
|
@ -19,6 +19,7 @@ import { getAreaTree } from '#/api/system/area';
|
||||||
import { getSimpleDeptList } from '#/api/system/dept';
|
import { getSimpleDeptList } from '#/api/system/dept';
|
||||||
import { getSimpleUserList } from '#/api/system/user';
|
import { getSimpleUserList } from '#/api/system/user';
|
||||||
import { decodeFields } from '#/components/form-create';
|
import { decodeFields } from '#/components/form-create';
|
||||||
|
import { registerComponent } from '#/utils';
|
||||||
|
|
||||||
const userStore = useUserStore();
|
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 printTime = ref(formatDate(new Date(), 'YYYY-MM-DD HH:mm'));
|
||||||
const formFields = ref<FormFieldItem[]>([]);
|
const formFields = ref<FormFieldItem[]>([]);
|
||||||
const printDataMap = ref<Record<string, string>>({});
|
const printDataMap = ref<Record<string, string>>({});
|
||||||
|
const BusinessFormComponent = shallowRef<any>();
|
||||||
|
|
||||||
/** 打印配置 */
|
/** 打印配置 */
|
||||||
const printObj = ref({
|
const printObj = ref({
|
||||||
|
|
@ -93,6 +95,17 @@ async function fetchPrintData(id: string) {
|
||||||
printTime.value = formatDate(new Date(), 'YYYY-MM-DD HH:mm');
|
printTime.value = formatDate(new Date(), 'YYYY-MM-DD HH:mm');
|
||||||
initPrintDataMap();
|
initPrintDataMap();
|
||||||
await parseFormFields();
|
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>
|
<div v-html="item.html"></div>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</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>
|
<tr>
|
||||||
<td
|
<td
|
||||||
class="w-full border border-black p-1.5 text-center"
|
class="w-full border border-black p-1.5 text-center"
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue