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" />
</template>
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey">
ไมอม
</q-item-section>
</q-item>
</template>
</q-select>
<div>
<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" />
</template>
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey">
ไมอม
</q-item-section>
</q-item>
</template>
</q-select>
</div>
<div>

View file

@ -314,6 +314,13 @@ const clearInsigniaFilters = (name: string) => {
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>
<q-select
@ -356,6 +363,13 @@ const clearInsigniaFilters = (name: string) => {
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>
<q-space />

View file

@ -311,6 +311,13 @@ const clearInsigniaFilters = (name: string) => {
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>
<q-select
@ -353,6 +360,13 @@ const clearInsigniaFilters = (name: string) => {
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>
<q-space />

View file

@ -316,6 +316,7 @@ const filterSelector = (val: any, update: Function, name: any) => {
)
}
const clearInsigniaFilters = (name: string) => {
console.log(insigniaOp.value)
if (name === "filterInsigniaOp") {
DataStore.insignia = '';
filterInsigniaOp.value = insigniaOp.value;
@ -352,6 +353,13 @@ const clearInsigniaFilters = (name: string) => {
input-class="text-bold text-grey"
@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>
</div>
<q-separator />
@ -412,6 +420,13 @@ const clearInsigniaFilters = (name: string) => {
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>

View file

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

View file

@ -185,7 +185,15 @@ const filterSelector = (val: any, update: Function, name: any) => {
@update:model-value="updateSelect"
@filter="(inputValue:any,doneFn:Function) =>
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-space />
<div class="q-pa-ms q-gutter-sm" style="padding: 0">

View file

@ -637,6 +637,13 @@ const clearInsigniaFilters = (name: string) => {
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>
<q-select
v-model="DataStore.invoiceType"
@ -677,6 +684,13 @@ const clearInsigniaFilters = (name: string) => {
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>
<q-select
@ -721,6 +735,13 @@ const clearInsigniaFilters = (name: string) => {
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>