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

- Cataloghi: pagine, schede, formato

Browse Source
This commit is contained in:
Surya Paolo
2024-11-19 19:19:14 +01:00
parent 90ed545070
commit 5cd9bd40f6
103 changed files with 3593115 additions and 1603 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/CBarCode/CBarCode.scss Executable file
View File

@@ -0,0 +1,10 @@
.barcode-container {
padding: 10px;
display: flex;
justify-content: center;
align-items: center;
}
.text-barcode {
font-size: 0.75rem;
}

83
src/components/CBarCode/CBarCode.ts Executable file
View File

@@ -0,0 +1,83 @@
import { defineComponent, onMounted, ref, toRef, watch, toRefs } from 'vue'
import { tools } from '@src/store/Modules/tools'
import { useQuasar } from 'quasar'
import { useI18n } from '@/boot/i18n'
import { toolsext } from '@store/Modules/toolsext'
import JsBarcode from 'jsbarcode'
export default defineComponent({
name: 'CBarCode',
props: {
value: {
type: String,
required: true,
},
format: {
type: String,
required: false,
default: 'CODE128',
},
text: {
type: String,
required: false,
default: '',
},
width: {
type: Number,
required: false,
default: 2,
},
height: {
type: Number,
required: false,
default: 100,
},
fontsize: {
type: Number,
required: false,
default: 16,
},
},
setup(props, { emit }) {
const $q = useQuasar()
const { t } = useI18n();
// Converti le props in riferimenti reattivi
const { value, format, width, height, fontsize } = toRefs(props);
// Funzione per disegnare il codice a barre
const drawBarcode = () => {
JsBarcode("#C" + value.value, value.value, {
format: format.value,
width: width.value,
height: height.value,
displayValue: true,
lineColor: "#000",
font: "monospace",
margin: 1,
textMargin: 0,
marginTop: 0,
fontSize: fontsize.value,
textPosition:"bottom",
});
}
// Chiamato quando il componente è montato
onMounted(() => {
drawBarcode();
})
// Watcher per aggiornamenti delle proprietà
watch([value, format, width, height, fontsize], () => {
drawBarcode();
})
return {
tools,
toolsext,
fontsize,
}
},
})

13
src/components/CBarCode/CBarCode.vue Executable file
View File

@@ -0,0 +1,13 @@
<template>
<div class="row barcode-container justify-center">
<div class="text-center " :style="`font-size: ${fontsize}px`">{{text}}</div>
<svg :id="`C${value}`"></svg>
</div>
</template>
<script lang="ts" src="./CBarCode.ts">
</script>
<style lang="scss" scoped>
@import './CBarCode.scss';
</style>

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

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

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

@@ -10,12 +10,12 @@
{{ label }}
</q-banner>
<div class="row">
<div v-if="internalModel" class="column">
<CMySlider
label="Top:"
v-model="internalModel.top"
:min="10"
:max="3000"
:max="1000"
color="green"
addstr="px"
@update:model-value="modifValueTop"
@@ -24,7 +24,7 @@
label="Bottom:"
v-model="internalModel.bottom"
:min="10"
:max="3000"
:max="1000"
color="red"
addstr="px"
@update:model-value="modifValueBottom"
@@ -33,7 +33,7 @@
label="Left:"
v-model="internalModel.left"
:min="10"
:max="3000"
:max="1000"
color="orange"
addstr="px"
@update:model-value="modifValueLeft"
@@ -42,7 +42,7 @@
label="Right:"
v-model="internalModel.right"
:min="10"
:max="3000"
:max="1000"
color="fuchsia"
addstr="px"
@update:model-value="modifValueRight"

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

@@ -19,7 +19,6 @@ export default defineComponent({
Categoria: [],
Editore: [],
pdf: false,
backgroundimage: '',
}),
},
},

3
src/components/CCatalogoCard/CCatalogoCard.ts
View File

@@ -9,6 +9,7 @@ import { CCardState } from '../CCardState'
import { CCopyBtn } from '../CCopyBtn'
import { CMyValueDb } from '../CMyValueDb'
import { CPrice } from '../CPrice'
import { CBarCode } from '../CBarCode'
import { func_tools, toolsext } from '@store/Modules/toolsext'
@@ -77,7 +78,7 @@ export default defineComponent({
}),
},
},
components: { CTitleBanner, CCardState, CCopyBtn, CMyValueDb, VuePdfApp, CPrice },
components: { CTitleBanner, CCardState, CCopyBtn, CMyValueDb, VuePdfApp, CPrice, CBarCode },
setup(props, { emit }) {
const $q = useQuasar()
const { t } = useI18n()

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

@@ -4,12 +4,11 @@
' items-start q-gutter-sm': true,
}"
:style="
scheda.height
? ' height: ' + scheda.height + 'px !important; '
: ''
scheda.height ? ' height: ' + scheda.height + 'px !important; ' : ''
"
>
<q-spinner v-if="!endload" color="primary" size="3em" :thickness="2" />
<div
v-if="!!myproduct && !!myproduct.productInfo"
:class="{
@@ -57,7 +56,7 @@
justifyContent: 'center',
alignItems: 'flex-start',
gap: '0.5rem',
width: '100%',
width: scheda.dimensioni?.scheda_prodotto?.size.width ?? '100%',
}"
>
<q-img
@@ -82,8 +81,10 @@
scheda.posiz_text === costanti.POSIZ_TESTO.IN_BASSO
? '50%'
: '45%',
...(scheda.dimensioni.immagine_prodotto.width && {
width: scheda.dimensioni.immagine_prodotto.width + ' !important',
...(scheda.dimensioni?.immagine_prodotto?.size?.width && {
width:
scheda.dimensioni?.immagine_prodotto.size?.width +
' !important',
}),
display: 'block',
}"
@@ -120,8 +121,34 @@
}"
>
<div
v-if="scheda.testo_right"
:style="`line-height: ${scheda.line_height}%; `"
v-html="products.replaceKeyWordsByProduct(myproduct, scheda.text)"
v-html="products.replaceKeyWordsByProduct(myproduct, scheda.testo_right)"
></div>
<div v-if="scheda.barcode && scheda.barcode.show">
<CBarCode
: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}`"
>
</CBarCode>
</div>
</div>
<div
v-if="scheda.testo_bottom && scheda.testo_bottom.contenuto"
:style="{
width: '100%',
textAlign: 'center',
marginTop: '1rem',
}"
>
<div
:style="`line-height: ${scheda.line_height}%; `"
v-html="products.replaceKeyWordsByProduct(myproduct, scheda.testo_bottom)"
></div>
</div>
</div>

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

@@ -53,7 +53,6 @@ export default defineComponent({
Categoria: [],
Editore: [],
pdf: false,
backgroundimage: '',
}),
},
scheda: {

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

@@ -84,6 +84,24 @@ export default defineComponent({
{ label: 'In basso', value: costanti.POSIZ_TESTO.IN_BASSO },
{ label: 'A Destra', value: costanti.POSIZ_TESTO.A_DESTRA },
])
const formatOptions = ref([
{ label: 'auto', value: 'CODE128' },
{ label: 'EAN-13', value: 'EAN-13' },
{ label: 'UPC', value: 'upc' },
])
const fontSizeOptions = ref([
{ label: '9', value: '9' },
{ label: '10', value: '10' },
{ label: '11', value: '11' },
{ label: '12', value: '12' },
{ label: '13', value: '13' },
{ label: '14', value: '14' },
{ label: '15', value: '15' },
{ label: '16', value: '16' },
{ label: '18', value: '18' },
{ label: '20', value: '20' },
{ label: '22', value: '22' },
])
const animare = ref(0)
const slide = ref(0)
@@ -247,6 +265,62 @@ export default defineComponent({
selectedClasses.value = myel.value.class4.split(' ').filter(Boolean)
}
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}
}
if (recscheda.scheda && (!recscheda.scheda?.testo_right)) {
recscheda.scheda.testo_right = {contenuto: ''}
}
if (recscheda.scheda && (!recscheda.scheda?.barcode || !recscheda.scheda?.barcode.font)) {
recscheda.scheda.barcode = {
show: false,
format: '',
size: {
width: '2',
height: '100',
},
font: {
name: '',
size: 16,
}
}
}
}
}
if (myel.value.catalogo && !myel.value.catalogo.imgsfondo_def) {
myel.value.catalogo.imgsfondo_def = {
imagefile: '',
fit: '',
}
}
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: '',
},
}
}
}
}
function clickOnElem() {
@@ -267,7 +341,7 @@ export default defineComponent({
let maxorder = 0
myel.value.catalogo!.arrSchede?.forEach(scheda => {
if (scheda.order > maxorder) {
if (scheda?.order! > maxorder) {
maxorder = scheda.order
}
})
@@ -332,22 +406,24 @@ export default defineComponent({
right: '0px',
},
},
immagine_prodotto: {size: {
width: '150px',
height: '235px',
immagine_prodotto: {
size: {
width: '150px',
height: '235px',
},
margini: {
top: '0px',
bottom: '0px',
left: '0px',
right: '0px',
},
padding: {
top: '0px',
bottom: '0px',
left: '0px',
right: '0px',
},
},
margini: {
top: '0px',
bottom: '0px',
left: '0px',
right: '0px',
},
padding: {
top: '0px',
bottom: '0px',
left: '0px',
right: '0px',
},},
}
let newscheda: IMyScheda = {
@@ -359,9 +435,25 @@ export default defineComponent({
line_height: 100,
numschede_perRiga: 2,
numschede_perCol: 2,
text: '',
posiz_text: costanti.POSIZ_TESTO.A_DESTRA,
testo_right: {
contenuto: '',
},
testo_bottom: {
contenuto: '',
},
barcode: {
show: false,
format: '',
size: {
width: '2',
height: '100',
},
font: {
name: 'monospace',
size: 16,
}
},
productTypes: [],
excludeproductTypes: [],
editore: [],
@@ -480,6 +572,7 @@ export default defineComponent({
let iscatalogo = costanti.CATALOGO_FIELDS.includes(col.name)
let isscheda = costanti.SCHEDA_FIELDS.includes(col.name)
let isIImg = costanti.IMG_FIELDS.includes(col.name) && (col.fieldtype === costanti.FieldType.image)
if (col.fieldtype === costanti.FieldType.image) {
if (iscatalogo) {
@@ -487,6 +580,11 @@ export default defineComponent({
//console.log('SALVATO IN', col.name, newval.imagefile, 'RIS', myel.value.catalogo[col.name])
} else if (isscheda) {
rec[col.name] = newval.imagefile
} else if (isIImg) {
if (!rec[col.name]) {
rec[col.name] = {}
}
rec[col.name].imagefile = newval.imagefile
} else {
myel.value[col.name] = newval.imagefile
}
@@ -757,6 +855,8 @@ export default defineComponent({
delRecScheda,
SchedeOpt,
addProdSpeciale,
formatOptions,
fontSizeOptions,
}
},

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

@@ -1352,6 +1352,17 @@
@update:model-value="modifElem"
>
</q-toggle>
<q-input
dense
label="NomeFile PDF"
@update:model-value="modifElem"
v-model="myel.catalogo.pdf_filename"
filled
v-on:keyup.enter="saveElem"
>
</q-input>
<br />
<!--++AddCATALOGO_FIELDS-->
@@ -1414,6 +1425,34 @@
</q-select>
</div>
</q-expansion-item>
<q-expansion-item
dense
dense-toggle
expand-separator
label="Pagina di Default"
icon="fas fa-play-circle"
>
<div
v-if="myel.catalogo.dimensioni_def"
class="sfondo_margine row"
>
<CMySize
label="Pagina:"
v-model="myel.catalogo.dimensioni_def.pagina.size"
@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>
</div>
</q-expansion-item>
<q-expansion-item
dense
dense-toggle
@@ -1421,27 +1460,29 @@
label="Sfondi"
icon="fas fa-play-circle"
>
Nome File Web: {{ myel.catalogo.backgroundimage }}<br />
<CMyFieldRec
title="Per Web:"
table="catalogo"
:rec="myel.catalogo"
field="backgroundimage"
@update:model-value="modifElem"
:canEdit="true"
:canModify="true"
:fieldtype="costanti.FieldType.image"
@save="saveFieldElem"
>
</CMyFieldRec>
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>
Nome File Printable:
{{ myel.catalogo.backgroundimage_printable }}
<CMyFieldRec
title="Sfondo:"
title="Immagine Sfondo di default:"
table="catalogo"
:rec="myel.catalogo"
field="backgroundimage_printable"
field="imgsfondo_def"
@update:model-value="modifElem"
:canEdit="true"
:canModify="true"
@@ -1722,7 +1763,7 @@
<q-select
v-model="recscheda.scheda.bgSize"
:options="bgSizeOpt"
:options="tools.SelectListFit"
label="Dimensione Img"
options-dense
dense
@@ -1735,13 +1776,12 @@
>
</q-select>
Nome File Printable:
{{ recscheda.scheda.bgimg_printable }}
{{ recscheda.scheda.dimensioni.imgsfondo }}
<CMyFieldRec
title="Sfondo:"
table="myschedas"
:rec="recscheda.scheda"
field="bgimg_printable"
table="imgs"
:rec="recscheda.scheda.dimensioni"
field="imgsfondo"
@update:model-value="modifElem"
:canEdit="true"
:canModify="true"
@@ -1802,7 +1842,6 @@
"
@update:model-value="modifElem"
></CMySize>
</div>
</q-expansion-item>
@@ -1836,11 +1875,29 @@
@update:model-value="modifElem"
></CMySlider>
<div>
Parole Chiave: {autore} {titolo} {descrizione}
{descrizione_estesa} {prezzo}
</div>
<CMyFieldRec
title="Testo:"
table="myschedas"
:rec="recscheda.scheda"
field="text"
title="Testo a Destra:"
table="text"
:rec="recscheda.scheda.testo_right"
field="contenuto"
@update:model-value="modifElem"
:canEdit="true"
:canModify="true"
:fieldtype="costanti.FieldType.html"
@save="saveFieldElem"
@update_col="update_col"
>
</CMyFieldRec>
<CMyFieldRec
title="Testo in Basso :"
table="text"
:rec="recscheda.scheda.testo_bottom"
field="contenuto"
@update:model-value="modifElem"
:canEdit="true"
:canModify="true"
@@ -1851,7 +1908,56 @@
</CMyFieldRec>
</q-expansion-item>
<q-expansion-item
dense
dense-toggle
expand-separator
label="Codice a Barre"
icon="fas fa-play-circle"
>
<q-toggle
v-model="recscheda.scheda.barcode.show"
color="positive"
icon="fas fa-file-pdf"
label="Mostra Codice a Barre"
@update:model-value="modifElem"
>
</q-toggle>
<q-select
v-model="recscheda.scheda.barcode.format"
:options="formatOptions"
label="Formato"
options-dense
dense
emit-value
map-options
style="width: 100px"
@update:model-value="modifElem"
fill-input
text-color="white"
>
</q-select>
<q-select
v-model="recscheda.scheda.barcode.font.size"
:options="fontSizeOptions"
label="Font Size"
options-dense
dense
emit-value
map-options
style="width: 100px"
@update:model-value="modifElem"
fill-input
text-color="white"
>
</q-select>
<CMySize
label="Dimensioni:"
v-model="recscheda.scheda.barcode.size"
@update:model-value="modifElem"
:addstr="false"
></CMySize>
</q-expansion-item>
</div>
</q-tab-panel>
</q-tab-panels>
@@ -1872,7 +1978,7 @@
label="Altezza:"
v-model="myel.catalogo.first_page_height"
:min="0"
:max="4000"
:max="1200"
color="red"
@update:model-value="modifElem"
></CMySlider>
@@ -1880,7 +1986,7 @@
label="Larghezza:"
v-model="myel.catalogo.first_page_width"
:min="0"
:max="4000"
:max="1200"
color="red"
@update:model-value="modifElem"
></CMySlider>
@@ -1928,7 +2034,7 @@
label="Altezza:"
v-model="myel.catalogo.last_page_height"
:min="0"
:max="4000"
:max="1200"
color="red"
@update:model-value="modifElem"
></CMySlider>
@@ -1936,7 +2042,7 @@
label="Larghezza:"
v-model="myel.catalogo.last_page_width"
:min="0"
:max="4000"
:max="1200"
color="red"
@update:model-value="modifElem"
></CMySlider>
@@ -1988,38 +2094,6 @@
@update:model-value="modifElem"
>
</q-toggle>
<CMySlider
label="Margine per Pagina Stampa"
v-model="myel.catalogo.margine_paginaPrintable"
:disable="!myel.catalogo.printable"
:min="0"
:max="1000"
color="red"
addstr="px"
@update:model-value="modifElem"
></CMySlider>
<CMySlider
label="Margine per Riga"
v-model="myel.catalogo.margine_rigaPrintable"
:disable="!myel.catalogo.printable"
:min="0"
:max="1000"
color="red"
addstr="px"
@update:model-value="modifElem"
></CMySlider>
<CMySlider
label="Larghezza Pagina Stampa:"
v-model="myel.catalogo.widthpagPrintable"
:disable="!myel.catalogo.printable"
:min="0"
:max="4000"
color="red"
addstr="px"
@update:model-value="modifElem"
></CMySlider>
</div>
</q-expansion-item>
</div>

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

@@ -30,6 +30,11 @@ export default defineComponent({
required: false,
default: false,
},
addstr: {
type: Boolean,
required: false,
default: true,
},
},
setup(props, { emit }) {
const $q = useQuasar()

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

@@ -10,23 +10,23 @@
{{ label }}
</q-banner>
<div class="row">
<div v-if="internalModel" class="column">
<CMySlider
label="Width:"
v-model="internalModel.width"
:min="10"
:max="3000"
:max="1000"
color="green"
addstr="px"
:addstr="addstr ? 'px' : ''"
@update:model-value="modifValueWidth"
></CMySlider>
<CMySlider
label="Height:"
v-model="internalModel.height"
:min="10"
:max="3000"
:max="1000"
color="red"
addstr="px"
:addstr="addstr ? 'px' : ''"
@update:model-value="modifValueHeight"
></CMySlider>
</div>

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

@@ -51,13 +51,46 @@ export default defineComponent({
let mystr = props.modelValue + ''
return mystr.replace(props.addstr, '')
},
set: (value) => emit('update:modelValue', value + props.addstr)
set: (value) => emit('update:modelValue', value ? value + props.addstr : '')
})
function valoreinc() {
let mioval = parseFloat(sliderValue.value)
if (mioval >= 1000) {
return 20
} else if (mioval >= 500) {
return 10
} else if (mioval >= 100) {
return 5
} else {
return 1
}
}
function incrementValue() {
if (!sliderValue.value) {
sliderValue.value = '1'
} else {
sliderValue.value = (parseFloat(sliderValue.value) + valoreinc()) + ''; // Aumenta il valore
}
}
function decrementValue() {
if (sliderValue.value === '0') {
sliderValue.value = ''
} else if (!sliderValue.value) {
// niente
} else {
sliderValue.value = (parseFloat(sliderValue.value) - valoreinc()) + ''; // Diminuisci il valore
}
}
return {
t,
shared_consts,
sliderValue,
incrementValue,
decrementValue
}
}
})

22
src/components/CMySlider/CMySlider.vue
View File

@@ -1,17 +1,29 @@
<template>
<div class="q-pa-xs" style="width: 170px">
<q-badge color="primary"> {{ label }} {{ modelValue }} </q-badge>
<q-badge color="primary"> {{ label }} {{ modelValue }} </q-badge>
<div class="q-pa-xs row no-wrap">
<q-btn
icon="fas fa-minus"
@click="decrementValue"
:disable="disable || !sliderValue"
flat
/>
<q-input
style="width: 150px"
dense
v-model="sliderValue"
filled
:disable="disable"
>
</q-input>
<q-btn icon="fas fa-plus" @click="incrementValue" :disable="disable" flat />
<q-slider :disable="disable" v-model="sliderValue" :min="min" :max="max" :color="color" />
<q-slider
:disable="disable"
v-model="sliderValue"
:min="min"
:max="max"
:color="color"
/>
</div>
</template>

8
src/components/CProductCard/CProductCard.ts
View File

@@ -8,10 +8,9 @@ import { CTitleBanner } from '../CTitleBanner'
import { CCardState } from '../CCardState'
import { CCopyBtn } from '../CCopyBtn'
import { CMyFieldRec } from '../CMyFieldRec'
import { CBarCode } from '../CBarCode'
import { CMyValueDb } from '../CMyValueDb'
import VueBarcode from 'vue-barcode'
import { func_tools, toolsext } from '@store/Modules/toolsext'
import { IBaseOrder, IGasordine, IOrder, IOrderCart, IProduct } from '@src/model'
@@ -52,7 +51,10 @@ export default defineComponent({
default: false,
},
},
components: { CTitleBanner, CCardState, CCopyBtn, CMyFieldRec, CMyValueDb, VuePdfApp },
components: {
CTitleBanner, CCardState, CCopyBtn,
CMyFieldRec, CMyValueDb, VuePdfApp, CBarCode,
},
setup(props, { emit }) {
const $q = useQuasar()
const { t } = useI18n()

6
src/components/CProductCard/CProductCard.vue
View File

@@ -231,9 +231,9 @@
&nbsp; {{ t('ecomm.codice') }}: {{ myproduct.productInfo.code }}
</div>
<div v-if="false" class="barcode">
<barcode :value="myproduct.productInfo.code" format="EAN-13">
</barcode>
<vue-barcode></vue-barcode>
<CBarCode :value="myproduct.productInfo.code" format="EAN-13" text="ISBN:">
</CBarCode>
</div>
<div
v-if="