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

5
src/components/CBorders/CBorders.ts
View File

@@ -21,6 +21,11 @@ export default defineComponent({
type: String,
required: true,
},
addstr: {
type: String,
required: false,
default: 'px'
},
disable: {
type: Boolean,
required: false,

8
src/components/CBorders/CBorders.vue
View File

@@ -17,7 +17,7 @@
:min="10"
:max="1000"
color="green"
addstr="px"
:addstr="addstr"
@update:model-value="modifValueTop"
></CMySlider>
<CMySlider
@@ -26,7 +26,7 @@
:min="10"
:max="1000"
color="red"
addstr="px"
:addstr="addstr"
@update:model-value="modifValueBottom"
></CMySlider>
<CMySlider
@@ -35,7 +35,7 @@
:min="10"
:max="1000"
color="orange"
addstr="px"
:addstr="addstr"
@update:model-value="modifValueLeft"
></CMySlider>
<CMySlider
@@ -44,7 +44,7 @@
:min="10"
:max="1000"
color="fuchsia"
addstr="px"
:addstr="addstr"
@update:model-value="modifValueRight"
></CMySlider>
</div>

67
src/components/CCatalogoCard/CCatalogoCard.vue
View File

@@ -4,7 +4,11 @@
' items-start q-gutter-sm': true,
}"
:style="
scheda.height ? ' height: ' + scheda.height + 'px !important; ' : ''
scheda.height
? ' height: ' +
tools.adjustSize(optcatalogo, scheda.height) +
'px !important; '
: ''
"
>
<q-spinner v-if="!endload" color="primary" size="3em" :thickness="2" />
@@ -54,9 +58,13 @@
]"
:style="{
justifyContent: 'center',
alignItems: 'flex-start',
alignItems: 'center',
gap: '0.5rem',
width: scheda.dimensioni?.scheda_prodotto?.size.width ?? '100%',
width:
tools.adjustSize(
optcatalogo,
scheda.dimensioni?.scheda_prodotto?.size.width
) ?? '100%',
}"
>
<q-img
@@ -81,10 +89,15 @@
scheda.posiz_text === costanti.POSIZ_TESTO.IN_BASSO
? '50%'
: '45%',
...(scheda.dimensioni?.immagine_prodotto?.size?.width && {
...(tools.adjustSize(
optcatalogo,
scheda.dimensioni?.immagine_prodotto?.size?.width
) && {
width:
scheda.dimensioni?.immagine_prodotto.size?.width +
' !important',
tools.adjustSize(
optcatalogo,
scheda.dimensioni?.immagine_prodotto.size?.width
) + ' !important',
}),
display: 'block',
}"
@@ -121,9 +134,18 @@
}"
>
<div
v-if="scheda.testo_right"
:style="`line-height: ${scheda.line_height}%; `"
v-html="products.replaceKeyWordsByProduct(myproduct, scheda.testo_right)"
v-if="scheda.testo_right && scheda.testo_right"
:style="{
'--scalecatalog': optcatalogo.areadistampa.scale,
'line-height': scheda.line_height,
}"
v-html="
products.replaceKeyWordsByProduct(
optcatalogo,
myproduct,
scheda.testo_right
)
"
></div>
<div v-if="scheda.barcode && scheda.barcode.show">
@@ -131,11 +153,19 @@
:value="myproduct.productInfo.code"
:format="scheda.barcode.format"
:fontsize="scheda.barcode.font?.size"
:width="parseInt(scheda.barcode.size.width)"
:height="parseInt(scheda.barcode.size.height)"
:text="`ISBN: ${myproduct.productInfo.code}`"
:width="
parseInt(
tools.adjustSize(optcatalogo, scheda.barcode.size?.width)
)
"
:height="
parseInt(
tools.adjustSize(optcatalogo, scheda.barcode.size?.height)
)
"
>
</CBarCode>
<!--:text="`ISBN: ${myproduct.productInfo.code}`"-->
</div>
</div>
<div
@@ -147,8 +177,17 @@
}"
>
<div
:style="`line-height: ${scheda.line_height}%; `"
v-html="products.replaceKeyWordsByProduct(myproduct, scheda.testo_bottom)"
:style="{
'--scalecatalog': optcatalogo.areadistampa.scale,
'line-height': scheda.line_height,
}"
v-html="
products.replaceKeyWordsByProduct(
optcatalogo,
myproduct,
scheda.testo_bottom
)
"
></div>
</div>
</div>

0
src/components/CMyDimensioni/CMyDimensioni.scss Executable file
View File

96
src/components/CMyDimensioni/CMyDimensioni.ts Executable file
View File

@@ -0,0 +1,96 @@
import { defineComponent, ref, computed, PropType, toRef, reactive, watch } from 'vue'
import { IColGridTable, IDimensioni, IOperators, ISize } from 'model'
import { useI18n } from '@/boot/i18n'
import { useQuasar } from 'quasar'
import { CMySize } from '@src/components/CMySize'
import { CBorders } from '@src/components/CBorders'
import { CMyFieldRec } from '@src/components/CMyFieldRec'
import { tools } from '@store/Modules/tools'
import { costanti } from '@costanti'
import { shared_consts } from '@/common/shared_vuejs'
export default defineComponent({
name: 'CMyDimensioni',
emits: ['update:modelValue'],
components: { CMySize, CBorders, CMyFieldRec },
props: {
modelValue: {
type: Object as PropType<IDimensioni>,
required: true,
},
label: {
type: String,
required: false,
default: ''
},
path: {
type: String,
required: false,
default: ''
},
show_imgsfondo: {
type: Boolean,
required: false,
default: false,
},
disable: {
type: Boolean,
required: false,
default: false,
},
},
setup(props, { emit }) {
const $q = useQuasar()
const { t } = useI18n()
const internalModel = reactive({ ...props.modelValue })
// Sincronizzare i cambiamenti esterni con internalModel quando props cambiano
watch(() => [props.modelValue], (newModel: any) => {
Object.assign(internalModel, newModel);
// console.log('Internal Model updated:', newModel);
}, { immediate: true });
function modifSize(value: any) {
emit('update:modelValue', { ...internalModel, size: value });
}
function modifMargini(value: any) {
emit('update:modelValue', { ...internalModel, margini: value });
}
function modifPadding(value: any) {
emit('update:modelValue', { ...internalModel, padding: value });
}
function saveFielDim(rec: any, newval: any, col: IColGridTable) {
// console.log('saveFielDim', rec, 'newval', newval, 'col', col)
if (col.fieldtype === costanti.FieldType.image) {
if (!rec[col.name]) {
rec[col.name] = {}
}
rec[col.name] = newval.imagefile
console.log('rec[col.name]', rec[col.name])
// rec[col.name].imagefile = newval.imagefile
}
}
return {
t,
tools,
shared_consts,
internalModel,
modifSize,
modifMargini,
modifPadding,
saveFielDim,
costanti,
}
}
})

70
src/components/CMyDimensioni/CMyDimensioni.vue Executable file
View File

@@ -0,0 +1,70 @@
<template>
<div style="width: 380px">
<q-banner
rounded
dense
class="bg-blue-1 text-red"
color="primary q-title"
style="text-align: center"
>
{{ label }}
</q-banner>
<div v-if="internalModel" class="sfondo_margine row">
<CMySize
label="Pagina:"
v-model="internalModel.size"
@update:model-value="modifSize"
></CMySize>
<CBorders
label="Margini Pagina:"
v-model="internalModel.margini"
@update:model-value="modifMargini"
></CBorders>
<CBorders
label="Padding Pagina:"
v-model="internalModel.padding"
@update:model-value="modifPadding"
></CBorders>
<div v-if="show_imgsfondo">
{{ internalModel.imgsfondo?.imagefile }}<br />
<q-select
v-model="internalModel.imgsfondo.fit"
:options="tools.SelectListFit"
label="Dimensione Img"
options-dense
dense
emit-value
map-options
style="width: 100px"
@update:model-value="modifElem"
fill-input
text-color="white"
>
</q-select>
<CMyFieldRec
title="Immagine Sfondo:"
table="imgs"
:rec="internalModel.imgsfondo"
field="imagefile"
:path="path"
@update:model-value="modifElem"
:canEdit="true"
:canModify="true"
:fieldtype="costanti.FieldType.image"
@save="saveFielDim"
>
</CMyFieldRec>
</div>
</div>
</div>
</template>
<script lang="ts" src="./CMyDimensioni.ts">
</script>
<style lang="scss" scoped>
@import './CMyDimensioni.scss';
</style>

1
src/components/CMyDimensioni/index.ts Executable file
View File

@@ -0,0 +1 @@
export {default as CMyDimensioni} from './CMyDimensioni.vue'

172
src/components/CMyEditElem/CMyEditElem.ts
View File

@@ -25,6 +25,7 @@ import { CSelectColor } from '@src/components/CSelectColor'
import { CSelectFontSize } from '@src/components/CSelectFontSize'
import { CMySize } from '@src/components/CMySize'
import { CBorders } from '@src/components/CBorders'
import { CMyDimensioni } from '@src/components/CMyDimensioni'
import MixinMetaTags from '@/mixins/mixin-metatags'
import MixinBase from '@/mixins/mixin-base'
@@ -41,7 +42,7 @@ export default defineComponent({
CImgTitle, CTitle, LandingFooter, CEventsCalendar,
CCardCarousel, COpenStreetMap, CMyPage, CMyPageIntro, CMyEditor, CMyFieldRec,
CSelectColor, CSelectFontSize, CSelectImage, CImgPoster, CSelectAnimation, CMySlider,
CMySize, CBorders,
CMySize, CBorders, CMyDimensioni,
},
emits: ['saveElem', 'selElemClick', 'toggleSize', 'deleteElem', 'dupPage'],
props: {
@@ -268,10 +269,16 @@ export default defineComponent({
if (myel.value.catalogo && myel.value.catalogo?.arrSchede) {
for (const recscheda of myel.value.catalogo?.arrSchede) {
if (recscheda.scheda && (!recscheda.scheda?.testo_bottom)) {
recscheda.scheda.testo_bottom = {contenuto: '', maxlength: 100}
recscheda.scheda.testo_bottom = { contenuto: '', maxlength: 100 }
}
if (recscheda.scheda && (!recscheda.scheda?.testo_right)) {
recscheda.scheda.testo_right = {contenuto: ''}
if (recscheda.scheda && !recscheda.scheda.testo_bottom!.font) {
recscheda.scheda.testo_bottom!.font = { name: '', size: ''}
}
if (recscheda.scheda && (!recscheda.scheda?.testo_right || !recscheda.scheda?.testo_right.font) ) {
recscheda.scheda.testo_right = { contenuto: '', font: { name: '', size: ''} }
}
if (recscheda.scheda && (!recscheda.scheda?.dimensioni.pagina.imgsfondo)) {
recscheda.scheda.dimensioni.pagina = tools.resetRecIDimensioni(recscheda.scheda?.dimensioni.pagina)
}
if (recscheda.scheda && (!recscheda.scheda?.barcode || !recscheda.scheda?.barcode.font)) {
recscheda.scheda.barcode = {
@@ -279,11 +286,11 @@ export default defineComponent({
format: '',
size: {
width: '2',
height: '100',
height: '33',
},
font: {
name: '',
size: 16,
size: '11',
}
}
}
@@ -291,34 +298,33 @@ export default defineComponent({
}
}
if (myel.value.catalogo && !myel.value.catalogo.imgsfondo_def) {
myel.value.catalogo.imgsfondo_def = {
imagefile: '',
fit: '',
if (myel.value.catalogo) {
if (!myel.value.catalogo.first_page) {
myel.value.catalogo.first_page = tools.resetRecIDimensioni(null)
}
myel.value.catalogo.first_page = tools.resetRecIDimensioni(myel.value.catalogo.first_page)
}
if (myel.value.catalogo) {
if (!myel.value.catalogo.last_page)
myel.value.catalogo.last_page = tools.resetRecIDimensioni(null)
myel.value.catalogo.last_page = tools.resetRecIDimensioni(myel.value.catalogo.last_page)
}
if (myel.value.catalogo) {
if (!myel.value.catalogo.areadistampa) {
myel.value.catalogo.areadistampa = tools.resetRecIAreaDiStampa(null)
myel.value.catalogo.areadistampa.margini = { left: '0.59', top: '0.59', right: '0.59', bottom: '0.28'}
}
myel.value.catalogo.areadistampa = tools.resetRecIAreaDiStampa(myel.value.catalogo.areadistampa)
}
if (myel.value.catalogo && !myel.value.catalogo.dimensioni_def) {
myel.value.catalogo.dimensioni_def = {
pagina: {
size: {
width: '',
height: '',
},
margini: {
left: '',
top: '',
right: '',
bottom: '',
},
padding: {
left: '',
top: '',
right: '',
bottom: '',
},
}
}
myel.value.catalogo.dimensioni_def = { pagina: {} }
}
if (myel.value.catalogo && myel.value.catalogo.dimensioni_def) {
myel.value.catalogo.dimensioni_def.pagina = tools.resetRecIDimensioni(myel.value.catalogo.dimensioni_def.pagina)
}
}
@@ -346,66 +352,68 @@ export default defineComponent({
}
})
let defaultDimensioniPag = {
size: {
width: '800px',
height: '600px',
},
margini: {
top: '12px',
bottom: '0px',
left: '0px',
right: '0px',
},
padding: {
top: '0px',
bottom: '0px',
left: '0px',
right: '0px',
},
let defaultDimensioniPag = tools.resetRecIDimensioni(null)
defaultDimensioniPag.size = {
width: '800px',
height: '600px',
}
defaultDimensioniPag.margini = {
top: '12px',
bottom: '0px',
left: '0px',
right: '0px',
}
defaultDimensioniPag.padding = {
top: '0px',
bottom: '0px',
left: '0px',
right: '0px',
}
let defaultDimensioniRiga = {
size: {
width: '800px',
height: '300px',
},
margini: {
top: '40px',
bottom: '0px',
left: '0px',
right: '0px',
},
padding: {
top: '0px',
bottom: '0px',
left: '0px',
right: '0px',
},
let defaultDimensioniRiga = tools.resetRecIDimensioni(null)
defaultDimensioniRiga.size = {
width: '800px',
height: '300px',
}
defaultDimensioniRiga.margini = {
top: '40px',
bottom: '0px',
left: '0px',
right: '0px',
}
defaultDimensioniRiga.padding = {
top: '0px',
bottom: '0px',
left: '0px',
right: '0px',
}
let defaultSchedaProdotto = tools.resetRecIDimensioni(null)
defaultSchedaProdotto.size = {
width: '360px',
height: '230px',
}
defaultSchedaProdotto.margini = {
top: '0px',
bottom: '0px',
left: '0px',
right: '0px',
}
defaultSchedaProdotto.padding = {
top: '0px',
bottom: '0px',
left: '0px',
right: '0px',
}
let dimensioni: IElementiScheda = {
pagina: defaultDimensioniPag,
riga: defaultDimensioniRiga,
scheda_prodotto: {
size: {
width: '360px',
height: '230px',
},
margini: {
top: '0px',
bottom: '0px',
left: '0px',
right: '0px',
},
padding: {
top: '0px',
bottom: '0px',
left: '0px',
right: '0px',
},
},
scheda_prodotto: defaultSchedaProdotto,
immagine_prodotto: {
size: {
width: '150px',

356
src/components/CMyEditElem/CMyEditElem.vue
View File

@@ -1433,66 +1433,17 @@
icon="fas fa-play-circle"
>
<div
v-if="myel.catalogo.dimensioni_def"
v-if="myel.catalogo.dimensioni_def.pagina"
class="sfondo_margine row"
>
<CMySize
label="Pagina:"
v-model="myel.catalogo.dimensioni_def.pagina.size"
<CMyDimensioni
v-model="myel.catalogo.dimensioni_def.pagina"
:path="costanti.DIR_CATALOGO"
:show_imgsfondo="true"
@update:model-value="modifElem"
></CMySize>
<CBorders
label="Margini Pagina:"
v-model="myel.catalogo.dimensioni_def.pagina.margini"
@update:model-value="modifElem"
></CBorders>
<CBorders
label="Padding Pagina:"
v-model="myel.catalogo.dimensioni_def.pagina.padding"
@update:model-value="modifElem"
></CBorders>
></CMyDimensioni>
</div>
</q-expansion-item>
<q-expansion-item
dense
dense-toggle
expand-separator
label="Sfondi"
icon="fas fa-play-circle"
>
Immagine Sfondo di default:
{{ myel.catalogo.imgsfondo_def?.imagefile }}<br />
<q-select
v-model="myel.catalogo.imgsfondo_def.fit"
:options="tools.SelectListFit"
label="Dimensione Img"
options-dense
dense
emit-value
map-options
style="width: 100px"
@update:model-value="modifElem"
fill-input
text-color="white"
>
</q-select>
<CMyFieldRec
title="Immagine Sfondo di default:"
table="catalogo"
:rec="myel.catalogo"
field="imgsfondo_def"
@update:model-value="modifElem"
:canEdit="true"
:canModify="true"
:fieldtype="costanti.FieldType.image"
@save="saveFieldElem"
>
</CMyFieldRec>
<br />
</q-expansion-item>
<q-expansion-item
dense
dense-toggle
@@ -1721,76 +1672,27 @@
label="Pagina"
icon="fas fa-play-circle"
>
<div class="sfondo_margine row">
<CMySize
label="Pagina:"
v-model="recscheda.scheda.dimensioni.pagina.size"
@update:model-value="modifElem"
></CMySize>
<CBorders
label="Margini Pagina:"
v-model="recscheda.scheda.dimensioni.pagina.margini"
@update:model-value="modifElem"
></CBorders>
<CBorders
label="Padding Pagina:"
v-model="recscheda.scheda.dimensioni.pagina.padding"
@update:model-value="modifElem"
></CBorders>
</div>
<CMyDimensioni
v-model="recscheda.scheda.dimensioni.pagina"
:path="costanti.DIR_SCHEDA"
:show_imgsfondo="true"
@update:model-value="modifElem"
></CMyDimensioni>
</q-expansion-item>
<q-expansion-item
dense
dense-toggle
expand-separator
label="Sfondi"
label="Righe"
icon="fas fa-play-circle"
>
Nome File Web: {{ recscheda.scheda.bgimg }}<br />
<CMyFieldRec
title="Per Web:"
table="myschedas"
:rec="recscheda.scheda"
field="bgimg"
<CMyDimensioni
v-model="recscheda.scheda.dimensioni.riga"
:path="costanti.DIR_SCHEDA"
:show_imgsfondo="false"
@update:model-value="modifElem"
:canEdit="true"
:canModify="true"
:fieldtype="costanti.FieldType.image"
@save="saveFieldElem"
>
</CMyFieldRec>
<q-select
v-model="recscheda.scheda.bgSize"
:options="tools.SelectListFit"
label="Dimensione Img"
options-dense
dense
emit-value
map-options
style="width: 100px"
@update:model-value="modifElem"
fill-input
text-color="white"
>
</q-select>
{{ recscheda.scheda.dimensioni.imgsfondo }}
<CMyFieldRec
title="Sfondo:"
table="imgs"
:rec="recscheda.scheda.dimensioni"
field="imgsfondo"
@update:model-value="modifElem"
:canEdit="true"
:canModify="true"
:fieldtype="costanti.FieldType.image"
@save="saveFieldElem"
>
</CMyFieldRec>
<br />
></CMyDimensioni>
</q-expansion-item>
<q-expansion-item
@@ -1800,6 +1702,13 @@
label="Schede"
icon="fas fa-play-circle"
>
<q-toggle
v-model="recscheda.scheda.show_separatore"
color="primary"
label="Separatore righe"
@update:model-value="modifElem"
>
</q-toggle>
<div class="row">
<CMySlider
label="Schede per Riga"
@@ -1869,8 +1778,8 @@
<CMySlider
label="Line Height:"
v-model="recscheda.scheda.line_height"
:min="70"
:max="200"
:min="0.5"
:max="2"
color="blue"
@update:model-value="modifElem"
></CMySlider>
@@ -1880,6 +1789,21 @@
{descrizione_estesa} {prezzo}
</div>
<q-select
v-model="recscheda.scheda.testo_right.font.size"
:options="fontSizeOptions"
label="Font Size Titolo"
options-dense
dense
emit-value
map-options
style="width: 100px"
@update:model-value="modifElem"
fill-input
text-color="white"
>
</q-select>
<CMyFieldRec
title="Testo a Destra:"
table="text"
@@ -1893,6 +1817,22 @@
@update_col="update_col"
>
</CMyFieldRec>
<q-select
v-model="recscheda.scheda.testo_bottom.font.size"
:options="fontSizeOptions"
label="Dimensione Titolo"
options-dense
dense
emit-value
map-options
style="width: 150px"
@update:model-value="modifElem"
fill-input
text-color="white"
>
</q-select>
<CMyFieldRec
title="Testo in Basso :"
table="text"
@@ -1972,52 +1912,16 @@
label="Prima Pagina"
icon="fas fa-play-circle"
>
Prima Pagina: {{ myel.catalogo.first_page_img }}<br />
Prima Pagina: <br />
<div class="row">
<CMySlider
label="Altezza:"
v-model="myel.catalogo.first_page_height"
:min="0"
:max="1200"
color="red"
<CMyDimensioni
:path="costanti.DIR_CATALOGO"
v-model="myel.catalogo.first_page"
:show_imgsfondo="true"
@update:model-value="modifElem"
></CMySlider>
<CMySlider
label="Larghezza:"
v-model="myel.catalogo.first_page_width"
:min="0"
:max="1200"
color="red"
@update:model-value="modifElem"
></CMySlider>
></CMyDimensioni>
</div>
<CMyFieldRec
title="Per Web:"
table="catalogo"
:rec="myel.catalogo"
field="first_page_img"
@update:model-value="modifElem"
:canEdit="true"
:canModify="true"
:fieldtype="costanti.FieldType.image"
@save="saveFieldElem"
>
</CMyFieldRec>
<CMyFieldRec
title="Testo pagina:"
table="catalogo"
:rec="myel.catalogo"
field="first_page_html"
@update:model-value="modifElem"
:canEdit="true"
:canModify="true"
:fieldtype="costanti.FieldType.html"
@save="saveFieldElem"
@update_col="update_col"
>
</CMyFieldRec>
<br />
</q-expansion-item>
@@ -2028,53 +1932,12 @@
label="Ultima Pagina"
icon="fas fa-play-circle"
>
Immagine: {{ myel.catalogo.last_page_img }}<br />
<div class="row">
<CMySlider
label="Altezza:"
v-model="myel.catalogo.last_page_height"
:min="0"
:max="1200"
color="red"
@update:model-value="modifElem"
></CMySlider>
<CMySlider
label="Larghezza:"
v-model="myel.catalogo.last_page_width"
:min="0"
:max="1200"
color="red"
@update:model-value="modifElem"
></CMySlider>
</div>
<CMyFieldRec
title="Per Web:"
table="catalogo"
:rec="myel.catalogo"
field="last_page_img"
<CMyDimensioni
:path="costanti.DIR_CATALOGO"
v-model="myel.catalogo.last_page"
:show_imgsfondo="true"
@update:model-value="modifElem"
:canEdit="true"
:canModify="true"
:fieldtype="costanti.FieldType.image"
@save="saveFieldElem"
>
</CMyFieldRec>
<CMyFieldRec
title="Testo pagina:"
table="catalogo"
:rec="myel.catalogo"
field="last_page_html"
@update:model-value="modifElem"
:canEdit="true"
:canModify="true"
:fieldtype="costanti.FieldType.html"
@save="saveFieldElem"
@update_col="update_col"
>
</CMyFieldRec>
<br />
></CMyDimensioni>
</q-expansion-item>
<div v-if="enableEdit">
<q-expansion-item
@@ -2094,6 +1957,87 @@
@update:model-value="modifElem"
>
</q-toggle>
<q-select
rounded
style="width: 200px"
outlined
v-model="myel.catalogo.areadistampa.format"
:options="tools.SelectListFormatPDF"
@update:model-value="modifElem"
dense
label="Formato:"
emit-value
map-options
>
</q-select>
<div v-if="myel.catalogo.areadistampa.format.length > 1">Ratio: {{myel.catalogo.areadistampa.format[0] / myel.catalogo.areadistampa.format[1]}}</div>
<q-select
rounded
style="width: 200px"
outlined
v-model="myel.catalogo.areadistampa.scale"
:options="tools.SelectListScalePDF"
@update:model-value="modifElem"
dense
label="Scale:"
emit-value
map-options
>
</q-select>
<q-select
rounded
style="width: 200px"
outlined
v-model="myel.catalogo.areadistampa.scalecanvas"
:options="tools.SelectListQualityPDF"
@update:model-value="modifElem"
dense
label="Qualità:"
emit-value
map-options
>
</q-select>
<q-select
rounded
style="width: 150px"
outlined
v-model="myel.catalogo.areadistampa.orientation"
:options="tools.SelectListOrientamentoPDF"
@update:model-value="modifElem"
dense
label="Orientamento:"
emit-value
map-options
>
</q-select>
<q-select
rounded
style="width: 150px"
outlined
v-model="myel.catalogo.areadistampa.unit"
:options="tools.SelectListUnitPDF"
@update:model-value="modifElem"
dense
label="Unità:"
emit-value
map-options
>
</q-select>
<q-toggle
v-model="myel.catalogo.areadistampa.compress"
color="positive"
icon="fas fa-file-pdf"
label="Comprimi"
@update:model-value="modifElem"
>
</q-toggle>
<CBorders
label="Margini di Stampa (mm):"
v-model="myel.catalogo.areadistampa.margini"
@update:model-value="modifElem"
addstr=""
></CBorders>
</div>
</q-expansion-item>
</div>

1
src/components/CMyFieldRec/CMyFieldRec.ts
View File

@@ -263,6 +263,7 @@ export default defineComponent({
getclass,
myrec,
update_col,
getValue,
}
},
})

40
src/components/CMySize/CMySize.ts
View File

@@ -4,6 +4,8 @@ import { IOperators, ISize } from 'model'
import { useI18n } from '@/boot/i18n'
import { useQuasar } from 'quasar'
import { tools } from '@store/Modules/tools'
import { CMySlider } from '@src/components/CMySlider'
import { shared_consts } from '@/common/shared_vuejs'
@@ -40,19 +42,50 @@ export default defineComponent({
const $q = useQuasar()
const { t } = useI18n()
const ratio = ref(<number>0)
const keepRatio = ref(false)
const internalModel = reactive({ ...props.modelValue })
function modifValueWidth(value: any) {
function modifValueWidth(value: any, changeratio: boolean = true) {
emit('update:modelValue', { ...internalModel, width: value });
if (keepRatio.value && changeratio) {
let ris = tools.getValueAndSuffix(value)
let myheight = ris.value * ( 1 / ratio.value)
modifValueHeight(myheight + ris.suffix, false)
}
}
function modifValueHeight(value: any) {
function modifValueHeight(value: any, changeratio: boolean = true) {
emit('update:modelValue', { ...internalModel, height: value });
if (keepRatio.value && changeratio) {
let ris = tools.getValueAndSuffix(value)
let mywidth = ris.value * (ratio.value)
modifValueWidth(mywidth+ ris.suffix, false)
}
}
function modifValueRatio(value: any) {
// modifValueWidth(0)
}
// Sincronizzare i cambiamenti esterni con internalModel quando props cambiano
watch(() => props.modelValue, (newModel: any) => {
Object.assign(internalModel, newModel);
if (internalModel.height && internalModel.width) {
const heightValue = parseFloat(internalModel.height) || 1;
if (heightValue === 0) {
ratio.value = parseFloat(internalModel.width) / 1; // Usa 1 come fallback
} else {
ratio.value = parseFloat(internalModel.width) / heightValue;
}
}
}, { immediate: true });
return {
@@ -60,7 +93,10 @@ export default defineComponent({
shared_consts,
modifValueWidth,
modifValueHeight,
modifValueRatio,
internalModel,
ratio,
keepRatio,
}
}
})

18
src/components/CMySize/CMySize.vue
View File

@@ -11,6 +11,24 @@
</q-banner>
<div v-if="internalModel" class="column">
<q-toggle
v-model="keepRatio"
push
label="Mantieni le proporzioni"
rounded
glossy
toggle-color="primary"
></q-toggle>
<CMySlider
label="Ratio"
v-model="ratio"
:min="0.3"
:max="1.8"
color="green"
:disable="!keepRatio"
@update:model-value="modifValueRatio"
></CMySlider>
<CMySlider
label="Width:"
v-model="internalModel.width"

7
src/components/CMySlider/CMySlider.ts
View File

@@ -63,7 +63,12 @@ export default defineComponent({
} else if (mioval >= 100) {
return 5
} else {
return 1
if (props.max < 5) {
return (props.max - props.min) / 100
} else {
return 1
}
}
}