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

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted } from "vue";
+import { ref, onMounted, watch } from "vue";
 import type { QTableProps } from "quasar";
 import { useQuasar } from "quasar";
 import { useRouter } from "vue-router";
@@ -17,8 +17,10 @@ import type { OpType } from "@/modules/05_placement/interface/response/Main";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
-const round = ref<string>('');
-const idRound = ref<string>('');
+const total = ref<number>(0);
+const totalList = ref<number>(1);
+const round = ref<string>("");
+const idRound = ref<string>("");
 const editCheck = ref<boolean>(false);
 const modalRound = ref<boolean>(false);
 const $q = useQuasar();
@@ -95,6 +97,7 @@ const resetFilter = () => {
   filterKeyword.value = "";
   filterKeyword2.value = "";
   filterRef.value.focus();
+  fecthLists()
 };
 
 //ปิด modal
@@ -103,20 +106,27 @@ const clickClose = () => {
 };
 
 //เปิด modal
-const sendToCommand = () => {
+function sendToCommand() {
   modal.value = true;
   filterKeyword2.value = "";
   // fecthTypeOption();
-};
+}
 
 //ดึงข้อมูล API
-const fecthLists = async () => {
+async function fecthLists() {
   showLoader();
   rows.value = [];
   await http
-    .get(config.API.changePosition)
+    .get(
+      config.API.changePosition +
+        `?page=${pagination.value.page}&pageSize=${pagination.value.rowsPerPage}&searchKeyword=${filterKeyword.value}`
+    )
     .then((res) => {
-      rows.value = res.data.result;
+      totalList.value = Math.ceil(
+        res.data.result.total / pagination.value.rowsPerPage
+      );
+      total.value = res.data.result.total;
+      rows.value = res.data.result.data;
     })
     .catch((e) => {
       messageError($q, e);
@@ -124,15 +134,15 @@ const fecthLists = async () => {
     .finally(() => {
       hideLoader();
     });
-};
+}
 
 // dialog สำหรับแก้ไข
-const openModaledit = (data: any) => {
+function openModaledit(data: any) {
   modalRound.value = true;
   editCheck.value = true;
-  round.value = data.name
-  idRound.value = data.id
-};
+  round.value = data.name;
+  idRound.value = data.id;
+}
 
 // ฟังก์ชั่นสำหรับเพิ่มรอบการย้ายสับเปลี่ยนตำแหน่ง
 function addRound() {
@@ -140,30 +150,42 @@ function addRound() {
 }
 
 //ลบข้อมูล
-const clickDelete = (id: string) => {
+function clickDelete(id: string) {
   dialogRemove($q, () => {
-      showLoader();
-      http
-        .delete(config.API.changePosition+`/${id}`)
-        .then(() => {
-          success($q, "ลบข้อมูลสำเร็จ");
-        })
-        .catch((e) => {
-          messageError($q, e);
-        })
-        .finally(() => {
-          fecthLists();
-          hideLoader();
-        });
+    showLoader();
+    http
+      .delete(config.API.changePosition + `/${id}`)
+      .then(() => {
+        success($q, "ลบข้อมูลสำเร็จ");
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        fecthLists();
+        hideLoader();
+      });
   });
-};
+}
 
 // ไปหน้ารายชื่อ
-const personalListPage = (id: string) => {
+function personalListPage(id: string) {
   router.push({
     path: `/change-positions/${id}`,
   });
-};
+}
+
+function updatePagination(newPagination: any) {
+  pagination.value.page = 1;
+  pagination.value.rowsPerPage = newPagination.rowsPerPage;
+}
+
+watch(
+  () => pagination.value.rowsPerPage,
+  async () => {
+    await fecthLists();
+  }
+);
 
 onMounted(() => {
   fecthLists();
@@ -211,6 +233,7 @@ onMounted(() => {
             outlined
             debounce="300"
             placeholder="ค้นหา"
+            @keyup.enter="fecthLists()"
           >
             <template v-slot:append>
               <q-icon v-if="filterKeyword == ''" name="search" />
@@ -244,11 +267,25 @@ onMounted(() => {
           <d-table
             :columns="columns"
             :rows="rows"
-            :filter="filterKeyword"
-            row-key="citizenId"
+            row-key="id"
             :visible-columns="visibleColumns"
-            v-model:pagination="pagination"
+            :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="fecthLists"
+              ></q-pagination>
+            </template>
             <template v-slot:header="props">
               <q-tr :props="props">
                 <q-th v-for="col in props.cols" :key="col.name" :props="props">
@@ -265,7 +302,11 @@ onMounted(() => {
                   @click="personalListPage(props.row.id)"
                 >
                   <div v-if="col.name == 'no'">
-                    {{ props.rowIndex + 1 }}
+                    {{
+                      (pagination.page - 1) * pagination.rowsPerPage +
+                      props.rowIndex +
+                      1
+                    }}
                   </div>
 
                   <div v-else-if="col.name == 'createdAt'">