ปรับ dropdown บรรจุ

src/modules/05_placement/components/Main.vue

@@ -150,8 +150,8 @@ const fetchPlacementData = async (val: number) => {
     })
     .finally(() => {
       filterKeyword.value = "";
-      examTime.value = "all";
+      examTime.value = "ทั้งหมด";
-      examType.value = "all";
+      examType.value = "ทั้งหมด";
       expiredAccount.value = false;
       hideLoader();
     });
@@ -233,11 +233,10 @@ const searchFilterTable = async () => {
   rows.value = [];
   if (examType.value !== undefined && examType.value !== null) {
     await DataStore.DataUpdateMain(
-      examTime.value,
+      examTime.value == "ทั้งหมด" ? "all" : examTime.value,
-      examType.value,
+      examType.value == "ทั้งหมด" ? "all" : examType.value,
       expiredAccount.value
     );
-
     const dataArr: any = [];
     await DataStore.DataMainUpdate.map((e: any) => {
       dataArr.push({
@@ -278,6 +277,37 @@ const paginationLabel = (start: number, end: number, total: number) => {
   if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
   else return start + "-" + end + " ใน " + total;
 };
+// filter ใน dropdown ครั้งที่
+const examTimeOP2 = ref<any[]>([]);
+function filterFnexamTime(val: string, update: any) {
+  if (val === "") {
+    update(() => {
+      examTimeOP2.value = examTimeOP;
+      examTime.value = "";
+    });
+  } else {
+    update(() => {
+      examTimeOP2.value = examTimeOP.filter(
+        (e: any) => e.name.search(val) !== -1
+      );
+    });
+  }
+}
+const examTypeOP2 = ref<any[]>([]);
+function filterFnExamtype(val: string, update: any) {
+  if (val === "") {
+    update(() => {
+      examTypeOP2.value = examTypeOP.value;
+      examType.value = "";
+    });
+  } else {
+    update(() => {
+      examTypeOP2.value = examTypeOP.value.filter(
+        (e: any) => e.name.search(val) !== -1
+      );
+    });
+  }
+}
 </script>
 
 <template>
@@ -351,7 +381,7 @@ const paginationLabel = (start: number, end: number, total: number) => {
               dense
               emit-value
               map-options
-              :options="examTimeOP"
+              :options="examTimeOP2"
               option-value="id"
               option-label="name"
               lazy-rules
@@ -361,7 +391,18 @@ const paginationLabel = (start: number, end: number, total: number) => {
               :outlined="true"
               :hide-dropdown-icon="false"
               @update:model-value="searchFilterTable"
-            />
+              @filter="filterFnexamTime"
+              use-input
+              input-debounce="0"
+              behavior="menu"
+              ><template v-slot:no-option>
+                <q-item>
+                  <q-item-section class="text-grey">
+                    ไม่มีข้อมูล
+                  </q-item-section>
+                </q-item>
+              </template>
+            </q-select>
             <q-select
               class="col-xs-12 col-sm-3 col-md-2"
               v-model="examType"
@@ -370,7 +411,7 @@ const paginationLabel = (start: number, end: number, total: number) => {
               emit-value
               map-options
               option-label="name"
-              :options="examTypeOP"
+              :options="examTypeOP2"
               option-value="id"
               lazy-rules
               hide-bottom-space
@@ -379,7 +420,18 @@ const paginationLabel = (start: number, end: number, total: number) => {
               :outlined="true"
               :hide-dropdown-icon="false"
               @update:model-value="searchFilterTable"
-            />
+              @filter="filterFnExamtype"
+              use-input
+              behavior="menu"
+            >
+              <template v-slot:no-option>
+                <q-item>
+                  <q-item-section class="text-grey">
+                    ไม่มีข้อมูล
+                  </q-item-section>
+                </q-item>
+              </template>
+            </q-select>
             <q-toggle
               class="col-xs-12 col-sm-5 col-md-5 toggle-expired-account"
               v-model="expiredAccount"

src/modules/05_placement/components/Receive/receiveDetail2.vue

@@ -12,7 +12,7 @@ import type {
   Information,
   DataOption,
   DataOptioninfo,
-  docList
+  docList,
 } from "@/modules/04_registry/components/profileType";
 
 import { defaultInformation } from "@/modules/04_registry/components/profileType";
@@ -272,7 +272,7 @@ const cancel = async () => {
   edit.value = !edit.value;
   if (myForm.value !== null) {
     await getData();
-    myForm.value?.resetValidation()
+    myForm.value?.resetValidation();
   }
 };
 
@@ -871,7 +871,8 @@ onMounted(async () => {
                 :label="`${'ประเภทการจ้าง'}`"
                 use-input
                 input-debounce="0"
-                @filter="(inputValue:any, doneFn:Function) => filterSelector(inputValue, doneFn,'employeeTypeOps' ) " />
+                @filter="(inputValue:any, doneFn:Function) => filterSelector(inputValue, doneFn,'employeeTypeOps' ) "
+              />
             </div>
             <div
               class="col-xs-6 col-sm-3 col-md-3"
@@ -896,7 +897,8 @@ onMounted(async () => {
                 :label="`${'ประเภทลูกจ้าง'}`"
                 use-input
                 input-debounce="0"
-                @filter="(inputValue:any, doneFn:Function) => filterSelector(inputValue, doneFn,'employeeClassOps' ) " />
+                @filter="(inputValue:any, doneFn:Function) => filterSelector(inputValue, doneFn,'employeeClassOps' ) "
+              />
             </div>
             <div class="col-xs-12">
               <div class="text-weight-bold text-grey">

src/modules/05_placement/components/Repatriate/RepatriatebyId.vue

@@ -1,4 +1,5 @@
-div<script setup lang="ts">
+div
+<script setup lang="ts">
 import { onMounted, ref } from "vue";
 import { useQuasar } from "quasar";
 import { useRoute, useRouter } from "vue-router";
@@ -9,7 +10,7 @@ import CurrencyInput from "@/components/CurruncyInput.vue";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
-import type {  QForm } from "quasar";
+import type { QForm } from "quasar";
 import type { ResponseData } from "@/modules/05_placement/interface/response/officer";
 const $q = useQuasar();
 const route = useRoute();
@@ -48,6 +49,7 @@ const positionLevelOld = ref<string>("");
 const positionNumberOld = ref<string>("");
 const organizationPositionOld = ref<string>("");
 const avatar = ref<string>("");
+const dateRepatriation = ref<Date | null>(null);
 
 const getData = async () => {
   showLoader();
@@ -75,6 +77,7 @@ const getData = async () => {
       positionLevelOld.value = data.positionLevelOld;
       positionNumberOld.value = data.positionNumberOld;
       organizationPositionOld.value = data.organizationPositionOld;
+      dateRepatriation.value = data.dateRepatriation;
     })
     .catch((e) => {
       messageError($q, e);
@@ -108,7 +111,7 @@ const conditionSave = async () => {
 const cancelBtn = () => {
   edit.value = !edit;
   getData();
-  myForm.value?.resetValidation()
+  myForm.value?.resetValidation();
 };
 const saveData = async () => {
   const body = {
@@ -120,11 +123,12 @@ const saveData = async () => {
     positionLevelOld: positionLevelOld.value,
     positionNumberOld: posNo.value,
     amountOld: salary.value,
+    dateRepatriation: dateRepatriation.value,
   };
   showLoader();
   await http
     .put(config.API.repatriationMainEdit(dataId), body)
-    .then((res: any) => {
+    .then(() => {
       success($q, "แก้ไขข้อมูลเพื่อลงบัญชีแนบท้ายสำเร็จ");
       edit.value = false;
     })
@@ -144,8 +148,16 @@ onMounted(async () => {
 
 <template>
   <div class="toptitle text-dark col-12 row items-center">
-    <q-btn icon="mdi-arrow-left" unelevated round dense flat 
+    <q-btn
-      color="primary" class="q-mr-sm" @click="router.push(`/repatriate`)" />
+      icon="mdi-arrow-left"
+      unelevated
+      round
+      dense
+      flat
+      color="primary"
+      class="q-mr-sm"
+      @click="router.push(`/repatriate`)"
+    />
     รายละเอียดการส่งตัวกลับ {{ fullname }}
   </div>
   <q-card bordered class="row col-12 text-dark">
@@ -154,8 +166,15 @@ onMounted(async () => {
         {{ fullname }}
       </div>
       <q-space />
-      <q-btn outline color="blue" dense icon-right="mdi-open-in-new" class="q-px-sm" 
+      <q-btn
-        label="ดูข้อมูลทะเบียนประวัติ" @click="router.push(`/registry/${personId}`)" />
+        outline
+        color="blue"
+        dense
+        icon-right="mdi-open-in-new"
+        class="q-px-sm"
+        label="ดูข้อมูลทะเบียนประวัติ"
+        @click="router.push(`/registry/${personId}`)"
+      />
     </div>
     <div class="col-12"><q-separator /></div>
     <div class="row col-12 q-pa-md">
@@ -199,14 +218,37 @@ onMounted(async () => {
       </div>
       <q-space />
       <div class="q-gutter-sm" v-if="!edit">
-        <q-btn outline color="primary" dense icon-right="mdi-file-edit-outline" 
+        <q-btn
-          class="q-px-sm" label="แก้ไข" style="width: 80px" @click="edit = !edit" 
+          outline
-          v-if="!(status == 'REPORT' || status == 'DONE')"/>
+          color="primary"
+          dense
+          icon-right="mdi-file-edit-outline"
+          class="q-px-sm"
+          label="แก้ไข"
+          style="width: 80px"
+          @click="edit = !edit"
+          v-if="!(status == 'REPORT' || status == 'DONE')"
+        />
       </div>
       <div class="q-gutter-sm" v-else>
-        <q-btn outline color="public" dense class="q-px-sm" label="บันทึก" 
+        <q-btn
-          style="width: 80px" @click="conditionSave" />
+          outline
-        <q-btn outline color="red" dense class="q-px-sm" label="ยกเลิก" style="width: 80px" @click="cancelBtn" />
+          color="public"
+          dense
+          class="q-px-sm"
+          label="บันทึก"
+          style="width: 80px"
+          @click="conditionSave"
+        />
+        <q-btn
+          outline
+          color="red"
+          dense
+          class="q-px-sm"
+          label="ยกเลิก"
+          style="width: 80px"
+          @click="cancelBtn"
+        />
       </div>
     </div>
     <div class="col-12"><q-separator /></div>
@@ -220,62 +262,187 @@ onMounted(async () => {
               </div>
             </div>
             <div class="col-12">
-              <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit" :borderless="!edit"
+              <q-input
-                v-model="organizationPositionOld" :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่ง/สังกัด'}`]" 
+                :class="getClass(edit)"
-                hide-bottom-space :label="`${'ตำแหน่ง/สังกัด'}`" type="textarea" />
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="organizationPositionOld"
+                :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่ง/สังกัด'}`]"
+                hide-bottom-space
+                :label="`${'ตำแหน่ง/สังกัด'}`"
+                type="textarea"
+              />
             </div>
           </div>
-          <div class="col-xs-6 col-sm-3 row ">
+          <div class="col-xs-6 col-sm-3 row">
             <div class="col-12">
-              <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit" :borderless="!edit"
+              <q-input
-                v-model="positionTypeOld" :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่งประเภท'}`]" hide-bottom-space 
+                :class="getClass(edit)"
-                :label="`${'ตำแหน่งประเภท'}`" />
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="positionTypeOld"
+                :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่งประเภท'}`]"
+                hide-bottom-space
+                :label="`${'ตำแหน่งประเภท'}`"
+              />
             </div>
           </div>
-          <div class="col-xs-6 col-sm-3 row ">
+          <div class="col-xs-6 col-sm-3 row">
             <div class="col-12">
-              <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit" :borderless="!edit"
+              <q-input
-                v-model="positionLevelOld" :rules="[(val) => !!val || `${'กรุณากรอกระดับ'}`]" hide-bottom-space
+                :class="getClass(edit)"
-                :label="`${'ระดับ'}`" />
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="positionLevelOld"
+                :rules="[(val) => !!val || `${'กรุณากรอกระดับ'}`]"
+                hide-bottom-space
+                :label="`${'ระดับ'}`"
+              />
             </div>
           </div>
-          <div class="col-xs-6 col-sm-3 row ">
+          <div class="col-xs-6 col-sm-3 row">
             <div class="col-12">
-              <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit" :borderless="!edit"
+              <q-input
-                v-model="posNo" :rules="[(val) => !!val || `${'กรุณากรอกเลขที่'}`]" hide-bottom-space
+                :class="getClass(edit)"
-                :label="`${'เลขที่'}`" />
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="posNo"
+                :rules="[(val) => !!val || `${'กรุณากรอกเลขที่'}`]"
+                hide-bottom-space
+                :label="`${'เลขที่'}`"
+              />
             </div>
           </div>
-          <div class="col-xs-6 col-sm-3 row ">
+          <div class="col-xs-6 col-sm-3 row">
             <div class="col-12">
-              <CurrencyInput v-model="salary" :edit="edit" :options="{ currency: 'THB', }" :label="`${'เงินเดือน'}`" />
+              <CurrencyInput
+                v-model="salary"
+                :edit="edit"
+                :options="{ currency: 'THB' }"
+                :label="`${'เงินเดือน'}`"
+              />
             </div>
           </div>
           <div class="col-12"><q-separator /></div>
-          <div class="col-xs-6 col-sm-6 row ">
+          <div class="col-xs-6 col-sm-4 row">
             <div class="col-12">
-              <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit" :borderless="!edit"
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
                 v-model="organization"
-                :rules="[ (val) => !!val || `${'กรุณากรอกหน่วยงานที่ให้ช่วยราชการ'}`, ]" hide-bottom-space
+                :rules="[
-                :label="`${'หน่วยงานที่ให้ช่วยราชการ'}`" />
+                  (val) => !!val || `${'กรุณากรอกหน่วยงานที่ให้ช่วยราชการ'}`,
+                ]"
+                hide-bottom-space
+                :label="`${'หน่วยงานที่ให้ช่วยราชการ'}`"
+              />
             </div>
           </div>
-          <div class="col-xs-6 col-sm-6 row ">
+          <div class="col-xs-6 col-sm-4 row">
             <div class="col-12">
-              <datepicker menu-class-name="modalfix" :readonly="!edit" v-model="date" :locale="'th'" 
+              <datepicker
-                autoApply :enableTimePicker="false" week-start="0" >
+                menu-class-name="modalfix"
+                :readonly="!edit"
+                v-model="date"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                week-start="0"
+              >
                 <template #year="{ year }">{{ year + 543 }}</template>
                 <template #year-overlay-value="{ value }">{{
                   parseInt(value + 543)
                 }}</template>
                 <template #trigger>
-                  <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit"
+                  <q-input
-                    :borderless="!edit" :model-value="date !== null ? date2Thai(date) : null"
+                    :class="getClass(edit)"
-                    :rules="[(val) => !!val || `${'กรุณาเลือกตั้งแต่วัน'}`]" hide-bottom-space
+                    :outlined="edit"
-                    :label="`${'ตั้งแต่วัน'}`" >
+                    dense
+                    lazy-rules
+                    :readonly="!edit"
+                    :borderless="!edit"
+                    :model-value="date !== null ? date2Thai(date) : null"
+                    :rules="[(val) => !!val || `${'กรุณาเลือกตั้งแต่วัน'}`]"
+                    hide-bottom-space
+                    :label="`${'ตั้งแต่วัน'}`"
+                  >
                     <template v-slot:prepend>
-                      <q-icon name="event" class="cursor-pointer" :style="
+                      <q-icon
-                          edit ? 'color: var(--q-primary)' : 'color: var(--q-grey)'" >
+                        name="event"
+                        class="cursor-pointer"
+                        :style="
+                          edit
+                            ? 'color: var(--q-primary)'
+                            : 'color: var(--q-grey)'
+                        "
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+          </div>
+          <div class="col-xs-6 col-sm-4 row">
+            <div class="col-12">
+              <datepicker
+                menu-class-name="modalfix"
+                :readonly="!edit"
+                v-model="dateRepatriation"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                week-start="0"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    :class="getClass(edit)"
+                    :outlined="edit"
+                    dense
+                    lazy-rules
+                    :readonly="!edit"
+                    :borderless="!edit"
+                    :model-value="
+                      dateRepatriation !== null
+                        ? date2Thai(dateRepatriation)
+                        : null
+                    "
+                    :rules="[
+                      (val) => !!val || `${'กรุณาเลือกวันที่ส่งตัวกลับ'}`,
+                    ]"
+                    hide-bottom-space
+                    :label="`${'วันที่ส่งตัวกลับ'}`"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        :style="
+                          edit
+                            ? 'color: var(--q-primary)'
+                            : 'color: var(--q-grey)'
+                        "
+                      >
                       </q-icon>
                     </template>
                   </q-input>
@@ -284,9 +451,19 @@ onMounted(async () => {
             </div>
           </div>
           <div class="col-12">
-            <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit" :borderless="!edit"
+            <q-input
-              v-model="reason" :rules="[(val) => !!val || `${'กรุณากรอกหมายเหตุ '}`]" hide-bottom-space
+              :class="getClass(edit)"
-              :label="`${'หมายเหตุ '}`" type="textarea" />
+              :outlined="edit"
+              dense
+              lazy-rules
+              :readonly="!edit"
+              :borderless="!edit"
+              v-model="reason"
+              :rules="[(val) => !!val || `${'กรุณากรอกหมายเหตุ '}`]"
+              hide-bottom-space
+              :label="`${'หมายเหตุ '}`"
+              type="textarea"
+            />
           </div>
         </div>
       </div>

src/modules/05_placement/components/probation/FormEvaluation/FormReport.vue

@@ -17,7 +17,7 @@ const {
   showLoader,
   hideLoader,
   dialogConfirm,
-  dialogMessageNotify
+  dialogMessageNotify,
 } = mixin;
 const route = useRoute();
 const assignId = ref<string>(route.params.form.toString());
@@ -27,7 +27,7 @@ const assign = ref<any>([]);
 const mentors = ref<any>([]);
 const commander = ref<any>([]);
 const status = ref<boolean>(true);
-const ID = ref<string>('')
+const ID = ref<string>("");
 const date_start = ref<Date>(new Date());
 const date_finish = ref<Date>();
 const develop = ref<number>();
@@ -61,13 +61,16 @@ const fecthAssign = async (id: string) => {
   await http
     .get(config.API.evaluateReportcreate(id))
     .then((res) => {
-      assign.value = res.data.data.assign
+      assign.value = res.data.data.assign;
-      person.value = res.data.data.person
+      person.value = res.data.data.person;
       mentors.value = res.data.data.mentors;
       date_start.value = res.data.data.assign.date_start;
       date_finish.value = res.data.data.assign.date_finish;
 
-      if (res.data.data.result.develop_complete != null && res.data.data.result.evaluate_result != null) {
+      if (
+        res.data.data.result.develop_complete != null &&
+        res.data.data.result.evaluate_result != null
+      ) {
         develop.value = res.data.data.result.develop_complete;
         result.value = res.data.data.result.evaluate_result;
       }
@@ -94,7 +97,7 @@ const fecthResult = async (id: string) => {
     .then(async (res: any) => {
       if (res.data.data != null) {
         const data = await res.data.data.evaluate;
-        ID.value = data.id
+        ID.value = data.id;
         date_start.value = data.date_start;
         date_finish.value = data.date_finish;
         develop.value = await Number(data.develop_complete);
@@ -106,10 +109,10 @@ const fecthResult = async (id: string) => {
         status.value = false;
         action.value = "edit";
         expand_month.value = data.expand_month;
-        changeReson52(Number(data.pass_result))
+        changeReson52(Number(data.pass_result));
       }
     })
-    .catch((e) => { });
+    .catch((e) => {});
 };
 
 // part new
@@ -127,8 +130,6 @@ const optionsResult = [
   },
 ];
 
-
-
 const savaForm = async () => {
   await myForm.value.validate().then((result: boolean) => {
     if (result) {
@@ -185,7 +186,8 @@ const postData = async (action: string) => {
       })
       .catch((e: any) => {
         messageError($q, e);
-      }).finally(() => {
+      })
+      .finally(() => {
         status.value = false;
         fecthResult(assignId.value);
       });
@@ -210,19 +212,19 @@ const selectRuslt = () => {
     expand_month.value = "";
   }
 
-  changeReson52(Number(result.value))
+  changeReson52(Number(result.value));
 };
 
 function changeReson52(val: number) {
   switch (val) {
     case 1:
-      reson52.value = "เห็นควรให้รับราชการต่อไป"
+      reson52.value = "เห็นควรให้รับราชการต่อไป";
       break;
     case 2:
-      reson52.value = "เห็นควรให้ออกจากราชการ"
+      reson52.value = "เห็นควรให้ออกจากราชการ";
       break;
     case 3:
-      reson52.value = `เห็นควรให้ขยายเวลาทดลองปฏิบัตหิน้าท่ีราชการต่อไปอีก ${expand_month.value} เดือน`
+      reson52.value = `เห็นควรให้ขยายเวลาทดลองปฏิบัตหิน้าท่ีราชการต่อไปอีก ${expand_month.value} เดือน`;
       break;
 
     default:
@@ -234,22 +236,57 @@ onMounted(() => {
   fecthAssign(assignId.value);
   fecthResult(assignId.value);
 });
+const optionsFn = ref<any>([]);
+function filterFnOptions(val: string, update: any) {
+  if (val == "") {
+    update(() => {
+      optionsFn.value = options;
+    });
+  } else {
+    update(() => {
+      optionsFn.value = options.filter((e: any) => e.label.search(val) !== -1);
+    });
+  }
+}
+const optionsResultFn = ref<any>([])
+function filterFnOptionsResult(val: string, update: any) {
+  if (val == "") {
+    update(() => {
+      optionsResultFn.value = optionsResult;
+    });
+  } else {
+    update(() => {
+      optionsResultFn.value = optionsResult.filter((e: any) => e.label.search(val) !== -1);
+    });
+  }
+}
 </script>
 
 <template>
   <div class="row col-12">
     <div class="toptitle text-dark col-12 row items-center q-gutter-md">
       <div>แบบรายงานการประเมินฯ</div>
-      <q-btn v-if="!status" size="12px" flat dense icon="mdi-download" color="primary">
+      <q-btn
+        v-if="!status"
+        size="12px"
+        flat
+        dense
+        icon="mdi-download"
+        color="primary"
+      >
         <q-tooltip>ดาวน์โหลด</q-tooltip>
         <q-menu>
           <q-list style="min-width: 150px">
             <q-item clickable v-close-popup @click="clickdownloadFile('pdf')">
-              <q-item-section avatar><q-icon color="red" name="mdi-file-pdf" /></q-item-section>
+              <q-item-section avatar
+                ><q-icon color="red" name="mdi-file-pdf"
+              /></q-item-section>
               <q-item-section>ไฟล์ .PDF</q-item-section>
             </q-item>
             <q-item clickable v-close-popup @click="clickdownloadFile('docx')">
-              <q-item-section avatar><q-icon color="blue" name="mdi-file-word" /></q-item-section>
+              <q-item-section avatar
+                ><q-icon color="blue" name="mdi-file-word"
+              /></q-item-section>
               <q-item-section>ไฟล์ .docx</q-item-section>
             </q-item>
           </q-list>
@@ -282,9 +319,7 @@ onMounted(() => {
       <div class="col-12 text-top0 row items-center">
         <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
         ประเมินผล
-        <span class="text-primary q-pr-sm">
+        <span class="text-primary q-pr-sm"> ครั้งที่ 1 </span>
-          ครั้งที่ 1
-        </span>
       </div>
 
       <div class="col-12 text-top0 row items-center">
@@ -299,8 +334,16 @@ onMounted(() => {
       <div class="row col-12">
         <div class="col-12 row q-col-gutter-md">
           <div class="col-xs-12 col-sm-6">
-            <datepicker menu-class-name="modalfix" v-model="date_start" :locale="'th'" autoApply borderless
+            <datepicker
-              :readonly="!status" :enableTimePicker="false" week-start="0">
+              menu-class-name="modalfix"
+              v-model="date_start"
+              :locale="'th'"
+              autoApply
+              borderless
+              :readonly="!status"
+              :enableTimePicker="false"
+              week-start="0"
+            >
               <template #year="{ year }">
                 {{ year + 543 }}
               </template>
@@ -308,10 +351,23 @@ onMounted(() => {
                 {{ parseInt(value + 543) }}
               </template>
               <template #trigger>
-                <q-input outlined dense :disable="!status" class="full-width datepicker" :model-value="date_start != null ? date2Thai(date_start) : null
+                <q-input
-                  " :label="`${'ระหว่างวันที่'}`" :rules="[(val) => !!val || `${'กรุณาเลือกวันที่'}`]">
+                  outlined
+                  dense
+                  :disable="!status"
+                  class="full-width datepicker"
+                  :model-value="
+                    date_start != null ? date2Thai(date_start) : null
+                  "
+                  :label="`${'ระหว่างวันที่'}`"
+                  :rules="[(val) => !!val || `${'กรุณาเลือกวันที่'}`]"
+                >
                   <template v-slot:prepend>
-                    <q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
+                    <q-icon
+                      name="event"
+                      class="cursor-pointer"
+                      style="color: var(--q-primary)"
+                    >
                     </q-icon>
                   </template>
                 </q-input>
@@ -319,8 +375,16 @@ onMounted(() => {
             </datepicker>
           </div>
           <div class="col-xs-12 col-sm-6">
-            <datepicker menu-class-name="modalfix" v-model="date_finish" :locale="'th'" autoApply :readonly="!status"
+            <datepicker
-              borderless :enableTimePicker="false" week-start="0">
+              menu-class-name="modalfix"
+              v-model="date_finish"
+              :locale="'th'"
+              autoApply
+              :readonly="!status"
+              borderless
+              :enableTimePicker="false"
+              week-start="0"
+            >
               <template #year="{ year }">
                 {{ year + 543 }}
               </template>
@@ -328,10 +392,23 @@ onMounted(() => {
                 {{ parseInt(value + 543) }}
               </template>
               <template #trigger>
-                <q-input outlined dense :disable="!status" class="full-width datepicker" :model-value="date_finish != null ? date2Thai(date_finish) : null
+                <q-input
-                  " :label="`${'ถึงวันที่'}`" :rules="[(val) => !!val || `${'กรุณาเลือกวันที่'}`]">
+                  outlined
+                  dense
+                  :disable="!status"
+                  class="full-width datepicker"
+                  :model-value="
+                    date_finish != null ? date2Thai(date_finish) : null
+                  "
+                  :label="`${'ถึงวันที่'}`"
+                  :rules="[(val) => !!val || `${'กรุณาเลือกวันที่'}`]"
+                >
                   <template v-slot:prepend>
-                    <q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
+                    <q-icon
+                      name="event"
+                      class="cursor-pointer"
+                      style="color: var(--q-primary)"
+                    >
                     </q-icon>
                   </template>
                 </q-input>
@@ -344,27 +421,78 @@ onMounted(() => {
       <div class="col-12 row q-mt-xs">
         <div class="col-12 row q-col-gutter-md">
           <div class="col-xs-12 col-sm-6">
-            <q-select :rules="[
+            <q-select
-              (val) =>
+              :rules="[
-                !!val ||
+                (val) =>
-                'กรุณาเลือกการพัฒนาในระหว่างทดลองปฏิบัติหน้าที่ราชการ',
+                  !!val ||
-            ]" hide-bottom-space :options="options" class="col-xs-12 col-sm-6" dense borderless :disable="!status"
+                  'กรุณาเลือกการพัฒนาในระหว่างทดลองปฏิบัติหน้าที่ราชการ',
-              emit-value map-options option-label="label" option-value="value" outlined v-model="develop"
+              ]"
-              label="การพัฒนาในระหว่างทดลองปฏิบัติหน้าที่ราชการ" />
+              hide-bottom-space
+              :options="optionsFn"
+              class="col-xs-12 col-sm-6"
+              dense
+              borderless
+              :disable="!status"
+              emit-value
+              map-options
+              option-label="label"
+              option-value="value"
+              outlined
+              v-model="develop"
+              label="การพัฒนาในระหว่างทดลองปฏิบัติหน้าที่ราชการ"
+              @filter="filterFnOptions"
+              use-input
+              ><template v-slot:no-option>
+                <q-item>
+                  <q-item-section class="text-grey">
+                    ไม่มีข้อมูล
+                  </q-item-section>
+                </q-item>
+              </template>
+            </q-select>
           </div>
           <div class="col-xs-12 col-sm-6">
             <div class="row">
-              <q-select class="col-sm-12" :rules="[
+              <q-select
-                (val) =>
+                class="col-sm-12"
-                  !!val ||
+                :rules="[
-                  'กรุณาเลือกผลการประเมินการทดลองปฏิบัติหน้าที่ราชการ',
+                  (val) =>
-              ]" hide-bottom-space :options="optionsResult" :disable="!status" dense borderless emit-value map-options
+                    !!val ||
-                option-label="label" option-value="value" outlined v-model="result"
+                    'กรุณาเลือกผลการประเมินการทดลองปฏิบัติหน้าที่ราชการ',
-                label="ผลการประเมินการทดลองปฏิบัติหน้าที่ราชการ" @update:model-value="selectRuslt" />
+                ]"
+                hide-bottom-space
+                :options="optionsResultFn"
+                :disable="!status"
+                dense
+                borderless
+                emit-value
+                map-options
+                option-label="label"
+                option-value="value"
+                outlined
+                v-model="result"
+                label="ผลการประเมินการทดลองปฏิบัติหน้าที่ราชการ"
+                @update:model-value="selectRuslt"
+                use-input
+                @filter="filterFnOptionsResult"
+                ><template v-slot:no-option>
+                  <q-item>
+                    <q-item-section class="text-grey">
+                      ไม่มีข้อมูล
+                    </q-item-section>
+                  </q-item>
+                </template>
+              </q-select>
             </div>
             <div class="row q-mt-xs" v-if="result === 3">
-              <q-input outlined dense v-model="expand_month" label="จำนวนเดือน"
+              <q-input
-                :rules="[(val) => !!val || 'กรุณากรอกจำนวนเดือน']" type="number" />
+                outlined
+                dense
+                v-model="expand_month"
+                label="จำนวนเดือน"
+                :rules="[(val) => !!val || 'กรุณากรอกจำนวนเดือน']"
+                type="number"
+              />
             </div>
           </div>
         </div>
@@ -373,14 +501,34 @@ onMounted(() => {
       <div class="col-12 row q-mt-md">
         <div class="col-12 row q-col-gutter-md">
           <div class="col-xs-12 col-sm-6">
-            <q-input hide-bottom-space dense borderless outlined :disable="!status" class="bg-white" type="textarea"
+            <q-input
-              v-model="reson" lazy-rules label="เหตุผล"
+              hide-bottom-space
-              :rules="[(val) => !!val && val.length > 0 || 'กรุณาระบุเหตุผล']" />
+              dense
+              borderless
+              outlined
+              :disable="!status"
+              class="bg-white"
+              type="textarea"
+              v-model="reson"
+              lazy-rules
+              label="เหตุผล"
+              :rules="[(val) => (!!val && val.length > 0) || 'กรุณาระบุเหตุผล']"
+            />
           </div>
           <div class="col-xs-12 col-sm-6">
-            <q-input hide-bottom-space dense borderless outlined disable class="bg-white" type="textarea"
+            <q-input
-              v-model="reson52" lazy-rules label="ความเห็นของผู้มีอํานาจสั่งบรรจุตามมาตรา 52"
+              hide-bottom-space
-              :rules="[(val) => !!val && val.length > 0 || 'กรุณาระบุเหตุผล']" />
+              dense
+              borderless
+              outlined
+              disable
+              class="bg-white"
+              type="textarea"
+              v-model="reson52"
+              lazy-rules
+              label="ความเห็นของผู้มีอํานาจสั่งบรรจุตามมาตรา 52"
+              :rules="[(val) => (!!val && val.length > 0) || 'กรุณาระบุเหตุผล']"
+            />
           </div>
         </div>
       </div>
@@ -392,14 +540,31 @@ onMounted(() => {
       <div class="row col-12 q-gutter-lg q-mt-none">
         <div class="col-12 row">
           <div class="col-12 text-top2 row items-center">
-            ประธานคณะกรรมการประเมินผลการปฏิบัติหน้าที่ราชการ/ผู้มีอํานาจสั่งบรรจุตามมาตรา 52
+            ประธานคณะกรรมการประเมินผลการปฏิบัติหน้าที่ราชการ/ผู้มีอํานาจสั่งบรรจุตามมาตรา
+            52
           </div>
           <div class="col-12 row q-col-gutter-md">
-            <q-select class="col-xs-12 col-sm-8" dense v-model="director_id" outlined :options="commander"
+            <q-select
-              label="ชื่อ-นามสกุล" option-label="name" disable />
+              class="col-xs-12 col-sm-8"
+              dense
+              v-model="director_id"
+              outlined
+              :options="commander"
+              label="ชื่อ-นามสกุล"
+              option-label="name"
+              disable
+            />
             <div class="col-xs-12 col-sm-4">
-              <datepicker menu-class-name="modalfix" v-model="chairman_dated" :locale="'th'" :readonly="!status" autoApply
+              <datepicker
-                borderless :enableTimePicker="false" week-start="0">
+                menu-class-name="modalfix"
+                v-model="chairman_dated"
+                :locale="'th'"
+                :readonly="!status"
+                autoApply
+                borderless
+                :enableTimePicker="false"
+                week-start="0"
+              >
                 <template #year="{ year }">
                   {{ year + 543 }}
                 </template>
@@ -407,10 +572,23 @@ onMounted(() => {
                   {{ parseInt(value + 543) }}
                 </template>
                 <template #trigger>
-                  <q-input outlined dense :disable="!status" class="full-width datepicker col-3" :model-value="chairman_dated != null ? date2Thai(chairman_dated) : null
+                  <q-input
-                    " :label="`${'ลงวันที่'}`" :rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่'}`]">
+                    outlined
+                    dense
+                    :disable="!status"
+                    class="full-width datepicker col-3"
+                    :model-value="
+                      chairman_dated != null ? date2Thai(chairman_dated) : null
+                    "
+                    :label="`${'ลงวันที่'}`"
+                    :rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่'}`]"
+                  >
                     <template v-slot:prepend>
-                      <q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        style="color: var(--q-primary)"
+                      >
                       </q-icon>
                     </template>
                   </q-input>
@@ -426,11 +604,27 @@ onMounted(() => {
             <!-- ความเห็นของผู้มีอำนาจสั่งบรรจุตามมาตรา 52 -->
           </div>
           <div class="col-12 row q-col-gutter-md">
-            <q-select class="col-xs-12 col-sm-8" dense v-model="director_id2" outlined label="ชื่อ-นามสกุล" disable
+            <q-select
-              :options="optionDirector" option-label="name" />
+              class="col-xs-12 col-sm-8"
+              dense
+              v-model="director_id2"
+              outlined
+              label="ชื่อ-นามสกุล"
+              disable
+              :options="optionDirector"
+              option-label="name"
+            />
             <div class="col-xs-12 col-sm-4">
-              <datepicker menu-class-name="modalfix" v-model="director1_dated" :locale="'th'" autoApply borderless
+              <datepicker
-                :readonly="!status" :enableTimePicker="false" week-start="0">
+                menu-class-name="modalfix"
+                v-model="director1_dated"
+                :locale="'th'"
+                autoApply
+                borderless
+                :readonly="!status"
+                :enableTimePicker="false"
+                week-start="0"
+              >
                 <template #year="{ year }">
                   {{ year + 543 }}
                 </template>
@@ -438,12 +632,25 @@ onMounted(() => {
                   {{ parseInt(value + 543) }}
                 </template>
                 <template #trigger>
-                  <q-input outlined dense :disable="!status" class="full-width datepicker col-3" :model-value="director1_dated != null
+                  <q-input
-                    ? date2Thai(director1_dated)
+                    outlined
-                    : null
+                    dense
-                    " :label="`${'ลงวันที่'}`" :rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่'}`]">
+                    :disable="!status"
+                    class="full-width datepicker col-3"
+                    :model-value="
+                      director1_dated != null
+                        ? date2Thai(director1_dated)
+                        : null
+                    "
+                    :label="`${'ลงวันที่'}`"
+                    :rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่'}`]"
+                  >
                     <template v-slot:prepend>
-                      <q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        style="color: var(--q-primary)"
+                      >
                       </q-icon>
                     </template>
                   </q-input>
@@ -459,11 +666,27 @@ onMounted(() => {
             <!-- ผู้มีอำนาจสั่งบรรจุตามมาตรา 52 -->
           </div>
           <div class="col-12 row q-col-gutter-md">
-            <q-select class="col-xs-12 col-sm-8" dense v-model="director_id3" outlined label="ชื่อ-นามสกุล"
+            <q-select
-              :options="optionDirector" disable option-label="name" />
+              class="col-xs-12 col-sm-8"
+              dense
+              v-model="director_id3"
+              outlined
+              label="ชื่อ-นามสกุล"
+              :options="optionDirector"
+              disable
+              option-label="name"
+            />
             <div class="col-xs-12 col-sm-4">
-              <datepicker menu-class-name="modalfix" v-model="director2_dated" :locale="'th'" autoApply
+              <datepicker
-                :readonly="!status" borderless :enableTimePicker="false" week-start="0">
+                menu-class-name="modalfix"
+                v-model="director2_dated"
+                :locale="'th'"
+                autoApply
+                :readonly="!status"
+                borderless
+                :enableTimePicker="false"
+                week-start="0"
+              >
                 <template #year="{ year }">
                   {{ year + 543 }}
                 </template>
@@ -471,12 +694,25 @@ onMounted(() => {
                   {{ parseInt(value + 543) }}
                 </template>
                 <template #trigger>
-                  <q-input outlined dense :disable="!status" class="full-width datepicker col-3" :model-value="director2_dated != null
+                  <q-input
-                    ? date2Thai(director2_dated)
+                    outlined
-                    : null
+                    dense
-                    " :label="`${'ลงวันที่'}`" :rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่'}`]">
+                    :disable="!status"
+                    class="full-width datepicker col-3"
+                    :model-value="
+                      director2_dated != null
+                        ? date2Thai(director2_dated)
+                        : null
+                    "
+                    :label="`${'ลงวันที่'}`"
+                    :rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่'}`]"
+                  >
                     <template v-slot:prepend>
-                      <q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        style="color: var(--q-primary)"
+                      >
                       </q-icon>
                     </template>
                   </q-input>

src/modules/05_placement/components/probation/MainProbation.vue

@@ -2,9 +2,15 @@
 import { ref, useAttrs, onMounted } from "vue";
 import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar } from "quasar";
-import { useTransferDataStore } from "@/modules/05_placement/store"
+import { useTransferDataStore } from "@/modules/05_placement/store";
 import type { QTableProps } from "quasar";
-import type { FormMainProbation, FormMainProbation2,mapData,OpfillterType,CriteriaType } from "@/modules/05_placement/interface/request/Main";
+import type {
+  FormMainProbation,
+  FormMainProbation2,
+  mapData,
+  OpfillterType,
+  CriteriaType,
+} from "@/modules/05_placement/interface/request/Main";
 
 import DialogHeader from "@/modules/04_registry/components/DialogHeader.vue";
 import router from "@/router";
@@ -18,7 +24,7 @@ const rows2 = ref<FormMainProbation2[]>([]);
 const modal = ref<boolean>(false);
 const attrs = ref<any>(useAttrs());
 const paging = ref<boolean>(true);
-const fillter = ref<number>(0);
+const fillter = ref<number | null>(0);
 const paging2 = ref<boolean>(true);
 const Opfillter = ref<OpfillterType[]>([{ id: 0, value: "ทั้งหมด" }]);
 const filterRef = ref<any>(null);
@@ -28,10 +34,10 @@ const probationlist = ref<any>([]);
 const filterKeyword = ref<string>("");
 const fillterStatus = ref<any>([]);
 const filterKeyword2 = ref<string>("");
-  
+
-const storeFn = useTransferDataStore()
+const storeFn = useTransferDataStore();
 const mixin = useCounterMixin();
-const { statusProbationMain } = storeFn
+const { statusProbationMain } = storeFn;
 const { messageError, success, showLoader, hideLoader, dialogConfirm } = mixin;
 
 const pagination = ref({
@@ -205,6 +211,7 @@ const ProbationMainFilter = () => {
     }
   });
   Opfillter.value.sort((a: any, b: any) => a.id - b.id);
+  Opfillter2.value = Opfillter.value;
 };
 
 const updateRows = (body: any) => {
@@ -240,7 +247,7 @@ const getpersonalList = async () => {
       dataUpdate.value = rows.value;
       ProbationMainFilter();
     })
-    .catch(() => { })
+    .catch(() => {})
     .finally(() => {
       hideLoader();
     });
@@ -259,7 +266,7 @@ const fecthlistPersonal = async () => {
     .catch((e) => {
       messageError($q, e);
     })
-    .finally(() => { });
+    .finally(() => {});
 };
 const fecthlistProbation = async (id: string, data: any) => {
   try {
@@ -279,11 +286,11 @@ const fecthlistProbation = async (id: string, data: any) => {
 };
 
 const findlist = async (id: string) => {
-  let data:CriteriaType[] = [
+  let data: CriteriaType[] = [
     { criteriaType: "is_retire", criteriaValue: "false" },
     { criteriaType: "is_probation", criteriaValue: "true" },
   ];
-  let data2:CriteriaType[] = [
+  let data2: CriteriaType[] = [
     { criteriaType: "is_retire", criteriaValue: "false" },
     { criteriaType: "is_probation", criteriaValue: "false" },
   ];
@@ -336,7 +343,6 @@ const clickClose = async () => {
   modal.value = false;
 };
 
-
 const resetFilter = () => {
   filterKeyword.value = "";
   filterRef.value.focus();
@@ -359,6 +365,22 @@ const paginationLabel2 = (start: string, end: string, total: string) => {
 onMounted(async () => {
   getpersonalList();
 });
+
+const Opfillter2 = ref<any[]>([]);
+function filterFn(val: string, update: any) {
+  if (val == "") {
+    update(() => {
+      Opfillter2.value = Opfillter.value;
+      fillter.value = null;
+    });
+  } else {
+    update(() => {
+      Opfillter2.value = Opfillter.value.filter(
+        (e: any) => e.value.search(val) !== -1
+      );
+    });
+  }
+}
 </script>
 
 <template>
@@ -370,33 +392,103 @@ onMounted(async () => {
       <div class="row col-12 q-col-gutter-sm">
         <div class="col-6">
           <div class="row">
-            <q-select class="col-5 q-mr-sm" v-model="fillter" label="สถานะ" dense map-options option-label="value"
+            <q-select
-              :options="Opfillter" option-value="id" lazy-rules hide-bottom-space :readonly="false" :borderless="false"
+              class="col-5 q-mr-sm"
-              :outlined="true" :hide-dropdown-icon="false" @update:model-value="updateRows(fillter)" />
+              v-model="fillter"
+              label="สถานะ"
+              dense
+              map-options
+              option-label="value"
+              :options="Opfillter2"
+              option-value="id"
+              lazy-rules
+              hide-bottom-space
+              :readonly="false"
+              :borderless="false"
+              :outlined="true"
+              :hide-dropdown-icon="false"
+              @update:model-value="updateRows(fillter)"
+              @filter="filterFn"
+              use-input
+              behavior="menu"
+            >
+              <template v-slot:no-option>
+                <q-item>
+                  <q-item-section class="text-grey">
+                    ไม่มีข้อมูล
+                  </q-item-section>
+                </q-item>
+              </template>
+            </q-select>
             <div>
-              <q-btn @click="fecthlistPersonal" size="12px" flat round color="add" icon="mdi-plus">
+              <q-btn
+                @click="fecthlistPersonal"
+                size="12px"
+                flat
+                round
+                color="add"
+                icon="mdi-plus"
+              >
                 <q-tooltip>เพิ่มผู้ทดลองปฏิบัติหน้าที่ราชการ</q-tooltip>
               </q-btn>
             </div>
           </div>
         </div>
         <q-space />
-        <q-input class="col-xs-12 col-sm-3 col-md-2" standout dense v-model="filterKeyword" ref="filterRef" outlined
+        <q-input
-          debounce="300" placeholder="ค้นหา">
+          class="col-xs-12 col-sm-3 col-md-2"
+          standout
+          dense
+          v-model="filterKeyword"
+          ref="filterRef"
+          outlined
+          debounce="300"
+          placeholder="ค้นหา"
+        >
           <template v-slot:append>
             <q-icon v-if="filterKeyword == ''" name="search" />
-            <q-icon v-if="filterKeyword !== ''" name="clear" class="cursor-pointer" @click="resetFilter" />
+            <q-icon
+              v-if="filterKeyword !== ''"
+              name="clear"
+              class="cursor-pointer"
+              @click="resetFilter"
+            />
           </template>
         </q-input>
 
-        <q-select v-model="visibleColumns" multiple outlined dense options-dense :display-value="$q.lang.table.columns"
+        <q-select
-          emit-value map-options :options="columns" option-value="name" options-cover style="min-width: 150px"
+          v-model="visibleColumns"
-          class="col-xs-12 col-sm-3 col-md-2" />
+          multiple
+          outlined
+          dense
+          options-dense
+          :display-value="$q.lang.table.columns"
+          emit-value
+          map-options
+          :options="columns"
+          option-value="name"
+          options-cover
+          style="min-width: 150px"
+          class="col-xs-12 col-sm-3 col-md-2"
+        />
       </div>
       <div class="col-12">
-        <q-table ref="table" :columns="columns" :rows="rows" :filter="filterKeyword" row-key="Order" flat bordered
+        <q-table
-          :paging="true" dense class="custom-header-table" v-bind="attrs" :visible-columns="visibleColumns"
+          ref="table"
-          :pagination-label="paginationLabel" v-model:pagination="pagination">
+          :columns="columns"
+          :rows="rows"
+          :filter="filterKeyword"
+          row-key="Order"
+          flat
+          bordered
+          :paging="true"
+          dense
+          class="custom-header-table"
+          v-bind="attrs"
+          :visible-columns="visibleColumns"
+          :pagination-label="paginationLabel"
+          v-model:pagination="pagination"
+        >
           <template v-slot:header="props">
             <q-tr :props="props">
               <q-th v-for="col in props.cols" :key="col.name" :props="props">
@@ -405,8 +497,11 @@ onMounted(async () => {
             </q-tr>
           </template>
           <template v-slot:body="props">
-            <q-tr :props="props" class="cursor-pointer"
+            <q-tr
-              @click="router.push(`/probation/detail/${props.row.personal_id}`)">
+              :props="props"
+              class="cursor-pointer"
+              @click="router.push(`/probation/detail/${props.row.personal_id}`)"
+            >
               <q-td v-for="col in props.cols" :key="col.name" :props="props">
                 <div v-if="col.name == 'no'">
                   {{ props.rowIndex + 1 }}
@@ -418,8 +513,16 @@ onMounted(async () => {
             </q-tr>
           </template>
           <template v-slot:pagination="scope">
-            <q-pagination v-model="pagination.page" active-color="primary" color="dark" :max="scope.pagesNumber"
+            <q-pagination
-              :max-pages="5" size="sm" boundary-links direction-links></q-pagination>
+              v-model="pagination.page"
+              active-color="primary"
+              color="dark"
+              :max="scope.pagesNumber"
+              :max-pages="5"
+              size="sm"
+              boundary-links
+              direction-links
+            ></q-pagination>
           </template>
         </q-table>
       </div>
@@ -429,23 +532,55 @@ onMounted(async () => {
   <q-dialog v-model="modal" persistent>
     <q-card style="width: 900px; max-width: 80vw">
       <q-form ref="myForm">
-        <DialogHeader tittle="เพิ่มผู้ทดลองปฏิบัติหน้าที่ราชการ " :close="clickClose" />
+        <DialogHeader
+          tittle="เพิ่มผู้ทดลองปฏิบัติหน้าที่ราชการ "
+          :close="clickClose"
+        />
         <q-separator />
         <q-card-section class="q-pa-md q-col-gutter-sm">
-          <q-input class="col-12" standout dense v-model="filterKeyword2" ref="filterRef2" outlined debounce="300"
+          <q-input
-            placeholder="ค้นหา">
+            class="col-12"
+            standout
+            dense
+            v-model="filterKeyword2"
+            ref="filterRef2"
+            outlined
+            debounce="300"
+            placeholder="ค้นหา"
+          >
             <template v-slot:append>
               <q-icon v-if="filterKeyword2 == ''" name="search" />
-              <q-icon v-if="filterKeyword2 !== ''" name="clear" class="cursor-pointer" @click="resetFilter2" />
+              <q-icon
+                v-if="filterKeyword2 !== ''"
+                name="clear"
+                class="cursor-pointer"
+                @click="resetFilter2"
+              />
             </template>
           </q-input>
           <div class="col-12">
-            <q-table ref="table2" :columns="columns2" :rows="rows2" :filter="filterKeyword2" row-key="Order" flat bordered
+            <q-table
-              :paging="true" dense class="custom-header-table" v-bind="attrs" :pagination-label="paginationLabel2"
+              ref="table2"
-              v-model:pagination="pagination2">
+              :columns="columns2"
+              :rows="rows2"
+              :filter="filterKeyword2"
+              row-key="Order"
+              flat
+              bordered
+              :paging="true"
+              dense
+              class="custom-header-table"
+              v-bind="attrs"
+              :pagination-label="paginationLabel2"
+              v-model:pagination="pagination2"
+            >
               <template v-slot:header="props">
                 <q-tr :props="props">
-                  <q-th v-for="col in props.cols" :key="col.name" :props="props">
+                  <q-th
+                    v-for="col in props.cols"
+                    :key="col.name"
+                    :props="props"
+                  >
                     <span class="text-weight-medium">{{ col.label }}</span>
                   </q-th>
                   <q-th auto-width />
@@ -453,26 +588,50 @@ onMounted(async () => {
               </template>
               <template v-slot:body="props">
                 <q-tr :props="props" class="cursor-pointer">
-                  <q-td v-for="col in props.cols" :key="col.name" :props="props">
+                  <q-td
+                    v-for="col in props.cols"
+                    :key="col.name"
+                    :props="props"
+                  >
                     <div v-if="col.name == 'no'">
                       {{ props.rowIndex + 1 }}
                     </div>
                     <div v-else-if="col.name == 'status'" class="text-center">
-                      <q-icon v-if="col.value === true" name="mdi-check" color="positive" size="sm" />
+                      <q-icon
+                        v-if="col.value === true"
+                        name="mdi-check"
+                        color="positive"
+                        size="sm"
+                      />
                     </div>
                     <div v-else>
                       {{ col.value }}
                     </div>
                   </q-td>
                   <q-td auto-width>
-                    <q-btn dense class="q-px-md" outline color="primary" label="เพิ่ม" @click="clickAdd(props.row.id)">
+                    <q-btn
+                      dense
+                      class="q-px-md"
+                      outline
+                      color="primary"
+                      label="เพิ่ม"
+                      @click="clickAdd(props.row.id)"
+                    >
                     </q-btn>
                   </q-td>
                 </q-tr>
               </template>
               <template v-slot:pagination="scope">
-                <q-pagination v-model="pagination2.page" active-color="primary" color="dark" :max="scope.pagesNumber"
+                <q-pagination
-                  :max-pages="5" size="sm" boundary-links direction-links></q-pagination>
+                  v-model="pagination2.page"
+                  active-color="primary"
+                  color="dark"
+                  :max="scope.pagesNumber"
+                  :max-pages="5"
+                  size="sm"
+                  boundary-links
+                  direction-links
+                ></q-pagination>
               </template>
             </q-table>
           </div>

src/modules/05_placement/interface/response/officer.ts

@@ -19,6 +19,8 @@ interface officerType {
   isActive: boolean;
   dateEnd: string;
   dateStart: string;
+
+
 }
 interface ResponseData {
   data: {
@@ -43,6 +45,7 @@ interface ResponseData {
       positionNumberOld: string;
       organizationPositionOld: string;
       isActive: boolean;
+      dateRepatriation: Date
     };
   };
 }
@@ -72,8 +75,8 @@ interface resHelpDetail {
     };
   };
 }
-export type { 
+export type {
   officerType,
   ResponseData,
-  resHelpDetail 
+  resHelpDetail
 };

src/modules/05_placement/store.ts

@@ -109,6 +109,7 @@ export const usePlacementDataStore = defineStore("placement", () => {
     filter_3: boolean
   ) => {
     DataMainUpdate.value = [];
+
     if (filter_1 === "all" && filter_2 === "all" && filter_3 === false) {
       // console.log('case 1');
       // return DataMainUpdate.value = DataMainOrig.value; อันเก่า
@@ -330,6 +331,6 @@ export const useTransferDataStore = defineStore("transferDataStore", () => {
     }
   };
   return {
-    statusText,statusProbationMain
+    statusText, statusProbationMain
   };
 });