| | |
|---|
| | | :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> |
|---|
| | |
|---|
| | | 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 |
|---|
| | | }); |
|---|
