- attivita

- gestione degli script sul server
 - creato websocket per interagire con gli script del server.
This commit is contained in:
Surya Paolo
2024-08-29 23:31:54 +02:00
parent 79e874e3e0
commit 8f4ff8ff9c
39 changed files with 1373 additions and 303 deletions

View File

@@ -45,6 +45,11 @@ import { globals } from 'jest.config'
export default defineComponent({
name: 'CBarSelection',
props: {
ind: {
type: Number,
required: false,
default: -1,
},
table: {
type: String,
required: true,
@@ -80,6 +85,7 @@ export default defineComponent({
CMyUser, CMyRecCard, CMyCardPopup, CMyRecGrpCard, CMyCardGrpPopup, CMyCardCircuitPopup,
CMyRecCircuitCard
},
emits: ['clickButtBar'],
setup(props, { emit }) {
const $q = useQuasar()
const { t } = useI18n()
@@ -304,6 +310,10 @@ export default defineComponent({
globalStore.addNewRecord = tablesel.value
}
function clickButtBar(item: any) {
emit('clickButtBar', item)
}
created()
onMounted(mounted)
@@ -351,6 +361,7 @@ export default defineComponent({
toHome,
iconsel,
filtri,
clickButtBar,
}
}
})

View File

@@ -15,9 +15,7 @@
></q-btn>
</div>
<q-slide-transition>
<div
class="row no-wrap shadow-1"
style="height: 40px">
<div class="row no-wrap shadow-1">
<div v-if="$q.screen.gt.xs" class="col-1">
<q-avatar @click="toHome" class="imglink">
<img
@@ -27,7 +25,7 @@
/>
</q-avatar>
</div>
<div class="col-4">
<div class="col-fixed" style="width: 200px;">
<q-select
dense
v-model="tablesel"
@@ -57,6 +55,19 @@
</template>
</q-select>
</div>
<div class="col-auto"> <!-- to the right -->
<q-btn
v-if="tools.getLabelAddrec(ind)"
rounded
outline
color="primary"
class="q-ma-xs q-py-sm"
:label="tools.getLabelAddrec(ind)"
icon="fas fa-pencil-alt"
@click="clickButtBar(tools.BUTT_ADDREC)"
>
</q-btn>
</div>
<!--<q-btn
size="sm"

View File

@@ -20,6 +20,7 @@ import { useQuasar } from 'quasar'
export default defineComponent({
name: 'CFinder',
emits: ['clickButtBar'],
props: {
table: {
type: String,
@@ -88,6 +89,8 @@ export default defineComponent({
const col = ref(<IColGridTable>{})
const myGridRef = ref(<any>null)
/*
const idSectorServizi = computed(() => {
let myval: any = null
@@ -200,7 +203,7 @@ export default defineComponent({
else if (props.table === shared_consts.TABLES_MYHOSPS)
return 'digita delle parole da cercare nella descrizione dell\'Ospitalità'
else if (props.table === shared_consts.TABLES_ATTIVITAS)
return 'digita un\'attività da cercare nella descrizione dell\'Ospitalità'
return 'digita un\'attività da cercare'
return 'digita una parola da cercare'
})
@@ -1041,6 +1044,14 @@ export default defineComponent({
//
}
function clickButtBar(item: any) {
if (myGridRef.value) {
myGridRef.value.clickButtBar(item)
}
// emit('clickButtBar', item)
}
onMounted(mounted)
return {
@@ -1067,6 +1078,8 @@ export default defineComponent({
strextra,
myoptions,
mySortFieldsAvailable,
clickButtBar,
myGridRef,
}
},
})

View File

@@ -1,5 +1,5 @@
<template>
<CTitlePage :ind="ind" :table="table" :showBarSelection="showBarSelection">
<CTitlePage :ind="ind" :table="table" :showBarSelection="showBarSelection" @clickButtBar="clickButtBar">
<div class="bi-border-all">
<div class="q-ma-xs q-gutter-xs">
<div v-if="showFilterPersonal" class="text-center">
@@ -32,6 +32,7 @@
</div>
<CGridTableRec
ref="myGridRef"
v-if="searchList.length > 0"
:prop_mytable="table"
:options="tools.optionsTable(table)"
@@ -51,16 +52,18 @@
labelElemFind="trovati"
:choose_visutype="visuType"
:butt_modif_new="true && !noButtAdd"
noresultLabel="Il filtro selezionato non ha trovato nessun risultato"
:noresultLabel="t('grid.nosearchfound') + ' ' + (showMap ? t('grid.intheareamap') : '')"
:arrfilters="arrfilterand"
:filtercustom="filtercustom"
:prop_searchList="searchList"
:defaultnewrec="tools.getdefaultnewrec(table)"
labelBtnAddRow="NONE"
:prop_SortFieldsAvailable="mySortFieldsAvailable"
:labelBtnAddExtra="noButtAdd ? `` : (ind >= 0) ? `Aggiungi ` + costanti.MAINCARDS[ind].strsingolo : ''"
:labelBtnAddExtra_OFF="noButtAdd ? `` : (ind >= 0) ? `Aggiungi ` + costanti.MAINCARDS[ind].strsingolo : ''"
labelBtnAddExtra=""
:extraparams="tools.extraparams(table, {myrecfiltertoggle})"
:prop_showMap="showMap"
@clickButtBar="clickButtBar"
>
</CGridTableRec>
</div>

View File

@@ -7,7 +7,8 @@
min-width: 200px;
}
.tdclass, .trclass{
.tdclass,
.trclass {
min-height: 20px !important;
margin-top: 5px;
}
@@ -17,6 +18,7 @@
padding-right: 2px;
padding-top: 0;
padding-bottom: 0;
&__title {
font-size: 1rem;
}
@@ -29,7 +31,7 @@
}
}
.newrec_fields{
.newrec_fields {
display: flex;
padding: 2px;
margin: 2px;
@@ -43,12 +45,27 @@
}
.q-table__top{
.q-table__top {
padding-top: 0 !important;
}
.right-align-dialog .q-dialog {
right: 0; /* Allinea a destra */
left: auto; /* Disabilita l'allineamento a sinistra */
margin: 0; /* Rimuovi qualsiasi margine */
right: 0;
/* Allinea a destra */
left: auto;
/* Disabilita l'allineamento a sinistra */
margin: 0;
/* Rimuovi qualsiasi margine */
}
.flexible-width {
flex: 1;
/* permette al componente di espandersi */
max-width: 500px;
/* larghezza massima di 600px */
}
.hint_search{
color: gray;
}

View File

@@ -14,7 +14,9 @@ import {
ISearchList,
IPagination,
IParamDialog,
IMySkill
IMySkill,
ICoordLatLng,
ICoordGPS
} from 'model'
import { lists } from '@store/Modules/lists'
import { IParamsQuery } from 'model'
@@ -41,15 +43,18 @@ import { CMyCardPopup } from '@/components/CMyCardPopup'
import { CMyCardService } from '@/components/CMyCardService'
import { CMyCardGrpPopup } from '@/components/CMyCardGrpPopup'
import { CMyCardCircuitPopup } from '@/components/CMyCardCircuitPopup'
import { onBeforeRouteLeave, onBeforeRouteUpdate, beforeRouteEnter, useRouter } from 'vue-router'
import { onBeforeRouteLeave, onBeforeRouteUpdate, useRouter } from 'vue-router'
import { useRoute } from 'vue-router'
import { NavigationGuardNext, RouteLocationNormalized } from 'vue-router'
import { Dialog } from 'quasar'; // Assicurati di importare correttamente Dialog da Quasar.
import { getMapBoundaries } from '@src/store/Modules/geocodingmap'
import { isMap } from 'util/types'
export default defineComponent({
name: 'CGridTableRec',
emits: ['clickButtBar', 'savefilter'],
props: {
prop_mytitle: {
type: String,
@@ -329,6 +334,8 @@ export default defineComponent({
const drawmonth = ref(true)
const showMap = ref(false)
const showMapAtLeast1 = ref(false)
const mapInitialized = ref(false)
const newRecordBool = ref(false)
@@ -344,6 +351,8 @@ export default defineComponent({
const mycolumns = ref([] as any[])
const colkey = ref('')
const search = ref('')
const showSearchDialog = ref(false)
const myMapComp = ref(<any>null)
const tablesel = ref('')
const showSpin = ref(false)
@@ -361,6 +370,9 @@ export default defineComponent({
},
})
const boundariesMap = ref({ ne: 0, sw: 0 } as any)
const precboundariesMap = ref({ ne: 0, sw: 0 } as any)
const visupagedialog = ref(false)
const myrecdialog = ref(null)
const myIdRecDialog = ref(null)
@@ -412,6 +424,8 @@ export default defineComponent({
const ordinam = ref('')
const ordinam_desc = ref(false)
const autoaggiornaMappaSeMuovi = ref(true)
/*onBeforeRouteUpdate((to: any, from: any, next: any) => {
console.log('onBeforeRouteUpdate', 'to', to, 'from', from, 'next', next)
next()
@@ -419,7 +433,7 @@ export default defineComponent({
onBeforeRouteLeave((to: any, from: any, next: any) => {
console.log('onBeforeRouteLeave', 'to', to, 'from', from, 'next', next)
if (checkForChanges()) {
if ((editRecordBool.value || newRecordBool.value) && checkForChanges()) {
const answer = window.confirm(t('dialog.uscire'))
if (answer) {
next()
@@ -542,7 +556,7 @@ export default defineComponent({
watch(() => props.filtercustom, (to: any, from: any) => {
// console.log('filtercustom', to)
if (JSON.stringify(to) !== JSON.stringify(from)) {
console.log('REFRR props.filtercustom', to, from)
// console.log('REFRR props.filtercustom', to, from)
refresh()
}
})
@@ -1066,7 +1080,18 @@ export default defineComponent({
// console.log('params', params)
// console.log('props.extraparams', props.extraparams)
let paramsMap = null
if (showMap.value) {
paramsMap = {
searchByBoundariesMap: boundariesMap.value
}
}
params = { ...params, ...props.extraparams }
if (paramsMap) {
params = { ...params, ...paramsMap }
}
const data = await globalStore.loadTable(params)
@@ -1606,51 +1631,57 @@ export default defineComponent({
function mounted() {
console.log('mounted...')
searchList.value = props.prop_searchList
try {
searchList.value = props.prop_searchList
showMap.value = props.prop_showMap
boundariesMap.value = getMapBoundaries()
showMap.value = props.prop_showMap
showMapAtLeast1.value = props.prop_showMap
// console.log('GridTable mounted', tablesel.value)
// console.log('props.filtercustom', props.filtercustom)
// console.log('GridTable mounted', tablesel.value)
if (!!props.tablesList) {
canEdit.value = tools.getCookie(tools.CAN_EDIT, canEdit) === 'true'
tablesel.value = tools.getCookie('tablesel', tablesel.value)
}
// console.log('props.filtercustom', props.filtercustom)
myfilterand.value = props.filterdef
// myfiltercustom.value = props.filtercustom
// console.log('tablesel', tablesel)
if (tablesel.value === '') {
if (!!props.tablesList)
tablesel.value = props.tablesList[0].value
else
tablesel.value = mytable.value
}
if (!!props.tablesList) {
canEdit.value = tools.getCookie(tools.CAN_EDIT, canEdit) === 'true'
tablesel.value = tools.getCookie('tablesel', tablesel.value)
if (!shared_consts.TABLES_ORDER_DATE_UPDATED.includes(tablesel.value) &&
!shared_consts.TABLES_ORDER_DESCR.includes(tablesel.value)) {
// console.log('get cookie)')
let v1 = tools.getCookie('s_ordinamnew_' + tablesel.value, null)
if (v1)
ordinam.value = v1
let v2 = tools.getCookie('s_ordinamnew_des_' + tablesel.value, null)
if (v2)
ordinam_desc.value = v2
}
// console.log('2) tablesel', tablesel.value)
changeTable(tablesel.value, true)
// Aggiungi gli listener agli eventi della tastiera
document.addEventListener('keydown', onEscapeKey);
// window.addEventListener('popstate', onBackButton);
} catch (error) {
console.error('Err mounted', error)
}
myfilterand.value = props.filterdef
// myfiltercustom.value = props.filtercustom
// console.log('tablesel', tablesel)
if (tablesel.value === '') {
if (!!props.tablesList)
tablesel.value = props.tablesList[0].value
else
tablesel.value = mytable.value
}
if (!shared_consts.TABLES_ORDER_DATE_UPDATED.includes(tablesel.value) &&
!shared_consts.TABLES_ORDER_DESCR.includes(tablesel.value)) {
// console.log('get cookie)')
let v1 = tools.getCookie('s_ordinamnew_' + tablesel.value, null)
if (v1)
ordinam.value = v1
let v2 = tools.getCookie('s_ordinamnew_des_' + tablesel.value, null)
if (v2)
ordinam_desc.value = v2
}
// console.log('2) tablesel', tablesel.value)
changeTable(tablesel.value, true)
// Aggiungi gli listener agli eventi della tastiera
document.addEventListener('keydown', onEscapeKey);
// window.addEventListener('popstate', onBackButton);
}
function exec_func_table(table: string, func: number, par: IParamDialog) {
@@ -2396,6 +2427,7 @@ export default defineComponent({
// Questa funzione viene chiamata quando il dialogo cerca di chiudersi
const onEscapeKey = (event: KeyboardEvent) => {
// console.log('onEscapeKey', event.key)
if (event.key === 'Escape') {
event.preventDefault(); // Previene la chiusura da ESC
}
@@ -2420,6 +2452,91 @@ export default defineComponent({
cmdExt(costanti.CMD_SHOW_PAGE, id, null)
}
function updateMapBoundaries(ne: any, sw: any, updatedata: boolean) {
if (ne && sw) {
// console.log('updateMapBoundaries', ne, sw)
mapInitialized.value = true
boundariesMap.value = { ne, sw }
// Verifica se boundariesMap è variato da precedente valore,
// ma solo se ci sono nuovi pezzi delle mappa in più mostrati, quindi se è stato fatto un zoom in, non includerlo
const percrange = 0.15 //15%
const percrange_ne_lat = ne.lat - ((ne.lat - sw.lat) * percrange)
const percrange_ne_lng = ne.lng - ((ne.lng - sw.lng) * percrange)
const percrange_sw_lat = sw.lat + ((ne.lat - sw.lat) * percrange)
const percrange_sw_lng = sw.lng + ((ne.lng - sw.lng) * percrange)
if (precboundariesMap.value) {
if (precboundariesMap.value.ne.lat > percrange_ne_lat && precboundariesMap.value.ne.lng > percrange_ne_lng &&
precboundariesMap.value.sw.lat < percrange_sw_lat && precboundariesMap.value.sw.lng < percrange_sw_lng) {
updatedata = false
// console.log('updateMapBoundaries', 'updatedata', updatedata)
} else {
// updatedata = false
}
}
if (updatedata) {
precboundariesMap.value = boundariesMap.value
// console.log(' doSearch in updateMapBoundaries... ', ne, sw)
if (autoaggiornaMappaSeMuovi.value) {
doSearch()
} else {
}
}
}
}
function updateMapZoomOut() {
// console.log('updateMapZoomOut')
doSearch()
}
function clickButtBar(idbutt: any) {
if (idbutt === tools.BUTT_ADDREC) {
createNewRecord()
}
}
function getLabelAreaMap(conHtml: boolean = true) {
if (showMap.value) {
if (conHtml) {
return '<span class="hint_search">' + translate('grid.intheareamap') + '</span>'
} else {
return translate('grid.intheareamap')
}
}
return ''
}
function gotoCurrentLocation() {
myMapComp.value.gotoCurrentLocation()
}
function showInMap(rec: any) {
visupagedialog.value = false
if (!showMap.value) {
showMapAtLeast1.value = true
showMap.value = true
}
if (myMapComp.value && mapInitialized.value) {
myMapComp.value.showInMap(rec)
}
}
created()
return {
@@ -2533,6 +2650,15 @@ export default defineComponent({
ifShowMonth,
showMap,
clickMarker,
updateMapBoundaries,
updateMapZoomOut,
clickButtBar,
showSearchDialog,
getLabelAreaMap,
myMapComp,
gotoCurrentLocation,
showInMap,
showMapAtLeast1,
}
}
})

View File

@@ -35,7 +35,11 @@
<q-space></q-space>
<div v-if="butt_modif_new" class="row justify-center">
<q-btn
v-if="mytable && !shared_consts.TABLES_FINDER.includes(mytable) && !showMap"
v-if="
mytable &&
!shared_consts.TABLES_FINDER.includes(mytable) &&
!showMap
"
rounded
dense
size="sm"
@@ -241,13 +245,16 @@
<div v-if="prop_search || canEdit">
<div
v-if="searchList && finder"
class="row justify-evenly q-mb-sm q-mx-sm"
class="row justify-between q-mb-sm q-mx-sm"
>
<q-btn
class=""
dense
:label="!showfilter ? $t('grid.openfilter') : $t('grid.closefilter')"
:label="
!showfilter ? $t('grid.openfilter') : $t('grid.closefilter')
"
color="positive"
icon="fas fa-filter"
:icon="!showfilter ? 'fas fa-filter' : 'fas fa-arrow-up'"
@click="showfilter = !showfilter"
><q-badge
v-if="getNumFilterSelected()"
@@ -259,55 +266,31 @@
</q-badge>
</q-btn>
<q-btn
v-if="prop_search"
class=""
dense
color="orange"
icon="fas fa-bell"
label="Notifiche"
@click="showNotification = !showNotification"
></q-btn>
</div>
<div v-if="prop_search" :class="'q-mr-sm ' + ($q.screen.lt.sm ? ' full-width ' : '')">
<q-input
v-model="search"
filled
dense
type="search"
debounce="500"
:hint="hint"
:error-message="noresultLabel"
:error="getNumRecFromQuery() === 0 && !startsearch"
label="Cerca"
v-on:keyup.enter="doSearch"
:label="t('grid.search')"
color="primary"
icon="fas fa-search"
@click="showSearchDialog = true"
>
<template v-slot:prepend>
<q-spinner-oval v-if="startsearch" color="primary" size="1em" />
<q-icon v-else name="search" />
</template>
<template v-slot:after>
<q-select
v-if="prop_SortFieldsAvailable.length > 0"
:behavior="'menu'"
rounded
outlined
dense
v-model="ordinam"
:options="prop_SortFieldsAvailable"
label="Ordinamento:"
emit-value
map-options
style="min-width: 120px"
>
</q-select>
<q-btn
dense
label=""
color="primary"
@click="doSearch"
icon="fas fa-search"
></q-btn>
</template>
</q-input>
</q-btn>
<q-btn-toggle
v-if="shared_consts.TABLES_VISU_MAP.includes(mytable)"
v-model="showMap"
push
glossy
dense
toggle-color="secondary"
:options="[
{
label: t('grid.showmap'),
value: true,
icon: 'fas fa-map-marked-alt',
},
{ label: t('grid.showlist'), value: false, icon: 'fas fa-list' },
]"
/>
</div>
<q-space></q-space>
@@ -336,12 +319,14 @@
</q-select>
</div>
<div class="q-ma-sm">
<div v-if="true" class="">
<div v-if="pagination.rowsNumber === 1 && prop_search">
{{ pagination.rowsNumber }} elemento trovato
<span v-html="getLabelAreaMap()"></span>
</div>
<div v-if="pagination.rowsNumber > 1 && prop_search">
{{ pagination.rowsNumber }} {{ labelElemFind }}
<span v-html="getLabelAreaMap()"></span>
</div>
</div>
@@ -357,31 +342,21 @@
v-if="$q.screen.gt.xs"
v-model="myvertical"
:val="0"
label="Tabella"
:label="$t('grid.table')"
/>
</div>
</div>
<div v-if="shared_consts.TABLES_VISU_MAP.includes(mytable)" class="row justify-center q-ma-sm">
<q-btn-toggle
v-model="showMap"
push
glossy
dense
toggle-color="primary"
:options="[
{label: t('grid.showmap'), value: true, icon: 'fas fa-map-marked-alt'},
{label: t('grid.showlist'), value: false, icon: 'fas fa-list-alt'},
]"
/>
</div>
<div v-if="showMap">
<div
v-if="showMapAtLeast1"
v-show="showMap">
<CMapByTable
v-if="serverData && serverData.length > 0"
ref="myMapComp"
mytable=""
:arrcord="serverData"
@clickMarker="clickMarker"
@updateMapBoundaries="updateMapBoundaries"
@updateMapZoomOut="updateMapZoomOut"
>
</CMapByTable>
</div>
@@ -869,7 +844,10 @@
v-if="prop_search || canEdit"
class="row justify-center vertical-middle"
>
<div v-if="prop_search" class="q-mr-sm full-width">
<div
v-if="prop_search"
:class="'q-mr-sm ' + ($q.screen.lt.sm ? ' full-width' : '')"
>
<q-input
v-model="search"
filled
@@ -1159,6 +1137,80 @@
/>
</q-page-sticky>-->
<q-dialog
v-model="showSearchDialog"
transition-show="slide-up"
transition-hide="slide-down"
class="q-dialog-fullscreen no-padding-dialog"
>
<q-card class="dialog_card q-dialog-on-top no-padding q-my-sm">
<q-card-section class="no-padding">
<q-input
:class="'q-mr-sm full-width '"
v-model="search"
filled
autofocus
type="search"
:hint="
(pagination.rowsNumber === 1 && prop_search)
? `${pagination.rowsNumber} ` +
t('grid.found') +
' ' +
getLabelAreaMap(false)
: ((pagination.rowsNumber > 1 && prop_search)
? `${pagination.rowsNumber} ${labelElemFind}` +
' ' +
getLabelAreaMap(false)
: '')
"
debounce="500"
:error-message="noresultLabel"
:error="getNumRecFromQuery() === 0 && !startsearch"
:label="hint ? hint : $t('grid.search')"
v-on:keyup.enter="doSearch"
>
<template v-slot:prepend>
<q-spinner-oval v-if="startsearch" color="primary" size="1em" />
<q-icon v-else name="search" />
</template>
<template v-slot:append>
<q-btn
v-if="showMap"
dense
flat
text-color="primary"
@click="gotoCurrentLocation"
icon="fas fa-crosshairs"
class="q-ml-sm"
></q-btn>
</template>
<template v-slot:after>
<q-select
v-if="prop_SortFieldsAvailable.length > 0"
:behavior="'menu'"
rounded
outlined
v-model="ordinam"
:options="prop_SortFieldsAvailable"
:label="$t('grid.order')"
emit-value
map-options
style="min-width: 120px"
>
</q-select>
<!-- Pulsante per ottenere la posizione GPS -->
<q-btn
label=""
color="primary"
@click="doSearch"
icon="fas fa-search"
></q-btn>
</template>
</q-input>
</q-card-section>
</q-card>
</q-dialog>
<q-dialog
v-model="visupagedialog"
transition-show="slide-up"
@@ -1194,7 +1246,8 @@
:table="mytable"
:prop_myrec="myrecdialog"
:idRec="myIdRecDialog"
:showAnteprima="!$q.screen.lt.sm ? false : showMap"
:showAnteprima="false"
@showInMap="showInMap"
>
</CMyCardService>
<CMyCardPopup v-else :table="mytable" :prop_myrec="myrecdialog">

View File

@@ -34,3 +34,4 @@
right: 20px; /* Distanza dal lato destro */
z-index: 1000; /* Assicurati che sia visibile sopra la mappa */
}

View File

@@ -1,19 +1,23 @@
import { tools } from '@store/Modules/tools'
import { useQuasar } from 'quasar'
import { PropType, defineComponent, onMounted, ref, computed, toRef, watch } from 'vue'
import { PropType, defineComponent, onMounted, ref, toRaw, computed, toRef, watch, shallowRef } from 'vue'
import 'leaflet/dist/leaflet.css'
// @ts-ignore
import * as L from 'leaflet'
import '../../utils/leaflet-extensions'; // Importa le estensioni
import 'leaflet.markercluster/dist/MarkerCluster.css'
import 'leaflet.markercluster/dist/MarkerCluster.Default.css'
import 'leaflet.markercluster'
import { useUserStore } from '@src/store/UserStore'
import { useGlobalStore } from '@src/store/globalStore'
import { useI18n } from '@src/boot/i18n'
import { ICoordGPS } from '@src/model'
export default defineComponent({
name: 'CMapByTable',
emits: ['clickMarker', 'updateMapBoundaries', 'updateMapZoomOut'],
props: {
mytable: {
type: String,
@@ -27,6 +31,7 @@ export default defineComponent({
},
setup(props, { emit }) {
const $q = useQuasar()
const { t } = useI18n()
const userStore = useUserStore()
const globalStore = useGlobalStore()
@@ -34,23 +39,31 @@ export default defineComponent({
const iconHeight = ref(40)
const zoom = ref(8)
const map = ref(<any>null);
const map = shallowRef(<any>null);
const visiblePosition = ref(false)
const markers = ref(<any>null);
const markers = shallowRef(<any>null);
const isTrackingLocation = ref(false)
const currentMarker = ref<L.Marker | null>(null)
const debug = ref(tools.isDevelop())
const currentMarkerPositionGPS = shallowRef<L.Marker | null>(null)
const centerCoordinates = ref<{ lat: number; lng: number }>({ lat: 0, lng: 0 }); //
const arrMarkers = ref(<any>[])
const recordShowed = ref(<any>null)
const markerShowed = shallowRef<any>(null)
const markerTemporaneo = shallowRef<L.Marker | null>(null)
const mapOptions = ref(<any>{
zoomControl: true,
zoomAnimation: true,
zoomControl: false,
zoomAnimation: false,
fadeAnimation: true,
markerZoomAnimation: false, //true
markerZoomAnimation: true,
})
const tileLayerOptions = {
@@ -96,6 +109,10 @@ export default defineComponent({
const arrcord = toRef(props, 'arrcord')
const precZoomLevel = ref(0)
const debounceTimer = ref(<any>null)
watch(() => visiblePosition.value, () => {
if (visiblePosition.value === true) {
getCurrentPosition()
@@ -109,7 +126,7 @@ export default defineComponent({
}
function myheight() {
return $q.screen.height - 150
return $q.screen.height - 220
}
const iconUrl = computed(() => {
@@ -169,7 +186,7 @@ export default defineComponent({
const lng = e.latlng.lng
// Fai qualcosa con le coordinate, ad esempio stamparle in console
console.log(`Latitudine: ${lat}, Longitudine: ${lng}`)
// console.log(`Latitudine: ${lat}, Longitudine: ${lng}`)
}
function getIconName(myrec: any) {
@@ -180,29 +197,107 @@ export default defineComponent({
return globalStore.getIconBySector(sectId)
}
function updateBoundaries(updatedata: boolean) {
if (map.value) {
// Get the boubdaries of the map showed
const bounds = map.value.getBounds();
// tojson
tools.setCookie(tools.COOK_MAPBOUNDS + 'ne', tools.objToStr(bounds.getNorthEast()))
tools.setCookie(tools.COOK_MAPBOUNDS + 'sw', tools.objToStr(bounds.getSouthWest()))
// Update Map Boundaries to the Parent
emit('updateMapBoundaries', bounds.getNorthEast(), bounds.getSouthWest(), updatedata);
}
}
function updateMapZoomOut() {
emit('updateMapZoomOut', map.value.getZoom());
}
/**
* Updates the center coordinates and zoom level of the map, and saves them in cookies.
*
* @return {void} This function does not return a value.
*/
function onMoveEnd() {
const center = map.value.getCenter(); // Ottieni le coordinate centrali
centerCoordinates.value = { lat: center.lat, lng: center.lng }; // Salva le coordinate
const currentZoomLevel = map.value.getZoom();
tools.setCookie('last_lat', center.lat)
tools.setCookie('last_lng', center.lng)
tools.setCookie('zoom', currentZoomLevel)
updateBoundaries(true)
precZoomLevel.value = map.value.getZoom();
}
const onZoomEvent = () => {
// Annulla il timer precedente se presente
if (debounceTimer.value) {
clearTimeout(debounceTimer.value);
}
// Inizia un nuovo timer di 1 secondo
debounceTimer.value = setTimeout(() => {
const currentZoomLevel = map.value.getZoom();
if (currentZoomLevel < precZoomLevel.value) {
// Aggiorna i dati della mappa
updateMapZoomOut();
// Aggiorna il livello di zoom precedente
precZoomLevel.value = currentZoomLevel;
}
}, 500);
}
const onCustomButtonClick = () => {
alert("Pulsante personalizzato cliccato!");
// Logica aggiuntiva qui
};
function initMap() {
if (true) {
const getLastCoord = [tools.getCookie('last_lat', 42.71), tools.getCookie('last_lng', 12.934)]
console.log('getLastCoord', getLastCoord)
zoom.value = tools.getCookie('zoom', 8, true)
console.log('getLastCoord', getLastCoord, 'zoom', zoom.value)
const newmapopt = { ...mapOptions.value,
// console.log('getLastCoord', getLastCoord, 'zoom', zoom.value)
const newmapopt = {
...mapOptions.value,
zoom: zoom.value,
center: getLastCoord
center: getLastCoord
}
map.value = L.map('map', newmapopt);
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', tileLayerOptions).addTo(map.value);
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', tileLayerOptions)
.addTo(map.value);
// Aggiunta dei controlli di zoom
const zoomControl = L.control.zoom({
position: "topright",
}).addTo(map.value);
// Aggiunta di un pulsante personalizzato
// @ts-ignore
const customButton = L.control({ position: "topright" });
customButton.onAdd = function () {
const button = L.DomUtil.create("button", "custom-zoom-button");
button.innerHTML = t('grid.showlist'); // Testo del pulsante
button.onclick = onCustomButtonClick; // Gestore evento click
return button;
};
// customButton.addTo(map.value);
map.value.on('moveend', () => {
const center = map.value.getCenter(); // Ottieni le coordinate centrali
centerCoordinates.value = { lat: center.lat, lng: center.lng }; // Salva le coordinate
const currentZoomLevel = map.value.getZoom();
tools.setCookie('last_lat', center.lat)
tools.setCookie('last_lng', center.lng)
tools.setCookie('zoom', currentZoomLevel)
// console.log('Coordinate centrali aggiornate:', centerCoordinates.value);
onMoveEnd()
});
map.value.on("zoomend", onZoomEvent);
// @ts-ignore
markers.value = L.markerClusterGroup();
@@ -210,88 +305,139 @@ export default defineComponent({
// Assicuriamoci che la mappa sia completamente caricata prima di procedere
map.value.whenReady(() => {
console.log('Mappa inizializzata e pronta');
// console.log('Mappa inizializzata e pronta');
updateMap();
precZoomLevel.value = map.value.getZoom()
});
}
}
function createSingleMarkerByCoordinates(rec: any) {
const markerHtml = `
<div class="marker-wrapper">
<img src="images/marker-shadow.png" class="marker-shadow" alt="Shadow" />
<img src="images/icon.png" class="marker-icon" alt="" />
<div class="marker-circle"></div>
<div class="marker-mini-icon ${getIconName(rec)}"></div>
</div>`;
const markerIcon = L.divIcon({
className: 'custom-marker', // Classe CSS personalizzata
html: markerHtml,
iconSize: [40, 40],
iconAnchor: [22, 35],
popupAnchor: [-6, -36],
shadowUrl: 'images/marker-shadow.png',
shadowSize: [60, 30],
shadowAnchor: [22, 35]
});
// @ts-ignore
let each_marker = new L.marker(
[rec.coordinate_gps.coordinates[1], rec.coordinate_gps.coordinates[0]],
{
icon: markerIcon
}
)
.bindPopup(() => {
let container = L.DomUtil.create('div');
let strHTML = `<span class="fake-link">${rec.descr}</span>`
if (debug.value) {
// strHTML += `<br> Lat: ${rec.coordinate_gps.coordinates[1]} <br> Lng: ${rec.coordinate_gps.coordinates[0]}`;
}
container.innerHTML = strHTML
let fakeLink: any = container.querySelector('.fake-link');
L.DomEvent.on(fakeLink, 'click', (e) => {
L.DomEvent.stopPropagation(e);
ApriScheda(rec._id);
each_marker.closePopup();
});
return container;
}, { closeButton: false }) // Rimuove il pulsante di chiusura dal popup
.on('click', () => {
if (!$q.screen.lt.sm) {
markerClick(rec._id)
}
})
.on('mouseover', () => {
if (!$q.screen.lt.sm) {
each_marker.openPopup()
}
})
.on('mouseout', () => {
if (!$q.screen.lt.sm) {
each_marker.closePopup()
}
});
// Salva l'ID del mio record, per poi poterlo trovare
each_marker.mytable = props.mytable
each_marker.idRec = rec._id
// Aggiungi il marker all'array in memoria
arrMarkers.value.push(each_marker)
return each_marker
}
function updateMap() {
if (!map.value || !markers.value) return;
if (map.value) {
markers.value.clearLayers();
// console.log('updateMap')
markers.value.clearLayers()
arrMarkers.value = []
for (const rec of arrcord.value) {
if (rec.coordinate_gps.coordinates) {
const markerHtml = `
<div class="marker-wrapper">
<img src="images/marker-shadow.png" class="marker-shadow" alt="Shadow" />
<img src="images/icon.png" class="marker-icon" alt="${name}" />
<div class="marker-circle"></div>
<!-- Aggiungi l'icona aggiuntiva al centro -->
<div class="marker-mini-icon ${getIconName(rec)}"></div>
</div> `;
const each_marker = createSingleMarkerByCoordinates(rec)
const markerIcon = L.divIcon({
className: 'custom-marker', // Classe CSS personalizzata
html: markerHtml,
iconSize: [40, 40],
iconAnchor: [22, 35],
popupAnchor: [-6, -36],
shadowUrl: 'images/marker-shadow.png',
shadowSize: [60, 30],
shadowAnchor: [22, 35]
});
// @ts-ignore
let each_marker = new L.marker(
[rec.coordinate_gps.coordinates[1], rec.coordinate_gps.coordinates[0]],
{
icon: markerIcon
},
)
.bindPopup(() => {
let container = L.DomUtil.create('div');
container.innerHTML = `
<span class="fake-link">${rec.descr}</span>
`;
let fakeLink: any = container.querySelector('.fake-link');
L.DomEvent.on(fakeLink, 'click', (e) => {
L.DomEvent.stopPropagation(e);
ApriScheda(rec._id);
each_marker.closePopup();
});
return container;
}, { closeButton: false }) // Rimuove il pulsante di chiusura dal popup
.on('click', () => {
if (!$q.screen.lt.sm) {
markerClick(rec._id)
}
})
.on('mouseover', () => {
if (!$q.screen.lt.sm) {
each_marker.openPopup()
}
})
.on('mouseout', () => {
if (!$q.screen.lt.sm) {
each_marker.closePopup()
}
});
markers.value.addLayer(each_marker);
}
}
// Aggiungi il gruppo di marker cluster alla mappa
map.value.addLayer(markers.value);
// console.log('markerShowed', markerShowed.value)
if (markerShowed.value) {
markerShowed.value.closePopup()
const trovatomarker = arrMarkers.value.find((marker: any) => markerShowed.value && (marker.idRec === markerShowed.value.idRec))
if (!trovatomarker) {
// non presente, quindi lo aggiunge
markers.value.addLayer(markerShowed.value);
} else {
markerShowed.value = trovatomarker
}
markerShowed.value.openPopup(); // Mostra il popup
}
if (visiblePosition.value && currentMarkerPositionGPS.value) {
// Aggiungi un marker per la posizione attuale, se desiderato
/*const tempmark = L.marker(
[currentMarkerPositionGPS.value.getLatLng().lat, currentMarkerPositionGPS.value.getLatLng().lng],
{ icon: currentLocationIcon }
).addTo(map.value)
.bindPopup('Posizione attuale')
// .openPopup();
currentMarkerPositionGPS.value = tempmark*/
markers.value.addLayer(currentMarkerPositionGPS.value);
}
updateBoundaries(false)
}
}
@@ -303,38 +449,59 @@ export default defineComponent({
emit('clickMarker', id)
}
function gotoCurrentLocation() {
getCurrentPosition();
}
function flyToCoord(lat: number, lng: number, callback: () => void) {
try {
map.value.off('moveend', callback)
if (map.value.getZoom() < 13) {
zoom.value = 13;
} else {
zoom.value = map.value.getZoom()
}
// Centra la mappa sulla posizione attuale
map.value.flyTo([lat, lng], zoom.value, {
animate: true,
duration: 0.7
})
// Usa l'evento 'moveend' per sapere quando l'animazione è completata
map.value.on('moveend', callback);
} catch (error) {
}
}
const getCurrentPosition = () => {
if (navigator.geolocation) {
isTrackingLocation.value = true; // Setta lo stato a "in tracciamento"
navigator.geolocation.getCurrentPosition(
position => {
const lat = position.coords.latitude;
const lng = position.coords.longitude;
const lat = position.coords.latitude
const lng = position.coords.longitude
flyToCoord(lat, lng, () => {
if (currentMarkerPositionGPS.value) {
map.value.removeLayer(currentMarkerPositionGPS.value)
}
// Aggiungi un marker per la posizione attuale, se desiderato
currentMarkerPositionGPS.value = L.marker(
[lat, lng],
{ icon: currentLocationIcon }
).addTo(map.value)
.bindPopup('Posizione attuale')
// .openPopup();
isTrackingLocation.value = false; // Resetta lo stato di tracciamento
if (zoom.value < 12) {
zoom.value = 12;
}
// Centra la mappa sulla posizione attuale
map.value.flyTo([lat, lng], zoom.value, {
animate: true,
duration: 0.5
})
// setView([lat, lng], map.getZoom())
if (currentMarker.value) {
map.value.removeLayer(currentMarker.value);
}
// Aggiungi un marker per la posizione attuale, se desiderato
currentMarker.value = L.marker(
[lat, lng],
{ icon: currentLocationIcon }
).addTo(map.value)
.bindPopup('Posizione attuale')
.openPopup();
isTrackingLocation.value = false; // Resetta lo stato di tracciamento
},
error => {
console.error('Errore nel recupero della posizione:', error);
@@ -347,12 +514,67 @@ export default defineComponent({
}
const removeCurrentMarker = () => {
if (currentMarker.value) {
map.value.removeLayer(currentMarker.value); // Rimuovi il marker dalla mappa
currentMarker.value = null; // Resetta il riferimento
if (currentMarkerPositionGPS.value) {
map.value.removeLayer(currentMarkerPositionGPS.value); // Rimuovi il marker dalla mappa
currentMarkerPositionGPS.value = null; // Resetta il riferimento
}
}
function findMarkerByIdRec(id: any) {
const marker = arrMarkers.value.find((marker: any) => {
return marker.idRec === id;
});
return marker;
}
function showInMap(rec: any) {
// console.log('showInMap', rec)
// Find if is already in the map
let existingMarker = findMarkerByIdRec(rec._id)
if (!existingMarker) {
if (markerTemporaneo.value) {
// Rimuovo il marker temporaneo usato in precedenza
map.value.removeLayer(markerTemporaneo.value)
markerTemporaneo.value = null
}
// Se non la trovo nella mappa, allora inserisco un nuovo marker temporaneo e lo aggiungo alla mappa
existingMarker = createSingleMarkerByCoordinates(rec); // Crea un nuovo marker
markers.value.addLayer(existingMarker);
// console.log('***** Added marker TEMPORANEO', existingMarker)
markerTemporaneo.value = existingMarker
}
if (existingMarker) {
const lat = existingMarker.getLatLng().lat
const lng = existingMarker.getLatLng().lng
recordShowed.value = rec
markerShowed.value = existingMarker
// console.log('flyToCoord START ... ', lat, lng)
// Passa una callback dopo il volo
flyToCoord(lat, lng, () => {
// console.log('flyToCoord END ... ', lat, lng)
if (markerShowed.value) {
//console.log('openPopup markerShowed', markerShowed.value)
if (markerShowed.value.closePopup) {
markerShowed.value.openPopup(); // Mostra il popup
}
}
});
}
}
return {
mywidth,
myheight,
@@ -369,6 +591,8 @@ export default defineComponent({
getCurrentPosition,
isTrackingLocation,
visiblePosition,
gotoCurrentLocation,
showInMap,
}
}
})

View File

@@ -1,19 +1,6 @@
<template>
<div>
<div id="map" :style="`height:${myheight()}px; width:99%`">
<q-btn
@click="getCurrentPosition"
color="primary"
:disable="isTrackingLocation"
:push="visiblePosition"
/>
<q-toggle
class="locate-button"
icon="fas fa-map-marker-alt"
round
v-model="visiblePosition"
color="primary"
/>
</div>
</div>
</template>

View File

@@ -1,6 +1,6 @@
import { tools } from '@store/Modules/tools'
import { useQuasar } from 'quasar'
import { PropType, defineComponent, onMounted, ref, computed, nextTick } from 'vue'
import { PropType, defineComponent, onMounted, ref, computed, nextTick, shallowRef } from 'vue'
import 'leaflet/dist/leaflet.css'
// @ts-ignore
@@ -8,6 +8,7 @@ import * as L from 'leaflet'
import 'leaflet.markercluster/dist/MarkerCluster.css'
import 'leaflet.markercluster/dist/MarkerCluster.Default.css'
import 'leaflet.markercluster'
import '../../utils/leaflet-extensions'; // Importa le estensioni
import { useUserStore } from '@src/store/UserStore'
import { useGlobalStore } from '@src/store/globalStore'
@@ -22,7 +23,7 @@ export default defineComponent({
const iconWidth = ref(25)
const iconHeight = ref(40)
const map = ref(<any>null)
const map = shallowRef(<any>null)
const zoom = ref(6)
const center = ref(<any>[42.71, 12.934])
const arrprovince = ref(<any>[])

View File

@@ -1,12 +1,13 @@
import { tools } from '@store/Modules/tools'
import { useQuasar } from 'quasar'
import { defineComponent, onMounted, onBeforeUnmount, ref, watch, computed, PropType, nextTick } from 'vue'
import { defineComponent, onMounted, onBeforeUnmount, ref, watch, computed, PropType, nextTick, shallowRef } from 'vue'
import 'leaflet/dist/leaflet.css'
import * as L from 'leaflet'
import 'leaflet.markercluster/dist/MarkerCluster.css'
import 'leaflet.markercluster/dist/MarkerCluster.Default.css'
import 'leaflet.markercluster'
import '../../utils/leaflet-extensions'; // Importa le estensioni
import { useUserStore } from '@src/store/UserStore'
@@ -40,7 +41,7 @@ export default defineComponent({
const iconWidth = ref(25)
const iconHeight = ref(41)
const map = ref<L.Map | null>(null)
const map = shallowRef<L.Map | null>(null)
const marker = ref<L.Marker | null>(null)
const suggestions = ref([]);
const isMapDialogOpen = ref(false)
@@ -88,7 +89,7 @@ export default defineComponent({
});
watch(() => localCoordinates.value.lng, (newValue) => {
watch(() => localCoordinates.value.lat, (newValue) => {
if (fineLoad.value) {
modificato.value = true
}

View File

@@ -1,12 +1,13 @@
import { tools } from '@store/Modules/tools'
import { useQuasar } from 'quasar'
import { defineComponent, onMounted, ref, watch, computed } from 'vue'
import { defineComponent, onMounted, ref, shallowRef, watch, computed } from 'vue'
import 'leaflet/dist/leaflet.css'
import * as L from 'leaflet'
import 'leaflet.markercluster/dist/MarkerCluster.css'
import 'leaflet.markercluster/dist/MarkerCluster.Default.css'
import 'leaflet.markercluster'
import '../../utils/leaflet-extensions'; // Importa le estensioni
import { useUserStore } from '@src/store/UserStore'
@@ -22,7 +23,7 @@ export default defineComponent({
const iconWidth = ref(25)
const iconHeight = ref(41)
const map = ref<L.Map | null>(null)
const map = shallowRef<L.Map | null>(null)
const marker = ref<L.Marker | null>(null)
const address = ref('')
const suggestions = ref([]);

View File

@@ -1,6 +1,6 @@
import { tools } from '@store/Modules/tools'
import { useQuasar } from 'quasar'
import { PropType, defineComponent, onMounted, ref, computed } from 'vue'
import { PropType, defineComponent, onMounted, ref, shallowRef, computed } from 'vue'
import 'leaflet/dist/leaflet.css'
// @ts-ignore
@@ -8,6 +8,7 @@ import * as L from 'leaflet'
import 'leaflet.markercluster/dist/MarkerCluster.css'
import 'leaflet.markercluster/dist/MarkerCluster.Default.css'
import 'leaflet.markercluster'
import '../../utils/leaflet-extensions'; // Importa le estensioni
import { useUserStore } from '@src/store/UserStore'
@@ -19,7 +20,7 @@ export default defineComponent({
const iconWidth = ref(25)
const iconHeight = ref(40)
const map = ref(<any>null)
const map = shallowRef(<any>null)
const zoom = ref(6)
const arrprovince = ref(<any>[])

View File

@@ -33,6 +33,7 @@ import mixinEvents from '@src/mixins/mixin-events'
export default defineComponent({
name: 'CMyCardService',
emits: ['showInMap'],
components: {
CProfile, CTitleBanner,
CMyFieldDb, CDateTime, CMyPage, CMyFieldRec, CAccomodation,
@@ -64,7 +65,7 @@ export default defineComponent({
default: false,
}
},
setup(props) {
setup(props, { emit }) {
const userStore = useUserStore()
const calendarStore = useCalendarStore()
@@ -646,6 +647,11 @@ export default defineComponent({
}
function showInMap(rec: any) {
// close dialo
emit('showInMap', rec)
}
onMounted(mounted)
return {
@@ -701,6 +707,7 @@ export default defineComponent({
cardRef,
smallHeight,
toggleShowScheda,
showInMap,
}
}
})

View File

@@ -1,9 +1,10 @@
<template>
<div v-if="myrec && myrec._id" :class="($q.screen.lt.sm ? ' fulldiv ' : ' well-positioned-dialog')">
<div
v-if="myrec && myrec._id"
:class="$q.screen.lt.sm ? ' fulldiv ' : ' well-positioned-dialog'"
>
<div
:class="
'items-start ' + (!isSmall ? ' q-gutter-xs full-height ' : '')
"
:class="'items-start ' + (!isSmall ? ' q-gutter-xs full-height ' : '')"
>
<div class="row">
<q-toolbar class="bg-white text-black riempi">
@@ -321,7 +322,6 @@
</div>
</div>
<q-separator v-if="!isSmall" />
<q-list style="z-index: 5">
@@ -367,13 +367,6 @@
</q-item-label>
</q-item-section>
</q-item>
<q-item v-if="myrec.nome_attivita">
<q-item-section>
<q-item-label class="text-bold text-h7">
{{ myrec.nome_attivita }}
</q-item-label>
</q-item-section>
</q-item>
<q-item v-if="myrec.descr">
<q-item-section>
<q-item-label class="text-h7">{{ myrec.descr }}</q-item-label>
@@ -637,8 +630,8 @@
myrec.mycities[0].comune
"
>
<q-item-section avatar>
<q-icon color="amber" name="fas fa-map-marker-alt" />
<q-item-section avatar>
<q-icon color="amber" name="fas fa-map-marker-alt" />
</q-item-section>
<q-item-section>
<q-item-label>
@@ -659,6 +652,33 @@
}}</q-item-label>
</q-item-section>
</q-item>
<q-item
clickable
v-if="myrec.coordinate_gps"
>
<q-item-section avatar>
<q-icon color="blue" name="fas fa-crosshairs" />
</q-item-section>
<q-item-section>
<q-item-label>
<div v-if="myrec.coordinate_gps.address">
{{ myrec.coordinate_gps.address }}
</div>
</q-item-label>
<q-item-label>
<div v-if="myrec.coordinate_gps.coordinates">
{{ tools.getCoordinatesToShow(myrec.coordinate_gps) }}
</div>
<q-btn
:label="t('attivita.vediinmappa')"
color="primary"
size="sm"
@click="showInMap(myrec)"
/>
</q-item-label>
</q-item-section>
</q-item>
<q-item clickable v-if="myrec.link_maplocation">
<q-item-section avatar>
<q-icon color="blue" name="fas fa-map-marker-alt" />
@@ -934,7 +954,6 @@
</q-btn>
<q-btn
class="q-mx-xxs q-my-xs"
rounded
:label="$t('reaction.condividi')"
text-color="blue"
@@ -949,7 +968,6 @@
myrec.contact_telegram
"
class="q-mx-xxs q-my-xs"
rounded
:label="$t('dialog.scrivi')"
text-color="primary"
@@ -967,7 +985,7 @@
"
/>
<q-btn
v-if="table === shared_consts.TABLES_MYBACHECAS"
v-if="table === shared_consts.TABLES_MYBACHECAS"
rounded
:color="
calendarStore.isPartecipero(myrec._id, table)
@@ -983,7 +1001,7 @@
@click="EditBookEvent(true)"
>
</q-btn>
<q-btn
<q-btn
rounded
outline
class="q-ma-sm"
@@ -998,7 +1016,6 @@
<div v-if="$q.screen.lt.sm" class="row justify-center q-my-xs">
<q-btn
rounded
:label="$t('dialog.close')"
color="primary"
icon="close"

View File

@@ -6,6 +6,7 @@ import { CBarSelection } from '../CBarSelection'
export default defineComponent({
name: 'CTitlePage',
components: {CBarSelection},
emits: ['clickButtBar'],
props: {
ind: {
type: Number,
@@ -53,11 +54,16 @@ export default defineComponent({
onMounted(mount)
function clickButtBar(item: any) {
emit('clickButtBar', item)
}
return {
mytitle,
myicon,
mycolor,
table,
clickButtBar,
}
},
})

View File

@@ -22,6 +22,8 @@
:mycolor="mycolor"
:prop_search="false"
:table="table"
@clickButtBar="clickButtBar"
:ind="ind"
>
<slot />
</CBarSelection>