hrms-bangkok/hrms-user
7
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

fix load Table

Browse source
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490 2025-08-29 13:45:33 +07:00
parent 1ec4a97538
commit d39753fbde
56 changed files with 684 additions and 978 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/modules/10_registry/01_Information/01_Information.vue
View file

@ -1,6 +1,6 @@
<script setup lang="ts">
import { ref, reactive, onMounted, computed } from "vue";
import { is, useQuasar, type QTableProps } from "quasar";
import { useQuasar, type QTableProps } from "quasar";
import http from "@/plugins/http";
import config from "@/app.config";

13
src/modules/10_registry/01_Information/02_ChangeName.vue
View file

@ -10,9 +10,6 @@ import config from "@/app.config";
import { useQuasar, type QTableProps } from "quasar";
import type { ChangNameRows } from "@/modules/10_registry/interface/response/01_Information";
/** import component */
import SkeletonTable from "@/components/SkeletonTable.vue";
const $q = useQuasar();
const dataStore = useDataStore();
const { showLoader, hideLoader, messageError, date2Thai, onSearchDataTable } =
@ -194,23 +191,21 @@ onMounted(async () => {
/>
</q-toolbar>
<div v-if="isLoading">
<SkeletonTable :columns="columns" />
</div>
<div class="col-12" v-else>
<div class="col-12">
<d-table
flat
dense
bordered
virtual-scroll
row-key="id"
:rows="rows.length !== 0 ? rows : []"
:columns="columns"
:grid="!mode"
:rows-per-page-options="[10, 25, 50, 100]"
:visible-columns="visibleColumns"
:virtual-scroll-sticky-size-start="48"
v-model:pagination="pagination"
:pagination="pagination"
:loading="isLoading"
>
<template v-slot:header="props">
<q-tr :props="props">

10
src/modules/10_registry/01_Information/05_Educations.vue
View file

@ -10,7 +10,6 @@ import { useCounterMixin } from "@/stores/mixin";
import type { EducationProfile } from "@/modules/10_registry/interface/index/Main";
import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
import SkeletonTable from "@/components/SkeletonTable.vue";
const link = ref<string>("");
const $q = useQuasar();
@ -530,7 +529,7 @@ function onHistory(id: string) {
/** get history */
async function getHistory() {
isLoadingHistory.value = true
isLoadingHistory.value = true;
rowsHistory.value = [];
rowsHistoryData.value = [];
await http
@ -601,9 +600,7 @@ onMounted(async () => {
/>
</q-toolbar>
<SkeletonTable v-if="isLoading" :columns="columns" />
<d-table
v-else
flat
dense
bordered
@ -611,9 +608,12 @@ onMounted(async () => {
:rows="rows.length !== 0 ? rows : []"
:columns="columns"
:grid="!mode"
:rows-per-page-options="[10, 25, 50, 100]"
:rows-per-page-options="[1, 10, 25, 50, 100]"
:visible-columns="visibleColumns"
:virtual-scroll-sticky-size-start="48"
:loading="isLoading"
row-key="id"
:pagination="{ page: 1, rowsPerPage: 10 }"
>
<template v-slot:header="props">
<q-tr :props="props">

7
src/modules/10_registry/01_Information/06_Ability.vue
View file

@ -12,7 +12,6 @@ import type { AbilityRows } from "@/modules/10_registry/interface/index/Main";
/** import components */
import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
import SkeletonTable from "@/components/SkeletonTable.vue";
const $q = useQuasar();
const dataStore = useDataStore();
@ -317,9 +316,7 @@ onMounted(async () => {
/>
</q-toolbar>
<SkeletonTable v-if="isLoading" :columns="columns" />
<d-table
v-else
flat
dense
bordered
@ -330,7 +327,9 @@ onMounted(async () => {
:rows-per-page-options="[10, 25, 50, 100]"
:visible-columns="visibleColumns"
:virtual-scroll-sticky-size-start="48"
v-model:pagination="pagination"
:pagination="pagination"
:loading="isLoading"
row-key="id"
>
<template v-slot:header="props">
<q-tr :props="props">

9
src/modules/10_registry/02_Government/02_Discipline.vue
View file

@ -11,7 +11,6 @@ import { useRegistryDataStore } from "@/modules/10_registry/store/Main";
import type { DisciplineDetail } from "@/modules/10_registry/interface/index/Main";
import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
import SkeletonTable from "@/components/SkeletonTable.vue";
const $q = useQuasar();
const dataStore = useDataStore();
@ -254,9 +253,8 @@ onMounted(async () => {
:display-value="$q.lang.table.columns"
/>
</q-toolbar>
<SkeletonTable v-if="isLoading" :columns="columns" />
<d-table
v-else
flat
dense
bordered
@ -267,7 +265,9 @@ onMounted(async () => {
:rows-per-page-options="[10, 25, 50, 100]"
:visible-columns="visibleColumns"
:virtual-scroll-sticky-size-start="48"
v-model:pagination="pagination"
:pagination="pagination"
:loading="isLoading"
row-key="id"
>
<template v-slot:header="props">
<q-tr :props="props">
@ -321,6 +321,7 @@ onMounted(async () => {
</q-td>
</q-tr>
</template>
<template v-else v-slot:item="props">
<div class="q-mb-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
<q-card bordered flat>

7
src/modules/10_registry/02_Government/03_Leave.vue
View file

@ -10,7 +10,6 @@ import { useDataStore } from "@/stores/data";
import type { LeaveFormType } from "@/modules/10_registry/interface/index/Main";
import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
import SkeletonTable from "@/components/SkeletonTable.vue";
const $q = useQuasar();
const dataStore = useDataStore();
@ -396,9 +395,7 @@ onMounted(async () => {
/>
</q-toolbar>
<SkeletonTable v-if="isLoading" :columns="columns" />
<d-table
v-else
flat
dense
bordered
@ -409,7 +406,9 @@ onMounted(async () => {
:rows-per-page-options="[10, 25, 50, 100]"
:visible-columns="visibleColumns"
:virtual-scroll-sticky-size-start="48"
v-model:pagination="pagination"
:pagination="pagination"
:loading="isLoading"
row-key="id"
>
<template v-slot:header="props">
<q-tr :props="props">

8
src/modules/10_registry/02_Government/04_Duty.vue
View file

@ -11,7 +11,6 @@ import { useRegistryDataStore } from "@/modules/10_registry/store/Main";
import type { DutyFormType } from "@/modules/10_registry/interface/index/Main";
import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
import SkeletonTable from "@/components/SkeletonTable.vue";
const $q = useQuasar();
const dataStore = useDataStore();
@ -358,9 +357,8 @@ onMounted(async () => {
:display-value="$q.lang.table.columns"
/>
</q-toolbar>
<SkeletonTable v-if="isLoading" :columns="columns" />
<d-table
v-else
flat
dense
bordered
@ -371,7 +369,9 @@ onMounted(async () => {
:rows-per-page-options="[10, 25, 50, 100]"
:visible-columns="visibleColumns"
:virtual-scroll-sticky-size-start="48"
v-model:pagination="pagination"
:pagination="pagination"
:loading="isLoading"
row-key="id"
>
<template v-slot:header="props">
<q-tr :props="props">

7
src/modules/10_registry/02_Government/05_Actposition.vue
View file

@ -11,7 +11,6 @@ import type { DutyFormType } from "@/modules/10_registry/interface/index/Main";
/** import components */
import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
import SkeletonTable from "@/components/SkeletonTable.vue";
const $q = useQuasar();
const dataStore = useDataStore();
@ -287,9 +286,7 @@ onMounted(async () => {
/>
</q-toolbar>
<SkeletonTable v-if="isLoading" :columns="columns" />
<d-table
v-else
flat
dense
bordered
@ -300,7 +297,9 @@ onMounted(async () => {
:rows-per-page-options="[10, 25, 50, 100]"
:visible-columns="visibleColumns"
:virtual-scroll-sticky-size-start="48"
v-model:pagination="pagination"
:pagination="pagination"
:loading="isLoading"
row-key="id"
>
<template v-slot:header="props">
<q-tr :props="props">

7
src/modules/10_registry/02_Government/06_Assistance.vue
View file

@ -11,7 +11,6 @@ import type { DutyFormType } from "@/modules/10_registry/interface/index/Main";
/** import components */
import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
import SkeletonTable from "@/components/SkeletonTable.vue";
const $q = useQuasar();
@ -368,9 +367,7 @@ onMounted(async () => {
/>
</q-toolbar>
<SkeletonTable v-if="isLoading" :columns="columns" />
<d-table
v-else
flat
dense
bordered
@ -381,7 +378,9 @@ onMounted(async () => {
:rows-per-page-options="[10, 25, 50, 100]"
:visible-columns="visibleColumns"
:virtual-scroll-sticky-size-start="48"
v-model:pagination="pagination"
:pagination="pagination"
:loading="isLoading"
row-key="id"
>
<template v-slot:header="props">
<q-tr :props="props">

6
src/modules/10_registry/02_Government/07_Position.vue
View file

@ -14,7 +14,6 @@ import type {
/**import components*/
import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
import SkeletonTable from "@/components/SkeletonTable.vue";
const $q = useQuasar();
const dataPerson = useDataStore();
@ -526,9 +525,7 @@ onMounted(async () => {
</div>
<div class="col-12 q-mt-sm">
<SkeletonTable v-if="isLoading.position" :columns="columns" />
<d-table
v-else
flat
dense
bordered
@ -539,6 +536,9 @@ onMounted(async () => {
:rows-per-page-options="[10, 25, 50, 100]"
:visible-columns="visibleColumns"
:virtual-scroll-sticky-size-start="48"
:isLoading="isLoading.position"
row-key="id"
:pagination="{ page: 1, rowsPerPage: 10 }"
>
<template v-slot:header="props">
<q-tr :props="props">

12
src/modules/10_registry/03_Salary/01_Salary.vue
View file

@ -10,7 +10,6 @@ import { useDataStore } from "@/stores/data";
import type { SalaryFormType } from "@/modules/10_registry/interface/index/Main";
import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
import SkeletonTable from "@/components/SkeletonTable.vue";
const $q = useQuasar();
const dataPerson = useDataStore();
@ -729,19 +728,20 @@ onMounted(async () => {
/>
</q-toolbar>
<SkeletonTable v-if="isLoading" :columns="columns" />
<d-table
v-else
flat
dense
bordered
virtual-scroll
row-key="id"
:rows="rows.length !== 0 ? rows : []"
:columns="columns"
:grid="!mode"
:rows-per-page-options="[10, 25, 50, 100]"
:visible-columns="visibleColumns"
:virtual-scroll-sticky-size-start="48"
:loading="isLoading"
:pagination="{ page: 1, rowsPerPage: 10 }"
>
<template v-slot:header="props">
<q-tr :props="props">
@ -765,7 +765,11 @@ onMounted(async () => {
<div v-else-if="col.name == 'status'">
{{ props.row.status ? props.row.status : "-" }}
</div>
<div v-else-if="col.name == 'organization'" class="text-html">
<div
v-else-if="col.name == 'organization'"
class="text-html"
style="width: 200px"
>
{{
props.row
? findOrgNameHtml({

7
src/modules/10_registry/03_Salary/02_Nopaid.vue
View file

@ -11,7 +11,6 @@ import { useRegistryDataStore } from "@/modules/10_registry/store/Main";
import type { NopaidFormType } from "@/modules/10_registry/interface/index/Main";
import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
import SkeletonTable from "@/components/SkeletonTable.vue";
const $q = useQuasar();
const dataPerson = useDataStore();
@ -340,9 +339,7 @@ onMounted(async () => {
/>
</q-toolbar>
<SkeletonTable v-if="isLoading" :columns="columns" />
<d-table
v-else
flat
dense
bordered
@ -353,7 +350,9 @@ onMounted(async () => {
:rows-per-page-options="[10, 25, 50, 100]"
:visible-columns="visibleColumns"
:virtual-scroll-sticky-size-start="48"
v-model:pagination="pagination"
:pagination="pagination"
:loading="isLoading"
row-key="id"
>
<template v-slot:header="props">
<q-tr :props="props">

7
src/modules/10_registry/04_Achievement/01_Certificate.vue
View file

@ -11,7 +11,6 @@ import { useRegistryDataStore } from "@/modules/10_registry/store/Main";
import type { CertificateDetail } from "@/modules/10_registry/interface/index/Main";
import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
import SkeletonTable from "@/components/SkeletonTable.vue";
const $q = useQuasar();
const dataPerson = useDataStore();
@ -338,10 +337,8 @@ onMounted(async () => {
:display-value="$q.lang.table.columns"
/>
</q-toolbar>
<SkeletonTable v-if="isLoading" :columns="columns" />
<d-table
v-else
flat
dense
bordered
@ -352,7 +349,9 @@ onMounted(async () => {
:rows-per-page-options="[10, 25, 50, 100]"
:visible-columns="visibleColumns"
:virtual-scroll-sticky-size-start="48"
v-model:pagination="pagination"
:pagination="pagination"
:loading="isLoading"
row-key="id"
>
<template v-slot:header="props">
<q-tr :props="props">

7
src/modules/10_registry/04_Achievement/02_Training.vue
View file

@ -11,7 +11,6 @@ import type { TrainingFormType } from "@/modules/10_registry/interface/index/Mai
//history dialog
import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
import SkeletonTable from "@/components/SkeletonTable.vue";
const $q = useQuasar();
const dataPerson = useDataStore();
@ -447,9 +446,7 @@ onMounted(async () => {
/>
</q-toolbar>
<SkeletonTable v-if="isLoading" :columns="columns" />
<d-table
v-else
flat
dense
bordered
@ -460,7 +457,9 @@ onMounted(async () => {
:rows-per-page-options="[10, 25, 50, 100]"
:visible-columns="visibleColumns"
:virtual-scroll-sticky-size-start="48"
v-model:pagination="pagination"
:pagination="pagination"
:loading="isLoading"
row-key="id"
>
<template v-slot:header="props">
<q-tr :props="props">

7
src/modules/10_registry/04_Achievement/03_Insignia.vue
View file

@ -11,7 +11,6 @@ import { useRegistryDataStore } from "@/modules/10_registry/store/Main";
import type { InsigniaFormType } from "@/modules/10_registry/interface/index/Main";
import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
import SkeletonTable from "@/components/SkeletonTable.vue";
const $q = useQuasar();
const dataPerson = useDataStore();
@ -555,9 +554,7 @@ onMounted(async () => {
/>
</q-toolbar>
<SkeletonTable v-if="isLoading" :columns="columns" />
<d-table
v-else
flat
dense
bordered
@ -568,7 +565,9 @@ onMounted(async () => {
:rows-per-page-options="[10, 25, 50, 100]"
:visible-columns="visibleColumns"
:virtual-scroll-sticky-size-start="48"
v-model:pagination="pagination"
:pagination="pagination"
:loading="isLoading"
row-key="id"
>
<template v-slot:header="props">
<q-tr :props="props">

7
src/modules/10_registry/04_Achievement/04_Honor.vue
View file

@ -12,7 +12,6 @@ import type { HonorFormData } from "@/modules/10_registry/interface/index/Main";
//history dialog
import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
import SkeletonTable from "@/components/SkeletonTable.vue";
const $q = useQuasar();
const dataPerson = useDataStore();
@ -339,9 +338,7 @@ onMounted(async () => {
/>
</q-toolbar>
<SkeletonTable v-if="isLoading" :columns="columns" />
<d-table
v-else
flat
dense
bordered
@ -352,7 +349,9 @@ onMounted(async () => {
:rows-per-page-options="[10, 25, 50, 100]"
:visible-columns="visibleColumns"
:virtual-scroll-sticky-size-start="48"
v-model:pagination="pagination"
:pagination="pagination"
:loading="isLoading"
row-key="id"
>
<template v-slot:header="props">
<q-tr :props="props">

7
src/modules/10_registry/04_Achievement/05_Assessments.vue
View file

@ -13,7 +13,6 @@ import type {
} from "@/modules/10_registry/interface/index/Main";
import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
import SkeletonTable from "@/components/SkeletonTable.vue";
const $q = useQuasar();
const dataPerson = useDataStore();
@ -473,9 +472,7 @@ onMounted(async () => {
/>
</q-toolbar>
<SkeletonTable v-if="isLoading" :columns="columns" />
<d-table
v-else
flat
dense
bordered
@ -486,7 +483,9 @@ onMounted(async () => {
:rows-per-page-options="[10, 25, 50, 100]"
:visible-columns="visibleColumns"
:virtual-scroll-sticky-size-start="48"
v-model:pagination="pagination"
:pagination="pagination"
:loading="isLoading"
row-key="id"
>
<template v-slot:header="props">
<q-tr :props="props">

7
src/modules/10_registry/04_Achievement/06_DevelopmentPlan.vue
View file

@ -8,7 +8,6 @@ import { useCounterMixin } from "@/stores/mixin";
import { useDataStore } from "@/stores/data";
import DialogDevelop from "@/modules/10_registry/Dialog/DialogDevelopmant.vue";
import SkeletonTable from "@/components/SkeletonTable.vue";
const $q = useQuasar();
const dataPerson = useDataStore();
@ -209,9 +208,8 @@ onMounted(async () => {
:display-value="$q.lang.table.columns"
/>
</q-toolbar>
<SkeletonTable v-if="isLoading" :columns="columns" />
<d-table
v-else
flat
dense
bordered
@ -222,6 +220,9 @@ onMounted(async () => {
:rows-per-page-options="[10, 25, 50, 100]"
:visible-columns="visibleColumns"
:virtual-scroll-sticky-size-start="48"
:pagination="{ page: 1, rowsPerPage: 10 }"
:loading="isLoading"
row-key="id"
>
<template v-slot:header="props">
<q-tr :props="props">

15
src/modules/10_registry/05_Other/01_Other.vue
View file

@ -10,7 +10,6 @@ import { useDataStore } from "@/stores/data";
import type { OtherFormType } from "@/modules/10_registry/interface/index/Main";
import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
import SkeletonTable from "@/components/SkeletonTable.vue";
const $q = useQuasar();
const dataPerson = useDataStore();
@ -232,9 +231,7 @@ onMounted(async () => {
/>
</q-toolbar>
<SkeletonTable v-if="isLoading" :columns="columns" />
<d-table
v-else
flat
dense
bordered
@ -245,7 +242,9 @@ onMounted(async () => {
:rows-per-page-options="[10, 25, 50, 100]"
:visible-columns="visibleColumns"
:virtual-scroll-sticky-size-start="48"
v-model:pagination="pagination"
:pagination="pagination"
:loading="isLoading"
row-key="id"
>
<template v-slot:header="props">
<q-tr :props="props">
@ -276,6 +275,7 @@ onMounted(async () => {
</q-td>
</q-tr>
</template>
<template v-else v-slot:item="props">
<div class="q-mb-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
<q-card bordered flat>
@ -308,13 +308,6 @@ onMounted(async () => {
</q-card>
</div>
</template>
<template v-slot:no-data>
<div
class="full-width row flex-center q-pa-sm rounded-borders text-weight-medium"
>
<span> ไม่พบข้อมูล </span>
</div>
</template>
</d-table>
</div>

17
src/modules/10_registry/Dialog/DialogHistory.vue
View file

@ -8,7 +8,6 @@ import type { QTableProps } from "quasar";
/** import component */
import DialogHeader from "@/components/DialogHeader.vue";
import SkeletonTable from "@/components/SkeletonTable.vue";
const { date2Thai, onSearchDataTable, findOrgNameHtml } = useCounterMixin();
@ -129,11 +128,8 @@ watch(
/>
</div>
</div>
<div v-if="isLoading">
<SkeletonTable :columns="columns" />
</div>
<div v-else class="col-12">
<div class="col-12">
<d-table
flat
dense
@ -144,7 +140,9 @@ watch(
:rows-per-page-options="[10, 25, 50, 100]"
:visible-columns="visibleColumns"
:virtual-scroll-sticky-size-start="48"
v-model:pagination="pagination"
:pagination="pagination"
:loading="isLoading"
row-key="id"
>
<template v-slot:header="props">
<q-tr :props="props">
@ -262,13 +260,6 @@ watch(
</q-card>
</div>
</template>
<template v-slot:no-data>
<div
class="full-width row flex-center q-pa-sm rounded-borders text-weight-medium"
>
<span> ไม่พบข้อมูล </span>
</div>
</template>
</d-table>
</div>
</q-card-section>

71
src/modules/10_registry/views/requestEditMain.vue
View file

@ -1,5 +1,5 @@
<script setup lang="ts">
import { ref, onMounted, watch } from "vue";
import { ref, onMounted } from "vue";
import config from "@/app.config";
import http from "@/plugins/http";
@ -11,15 +11,12 @@ import { useCounterMixin } from "@/stores/mixin";
/**importType*/
import type { QTableProps } from "quasar";
import type {
DataOption,
NewPagination,
} from "@/modules/10_registry/interface/index/Main";
import type { PropsTable } from "@/interface/PropsTable";
import type { DataOption } from "@/modules/10_registry/interface/index/Main";
import type { DataRequest } from "@/modules/10_registry/interface/response/Main";
/** importComponents*/
import DialogAddRequestEdit from "@/modules/10_registry/components/DialogAddRequestEdit.vue";
import SkeletonTable from "@/components/SkeletonTable.vue";
/** use */
const $q = useQuasar();
@ -38,10 +35,6 @@ const isLoading = ref<boolean>(false);
/** Table*/
const rows = ref<DataRequest[]>([]);
const page = ref<number>(1);
const pageSize = ref<number>(10);
const rowsTotal = ref<number>(0);
const maxPage = ref<number>(0);
const columns = ref<QTableProps["columns"]>([
{
name: "no",
@ -110,10 +103,11 @@ const visibleColumns = ref<string[]>([
"status",
"remark",
]);
const pagination = ref({
const pagination = ref<PropsTable.Pagination>({
descending: true,
page: page.value,
rowsPerPage: pageSize.value,
page: 1,
rowsPerPage: 10,
rowsNumber: 0,
});
/** function กลับไปหน้าทะเบียนประวัติ*/
@ -129,8 +123,8 @@ function onClickAdd() {
/** function fetch รายการข้อมูลการยื่นคำร้องขอแก้ไขข้อมูล*/
async function fetchListRequset() {
let queryParams = {
page: page.value,
pageSize: pageSize.value,
page: pagination.value.page,
pageSize: pagination.value.rowsPerPage,
status: status.value,
keyword: keyword.value,
};
@ -140,10 +134,9 @@ async function fetchListRequset() {
params: queryParams,
})
.then((res) => {
const data = res.data.result;
maxPage.value = Math.ceil(data.total / pageSize.value);
rowsTotal.value = data.total;
rows.value = data.data;
const result = res.data.result;
pagination.value.rowsNumber = result.total;
rows.value = result.data;
})
.catch((err) => {
messageError($q, err);
@ -155,7 +148,7 @@ async function fetchListRequset() {
/** function เลือกสถานะคำร้อง*/
function updateStatusValue() {
page.value = 1;
pagination.value.page = 1;
fetchListRequset();
}
@ -180,21 +173,16 @@ function filterOption(val: string, update: Function) {
}
/**
* function อัพเดทขนาดหน้าใน pagination
* @param newPagination ข้อมูลใหม่ของ pagination
* ฟังก์ชันรับ request จากตาราง เมื่อมีการเปลี่ยน pagination
* @param requestProps ข้อมูลการร้องขอจากตาราง
*/
function updatePageSizePagination(newPagination: NewPagination) {
page.value = 1;
pageSize.value = newPagination.rowsPerPage;
function onTableRequest(requestProps: PropsTable.RequestProps) {
const newPagination = requestProps?.pagination || requestProps;
if (!newPagination?.page || !newPagination?.rowsPerPage) return;
pagination.value = { ...newPagination };
fetchListRequset();
}
watch(
() => pageSize.value,
() => {
fetchListRequset();
}
);
onMounted(async () => {
link.value = await dataStore.getProFileType();
fetchListRequset();
@ -298,17 +286,16 @@ onMounted(async () => {
</div>
</div>
<div class="col-12">
<SkeletonTable v-if="isLoading" :columns="columns" />
<d-table
v-else
:columns="columns"
:rows="rows"
row-key="id"
:rows-per-page-options="[10, 25, 50, 100]"
:paging="true"
:visible-columns="visibleColumns"
@update:pagination="updatePageSizePagination"
v-model:pagination="pagination"
:loading="isLoading"
@request="onTableRequest"
>
<template v-slot:header="props">
<q-tr :props="props">
@ -338,20 +325,6 @@ onMounted(async () => {
</q-td>
</q-tr>
</template>
<template v-slot:pagination="scope">
ทั้งหมด {{ rowsTotal }} รายการ
<q-pagination
v-model="page"
active-color="primary"
color="dark"
:max="Number(maxPage)"
:max-pages="5"
size="sm"
boundary-links
direction-links
@update:model-value="fetchListRequset()"
></q-pagination>
</template>
</d-table>
</div>
</q-card>