hrms-bangkok/hrms-mgt
7
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

filter input

Browse source
This commit is contained in:
setthawutttty 2023-09-29 13:54:17 +07:00
parent b01e667f34
commit 46cd97fb50
7 changed files with 243 additions and 49 deletions
Download patch file Download diff file Expand all files Collapse all files

20
src/modules/07_insignia/components/3_result/DialogForm.vue
View file

@ -40,7 +40,7 @@ const affiliationReceived = ref<string>("");
const receivedate = ref<Date | null>();
const announceDate = ref<Date | null>();
const invoiceDate = ref<Date | null>(null);
const filterinsigniaOp2 = ref<any>(DataStore.insigniaOp2)
const employeeClass = ref<string>("");
const employeeClassOps = ref<DataOption[]>([
{ id: "officer", name: "ข้าราชการ กทม.สามัญ" },
@ -276,6 +276,19 @@ const searchcardid = () => {
} else notifyError($q, "ไม่พบข้อมูลเลขบัตรประชาชนนี้");
}
};
const filterSelector = (val: any, update: Function, name: any) => {
update(() => {
const needle = val.toLowerCase();
if (name === 'insigniaOp2') {
brand.value = ''
filterinsigniaOp2.value = DataStore.insigniaOp2.filter(
(v: any) => v.name.toLowerCase().indexOf(needle) > -1
);
}
}
)
}
</script>
<template>
@ -398,14 +411,17 @@ const searchcardid = () => {
emit-value
map-options
option-label="name"
:options="DataStore.insigniaOp2"
:options="filterinsigniaOp2"
option-value="id"
:readonly="false"
use-input
:borderless="false"
style="min-width: 150px"
:rules="[
(val) => !!val || 'กรุณากรอกชื่อชั้นตราเครื่องราชอิสริยาภรณ์',
]"
@filter="(inputValue:any,doneFn:Function) =>
filterSelector(inputValue, doneFn,'insigniaOp2') "
/>
</div>
<div class="col-xs-12 col-sm-6">

24
src/modules/07_insignia/components/3_result/Dialogbody.vue
View file

@ -124,18 +124,21 @@ onMounted(()=>{
<q-dialog v-model="props.modal" persistent>
<q-card style="min-width: 900px">
<q-toolbar>
<q-toolbar-title v-if="props.fileCheck === null" class="text-subtitle2 text-bold">รับเครื่องราชฯ</q-toolbar-title>
<q-toolbar-title v-else class="text-subtitle2 text-bold">คืนเครื่องราชฯ</q-toolbar-title>
<q-toolbar-title class="text-subtitle2 text-bold">รับ-คืนเครื่องราชฯ</q-toolbar-title>
<q-btn icon="close" unelevated round dense @click="close" style="color: #ff8080; background-color: #ffdede" />
</q-toolbar>
<q-separator />
<q-form ref="myForm">
<div class="q-pa-md bg-grey-1">
<div v-if="props.fileCheck === null" class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs">
<div class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs">
<div class="col-12 text-weight-bold text-grey-7">
รับเครื่องราชฯ
</div>
<div class="col-xs-12 col-sm-4">
<datepicker menu-class-name="modalfix" v-model="Datereceive" :locale="'th'" autoApply borderless
:enableTimePicker="false" week-start="0">
:enableTimePicker="false" week-start="0" :readonly="fileCheck !== null">
<template #year="{ year }">
{{ year + 543 }}
</template>
@ -145,7 +148,7 @@ onMounted(()=>{
<template #trigger>
<q-input dense borderless outlined lazy-rules :rules="[(val) => !!val || 'กรุณาเลือกวันที่ได้รับ']"
hide-bottom-space :model-value="Datereceive != null ? date2Thai(Datereceive) : undefined
" :label="`${'วันที่ได้รับ'}`" clearable @clear="clearReceiveDate">
" :label="`${'วันที่ได้รับ'}`" clearable @clear="clearReceiveDate" :disable="fileCheck !== null">
<template v-slot:prepend>
<q-icon name="event" class="cursor-pointer" color="primary">
</q-icon>
@ -158,7 +161,7 @@ onMounted(()=>{
<div class="col-xs-12 col-sm-4">
<q-file outlined dense v-model="files" label="ไฟล์หลักฐานการรับ" lazy-rules
:rules="[(val) => val || 'กรุณาเลือกไฟล์หลักฐานการรับ']" hide-bottom-space>
:rules="[(val) => val || 'กรุณาเลือกไฟล์หลักฐานการรับ']" hide-bottom-space :disable="fileCheck !== null">
<template v-slot:prepend>
<q-icon name="attach_file" color="primary" />
</template>
@ -167,10 +170,15 @@ onMounted(()=>{
<div class="col-xs-12 col-sm-4">
<q-select hide-bottom-space :options="OrgList" dense borderless option-label="name" option-value="id"
emit-value map-options outlined v-model="OrganazationId" lazy-rules :label="`หน่วยงานที่รับ`"
:rules="[(val) => !!val || 'กรุณาเลือกหน่วยงานที่รับ']" />
:rules="[(val) => !!val || 'กรุณาเลือกหน่วยงานที่รับ']" :disable="fileCheck !== null"/>
</div>
</div>
<div v-if="props.fileCheck !== null" class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs">
<div class="col-12 q-my-sm"> <q-separator/></div>
<div class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs">
<div class="col-12 text-weight-bold text-grey-7">
คืนเครื่องราชฯ
</div>
<div class="col-xs-12 col-sm-4">
<datepicker menu-class-name="modalfix" v-model="Datereturn" :locale="'th'" autoApply borderless

26
src/modules/07_insignia/components/4_Allocate/DialogForm.vue
View file

@ -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 DialogHeader from "@/components/DialogHeader.vue";
@ -14,6 +14,7 @@ const routeName = router.currentRoute.value.name;
const amount = ref<number | null>();
const Org = ref<string | null>("");
const grandCross = ref<string | null>("");
const filterInsigniaOp = ref<any>()
const closeModal = () => {
props.close();
};
@ -41,7 +42,22 @@ watch(props, () => {
amount.value = null;
}
});
watch(() => props.insigniaList, (newVal) => {
filterInsigniaOp.value = newVal;
});
const filterSelector = (val: any, update: Function, name: any) => {
update(() => {
const needle = val.toLowerCase();
if (name === 'filterInsigniaOp') {
grandCross.value = null
filterInsigniaOp.value = props.insigniaList.filter(
(v: any) => v.name.toLowerCase().indexOf(needle) > -1
);
}
}
)
}
const clickSave = () => {
if (myForm.value !== null) {
myForm.value.validate().then(async (success) => {
@ -67,12 +83,14 @@ const clickSave = () => {
<div class="col-6">
<q-select
hide-bottom-space
:options="insigniaList"
:options="filterInsigniaOp"
dense
borderless
use-input
lazy-rules
option-label="name"
option-value="id"
emit-value
emit-valuez
map-options
outlined
options-cover
@ -83,6 +101,8 @@ const clickSave = () => {
? `เครื่องราชฯ`
: `เลือกหน่วยงาน`
"
@filter="(inputValue:any,doneFn:Function) =>
filterSelector(inputValue, doneFn,'filterInsigniaOp') "
/>
</div>
<div class="col-xs-12 col-sm-6">

2
src/modules/07_insignia/components/4_Allocate/Main.vue
View file

@ -176,7 +176,7 @@ watch(tab, () => {
if (!a) {
DataStore.insignia = "";
}
filterInsigniaOp.value = insigniaOp.value
filterInsigniaOp.value = insigniaOp.value
fecthlistInsignia();
});

60
src/modules/07_insignia/components/5_Borrow/DialogForm.vue
View file

@ -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>

140
src/modules/07_insignia/components/5_Borrow/Main.vue
View file

@ -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>

20
src/modules/07_insignia/components/report/Report_02.vue
View file

@ -40,6 +40,7 @@ onMounted(async () => {
const splitterModel = ref(14);
const selectList = ref<any>();
const optionsList = ref<any>([{ id: 0, name: "เลือกกรอบการยื่นขอ" }]);
const filterOtion = ref<any>([]);
const nextPage = () => {
if (page.value < numOfPages.value) {
@ -65,6 +66,7 @@ const fecthlistRound = async () => {
year: e.period_year,
name: e.period_name,
}));
filterOtion.value = optionsList.value
})
.catch((err) => {
messageError($q, err);
@ -130,6 +132,18 @@ const downloadReport = async (
hideLoader();
});
};
const filterSelector = (val: any, update: Function, name: any) => {
update(() => {
const needle = val.toLowerCase();
if (name === 'selectList') {
filterOtion.value = optionsList.value.filter(
(v: any) => v.name.toLowerCase().indexOf(needle) > -1
);
}
}
)
}
</script>
<template>
@ -152,19 +166,23 @@ const downloadReport = async (
<q-toolbar style="padding: 0">
<q-form ref="myForm" class="row items-center">
<q-select
style="width: 400px;"
class="q-pa-none"
use-input
fill-input
hide-selected
dense
lazy-rules
outlined
v-model="selectList"
:options="optionsList"
:options="filterOtion"
label="เลือกรอบ"
option-value="id"
option-label="name"
:rules="[(val) => !!val || 'กรุณาเลือกรอบ']"
@update:model-value="updateSelect"
@filter="(inputValue:any,doneFn:Function) =>
filterSelector(inputValue, doneFn,'selectList') "
/>
</q-form>
<q-space />