aizuda-web-vue3/src/views/approve/components/printer.vue

<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>