From 6ad2b616faaf96c7735a5b1a6b1c0e28e629ece5 Mon Sep 17 00:00:00 2001
From: setthawutttty <trx.setthawut@gmail.com>
Date: Tue, 18 Feb 2025 17:26:52 +0700
Subject: [PATCH] =?UTF-8?q?UI=20=E0=B8=A3=E0=B8=B2=E0=B8=A2=E0=B8=87?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=99=E0=B8=97=E0=B8=B0=E0=B9=80=E0=B8=9A=E0=B8=B5?=
 =?UTF-8?q?=E0=B8=A2=E0=B8=99=E0=B8=9B=E0=B8=A3=E0=B8=B0=E0=B8=A7=E0=B8=B1?=
 =?UTF-8?q?=E0=B8=95=E0=B8=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../21_report/views/02_reportRegistry.vue     | 121 ++++++++++++++++--
 1 file changed, 107 insertions(+), 14 deletions(-)

diff --git a/src/modules/21_report/views/02_reportRegistry.vue b/src/modules/21_report/views/02_reportRegistry.vue
index 4f54be26a..8e18c4c9c 100644
--- a/src/modules/21_report/views/02_reportRegistry.vue
+++ b/src/modules/21_report/views/02_reportRegistry.vue
@@ -87,6 +87,29 @@ const educationOpMain = ref<DataOption[]>([]);
 const modalOrg = ref<boolean>(false);
 const org = ref<string>("");
 
+const isProbation = ref<boolean>(false);
+const isRetire = ref<boolean>(false);
+
+const retireType = ref<string>("");
+const retireTypeOps = ref<DataOption[]>([]);
+const retireTypeOpsMain = ref<DataOption[]>([
+  { id: "RETIRE", name: "เกษียณ" },
+  { id: "RETIRE_RESIGN", name: "ลาออก" },
+  { id: "RETIRE_DECEASED", name: "ถึงแก่กรรม" },
+  { id: "RETIRE_OUT", name: "ให้ออกจากราชการ" },
+  { id: "DISCIPLINE_RESULT_REMOVE", name: "ปลดออกจากราชการ" },
+  { id: "DISCIPLINE_RESULT_DISMISS", name: "ไล่ออกจากราชการ" },
+  { id: "DISCIPLINE_SUSPEND", name: "ถูกพักจากราชการ" },
+  { id: "PROBATION_REPORT", name: "ไม่ผ่านทดลองงาน" },
+]);
+
+const retireTypeOpsMainEMP = ref<DataOption[]>([
+  { id: "RETIRE", name: "เกษียณ" },
+  { id: "RETIRE_RESIGN", name: "ลาออก" },
+  { id: "RETIRE_DECEASED", name: "ถึงแก่กรรม" },
+  { id: "RETIRE_RESIGN_EMP", name: "ให้ออกจากราชการ" },
+]);
+
 const visibleColumns = ref<string[]>([
   "no",
   "fullName",
@@ -320,6 +343,15 @@ function filterOption(val: string, update: any, typeOp: string) {
       educationOp.value = educationOpMain.value.filter(
         (v: DataOption) => v.name.indexOf(val) > -1
       );
+    } else if (typeOp == "retireType") {
+      retireTypeOps.value =
+        employeeClass.value == "officer"
+          ? retireTypeOpsMain.value.filter(
+              (v: DataOption) => v.name.indexOf(val) > -1
+            )
+          : retireTypeOpsMainEMP.value.filter(
+              (v: DataOption) => v.name.indexOf(val) > -1
+            );
     }
   });
 }
@@ -463,6 +495,10 @@ async function onSearch() {
     ageMax: rangeAge.value.max,
     dateStart: dateStart.value,
     dateEnd: dateEnd.value,
+
+    isProbation: isProbation.value,
+    isRetire: isRetire.value,
+    retireType: retireType.value,
   };
   showLoader();
   await http
@@ -536,6 +572,7 @@ onMounted(async () => {
               map-options
               option-label="name"
               option-value="id"
+              @update:model-value="retireType = ''"
             >
             </q-select>
           </div>
@@ -619,7 +656,7 @@ onMounted(async () => {
           <div class="row q-col-gutter-y-sm">
             <div class="col-12">
               <div class="row q-col-gutter-sm items-center">
-                <div class="col-lg-2 col-md-4 col-sm-12">
+                <div class="col-lg-2 col-md-4 col-sm-12 col-12">
                   <q-select
                     class="bg-white"
                     hide-bottom-space
@@ -661,7 +698,7 @@ onMounted(async () => {
                     </template>
                   </q-select>
                 </div>
-                <div class="col-lg-2 col-md-4 col-sm-12">
+                <div class="col-lg-2 col-md-4 col-sm-12 col-12">
                   <q-select
                     class="bg-white"
                     hide-bottom-space
@@ -707,7 +744,7 @@ onMounted(async () => {
                     </template>
                   </q-select>
                 </div>
-                <div class="col-lg-2 col-md-4 col-sm-12">
+                <div class="col-lg-2 col-md-4 col-sm-12 col-12">
                   <q-select
                     dense
                     :model-value="position == '' ? 'ทั้งหมด' : position"
@@ -744,7 +781,7 @@ onMounted(async () => {
                       /> </template
                   ></q-select>
                 </div>
-                <div class="col-lg-2 col-md-4 col-sm-12">
+                <div class="col-lg-2 col-md-4 col-sm-12 col-12">
                   <q-select
                     label="ตำแหน่งทางการบริหาร"
                     :model-value="
@@ -781,7 +818,7 @@ onMounted(async () => {
                     </template>
                   </q-select>
                 </div>
-                <div class="col-lg-2 col-md-4 col-sm-12">
+                <div class="col-lg-2 col-md-4 col-sm-12 col-12">
                   <q-select
                     label="เพศ"
                     :model-value="gender == '' ? 'ทั้งหมด' : gender"
@@ -817,7 +854,7 @@ onMounted(async () => {
                   </q-select>
                 </div>
 
-                <div class="col-lg-2 col-md-4 col-sm-12">
+                <div class="col-lg-2 col-md-4 col-sm-12 col-12">
                   <q-select
                     label="สถานภาพ"
                     :model-value="status == '' ? 'ทั้งหมด' : status"
@@ -852,7 +889,7 @@ onMounted(async () => {
                     </template>
                   </q-select>
                 </div>
-                <div class="col-lg-2 col-md-4 col-sm-12">
+                <div class="col-lg-2 col-md-4 col-sm-12 col-12">
                   <q-select
                     label="วุฒิการศึกษา"
                     :model-value="education == '' ? 'ทั้งหมด' : education"
@@ -887,11 +924,7 @@ onMounted(async () => {
                     </template>
                   </q-select>
                 </div>
-              </div>
-            </div>
-            <div class="col-12">
-              <div class="row q-col-gutter-sm items-center">
-                <div class="col-lg-2 col-md-4 col-sm-12">
+                <div class="col-lg-2 col-md-4 col-sm-12 col-12">
                   <datepicker
                     menu-class-name="modalfix"
                     v-model="dateStart"
@@ -937,7 +970,7 @@ onMounted(async () => {
                     </template>
                   </datepicker>
                 </div>
-                <div class="col-lg-2 col-md-4 col-sm-12">
+                <div class="col-lg-2 col-md-4 col-sm-12 col-12">
                   <datepicker
                     menu-class-name="modalfix"
                     v-model="dateEnd"
@@ -975,7 +1008,11 @@ onMounted(async () => {
                     </template>
                   </datepicker>
                 </div>
-                <div class="col-lg-3 col-md-4 col-sm-12">
+              </div>
+            </div>
+            <div class="col-12">
+              <div class="row q-col-gutter-sm items-center">
+                <div class="col-lg-3 col-md-6 col-sm-12 col-12">
                   <div class="q-px-lg">
                     <q-range
                       v-model="rangeAge"
@@ -990,6 +1027,62 @@ onMounted(async () => {
                 </div>
               </div>
             </div>
+            <div class="col-12">
+              <div class="row">
+                <div class="col-lg-4 col-md-6 col-sm-12 col-12">
+                  <q-toggle
+                    v-model="isProbation"
+                    label="ทดลองปฏิบัติหน้าที่ราชการ"
+                  />
+                </div>
+              </div>
+            </div>
+            <div class="col-12">
+              <div class="row q-gutter-sm">
+                <q-toggle
+                  v-model="isRetire"
+                  label="แสดงข้อมูลผู้พ้นจากราชการ"
+                  @update:model-value="(value:string)=>(!value ? retireType = '':retireType)"
+                />
+
+                <q-select
+                  v-if="isRetire"
+                  :label="`ประเภท${
+                    employeeClass == 'officer' ? `การพ้นจากราชการ` : ``
+                  }`"
+                  :model-value="retireType == '' ? 'ทั้งหมด' : retireType"
+                  :options="retireTypeOps"
+                  emit-value
+                  dense
+                  map-options
+                  outlined
+                  option-label="name"
+                  option-value="id"
+                  fill-input
+                  use-input
+                  hide-selected
+                  bg-color="white"
+                  @filter="(inputValue:any,doneFn:Function) => filterOption(inputValue, doneFn,'retireType') "
+                  @update:model-value="(value:string)=>(retireType = value)"
+                >
+                  <template v-slot:no-option>
+                    <q-item>
+                      <q-item-section class="text-grey">
+                        ไม่มีข้อมูล
+                      </q-item-section>
+                    </q-item>
+                  </template>
+                  <template v-if="retireType" v-slot:append>
+                    <q-icon
+                      name="cancel"
+                      @click.stop.prevent="retireType = ''"
+                      class="cursor-pointer"
+                      style="opacity: 0.6"
+                    />
+                  </template>
+                </q-select>
+              </div>
+            </div>
           </div>
         </q-card>