ทะเบียนประวัติ: ค้นหาด้วยชื่อ, เลขปชช, ตำแหน่ง; แก้การแสดงผลตาราง

src/modules/04_registryNew/components/TableView.vue

@@ -74,7 +74,7 @@ const columns = ref<QTableProps["columns"]>([
     align: "left",
     label: "สายงาน",
     sortable: true,
-    field: (v) => v.posType.posTypeName,
+    field: (v) => (v.posType ? v.posType.posTypeName : "-"),
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
@@ -85,7 +85,7 @@ const columns = ref<QTableProps["columns"]>([
     align: "left",
     label: "ระดับชั้นงาน",
     sortable: true,
-    field: (v) => v.posLevel.posLevelName,
+    field: (v) => (v.posLevel ? v.posLevel.posLevelName : "-"),
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>

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

@@ -109,13 +109,23 @@ function fetchYearOption() {
   }
 }
 
-function fetchDataPerson() {
+async function fetchDataPerson(search: boolean = false) {
   showLoader();
+
+  let queryParams = {
+    page: formFilter.page,
+    pageSize: formFilter.pageSize,
+  };
+
+  if (search) {
+    queryParams = Object.assign({}, queryParams, {
+      searchField: searchType.value,
+      searchKeyword: formFilter.keyword,
+    });
+  }
+
   http
-    .get(
+    .get(config.API.registryNew, { params: queryParams })
-      config.API.registryNew +
-        `?page=${formFilter.page}&pageSize=${formFilter.pageSize}&keyword=${formFilter.keyword}`
-    )
     .then((res) => {
       maxPage.value = Math.ceil(res.data.result.total / formFilter.pageSize);
       dataPersonMain.value = res.data.result.data;
@@ -149,7 +159,7 @@ function onclickSearch() {
     fetchYearOption();
   }
   formFilter.keyword = formFilter.keyword === null ? "" : formFilter.keyword;
-  fetchDataPerson();
+  fetchDataPerson(true);
 }
 
 function selectType(item: DataOption) {
@@ -194,9 +204,13 @@ onMounted(async () => {
 
   <q-card class="q-mt-md">
     <q-card-section class="card-img q-pb-lg">
-      <div class="text-h5 text-center q-py-md text-weight-medium">ค้นหาข้อมูลทะเบียนประวัติ</div>
+      <div class="text-h5 text-center q-py-md text-weight-medium">
+        ค้นหาข้อมูลทะเบียนประวัติ
+      </div>
       <div class="row justify-center">
-        <div class="col-xs-12 col-sm-12 col-md-11 q-pa-md bg-Search rounded-borders">
+        <div
+          class="col-xs-12 col-sm-12 col-md-11 q-pa-md bg-Search rounded-borders"
+        >
           <q-form @submit="onclickSearch">
             <div class="bg-white row col-12 q-pa-none rounded-borders">
               <div class="row col-11">
@@ -212,10 +226,9 @@ onMounted(async () => {
                     option-label="name"
                     option-value="id"
                     map-options
-                    class="selectS col-11 q-px-md "
+                    class="selectS col-11 q-px-md"
                     color="deep-orange"
                     dropdown-icon="mdi-chevron-down"
-                    
                   />
                   <q-separator vertical />
                 </div>
@@ -234,12 +247,18 @@ onMounted(async () => {
                 </q-input>
               </div>
               <div class="row col-1">
-                <q-btn class="fit btnSearch" unelevated color="deep-orange" label="ค้นหา" type="submit" />
+                <q-btn
+                  class="fit btnSearch"
+                  unelevated
+                  color="deep-orange"
+                  label="ค้นหา"
+                  type="submit"
+                />
               </div>
             </div>
           </q-form>
           <div v-if="isShowBtnFilter" class="col-12 row q-mt-sm">
-            <q-space/>
+            <q-space />
             <q-btn
               flat
               label="ตัวเลือกเพิ่มเติม"
@@ -299,8 +318,7 @@ onMounted(async () => {
               label-color="white"
               dropdown-icon="mdi-chevron-down"
               class="q-px-sm"
-              
+              ><!-- class="custom-btn" -->
-            ><!-- class="custom-btn" -->
               <template v-slot:label>
                 {{
                   labelOption.posType !== "ทั้งหมด"
@@ -341,7 +359,7 @@ onMounted(async () => {
               label-color="white"
               dropdown-icon="mdi-chevron-down"
               class="q-px-sm"
-            ><!-- class="custom-btn" -->
+              ><!-- class="custom-btn" -->
               <template v-slot:label>
                 {{
                   labelOption.posLevel !== "ทั้งหมด"
@@ -382,7 +400,7 @@ onMounted(async () => {
               label-color="white"
               dropdown-icon="mdi-chevron-down"
               class="q-px-sm"
-            ><!-- class="custom-btn" -->
+              ><!-- class="custom-btn" -->
               <template v-slot:label>
                 {{ `ปีเกษียณ${labelOption.retireYear}` }}
                 <q-btn
@@ -464,7 +482,7 @@ onMounted(async () => {
               label-color="white"
               dropdown-icon="mdi-chevron-down"
               class="q-px-sm"
-            ><!-- class="custom-btn" -->
+              ><!-- class="custom-btn" -->
               <template v-slot:label>
                 {{
                   `อายุราชการ (${formFilter.rangeYear.min} - ${formFilter.rangeYear.max} ปี)`
@@ -520,7 +538,7 @@ onMounted(async () => {
               dropdown-icon="mdi-chevron-down"
               :label="`เงื่อนไขอื่นๆ  ${conditionTotal}`"
               class="q-px-sm"
-            ><!-- class="custom-btn" -->
+              ><!-- class="custom-btn" -->
               <q-list>
                 <q-item clickable v-close-popup>
                   <q-item-section>
@@ -562,7 +580,7 @@ onMounted(async () => {
   </q-card>
 </template>
 
-<style >
+<style>
 .card-img {
   background: url("@/assets/registry-banner.png");
   background-size: cover;
@@ -581,19 +599,19 @@ onMounted(async () => {
   background-color: #36969f;
 }
 
-.btnSearch{
+.btnSearch {
   border-radius: 0px 4px 4px 0px;
 }
-.bg-Search{
+.bg-Search {
   background: #00000015;
 }
-.lineFil{
+.lineFil {
-  transform:rotate(30deg);
+  transform: rotate(30deg);
   height: 20px;
   margin-top: 15px;
   background: #ffffff7b !important;
 }
-.selectS .q-field__control .q-field__append .q-icon{
+.selectS .q-field__control .q-field__append .q-icon {
   color: #ff5722 !important;
 }
 </style>