|
@@ -10,66 +10,85 @@
|
|
|
<img src="../../../../../assets/u2855.svg" alt="">
|
|
|
<span>已领取</span>
|
|
|
</div> -->
|
|
|
- <el-form :model="formData" label-width="110px" label-position="top">
|
|
|
- <el-row :gutter="16">
|
|
|
- <el-col :span="8">
|
|
|
- <el-form-item label="借用单编号">
|
|
|
- <el-input v-model="formData.application_no" disabled />
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :span="8">
|
|
|
- <el-form-item label="借用人">
|
|
|
- <el-input v-model="name" disabled />
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :span="8">
|
|
|
- <el-form-item label="学号/工号">
|
|
|
- <el-input v-model="userCode" disabled />
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :span="8">
|
|
|
- <el-form-item label="借用性质">
|
|
|
- <el-input v-model="borrowType" disabled />
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :span="8">
|
|
|
- <el-form-item label="借出时间">
|
|
|
- <el-input v-model="formData.expected_start_time" disabled />
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :span="8">
|
|
|
- <el-form-item label="预计归还时间">
|
|
|
- <el-input v-model="formData.expected_end_time" disabled />
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
-
|
|
|
- <div style="margin: 16px 0 8px 0; font-weight: bold">借用明细表</div>
|
|
|
- <el-table :data="filteredItems" border style="width: 100%">
|
|
|
- <el-table-column type="index" label="序号" width="60" align="center" />
|
|
|
- <el-table-column prop="device_code" label="设备编号" align="center" />
|
|
|
- <el-table-column prop="device_category_name" label="设备分类" align="center" />
|
|
|
- <el-table-column prop="device_name" label="设备名称" align="center" />
|
|
|
- <el-table-column prop="quantity" label="借用数量" align="center" />
|
|
|
- <el-table-column prop="device_specification" label="规格型号" align="center" />
|
|
|
- <el-table-column prop="device_storage_location" label="存放位置" align="center">
|
|
|
- <template #default="scope">
|
|
|
- {{ scope.row.device_storage_location || '-' }}
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column prop="remark" label="备注" align="center">
|
|
|
- <template #default="scope">
|
|
|
- {{ scope.row.remark || '-' }}
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- </el-table>
|
|
|
-
|
|
|
- <div style="margin: 16px 0 8px 0; font-weight: bold">配件信息</div>
|
|
|
- <el-input v-model="formData.accessories" disabled />
|
|
|
-
|
|
|
- <div style="margin: 16px 0 8px 0; font-weight: bold">备注</div>
|
|
|
- <el-input v-model="formData.remark" type="textarea" disabled />
|
|
|
- </el-form>
|
|
|
+ <div ref="printContent" class="print-container">
|
|
|
+ <el-form :model="formData" label-width="110px" label-position="top" class="print-form">
|
|
|
+ <el-row :gutter="16">
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="借用单编号">
|
|
|
+ <div class="form-content">{{ formData.application_no }}</div>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="借用人">
|
|
|
+ <div class="form-content">{{ name }}</div>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="学号/工号">
|
|
|
+ <div class="form-content">{{ userCode }}</div>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row :gutter="16">
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="借用性质">
|
|
|
+ <div class="form-content">{{ borrowType }}</div>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="借出时间">
|
|
|
+ <div class="form-content">{{ formData.expected_start_time }}</div>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="预计归还时间">
|
|
|
+ <div class="form-content">{{ formData.expected_end_time }}</div>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <div class="detail-title">借用明细表</div>
|
|
|
+ <div class="table-container">
|
|
|
+ <table class="detail-table">
|
|
|
+ <thead>
|
|
|
+ <tr>
|
|
|
+ <th width="60">序号</th>
|
|
|
+ <th>设备编号</th>
|
|
|
+ <th>设备分类</th>
|
|
|
+ <th>设备名称</th>
|
|
|
+ <th>借用数量</th>
|
|
|
+ <th>规格型号</th>
|
|
|
+ <th>存放位置</th>
|
|
|
+ <th>备注</th>
|
|
|
+ </tr>
|
|
|
+ </thead>
|
|
|
+ <tbody>
|
|
|
+ <tr v-for="(item, index) in filteredItems" :key="index">
|
|
|
+ <td>{{ index + 1 }}</td>
|
|
|
+ <td>{{ item.device_code }}</td>
|
|
|
+ <td>{{ item.device_category_name }}</td>
|
|
|
+ <td>{{ item.device_name }}</td>
|
|
|
+ <td>{{ item.quantity }}</td>
|
|
|
+ <td>{{ item.device_specification }}</td>
|
|
|
+ <td>{{ item.device_storage_location || '-' }}</td>
|
|
|
+ <td>{{ item.remark || '-' }}</td>
|
|
|
+ </tr>
|
|
|
+ </tbody>
|
|
|
+ </table>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="accessories-info">
|
|
|
+ <div class="detail-title">配件信息</div>
|
|
|
+ <div class="form-content">{{ formData.accessories || '-' }}</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="remark-info">
|
|
|
+ <div class="detail-title">备注</div>
|
|
|
+ <div class="form-content">{{ formData.remark || '-' }}</div>
|
|
|
+ </div>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+
|
|
|
|
|
|
|
|
|
<template #footer>
|
|
@@ -81,6 +100,7 @@
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
import { ref, defineProps, defineEmits, watch, computed } from 'vue';
|
|
|
+import { ElMessage } from 'element-plus';
|
|
|
|
|
|
const props = defineProps<{
|
|
|
visible: boolean;
|
|
@@ -146,8 +166,203 @@ const handleClose = () => {
|
|
|
emit('update:modelValue', formData.value);
|
|
|
};
|
|
|
|
|
|
-const handlePrint = () => {
|
|
|
+/* const handlePrint = () => {
|
|
|
window.print();
|
|
|
+}; */
|
|
|
+// 定义打印区域的ref
|
|
|
+const printContent = ref<HTMLElement | null>(null);
|
|
|
+
|
|
|
+const handlePrint = () => {
|
|
|
+ try {
|
|
|
+ if (!printContent.value) {
|
|
|
+ ElMessage.error('打印区域未找到');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 1. 克隆打印区域内容
|
|
|
+ const printElement = printContent.value.cloneNode(true);
|
|
|
+
|
|
|
+ // 2. 创建打印专用iframe
|
|
|
+ const iframe = document.createElement('iframe');
|
|
|
+ iframe.style.position = 'absolute';
|
|
|
+ iframe.style.width = '0px';
|
|
|
+ iframe.style.height = '0px';
|
|
|
+ iframe.style.left = '-9999px';
|
|
|
+ document.body.appendChild(iframe);
|
|
|
+
|
|
|
+ // 确保iframe和其document已经准备好
|
|
|
+ if (!iframe.contentWindow || !iframe.contentWindow.document) {
|
|
|
+ throw new Error('iframe初始化失败');
|
|
|
+ }
|
|
|
+
|
|
|
+ const printDocument = iframe.contentWindow.document;
|
|
|
+
|
|
|
+ // 3. 添加打印样式
|
|
|
+ printDocument.write(`
|
|
|
+ <!DOCTYPE html>
|
|
|
+ <html>
|
|
|
+ <head>
|
|
|
+ <meta charset="utf-8">
|
|
|
+ <title>设备借用单打印</title>
|
|
|
+ <style>
|
|
|
+ /* 打印样式 */
|
|
|
+ @media print {
|
|
|
+ body {
|
|
|
+ font-family: Arial, sans-serif;
|
|
|
+ padding: 20px;
|
|
|
+ margin: 0;
|
|
|
+ }
|
|
|
+ .no-print {
|
|
|
+ display: none !important;
|
|
|
+ }
|
|
|
+ /* 表单布局优化 */
|
|
|
+ .el-form {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ .el-row {
|
|
|
+ display: flex !important;
|
|
|
+ flex-wrap: nowrap !important;
|
|
|
+ margin: 0 -8px;
|
|
|
+ }
|
|
|
+ .el-col {
|
|
|
+ padding: 0 8px;
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+ /* 表单项样式 */
|
|
|
+ .el-form-item {
|
|
|
+ margin-bottom: 12px;
|
|
|
+ page-break-inside: avoid;
|
|
|
+ }
|
|
|
+ .el-form-item__label {
|
|
|
+ font-weight: bold;
|
|
|
+ margin-bottom: 4px;
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ .el-form-item__content {
|
|
|
+ line-height: 1.5;
|
|
|
+ }
|
|
|
+ /* 表格样式优化 */
|
|
|
+ table {
|
|
|
+ page-break-inside: auto;
|
|
|
+ width: 100% !important;
|
|
|
+ border-collapse: collapse;
|
|
|
+ margin: 20px 0;
|
|
|
+ table-layout: fixed;
|
|
|
+ }
|
|
|
+ tr {
|
|
|
+ page-break-inside: avoid;
|
|
|
+ page-break-after: auto;
|
|
|
+ }
|
|
|
+ th, td {
|
|
|
+ border: 1px solid #000;
|
|
|
+ padding: 8px;
|
|
|
+ text-align: center;
|
|
|
+ word-break: break-all;
|
|
|
+ }
|
|
|
+ /* 隐藏Element Plus的默认样式 */
|
|
|
+ .el-input__inner {
|
|
|
+ border: none !important;
|
|
|
+ padding: 0 !important;
|
|
|
+ }
|
|
|
+ .el-form--label-top .el-form-item__label {
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+ /* 标题样式 */
|
|
|
+ h2 {
|
|
|
+ text-align: center;
|
|
|
+ margin-bottom: 30px;
|
|
|
+ font-size: 24px;
|
|
|
+ }
|
|
|
+ /* 明细表标题 */
|
|
|
+ .detail-title {
|
|
|
+ font-weight: bold;
|
|
|
+ margin: 20px 0 10px;
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+ /* 配件信息和备注 */
|
|
|
+ .accessories-info,
|
|
|
+ .remark-info {
|
|
|
+ margin-top: 20px;
|
|
|
+ }
|
|
|
+ .accessories-info .el-input,
|
|
|
+ .remark-info .el-input {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ /* 屏幕预览样式 */
|
|
|
+ @media screen {
|
|
|
+ body {
|
|
|
+ background-color: #fff;
|
|
|
+ padding: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+ </head>
|
|
|
+ <body>
|
|
|
+ <h2 style="text-align: center; margin-bottom: 30px;">设备借用单</h2>
|
|
|
+ </body>
|
|
|
+ </html>
|
|
|
+ `);
|
|
|
+
|
|
|
+ // 4. 插入内容并添加打印类
|
|
|
+ const body = printDocument.body;
|
|
|
+ body.appendChild(printElement);
|
|
|
+
|
|
|
+ // 5. 添加打印按钮(仅屏幕显示)
|
|
|
+ const printBtn = printDocument.createElement('button');
|
|
|
+ printBtn.className = 'no-print';
|
|
|
+ printBtn.textContent = '打印';
|
|
|
+ printBtn.style.cssText = `
|
|
|
+ position: fixed;
|
|
|
+ top: 20px;
|
|
|
+ right: 20px;
|
|
|
+ padding: 10px 20px;
|
|
|
+ background: #409EFF;
|
|
|
+ color: white;
|
|
|
+ border: none;
|
|
|
+ border-radius: 4px;
|
|
|
+ cursor: pointer;
|
|
|
+ z-index: 9999;
|
|
|
+ `;
|
|
|
+ printBtn.onclick = () => {
|
|
|
+ try {
|
|
|
+ if (iframe.contentWindow) {
|
|
|
+ iframe.contentWindow.print();
|
|
|
+ } else {
|
|
|
+ throw new Error('打印窗口未准备好');
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ console.error('打印过程出错:', error);
|
|
|
+ ElMessage.error('打印失败,请重试');
|
|
|
+ }
|
|
|
+ };
|
|
|
+ body.appendChild(printBtn);
|
|
|
+
|
|
|
+ // 6. 自动触发打印
|
|
|
+ if (iframe.contentWindow) {
|
|
|
+ iframe.contentWindow.focus();
|
|
|
+ setTimeout(() => {
|
|
|
+ try {
|
|
|
+ if (iframe.contentWindow) {
|
|
|
+ iframe.contentWindow.print();
|
|
|
+ } else {
|
|
|
+ throw new Error('打印窗口未准备好');
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ console.error('打印过程出错:', error);
|
|
|
+ ElMessage.error('打印失败,请重试');
|
|
|
+ } finally {
|
|
|
+ // 确保iframe被移除
|
|
|
+ document.body.removeChild(iframe);
|
|
|
+ }
|
|
|
+ }, 500);
|
|
|
+ } else {
|
|
|
+ throw new Error('打印窗口未准备好');
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ console.error('打印准备过程出错:', error);
|
|
|
+ ElMessage.error('打印准备失败,请重试');
|
|
|
+ }
|
|
|
};
|
|
|
</script>
|
|
|
|
|
@@ -157,25 +372,117 @@ const handlePrint = () => {
|
|
|
display: none;
|
|
|
}
|
|
|
}
|
|
|
-.title{
|
|
|
- display: flex;
|
|
|
- justify-content: flex-end;
|
|
|
- position: relative;
|
|
|
|
|
|
+.print-container {
|
|
|
+ padding: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.print-form {
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.form-content {
|
|
|
+ min-height: 20px;
|
|
|
+ line-height: 20px;
|
|
|
+ padding: 4px 0;
|
|
|
+}
|
|
|
+
|
|
|
+.detail-title {
|
|
|
+ font-weight: bold;
|
|
|
+ margin: 20px 0 10px;
|
|
|
+ font-size: 16px;
|
|
|
+}
|
|
|
+
|
|
|
+.table-container {
|
|
|
+ margin: 20px 0;
|
|
|
+ width: 100%;
|
|
|
+ overflow-x: auto;
|
|
|
+}
|
|
|
+
|
|
|
+.detail-table {
|
|
|
+ width: 100%;
|
|
|
+ border-collapse: collapse;
|
|
|
+ table-layout: fixed;
|
|
|
+}
|
|
|
+
|
|
|
+.detail-table th,
|
|
|
+.detail-table td {
|
|
|
+ border: 1px solid #000;
|
|
|
+ padding: 8px;
|
|
|
+ text-align: center;
|
|
|
+ word-break: break-all;
|
|
|
+}
|
|
|
+
|
|
|
+.detail-table th {
|
|
|
+ background-color: #f5f7fa;
|
|
|
+ font-weight: bold;
|
|
|
}
|
|
|
-.title span{
|
|
|
- position: absolute;
|
|
|
- right:10px ;
|
|
|
- bottom: 30%;
|
|
|
- align-self: flex-start;
|
|
|
- padding: 0px 0px 0px 0px;
|
|
|
- box-sizing: border-box;
|
|
|
- transform: rotate(315deg);
|
|
|
- font-family: "Impact Bold", "Impact Normal", "Impact", sans-serif;
|
|
|
- font-weight: 700;
|
|
|
- font-style: normal;
|
|
|
- font-size: 17px;
|
|
|
- color: #F77105;
|
|
|
+
|
|
|
+.accessories-info,
|
|
|
+.remark-info {
|
|
|
+ margin-top: 20px;
|
|
|
}
|
|
|
|
|
|
+.form-content {
|
|
|
+ /* border: 1px solid #dcdfe6; */
|
|
|
+ padding: 8px;
|
|
|
+ min-height: 32px;
|
|
|
+ line-height: 1.5;
|
|
|
+ border-radius: 4px;
|
|
|
+}
|
|
|
+
|
|
|
+@media print {
|
|
|
+ .print-container {
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .form-content {
|
|
|
+ border: none;
|
|
|
+ padding: 4px 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-form-item {
|
|
|
+ margin-bottom: 16px !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-form-item__label {
|
|
|
+ color: #000 !important;
|
|
|
+ line-height: 1.5 !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .detail-table th {
|
|
|
+ background-color: #fff !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 确保分页时表头重复 */
|
|
|
+ thead {
|
|
|
+ display: table-header-group;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 避免元素被分页截断 */
|
|
|
+ tr, .el-form-item, .accessories-info, .remark-info {
|
|
|
+ page-break-inside: avoid;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.title {
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+
|
|
|
+.title span {
|
|
|
+ position: absolute;
|
|
|
+ right: 10px;
|
|
|
+ bottom: 30%;
|
|
|
+ align-self: flex-start;
|
|
|
+ padding: 0;
|
|
|
+ box-sizing: border-box;
|
|
|
+ transform: rotate(315deg);
|
|
|
+ font-family: "Impact Bold", "Impact Normal", "Impact", sans-serif;
|
|
|
+ font-weight: 700;
|
|
|
+ font-style: normal;
|
|
|
+ font-size: 17px;
|
|
|
+ color: #F77105;
|
|
|
+}
|
|
|
</style>
|