fix Load การลา
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490
parent
3817416ba9
commit
ce94ea009a
5 changed files with 184 additions and 80 deletions
|
|
@ -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<DataDateMonthObject>({
|
|||
|
||||
/** 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<LeaveType[]>([]);
|
||||
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();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-md-3 q-mt-sm q-pr-sm row">
|
||||
<q-card class="col-12" flat bordered >
|
||||
<q-card class="col-12" flat bordered>
|
||||
<q-scroll-area style="height: 38vw">
|
||||
<div class="q-gutter-sm col-12">
|
||||
<q-list class="rounded-borders q-pt-sm" dense>
|
||||
|
|
|
|||
|
|
@ -65,15 +65,12 @@ async function fetchDataTable() {
|
|||
|
||||
/** function เรียกประเภทการลา */
|
||||
async function fectOptionType() {
|
||||
await http
|
||||
.get(config.API.leaveType())
|
||||
.then(async (res) => {
|
||||
leaveType.value = res.data.result;
|
||||
LeaveData.fetchLeaveType(res.data.result);
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
});
|
||||
const data = await LeaveData.fetchLeaveTypeData();
|
||||
if (!data) {
|
||||
return;
|
||||
}
|
||||
leaveType.value = data;
|
||||
LeaveData.fetchLeaveType(data);
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -95,25 +92,26 @@ async function onClickEdit(id: string) {
|
|||
router.push(`/leave/edit/${id}`);
|
||||
}
|
||||
|
||||
//เเจ้งเตือนลบข้อมูล
|
||||
function clickDelete(id: string) {
|
||||
dialogRemove($q, () => onClickDelete(id));
|
||||
}
|
||||
|
||||
/**
|
||||
* function ลบรายการ
|
||||
* @param id
|
||||
* ฟังก์ชันลบข้อมูลการลา
|
||||
* @param id รายการลาที่ต้องการลบ
|
||||
*/
|
||||
async function onClickDelete(id: string) {
|
||||
await http
|
||||
.delete(config.API.leaveUserId(id))
|
||||
.then(async (res) => {
|
||||
success($q, "ลบข้อมูลสำเร็จ");
|
||||
fetchDataTable();
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
});
|
||||
function clickDelete(id: string) {
|
||||
dialogRemove($q, async () => {
|
||||
showLoader();
|
||||
await http
|
||||
.delete(config.API.leaveUserId(id))
|
||||
.then(async () => {
|
||||
await fetchDataTable();
|
||||
success($q, "ลบข้อมูลสำเร็จ");
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/** function closePopup*/
|
||||
|
|
@ -170,8 +168,15 @@ function convert(val: any) {
|
|||
* เรียกฟังก์ชันทั้งหมดตอนเรียกใช้ไฟล์นี้
|
||||
*/
|
||||
onMounted(async () => {
|
||||
await fectOptionType();
|
||||
await fetchDataTable();
|
||||
try {
|
||||
showLoader();
|
||||
await fectOptionType();
|
||||
await fetchDataTable();
|
||||
} catch (error) {
|
||||
messageError($q, error);
|
||||
} finally {
|
||||
hideLoader();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
|
|
|
|||
|
|
@ -134,6 +134,8 @@ watch([() => currentPage.value, () => pagination.value.rowsPerPage], () => {
|
|||
</datepicker>
|
||||
<!-- ค้นหาข้อความใน table -->
|
||||
<q-select
|
||||
fill-input
|
||||
hide-selected
|
||||
outlined
|
||||
dense
|
||||
v-model="leaveStore.type"
|
||||
|
|
@ -173,6 +175,8 @@ watch([() => currentPage.value, () => pagination.value.rowsPerPage], () => {
|
|||
/> </template
|
||||
></q-select>
|
||||
<q-select
|
||||
fill-input
|
||||
hide-selected
|
||||
outlined
|
||||
dense
|
||||
v-model="leaveStore.status"
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ import type {
|
|||
import type { DataOption } from "../14_IDP/interface/Main";
|
||||
|
||||
const mixin = useCounterMixin();
|
||||
const { date2Thai, messageError, showLoader, hideLoader } = mixin;
|
||||
const { date2Thai, showLoader, hideLoader } = mixin;
|
||||
const type = ref<string>("00000000-0000-0000-0000-000000000000");
|
||||
const status = ref<string>("ALL");
|
||||
export const useLeaveStore = defineStore("Leave", () => {
|
||||
|
|
@ -27,6 +27,7 @@ export const useLeaveStore = defineStore("Leave", () => {
|
|||
const LeaveStatus = ref<string | null>("0");
|
||||
const fiscalYearyear = ref<Number | null>(new Date().getFullYear());
|
||||
const rows = ref<ListLeaveTable[]>([]);
|
||||
const leaveTypeData = ref<TypeLeave[]>([]);
|
||||
|
||||
/**
|
||||
* function เรียกข้อมูลรายการลา Table
|
||||
|
|
@ -134,10 +135,9 @@ export const useLeaveStore = defineStore("Leave", () => {
|
|||
* @param update อัพเดทค่า
|
||||
* @param refData ดาต้าที่ต้องการฟิลเตอร์
|
||||
*/
|
||||
function filterOption(val: any, update: Function, refData: string) {
|
||||
function filterOption(val: string, update: Function, refData: string) {
|
||||
switch (refData) {
|
||||
case "LeaveTypeOption":
|
||||
type.value = "";
|
||||
update(() => {
|
||||
typeOptions.value = typeOptionsMain.value.filter(
|
||||
(v: any) => v.name.indexOf(val) > -1
|
||||
|
|
@ -145,7 +145,6 @@ export const useLeaveStore = defineStore("Leave", () => {
|
|||
});
|
||||
break;
|
||||
case "LeaveStatusOption":
|
||||
status.value = "";
|
||||
update(() => {
|
||||
statusOptions.value = statusOptionsMain.value.filter(
|
||||
(v: any) => v.name.indexOf(val) > -1
|
||||
|
|
@ -403,6 +402,21 @@ export const useLeaveStore = defineStore("Leave", () => {
|
|||
restDayCurrentTotal.value = 0;
|
||||
}
|
||||
|
||||
/** ฟังก์ชันเรียกข้อมูลประเภทการลา */
|
||||
async function fetchLeaveTypeData() {
|
||||
if (leaveTypeData.value.length > 0) {
|
||||
return leaveTypeData.value;
|
||||
} else {
|
||||
try {
|
||||
const res = await http.get(config.API.leaveType());
|
||||
leaveTypeData.value = res.data.result;
|
||||
return leaveTypeData.value;
|
||||
} catch (error) {
|
||||
console.error("Fetch leave type error:", error);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
tabValue,
|
||||
typeOptions,
|
||||
|
|
@ -457,5 +471,7 @@ export const useLeaveStore = defineStore("Leave", () => {
|
|||
currentAddress,
|
||||
rangeOptions,
|
||||
converstType,
|
||||
|
||||
fetchLeaveTypeData,
|
||||
};
|
||||
});
|
||||
|
|
|
|||
|
|
@ -118,8 +118,11 @@ const columns = ref<QTableProps["columns"]>([
|
|||
},
|
||||
]);
|
||||
|
||||
const isloading = ref<boolean>(false);
|
||||
|
||||
/** function เรียกข้อมูลตารางสถิติการลา*/
|
||||
async function fetchStatsTable() {
|
||||
isloading.value = true;
|
||||
await http
|
||||
.get(config.API.leaveStats())
|
||||
.then((res) => {
|
||||
|
|
@ -168,9 +171,11 @@ async function fetchStatsTable() {
|
|||
leaveCountReject: e.leaveCountReject,
|
||||
leaveCountDelete: e.leaveCountDelete,
|
||||
}));
|
||||
isloading.value = false;
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
isloading.value = true;
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -210,7 +215,7 @@ onMounted(async () => {
|
|||
<div class="col-xs-12 col-sm-12 col-md-11 row">
|
||||
<!-- สถิติการลา -->
|
||||
<div class="col-12 row q-pb-sm">
|
||||
<q-card bordered class="col-12 row">
|
||||
<q-card bordered class="col-12 row" v-if="!isloading">
|
||||
<div class="row col-12 items-center q-px-md q-py-sm">
|
||||
<div class="text-weight-bold">สถิติการลา</div>
|
||||
<q-space />
|
||||
|
|
@ -230,12 +235,7 @@ onMounted(async () => {
|
|||
:key="item.text"
|
||||
>
|
||||
<div class="col-xs-12 col-sm-12">
|
||||
<q-card
|
||||
bordered
|
||||
flat
|
||||
class="col-12 row shadow-0 no-wrap"
|
||||
v-if="item.text === 'ลาพักผ่อน'"
|
||||
>
|
||||
<q-card bordered flat class="col-12 row shadow-0 no-wrap">
|
||||
<div class="col-xs-12 col-sm-8 row justify-center q-py-md">
|
||||
<div class="col-12 row items-center justify-center q-pb-sm">
|
||||
<q-knob
|
||||
|
|
@ -327,6 +327,91 @@ onMounted(async () => {
|
|||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
|
||||
<q-card bordered class="col-12 row q-px-md q-py-sm" v-else>
|
||||
<div class="row col-12 items-center q-px-md q-py-sm">
|
||||
<div class="text-weight-bold">สถิติการลา</div>
|
||||
<q-space />
|
||||
<q-skeleton type="QBtn" size="20px" style="width: 100px" />
|
||||
</div>
|
||||
<div
|
||||
bordered
|
||||
class="col-6 row justify-center q-px-md q-pb-md q-col-gutter-sm"
|
||||
>
|
||||
<div class="col-xs-12 col-sm-12">
|
||||
<q-card bordered flat class="col-12 row shadow-0 no-wrap">
|
||||
<div class="col-xs-12 col-sm-8 row justify-center q-py-md">
|
||||
<div class="col-12 row items-center justify-center q-pb-sm">
|
||||
<q-skeleton type="circle" size="60px" />
|
||||
|
||||
<div class="col-12 row items-center justify-center">
|
||||
<q-skeleton type="text" size="20px" style="width: 50px" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row gt-xs"><q-separator vertical /></div>
|
||||
<div class="col-xs-12 col-sm-4 gt-xs row">
|
||||
<div class="col-12 row text-dark text-body2 items-center">
|
||||
<div class="col-12 row q-pa-xs q-px-md row">
|
||||
<span class="text-grey-7 col-6">ได้รับ</span>
|
||||
<q-skeleton type="text" style="width: 50px" />
|
||||
</div>
|
||||
<div class="col-12"><q-separator /></div>
|
||||
<div class="col-12 row q-pa-xs q-px-md">
|
||||
<span class="text-grey-7 col-6">ใช้ไป</span>
|
||||
<q-skeleton type="text" style="width: 50px" />
|
||||
</div>
|
||||
<div class="col-12"><q-separator /></div>
|
||||
<div class="col-12 row q-pa-xs q-px-md">
|
||||
<span class="text-grey-7 col-6">คงเหลือ</span>
|
||||
<q-skeleton type="text" style="width: 50px" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 row">
|
||||
<div bordered class="col-12 row justify-center q-px-md q-pb-md">
|
||||
<div class="col-xs-12 col-sm-12 row">
|
||||
<div class="col-12 row">
|
||||
<q-card
|
||||
bordered
|
||||
flat
|
||||
class="shadow-0 col-12 fit row items-center q-px-lg"
|
||||
>
|
||||
<div class="text-subtitle2 col-4">
|
||||
<q-skeleton type="text" style="width: 50px" />
|
||||
</div>
|
||||
<div class="text-subtitle2 col-8 row">
|
||||
<span class="text-grey-7 q-pr-md">ใช้ไป</span>
|
||||
<q-skeleton type="text" style="width: 50px" />
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div bordered class="col-12 row justify-center q-px-md q-pb-md">
|
||||
<div class="col-xs-12 col-sm-12 row">
|
||||
<div class="col-12 row">
|
||||
<q-card
|
||||
bordered
|
||||
flat
|
||||
class="shadow-0 col-12 fit row items-center q-px-lg"
|
||||
>
|
||||
<div class="text-subtitle2 col-4">
|
||||
<q-skeleton type="text" style="width: 50px" />
|
||||
</div>
|
||||
<div class="text-subtitle2 col-8 row">
|
||||
<span class="text-grey-7 q-pr-md">ใช้ไป</span>
|
||||
<q-skeleton type="text" style="width: 50px" />
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
|
||||
<div class="row col-12">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue