แก้แสดง ลำดับ วินัย

src/modules/11_discipline/components/3_InvestigateDisciplinary/Table.vue

@@ -1,17 +1,12 @@
 <script setup lang="ts">
-import { ref, useAttrs } from "vue";
+import { ref, useAttrs, watch } from "vue";
 import type { Pagination } from "@/modules/04_registry/interface/index/Main";
 
 const table = ref<any>(null);
 const filterRef = ref<any>(null);
 const attrs = ref<any>(useAttrs());
 const paging = ref<boolean>(true);
-const pagination = ref({
-  // sortBy: "desc",
-  descending: false,
-  page: 1,
-  rowsPerPage: 10,
-});
+const currentPage = ref<number>(1);
 
 /** รับ props มาจากหน้าหลัก */
 const props = defineProps({
@@ -27,6 +22,10 @@ const props = defineProps({
     type: Function,
     default: () => console.log("not function"),
   },
+  openEdit: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
   nornmalData: {
     type: Boolean,
     defualt: true,
@@ -35,14 +34,38 @@ const props = defineProps({
     type: Boolean,
     defualt: false,
   },
+  filterTable: {
+    type: String,
+    default: "",
+  },
+  maxPage: {
+    type: Number,
+    require: true,
+  },
+  rowsPerPage: {
+    type: Number,
+    require: true,
+  },
+  page: {
+    type: Number,
+    require: true,
+  },
 });
 
 const emit = defineEmits([
   "update:inputfilter",
   "update:inputvisible",
   "update:editvisible",
+  "update:pagination",
 ]);
 
+/** แสดงจำนวนในตาราง */
+const pagination = ref({
+  descending: true,
+  page: Number(props.page),
+  rowsPerPage: props.rowsPerPage,
+});
+
 function paginationLabel(start: string, end: string, total: string) {
   if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
   else return start + "-" + end + " ใน " + total;
@@ -61,6 +84,26 @@ function resetFilter() {
   emit("update:inputfilter", "");
   filterRef.value.focus();
 }
+
+function updateProp(newPagination: any, page: number) {
+  // ส่ง event ไปยัง parent component เพื่ออัพเดทค่า props
+  emit("update:pagination", newPagination, page);
+}
+
+watch(
+  () => currentPage.value,
+  () => {
+    updateProp(pagination.value.rowsPerPage, currentPage.value);
+  }
+);
+
+watch(
+  () => pagination.value.rowsPerPage,
+  () => {
+    currentPage.value = 1;
+    updateProp(pagination.value.rowsPerPage, currentPage.value);
+  }
+);
 </script>
 
 <template>
@@ -115,7 +158,19 @@ function resetFilter() {
     dense
     :pagination-label="paginationLabel"
     v-model:pagination="pagination"
+    :rows-per-page-options="[10, 25, 50, 100]"
   >
+    <template v-slot:pagination="scope">
+      <q-pagination
+        v-model="currentPage"
+        active-color="primary"
+        color="dark"
+        :max="Number(props.maxPage)"
+        size="sm"
+        boundary-links
+        direction-links
+      ></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">
@@ -123,8 +178,26 @@ function resetFilter() {
         </q-th>
       </q-tr>
     </template>
-    <template #body="props">
-      <slot v-bind="props" name="columns"></slot>
+    <template v-slot:body="props">
+      <q-tr :props="props" class="cursor-pointer">
+        <q-td
+          v-for="col in props.cols"
+          :key="col.name"
+          :props="props"
+          @click="openEdit(props.row.id)"
+        >
+          <div v-if="col.name == 'no'">
+            {{
+              (currentPage - 1) * Number(pagination.rowsPerPage) +
+              props.rowIndex +
+              1
+            }}
+          </div>
+          <div v-else>
+            {{ col.value }}
+          </div>
+        </q-td>
+      </q-tr>
     </template>
   </d-table>
 </template>