v-slot:no-option
This commit is contained in:
parent
06134970c9
commit
a4b7549cd3
7 changed files with 204 additions and 99 deletions
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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 />
|
||||
|
|
|
|||
|
|
@ -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 />
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue