no message

src/modules/05_placement/components/ChangePosition/DialogChange.vue

@@ -13,6 +13,15 @@ import type {
 } from "@/modules/05_placement/interface/index/Main";
 import { useRouter, useRoute } from "vue-router";
 
+const total = ref<number>(0);
+const totalList = ref<number>(1);
+const pagination = ref({
+  sortBy: "createdAt",
+  descending: true,
+  page: 1,
+  rowsPerPage: 10,
+});
+
 const props = defineProps({
   getData: Function,
 });
@@ -23,10 +32,10 @@ const searchRules = ref<boolean>(false);
 const selected = ref<any[]>([]);
 const searchRef = ref<any>(null);
 const rows = ref<tableType[]>([]);
-const type = ref<string>("idcard");
+const type = ref<string>("citizenId");
 const search = ref<string>("");
 const typeOps = ref<optionData[]>([
-  { id: "idcard", name: "เลขประจำตัวประชาชน" },
+  { id: "citizenId", name: "เลขประจำตัวประชาชน" },
   { id: "firstname", name: "ชื่อ" },
   { id: "lastname", name: "นามสกุล" },
 ]);
@@ -114,22 +123,7 @@ async function searchInput(check: boolean) {
     searchRules.value = check;
     searchRef.value.validate();
     if (!searchRef.value.hasError) {
-      showLoader();
+      await getSearch();
-      const body = {
-        fieldName: type.value,
-        keyword: search.value,
-      };
-      await http
-        .post(config.API.orgSearchPersonal(), body)
-        .then((res) => {
-          const data = res.data.result;
-
-          rows.value = data;
-        })
-        .catch((err) => {})
-        .finally(() => {
-          hideLoader();
-        });
     }
     setTimeout(() => {
       searchRules.value = false;
@@ -137,6 +131,30 @@ async function searchInput(check: boolean) {
   }
 }
 
+async function getSearch() {
+  showLoader();
+  const body = {
+    fieldName: type.value,
+    keyword: search.value,
+  };
+  await http
+    .post(
+      config.API.orgSearchPersonal() +
+        `?page=${pagination.value.page}&pageSize=${pagination.value.rowsPerPage}&searchKeyword=${search.value}`,
+      body
+    )
+    .then((res) => {
+      const data = res.data.result;
+      totalList.value = Math.ceil(data.total / pagination.value.rowsPerPage);
+      total.value = data.total;
+      rows.value = data.data;
+    })
+    .catch((err) => {})
+    .finally(() => {
+      hideLoader();
+    });
+}
+
 /** update เมื่อเปลี่ยน option */
 function updateSelect() {
   search.value = "";
@@ -157,35 +175,35 @@ function onSubmit() {
             prefix: i.prefix,
             firstName: i.firstName,
             lastName: i.lastName,
-            citizenId: i.idcard ? i.idcard :null,
+            citizenId: i.citizenId ? i.citizenId : null,
-            birthDate: i.birthDate ? i.birthDate :null,
+            birthDate: i.birthDate ? i.birthDate : null,
-            positionOld: i.position ? i.position :null,
+            positionOld: i.position ? i.position : null,
-            positionTypeOld: i.positionType ? i.positionType :null,
+            positionTypeOld: i.positionType ? i.positionType : null,
-            positionLevelOld: i.positionLevel ? i.positionLevel :null,
+            positionLevelOld: i.positionLevel ? i.positionLevel : null,
-            positionNumberOld: i.posNo ? i.posNo :null,
+            positionNumberOld: i.posNo ? i.posNo : null,
-            organizationOld: i.organization ? i.organization :null,
+            organizationOld: i.organization ? i.organization : null,
-            amountOld: i.salary ? i.salary :null,
+            amountOld: i.salary ? i.salary : null,
-            educationOld: i.educationDegree ? i.educationDegree :null,
+            educationOld: i.educationDegree ? i.educationDegree : null,
-            rootOld: i.root ? i.root :null,
+            rootOld: i.root ? i.root : null,
-            rootOldId: i.rootId ? i.rootId :null,
+            rootOldId: i.rootId ? i.rootId : null,
-            rootShortNameOld: i.rootShortName ? i.rootShortName :null,
+            rootShortNameOld: i.rootShortName ? i.rootShortName : null,
-            child1Old: i.child1 ? i.child1 :null,
+            child1Old: i.child1 ? i.child1 : null,
-            child1OldId: i.child1Id ? i.child1Id :null,
+            child1OldId: i.child1Id ? i.child1Id : null,
-            child1ShortNameOld: i.child1ShortName ? i.child1ShortName :null,
+            child1ShortNameOld: i.child1ShortName ? i.child1ShortName : null,
-            child2Old: i.child2 ? i.child2 :null,
+            child2Old: i.child2 ? i.child2 : null,
-            child2OldId: i.child2Id ? i.child2Id :null,
+            child2OldId: i.child2Id ? i.child2Id : null,
-            child2ShortNameOld: i.child2ShortName ? i.child2ShortName :null,
+            child2ShortNameOld: i.child2ShortName ? i.child2ShortName : null,
-            child3Old: i.child3 ? i.child3 :null,
+            child3Old: i.child3 ? i.child3 : null,
-            child3OldId: i.child3Id ? i.child3Id :null,
+            child3OldId: i.child3Id ? i.child3Id : null,
-            child3ShortNameOld: i.child3ShortName ? i.child3ShortName :null,
+            child3ShortNameOld: i.child3ShortName ? i.child3ShortName : null,
-            child4Old: i.child4 ? i.child4 :null,
+            child4Old: i.child4 ? i.child4 : null,
-            child4OldId: i.child4Id ? i.child4Id :null,
+            child4OldId: i.child4Id ? i.child4Id : null,
-            child4ShortNameOld: i.child4ShortName ? i.child4ShortName :null,
+            child4ShortNameOld: i.child4ShortName ? i.child4ShortName : null,
-            posMasterNoOld: i.posMasterNo ? i.posMasterNo :null,
+            posMasterNoOld: i.posMasterNo ? i.posMasterNo : null,
-            posTypeOldId: i.posTypeId ? i.posTypeId :null,
+            posTypeOldId: i.posTypeId ? i.posTypeId : null,
-            posTypeNameOld: i.posTypeName ? i.posTypeName :null,
+            posTypeNameOld: i.posTypeName ? i.posTypeName : null,
-            posLevelOldId: i.posLevelId ? i.posLevelId :null,
+            posLevelOldId: i.posLevelId ? i.posLevelId : null,
-            posLevelNameOld: i.posLevelName ? i.posLevelName :null,
+            posLevelNameOld: i.posLevelName ? i.posLevelName : null,
           })),
         })
         .then((res) => {
@@ -201,6 +219,18 @@ function onSubmit() {
     });
   }
 }
+
+function updatePagination(newPagination: any) {
+  pagination.value.page = 1;
+  pagination.value.rowsPerPage = newPagination.rowsPerPage;
+}
+
+watch(
+  () => pagination.value.rowsPerPage,
+  async () => {
+    await getSearch();
+  }
+);
 </script>
 <template>
   <q-dialog v-model="modalDialog" persistent>
@@ -269,7 +299,24 @@ function onSubmit() {
                     dense
                     class="custom-header-table"
                     :visible-columns="visibleColumnsRespondent"
+                    :rows-per-page-options="[1, 25, 50, 100]"
+                    @update:pagination="updatePagination"
                   >
+                    <template v-slot:pagination="scope">
+                      ทั้งหมด {{ total }} รายการ
+                      <q-pagination
+                        v-model="pagination.page"
+                        active-color="primary"
+                        color="dark"
+                        :max="Number(totalList)"
+                        size="sm"
+                        boundary-links
+                        direction-links
+                        :max-pages="5"
+                        @update:model-value="getSearch"
+                      ></q-pagination>
+                    </template>
+
                     <template v-slot:header="props">
                       <q-tr :props="props">
                         <q-th auto-width>
@@ -308,7 +355,18 @@ function onSubmit() {
                           :props="props"
                         >
                           <div v-if="col.name == 'no'">
-                            {{ props.rowIndex + 1 }}
+                            {{
+                              (pagination.page - 1) * pagination.rowsPerPage +
+                              props.rowIndex +
+                              1
+                            }}
+                          </div>
+                          <div v-else-if="col.name == 'name'">
+                            {{
+                              `${props.row.prefix ? props.row.prefix : ""}${
+                                props.row.firstName ? props.row.firstName : ""
+                              } ${props.row.lastName ? props.row.lastName : ""}`
+                            }}
                           </div>
                           <div v-else-if="col.name == 'positionType'">
                             {{