242 lines
8.6 KiB
Vue
Executable File
242 lines
8.6 KiB
Vue
Executable File
<template>
|
|
<div
|
|
:class="$q.screen.lt.sm ? `` : `q-pa-xs`"
|
|
v-if="isfinishLoading && mycolumns"
|
|
>
|
|
<div
|
|
class="centermydiv q-mx-sm"
|
|
:style="`text-align: center; background-color: ${mycolor}`"
|
|
></div>
|
|
<div>
|
|
<div v-if="prop_search || canEdit" class="q-my-xs text-right">
|
|
<q-btn
|
|
size="sm"
|
|
dense
|
|
icon="fas fa-filter"
|
|
:label="$t('grid.showfilters')"
|
|
@click="showfilter = !showfilter"
|
|
></q-btn>
|
|
</div>
|
|
<q-slide-transition>
|
|
<div class="row no-wrap shadow-1">
|
|
<q-header elevated>
|
|
<q-toolbar class="glossy" style="">
|
|
<div class="col-3">
|
|
<q-select
|
|
v-model="tablesel"
|
|
:options="optionsMainCards"
|
|
emit-value
|
|
borderless
|
|
map-options
|
|
behavior="menu"
|
|
@update:model-value="gotoPageSel"
|
|
>
|
|
<template v-slot:option="scope">
|
|
<q-item v-bind="scope.itemProps">
|
|
<q-item-section avatar>
|
|
<q-icon :name="scope.opt.icon" />
|
|
</q-item-section>
|
|
<q-item-section>
|
|
<q-item-label>{{ scope.opt.label }}</q-item-label>
|
|
<!--<q-item-label caption>{{
|
|
scope.opt.description
|
|
}}</q-item-label>-->
|
|
</q-item-section>
|
|
</q-item>
|
|
</template>
|
|
</q-select>
|
|
</div>
|
|
<q-space />
|
|
<q-btn
|
|
|
|
size="sm"
|
|
class="col-1 q-mx-xs"
|
|
icon="fas fa-plus"
|
|
@click="createNewRecordDialog"
|
|
>
|
|
</q-btn>
|
|
<div class="col" v-for="(item, index) in searchList" :key="index">
|
|
<CMySelect
|
|
:col="fieldsTable.getColByColumns(mycolumns, item.key)"
|
|
v-if="
|
|
item.type === costanti.FieldType.select ||
|
|
item.type === costanti.FieldType.select_by_server
|
|
"
|
|
:label="item.value ? '' : labelcombo(item)"
|
|
v-model:value="item.value"
|
|
@update:value="searchval(item.value, item.table)"
|
|
:addall="item.addall"
|
|
:addnone="item.addnone"
|
|
:addlast="true"
|
|
:tablesel="
|
|
item.type === costanti.FieldType.select_by_server
|
|
? item.tablesel
|
|
: ''
|
|
"
|
|
:pickup="item.type === costanti.FieldType.select_by_server"
|
|
label-color="white"
|
|
class="combowidth"
|
|
color="primary"
|
|
:icon_alternative="item.icon"
|
|
:optval="fieldsTable.getKeyByTable(item.table)"
|
|
:optlab="fieldsTable.getLabelByTable(item.table)"
|
|
:options="valoriopt(item, false)"
|
|
:filter="item.filter"
|
|
:filter_extra="item.filter_extra"
|
|
:useinput="
|
|
item.useinput &&
|
|
item.type !== costanti.FieldType.select_by_server
|
|
"
|
|
>
|
|
</CMySelect>
|
|
|
|
<!--<div v-if="item.type === costanti.FieldType.multiselect_by_server">
|
|
item: {{ item}}
|
|
</div>-->
|
|
|
|
<CMySelect
|
|
v-if="item.type === costanti.FieldType.multiselect_by_server"
|
|
:col="fieldsTable.getColByColumns(mycolumns, item.key)"
|
|
:multiselect_by_server="true"
|
|
:label="labelcombo(item)"
|
|
v-model:arrvalue="item.arrvalue"
|
|
@update:arrvalue="searchval(item.arrvalue, item.table)"
|
|
:addall="item.addall"
|
|
:addnone="item.addnone"
|
|
:addlast="true"
|
|
:tablesel="item.tablesel"
|
|
:pickup="true"
|
|
:param1="item.param1"
|
|
label-color="primary"
|
|
class="combowidth"
|
|
color="primary"
|
|
:icon_alternative="item.icon"
|
|
:optval="fieldsTable.getKeyByTable(item.table)"
|
|
:optlab="fieldsTable.getLabelByTable(item.table)"
|
|
:filter="item.filter"
|
|
:filter_extra="item.filter_extra"
|
|
:options="valoriopt(item, false)"
|
|
:useinput="true"
|
|
>
|
|
</CMySelect>
|
|
|
|
<q-select
|
|
v-if="item.type === costanti.FieldType.multiselect"
|
|
v-model="item.arrvalue"
|
|
label-color="primary"
|
|
:label="labelcombo(item)"
|
|
@update:model-value="searchval(item.arrvalue, item.table)"
|
|
rounded
|
|
dense
|
|
outlined
|
|
multiple
|
|
options-dense
|
|
emit-value
|
|
map-options
|
|
:useinput="item.useinput"
|
|
:options="valoriopt(item, item.addall, item.addnone)"
|
|
:filter="item.filter"
|
|
class="combowidth"
|
|
:option-value="fieldsTable.getKeyByTable(item.table)"
|
|
>
|
|
<template v-if="item.icon" v-slot:prepend>
|
|
<q-icon :name="item.icon" />
|
|
</template>
|
|
<template
|
|
v-if="item.arrvalue.length >= 1"
|
|
v-slot:selected-item="scope"
|
|
>
|
|
<div
|
|
v-if="
|
|
scope.opt[fieldsTable.getLabelByTable(item.table)] ||
|
|
(scope.opt && checkIfShowRec(scope.opt))
|
|
"
|
|
>
|
|
<q-chip
|
|
removable
|
|
dense
|
|
@remove="scope.removeAtIndex(scope.index)"
|
|
v-if="checkIfShowRec(scope.opt)"
|
|
color="white"
|
|
text-color="mycol"
|
|
class="q-my-none q-ml-xs q-mr-none"
|
|
>
|
|
<q-avatar
|
|
color="primary"
|
|
text-color="white"
|
|
:icon="item.icon"
|
|
size="12px"
|
|
/>
|
|
{{
|
|
scope.opt[fieldsTable.getLabelByTable(item.table)] ||
|
|
scope.opt
|
|
}}
|
|
</q-chip>
|
|
</div>
|
|
</template>
|
|
<template
|
|
v-slot:option="{ itemProps, opt, selected, toggleOption }"
|
|
>
|
|
<q-item v-bind="itemProps">
|
|
<q-item-section>
|
|
<q-item-label>{{
|
|
opt[fieldsTable.getLabelByTable(item.table)]
|
|
}}</q-item-label>
|
|
</q-item-section>
|
|
<q-item-section side>
|
|
<q-toggle
|
|
:model-value="selected"
|
|
@update:model-value="toggleOption(opt)"
|
|
/>
|
|
</q-item-section>
|
|
</q-item>
|
|
</template>
|
|
</q-select>
|
|
</div>
|
|
</q-toolbar>
|
|
</q-header>
|
|
</div>
|
|
</q-slide-transition>
|
|
|
|
<div
|
|
v-if="prop_search || canEdit"
|
|
class="row justify-center vertical-middle"
|
|
>
|
|
<div v-if="prop_search" class="q-mr-sm full-width">
|
|
<q-input
|
|
v-model="search"
|
|
filled
|
|
dense
|
|
type="search"
|
|
debounce="500"
|
|
:hint="hint"
|
|
label="Cerca"
|
|
v-on:keyup.enter="doSearch"
|
|
>
|
|
<template v-slot:prepend>
|
|
<q-icon name="search" />
|
|
</template>
|
|
<template v-if="searchList" v-slot:after>
|
|
<q-btn
|
|
dense
|
|
label=""
|
|
color="primary"
|
|
@click="showfilter = !showfilter"
|
|
icon="fas fa-filter"
|
|
></q-btn>
|
|
</template>
|
|
</q-input>
|
|
</div>
|
|
|
|
<q-space></q-space>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script lang="ts" src="./CBarSelection.ts">
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
@import './CBarSelection.scss';
|
|
</style>
|