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

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>