From 31ab2edfa500364818d2cc2c30acc1f4ae5b8dac Mon Sep 17 00:00:00 2001
From: zhouwx <1175765986@qq.com>
Date: 星期二, 20 八月 2024 17:25:30 +0800
Subject: [PATCH] bug修改
---
src/views/hazardousChemicals/electronicWarehouse/components/viewQR.vue | 57 ++++++++++++++++++++++++++++++++++++++++++++++++++++-----
1 files changed, 52 insertions(+), 5 deletions(-)
diff --git a/src/views/hazardousChemicals/electronicWarehouse/components/viewQR.vue b/src/views/hazardousChemicals/electronicWarehouse/components/viewQR.vue
index a7dd3b3..a8d90a8 100644
--- a/src/views/hazardousChemicals/electronicWarehouse/components/viewQR.vue
+++ b/src/views/hazardousChemicals/electronicWarehouse/components/viewQR.vue
@@ -7,11 +7,16 @@
:close-on-press-escape="false"
:close-on-click-modal="false"
>
+ <div style="display: flex;flex-direction: column;align-items: flex-end">
+ <el-button type="primary" style="margin-bottom: 5px" @click="printCode">打印</el-button>
+ </div>
<el-card style="max-width: 480px">
- <div style="display: flex;flex-direction: column;align-items: center;font-size: 20px;font-weight: 600">
- <span>{{title}}</span>
- <vue-qr :size="150" :margin="0" :auto-color="true" :dot-scale="1" :text="state.form.code" style="margin: 10px 0 10px 0"></vue-qr>
- <span>{{state.form.code}}</span>
+ <div :id="state.form.code">
+ <div style="display: flex;flex-direction: column;align-items: center;font-size: 16px;">
+ <span>{{title}}</span>
+ <vue-qr :size="85" :margin="0" :auto-color="true" :dot-scale="1" :text="state.form.code" style="margin: 10px 0 10px 0"></vue-qr>
+ <span>{{state.form.code}}</span>
+ </div>
</div>
</el-card>
</el-dialog>
@@ -39,13 +44,55 @@
title.value = value.hazmatBasic.name + ' ' + '—' + ' '+ value.hazmatBasic.productSn
}
- state.form = value;
+ state.form = JSON.parse(JSON.stringify(value));
dialogVisible.value = true;
}
const handleClose = () => {
dialogVisible.value = false;
emit("getList")
}
+const printCode = () => {
+ let data = []
+ data = [state.form]
+ let qrCodes=''
+ for(let index in data){
+ console.log(index,'index')
+ qrCodes+=`<div class="my-list-col"><div class="centered-content">${document.getElementById(data[index].code).innerHTML}</div></div>`
+ }
+ const printContent=document.createElement('div')
+ printContent.innerHTML=qrCodes
+
+ //创建一个新的隐藏的iframe元素
+ const printFrame =document.createElement('iframe')
+ printFrame.style.display='none'
+ document.body.appendChild(printFrame)
+
+ const printDocument=printFrame.contentWindow.document
+ printDocument.open()
+ printDocument.write(`
+ <html>
+ <head>
+ <title>Print</title>
+ <style>
+ @media print {
+ .page-break { page-break-after:always;} /* 定义分页符格式*/
+ .centered-content { text-align:center;} /* 居中对齐内容*/
+ @page { size:50mm 40mm;margin:0mm; }
+ }
+ </style>
+ </head>
+ <body style='margin:0;padding:0;'>${printContent.innerHTML}</body>
+ </html>
+ `)
+ printDocument.close()
+ //在打印窗口中调用打印功能
+ console.log('printFrame.contentWindow.document.body.style',printFrame.contentWindow.document.body.style)
+ printFrame.contentWindow.print()
+ //移除隐藏的iframe元素
+ document.body.removeChild(printFrame)
+ // handleClose()
+}
+
defineExpose({
openDialog
});
--
Gitblit v1.9.2