123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488 |
- <template>
- <el-dialog
- v-model="dialogVisible"
- title="领取设备结算单"
- width="75%"
- :close-on-click-modal="false"
- @close="handleClose"
- >
- <!-- <div class="title">
- <img src="../../../../../assets/u2855.svg" alt="">
- <span>已领取</span>
- </div> -->
- <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>
- <el-button @click="handleClose">关闭</el-button>
- <el-button type="primary" @click="handlePrint">打印</el-button>
- </template>
- </el-dialog>
- </template>
- <script setup lang="ts">
- import { ref, defineProps, defineEmits, watch, computed } from 'vue';
- import { ElMessage } from 'element-plus';
- const props = defineProps<{
- visible: boolean;
- settlementData: any;
- modelValue: any;
- }>();
- const emit = defineEmits(['update:visible', 'update:modelValue']);
- const dialogVisible = ref(false);
- const formData = ref<any>({});
- watch(
- () => props.visible,
- (val) => {
- dialogVisible.value = val;
- if (val) {
- // 优先使用 modelValue,如果没有则使用 settlementData
- formData.value = props.modelValue || props.settlementData || {};
- }
- }
- );
- watch(
- () => props.modelValue,
- (val) => {
- console.log("val:::",val);
- if (val) {
- /* formData.value.app_user_borrower = val.borrower_info.user_code; */
- formData.value = val;
- console.log("formData.value:::",formData.value);
- }
- },
- { immediate: true }
- );
- const name = computed(() => {
- return formData.value?.app_user_borrower?.name || formData.value?.borrower_info?.name || '';
- });
- const userCode = computed(() => {
- return formData.value?.app_user_borrower?.user_code || formData.value?.borrower_info?.user_code || '';
- });
- const borrowType=computed(() => {
- return formData.value?.borrow_type_label || formData.value?.borrow_type || '';
- });
- interface DeviceItem {
- device_code: string;
- device_category_name: string;
- device_name: string;
- quantity: number;
- device_specification: string;
- device_storage_location?: string;
- remark?: string;
- }
- const filteredItems = computed(() => {
- return formData.value?.items?.filter((item: DeviceItem | null) => item?.device !== null) || [];
- });
- const handleClose = () => {
- emit('update:visible', false);
- emit('update:modelValue', formData.value);
- };
- /* 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>
- <style scoped>
- @media print {
- .el-dialog__footer {
- display: none;
- }
- }
- .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;
- }
- .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>
|