From c0e9fb6a0f2b5613f48b97311731e3b1d35e97ee Mon Sep 17 00:00:00 2001
From: setthawutttty <stw.ttty@gmail.com>
Date: Mon, 18 Dec 2023 09:46:33 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=E0=B9=81=E0=B8=AA?=
 =?UTF-8?q?=E0=B8=94=E0=B8=87=20=E0=B8=A5=E0=B8=B3=E0=B8=94=E0=B8=B1?=
 =?UTF-8?q?=E0=B8=9A=20=E0=B8=A7=E0=B8=B4=E0=B8=99=E0=B8=B1=E0=B8=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/1_Complaint/TableComplaint.vue |  6 +-
 .../2_InvestigateFacts/MainPage.vue           |  6 +-
 .../3_InvestigateDisciplinary/MainPage.vue    | 40 ++++----
 .../3_InvestigateDisciplinary/Table.vue       | 91 +++++++++++++++++--
 .../components/4_Result/MainPage.vue          | 21 +----
 .../components/4_Result/Table.vue             | 28 +++++-
 .../components/7_ListSuspend/ListsPage.vue    |  6 +-
 .../components/8_AppealComplain/MainPage.vue  |  6 +-
 8 files changed, 147 insertions(+), 57 deletions(-)

diff --git a/src/modules/11_discipline/components/1_Complaint/TableComplaint.vue b/src/modules/11_discipline/components/1_Complaint/TableComplaint.vue
index 065d88597..df45db5c6 100644
--- a/src/modules/11_discipline/components/1_Complaint/TableComplaint.vue
+++ b/src/modules/11_discipline/components/1_Complaint/TableComplaint.vue
@@ -206,7 +206,11 @@ onMounted(() => {
           @click="OpenEdit(props.row.id)"
         >
           <div v-if="col.name == 'no'">
-            {{ props.rowIndex + 1 }}
+            {{
+              (currentPage - 1) * Number(pagination.rowsPerPage) +
+              props.rowIndex +
+              1
+            }}
           </div>
           <div v-else>
             {{ col.value }}
diff --git a/src/modules/11_discipline/components/2_InvestigateFacts/MainPage.vue b/src/modules/11_discipline/components/2_InvestigateFacts/MainPage.vue
index 181e1d09c..e59ee3bb8 100644
--- a/src/modules/11_discipline/components/2_InvestigateFacts/MainPage.vue
+++ b/src/modules/11_discipline/components/2_InvestigateFacts/MainPage.vue
@@ -200,7 +200,11 @@ onMounted(async () => {
               @click="editPage(props.row.id)"
             >
               <div v-if="col.name == 'no'">
-                {{ props.rowIndex + 1 }}
+                {{
+              (currentPage - 1) * Number(pagination.rowsPerPage) +
+              props.rowIndex +
+              1
+            }}
               </div>
               <div>
                 {{ col.value }}
diff --git a/src/modules/11_discipline/components/3_InvestigateDisciplinary/MainPage.vue b/src/modules/11_discipline/components/3_InvestigateDisciplinary/MainPage.vue
index 8f3671118..7307c6367 100644
--- a/src/modules/11_discipline/components/3_InvestigateDisciplinary/MainPage.vue
+++ b/src/modules/11_discipline/components/3_InvestigateDisciplinary/MainPage.vue
@@ -16,28 +16,26 @@ const mixin = useCounterMixin();
 const dataInvestigateDis = useInvestigateDisStore();
 const { showLoader, hideLoader } = mixin;
 const { fetchList } = dataInvestigateDis;
-
+const rowsPerPage = ref<number>(10);
 const $q = useQuasar(); // show dialog
 const router = useRouter();
 
 const filter = ref<string>(""); //search data table
 const page = ref<number>(1);
 const maxPage = ref<number>(1);
-const initialPagination = ref<Pagination>({
-  rowsPerPage: 10,
-});
+
 
 async function fetchListDisciplinary() {
   showLoader();
   await http
     .get(
       config.API.disciplineDisciplinary() +
-        `?page=${page.value}&pageSize=${initialPagination.value.rowsPerPage}`
+        `?page=${page.value}&pageSize=${rowsPerPage.value}`
     )
     .then((res) => {
       const data = res.data.result.data;
       maxPage.value = Math.ceil(
-        res.data.result.total / initialPagination.value.rowsPerPage
+        res.data.result.total / rowsPerPage.value
       );
       fetchList(data);
     })
@@ -58,6 +56,12 @@ function openEdit(id: string) {
   router.push(`/discipline/disciplinary/${id}`);
 }
 
+async function updatePagingProp(rowPerpage: number, pageCurrent: number) {
+  rowsPerPage.value = rowPerpage;
+  page.value = pageCurrent;
+  await fetchListDisciplinary();
+}
+
 /**เมื่อเริ่มโหลดหน้า
  * ส่งข้อมูลจำลองไปยัง store
  */
@@ -80,28 +84,16 @@ onMounted(async () => {
         :visible-columns="dataInvestigateDis.visibleColumns"
         v-model:inputfilter="filter"
         v-model:inputvisible="dataInvestigateDis.visibleColumns"
-        :pagination="initialPagination"
+        :pagination="rowsPerPage"
         :nornmalData="true"
         :paging="true"
         :titleText="''"
+        :rowsPerPage="rowsPerPage"
+        :page="page"
+        :maxPage="maxPage"
+        @update:pagination="updatePagingProp"
+        v-model:open-edit="openEdit"
       >
-        <template #columns="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'">
-                {{ props.rowIndex + 1 }}
-              </div>
-              <div v-else>
-                {{ col.value }}
-              </div>
-            </q-td>
-          </q-tr>
-        </template>
       </Table>
     </div>
   </q-card>
diff --git a/src/modules/11_discipline/components/3_InvestigateDisciplinary/Table.vue b/src/modules/11_discipline/components/3_InvestigateDisciplinary/Table.vue
index 70ed1bcd2..54a2ee914 100644
--- a/src/modules/11_discipline/components/3_InvestigateDisciplinary/Table.vue
+++ b/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>
diff --git a/src/modules/11_discipline/components/4_Result/MainPage.vue b/src/modules/11_discipline/components/4_Result/MainPage.vue
index 65878012f..401142559 100644
--- a/src/modules/11_discipline/components/4_Result/MainPage.vue
+++ b/src/modules/11_discipline/components/4_Result/MainPage.vue
@@ -23,7 +23,7 @@ const initialPagination = ref<Pagination>({
 });
 
 const page = ref<number>(1);
-const pageSize = ref<number>(5);
+const pageSize = ref<number>(10);
 const maxPage = ref<number>(1);
 const filter = ref<string>("");
 
@@ -95,24 +95,9 @@ onMounted(async () => {
         :pageSize="pageSize"
         :maxPage="maxPage"
         @update:queryString="updateQueryString"
+        v-model:open-edit="openEdit"
       >
-        <template #columns="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'">
-                {{ props.rowIndex + 1 }}
-              </div>
-              <div v-else>
-                {{ col.value }}
-              </div>
-            </q-td>
-          </q-tr>
-        </template>
+
       </Table>
     </div>
   </q-card>
diff --git a/src/modules/11_discipline/components/4_Result/Table.vue b/src/modules/11_discipline/components/4_Result/Table.vue
index ea26fb38f..c24f237d4 100644
--- a/src/modules/11_discipline/components/4_Result/Table.vue
+++ b/src/modules/11_discipline/components/4_Result/Table.vue
@@ -21,6 +21,10 @@ const props = defineProps({
     type: Function,
     default: () => console.log("not function"),
   },
+  openEdit: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
   nornmalData: {
     type: Boolean,
     defualt: true,
@@ -156,6 +160,7 @@ watch([() => currentPage.value, () => pagination.value.rowsPerPage], () => {
     :rows-per-page-options="[10, 25, 50, 100]"
     :pagination="pagination"
     @update:pagination="updateRowsPerPage"
+
   >
     <template v-slot:header="props">
       <q-tr :props="props">
@@ -164,8 +169,26 @@ watch([() => currentPage.value, () => pagination.value.rowsPerPage], () => {
         </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>
     <template v-slot:pagination="scope">
       <q-pagination
@@ -178,6 +201,7 @@ watch([() => currentPage.value, () => pagination.value.rowsPerPage], () => {
         direction-links
       ></q-pagination>
     </template>
+    
   </d-table>
 </template>
 
diff --git a/src/modules/11_discipline/components/7_ListSuspend/ListsPage.vue b/src/modules/11_discipline/components/7_ListSuspend/ListsPage.vue
index 14cb045cf..eb70c97a6 100644
--- a/src/modules/11_discipline/components/7_ListSuspend/ListsPage.vue
+++ b/src/modules/11_discipline/components/7_ListSuspend/ListsPage.vue
@@ -327,7 +327,11 @@ onMounted(() => {
                   @click="router.push(`/discipline-suspend/${props.row.id}`)"
                 >
                   <div v-if="col.name === 'no'">
-                    {{ props.rowIndex + 1 }}
+                    {{
+              (currentPage - 1) * Number(pagination.rowsPerPage) +
+              props.rowIndex +
+              1
+            }}
                   </div>
                   <div
                     v-else-if="col.name === 'organization'"
diff --git a/src/modules/11_discipline/components/8_AppealComplain/MainPage.vue b/src/modules/11_discipline/components/8_AppealComplain/MainPage.vue
index 22a41c25f..f85882387 100644
--- a/src/modules/11_discipline/components/8_AppealComplain/MainPage.vue
+++ b/src/modules/11_discipline/components/8_AppealComplain/MainPage.vue
@@ -449,7 +449,11 @@ onMounted(async () => {
               @click="editPage(props.row.id)"
             >
               <div v-if="col.name == 'no'">
-                {{ props.rowIndex + 1 }}
+                {{
+              (currentPage - 1) * Number(pagination.rowsPerPage) +
+              props.rowIndex +
+              1
+            }}
               </div>
               <div>
                 {{ col.value }}