diff --git a/src/modules/09_leave/stores/SpecialTimeStore.ts b/src/modules/09_leave/stores/SpecialTimeStore.ts index 9578387b0..0735dcdaa 100644 --- a/src/modules/09_leave/stores/SpecialTimeStore.ts +++ b/src/modules/09_leave/stores/SpecialTimeStore.ts @@ -26,33 +26,6 @@ export const useSpecialTimeStore = defineStore("LeaveSpecialTime", () => { const selectDate = ref(new Date()); const fiscalYear = ref("0"); const DataMainOrig = ref([]); // ข้อมูลหลักดั้งเดิม - // 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([]); // ข้อมูลเปลี่ยนแปลง const DataMain = (val: DataRows[]) => (DataMainOrig.value = val); const DataUpdate = (filterYear: string) => { @@ -68,15 +41,16 @@ export const useSpecialTimeStore = defineStore("LeaveSpecialTime", () => { const year = ref(2023); const month = ref(11); const page = ref(1); + const total = ref(0); const pageSize = ref(10); const filter = ref(""); //search data table - + const maxPage = ref(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({ @@ -86,21 +60,6 @@ export const useSpecialTimeStore = defineStore("LeaveSpecialTime", () => { // rowsPerPage: pageSize, }); - // Pagination - page & change page & get new data - // const currentPage = ref(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, }; }); diff --git a/src/modules/09_leave/views/SpecialTimeMain.vue b/src/modules/09_leave/views/SpecialTimeMain.vue index d74bc1100..42021a04e 100644 --- a/src/modules/09_leave/views/SpecialTimeMain.vue +++ b/src/modules/09_leave/views/SpecialTimeMain.vue @@ -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(); const editCheck = ref(""); - -const pagination = ref({ - // sortBy: "desc", - descending: false, - page: 1, - rowsPerPage: 10, -}); - const dialogTitle = ref(""); const dialogDesc = ref(""); const name = ref(""); const id = ref(""); -const reasonNote = ref(""); const dateDialog = ref(""); const dateFixDialog = ref(""); + +/**ฟังก์ชั่นไม่อนุมัติ */ 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(1); +const pageSize = ref(10); +const filter = ref(""); //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({ + 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(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(""); const dateMonth = ref({ 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" > +