page รอ API // ui เมนู

src/modules/04_registry/components/TableProfile.vue

@@ -1,5 +1,5 @@
 <template>
-  <q-table
+  <d-table
     ref="table"
     flat
     :class="
@@ -11,10 +11,21 @@
     dense
     virtual-scroll
     :virtual-scroll-sticky-size-start="48"
-    :pagination-label="paginationLabel"
-    :pagination="initialPagination"
-    :rows-per-page-options="[0]"
+    :rows-per-page-options="[10, 25, 50, 100]"
+    v-model:pagination="pagination"
   >
+    <template v-slot:pagination="scope">
+      <q-pagination
+        v-model="currentPage"
+        active-color="primary"
+        color="dark"
+        :max="Number(maxPage)"
+        size="sm"
+        boundary-links
+        direction-links
+      ></q-pagination>
+    </template>
+
     <template v-slot:top="props">
       <div class="q-py-sm col-12 row">
         <q-space />
@@ -96,7 +107,7 @@
           />
         </div>
       </div>
-      <div class="items-center">
+      <div class="items-center full-width">
         <q-slide-transition
           v-show="searchPanel"
           class="q-mb-sm"
@@ -175,7 +186,7 @@
                     label="ชื่อ-นามสกุล"
                     @update:model-value="updateFullname"
                   />
-                  <datepicker
+                  <!-- <datepicker
                     class="col-2"
                     menu-class-name="modalfix"
                     :model-value="retireYear"
@@ -205,14 +216,6 @@
                         clearable
                         @clear="clearDate"
                       >
-                        <!-- <template v-slot:prepend>
-                            <q-icon
-                              name="event"
-                              class="cursor-pointer"
-                              style="color: var(--q-primary)"
-                            >
-                            </q-icon>
-                          </template> -->
                       </q-input>
                     </template>
                   </datepicker>
@@ -298,7 +301,7 @@
                     label="ตำแหน่งเลขที่"
                     @update:model-value="updatePosNo"
                     class="col-3"
-                  />
+                  /> -->
                   <!-- <datepicker
                     class="col-2"
                     menu-class-name="modalfix"
@@ -363,7 +366,7 @@
                     class="col-4"
                   /> -->
 
-                  <q-toggle
+                  <!-- <q-toggle
                     dense
                     :model-value="isShowRetire"
                     color="primary"
@@ -380,6 +383,7 @@
                   >
                     ทดลองปฏิบัติหน้าที่ราชการ
                   </q-toggle>
+                  <q-space /> -->
                   <q-space />
                   <div>
                     <q-btn
@@ -387,7 +391,7 @@
                       color="primary"
                       icon="mdi-magnify"
                       label="ค้นหา"
-                      class="q-px-md"
+                      class="q-px-md full-height"
                       @click="doSearch"
                     />
                   </div>
@@ -441,23 +445,36 @@
     <template #body="props">
       <slot v-bind="props" name="columns"></slot>
     </template>
-  </q-table>
+  </d-table>
   <PopupADdEmployee v-model:modal="modalEmployee" />
 </template>
 <script setup lang="ts">
-import { ref, useAttrs } from "vue";
+import { ref, useAttrs, reactive,watch } from "vue";
 import type { Pagination } from "@/modules/04_registry/interface/index/Main";
 import type { DataOption } from "@/modules/04_registry/components/profileType";
 import PopupHistory from "./PopupHistory.vue";
 import PopupADdEmployee from "@/components/DialogAddEmployee.vue";
 
+const currentPage = ref<number>(1);
+const maxPage = ref<number>(1);
+const page = ref<number>(1);
+const rowsPerPage = ref<number>(10);
+
+
 const attrs = ref<any>(useAttrs());
 const table = ref<any>(null);
 const filterRef = ref<any>(null);
 const searchPanel = ref<boolean>(true);
-const initialPagination = ref<Pagination>({
-  rowsPerPage: 0,
+
+/**
+ *pagination ของตาราง
+ */
+ const pagination = ref({
+  descending: false,
+  page: page.value,
+  rowsPerPage: rowsPerPage.value,
 });
+
 const employeeClassOps = ref<DataOption[]>([
   { id: "officer", name: "ข้าราชการ กทม.สามัญ" },
   //   { id: "employee", name: "ลูกจ้าง(ทั้งหมด)" },
@@ -625,6 +642,27 @@ const modalEmployee = ref<boolean>(false);
 function ocClickAddEmployee() {
   modalEmployee.value = !modalEmployee.value;
 }
+
+function getList(){
+  console.log('GETok')
+}
+watch(
+  () => currentPage.value,
+  () => {
+    rowsPerPage.value = pagination.value.rowsPerPage;
+    getList();
+  }
+);
+
+watch(
+  () => pagination.value.rowsPerPage,
+  () => {
+    rowsPerPage.value = pagination.value.rowsPerPage;
+    currentPage.value = 1;
+    getList();
+  }
+);
+
 </script>
 <style lang="scss">
 .icon-color {