feat: 表单打印

package.json

@@ -20,6 +20,8 @@
     "lint:lint-staged": "lint-staged"
   },
   "dependencies": {
+    "qrcode": "1",
+    "@chenfengyuan/vue-qrcode": "2",
     "@codemirror/lang-cpp": "^6.0.2",
     "@codemirror/lang-javascript": "^6.2.2",
     "@codemirror/lang-json": "^6.0.1",

src/styles/lance-element-ui.scss

@@ -44,6 +44,11 @@
 		width: 16px;
 		height: 16px;
 	}
+	&.self-position {
+		.el-dialog__body {
+			position: relative;
+		}
+	}
 
 	.el-dialog__body {
 		//height: auto;

src/views/approve/components/approvedContent.vue

@@ -17,7 +17,12 @@
 				<div class="flow-header-box">
 					<div class="flow-no">编号：{{ currentTaskRow.instanceId }}</div>
 					<div class="action-area">
-						<div class="action-item"></div>
+						<div class="action-item" @click="openTest">
+							{{ printerVisible }}
+							<el-tooltip effect="dark" content="打印" placement="bottom">
+								<el-icon :style="{ color: 'var(--el-color-primary)' }" :size="16"><Printer /> </el-icon>
+							</el-tooltip>
+						</div>
 					</div>
 				</div>
 				<!-- 2、内容体 -->
@@ -214,8 +219,12 @@
 
 		<!-- 回退弹窗 -->
 		<rollback-dialog v-if="rollbackVisible" v-model="rollbackVisible" :task-id="taskId" @success-cb="closeDetailEv"></rollback-dialog>
+
 		<!-- 查看子流程表单 -->
 		<ViewProcessDialog v-if="processInfo.visible" v-model="processInfo.visible" :process-info="processInfo" />
+
+		<!-- 打印审批流 -->
+		<printer-dialog v-if="printerVisible" ref="PrinterDialog" v-model="printerVisible"></printer-dialog>
 	</div>
 </template>
 
@@ -227,7 +236,7 @@ import FlowStatusStamp from '@/components/Flow/FlowStatusStamp.vue'
 import FlowStatusTag from '@/components/Flow/FlowStatusTag.vue'
 import FlowNodeAvatar from '@/components/Flow/FlowNodeAvatar.vue'
 import FlowTypeDot from '@/components/Flow/FlowTypeDot.vue'
-import { ChatLineSquare, Check, Close, Switch, DArrowLeft, Plus, Minus, More } from '@element-plus/icons-vue'
+import { ChatLineSquare, Check, Close, Switch, DArrowLeft, Plus, Minus, More, Printer } from '@element-plus/icons-vue'
 import { processTaskApprovalInfo, processClaimTaskApi } from '@/api/flow/processTask'
 import { formatTimestamp } from '@/utils/datetime'
 import ReviewDialog from './reviewDialog'
@@ -237,6 +246,7 @@ import DeliverToReviewDialog from './deliverToReviewDialog'
 import LoseSignDialog from './loseSignDialog'
 import RollbackDialog from './rollbackDialog'
 import ViewProcessDialog from './ViewProcessDialog.vue'
+import PrinterDialog from './printer.vue'
 import { storeToRefs } from 'pinia'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { erFormPreview } from '@ER/formEditor'
@@ -287,8 +297,10 @@ const consentOrRefuseVisible = ref(false)
 const deliverToReviewVisible = ref(false)
 const loseSignVisible = ref(false)
 const rollbackVisible = ref(false)
+const printerVisible = ref(false)
 const allowReject = ref(false)
 const allowRevocation = ref(false)
+
 // 各种操作弹窗显示隐藏 end
 const activeData = ref([])
 const currentType = ref(null)
@@ -565,6 +577,10 @@ const claimTaskEv = async () => {
 		})
 }
 
+const openTest = () => {
+	printerVisible.value = !printerVisible.value
+}
+
 /**
  * 监听同级子组件的instanceId的值变化 这里可能也有实例Id
  * 1、监听instanceId的值变化，如果值有变化，则重新获取审批详情
@@ -599,7 +615,7 @@ watch(
 	// 通过、不通过样式
 	.flow-status-stamp {
 		position: absolute;
-		right: 10px;
+		right: 60px;
 		top: 10px;
 		z-index: 99;
 	}
@@ -620,8 +636,8 @@ watch(
 			gap: 4px;
 			.action-item {
 				cursor: pointer;
-				padding: 4px;
-				border-radius: 6px;
+				//padding: 4px;
+				//border-radius: 6px;
 				width: fit-content;
 				height: fit-content;
 			}

src/views/approve/components/printer.vue

@@ -0,0 +1,84 @@
+<script setup>
+import { computed } from 'vue'
+import VueQrcode from '@chenfengyuan/vue-qrcode'
+
+const $myEmit = defineEmits(['update:modelValue'])
+const props = defineProps({
+	modelValue: {
+		type: Boolean,
+		default: false
+	},
+	taskId: {
+		type: String,
+		default: undefined
+	}
+})
+
+const closeDialog = () => {
+  $myEmit('update:modelValue', false)
+}
+
+const visibleDialog = computed({
+	get() {
+		return props.modelValue
+	},
+	set(val) {
+		$myEmit('update:modelValue', val)
+	}
+})
+
+const submitForm = () => {}
+
+const tableData = [
+	{ name: '提交人', date: '123' },
+	{ name: '姓名', date: '1234' },
+	{ name: '手机号', date: '111111-2' }
+]
+</script>
+
+<template>
+	<el-dialog v-model="visibleDialog" class="le-dialog self-position" title="打印预览" width="700" destroy-on-close :close-on-click-modal="false">
+		<div class="w-full text-[16px]">
+			<div class="mb-[36px] text-center text-[22px] font-medium">请假审批</div>
+
+			<div class="leading-7">审批编号: <span class="pl-[6px]">1827265490572361730</span></div>
+			<div class="leading-7">提交时间: <span class="pl-[6px]"> 2024-08-24 16:43:36</span></div>
+
+			<div class="text-center flex-col-center absolute top-[20px] right-[24px]">
+				<span class="mb-[3px] text-[14px] text-[#909399] inline-block">扫码查看流程</span>
+
+				<div>
+					<VueQrcode
+						value="www.baidu.com"
+						:options="{
+							width: 100,
+							margin: 0
+						}"
+					></VueQrcode>
+				</div>
+			</div>
+
+			<div class="my-[12px]">
+				<el-table :data="tableData" :show-header="false" style="width: 100%; font-size: 16px" border>
+					<el-table-column prop="name" label="Name" />
+					<el-table-column prop="date" label="Date" />
+				</el-table>
+			</div>
+
+			<div class="flex justify-between">
+				<div class="leading-7">打印人: <span class="pl-[6px]"> admin </span></div>
+				<div class="leading-7">打印时间: <span class="pl-[6px]"> 2024-08-24 16:43:36 </span></div>
+			</div>
+		</div>
+		<template #footer>
+			<span class="dialog-footer">
+				<el-button class="dialog-btn" @click="closeDialog">取 消</el-button>
+				<el-button type="primary" class="dialog-btn" @click="submitForm">打 印</el-button>
+			</span>
+		</template>
+	</el-dialog>
+</template>
+
+<style scoped lang="scss">
+
+</style>