calendar รายการลา

This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490 2023-12-07 18:01:37 +07:00
parent 8eca4d1650
commit 6d12f50399
4 changed files with 160 additions and 256 deletions

View file

@ -22,4 +22,5 @@ export default {
leaveList: () => `${leave}/admin`, leaveList: () => `${leave}/admin`,
leaveListDelete: () => `${leave}/admin/delete`, leaveListDelete: () => `${leave}/admin/delete`,
leaveListById: (id: string) => `${leave}/admin/${id}`, leaveListById: (id: string) => `${leave}/admin/${id}`,
leaveCalendar: () => `${leave}/user/calendar`,
}; };

View file

@ -7,14 +7,22 @@ import timeGridPlugin from "@fullcalendar/timegrid";
import interactionPlugin from "@fullcalendar/interaction"; import interactionPlugin from "@fullcalendar/interaction";
import allLocales from "@fullcalendar/core/locales-all"; import allLocales from "@fullcalendar/core/locales-all";
import listPlugin from "@fullcalendar/list"; import listPlugin from "@fullcalendar/list";
import { useQuasar } from "quasar";
import { useCounterMixin } from "@/stores/mixin"; import http from "@/plugins/http";
import config from "@/app.config";
const mixin = useCounterMixin(); // import { useRouter } from "vue-router";
const { monthYear2Thai } = mixin;
import type { DataDateMonthObject } from "@/modules/09_leave/interface/response/leave"; 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 ของปฏ * Option ของปฏ
*/ */
@ -47,97 +55,110 @@ const calendarOptions = ref<CalendarOptions>({
eventBorderColor: "#50a5fc", eventBorderColor: "#50a5fc",
displayEventTime: false, displayEventTime: false,
editable: true, editable: true,
events: [ 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",
},
],
}); });
/** const dateMonth = ref<DataDateMonthObject>({
* วแปรทงหมด month: new Date().getMonth(),
*/ year: new Date().getFullYear(),
const modalCancel = ref(false); });
const title = ref(""); const mainData = ref<any>([]);
const location = ref("บ้าน");
const subject = ref("ลาป่วย"); async function fetchDataCalendar() {
const dateStart = ref("20 ส.ค. 2566"); showLoader();
const dateEnd = ref("21 ส.ค. 2566"); await http
const numDate = ref("20"); .post(config.API.leaveCalendar(), {
const place = ref("บ้าน"); year: dateMonth.value.year,
const phone = ref("000-00000000"); })
const reason = ref("ยกเลิกการลา"); .then((res) => {
const model = ref(null); mainData.value = res.data.result;
const modeCancel = ref(true);
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<any[]>([]);
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 () => { onMounted(async () => {
if (fullCalendar !== undefined) { await fetchDataCalendar();
const calen = fullCalendar.value.getApi(); // if (fullCalendar !== undefined) {
const date = new Date(dateMonth.value.year, dateMonth.value.month); // const calen = fullCalendar.value.getApi();
calen.gotoDate(date); // const date = new Date(dateMonth.value.year, dateMonth.value.month);
} // calen.gotoDate(date);
// }
}); });
function changCalendar() { async function changCalendar() {
const calen = fullCalendar.value.getApi(); await fetchDataCalendar();
const date = new Date(dateMonth.value.year, dateMonth.value.month);
calen.gotoDate(date);
} }
/** /**
@ -153,54 +174,11 @@ function changCalendar() {
* งกนยกเล model * งกนยกเล model
* @param text * @param text
*/ */
const cancel = async (text: string) => {
title.value = text;
modalCancel.value = true;
modeCancel.value = true;
};
/** /**
* งกนเป model * งกนเป model
* @param text * @param text
*/ */
const view = async (text: string) => {
title.value = text;
modalCancel.value = true;
modeCancel.value = false;
};
// filter calendar left
const filterLists = ref<any[]>([
{
id: "x1",
name: "นางสาววารุณี แต้มคู",
color: "green",
},
{
id: "x2",
name: "นางสาวสมศรี ใจดี",
color: "grey",
},
{
id: "x3",
name: "นายสมชาย สุขใจ",
color: "grey",
},
]);
const filterVal = ref(["x1"]);
const dateMonth = ref<DataDateMonthObject>({
month: new Date().getMonth(),
year: new Date().getFullYear(),
});
const dateYear = ref<number>(new Date().getFullYear());
const updateMonth = async (e: DataDateMonthObject) => {
if (e != null) {
dateYear.value = e.year;
changCalendar();
}
};
const monthYearThai = (val: DataDateMonthObject) => { const monthYearThai = (val: DataDateMonthObject) => {
if (val == null) return ""; if (val == null) return "";
@ -242,7 +220,7 @@ const monthYearThai = (val: DataDateMonthObject) => {
autoApply autoApply
month-picker month-picker
:enableTimePicker="false" :enableTimePicker="false"
@update:modelValue="updateMonth" @update:modelValue="changCalendar"
> >
<template #year="{ year }">{{ year + 543 }}</template> <template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{ <template #year-overlay-value="{ value }">{{
@ -278,60 +256,29 @@ const monthYearThai = (val: DataDateMonthObject) => {
class="row col-12 items-center no-wrap" class="row col-12 items-center no-wrap"
:style="`background: + ${arg.event.color}`" :style="`background: + ${arg.event.color}`"
> >
<!-- <b>{{ arg.timeText }}</b> --> <div
<div class="textHover col-10" @click="view(arg.event.title)"> class="textHover col-10"
@click="redirectToDetail(arg.event.id)"
>
{{ arg.event.title }} {{ arg.event.title }}
</div> </div>
<q-btn <q-tooltip>{{ arg.event.title }} </q-tooltip>
dense
v-if="arg.event.groupId == 1"
icon="mdi-close"
flat
round
size="8px"
@click="cancel(arg.event.title)"
/>
</div> </div>
</template> </template>
</FullCalendar> </FullCalendar>
<div class="row q-col-gutter-lg justify-end"> <div class="row q-col-gutter-sm">
<div class="items-center row"> <div
v-for="(item, index) in leaveStore.leaveType"
:key="index"
class="items-center col-3"
>
<q-icon <q-icon
size="10px" size="10px"
color="light-green"
name="mdi-circle" name="mdi-circle"
class="q-mr-sm" class="q-mr-xs"
:style="`color: ${leaveStore.colorType(item.id)}`"
/> />
<span class="text-caption text-grey-8">สถานะอน</span> <span class="text-caption">{{ item.name }}</span>
</div>
<div class="items-center row">
<q-icon
size="10px"
color="red-6"
name="mdi-circle"
class="q-mr-sm"
/>
<span class="text-caption text-grey-8">สถานะไมอน</span>
</div>
<div class="items-center row">
<q-icon
size="10px"
color="light-blue-14"
name="mdi-circle"
class="q-mr-sm"
/>
<span class="text-caption text-grey-8"
>สถานะอยระหวางดำเนนการ</span
>
</div>
<div class="items-center row">
<q-icon
size="10px"
color="orange"
name="mdi-circle"
class="q-mr-sm"
/>
<span class="text-caption text-grey-8">สถานะใหม</span>
</div> </div>
</div> </div>
</div> </div>
@ -339,84 +286,6 @@ const monthYearThai = (val: DataDateMonthObject) => {
</div> </div>
</div> </div>
</div> </div>
<!-- modal ขอยกเล/รายละเอยด -->
<q-dialog v-model="modalCancel" persistent>
<q-card :style="modeCancel == true ? 'min-width: 50%;' : 'min-width:30%'">
<q-card-section class="row items-center q-pa-sm">
<div v-if="modeCancel == false" class="text-bold q-pl-sm">
รายละเอยดของ{{ title }}
</div>
<div v-else class="text-bold q-pl-sm">ขอยกเล{{ title }}</div>
<q-space />
<q-btn
icon="close"
unelevated
round
dense
v-close-popup
style="color: #ff8080; background-color: #ffdede"
/>
</q-card-section>
<q-separator />
<q-card-section class="q-p-md row q-gutter-y-md">
<div flat :class="modeCancel == true ? 'col-xs-6 col-sm-6' : 'col-12'">
<div class="col-12 q-col-gutter-sm row items-center">
<div class="col-6 text-grey-7">เขยนท</div>
<div class="col-6 text-black">{{ location }}</div>
<div class="col-6 text-grey-7">เรองและเหตผลการลา</div>
<div class="col-6 text-black">{{ subject }}</div>
<div class="col-6 text-grey-7"> เดอน เรมต</div>
<div class="col-6 text-black">{{ dateStart }}</div>
<div class="col-6 text-grey-7"> เดอน นส</div>
<div class="col-6 text-black">{{ dateEnd }}</div>
<div class="col-6 text-grey-7">จำนวนวนทลา</div>
<div class="col-6 text-black">{{ numDate }}</div>
<div class="col-6 text-grey-7">สถานทดตอขณะลา</div>
<div class="col-6 text-black">{{ place }}</div>
<div class="col-6 text-grey-7">หมายเลขโทรศพท</div>
<div class="col-6 text-black">{{ phone }}</div>
</div>
</div>
<div flat class="col-xs-6 col-sm-6" v-if="modeCancel == true">
<q-input
v-model="reason"
type="textarea"
label="กรอกเหตุผล"
outlined
dense
/>
<q-file
outlined
v-model="model"
label="เลือกไฟล์เอกสารหลักฐาน"
class="q-mt-md"
use-chips
dense
>
<template v-slot:prepend>
<q-icon name="attach_file" />
</template>
</q-file>
</div>
</q-card-section>
<q-separator />
<q-card-section
class="row items-center q-pa-sm"
v-if="modeCancel == true"
>
<q-space />
<q-btn
label="ยืนยัน"
unelevated
color="secondary"
dense
class="q-px-md"
v-close-popup
/>
</q-card-section>
</q-card>
</q-dialog>
</template> </template>
<style scope lang="scss"> <style scope lang="scss">
@ -580,6 +449,6 @@ const monthYearThai = (val: DataDateMonthObject) => {
} }
.textHover:hover { .textHover:hover {
color: #18a259; color: #f3faf6;
} }
</style> </style>

View file

@ -103,6 +103,7 @@ async function fetchOption() {
.get(config.API.leaveType()) .get(config.API.leaveType())
.then((res) => { .then((res) => {
const data = res.data.result; const data = res.data.result;
leaveStore.leaveType = data;
optionTypeMain.value = [ optionTypeMain.value = [
{ id: "00000000-0000-0000-0000-000000000000", name: "ทั้งหมด" }, { id: "00000000-0000-0000-0000-000000000000", name: "ทั้งหมด" },
]; ];

View file

@ -23,6 +23,8 @@ export const useLeavelistDataStore = defineStore("leave", () => {
const columns = ref<QTableProps["columns"]>([]); const columns = ref<QTableProps["columns"]>([]);
const visibleColumns = ref<string[]>([]); const visibleColumns = ref<string[]>([]);
const leaveType = ref<any>([]);
/** /**
* fetchListLeave * fetchListLeave
* @param data Page * @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 { return {
/** ข้อมูล Main*/ /** ข้อมูล Main*/
tabMenu, tabMenu,
@ -157,5 +187,8 @@ export const useLeavelistDataStore = defineStore("leave", () => {
/** Function แปลงค่า */ /** Function แปลงค่า */
convertLeave, convertLeave,
convertLeaveDaytype, convertLeaveDaytype,
leaveType,
colorType,
}; };
}); });