แก้ไข pagination specialTime
This commit is contained in:
AnandaTon
parent
e0fa2d9632
commit
581229caa9
2 changed files with 94 additions and 115 deletions
|
|
@ -26,33 +26,6 @@ export const useSpecialTimeStore = defineStore("LeaveSpecialTime", () => {
|
|||
const selectDate = ref<Date | null>(new Date());
|
||||
const fiscalYear = ref<string | null>("0");
|
||||
const DataMainOrig = ref<DataRows[]>([]); // ข้อมูลหลักดั้งเดิม
|
||||
// async function fecthList(data: ListData[]) {
|
||||
// let datalist: DataRows[] = data.map((e: ListData) => ({
|
||||
// id: e.id,
|
||||
// fullname: e.fullname,
|
||||
// date: date2Thai(new Date(e.date), false, true),
|
||||
// dateFix: date2Thai(new Date(e.dateFix)),
|
||||
// timeMorning:
|
||||
// e.startTimeMorning == null
|
||||
// ? "-"
|
||||
// : e.startTimeMorning + " - " + e.endTimeMorning,
|
||||
// timeAfternoon:
|
||||
// e.startTimeAfternoon == null
|
||||
// ? "-"
|
||||
// : e.startTimeAfternoon + " - " + e.endTimeAfternoon,
|
||||
// startTimeMorning: e.startTimeMorning,
|
||||
// endTimeMorning: e.endTimeMorning,
|
||||
// startTimeAfternoon: e.startTimeAfternoon,
|
||||
// endTimeAfternoon: e.endTimeAfternoon,
|
||||
// checkIn: e.checkOut,
|
||||
// checkOut: e.checkOut,
|
||||
// status: e.status,
|
||||
// checkInStatus: convertStatus(e.checkInStatus),
|
||||
// checkOutStatus: convertStatus(e.checkOutStatus),
|
||||
// }));
|
||||
// rows.value = datalist;
|
||||
// DataMainOrig.value = datalist;
|
||||
// }
|
||||
const DataMainUpdate = ref<DataRows[]>([]); // ข้อมูลเปลี่ยนแปลง
|
||||
const DataMain = (val: DataRows[]) => (DataMainOrig.value = val);
|
||||
const DataUpdate = (filterYear: string) => {
|
||||
|
|
@ -68,15 +41,16 @@ export const useSpecialTimeStore = defineStore("LeaveSpecialTime", () => {
|
|||
const year = ref<number>(2023);
|
||||
const month = ref<number>(11);
|
||||
const page = ref<number>(1);
|
||||
const total = ref<number>(0);
|
||||
const pageSize = ref<number>(10);
|
||||
const filter = ref<string>(""); //search data table
|
||||
|
||||
const maxPage = ref<number>(0);
|
||||
// Pagination - update rowsPerPage
|
||||
async function updatePagination(newPagination: any) {
|
||||
initialPagination.value = newPagination;
|
||||
// currentPage.value = 1;
|
||||
console.log("updatePagination");
|
||||
}
|
||||
// async function updatePagination(newPagination: any) {
|
||||
// initialPagination.value = newPagination;
|
||||
// // currentPage.value = 1;
|
||||
// console.log("updatePagination");
|
||||
// }
|
||||
|
||||
// Pagination - initial pagination
|
||||
const initialPagination = ref<any>({
|
||||
|
|
@ -86,21 +60,6 @@ export const useSpecialTimeStore = defineStore("LeaveSpecialTime", () => {
|
|||
// rowsPerPage: pageSize,
|
||||
});
|
||||
|
||||
// Pagination - page & change page & get new data
|
||||
// const currentPage = ref<number>(1);
|
||||
// watch(
|
||||
// [() => currentPage.value, () => initialPagination.value.rowsPerPage],
|
||||
// () => {
|
||||
// emit(
|
||||
// "update:change-page",
|
||||
// currentPage.value,
|
||||
// initialPagination.value.rowsPerPage,
|
||||
// true
|
||||
// );
|
||||
// }
|
||||
// );
|
||||
|
||||
// const emit = defineEmits(["update:change-page"]);
|
||||
/**
|
||||
* ฟังก์ชั่น api เปลี่ยนหน้า
|
||||
* @param pageVal page
|
||||
|
|
@ -123,12 +82,16 @@ export const useSpecialTimeStore = defineStore("LeaveSpecialTime", () => {
|
|||
config.API.specialTime() +
|
||||
`?year=${year.value}&month=${month.value}&page=${page.value}&pageSize=${pageSize.value}&keyword=${filter.value}`
|
||||
)
|
||||
.then((res) => {
|
||||
let data = res.data.result;
|
||||
.then(async (res) => {
|
||||
let data = res.data.result.data;
|
||||
total.value = res.data.result.total;
|
||||
maxPage.value = await Math.ceil(total.value / pageSize.value);
|
||||
maxPage.value = maxPage.value < 1 ? 1 : maxPage.value;
|
||||
rows.value = [];
|
||||
data.map((e: any) => {
|
||||
rows.value.push({
|
||||
id: e.id,
|
||||
fullname: e.fullname,
|
||||
fullname: e.fullName,
|
||||
date: date2Thai(new Date(e.checkDate), false, true),
|
||||
dateFix: date2Thai(new Date(e.createdAt)),
|
||||
timeMorning:
|
||||
|
|
@ -299,7 +262,11 @@ export const useSpecialTimeStore = defineStore("LeaveSpecialTime", () => {
|
|||
optionStatus,
|
||||
fetchData,
|
||||
changePage,
|
||||
initialPagination,
|
||||
updatePagination,
|
||||
total,
|
||||
maxPage,
|
||||
year,
|
||||
page,
|
||||
pageSize,
|
||||
month,
|
||||
};
|
||||
});
|
||||
|
|
|
|||
|
|
@ -11,6 +11,8 @@ import config from "@/app.config";
|
|||
|
||||
import { useRouter } from "vue-router";
|
||||
import { identity } from "@fullcalendar/core/internal";
|
||||
|
||||
/**ตัวแปรที่ใช้ */
|
||||
const dataSpecialTime = useSpecialTimeStore();
|
||||
const $q = useQuasar(); // show dialog
|
||||
const mixin = useCounterMixin();
|
||||
|
|
@ -20,21 +22,14 @@ const modalUnapprove = ref(false);
|
|||
const modalApprove = ref(false);
|
||||
const detailData = ref<any>();
|
||||
const editCheck = ref<string>("");
|
||||
|
||||
const pagination = ref({
|
||||
// sortBy: "desc",
|
||||
descending: false,
|
||||
page: 1,
|
||||
rowsPerPage: 10,
|
||||
});
|
||||
|
||||
const dialogTitle = ref<string>("");
|
||||
const dialogDesc = ref<string>("");
|
||||
const name = ref<string>("");
|
||||
const id = ref<string>("");
|
||||
const reasonNote = ref<string>("");
|
||||
const dateDialog = ref<string>("");
|
||||
const dateFixDialog = ref<string>("");
|
||||
|
||||
/**ฟังก์ชั่นไม่อนุมัติ */
|
||||
const unapprove = async (fullname: string, personId: string) => {
|
||||
id.value = personId;
|
||||
dialogTitle.value = " ไม่อนุมัติการลงเวลาพิเศษของ" + fullname;
|
||||
|
|
@ -42,6 +37,9 @@ const unapprove = async (fullname: string, personId: string) => {
|
|||
modalUnapprove.value = true;
|
||||
// rejectData();
|
||||
};
|
||||
|
||||
/** function Model */
|
||||
//เปิด
|
||||
function openModal(
|
||||
data: any,
|
||||
check: string,
|
||||
|
|
@ -60,6 +58,7 @@ function openModal(
|
|||
}
|
||||
console.log(data);
|
||||
}
|
||||
//ปิด
|
||||
const closeDialog = () => {
|
||||
modalUnapprove.value = false;
|
||||
modalApprove.value = false;
|
||||
|
|
@ -94,63 +93,63 @@ const resetFilter = () => {
|
|||
}
|
||||
};
|
||||
|
||||
// paging
|
||||
const page = ref<number>(1);
|
||||
const pageSize = ref<number>(10);
|
||||
const filter = ref<string>(""); //search data table
|
||||
/**
|
||||
* ฟังก์ชั่น api เปลี่ยนหน้า
|
||||
* @param pageVal page
|
||||
* @param pageSizeVal pagesize
|
||||
*/
|
||||
async function changePage(pageVal: number, pageSizeVal: number) {
|
||||
// page.value = await pageVal;
|
||||
// pageSize.value = await pageSizeVal;
|
||||
// dataSpecialTime.fetchData();
|
||||
console.log("test");
|
||||
}
|
||||
// Pagination - initial pagination
|
||||
const initialPagination = ref<any>({
|
||||
sortBy: null,
|
||||
descending: false,
|
||||
page: 1,
|
||||
rowsPerPage: pageSize, // set ตาม page หลักส่งมา
|
||||
});
|
||||
const emit = defineEmits(["update:change-page"]);
|
||||
// Pagination - page & change page & get new data
|
||||
const currentPage = ref<number>(1);
|
||||
watch(
|
||||
[() => currentPage.value, () => initialPagination.value.rowsPerPage],
|
||||
async () => {
|
||||
dataSpecialTime.page = currentPage.value;
|
||||
await dataSpecialTime.fetchData();
|
||||
// emit(
|
||||
// "update:change-page",
|
||||
// currentPage.value,
|
||||
// initialPagination.value.rowsPerPage,
|
||||
// true
|
||||
// );
|
||||
}
|
||||
);
|
||||
// Pagination - update rowsPerPage
|
||||
async function updatePagination(newPagination: any) {
|
||||
currentPage.value = 1;
|
||||
dataSpecialTime.pageSize = initialPagination.value.rowsPerPage;
|
||||
dataSpecialTime.page = 1; // set current page เป็น 1 เสมอเมื่อเปลี่ยน per row
|
||||
}
|
||||
|
||||
/**Hook */
|
||||
onMounted(async () => {
|
||||
// fecthList([
|
||||
// {
|
||||
// id: "eefa2f4f-c507-4a42-8567-4fadb8dc1f50",
|
||||
// fullname: "นางสาวณัฐกา ชมสิน",
|
||||
// date: "2023-11-01 08:54",
|
||||
// dateFix: "2023-10-30",
|
||||
// startTimeMorning: "08:00",
|
||||
// endTimeMorning: "12:00",
|
||||
// startTimeAfternoon: "08:00",
|
||||
// endTimeAfternoon: "12:00",
|
||||
// status: "PENDING",
|
||||
// checkInStatus: "normal",
|
||||
// checkOutStatus: "late",
|
||||
// checkIn: "08:00",
|
||||
// checkOut: "12.00",
|
||||
// },
|
||||
// {
|
||||
// id: "00000000-0000-0000-0000-000000000000",
|
||||
// fullname: "นางสาวรัชภรณ์ ภักดี",
|
||||
// date: "2023-10-30 08:55",
|
||||
// dateFix: "2023-10-29",
|
||||
// startTimeMorning: "08:00",
|
||||
// endTimeMorning: "12:00",
|
||||
// startTimeAfternoon: null,
|
||||
// endTimeAfternoon: null,
|
||||
// status: "APPROVE",
|
||||
// checkInStatus: "normal",
|
||||
// checkOutStatus: "late",
|
||||
// checkIn: "08:00",
|
||||
// checkOut: "12.00",
|
||||
// },
|
||||
// {
|
||||
// id: "00000000-0000-0000-0000-000000000000",
|
||||
// fullname: "นางสาวภาพรรณ ลออ",
|
||||
// date: "2023-10-31 18:54",
|
||||
// dateFix: "2023-10-30",
|
||||
// startTimeMorning: null,
|
||||
// endTimeMorning: null,
|
||||
// startTimeAfternoon: "13:00",
|
||||
// endTimeAfternoon: "16:30",
|
||||
// status: "REJECT",
|
||||
// checkInStatus: "normal",
|
||||
// checkOutStatus: "late",
|
||||
// checkIn: "08:00",
|
||||
// checkOut: "12.00",
|
||||
// },
|
||||
// ]);
|
||||
dataSpecialTime.fetchData();
|
||||
console.log("test");
|
||||
await dataSpecialTime.fetchData();
|
||||
});
|
||||
|
||||
/** Function Date */
|
||||
const selectedDate = ref<string>("");
|
||||
const dateMonth = ref<any>({
|
||||
month: new Date().getMonth(),
|
||||
year: new Date().getFullYear(),
|
||||
});
|
||||
|
||||
const monthYearThai = (val: any) => {
|
||||
if (val == null) return "";
|
||||
else return monthYear2Thai(val.month, val.year);
|
||||
|
|
@ -244,13 +243,26 @@ const monthYearThai = (val: any) => {
|
|||
row-key="tb-list"
|
||||
flat
|
||||
bordered
|
||||
:paging="true"
|
||||
:paging="false"
|
||||
dense
|
||||
:pagination="dataSpecialTime.initialPagination"
|
||||
:visible-columns="dataSpecialTime.visibleColumns"
|
||||
:rows-per-page-options="[1, 10, 25, 50, 100]"
|
||||
@update:pagination="dataSpecialTime.updatePagination"
|
||||
:rows-per-page-options="[5, 10, 25, 50, 100]"
|
||||
v-model:pagination="initialPagination"
|
||||
@update:pagination="updatePagination"
|
||||
>
|
||||
<template v-slot:pagination="scope">
|
||||
ทั้งหมด {{ dataSpecialTime.total }} รายการ
|
||||
<q-pagination
|
||||
v-model="currentPage"
|
||||
active-color="primary"
|
||||
color="dark"
|
||||
:max-pages="5"
|
||||
size="sm"
|
||||
boundary-links
|
||||
direction-links
|
||||
:max="Number(dataSpecialTime.maxPage)"
|
||||
></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">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue