แก้วินัย /รายการออกคำสั่งย้ายสับเปลี่ยนตำแหน่ง รอ API ส่งไปออกคำสั่ง

src/modules/11_discipline/components/6_BasicInformation/Director/Form.vue

@@ -15,6 +15,15 @@ import config from "@/app.config";
 
 import PopupPersonal from "@/components/Dialogs/PopupPersonalNew.vue";
 
+const total = ref<number>(0);
+const totalList = ref<number>(1);
+const pagination = ref({
+  sortBy: "createdAt",
+  descending: true,
+  page: 1,
+  rowsPerPage: 10,
+});
+
 const modalPersonal = ref<boolean>(false);
 const personId = ref<string>("");
 const searchRef = ref<any>(null);
@@ -36,9 +45,9 @@ const props = defineProps({
   },
 });
 
-const type = ref<string>("idcard");
+const type = ref<string>("citizenId");
 const typeOps = ref<typeOp[]>([
-  { id: "idcard", name: "เลขประจำตัวประชาชน" },
+  { id: "citizenId", name: "เลขประจำตัวประชาชน" },
   { id: "firstname", name: "ชื่อ" },
   { id: "lastname", name: "นามสกุล" },
 ]);
@@ -174,40 +183,48 @@ function updateSelect() {
 async function searchInput() {
   searchRef.value.validate();
   if (!searchRef.value.hasError) {
-    showLoader();
-    const body = {
-      fieldName: type.value,
-      keyword: search.value,
-    };
-    await http
-      .post(config.API.orgSearchPersonal(), body)
-      .then((res) => {
-        const data = res.data.result;
-        const list = data.map((e: ResponsePreson) => ({
-          personId: e.id,
-          idcard: e.idcard,
-          prefix: e.prefix,
-          firstName: e.firstName,
-          lastName: e.lastName,
-          name: `${e.prefix}${e.firstName}  ${e.lastName}`,
-          posNo: e.posNo ?? "-",
-          position: e.position ?? "-",
-          positionLevel: e.positionLevel ?? "-",
-          salary: e.salaries ?? "-",
-          organization: e.organization ?? "-",
-          phone: e.phone ?? "-",
-          email: e.email ?? "-",
-        }));
-
-        rows.value = list;
-      })
-      .catch((err) => {})
-      .finally(() => {
-        hideLoader();
-      });
+    await getSearch();
   }
 }
 
+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) => {
+      totalList.value = Math.ceil(
+        res.data.result.total / pagination.value.rowsPerPage
+      );
+      total.value = res.data.result.total;
+      const data = res.data.result.data;
+      const list = data.map((e: ResponsePreson) => ({
+        personId: e.id,
+        idcard: e.citizenId,
+        prefix: e.prefix,
+        firstName: e.firstName,
+        lastName: e.lastName,
+        name: `${e.prefix ? e.prefix :''}${e.firstName ? e.firstName :''}  ${e.lastName ? e.lastName :''}`,
+        posNo: e.posNo ?? "-",
+        position: e.position ?? "-",
+        positionLevel: e.positionLevel ?? "-",
+        salary: e.salaries ?? "-",
+        organization: e.organization ?? "-",
+        phone: e.phone ?? "-",
+        email: e.email ?? "-",
+      }));
+
+      rows.value = list;
+    })
+    .catch((err) => {})
+    .finally(() => {
+      hideLoader();
+    });
+}
+
 function returnDetail(data: any) {
   formData.prefix = data.prefix;
   formData.firstname = data.firstName;
@@ -234,6 +251,12 @@ function updatemodalPersonal(modal: boolean) {
   modalPersonal.value = modal;
 }
 
+function updatePagination(newPagination: any) {
+  pagination.value.page = 1;
+  pagination.value.rowsPerPage = newPagination.rowsPerPage;
+
+}
+
 /**
  * เช็คข้อมูลจาก props
  * เมื่อมีข้อมูล
@@ -248,6 +271,13 @@ watch(props.data, async () => {
   formData.email = props.data.email;
   formData.qualification = props.data.qualification;
 });
+
+watch(
+  () => pagination.value.rowsPerPage,
+  async() => {
+   await getSearch();
+  }
+);
 </script>
 
 <template>
@@ -309,7 +339,24 @@ watch(props.data, async () => {
                 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
@@ -330,9 +377,13 @@ watch(props.data, async () => {
                       :props="props"
                       @click="returnDetail(props.row)"
                     >
-                      <div v-if="col.name == 'no'">
-                        {{ props.rowIndex + 1 }}
-                      </div>
+                    <div v-if="col.name == 'no'">
+                    {{
+                      (pagination.page - 1) * pagination.rowsPerPage +
+                      props.rowIndex +
+                      1
+                    }}
+                  </div>
                       <div v-else-if="col.name == 'info'">
                         <!-- <router-link
                           target="_blank"