ปรับ filter ทะเบียนประวัติใหม่

src/modules/04_registryNew/interface/request/Main.ts

@@ -7,8 +7,8 @@ interface FormFilter {
   posLevel: string;
   retireYear: string | null;
   rangeYear: { min: number; max: number };
-  isShowRetire: boolean;
-  isProbation: boolean;
+  isShowRetire: boolean | null;
+  isProbation: boolean | null;
 }
 
 interface FormAddPerson {

src/modules/04_registryNew/store.ts

@@ -11,7 +11,7 @@ export const useRegistryNewDataStore = defineStore("registryNew", () => {
   const searchTypeOption = ref<DataOption[]>([
     { id: "fullName", name: "ชื่อ-นามสกุล" },
     { id: "citizenId", name: "เลขประจำตัวประชาชน" },
-    { id: "posNo", name: "ตำแหน่งเลขที่" },
+    // { id: "posNo", name: "ตำแหน่งเลขที่" },
     { id: "position", name: "ตำแหน่งสายงาน" },
   ]);
   const employeeClassOps = ref<DataOption[]>([

src/modules/04_registryNew/views/list.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, reactive, computed, onMounted } from "vue";
+import { ref, reactive, computed, onMounted, watch } from "vue";
 import { useQuasar } from "quasar";
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -25,9 +25,9 @@ const mode = ref<"table" | "card">("table");
 
 const isShowFilter = ref<boolean>(false);
 const isShowBtnFilter = ref<boolean>(true);
-
+const empType = ref<string>("officer"); // ประเภท ขรก./ลูกจ้างประจำ/ลูกจ้างชั่วคราว
 const labelOption = reactive({
-  type: "ประเภททั้งหมด",
+  type: "ข้าราชการ กทม.สามัญ",
   posType: "ทั้งหมด",
   posLevel: "ทั้งหมด",
   retireYear: "",
@@ -43,8 +43,8 @@ const formFilter = reactive<FormFilter>({
   posLevel: "",
   retireYear: "",
   rangeYear: { min: 0, max: 60 },
-  isShowRetire: false,
-  isProbation: false,
+  isShowRetire: null,
+  isProbation: null,
 });
 const maxPage = ref<number>(1);
 
@@ -112,7 +112,7 @@ function fetchYearOption() {
 async function fetchDataPerson(search: boolean = false) {
   showLoader();
 
-  let queryParams:any = {
+  let queryParams: any = {
     page: formFilter.page,
     pageSize: formFilter.pageSize,
   };
@@ -121,17 +121,30 @@ async function fetchDataPerson(search: boolean = false) {
     queryParams = Object.assign({}, queryParams, {
       searchField: searchType.value,
       searchKeyword: formFilter.keyword,
+    });
+  }
+
+  if (labelOption.posLevel != "ทั้งหมด") {
+    queryParams = Object.assign({}, queryParams, {
       posLevel: labelOption.posLevel,
+    });
+  }
+
+  if (labelOption.posType != "ทั้งหมด") {
+    queryParams = Object.assign({}, queryParams, {
       posType: labelOption.posType,
     });
-    if (formFilter.isProbation) {
-      queryParams.isProbation = formFilter.isProbation;
-    }
-
-    if (formFilter.isShowRetire) {
-      queryParams.isRetire = formFilter.isShowRetire;
-    }
   }
+
+  if (formFilter.isProbation != null) {
+    queryParams.isProbation = formFilter.isProbation;
+  }
+
+  if (formFilter.isShowRetire != null) {
+    queryParams.isRetire = formFilter.isShowRetire;
+  }
+
+  // check type person empType.value
   http
     .get(config.API.registryNew, { params: queryParams })
     .then((res) => {
@@ -142,9 +155,9 @@ async function fetchDataPerson(search: boolean = false) {
       messageError($q, err);
     })
     .finally(() => {
-      setTimeout(() => {
-        hideLoader();
-      }, 500);
+      // setTimeout(() => {
+      hideLoader();
+      // }, 500);
     });
 }
 
@@ -172,14 +185,18 @@ function onclickSearch() {
 
 function selectType(item: DataOption) {
   labelOption.type = item.name;
+  empType.value = item.id;
+  fetchDataPerson();
 }
 
 function selectPosType(item: DataOption) {
   labelOption.posType = item.name;
+  fetchDataPerson();
 }
 
 function selectPosLevel(item: DataOption) {
   labelOption.posLevel = item.name;
+  fetchDataPerson();
 }
 
 function selectRetireYear(item: DataOption) {
@@ -187,9 +204,7 @@ function selectRetireYear(item: DataOption) {
 }
 
 function clearSelect(t: string) {
-  if (t === "type") {
-    labelOption.type = "ประเภททั้งหมด";
-  } else if (t === "posType") {
+  if (t === "posType") {
     labelOption.posType = "ทั้งหมด";
   } else if (t === "posLevel") {
     labelOption.posLevel = "ทั้งหมด";
@@ -199,6 +214,8 @@ function clearSelect(t: string) {
     formFilter.rangeYear.min = 0;
     formFilter.rangeYear.max = 60;
   }
+
+  fetchDataPerson();
 }
 
 onMounted(async () => {
@@ -248,6 +265,7 @@ onMounted(async () => {
                   clearable
                   placeholder="ค้นหา"
                   class="col-9 q-pr-md"
+                  @clear="fetchDataPerson"
                 >
                   <template v-slot:before>
                     <q-icon name="search" color="deep-orange" />
@@ -292,7 +310,7 @@ onMounted(async () => {
               <template v-slot:label>
                 {{ `${labelOption.type}` }}
 
-                <q-btn
+                <!-- <q-btn
                   size="10px"
                   flat
                   round
@@ -300,7 +318,7 @@ onMounted(async () => {
                   icon="close"
                   v-if="labelOption.type !== 'ประเภททั้งหมด'"
                   @click.stop.prevent="clearSelect('type')"
-                />
+                /> -->
               </template>
               <q-list>
                 <q-item
@@ -401,14 +419,14 @@ onMounted(async () => {
 
             <q-separator inset vertical class="lineFil" />
 
-            <q-btn-dropdown
+            <!-- <q-btn-dropdown
               flat
               dense
               rounded
               label-color="white"
               dropdown-icon="mdi-chevron-down"
               class="q-px-sm"
-              ><!-- class="custom-btn" -->
+              >
               <template v-slot:label>
                 {{ `ปีเกษียณ${labelOption.retireYear}` }}
                 <q-btn
@@ -434,9 +452,9 @@ onMounted(async () => {
                   </q-item-section>
                 </q-item>
               </q-list>
-            </q-btn-dropdown>
+            </q-btn-dropdown> -->
 
-            <q-separator inset vertical class="lineFil" />
+            <!-- <q-separator inset vertical class="lineFil" /> -->
 
             <!-- <datepicker
               menu-class-name="modalfix"
@@ -483,14 +501,14 @@ onMounted(async () => {
               </template>
             </datepicker> -->
 
-            <q-btn-dropdown
+            <!-- <q-btn-dropdown
               flat
               dense
               rounded
               label-color="white"
               dropdown-icon="mdi-chevron-down"
               class="q-px-sm"
-              ><!-- class="custom-btn" -->
+              >
               <template v-slot:label>
                 {{
                   `อายุราชการ (${formFilter.rangeYear.min} - ${formFilter.rangeYear.max} ปี)`
@@ -534,9 +552,9 @@ onMounted(async () => {
                   </div>
                 </div>
               </div>
-            </q-btn-dropdown>
+            </q-btn-dropdown> -->
 
-            <q-separator inset vertical class="lineFil" />
+            <!-- <q-separator inset vertical class="lineFil" /> -->
 
             <q-btn-dropdown
               flat
@@ -554,6 +572,7 @@ onMounted(async () => {
                       v-model="formFilter.isProbation"
                       color="primary"
                       label="ทดลองปฏิบัติหน้าที่ราชการ"
+                      @update:model-value="fetchDataPerson"
                     />
                   </q-item-section>
                 </q-item>
@@ -563,6 +582,7 @@ onMounted(async () => {
                       v-model="formFilter.isShowRetire"
                       color="primary"
                       label="แสดงข้อมูลผู้พ้นจากราชการ"
+                      @update:model-value="fetchDataPerson"
                     />
                   </q-item-section>
                 </q-item>