fix filter ทะเบียนปรวัติ

src/modules/04_registryPerson/views/listView.vue

@@ -108,6 +108,9 @@ async function fetchDataPerson() {
 
   if (store.formFilter.isShowRetire != null) {
     queryParams.isRetire = store.formFilter.isShowRetire;
+    queryParams.retireType = queryParams.isRetire
+      ? store.formFilter.retireType
+      : undefined;
   }
 
   if (empType.value !== "officer") {
@@ -187,9 +190,7 @@ async function insertAvatar(items: DataPerson[]) {
   );
 }
 
-/**
- * funciotn ค้นหาข้อมูล
- */
+/** funciotn ค้นหาข้อมูล */
 function onclickSearch() {
   store.formFilter.page = 1;
   store.formFilter.keyword =
@@ -203,15 +204,16 @@ function onclickSearch() {
  */
 function selectType() {
   empType.value = route.name == "registryNew" ? "officer" : "perm";
+  store.formFilter.isShowRetire = false;
+  store.labelOption.retireType = "ทั้งหมด";
+  store.formFilter.retireType = null;
+  store.formFilter.keyword = "";
   if (empType.value !== "officer") {
-    store.formFilter.isShowRetire = null;
     store.formFilter.isProbation = null;
-    store.formFilter.keyword = "";
     fetchOptionGroup();
   } else {
-    store.formFilter.isShowRetire = false;
     store.formFilter.isProbation = false;
-    store.formFilter.keyword = "";
+
     fetchType();
   }
 
@@ -267,6 +269,17 @@ function selectPosLevel(item: DataOption) {
   fetchDataPerson();
 }
 
+/**
+ * function เลือกประเภทตำแหน่ง
+ * @param item ประเภทระดับ
+ */
+function selectRetireType(item: DataOption) {
+  store.labelOption.retireType = item.name;
+  store.formFilter.page = 1;
+  store.formFilter.retireType = item.id;
+  fetchDataPerson();
+}
+
 /**
  * function เคลีย์ตัวเลือก
  * @param t ประเภทตัวเลือก
@@ -291,6 +304,9 @@ function clearSelect(t: string) {
       empType.value === "officer"
         ? "เลือกหน่วยงาน/ส่วนราชการ"
         : "เลือกหน่วยงาน";
+  } else if (t === "retireType") {
+    store.labelOption.retireType = "ทั้งหมด";
+    store.formFilter.retireType = null;
   }
   store.formFilter.page = 1;
   fetchDataPerson();
@@ -554,6 +570,57 @@ onMounted(async () => {
               @update:model-value="getSearch"
             />
           </div>
+          <div
+            class="row q-gutter-sm justify-center"
+            v-if="empType !== 'officer'"
+          >
+            <q-toggle
+              v-model="store.formFilter.isShowRetire"
+              color="primary"
+              label="แสดงข้อมูลผู้พ้นจากราชการ"
+              @update:model-value="getSearch"
+            />
+
+            <q-btn-dropdown
+              v-if="store.formFilter.isShowRetire"
+              rounded
+              flat
+              dense
+              label-color="white"
+              dropdown-icon="mdi-chevron-down"
+              class="q-px-sm"
+            >
+              <template v-slot:label>
+                {{
+                  store.labelOption.retireType !== "ทั้งหมด"
+                    ? store.labelOption.retireType
+                    : `ประเภท${store.labelOption.retireType}`
+                }}
+                <q-btn
+                  v-if="store.labelOption.retireType !== 'ทั้งหมด'"
+                  size="10px"
+                  flat
+                  round
+                  color="white"
+                  icon="close"
+                  @click.stop.prevent="clearSelect('retireType')"
+                />
+              </template>
+              <q-list>
+                <q-item
+                  v-for="(item, index) in store.retireTypeEmpOps"
+                  :key="index"
+                  clickable
+                  v-close-popup
+                  @click="selectRetireType(item)"
+                >
+                  <q-item-section>
+                    <q-item-label>{{ item.name }}</q-item-label>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-btn-dropdown>
+          </div>
 
           <div
             v-if="empType === 'officer'"
@@ -578,6 +645,46 @@ onMounted(async () => {
               label="แสดงตำแหน่งทั้งหมด"
               @update:model-value="getSearch"
             />
+
+            <q-btn-dropdown
+              v-if="store.formFilter.isShowRetire"
+              rounded
+              flat
+              dense
+              label-color="white"
+              dropdown-icon="mdi-chevron-down"
+              class="q-px-sm"
+            >
+              <template v-slot:label>
+                {{
+                  store.labelOption.retireType !== "ทั้งหมด"
+                    ? store.labelOption.retireType
+                    : `ประเภทการพ้นจากราชการ${store.labelOption.retireType}`
+                }}
+                <q-btn
+                  v-if="store.labelOption.retireType !== 'ทั้งหมด'"
+                  size="10px"
+                  flat
+                  round
+                  color="white"
+                  icon="close"
+                  @click.stop.prevent="clearSelect('retireType')"
+                />
+              </template>
+              <q-list>
+                <q-item
+                  v-for="(item, index) in store.retireTypeOps"
+                  :key="index"
+                  clickable
+                  v-close-popup
+                  @click="selectRetireType(item)"
+                >
+                  <q-item-section>
+                    <q-item-label>{{ item.name }}</q-item-label>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-btn-dropdown>
           </div>
         </div>
       </div>