Aggiunta del Bottone "Aggiungi"
This commit is contained in:
Surya Paolo
@@ -49,13 +49,15 @@
|
||||
|
||||
|
||||
.barselection {
|
||||
padding: 0;
|
||||
flex-wrap: nowrap;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.myitem {
|
||||
padding: 0px 6px 0px 6px !important;
|
||||
padding: 0px 0px 0px 0px !important;
|
||||
}
|
||||
|
||||
.myitem-0 {
|
||||
@@ -68,5 +70,9 @@
|
||||
}
|
||||
|
||||
.myitem-2 {
|
||||
flex-grow: 0;
|
||||
}
|
||||
|
||||
.myitem-3 {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
@@ -39,6 +39,7 @@ import { CMyCardPopup } from '@/components/CMyCardPopup'
|
||||
import { CMyCardGrpPopup } from '@/components/CMyCardGrpPopup'
|
||||
import { CMyCardCircuitPopup } from '@/components/CMyCardCircuitPopup'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { table } from 'console'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'CBarSelection',
|
||||
@@ -276,7 +277,7 @@ export default defineComponent({
|
||||
}
|
||||
|
||||
function visButtRow() {
|
||||
return false
|
||||
return true
|
||||
}
|
||||
|
||||
function gotoPageSel() {
|
||||
@@ -286,6 +287,10 @@ export default defineComponent({
|
||||
}
|
||||
}
|
||||
|
||||
function createNewRecordDialog() {
|
||||
globalStore.addNewRecord = tablesel.value
|
||||
}
|
||||
|
||||
created()
|
||||
onMounted(mounted)
|
||||
|
||||
@@ -329,6 +334,7 @@ export default defineComponent({
|
||||
optionsMainCards,
|
||||
tablesel,
|
||||
gotoPageSel,
|
||||
createNewRecordDialog,
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
@@ -6,204 +6,195 @@
|
||||
<div
|
||||
class="centermydiv q-mx-sm"
|
||||
:style="`text-align: center; background-color: ${mycolor}`"
|
||||
>
|
||||
<q-btn
|
||||
v-if="table && visButtRow()"
|
||||
rounded
|
||||
dense
|
||||
color="primary"
|
||||
size="lg"
|
||||
:label="getlabelAddRow()"
|
||||
@click="createNewRecordDialog"
|
||||
></q-btn>
|
||||
</div>
|
||||
></div>
|
||||
<div>
|
||||
<div v-if="prop_search || canEdit" class="q-my-xs text-right">
|
||||
<q-btn
|
||||
size="sm"
|
||||
dense
|
||||
icon="fas fa-filter"
|
||||
:label="!showfilter ? $t('grid.showfilters') : $t('grid.hidefilters')"
|
||||
:label="$t('grid.showfilters')"
|
||||
@click="showfilter = !showfilter"
|
||||
></q-btn>
|
||||
</div>
|
||||
<q-slide-transition>
|
||||
<div v-show="true">
|
||||
<div v-show="searchList" class="barselection">
|
||||
<div class="myitem myitem-0">
|
||||
<q-icon :name="myicon" size="xs" />
|
||||
</div>
|
||||
<div class="myitem myitem-1 mybanner">
|
||||
<q-select
|
||||
filled
|
||||
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>{{
|
||||
<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-item-section>
|
||||
</q-item>
|
||||
</template>
|
||||
</q-select>
|
||||
</div>
|
||||
<q-space />
|
||||
<q-btn
|
||||
|
||||
<div
|
||||
class="myitem myitem-2"
|
||||
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="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="primary"
|
||||
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
|
||||
"
|
||||
size="sm"
|
||||
class="col-1 q-mx-xs"
|
||||
icon="fas fa-plus"
|
||||
@click="createNewRecordDialog"
|
||||
>
|
||||
</CMySelect>
|
||||
</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">
|
||||
<!--<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>
|
||||
<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
|
||||
stack-label
|
||||
: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"
|
||||
<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)"
|
||||
>
|
||||
<div
|
||||
v-if="
|
||||
scope.opt[fieldsTable.getLabelByTable(item.table)] ||
|
||||
(scope.opt && checkIfShowRec(scope.opt))
|
||||
"
|
||||
<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"
|
||||
>
|
||||
<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"
|
||||
/>
|
||||
{{
|
||||
<div
|
||||
v-if="
|
||||
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>
|
||||
</div>
|
||||
(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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user