fix:sortBy ,descending

- ทำ sortBy เฉพาะ API ที่มีการทำ paging
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490 2025-09-15 13:52:27 +07:00
parent 4308f8887f
commit 1f18b56fbf
13 changed files with 98 additions and 67 deletions

View file

@ -44,11 +44,11 @@ const columns = ref<QTableProps["columns"]>([
style: "font-size: 14px",
},
{
name: "fullName",
name: "firstName",
align: "left",
label: "ชื่อ-นามสกุล",
sortable: true,
field: "fullName",
field: "firstName",
format(val, row) {
return `${row.prefix}${row.firstName} ${row.lastName}`;
},
@ -66,7 +66,7 @@ const columns = ref<QTableProps["columns"]>([
},
]);
const pagination = ref<PropsTable.Pagination>({
sortBy: "createdAt",
sortBy: "",
descending: true,
page: 1,
rowsPerPage: 10,
@ -83,6 +83,10 @@ async function getCommander() {
page: pagination.value.page,
pageSize: pagination.value.rowsPerPage,
keycloakId: storeData.formData.keycloakId,
...(pagination.value.sortBy && {
sortBy: pagination.value.sortBy,
descending: pagination.value.descending,
}),
type:
storeData.officerType.toLocaleUpperCase() == "OFFICER"
? "officer"
@ -117,7 +121,7 @@ function closeDialog() {
rows.value = [];
selected.value = [];
pagination.value = {
sortBy: "createdAt",
sortBy: "",
descending: true,
page: 1,
rowsPerPage: 10,

View file

@ -37,6 +37,8 @@ const maxPage = ref<number>(1);
const page = ref<number>(1);
const pageSize = ref<number>(10);
const total = ref<number>(0);
const sortBy = ref<string>("dateSendLeave");
const descending = ref<boolean>(true);
/** function เรียกข้อมูลการลา*/
async function fetchDataTable() {
isLoading.value = true;
@ -47,6 +49,10 @@ async function fetchDataTable() {
page: page.value.toString(), //*
pageSize: pageSize.value.toString(), //*
keyword: filter.value, //keyword
...(sortBy.value && {
sortBy: sortBy.value,
descending: descending.value,
}),
};
await http
.post(config.API.leaveTableList(), body)
@ -141,9 +147,14 @@ async function updateFilterTable(y: number, t: string, s: string, k: string) {
* function updatePagination
* @param p หน
* @param ps แถวตอหน
* @param s เรยงลำดบตาม
* @param d เรยงลำดบจากนอยไปมาก
*/
async function updatePagination(p: number, ps: number) {
(page.value = p), (pageSize.value = ps);
async function updatePagination(p: number, ps: number, s: string, d: boolean) {
page.value = p;
pageSize.value = ps;
sortBy.value = s;
descending.value = d;
await fetchDataTable();
}
@ -188,6 +199,8 @@ onMounted(async () => {
:pageSize="pageSize"
:leaveType="leaveType"
:total="total"
:sortBy="sortBy"
:descending="descending"
:isloadingData="isLoading"
>
<template #columns="props">
@ -215,7 +228,7 @@ onMounted(async () => {
}}
</q-td>
<q-td
key="dateLeave"
key="leaveStartDate"
:props="props"
@click="onClickView(props.row.id, props.row.status)"
>

View file

@ -38,6 +38,14 @@ const props = defineProps({
type: Boolean,
default: false,
},
sortBy: {
type: String,
default: "dateSendLeave",
},
descending: {
type: Boolean,
default: true,
},
});
/**
@ -56,11 +64,10 @@ const table = ref<any>(null);
const currentPage = ref<number>(1);
const pagination = ref<PropsTable.Pagination>({
sortBy: "dateSendLeave",
descending: true,
sortBy: props.sortBy,
descending: props.descending,
page: 1,
rowsPerPage: Number(props.pageSize),
rowsNumber: Number(props.total),
});
@ -94,9 +101,20 @@ function filterTable() {
);
}
/** function updatePagination*/
function updatePagination(p: number, ps: number) {
emit("update:Pagination", p, ps);
/**
* งกนอปเดตการแบงหน
* @param p หน
* @param ps ขนาดหน
* @param sortBy เรยงลำดบตาม
* @param descending เรยงลำดบจากนอยไปมาก
*/
function updatePagination(
p: number,
ps: number,
sortBy?: string,
descending?: boolean
) {
emit("update:Pagination", p, ps, sortBy, descending);
}
/**
@ -108,7 +126,12 @@ function onTableRequest(requestProps: PropsTable.RequestProps) {
if (!newPagination?.page || !newPagination?.rowsPerPage) return;
currentPage.value = newPagination.page;
pagination.value = { ...newPagination };
updatePagination(newPagination.page, newPagination.rowsPerPage);
updatePagination(
newPagination.page,
newPagination.rowsPerPage,
newPagination.sortBy,
newPagination.descending
);
}
</script>