From ce94ea009a14d1058286e5d51d0342aab05c262c Mon Sep 17 00:00:00 2001 From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" Date: Mon, 16 Jun 2025 11:15:31 +0700 Subject: [PATCH] =?UTF-8?q?fix=20Load=20=E0=B8=81=E0=B8=B2=E0=B8=A3?= =?UTF-8?q?=E0=B8=A5=E0=B8=B2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/modules/05_leave/components/Calendar.vue | 76 +++++++-------- src/modules/05_leave/components/ListView.vue | 61 ++++++------ src/modules/05_leave/components/Table.vue | 4 + src/modules/05_leave/store.ts | 24 ++++- src/modules/05_leave/views/Main.vue | 99 ++++++++++++++++++-- 5 files changed, 184 insertions(+), 80 deletions(-) diff --git a/src/modules/05_leave/components/Calendar.vue b/src/modules/05_leave/components/Calendar.vue index 67c483e..7150f73 100644 --- a/src/modules/05_leave/components/Calendar.vue +++ b/src/modules/05_leave/components/Calendar.vue @@ -6,6 +6,7 @@ import http from "@/plugins/http"; import config from "@/app.config"; import { tokenParsed } from "@/plugins/auth"; import { useCounterMixin } from "@/stores/mixin"; +import { useLeaveStore } from "@/modules/05_leave/store"; import FullCalendar from "@fullcalendar/vue3"; import dayGridPlugin from "@fullcalendar/daygrid"; @@ -23,6 +24,7 @@ import type { import DialogDetail from "@/modules/05_leave/components/DialogDetail.vue"; const $q = useQuasar(); +const store = useLeaveStore(); const mixin = useCounterMixin(); const { showLoader, hideLoader, messageError, monthYear2Thai } = mixin; const emit = defineEmits(["update:dateYear"]); @@ -74,7 +76,6 @@ const dateMonth = ref({ /** function เรียกข้อมูล calendar*/ async function fetchDataCalendar() { - showLoader(); await http .post(config.API.leaveCalendar(), { year: dateMonth.value.year, @@ -118,9 +119,6 @@ async function fetchDataCalendar() { }) .catch((err) => { messageError($q, err); - }) - .finally(() => { - hideLoader(); }); } @@ -128,7 +126,6 @@ async function fetchDataCalendar() { * fetch วันหยุดในปฏิทิน */ async function fetchData() { - showLoader(); await http .get( config.API.listHolidayHistoryYearMonth( @@ -138,7 +135,6 @@ async function fetchData() { ) .then((res) => { const dataNormal = res.data.result.normal; - const dataSixDays = res.data.result.sixDays; const data = dataNormal; const event = data.map((e: any) => ({ id: e.id, @@ -155,23 +151,9 @@ async function fetchData() { ...calendarOptions.value.events, ...event, ]; - // const dataSix = dataSixDays - // const eventSix = dataSix.map((e: any) => ({ - // id: e.id, - // title: `${e.name} `, - // start: e.holidayDate, - // end: new Date(new Date(e.holidayDate).setHours(23, 59, 59)).toISOString(), - // allDay: e.holidayDate === e.holidayDate ? true : false, - // color: "#FFE5CC", - // textColor: "#FF8000", - // })) - // calendarOptions.value.events = [...calendarOptions.value.events, ...eventSix] }) .catch((e) => { messageError($q, e); - }) - .finally(async () => { - hideLoader(); }); } @@ -184,14 +166,11 @@ function convertKeycloakId(id: any) { /** function เรียกประเภทการลา */ const leaveType = ref([]); async function fectOptionType() { - await http - .get(config.API.leaveType()) - .then(async (res) => { - leaveType.value = res.data.result; - }) - .catch((err) => { - messageError($q, err); - }); + const data = await store.fetchLeaveTypeData(); + if (!data) { + return; + } + leaveType.value = data; } /** @@ -205,11 +184,17 @@ function monthYearThai(val: DataDateMonthObject) { /** function อัปเดท Calendar */ async function updateMonth() { - await fetchDataCalendar(); - await fetchData(); - const calen = fullCalendar.value.getApi(); - const date = new Date(dateMonth.value.year, dateMonth.value.month); - calen.gotoDate(date); + try { + await fetchDataCalendar(); + await fetchData(); + const calen = fullCalendar.value.getApi(); + const date = new Date(dateMonth.value.year, dateMonth.value.month); + calen.gotoDate(date); + } catch (error) { + messageError($q, error); + } finally { + hideLoader(); + } } /** @@ -226,10 +211,11 @@ async function onClickClose() { modal.value = false; } -/**** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่Calendar */ +/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่Calendar */ watch( () => filterVal.value, async () => { + showLoader(); const eventData = filterVal.value.map((item: any) => { return mainData.value .filter( @@ -250,24 +236,32 @@ watch( const allEventData = [].concat(...eventData); calendarOptions.value.events = allEventData; await fetchData(); + hideLoader(); } ); /**Hook */ onMounted(async () => { - const user = await tokenParsed(); - keycloakId.value = await (user ? user.sub : ""); - filterVal.value.push(keycloakId.value); - await fetchDataCalendar(); - await fetchData(); - await fectOptionType(); + try { + showLoader(); + // เรียกข้อมูล keycloakId + const user = await tokenParsed(); + keycloakId.value = await (user ? user.sub : ""); + filterVal.value.push(keycloakId.value); + await Promise.all([fetchDataCalendar(), fectOptionType()]); + await fetchData(); + } catch (error) { + messageError($q, error); + } finally { + hideLoader(); + } });