From 6d12f503991e160d143f62253688fef304630a6a Mon Sep 17 00:00:00 2001 From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" Date: Thu, 7 Dec 2023 18:01:37 +0700 Subject: [PATCH] =?UTF-8?q?calendar=20=E0=B8=A3=E0=B8=B2=E0=B8=A2=E0=B8=81?= =?UTF-8?q?=E0=B8=B2=E0=B8=A3=E0=B8=A5=E0=B8=B2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/09_leave/api.leave.ts | 1 + .../09_leave/components/2_Leave/Calendar.vue | 381 ++++++------------ .../components/2_Leave/ToolBarLeave.vue | 1 + src/modules/09_leave/stores/LeaveStore.ts | 33 ++ 4 files changed, 160 insertions(+), 256 deletions(-) diff --git a/src/api/09_leave/api.leave.ts b/src/api/09_leave/api.leave.ts index 764503896..f2c977ef1 100644 --- a/src/api/09_leave/api.leave.ts +++ b/src/api/09_leave/api.leave.ts @@ -22,4 +22,5 @@ export default { leaveList: () => `${leave}/admin`, leaveListDelete: () => `${leave}/admin/delete`, leaveListById: (id: string) => `${leave}/admin/${id}`, + leaveCalendar: () => `${leave}/user/calendar`, }; diff --git a/src/modules/09_leave/components/2_Leave/Calendar.vue b/src/modules/09_leave/components/2_Leave/Calendar.vue index 1190e2ab2..93f6d07e9 100644 --- a/src/modules/09_leave/components/2_Leave/Calendar.vue +++ b/src/modules/09_leave/components/2_Leave/Calendar.vue @@ -7,14 +7,22 @@ import timeGridPlugin from "@fullcalendar/timegrid"; import interactionPlugin from "@fullcalendar/interaction"; import allLocales from "@fullcalendar/core/locales-all"; import listPlugin from "@fullcalendar/list"; - -import { useCounterMixin } from "@/stores/mixin"; - -const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง -const { monthYear2Thai } = mixin; +import { useQuasar } from "quasar"; +import http from "@/plugins/http"; +import config from "@/app.config"; +import { useRouter } from "vue-router"; import type { DataDateMonthObject } from "@/modules/09_leave/interface/response/leave"; +import { useCounterMixin } from "@/stores/mixin"; +import { useLeavelistDataStore } from "@/modules/09_leave/stores/LeaveStore"; + +const leaveStore = useLeavelistDataStore(); +const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง +const { showLoader, hideLoader, messageError, monthYear2Thai } = mixin; + +const $q = useQuasar(); +const router = useRouter(); /** * Option ของปฏิทิน */ @@ -47,97 +55,110 @@ const calendarOptions = ref({ eventBorderColor: "#50a5fc", displayEventTime: false, editable: true, - events: [ - { - groupId: "3", - title: "ลากิจส่วนตัว", - start: "2023-10-10", - allDay: true, - status: "done", - color: "#E3FDDA", - }, - { - groupId: "3", - title: "ลากิจส่วนตัว", - start: "2023-11-10", - allDay: true, - status: "done", - color: "#E3FDDA", - }, - { - groupId: "3", - title: "ลากิจส่วนตัว", - start: "2023-10-11", - allDay: true, - status: "done", - color: "#E3FDDA", - }, - { - groupId: "3", - title: "ลากิจส่วนตัว", - start: "2023-10-12", - allDay: true, - status: "done", - color: "#E3FDDA", - }, - { - groupId: "3", - title: "ลากิจส่วนตัว", - start: "2023-10-13", - allDay: true, - status: "done", - color: "#E3FDDA", - }, - { - groupId: "2", - title: "ลาป่วย", - start: "2023-10-19", - allDay: true, - status: "proceed", - color: "#e4f3ff", - }, - { - groupId: "1", - title: "ลาป่วย", - start: "2023-10-20", - allDay: true, - status: "new", - color: "#FFF1CC", - }, - ], + events: [], }); -/** - * ตัวแปรทั้งหมด - */ -const modalCancel = ref(false); -const title = ref(""); -const location = ref("บ้าน"); -const subject = ref("ลาป่วย"); -const dateStart = ref("20 ส.ค. 2566"); -const dateEnd = ref("21 ส.ค. 2566"); -const numDate = ref("20"); -const place = ref("บ้าน"); -const phone = ref("000-00000000"); -const reason = ref("ยกเลิกการลา"); -const model = ref(null); -const modeCancel = ref(true); +const dateMonth = ref({ + month: new Date().getMonth(), + year: new Date().getFullYear(), +}); +const mainData = ref([]); + +async function fetchDataCalendar() { + showLoader(); + await http + .post(config.API.leaveCalendar(), { + year: dateMonth.value.year, + }) + .then((res) => { + mainData.value = res.data.result; + + const double_name = [ + ...new Set(mainData.value.map((item: any) => item.fullName)), + ]; + + for (let i = 1; i <= double_name.length; i++) { + filterLists.value = []; + const name = double_name[i - 1]; + const filterName = { + id: name, + name: name, + color: name === "นางสาวสาวิตรี ศรีสมัย" ? "green" : "grey", + }; + filterLists.value.push(filterName); + } + + const data = mainData.value.filter( + (e: any) => e.fullName === "นางสาวสาวิตรี ศรีสมัย" + ); + + const event = data.map((e: any) => ({ + id: e.id, + title: `${e.fullName} (${e.leaveTypeName}) `, + start: e.leaveStartDate, + end: e.leaveEndDate, + allDay: true, + color: leaveStore.colorType(e.leaveTypeId), + textColor: "black", + })); + console.log(event); + + calendarOptions.value.events = event; + }) + + .catch((err) => { + messageError($q, err); + }) + .finally(() => { + const calen = fullCalendar.value.getApi(); + const date = new Date(dateMonth.value.year, dateMonth.value.month); + calen.gotoDate(date); + hideLoader(); + }); +} + +// filter calendar left +const filterLists = ref([]); +const filterVal = ref(["นางสาวสาวิตรี ศรีสมัย"]); + +watch( + () => filterVal.value, + () => { + const eventData = filterVal.value.map((item: any) => { + return mainData.value + .filter((e: any) => e.fullName === item) + .map((e: any) => ({ + id: e.id, + title: `${e.fullName} (${e.leaveTypeName}) `, + start: e.leaveStartDate, + end: e.leaveEndDate, + color: leaveStore.colorType(e.leaveTypeId), + textColor: "black", + allDay: true, + })); + }); + calendarOptions.value.events = eventData[0]; + } +); + +function redirectToDetail(id: string) { + router.push(`leave/detail/${id}`); +} /** * เรียกฟังก์ชันทั้งหมดตอนเรียกใช้ไฟล์นี้ */ onMounted(async () => { - if (fullCalendar !== undefined) { - const calen = fullCalendar.value.getApi(); - const date = new Date(dateMonth.value.year, dateMonth.value.month); - calen.gotoDate(date); - } + await fetchDataCalendar(); + // if (fullCalendar !== undefined) { + // const calen = fullCalendar.value.getApi(); + // const date = new Date(dateMonth.value.year, dateMonth.value.month); + // calen.gotoDate(date); + // } }); -function changCalendar() { - const calen = fullCalendar.value.getApi(); - const date = new Date(dateMonth.value.year, dateMonth.value.month); - calen.gotoDate(date); +async function changCalendar() { + await fetchDataCalendar(); } /** @@ -153,54 +174,11 @@ function changCalendar() { * ฟังก์ชั่นยกเลิก model * @param text */ -const cancel = async (text: string) => { - title.value = text; - modalCancel.value = true; - modeCancel.value = true; -}; + /** * ฟังก์ชั่นเปิด model * @param text */ -const view = async (text: string) => { - title.value = text; - modalCancel.value = true; - modeCancel.value = false; -}; - -// filter calendar left -const filterLists = ref([ - { - id: "x1", - name: "นางสาววารุณี แต้มคู", - color: "green", - }, - { - id: "x2", - name: "นางสาวสมศรี ใจดี", - color: "grey", - }, - { - id: "x3", - name: "นายสมชาย สุขใจ", - color: "grey", - }, -]); -const filterVal = ref(["x1"]); - -const dateMonth = ref({ - month: new Date().getMonth(), - year: new Date().getFullYear(), -}); - -const dateYear = ref(new Date().getFullYear()); -const updateMonth = async (e: DataDateMonthObject) => { - if (e != null) { - dateYear.value = e.year; - - changCalendar(); - } -}; const monthYearThai = (val: DataDateMonthObject) => { if (val == null) return ""; @@ -242,7 +220,7 @@ const monthYearThai = (val: DataDateMonthObject) => { autoApply month-picker :enableTimePicker="false" - @update:modelValue="updateMonth" + @update:modelValue="changCalendar" > -
-
+
+
- สถานะอนุมัติ -
-
- - สถานะไม่อนุมัติ -
-
- - สถานะอยู่ระหว่างดำเนินการ -
-
- - สถานะใหม่ + {{ item.name }}
@@ -339,84 +286,6 @@ const monthYearThai = (val: DataDateMonthObject) => {
- - - - - -
- รายละเอียดของ{{ title }} -
-
ขอยกเลิก{{ title }}
- - - - - -
-
-
เขียนที่
-
{{ location }}
-
เรื่องและเหตุผลการลา
-
{{ subject }}
-
วัน เดือน ปีเริ่มต้น
-
{{ dateStart }}
-
วัน เดือน ปีสิ้นสุด
-
{{ dateEnd }}
-
จำนวนวันที่ลา
-
{{ numDate }}
-
สถานที่ติดต่อขณะลา
-
{{ place }}
-
หมายเลขโทรศัพท์
-
{{ phone }}
-
-
-
- - - - -
- - - - - - - - diff --git a/src/modules/09_leave/components/2_Leave/ToolBarLeave.vue b/src/modules/09_leave/components/2_Leave/ToolBarLeave.vue index 63bef1b53..df13a7ccc 100644 --- a/src/modules/09_leave/components/2_Leave/ToolBarLeave.vue +++ b/src/modules/09_leave/components/2_Leave/ToolBarLeave.vue @@ -103,6 +103,7 @@ async function fetchOption() { .get(config.API.leaveType()) .then((res) => { const data = res.data.result; + leaveStore.leaveType = data; optionTypeMain.value = [ { id: "00000000-0000-0000-0000-000000000000", name: "ทั้งหมด" }, ]; diff --git a/src/modules/09_leave/stores/LeaveStore.ts b/src/modules/09_leave/stores/LeaveStore.ts index 25cbb2b39..c4073fa35 100644 --- a/src/modules/09_leave/stores/LeaveStore.ts +++ b/src/modules/09_leave/stores/LeaveStore.ts @@ -23,6 +23,8 @@ export const useLeavelistDataStore = defineStore("leave", () => { const columns = ref([]); const visibleColumns = ref([]); + const leaveType = ref([]); + /** * ฟังก์ชั่น fetchListLeave * @param data รับข้อมูลจาก Page @@ -141,6 +143,34 @@ export const useLeavelistDataStore = defineStore("leave", () => { } } + function colorType(val: string) { + const dataType = leaveType.value.find((item: any) => item.id === val); + switch (dataType.code) { + case "LV-001": + return "#FFD1D1"; // Light Red + case "LV-002": + return "#C8E6C9"; // Light Green + case "LV-003": + return "#BBDEFB"; // Light Blue + case "LV-004": + return "#E1BEE7"; // Light Purple + case "LV-005": + return "#DCEDC8"; // Light Lime + case "LV-006": + return "#FFE0B2"; // Light Orange + case "LV-007": + return "#FFECB3"; // Light Amber + case "LV-008": + return "#CFD8DC"; // Light Blue Grey + case "LV-009": + return "#FFCCBC"; // Light Deep Orange + case "LV-010": + return "#FFF9C4"; // Light Amber Lighten + case "LV-011": + return "#B2DFDB"; // Light Teal + } + } + return { /** ข้อมูล Main*/ tabMenu, @@ -157,5 +187,8 @@ export const useLeavelistDataStore = defineStore("leave", () => { /** Function แปลงค่า */ convertLeave, convertLeaveDaytype, + + leaveType, + colorType, }; });