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

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 }}

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 }}

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>

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({
+const currentPage = ref<number>(1);
-  // sortBy: "desc",
-  descending: false,
-  page: 1,
-  rowsPerPage: 10,
-});
 
 /** รับ 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">
+    <template v-slot:body="props">
-      <slot v-bind="props" name="columns"></slot>
+      <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>

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>

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">
+    <template v-slot:body="props">
-      <slot v-bind="props" name="columns"></slot>
+      <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>
 

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'"

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 }}