filter input
This commit is contained in:
setthawutttty
parent
b01e667f34
commit
46cd97fb50
7 changed files with 243 additions and 49 deletions
|
|
@ -1,5 +1,5 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, watch } from "vue";
|
||||
import { ref, watch,onMounted } from "vue";
|
||||
import { QForm, useQuasar } from "quasar";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import http from "@/plugins/http";
|
||||
|
|
@ -30,8 +30,10 @@ const returndate = ref<Date | null>();
|
|||
const reason = ref<string>("");
|
||||
const listPerson = ref<any>([]);
|
||||
const OrgList = ref<DataOption[]>([]);
|
||||
const filterOrgList = ref<any>([]);
|
||||
const insigniaNoteProfileId = ref<string>("");
|
||||
|
||||
const filterSelectRound = ref<any>()
|
||||
const selectRound = ref<any>()
|
||||
// เคลียร์ข้อมูลในฟอร์ม
|
||||
const clearData = () => {
|
||||
receivedate.value = null;
|
||||
|
|
@ -68,7 +70,10 @@ const props = defineProps({
|
|||
type: String,
|
||||
},
|
||||
selectRoundOption: {
|
||||
type: Array,
|
||||
type: Array,
|
||||
},
|
||||
filterSelectRoundOption: {
|
||||
type: Array,
|
||||
},
|
||||
profileId: {
|
||||
type: String,
|
||||
|
|
@ -92,7 +97,8 @@ watch(props, () => {
|
|||
|
||||
// ดึงข้อมูลรายการเครื่องราช
|
||||
const fecthlistInsignia = async () => {
|
||||
showLoader();
|
||||
if(roundNo.value !== ''&& roundNo.value !== null){
|
||||
showLoader();
|
||||
let data = {
|
||||
insigniaTypeId: props.typeId,
|
||||
insigniaNoteId: roundNo.value,
|
||||
|
|
@ -115,6 +121,8 @@ const fecthlistInsignia = async () => {
|
|||
hideLoader();
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
// ดึงข้อมูลรายการหน่วยงาน
|
||||
const fetchOrgList = async () => {
|
||||
|
|
@ -136,6 +144,7 @@ const fetchOrgList = async () => {
|
|||
// ];
|
||||
// } else {
|
||||
OrgList.value = orgArr;
|
||||
filterOrgList.value = OrgList.value
|
||||
// }
|
||||
})
|
||||
.catch((err) => {
|
||||
|
|
@ -240,6 +249,31 @@ const clearReceiveDate = () => {
|
|||
const clearReturnDate = () => {
|
||||
returndate.value = null;
|
||||
};
|
||||
const filterSelector = (val: any, update: Function, name: any) => {
|
||||
update(() => {
|
||||
const needle = val.toLowerCase();
|
||||
if (name === 'filterOrgList') {
|
||||
OrganazationId.value = ''
|
||||
filterOrgList.value = OrgList.value.filter(
|
||||
(v: any) => v.name.toLowerCase().indexOf(needle) > -1
|
||||
);
|
||||
}
|
||||
if (name === 'filterSelectRoundOption') {
|
||||
roundNo.value = ''
|
||||
filterSelectRound.value = selectRound.value.filter(
|
||||
(v: any) => v.name.toLowerCase().indexOf(needle) > -1
|
||||
);
|
||||
}
|
||||
}
|
||||
)
|
||||
}
|
||||
const setValue = () => {
|
||||
filterSelectRound.value = props.filterSelectRoundOption
|
||||
selectRound.value = props.selectRoundOption
|
||||
}
|
||||
onMounted(() => {
|
||||
setValue();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -267,14 +301,18 @@ const clearReturnDate = () => {
|
|||
:label="`${'รอบการขอเครื่องราชฯ'}`"
|
||||
emit-value
|
||||
map-options
|
||||
use-input
|
||||
option-label="name"
|
||||
:options="selectRoundOption"
|
||||
:options="filterSelectRound"
|
||||
option-value="id"
|
||||
:readonly="false"
|
||||
:borderless="false"
|
||||
style="min-width: 150px"
|
||||
:rules="[(val) => !!val || 'กรุณาเลือกรอบการขอเครื่องราชฯ']"
|
||||
@update:model-value="fecthlistInsignia()"
|
||||
@filter="(inputValue:any,
|
||||
doneFn:Function) => filterSelector(inputValue, doneFn,'filterSelectRoundOption'
|
||||
) "
|
||||
/>
|
||||
</div>
|
||||
<div class="col-12 q-mt-md text-weight-bold text-grey-7">
|
||||
|
|
@ -382,18 +420,22 @@ const clearReturnDate = () => {
|
|||
<div class="col-xs-12 col-sm-6">
|
||||
<q-select
|
||||
hide-bottom-space
|
||||
:options="OrgList"
|
||||
:options="filterOrgList"
|
||||
dense
|
||||
borderless
|
||||
option-label="name"
|
||||
option-value="id"
|
||||
emit-value
|
||||
use-input
|
||||
map-options
|
||||
outlined
|
||||
v-model="OrganazationId"
|
||||
lazy-rules
|
||||
:label="`เลือกหน่วยงาน`"
|
||||
:rules="[(val) => !!val || 'กรุณาเลือกหน่วยงาน']"
|
||||
@filter="(inputValue:any,
|
||||
doneFn:Function) => filterSelector(inputValue, doneFn,'filterOrgList'
|
||||
) "
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -452,7 +494,7 @@ const clearReturnDate = () => {
|
|||
<div class="col-xs-12 col-sm-6">
|
||||
<q-select
|
||||
hide-bottom-space
|
||||
:options="OrgList"
|
||||
:options="filterOrgList"
|
||||
dense
|
||||
lazy-rules
|
||||
borderless
|
||||
|
|
@ -461,9 +503,13 @@ const clearReturnDate = () => {
|
|||
emit-value
|
||||
map-options
|
||||
outlined
|
||||
use-input
|
||||
v-model="OrganazationId"
|
||||
:label="`เลือกหน่วยงานที่ส่งคืน`"
|
||||
:rules="[(val) => !!val || 'กรุณาเลือกหน่วยงานที่คืน']"
|
||||
@filter="(inputValue:any,
|
||||
doneFn:Function) => filterSelector(inputValue, doneFn,'filterOrgList'
|
||||
) "
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -19,15 +19,18 @@ const tab = ref<string>("");
|
|||
|
||||
const selectRound = ref<string>();
|
||||
const selectRoundOption = ref<OptionDataYear[]>([]);
|
||||
const filterSelectRoundOption = ref<any>([]);
|
||||
const selectRoundAllOption = ref<OptionDataYear[]>([]);
|
||||
const filterSelectRoundAllOption = ref<OptionDataYear[]>([]);
|
||||
|
||||
const modal = ref<boolean>(false);
|
||||
const action = ref<string>("");
|
||||
const profileId = ref<string>("");
|
||||
const roundYear = ref<any>();
|
||||
const insigniaList = ref<any>([]);
|
||||
const fileterInsigniaList = ref<any>([]);
|
||||
const loadView = ref<boolean>(false);
|
||||
|
||||
const employeeClassOps = ref<any>(DataStore.employeeClassOps)
|
||||
onMounted(async () => {
|
||||
await fecthRound();
|
||||
});
|
||||
|
|
@ -58,8 +61,10 @@ const fecthRound = async () => {
|
|||
year: e.year,
|
||||
});
|
||||
});
|
||||
|
||||
filterSelectRoundAllOption.value = selectRoundAllOption.value
|
||||
selectRound.value = data[0].id;
|
||||
filterSelectRoundOption.value = selectRoundOption.value
|
||||
console.log(filterSelectRoundOption.value)
|
||||
yearRound.value = data[0].year;
|
||||
roundYear.value = data[0].year;
|
||||
if (roundYear.value) {
|
||||
|
|
@ -326,6 +331,7 @@ watch(tab, async () => {
|
|||
(x: any) => x.type == tab.value || x.type == ""
|
||||
);
|
||||
DataStore.insignia = "";
|
||||
fileterInsigniaList.value = insigniaList.value
|
||||
fecthlistInsignia();
|
||||
});
|
||||
|
||||
|
|
@ -392,6 +398,44 @@ const paginationLabel = (start: number, end: number, total: number) => {
|
|||
if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
|
||||
else return start + "-" + end + " ใน " + total;
|
||||
};
|
||||
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
|
||||
fileterInsigniaList.value = insigniaList.value.filter(
|
||||
(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
|
||||
);
|
||||
}
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
const clearInsigniaFilters = (name: string) => {
|
||||
if (name === "employeeClassOps") {
|
||||
DataStore.employeeClass = "all";
|
||||
employeeClassOps.value = DataStore.employeeClassOps;
|
||||
}
|
||||
else if (name === "fileterInsigniaList") {
|
||||
DataStore.insignia = "";
|
||||
fileterInsigniaList.value = insigniaList.value;
|
||||
}
|
||||
// else if (name === 'employeeClassOps') {
|
||||
|
||||
// }
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -426,7 +470,7 @@ const paginationLabel = (start: number, end: number, total: number) => {
|
|||
>
|
||||
<div class="q-pa-md">
|
||||
<div class="row col-12 q-pb-sm q-col-gutter-x-xs">
|
||||
<div>
|
||||
|
||||
<q-select
|
||||
v-model="yearRound"
|
||||
dense
|
||||
|
|
@ -436,26 +480,30 @@ const paginationLabel = (start: number, end: number, total: number) => {
|
|||
:label="`${'รอบการเสนอขอเครื่องราชฯ'}`"
|
||||
emit-value
|
||||
map-options
|
||||
use-input
|
||||
option-label="name"
|
||||
:options="selectRoundAllOption"
|
||||
:options="filterSelectRoundAllOption"
|
||||
option-value="year"
|
||||
:borderless="false"
|
||||
style="min-width: 150px"
|
||||
@update:model-value="selectorRound"
|
||||
@filter="(inputValue:any,
|
||||
doneFn:Function) => filterSelector(inputValue, doneFn,'filterSelectRoundAllOption'
|
||||
) "
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<q-select
|
||||
v-model="DataStore.insignia"
|
||||
dense
|
||||
outlined
|
||||
use-input
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
:label="`${'เครื่องราชฯ'}`"
|
||||
emit-value
|
||||
map-options
|
||||
option-label="name"
|
||||
:options="insigniaList"
|
||||
:options="fileterInsigniaList"
|
||||
option-value="id"
|
||||
:readonly="false"
|
||||
:borderless="false"
|
||||
|
|
@ -466,31 +514,68 @@ const paginationLabel = (start: number, end: number, total: number) => {
|
|||
DataStore.employeeClass
|
||||
)
|
||||
"
|
||||
/>
|
||||
@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'),
|
||||
DataStore.searchDatatable(
|
||||
DataStore.insignia,
|
||||
DataStore.employeeClass
|
||||
)
|
||||
"
|
||||
class="cursor-pointer"
|
||||
/>
|
||||
</template>
|
||||
</q-select>
|
||||
</div>
|
||||
<div>
|
||||
|
||||
<q-select
|
||||
v-model="DataStore.employeeClass"
|
||||
dense
|
||||
outlined
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
:label="`${'สถานภาพ'}`"
|
||||
emit-value
|
||||
map-options
|
||||
option-label="name"
|
||||
:options="DataStore.employeeClassOps"
|
||||
option-value="id"
|
||||
:readonly="false"
|
||||
:borderless="false"
|
||||
style="min-width: 150px"
|
||||
@update:model-value="
|
||||
DataStore.searchDatatable(
|
||||
DataStore.insignia,
|
||||
DataStore.employeeClass
|
||||
)
|
||||
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'
|
||||
) "
|
||||
>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
|
|
@ -600,7 +685,8 @@ const paginationLabel = (start: number, end: number, total: number) => {
|
|||
:round-id="selectRound == '0' ? 'all' : selectRound"
|
||||
:action="action"
|
||||
:profile-id="profileId"
|
||||
:select-round-option="selectRoundOption"
|
||||
v-model:selectRoundOption="selectRoundOption"
|
||||
v-model:filterSelectRoundOption="filterSelectRoundOption"
|
||||
:type-id="tab"
|
||||
/>
|
||||
</q-card>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue