feat: 实现流程打印功能

src/api/bpm/processInstance/index.ts

@@ -108,3 +108,8 @@ export const getFormFieldsPermission = async (params: any) => {
 export const getProcessInstanceBpmnModelView = async (id: string) => {
   return await request.get({ url: '/bpm/process-instance/get-bpmn-model-view?id=' + id })
 }
+
+// 获取流程实例打印数据
+export const getProcessInstancePrintData = async (id: string) => {
+  return await request.get({ url: '/bpm/process-instance/get-print-data?processInstanceId=' + id })
+}

src/main.ts

@@ -45,6 +45,8 @@ import VueDOMPurifyHTML from 'vue-dompurify-html' // 解决v-html 的安全隐
 // wangeditor插件注册
 import {setupWangeditorPlugin} from "@/views/bpm/model/form/PrintTemplate";
 
+import print from 'vue3-print-nb' // 打印插件
+
 // 创建实例
 const setupAll = async () => {
   const app = createApp(App)
@@ -71,6 +73,8 @@ const setupAll = async () => {
 
   app.use(VueDOMPurifyHTML)
 
+  app.use(print)
+
   app.mount('#app')
 }
 

src/views/bpm/processInstance/detail/PrintDialog.vue

@@ -0,0 +1,107 @@
+<script setup lang="ts">
+import * as ProcessInstanceApi from '@/api/bpm/processInstance'
+import { useUserStore } from '@/store/modules/user'
+import { formatDate } from '@/utils/formatTime'
+
+const userStore = useUserStore()
+
+const visible = ref(false)
+const loading = ref(false)
+
+const printData = ref()
+const userName = computed(() => userStore.user.nickname ?? '')
+const printTime = ref(formatDate(new Date(), 'YYYY-MM-DD HH:mm'))
+
+const open = async (id) => {
+  loading.value = true
+  try {
+    printData.value = await ProcessInstanceApi.getProcessInstancePrintData(id)
+    console.log(printData.value)
+  } finally {
+    loading.value = false
+  }
+  visible.value = true
+}
+defineExpose({ open })
+
+const printObj = ref({
+  id: 'printDivTag',
+  popTitle: '&nbsp',
+  extraCss: '/print.css',
+  extraHead: '',
+  zIndex: 20003
+})
+</script>
+
+<template>
+  <el-dialog v-loading="loading" v-model="visible" :show-close="false">
+    <div id="printDivTag">
+      <div v-if="printData.printTemplateEnable" v-html="printData.printTemplateHtml"></div>
+      <div v-else>
+        <h2 class="text-center">{{ printData.processName }}</h2>
+        <div class="text-right text-15px">{{ '打印人员: ' + userName }}</div>
+        <div class="flex justify-between">
+          <div class="text-15px">{{ '流程编号: ' + printData.processInstanceId }}</div>
+          <div class="text-15px">{{ '打印时间: ' + printTime }}</div>
+        </div>
+        <table class="mt-20px w-100%" border="1" style="border-collapse: collapse">
+          <tbody>
+            <tr>
+              <td class="p-5px w-25%">发起人</td>
+              <td class="p-5px w-25%">{{ printData.startUser }}</td>
+              <td class="p-5px w-25%">发起时间</td>
+              <td class="p-5px w-25%">{{ printData.startTime }}</td>
+            </tr>
+            <tr>
+              <td class="p-5px w-25%">所属部门</td>
+              <td class="p-5px w-25%">{{ printData.startUserDept }}</td>
+              <td class="p-5px w-25%">流程状态</td>
+              <td class="p-5px w-25%">{{ printData.processStatusShow }}</td>
+            </tr>
+            <tr>
+              <td class="p-5px w-100% text-center" colspan="4">
+                <h4>表单内容</h4>
+              </td>
+            </tr>
+            <tr v-for="item in printData.formFields" :key="item.formId">
+              <td class="p-5px w-20%">
+                {{ item.formName }}
+              </td>
+              <td class="p-5px w-80%" colspan="3">
+                <div v-html="item.formValueShow"></div>
+              </td>
+            </tr>
+            <tr>
+              <td class="p-5px w-100% text-center" colspan="4">
+                <h4>流程节点</h4>
+              </td>
+            </tr>
+            <tr v-for="item in printData.approveNodes" :key="item.nodeId">
+              <td class="p-5px w-20%">
+                {{ item.nodeName }}
+              </td>
+              <td class="p-5px w-80%" colspan="3">
+                {{ item.nodeDesc }}
+                <div v-if="item.signUrl !== ''">
+                  <img class="w-90px h-40px" :src="item.signUrl" alt="" />
+                </div>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="visible = false">取 消</el-button>
+        <el-button type="primary" v-print="printObj"> 打 印</el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss">
+table {
+  border-collapse: collapse;
+}
+</style>

src/views/bpm/processInstance/detail/index.vue

@@ -128,6 +128,7 @@
       </el-scrollbar>
     </div>
   </ContentWrap>
+  <PrintDialog ref="printRef" />
 </template>
 <script lang="ts" setup>
 import { formatDate } from '@/utils/formatTime'
@@ -149,6 +150,7 @@ import runningSvg from '@/assets/svgs/bpm/running.svg'
 import approveSvg from '@/assets/svgs/bpm/approve.svg'
 import rejectSvg from '@/assets/svgs/bpm/reject.svg'
 import cancelSvg from '@/assets/svgs/bpm/cancel.svg'
+import PrintDialog from './PrintDialog.vue'
 
 defineOptions({ name: 'BpmProcessInstanceDetail' })
 const props = defineProps<{
@@ -298,8 +300,9 @@ const refresh = () => {
   getDetail()
 }
 
-const handlePrint = () => {
-  // TODO 打印
+const printRef = ref()
+const handlePrint = async () => {
+  printRef.value.open(props.id)
 }
 
 /** 当前的Tab */