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

src/components/Dialogs/AddPersonal.vue

@@ -10,10 +10,20 @@ import { useDisciplineMainStore } from "@/modules/11_discipline/store/main";
 
 const mainStore = useDisciplineMainStore();
 
+const total = ref<number>(0);
+const totalList = ref<number>(1);
+
 const $q = useQuasar();
 const mixin = useCounterMixin();
 const { dialogMessageNotify, showLoader, hideLoader } = mixin;
 
+const pagination = ref({
+  sortBy: "createdAt",
+  descending: true,
+  page: 1,
+  rowsPerPage: 10,
+});
+
 interface typeOp {
   id: string;
   name: string;
@@ -33,12 +43,12 @@ interface tableType {
 }
 
 const rows = ref<tableType[]>([]);
-const type = ref<string>("idcard");
+const type = ref<string>("citizenId");
 const search = ref<string>("");
 const selected = ref<any>([]);
 
 const typeOps = ref<typeOp[]>([
-  { id: "idcard", name: "เลขประจำตัวประชาชน" },
+  { id: "citizenId", name: "เลขประจำตัวประชาชน" },
   { id: "firstname", name: "ชื่อ" },
   { id: "lastname", name: "นามสกุล" },
 ]);
@@ -112,62 +122,73 @@ const searchRef = ref<any>(null);
 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: any) => ({
-          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.positionLevelName ?? "-",
-          salary: e.salary ?? "-",
-          organization: e.organization ?? "-",
-          phone: e.phone ?? "-",
-          email: e.email ?? "-",
-          root: e.root,
-          rootId: e.rootId,
-          rootShortName: e.rootShortName,
-          child1: e.child1,
-          child1Id: e.child1Id,
-          child1ShortName: e.child1ShortName,
-          child2: e.child2,
-          child2Id: e.child2Id,
-          child2ShortName: e.child2ShortName,
-          child3: e.child3,
-          child3Id: e.child3Id,
-          child3ShortName: e.child3ShortName,
-          child4: e.child4,
-          child4Id: e.child4Id,
-          child4ShortName: e.child4ShortName,
-          posMasterNo: e.posMasterNo,
-          posTypeId: e.posTypeId,
-          posTypeName: e.posTypeName,
-          posLevelId: e.posLevelId,
-          posLevelName: e.posLevelName,
-        }));
-
-        rows.value = list;
-      })
-      .catch((err) => {
-        console.log(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) => {
+      const data = res.data.result.data;
+      totalList.value = Math.ceil(
+        res.data.result.total / pagination.value.rowsPerPage
+      );
+      total.value = res.data.result.total;
+      const list = data.map((e: any) => ({
+        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.positionLevelName ?? "-",
+        salary: e.salary ?? "-",
+        organization: e.organization ?? "-",
+        phone: e.phone ?? "-",
+        email: e.email ?? "-",
+        root: e.root,
+        rootId: e.rootId,
+        rootShortName: e.rootShortName,
+        child1: e.child1,
+        child1Id: e.child1Id,
+        child1ShortName: e.child1ShortName,
+        child2: e.child2,
+        child2Id: e.child2Id,
+        child2ShortName: e.child2ShortName,
+        child3: e.child3,
+        child3Id: e.child3Id,
+        child3ShortName: e.child3ShortName,
+        child4: e.child4,
+        child4Id: e.child4Id,
+        child4ShortName: e.child4ShortName,
+        posMasterNo: e.posMasterNo,
+        posTypeId: e.posTypeId,
+        posTypeName: e.posTypeName,
+        posLevelId: e.posLevelId,
+        posLevelName: e.posLevelName,
+      }));
+
+      rows.value = list;
+    })
+    .catch((err) => {
+      console.log(err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
 /** update เมื่อเปลี่ยน option */
 function updateSelect() {
   search.value = "";
@@ -180,6 +201,19 @@ watch(
     }
   }
 );
+
+function updatePagination(newPagination: any) {
+  pagination.value.page = 1;
+  pagination.value.rowsPerPage = newPagination.rowsPerPage;
+
+}
+
+watch(
+  () => pagination.value.rowsPerPage,
+  async () => {
+    await getSearch();
+  }
+);
 </script>
 
 <template>
@@ -255,7 +289,22 @@ watch(
             :visible-columns="mainStore.visibleColumnsRespondent"
             :selection="props.selecetSwitch"
             v-model:selected="selected"
+            @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-selection="scope">
               <q-checkbox
                 keep-color
@@ -296,7 +345,11 @@ watch(
                 </td>
                 <q-td v-for="col in props.cols" :key="col.name" :props="props">
                   <div v-if="col.name == 'no'">
-                    {{ props.rowIndex + 1 }}
+                    {{
+                      (pagination.page - 1) * pagination.rowsPerPage +
+                      props.rowIndex +
+                      1
+                    }}
                   </div>
                   <div v-if="col.name === 'fullName'">
                     {{ props.prefix }}