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" />
|
" 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>
|
||||||
|
|
|
||||||
|
|
@ -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 />
|
||||||
|
|
|
||||||
|
|
@ -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 />
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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">
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue