v-slot:no-option

This commit is contained in:
setthawutttty 2023-10-09 09:42:55 +07:00
parent 06134970c9
commit a4b7549cd3
7 changed files with 204 additions and 99 deletions

View file

@ -721,6 +721,13 @@ const clearInsigniaFilters = (name: string) => {
) )
" class="cursor-pointer" /> " class="cursor-pointer" />
</template> </template>
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey">
ไมอม
</q-item-section>
</q-item>
</template>
</q-select> </q-select>
<div> <div>
<q-select class="col-2" v-model="DataStore.employeeClass" dense outlined lazy-rules hide-bottom-space <q-select class="col-2" v-model="DataStore.employeeClass" dense outlined lazy-rules hide-bottom-space
@ -742,6 +749,13 @@ const clearInsigniaFilters = (name: string) => {
) )
" class="cursor-pointer" /> " class="cursor-pointer" />
</template> </template>
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey">
ไมอม
</q-item-section>
</q-item>
</template>
</q-select> </q-select>
</div> </div>
<div> <div>

View file

@ -314,6 +314,13 @@ const clearInsigniaFilters = (name: string) => {
class="cursor-pointer" class="cursor-pointer"
/> />
</template> </template>
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey">
ไมอม
</q-item-section>
</q-item>
</template>
</q-select> </q-select>
<div> <div>
<q-select <q-select
@ -356,6 +363,13 @@ const clearInsigniaFilters = (name: string) => {
class="cursor-pointer" class="cursor-pointer"
/> />
</template> </template>
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey">
ไมอม
</q-item-section>
</q-item>
</template>
</q-select> </q-select>
</div> </div>
<q-space /> <q-space />

View file

@ -311,6 +311,13 @@ const clearInsigniaFilters = (name: string) => {
class="cursor-pointer" class="cursor-pointer"
/> />
</template> </template>
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey">
ไมอม
</q-item-section>
</q-item>
</template>
</q-select> </q-select>
<div> <div>
<q-select <q-select
@ -353,6 +360,13 @@ const clearInsigniaFilters = (name: string) => {
class="cursor-pointer" class="cursor-pointer"
/> />
</template> </template>
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey">
ไมอม
</q-item-section>
</q-item>
</template>
</q-select> </q-select>
</div> </div>
<q-space /> <q-space />

View file

@ -316,6 +316,7 @@ const filterSelector = (val: any, update: Function, name: any) => {
) )
} }
const clearInsigniaFilters = (name: string) => { const clearInsigniaFilters = (name: string) => {
console.log(insigniaOp.value)
if (name === "filterInsigniaOp") { if (name === "filterInsigniaOp") {
DataStore.insignia = ''; DataStore.insignia = '';
filterInsigniaOp.value = insigniaOp.value; filterInsigniaOp.value = insigniaOp.value;
@ -352,6 +353,13 @@ const clearInsigniaFilters = (name: string) => {
input-class="text-bold text-grey" input-class="text-bold text-grey"
@update:model-value="selectorRound(selectRound)" @update:model-value="selectorRound(selectRound)"
> >
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey">
ไมอม
</q-item-section>
</q-item>
</template>
</q-select> </q-select>
</div> </div>
<q-separator /> <q-separator />
@ -412,6 +420,13 @@ const clearInsigniaFilters = (name: string) => {
class="cursor-pointer" class="cursor-pointer"
/> />
</template> </template>
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey">
ไมอม
</q-item-section>
</q-item>
</template>
</q-select> </q-select>
</div> </div>

View file

@ -30,7 +30,7 @@ const roundYear = ref<any>();
const insigniaList = ref<any>([]); const insigniaList = ref<any>([]);
const fileterInsigniaList = ref<any>([]); const fileterInsigniaList = ref<any>([]);
const loadView = ref<boolean>(false); const loadView = ref<boolean>(false);
const employeeClassOps = ref<any>(DataStore.employeeClassOps) const employeeClassOps = ref<any>(DataStore.employeeClassOps);
onMounted(async () => { onMounted(async () => {
await fecthRound(); await fecthRound();
}); });
@ -61,10 +61,10 @@ const fecthRound = async () => {
year: e.year, year: e.year,
}); });
}); });
filterSelectRoundAllOption.value = selectRoundAllOption.value filterSelectRoundAllOption.value = selectRoundAllOption.value;
selectRound.value = data[0].id; selectRound.value = data[0].id;
filterSelectRoundOption.value = selectRoundOption.value filterSelectRoundOption.value = selectRoundOption.value;
console.log(filterSelectRoundOption.value) console.log(filterSelectRoundOption.value);
yearRound.value = data[0].year; yearRound.value = data[0].year;
roundYear.value = data[0].year; roundYear.value = data[0].year;
if (roundYear.value) { if (roundYear.value) {
@ -331,7 +331,7 @@ watch(tab, async () => {
(x: any) => x.type == tab.value || x.type == "" (x: any) => x.type == tab.value || x.type == ""
); );
DataStore.insignia = ""; DataStore.insignia = "";
fileterInsigniaList.value = insigniaList.value fileterInsigniaList.value = insigniaList.value;
fecthlistInsignia(); fecthlistInsignia();
}); });
@ -401,34 +401,30 @@ const paginationLabel = (start: number, end: number, total: number) => {
const filterSelector = (val: any, update: Function, name: any) => { const filterSelector = (val: any, update: Function, name: any) => {
update(() => { update(() => {
const needle = val.toLowerCase(); const needle = val.toLowerCase();
if (name === 'employeeClassOps') { if (name === "employeeClassOps") {
DataStore.employeeClass = '' DataStore.employeeClass = "";
employeeClassOps.value = DataStore.employeeClassOps.filter( employeeClassOps.value = DataStore.employeeClassOps.filter(
(v: any) => v.name.toLowerCase().indexOf(needle) > -1 (v: any) => v.name.toLowerCase().indexOf(needle) > -1
); );
} } else if (name === "fileterInsigniaList") {
else if (name === 'fileterInsigniaList') { DataStore.insignia = null as any;
DataStore.insignia = null as any
fileterInsigniaList.value = insigniaList.value.filter( fileterInsigniaList.value = insigniaList.value.filter(
(v: any) => v.name.toLowerCase().indexOf(needle) > -1 (v: any) => v.name.toLowerCase().indexOf(needle) > -1
); );
} } else if (name === "filterSelectRoundAllOption") {
else if (name === 'filterSelectRoundAllOption') { yearRound.value = null as any;
yearRound.value = null as any
filterSelectRoundAllOption.value = selectRoundAllOption.value.filter( filterSelectRoundAllOption.value = selectRoundAllOption.value.filter(
(v: any) => v.name.toLowerCase().indexOf(needle) > -1 (v: any) => v.name.toLowerCase().indexOf(needle) > -1
); );
} }
} });
) };
}
const clearInsigniaFilters = (name: string) => { const clearInsigniaFilters = (name: string) => {
if (name === "employeeClassOps") { if (name === "employeeClassOps") {
DataStore.employeeClass = "all"; DataStore.employeeClass = "all";
employeeClassOps.value = DataStore.employeeClassOps; employeeClassOps.value = DataStore.employeeClassOps;
} } else if (name === "fileterInsigniaList") {
else if (name === "fileterInsigniaList") {
DataStore.insignia = ""; DataStore.insignia = "";
fileterInsigniaList.value = insigniaList.value; fileterInsigniaList.value = insigniaList.value;
} }
@ -470,27 +466,34 @@ const clearInsigniaFilters = (name: string) => {
> >
<div class="q-pa-md"> <div class="q-pa-md">
<div class="row col-12 q-pb-sm q-col-gutter-x-xs"> <div class="row col-12 q-pb-sm q-col-gutter-x-xs">
<q-select
<q-select v-model="yearRound"
v-model="yearRound" dense
dense outlined
outlined lazy-rules
lazy-rules hide-bottom-space
hide-bottom-space :label="`${'รอบการเสนอขอเครื่องราชฯ'}`"
:label="`${'รอบการเสนอขอเครื่องราชฯ'}`" emit-value
emit-value map-options
map-options use-input
use-input option-label="name"
option-label="name" :options="filterSelectRoundAllOption"
:options="filterSelectRoundAllOption" option-value="year"
option-value="year" :borderless="false"
:borderless="false" style="min-width: 150px"
style="min-width: 150px" @update:model-value="selectorRound"
@update:model-value="selectorRound" @filter="(inputValue:any,
@filter="(inputValue:any,
doneFn:Function) => filterSelector(inputValue, doneFn,'filterSelectRoundAllOption' doneFn:Function) => filterSelector(inputValue, doneFn,'filterSelectRoundAllOption'
) " ) "
/> >
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey">
ไมอม
</q-item-section>
</q-item>
</template>
</q-select>
<div> <div>
<q-select <q-select
v-model="DataStore.insignia" v-model="DataStore.insignia"
@ -514,68 +517,84 @@ const clearInsigniaFilters = (name: string) => {
DataStore.employeeClass DataStore.employeeClass
) )
" "
@filter="(inputValue:any, @filter="(inputValue:any,
doneFn:Function) => filterSelector(inputValue, doneFn,'fileterInsigniaList' doneFn:Function) => filterSelector(inputValue, doneFn,'fileterInsigniaList'
) " ) "
> >
<template v-if="DataStore.insignia !== ''" v-slot:append> <template v-if="DataStore.insignia !== ''" v-slot:append>
<q-icon <q-icon
name="cancel" name="cancel"
@click.stop.prevent=" @click.stop.prevent="
clearInsigniaFilters('fileterInsigniaList'), clearInsigniaFilters('fileterInsigniaList'),
DataStore.searchDatatable(
DataStore.insignia,
DataStore.employeeClass
)
"
class="cursor-pointer"
/>
</template>
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey">
ไมอม
</q-item-section>
</q-item>
</template>
</q-select>
</div>
<div>
<q-select
class="col-2"
v-model="DataStore.employeeClass"
dense
outlined
lazy-rules
hide-bottom-space
:label="`${'สถานภาพ'}`"
emit-value
use-input
map-options
option-label="name"
:options="employeeClassOps"
option-value="id"
:readonly="false"
:borderless="false"
style="min-width: 150px"
@update:model-value="
DataStore.searchDatatable( DataStore.searchDatatable(
DataStore.insignia, DataStore.insignia,
DataStore.employeeClass DataStore.employeeClass
) )
" "
class="cursor-pointer" @filter="(inputValue:any,
/>
</template>
</q-select>
</div>
<div>
<q-select
class="col-2"
v-model="DataStore.employeeClass"
dense
outlined
lazy-rules
hide-bottom-space
:label="`${'สถานภาพ'}`"
emit-value
use-input
map-options
option-label="name"
:options="employeeClassOps"
option-value="id"
:readonly="false"
:borderless="false"
style="min-width: 150px"
@update:model-value="
DataStore.searchDatatable(
DataStore.insignia,
DataStore.employeeClass
)
"
@filter="(inputValue:any,
doneFn:Function) => filterSelector(inputValue, doneFn,'employeeClassOps' doneFn:Function) => filterSelector(inputValue, doneFn,'employeeClassOps'
) " ) "
> >
<template v-if="DataStore.employeeClass !== 'all'" v-slot:append> <template
<q-icon v-if="DataStore.employeeClass !== 'all'"
name="cancel" v-slot:append
@click.stop.prevent=" >
clearInsigniaFilters('employeeClassOps'), <q-icon
DataStore.searchDatatable( name="cancel"
DataStore.insignia, @click.stop.prevent="
DataStore.employeeClass clearInsigniaFilters('employeeClassOps'),
) DataStore.searchDatatable(
" DataStore.insignia,
class="cursor-pointer" DataStore.employeeClass
/> )
</template> "
</q-select> class="cursor-pointer"
/>
</template>
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey">
ไมอม
</q-item-section>
</q-item>
</template>
</q-select>
</div> </div>
<div> <div>

View file

@ -185,7 +185,15 @@ const filterSelector = (val: any, update: Function, name: any) => {
@update:model-value="updateSelect" @update:model-value="updateSelect"
@filter="(inputValue:any,doneFn:Function) => @filter="(inputValue:any,doneFn:Function) =>
filterSelector(inputValue, doneFn,'selectList') " filterSelector(inputValue, doneFn,'selectList') "
/> >
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey">
ไมอม
</q-item-section>
</q-item>
</template>
</q-select>
</q-form> </q-form>
<q-space /> <q-space />
<div class="q-pa-ms q-gutter-sm" style="padding: 0"> <div class="q-pa-ms q-gutter-sm" style="padding: 0">

View file

@ -637,6 +637,13 @@ const clearInsigniaFilters = (name: string) => {
class="cursor-pointer" class="cursor-pointer"
/> />
</template> </template>
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey">
ไมอม
</q-item-section>
</q-item>
</template>
</q-select> </q-select>
<q-select <q-select
v-model="DataStore.invoiceType" v-model="DataStore.invoiceType"
@ -677,6 +684,13 @@ const clearInsigniaFilters = (name: string) => {
class="cursor-pointer" class="cursor-pointer"
/> />
</template> </template>
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey">
ไมอม
</q-item-section>
</q-item>
</template>
</q-select> </q-select>
<div> <div>
<q-select <q-select
@ -721,6 +735,13 @@ const clearInsigniaFilters = (name: string) => {
class="cursor-pointer" class="cursor-pointer"
/> />
</template> </template>
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey">
ไมอม
</q-item-section>
</q-item>
</template>
</q-select> </q-select>
</div> </div>