api รายการสืบสวนข้อเท็จจริง

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, computed, watchEffect } from "vue";
+import { ref, computed, watchEffect, watch, onMounted } from "vue";
 import { useQuasar } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
 import type { QTableProps } from "quasar";
@@ -13,16 +13,16 @@ const $q = useQuasar();
 const selected = ref<directorType[]>([]);
 const mixin = useCounterMixin();
 const { showLoader, success, messageError, dialogConfirm, hideLoader } = mixin;
-
+const currentPage = ref<number>(1);
 /** ค้นหาคอลัม */
 const visibleColumns2 = ref<string[]>([
   "no",
-  "nameDirector",
+  "name",
   "position",
   "duty",
   "email",
-  "telephone",
-  "role"
+  "phone",
+  "role",
 ]);
 
 /**ข้อมูลหัว ตาราง*/
@@ -39,11 +39,11 @@ const columns2 = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "nameDirector",
+    name: "name",
     align: "left",
     label: "ชื่อ-นามสกุล",
     sortable: true,
-    field: "nameDirector",
+    field: "name",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
@@ -83,11 +83,11 @@ const columns2 = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "telephone",
+    name: "phone",
     align: "left",
     label: "เบอร์โทรศัพท์",
     sortable: true,
-    field: "telephone",
+    field: "phone",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
@@ -113,6 +113,26 @@ const props = defineProps({
   getData: Function,
   rows2: Array,
   filterKeyword2: String,
+  filterTable: {
+    type: String,
+    default: "",
+  },
+  maxPage: {
+    type: Number,
+    require: true,
+  },
+  rowsPerPage: {
+    type: Number,
+    require: true,
+  },
+  page: {
+    type: Number,
+    require: true,
+  },
+  getList: {
+    type: Function,
+    default: () => "",
+  },
 });
 
 const checkSelected = computed(() => {
@@ -123,42 +143,77 @@ const checkSelected = computed(() => {
 });
 
 /** popup ยืนยันส่งัว */
-function saveDirector(){
+function saveDirector() {
   dialogConfirm(
     $q,
     () => DirectorSave(),
     "ยืนยันเพิ่มรายชื่อกรรมการ",
     "ต้องการยืนยันเพิ่มรายชื่อกรรมการ?"
   );
-};
+}
 
 /** ส่งไปออกคำสั่ง */
-async function DirectorSave(){};
+async function DirectorSave() {
+  emit('returnDirector',selected.value);
+}
 
-const emit = defineEmits(["update:filterKeyword2", "update:selected"]);
+const emit = defineEmits([
+  "update:filterKeyword2",
+  "update:selected",
+  "update:pagination",
+  "returnDirector"
+]);
 
-function updateInput(value: any){
+function updateInput(value: any) {
   emit("update:filterKeyword2", value);
-};
+}
 
 /**รีเซ็ตค่าในช่องค้นหา */
-function Reset(){
+function Reset() {
   emit("update:filterKeyword2", "");
-};
+}
 
 /** เช็คค่า props.Modal === true */
 watchEffect(() => {
   if (props.Modal === true) {
     selected.value = [];
+    props.getList();
   }
 });
+
+/** แสดงจำนวนในตาราง */
+const pagination = ref({
+  descending: true,
+  page: Number(props.page),
+  rowsPerPage: props.rowsPerPage,
+});
+
+const 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>
   <q-dialog v-model="props.Modal">
     <q-card style="width: 1200px; max-width: 80vw">
       <DialogHeader title="เลือกรายชื่อกรรมการ" :close="clickClose" />
       <q-separator />
-      <q-card-section >
+      <q-card-section>
         <q-input
           borderless
           outlined
@@ -185,7 +240,7 @@ watchEffect(() => {
           :columns="columns2"
           :rows="rows2"
           :filter="filterKeyword2"
-          row-key="nameDirector"
+          row-key="id"
           :visible-columns="visibleColumns2"
           selection="multiple"
           v-model:selected="selected"