feat: [bpm][antd] 流程打印迁移

apps/web-antd/package.json

@@ -62,6 +62,7 @@
     "vue": "catalog:",
     "vue-dompurify-html": "catalog:",
     "vue-router": "catalog:",
+    "vue3-print-nb": "catalog:",
     "vue3-signature": "catalog:",
     "vuedraggable": "catalog:"
   }

apps/web-antd/src/api/bpm/model/index.ts

@@ -20,6 +20,7 @@ export namespace BpmModelApi {
     suspensionState: number;
     formType?: number;
     formCustomViewPath?: string;
+    formFields?: string[];
   }
 
   /** 流程模型 */

apps/web-antd/src/api/bpm/processInstance/index.ts

@@ -20,6 +20,7 @@ export namespace BpmProcessInstanceApi {
 
   export interface User {
     avatar: string;
+    deptName?: string;
     id: number;
     nickname: string;
   }
@@ -101,6 +102,22 @@ export namespace BpmProcessInstanceApi {
     }[];
     taskId: string;
   }
+
+  /** 打印数据任务信息 */
+  export interface PrintTask {
+    description: string;
+    id: number;
+    name: string;
+    signPicUrl?: string;
+  }
+
+  /** 打印数据 */
+  export interface PrintData {
+    printTemplateEnable: boolean;
+    printTemplateHtml?: string;
+    processInstance: ProcessInstance;
+    tasks: PrintTask[];
+  }
 }
 
 /** 查询我的流程实例分页 */
@@ -205,3 +222,10 @@ export async function getProcessInstanceBpmnModelView(id: string) {
     `/bpm/process-instance/get-bpmn-model-view?id=${id}`,
   );
 }
+
+/** 获取流程实例打印数据 */
+export async function getProcessInstancePrintData(id: string) {
+  return requestClient.get<BpmProcessInstanceApi.PrintData>(
+    `/bpm/process-instance/get-print-data?processInstanceId=${id}`,
+  );
+}

apps/web-antd/src/components/form-create/helpers.ts

@@ -1,3 +1,5 @@
+import type { Rule } from '@form-create/ant-design-vue';
+
 import type { Ref } from 'vue';
 
 import type { Menu } from '#/components/form-create/typing';
@@ -34,7 +36,7 @@ export function encodeFields(designerRef: any) {
 
 // 解码表单 Fields
 export function decodeFields(fields: string[]) {
-  const rule: object[] = [];
+  const rule: Rule[] = [];
   fields.forEach((item) => {
     rule.push(formCreate.parseJson(item));
   });

apps/web-antd/src/views/bpm/processInstance/detail/index.vue

@@ -4,7 +4,7 @@ import type { SystemUserApi } from '#/api/system/user';
 
 import { nextTick, onMounted, ref, shallowRef, watch } from 'vue';
 
-import { Page } from '@vben/common-ui';
+import { Page, useVbenModal } from '@vben/common-ui';
 import {
   BpmFieldPermissionType,
   BpmModelFormType,
@@ -13,6 +13,7 @@ import {
   DICT_TYPE,
 } from '@vben/constants';
 import {
+  IconifyIcon,
   SvgBpmApproveIcon,
   SvgBpmCancelIcon,
   SvgBpmRejectIcon,
@@ -33,6 +34,7 @@ import { registerComponent } from '#/utils';
 
 import ProcessInstanceBpmnViewer from './modules/bpm-viewer.vue';
 import ProcessInstanceOperationButton from './modules/operation-button.vue';
+import ProcessssPrint from './modules/processs-print.vue';
 import ProcessInstanceSimpleViewer from './modules/simple-bpm-viewer.vue';
 import BpmProcessInstanceTaskList from './modules/task-list.vue';
 import ProcessInstanceTimeline from './modules/time-line.vue';
@@ -189,6 +191,16 @@ const refresh = () => {
   getDetail();
 };
 
+const [PrintModal, printModalApi] = useVbenModal({
+  connectedComponent: ProcessssPrint,
+  destroyOnClose: true,
+});
+
+/** 打开打印对话框 */
+function handlePrint() {
+  printModalApi.setData({ processInstanceId: props.id }).open();
+}
+
 /** 监听 Tab 切换，当切换到 "record" 标签时刷新任务列表 */
 watch(
   () => activeTab.value,
@@ -218,7 +230,14 @@ onMounted(async () => {
       }"
     >
       <template #title>
+        <div class="flex items-center gap-4">
           <span class="text-gray-500">编号：{{ id || '-' }}</span>
+          <IconifyIcon
+            icon="lucide:printer"
+            class="hover:text-primary cursor-pointer"
+            @click="handlePrint"
+          />
+        </div>
       </template>
 
       <div class="flex h-full flex-col">
@@ -371,6 +390,8 @@ onMounted(async () => {
         </div>
       </template>
     </Card>
+    <!-- 打印对话框 -->
+    <PrintModal />
   </Page>
 </template>
 

apps/web-antd/src/views/bpm/processInstance/detail/modules/processs-print.vue

@@ -0,0 +1,314 @@
+<script setup lang="ts">
+import type { BpmProcessInstanceApi } from '#/api/bpm/processInstance';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { DICT_TYPE } from '@vben/constants';
+import { getDictLabel } from '@vben/hooks';
+import { useUserStore } from '@vben/stores';
+import { formatDate } from '@vben/utils';
+
+import { Button } from 'ant-design-vue';
+// @ts-ignore - 安装 vue3-print-nb 局部指令 v-print
+import vPrint from 'vue3-print-nb';
+
+import { getProcessInstancePrintData } from '#/api/bpm/processInstance';
+import { decodeFields } from '#/components/form-create';
+
+const userStore = useUserStore();
+
+const printData = ref<BpmProcessInstanceApi.PrintData>();
+const userName = computed(() => userStore.userInfo?.nickname ?? '');
+const printTime = ref(formatDate(new Date(), 'YYYY-MM-DD HH:mm'));
+const formFields = ref<any[]>([]);
+const printDataMap = ref<Record<string, any>>({});
+
+/** 打印配置 */
+const printObj = ref({
+  id: 'printDivTag',
+  popTitle: '&nbsp;',
+  extraCss: '/print.css',
+  extraHead: '',
+  zIndex: 20_003,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  closable: true,
+  footer: false,
+  title: '打印流程',
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      return;
+    }
+
+    modalApi.lock();
+    try {
+      const { processInstanceId } = modalApi.getData<{
+        processInstanceId: string;
+      }>();
+      if (processInstanceId) {
+        await fetchPrintData(processInstanceId);
+      }
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+
+/** 获取打印数据 */
+async function fetchPrintData(id: string) {
+  printData.value = await getProcessInstancePrintData(id);
+  initPrintDataMap();
+  parseFormFields();
+}
+
+/** 解析表单字段 */
+function parseFormFields() {
+  if (!printData.value) return;
+
+  const formFieldsObj = decodeFields(
+    printData.value.processInstance.processDefinition?.formFields || [],
+  );
+  const processVariables = printData.value.processInstance.formVariables;
+  const res: any = [];
+
+  for (const item of formFieldsObj) {
+    const id = item.field;
+    const name = item.title;
+    const fieldKey = item.field as string;
+    const variable = processVariables[fieldKey];
+    let html = variable;
+
+    switch (item.type) {
+      case 'checkbox':
+      case 'radio':
+      case 'select': {
+        const options = item.options;
+        const temp: any = [];
+        if (Array.isArray(options)) {
+          if (Array.isArray(variable)) {
+            const labels = options
+              .filter((o: any) => variable.includes(o.value))
+              .map((o: any) => o.label);
+            temp.push(...labels);
+          } else {
+            const opt = options.find((o: any) => o.value === variable);
+            if (opt) {
+              temp.push(opt.label);
+            }
+          }
+        }
+        html = temp.join(',');
+        break;
+      }
+      case 'UploadImg': {
+        const imgEl = document.createElement('img');
+        imgEl.setAttribute('src', variable);
+        imgEl.setAttribute('style', 'max-width: 600px;');
+        html = imgEl.outerHTML;
+        break;
+      }
+      // TODO 更多表单打印展示
+    }
+
+    printDataMap.value[fieldKey] = html;
+    res.push({ id, name, html });
+  }
+
+  formFields.value = res;
+}
+
+/** 初始化打印数据映射 */
+function initPrintDataMap() {
+  if (!printData.value) return;
+
+  printDataMap.value.startUser =
+    printData.value.processInstance.startUser?.nickname || '';
+  printDataMap.value.startUserDept =
+    printData.value.processInstance.startUser?.deptName || '';
+  printDataMap.value.processName = printData.value.processInstance.name;
+  printDataMap.value.processNum = printData.value.processInstance.id;
+  printDataMap.value.startTime = formatDate(
+    printData.value.processInstance.startTime,
+  );
+  printDataMap.value.endTime = formatDate(
+    printData.value.processInstance.endTime,
+  );
+  printDataMap.value.processStatus = getDictLabel(
+    DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS,
+    printData.value.processInstance.status,
+  );
+  printDataMap.value.printUser = userName.value;
+  printDataMap.value.printTime = printTime.value;
+}
+
+/** 获取打印模板 HTML （TODO 需求实现配置打印模板） */
+function getPrintTemplateHTML() {
+  if (!printData.value?.printTemplateHtml) return '';
+
+  const parser = new DOMParser();
+  const doc = parser.parseFromString(
+    printData.value.printTemplateHtml,
+    'text/html',
+  );
+
+  // table 添加 border
+  const tables = doc.querySelectorAll('table');
+  tables.forEach((item) => {
+    item.setAttribute('border', '1');
+    item.setAttribute(
+      'style',
+      `${item.getAttribute('style') || ''}border-collapse:collapse;`,
+    );
+  });
+
+  // 替换 mentions
+  const mentions = doc.querySelectorAll('[data-w-e-type="mention"]');
+  mentions.forEach((item) => {
+    const htmlElement = item as HTMLElement;
+    const mentionId = JSON.parse(
+      decodeURIComponent(htmlElement.dataset.info ?? ''),
+    ).id;
+    item.innerHTML = printDataMap.value[mentionId] ?? '';
+  });
+
+  // 替换流程记录
+  const processRecords = doc.querySelectorAll(
+    '[data-w-e-type="process-record"]',
+  );
+  const processRecordTable: Element = document.createElement('table');
+
+  if (processRecords.length > 0) {
+    // 构建流程记录 html
+    processRecordTable.setAttribute('border', '1');
+    processRecordTable.setAttribute(
+      'style',
+      'width:100%;border-collapse:collapse;',
+    );
+
+    const headTr = document.createElement('tr');
+    const headTd = document.createElement('td');
+    headTd.setAttribute('colspan', '2');
+    headTd.setAttribute('width', 'auto');
+    headTd.setAttribute('style', 'text-align: center;');
+    headTd.innerHTML = '流程节点';
+    headTr.append(headTd);
+    processRecordTable.append(headTr);
+
+    printData.value?.tasks.forEach((item) => {
+      const tr = document.createElement('tr');
+      const td1 = document.createElement('td');
+      td1.innerHTML = item.name;
+      const td2 = document.createElement('td');
+      td2.innerHTML = item.description;
+      tr.append(td1);
+      tr.append(td2);
+      processRecordTable.append(tr);
+    });
+  }
+
+  processRecords.forEach((item) => {
+    item.innerHTML = processRecordTable.outerHTML;
+  });
+
+  // 返回 html
+  return doc.body.innerHTML;
+}
+</script>
+
+<template>
+  <Modal class="w-2/3">
+    <div id="printDivTag" class="break-all">
+      <!-- eslint-disable vue/no-v-html  使用自定义打印模板 -->
+      <div
+        v-if="printData?.printTemplateEnable"
+        v-html="getPrintTemplateHTML()"
+      ></div>
+      <div v-else-if="printData">
+        <h2 class="mb-3 text-center text-xl font-bold">
+          {{ printData.processInstance.name }}
+        </h2>
+        <div class="mb-2 text-right text-sm">
+          {{ `打印人员: ${userName}` }}
+        </div>
+        <div class="mb-2 flex justify-between text-sm">
+          <div>
+            {{ `流程编号: ${printData.processInstance.id}` }}
+          </div>
+          <div>{{ `打印时间: ${printTime}` }}</div>
+        </div>
+        <table class="mt-3 w-full border-collapse border border-gray-400">
+          <tbody>
+            <tr>
+              <td class="w-1/4 border border-gray-400 p-1.5">发起人</td>
+              <td class="w-1/4 border border-gray-400 p-1.5">
+                {{ printData.processInstance.startUser?.nickname }}
+              </td>
+              <td class="w-1/4 border border-gray-400 p-1.5">发起时间</td>
+              <td class="w-1/4 border border-gray-400 p-1.5">
+                {{ formatDate(printData.processInstance.startTime) }}
+              </td>
+            </tr>
+            <tr>
+              <td class="w-1/4 border border-gray-400 p-1.5">所属部门</td>
+              <td class="w-1/4 border border-gray-400 p-1.5">
+                {{ printData.processInstance.startUser?.deptName }}
+              </td>
+              <td class="w-1/4 border border-gray-400 p-1.5">流程状态</td>
+              <td class="w-1/4 border border-gray-400 p-1.5">
+                {{
+                  getDictLabel(
+                    DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS,
+                    printData.processInstance.status,
+                  )
+                }}
+              </td>
+            </tr>
+            <tr>
+              <td
+                class="w-full border border-gray-400 p-1.5 text-center"
+                colspan="4"
+              >
+                <h4>表单内容</h4>
+              </td>
+            </tr>
+            <tr v-for="item in formFields" :key="item.id">
+              <td class="w-1/5 border border-gray-400 p-1.5">
+                {{ item.name }}
+              </td>
+              <td class="w-4/5 border border-gray-400 p-1.5" colspan="3">
+                <div v-html="item.html"></div>
+              </td>
+            </tr>
+            <tr>
+              <td
+                class="w-full border border-gray-400 p-1.5 text-center"
+                colspan="4"
+              >
+                <h4>流程节点</h4>
+              </td>
+            </tr>
+            <tr v-for="item in printData.tasks" :key="item.id">
+              <td class="w-1/5 border border-gray-400 p-1.5">
+                {{ item.name }}
+              </td>
+              <td class="w-4/5 border border-gray-400 p-1.5" colspan="3">
+                {{ item.description }}
+                <div v-if="item.signPicUrl && item.signPicUrl.length > 0">
+                  <img class="h-10 w-[90px]" :src="item.signPicUrl" alt="" />
+                </div>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+    <template #footer>
+      <div class="flex justify-end gap-2">
+        <Button @click="modalApi.close()">取 消</Button>
+        <Button v-print="printObj" type="primary">打 印</Button>
+      </div>
+    </template>
+  </Modal>
+</template>

pnpm-lock.yaml

@@ -597,6 +597,9 @@ catalogs:
     vue-tsc:
       specifier: 2.2.10
       version: 2.2.10
+    vue3-print-nb:
+      specifier: ^0.1.4
+      version: 0.1.4
     vue3-signature:
       specifier: ^0.2.4
       version: 0.2.4
@@ -857,6 +860,9 @@ importers:
       vue-router:
         specifier: 'catalog:'
         version: 4.6.3(vue@3.5.22(typescript@5.9.3))
+      vue3-print-nb:
+        specifier: 'catalog:'
+        version: 0.1.4(typescript@5.9.3)
       vue3-signature:
         specifier: 'catalog:'
         version: 0.2.4(vue@3.5.22(typescript@5.9.3))
@@ -11330,6 +11336,9 @@ packages:
     peerDependencies:
       vue: ^3.5.17
 
+  vue3-print-nb@0.1.4:
+    resolution: {integrity: sha512-LExI7viEzplR6ZKQ2b+V4U0cwGYbVD4fut/XHvk3UPGlT5CcvIGs6VlwGp107aKgk6P8Pgx4rco3Rehv2lti3A==}
+
   vue3-signature@0.2.4:
     resolution: {integrity: sha512-XFwwFVK9OG3F085pKIq2SlNVqx32WdFH+TXbGEWc5FfEKpx8oMmZuAwZZ50K/pH2FgmJSE8IRwU9DDhrLpd6iA==}
     peerDependencies:
@@ -22022,6 +22031,12 @@ snapshots:
       is-plain-object: 3.0.1
       vue: 3.5.22(typescript@5.9.3)
 
+  vue3-print-nb@0.1.4(typescript@5.9.3):
+    dependencies:
+      vue: 3.5.22(typescript@5.9.3)
+    transitivePeerDependencies:
+      - typescript
+
   vue3-signature@0.2.4(vue@3.5.22(typescript@5.9.3)):
     dependencies:
       default-passive-events: 2.0.0

pnpm-workspace.yaml

@@ -217,6 +217,7 @@ catalog:
   vue-router: ^4.5.1
   vue-tippy: ^6.7.1
   vue-tsc: 2.2.10
+  vue3-print-nb: "^0.1.4"
   vue3-signature: ^0.2.4
   vuedraggable: ^4.1.0
   vxe-pc-ui: ^4.9.29