surya/myprojplanet_vite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

- Cataloghi: qualita di stampa e margini

Browse Source
This commit is contained in:
Surya Paolo
2024-11-22 20:23:37 +01:00
parent 5cd9bd40f6
commit 6a6c15b62c
24 changed files with 1031 additions and 530 deletions
Download Patch File Download Diff File Expand all files Collapse all files

165
src/views/ecommerce/catalogo/catalogo.ts
View File

@@ -16,7 +16,6 @@ import { CContainerCatalogoCard } from '@src/components/CContainerCatalogoCard'
import { CSelectUserActive } from '@src/components/CSelectUserActive'
import { ICatalogo, IFilterCatalogo, IMyScheda, IProdView, IProduct, ISchedaSingola, ISearchList } from 'model'
import html2canvas from 'html2canvas'
// import { VueHtmlToPaper } from 'vue-html-to-paper'
import html2pdf from 'html2pdf.js'
@@ -114,12 +113,10 @@ export default defineComponent({
watch(() => cat.value, (newval, oldval) => {
if (cat.value) {
if (loadpage.value)
tools.setCookie(tools.COOK_CATEGORIA, cat.value.toString())
filter.value.author = '' // disattivo il filtro autore
resetSearch()
}
if (loadpage.value)
tools.setCookie(tools.COOK_CATEGORIA, cat.value.toString())
filter.value.author = '' // disattivo il filtro autore
resetSearch()
calcArrProducts()
})
@@ -639,27 +636,64 @@ export default defineComponent({
try {
let defaultMargin = 0.1
if (props.optcatalogo.printable) {
defaultMargin = 0
} else {
defaultMargin = 0
}
const unit = props.optcatalogo.areadistampa!.unit
let myformat = { ...props.optcatalogo.areadistampa!.format }
let scale = props.optcatalogo.areadistampa!.scale
let scalecanvas = props.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 = (props.optcatalogo.pdf_filename ?? 'catalogo_completo')
myfile += '_' + formatwidth + '_' + formatheight + '_' + unit + '_scale_' + scale
myfile += '.pdf'
const element = document.getElementById('pdf-content')
const opt = {
margin: [0.1, 0.1, 0.1, 0.1],
filename: (props.optcatalogo.pdf_filename ?? 'catalogo_completo') + '.pdf',
margin: [
props.optcatalogo.printable ? (parseFloat(props.optcatalogo.areadistampa!.margini?.left) || defaultMargin) : defaultMargin,
props.optcatalogo.printable ? (parseFloat(props.optcatalogo.areadistampa!.margini?.top) || defaultMargin) : defaultMargin,
props.optcatalogo.printable ? (parseFloat(props.optcatalogo.areadistampa!.margini?.bottom) || defaultMargin) : defaultMargin,
props.optcatalogo.printable ? (parseFloat(props.optcatalogo.areadistampa!.margini?.right) || defaultMargin) : defaultMargin
],
filename: myfile,
image: {
type: 'jpeg',
quality: 0.98
},
html2canvas: {
scale: 2,
scale: scalecanvas,
useCORS: true,
letterRendering: true,
},
jsPDF: {
unit: 'in',
format: 'a4',
orientation: 'portrait',
compress: true
unit: unit,
format: [formatwidth, formatheight],
orientation: props.optcatalogo.areadistampa!.orientation,
compress: props.optcatalogo.areadistampa!.compress,
},
}
console.log('opt di stampa', opt)
// a4: [595.28, 841.89]
await html2pdf().set(opt).from(element).save()
$q.loading.hide()
@@ -679,10 +713,12 @@ export default defineComponent({
}
}
function groupedPages(scheda: IMyScheda) {
if (scheda) {
const schedePerRiga = scheda.numschede_perRiga || 1
const schedePerCol = scheda.numschede_perCol || 1
function groupedPages(recscheda: ISchedaSingola) {
let numschedeattuali = 0
if (recscheda.scheda) {
const schedePerRiga = recscheda.scheda.numschede_perRiga || 1
const schedePerCol = recscheda.scheda.numschede_perCol || 1
const schedePerPagina = schedePerRiga * schedePerCol
let indiceprodotto = 0
@@ -707,7 +743,13 @@ export default defineComponent({
page.push(row)
}
numschedeattuali++
pages.push(page)
if (recscheda.numSchede! > 0) {
if (numschedeattuali >= recscheda.numSchede!)
return pages
}
}
return pages
@@ -725,15 +767,15 @@ export default defineComponent({
}
function generateStylePageScheda(optcatalogo: ICatalogo, scheda: IMyScheda) {
const marginTop = scheda.dimensioni?.pagina?.margini?.top ? scheda.dimensioni?.pagina?.margini?.top : (optcatalogo.dimensioni_def?.pagina?.margini?.top ?? '')
const marginBottom = scheda.dimensioni?.pagina?.margini?.bottom ? scheda.dimensioni?.pagina?.margini?.bottom : (optcatalogo.dimensioni_def?.pagina?.margini?.bottom ?? '')
const marginLeft = scheda.dimensioni?.pagina?.margini?.left ? scheda.dimensioni?.pagina?.margini?.left : (optcatalogo.dimensioni_def?.pagina?.margini?.left ?? '')
const marginRight = scheda.dimensioni?.pagina?.margini?.right ? scheda.dimensioni?.pagina?.margini?.right : (optcatalogo.dimensioni_def?.pagina?.margini?.right ?? '')
const marginTop = scheda.dimensioni?.pagina?.margini?.top ? tools.adjustSize(props.optcatalogo, scheda.dimensioni?.pagina?.margini?.top) : (tools.adjustSize(props.optcatalogo, optcatalogo.dimensioni_def?.pagina?.margini?.top) ?? '')
const marginBottom = scheda.dimensioni?.pagina?.margini?.bottom ? tools.adjustSize(props.optcatalogo, scheda.dimensioni?.pagina?.margini?.bottom) : (tools.adjustSize(props.optcatalogo, optcatalogo.dimensioni_def?.pagina?.margini?.bottom) ?? '')
const marginLeft = scheda.dimensioni?.pagina?.margini?.left ? tools.adjustSize(props.optcatalogo, scheda.dimensioni?.pagina?.margini?.left) : (tools.adjustSize(props.optcatalogo, optcatalogo.dimensioni_def?.pagina?.margini?.left) ?? '')
const marginRight = scheda.dimensioni?.pagina?.margini?.right ? tools.adjustSize(props.optcatalogo, scheda.dimensioni?.pagina?.margini?.right): (tools.adjustSize(props.optcatalogo, optcatalogo.dimensioni_def?.pagina?.margini?.right) ?? '')
const paddingTop = scheda.dimensioni?.pagina?.padding?.top ? scheda.dimensioni?.pagina?.padding?.top : (optcatalogo.dimensioni_def?.pagina?.padding?.top ?? '')
const paddingBottom = scheda.dimensioni?.pagina?.padding?.bottom ? scheda.dimensioni?.pagina?.padding?.bottom : (optcatalogo.dimensioni_def?.pagina?.padding?.bottom ?? '')
const paddingLeft = scheda.dimensioni?.pagina?.padding?.left ? scheda.dimensioni?.pagina?.padding?.left : (optcatalogo.dimensioni_def?.pagina?.padding?.left ?? '')
const paddingRight = scheda.dimensioni?.pagina?.padding?.right ? scheda.dimensioni?.pagina?.padding?.right : (optcatalogo.dimensioni_def?.pagina?.padding?.right ?? '')
const paddingTop = scheda.dimensioni?.pagina?.padding?.top ? tools.adjustSize(props.optcatalogo, scheda.dimensioni?.pagina?.padding?.top) : (tools.adjustSize(props.optcatalogo, optcatalogo.dimensioni_def?.pagina?.padding?.top) ?? '')
const paddingBottom = scheda.dimensioni?.pagina?.padding?.bottom ? tools.adjustSize(props.optcatalogo, scheda.dimensioni?.pagina?.padding?.bottom) : (tools.adjustSize(props.optcatalogo, optcatalogo.dimensioni_def?.pagina?.padding?.bottom) ?? '')
const paddingLeft = scheda.dimensioni?.pagina?.padding?.left ? tools.adjustSize(props.optcatalogo, scheda.dimensioni?.pagina?.padding?.left) : (tools.adjustSize(props.optcatalogo, optcatalogo.dimensioni_def?.pagina?.padding?.left) ?? '')
const paddingRight = scheda.dimensioni?.pagina?.padding?.right ? tools.adjustSize(props.optcatalogo, scheda.dimensioni?.pagina?.padding?.right) : (tools.adjustSize(props.optcatalogo, optcatalogo.dimensioni_def?.pagina?.padding?.right) ?? '')
// Esiste un immagine di sfondo specifica della singola pagina ?
let fileimg = scheda.dimensioni?.pagina?.imgsfondo?.imagefile
@@ -744,15 +786,15 @@ export default defineComponent({
if (!fileimg) {
// Esiste un immagine di sfondo uguali per tutte le pagine ?
fileimg = optcatalogo.imgsfondo_def?.imagefile
backgroundSize = optcatalogo.imgsfondo_def?.fit
fileimg = optcatalogo.dimensioni_def?.pagina.imgsfondo?.imagefile
backgroundSize = optcatalogo.dimensioni_def?.pagina.imgsfondo?.fit
fileimg = fileimg ? `url(${costanti.DIR_UPLOAD + costanti.DIR_CATALOGO + fileimg})` : ''
}
let backgroundImage = fileimg ?? ''
const width = scheda.dimensioni?.pagina?.size?.width ? scheda.dimensioni?.pagina?.size?.width : (optcatalogo.dimensioni_def?.pagina?.size?.width ?? '')
const height = scheda.dimensioni?.pagina?.size?.height ? scheda.dimensioni?.pagina?.size?.height : (optcatalogo.dimensioni_def?.pagina?.size?.height ?? '')
let width = scheda.dimensioni?.pagina?.size?.width ? tools.adjustSize(optcatalogo, scheda.dimensioni?.pagina?.size?.width) : (tools.adjustSize(optcatalogo, optcatalogo.dimensioni_def?.pagina?.size?.width) ?? '')
let height = scheda.dimensioni?.pagina?.size?.height ? tools.adjustSize(optcatalogo, scheda.dimensioni?.pagina?.size?.height) : (tools.adjustSize(optcatalogo, optcatalogo.dimensioni_def?.pagina?.size?.height) ?? '')
return {
marginBottom,
@@ -773,27 +815,64 @@ export default defineComponent({
}
function getWidthPagina(optcatalogo: ICatalogo, scheda: IMyScheda) {
return scheda.dimensioni?.pagina?.size?.width ? scheda.dimensioni?.pagina?.size?.width : (optcatalogo.dimensioni_def?.pagina?.size?.width ?? '')
return scheda.dimensioni?.pagina?.size?.width ? tools.adjustSize(optcatalogo, scheda.dimensioni?.pagina?.size?.width) : (tools.adjustSize(optcatalogo, optcatalogo.dimensioni_def?.pagina?.size?.width) ?? '')
}
function getHeightPagina(optcatalogo: ICatalogo, scheda: IMyScheda) {
return scheda.dimensioni?.pagina?.size?.height ? scheda.dimensioni?.pagina?.size?.height : (optcatalogo.dimensioni_def?.pagina?.size?.height ?? '')
return scheda.dimensioni?.pagina?.size?.height ? tools.adjustSize(optcatalogo, scheda.dimensioni?.pagina?.size?.height) : (tools.adjustSize(optcatalogo, optcatalogo.dimensioni_def?.pagina?.size?.height) ?? '')
}
function getStyleRowSeparator(recscheda: ISchedaSingola) {
const paddingLeft = tools.adjustSize(props.optcatalogo, recscheda.scheda?.dimensioni?.scheda_prodotto?.padding?.left) ?? '0px';
const paddingRight = tools.adjustSize(props.optcatalogo, recscheda.scheda?.dimensioni?.scheda_prodotto?.padding?.right) ?? '0px';
return {
paddingLeft: `${paddingLeft}`,
paddingRight: `${paddingRight}`,
};
}
function getStyleRow(recscheda: ISchedaSingola) {
const placeContent = 'center';
const width = recscheda.scheda?.dimensioni?.scheda_prodotto?.size?.width ?? '100px';
const height = recscheda.scheda?.dimensioni?.scheda_prodotto?.size?.height;
const width = tools.adjustSize(props.optcatalogo, recscheda.scheda?.dimensioni?.riga?.size?.width) ?? '';
const height = tools.adjustSize(props.optcatalogo, recscheda.scheda?.dimensioni?.riga?.size?.height);
const marginTop = recscheda.scheda?.dimensioni?.scheda_prodotto?.margini?.top ?? '0px';
const marginBottom = recscheda.scheda?.dimensioni?.scheda_prodotto?.margini?.bottom ?? '0px';
const marginLeft = recscheda.scheda?.dimensioni?.scheda_prodotto?.margini?.left ?? '0px';
const marginRight = recscheda.scheda?.dimensioni?.scheda_prodotto?.margini?.right ?? '0px';
const marginTop = tools.adjustSize(props.optcatalogo, recscheda.scheda?.dimensioni?.riga?.margini?.top) ?? '0px';
const marginBottom = tools.adjustSize(props.optcatalogo, recscheda.scheda?.dimensioni?.riga?.margini?.bottom) ?? '0px';
const marginLeft = tools.adjustSize(props.optcatalogo, recscheda.scheda?.dimensioni?.riga?.margini?.left) ?? '0px';
const marginRight = tools.adjustSize(props.optcatalogo, recscheda.scheda?.dimensioni?.riga?.margini?.right) ?? '0px';
const paddingTop = recscheda.scheda?.dimensioni?.scheda_prodotto?.padding?.top ?? '0px';
const paddingBottom = recscheda.scheda?.dimensioni?.scheda_prodotto?.padding?.bottom ?? '0px';
const paddingLeft = recscheda.scheda?.dimensioni?.scheda_prodotto?.padding?.left ?? '0px';
const paddingRight = recscheda.scheda?.dimensioni?.scheda_prodotto?.padding?.right ?? '0px';
const paddingTop = tools.adjustSize(props.optcatalogo, recscheda.scheda?.dimensioni?.riga?.padding?.top) ?? '0px';
const paddingBottom = tools.adjustSize(props.optcatalogo, recscheda.scheda?.dimensioni?.riga?.padding?.bottom) ?? '0px';
const paddingLeft = tools.adjustSize(props.optcatalogo, recscheda.scheda?.dimensioni?.riga?.padding?.left) ?? '0px';
const paddingRight = tools.adjustSize(props.optcatalogo, recscheda.scheda?.dimensioni?.riga?.padding?.right) ?? '0px';
return {
placeContent,
flex: `0 1 ${width} !important;`,
margin: `${marginTop} ${marginRight} ${marginBottom} ${marginLeft}`,
padding: `${paddingTop} ${paddingRight} ${paddingBottom} ${paddingLeft}`,
...(width ? { width: `${width} !important;` } : {}),
...(height ? { height: `${height} !important;` } : {}) // Aggiungi l'altezza solo se è valorizzata
};
}
function getStyleSchedaProdotto(recscheda: ISchedaSingola) {
const placeContent = 'center';
const width = tools.adjustSize(props.optcatalogo, recscheda.scheda?.dimensioni?.scheda_prodotto?.size?.width) ?? '100px';
const height = tools.adjustSize(props.optcatalogo, recscheda.scheda?.dimensioni?.scheda_prodotto?.size?.height);
const marginTop = tools.adjustSize(props.optcatalogo, recscheda.scheda?.dimensioni?.scheda_prodotto?.margini?.top) ?? '0px';
const marginBottom = tools.adjustSize(props.optcatalogo, recscheda.scheda?.dimensioni?.scheda_prodotto?.margini?.bottom) ?? '0px';
const marginLeft = tools.adjustSize(props.optcatalogo, recscheda.scheda?.dimensioni?.scheda_prodotto?.margini?.left) ?? '0px';
const marginRight = tools.adjustSize(props.optcatalogo, recscheda.scheda?.dimensioni?.scheda_prodotto?.margini?.right) ?? '0px';
const paddingTop = tools.adjustSize(props.optcatalogo, recscheda.scheda?.dimensioni?.scheda_prodotto?.padding?.top) ?? '0px';
const paddingBottom = tools.adjustSize(props.optcatalogo, recscheda.scheda?.dimensioni?.scheda_prodotto?.padding?.bottom) ?? '0px';
const paddingLeft = tools.adjustSize(props.optcatalogo, recscheda.scheda?.dimensioni?.scheda_prodotto?.padding?.left) ?? '0px';
const paddingRight = tools.adjustSize(props.optcatalogo, recscheda.scheda?.dimensioni?.scheda_prodotto?.padding?.right) ?? '0px';
return {
placeContent,
@@ -849,8 +928,10 @@ export default defineComponent({
generateStylePageScheda,
generateStyleCatalogo,
getStyleRow,
getStyleSchedaProdotto,
getWidthPagina,
getHeightPagina,
getStyleRowSeparator,
}
}
})