|
|
@@ -1,8 +1,8 @@
|
|
|
<script setup>
|
|
|
import { computed } from 'vue'
|
|
|
+import printJS from 'print-js'
|
|
|
import VueQrcode from '@chenfengyuan/vue-qrcode'
|
|
|
|
|
|
-const $myEmit = defineEmits(['update:modelValue'])
|
|
|
const props = defineProps({
|
|
|
modelValue: {
|
|
|
type: Boolean,
|
|
|
@@ -14,9 +14,7 @@ const props = defineProps({
|
|
|
}
|
|
|
})
|
|
|
|
|
|
-const closeDialog = () => {
|
|
|
- $myEmit('update:modelValue', false)
|
|
|
-}
|
|
|
+const $myEmit = defineEmits(['update:modelValue'])
|
|
|
|
|
|
const visibleDialog = computed({
|
|
|
get() {
|
|
|
@@ -27,7 +25,23 @@ const visibleDialog = computed({
|
|
|
}
|
|
|
})
|
|
|
|
|
|
-const submitForm = () => {}
|
|
|
+const submitForm = () => {
|
|
|
+ printJS({
|
|
|
+ printable: 'printJS-form',
|
|
|
+ type: 'html',
|
|
|
+ scanStyles: true, // 是否使用html附带的样式
|
|
|
+ targetStyles: ['*'], // 如果上面是true, 这里就得这么写，表示使用全部样式
|
|
|
+ style: `
|
|
|
+ @page { margin:0 10mm }, // 打印时去掉眉页眉尾
|
|
|
+ .print-table { margin-top: 50px; },
|
|
|
+ @media print { .page-break { page-break-before: always; } } // 强制打印分页
|
|
|
+ `
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+const closeDialog = () => {
|
|
|
+ $myEmit('update:modelValue', false)
|
|
|
+}
|
|
|
|
|
|
const tableData = [
|
|
|
{ name: '提交人', date: '123' },
|
|
|
@@ -38,14 +52,14 @@ const tableData = [
|
|
|
|
|
|
<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 id="printJS-form" 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>
|
|
|
+ <span class="mb-[3px] text-[#909399] inline-block">扫码查看流程</span>
|
|
|
|
|
|
<div>
|
|
|
<VueQrcode
|
|
|
@@ -59,10 +73,36 @@ const tableData = [
|
|
|
</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>
|
|
|
+ <table class="print-table">
|
|
|
+ <tr>
|
|
|
+ <th>提交人</th>
|
|
|
+ <td class="submitter">admin</td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <th>签名</th>
|
|
|
+ <td>吉苗</td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <th>禁用</th>
|
|
|
+ <td>禁用</td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <th>隐藏</th>
|
|
|
+ <td>隐藏</td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <th>手机号</th>
|
|
|
+ <td>18888888888</td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <th>姓名</th>
|
|
|
+ <td>张三</td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <th>审批结果</th>
|
|
|
+ <td>审批结果</td>
|
|
|
+ </tr>
|
|
|
+ </table>
|
|
|
</div>
|
|
|
|
|
|
<div class="flex justify-between">
|
|
|
@@ -80,5 +120,29 @@ const tableData = [
|
|
|
</template>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
-
|
|
|
+.print-table {
|
|
|
+ width: 100%;
|
|
|
+ border-collapse: collapse;
|
|
|
+ border-radius: 10px; /* 设置表格的圆角半径为10px */
|
|
|
+}
|
|
|
+th,
|
|
|
+td {
|
|
|
+ border: 1px solid black;
|
|
|
+ padding: 12px;
|
|
|
+ text-align: left;
|
|
|
+}
|
|
|
+th {
|
|
|
+ background-color: #f2f2f2;
|
|
|
+}
|
|
|
+tr:nth-child(even) {
|
|
|
+ background-color: #f9f9f9;
|
|
|
+}
|
|
|
+.submitter {
|
|
|
+ font-weight: bold;
|
|
|
+}
|
|
|
+/* 设置第一列的宽度为200px */
|
|
|
+th:first-child,
|
|
|
+td:first-child {
|
|
|
+ width: 200px; /* 设置第一列的宽度 */
|
|
|
+}
|
|
|
</style>
|
luoyali