mcarquigny
3 months ago
4 changed files with 129 additions and 32 deletions
@ -0,0 +1,103 @@ |
|||||
|
<template> |
||||
|
<q-page padding> |
||||
|
<!-- content --> |
||||
|
PRINT SETTINGS |
||||
|
<q-btn @click="openPrintPage">Open Print Page</q-btn> |
||||
|
<pre> |
||||
|
{{items}} |
||||
|
</pre> |
||||
|
</q-page> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import QRCode from 'qrcode' |
||||
|
|
||||
|
export default { |
||||
|
name: 'PrintSettingsPage', |
||||
|
data () { |
||||
|
return { |
||||
|
items: null, |
||||
|
qrCodes: [] |
||||
|
} |
||||
|
}, |
||||
|
computed: { |
||||
|
urls () { |
||||
|
// get root url of current page |
||||
|
let rootUrl = window.location.origin |
||||
|
return this.items.map(item => { |
||||
|
return { |
||||
|
url: `${rootUrl}/item/${item.ref}`, |
||||
|
name: item.name, |
||||
|
ref: item.ref |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
}, |
||||
|
async created () { |
||||
|
let items = await this.$pb.collection('stock').getList(1, 24, { |
||||
|
fields: 'ref,name', |
||||
|
filter: 'deleted = false', |
||||
|
sort: '-created' |
||||
|
}) |
||||
|
this.items = items.items |
||||
|
}, |
||||
|
methods: { |
||||
|
async openPrintPage () { |
||||
|
for (let url of this.urls) { |
||||
|
this.qrCodes.push( |
||||
|
{ qr: await QRCode.toDataURL(url.url, { width: 200, margin: 0, border: 0 }), name: url.name, ref: url.ref } |
||||
|
) |
||||
|
} |
||||
|
const printWindow = window.open('', '_blank') |
||||
|
const printContent = ` |
||||
|
<html> |
||||
|
<head> |
||||
|
<style> |
||||
|
@page { size: A4; margin: 1cm; } |
||||
|
body { margin: 1cm; } |
||||
|
.grid-container { |
||||
|
display: grid; |
||||
|
grid-template-columns: repeat(3, 1fr); |
||||
|
grid-template-rows: repeat(4, 1fr); |
||||
|
gap: 10px; |
||||
|
height: 100%; |
||||
|
page-break-after: always; |
||||
|
} |
||||
|
.grid-item { |
||||
|
border: 1px solid gray; |
||||
|
border-radius: 8px; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
padding: 10px; |
||||
|
box-sizing: border-box; |
||||
|
} |
||||
|
</style> |
||||
|
</head> |
||||
|
<body> |
||||
|
${this.qrCodes.reduce((acc, qr, index) => { |
||||
|
if (index % 12 === 0) { |
||||
|
acc.push([]) |
||||
|
} |
||||
|
acc[acc.length - 1].push(qr) |
||||
|
return acc |
||||
|
}, []).map((group, groupIndex) => ` |
||||
|
<div class="grid-container"> |
||||
|
${group.map(qr => ` |
||||
|
<div class="grid-item"> |
||||
|
<img src="${qr.qr}"/> |
||||
|
<span>${qr.name}</span> |
||||
|
</div> |
||||
|
`).join('')} |
||||
|
</div> |
||||
|
`).join('')} |
||||
|
</body> |
||||
|
</html> |
||||
|
` |
||||
|
printWindow.document.write(printContent) |
||||
|
printWindow.document.close() |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
Loading…
Reference in new issue