- Cataloghi: parte finale... prima bozza 9 dic
This commit is contained in:
Surya Paolo
@@ -1,8 +1,9 @@
|
||||
import {
|
||||
defineComponent, onMounted, PropType, computed, ref, toRef, watch,
|
||||
nextTick,
|
||||
} from 'vue'
|
||||
|
||||
import { IColGridTable, IElemText, IElementiScheda, IImgGallery, ILabelValue, IMyCard, IMyElem, IMyPage, IMyScheda, IOperators, ISchedaSingola } from '@src/model'
|
||||
import { ICatalogo, IColGridTable, IElemText, IElementiScheda, IImgGallery, ILabelValue, IMyCard, IMyElem, IMyPage, IMyScheda, IOperators, ISchedaSingola } from '@src/model'
|
||||
import { useGlobalStore } from '@store/globalStore'
|
||||
|
||||
import { CImgTitle } from '@/components/CImgTitle'
|
||||
@@ -37,6 +38,9 @@ import { costanti } from '@costanti'
|
||||
import objectId from '@src/js/objectId'
|
||||
import { useProducts } from '@src/store/Products'
|
||||
|
||||
import html2pdf from 'html2pdf.js'
|
||||
|
||||
|
||||
export default defineComponent({
|
||||
name: 'CMyEditElem',
|
||||
components: {
|
||||
@@ -287,10 +291,10 @@ export default defineComponent({
|
||||
recscheda.scheda.etichette!.bestseller = {
|
||||
show: false,
|
||||
primiNInClassifica: 0,
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
if ((!recscheda.scheda?.barcode || !recscheda.scheda?.barcode.font)) {
|
||||
recscheda.scheda.barcode = {
|
||||
show: false,
|
||||
@@ -888,10 +892,135 @@ export default defineComponent({
|
||||
}
|
||||
}
|
||||
|
||||
function toggleDebug() {
|
||||
myel.value.catalogo!.indebug = !myel.value.catalogo!.indebug
|
||||
}
|
||||
|
||||
const preparePDF = async () => {
|
||||
myel.value.catalogo!.generazionePDFInCorso = true
|
||||
myel.value.catalogo!.areadistampa!.scale = myel.value.catalogo!.areadistampa!.scale_printable
|
||||
}
|
||||
|
||||
const terminaPDF = async () => {
|
||||
myel.value.catalogo!.generazionePDFInCorso = false
|
||||
myel.value.catalogo!.areadistampa!.scale = 1
|
||||
}
|
||||
|
||||
|
||||
const generatePDF = async (optcatalogo: ICatalogo) => {
|
||||
|
||||
await nextTick()
|
||||
|
||||
$q.dialog({
|
||||
message: 'Generare il PDF ?',
|
||||
ok: {
|
||||
label: t('dialog.yes'),
|
||||
push: true
|
||||
},
|
||||
cancel: {
|
||||
label: t('dialog.cancel')
|
||||
},
|
||||
title: 'Generazione PDF'
|
||||
}).onOk(async () => {
|
||||
|
||||
|
||||
$q.loading.show({
|
||||
message: 'Caricamento immagini e generazione PDF in corso...'
|
||||
})
|
||||
|
||||
|
||||
try {
|
||||
|
||||
let defaultMargin = 0.1
|
||||
if (optcatalogo.printable) {
|
||||
defaultMargin = 0
|
||||
} else {
|
||||
defaultMargin = 0
|
||||
}
|
||||
const unit = optcatalogo.areadistampa!.unit
|
||||
|
||||
let myformat = { ...optcatalogo.areadistampa!.format }
|
||||
|
||||
let scale = tools.getScale(optcatalogo)
|
||||
|
||||
let scalecanvas = optcatalogo.areadistampa!.scalecanvas
|
||||
|
||||
if (tools.isObject(myformat) && scale > 0) {
|
||||
} else {
|
||||
myformat = [210, 297]
|
||||
}
|
||||
|
||||
|
||||
const formatwidth = (myformat[0] * scale)
|
||||
const formatheight = (myformat[1] * scale)
|
||||
|
||||
let myfile = (optcatalogo.pdf_filename ?? 'catalogo_completo')
|
||||
|
||||
myfile += '_' + formatwidth + '_' + formatheight + '_' + unit + '_scale_' + scale
|
||||
|
||||
myfile += '.pdf'
|
||||
|
||||
|
||||
const element = document.getElementById('pdf-content')
|
||||
const opt = {
|
||||
margin: [
|
||||
optcatalogo.printable ? (parseFloat(optcatalogo.areadistampa!.margini?.top) || defaultMargin) : defaultMargin,
|
||||
optcatalogo.printable ? (parseFloat(optcatalogo.areadistampa!.margini?.left) || defaultMargin) : defaultMargin,
|
||||
optcatalogo.printable ? (parseFloat(optcatalogo.areadistampa!.margini?.bottom) || defaultMargin) : defaultMargin,
|
||||
optcatalogo.printable ? (parseFloat(optcatalogo.areadistampa!.margini?.right) || defaultMargin) : defaultMargin
|
||||
],
|
||||
filename: myfile,
|
||||
image: {
|
||||
type: 'jpeg',
|
||||
quality: 0.98
|
||||
},
|
||||
html2canvas: {
|
||||
scale: scalecanvas,
|
||||
useCORS: true,
|
||||
letterRendering: true,
|
||||
},
|
||||
jsPDF: {
|
||||
unit: unit,
|
||||
format: [formatwidth, formatheight],
|
||||
orientation: optcatalogo.areadistampa!.orientation,
|
||||
compress: optcatalogo.areadistampa!.compress,
|
||||
},
|
||||
enableLinks: true,
|
||||
pagebreak: { mode: 'avoid-all', before: '.card-page' }
|
||||
}
|
||||
|
||||
console.log('opt di stampa', opt)
|
||||
// a4: [595.28, 841.89]
|
||||
|
||||
await html2pdf().set(opt).from(element).save()
|
||||
|
||||
optcatalogo.generazionePDFInCorso = false
|
||||
optcatalogo.areadistampa!.scale = 1
|
||||
|
||||
$q.loading.hide()
|
||||
$q.notify({
|
||||
color: 'positive',
|
||||
message: 'PDF generato con successo!',
|
||||
icon: 'check'
|
||||
})
|
||||
} catch (error) {
|
||||
$q.loading.hide()
|
||||
$q.notify({
|
||||
color: 'negative',
|
||||
message: 'Errore nella generazione del PDF',
|
||||
icon: 'error'
|
||||
})
|
||||
console.error('Errore nella generazione del PDF:', error)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
onMounted(mounted)
|
||||
|
||||
return {
|
||||
preparePDF, terminaPDF, generatePDF,
|
||||
toggleDebug,
|
||||
tools,
|
||||
shared_consts,
|
||||
getArrDisciplines,
|
||||
|
||||
@@ -1460,7 +1460,7 @@
|
||||
dense
|
||||
dense-toggle
|
||||
expand-separator
|
||||
label="Schede"
|
||||
label="Configura Catalogo"
|
||||
icon="fas fa-play-circle"
|
||||
>
|
||||
<div class="row">
|
||||
@@ -1473,22 +1473,29 @@
|
||||
@click="addNewScheda"
|
||||
>
|
||||
</q-btn>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<q-tabs
|
||||
v-model="tabScheda"
|
||||
dense
|
||||
class="text-grey"
|
||||
active-color="primary"
|
||||
indicator-color="primary"
|
||||
align="justify"
|
||||
align="center"
|
||||
vertical
|
||||
narrow-indicator
|
||||
>
|
||||
<q-tab
|
||||
v-for="(rec, ind) in myel.catalogo.arrSchede"
|
||||
:key="rec._id"
|
||||
:name="ind"
|
||||
:label="`Scheda ` + (ind + 1)"
|
||||
icon="fas fa-pencil-alt"
|
||||
dense
|
||||
:label="
|
||||
`${ind}. ` + rec.scheda.name
|
||||
? rec.scheda.name
|
||||
: `Scheda ` + (ind + 1)
|
||||
"
|
||||
>
|
||||
</q-tab>
|
||||
</q-tabs>
|
||||
@@ -1500,7 +1507,7 @@
|
||||
:name="ind"
|
||||
>
|
||||
<q-bar v-if="recscheda" class="bg-primary text-white">
|
||||
Scheda {{ ind + 1 }}
|
||||
{{ ind + 1 }}.
|
||||
<span v-if="recscheda.scheda">
|
||||
'{{ recscheda.scheda.name }}'</span
|
||||
>
|
||||
@@ -1568,7 +1575,7 @@
|
||||
:options="SchedeOpt()"
|
||||
@update:model-value="modifElem"
|
||||
label="Scheda collegata:"
|
||||
style="width: 150px"
|
||||
style="width: 250px"
|
||||
emit-value
|
||||
map-options
|
||||
>
|
||||
@@ -1586,7 +1593,7 @@
|
||||
:options="SchedeOpt()"
|
||||
@update:model-value="modifElem"
|
||||
label="Scegli Scheda"
|
||||
style="width: 150px"
|
||||
style="width: 250px"
|
||||
emit-value
|
||||
map-options
|
||||
>
|
||||
@@ -1601,6 +1608,7 @@
|
||||
</q-btn>
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
|
||||
<CMySlider
|
||||
label="Pagine max da visualizzare"
|
||||
@@ -1765,6 +1773,7 @@
|
||||
<CMyDimensioni
|
||||
v-model="recscheda.scheda.dimensioni.riga"
|
||||
:path="costanti.DIR_SCHEDA"
|
||||
:showDim="false"
|
||||
@modifElem="modifElem"
|
||||
:show_imgsfondo="false"
|
||||
@update:model-value="modifElem"
|
||||
@@ -2036,6 +2045,14 @@
|
||||
@update:model-value="modifElem"
|
||||
>
|
||||
</q-toggle>
|
||||
<q-toggle
|
||||
v-model="myel.catalogo.indebug"
|
||||
color="positive"
|
||||
icon="fas fa-file-pdf"
|
||||
label="In Debug"
|
||||
@update:model-value="modifElem"
|
||||
>
|
||||
</q-toggle>
|
||||
|
||||
<q-select
|
||||
rounded
|
||||
@@ -2070,6 +2087,19 @@
|
||||
map-options
|
||||
>
|
||||
</q-select>
|
||||
<q-select
|
||||
rounded
|
||||
style="width: 200px"
|
||||
outlined
|
||||
v-model="myel.catalogo.areadistampa.scale_printable"
|
||||
:options="tools.SelectListScalePDF"
|
||||
@update:model-value="modifElem"
|
||||
dense
|
||||
label="Scale per Stampa:"
|
||||
emit-value
|
||||
map-options
|
||||
>
|
||||
</q-select>
|
||||
<q-select
|
||||
rounded
|
||||
style="width: 200px"
|
||||
@@ -2125,6 +2155,29 @@
|
||||
></CBorders>
|
||||
</div>
|
||||
</q-expansion-item>
|
||||
<div></div>
|
||||
<q-btn
|
||||
v-if="myel.catalogo.pdf && !myel.catalogo.generazionePDFInCorso"
|
||||
:label="`Prepara PDF ${myel.catalogo.pdf_filename}`"
|
||||
@click="preparePDF"
|
||||
></q-btn>
|
||||
<q-btn
|
||||
v-if="myel.catalogo.generazionePDFInCorso"
|
||||
:label="`Termina Generazione`"
|
||||
@click="terminaPDF"
|
||||
></q-btn>
|
||||
<q-btn
|
||||
v-if="myel.catalogo.pdf && myel.catalogo.generazionePDFInCorso"
|
||||
:label="`Genera PDF ${myel.catalogo.pdf_filename}`"
|
||||
@click="generatePDF(myel.catalogo)"
|
||||
color="positive"
|
||||
></q-btn>
|
||||
<q-btn
|
||||
label="Debug"
|
||||
@click="toggleDebug()"
|
||||
:push="myel.catalogo.indebug"
|
||||
:color="myel.catalogo.indebug ? `positive` : 'primary'"
|
||||
></q-btn>
|
||||
</div>
|
||||
</div>
|
||||
</q-list>
|
||||
|
||||
Reference in New Issue
Block a user