filter input

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

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

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