ปรับ code รายการลา
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490
parent
52bfaeb0e8
commit
7b8f8d705f
5 changed files with 168 additions and 248 deletions
|
|
@ -1,5 +1,5 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, reactive, onMounted, watch } from "vue";
|
||||
import { ref, onMounted, watch } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
import keycloak from "@/plugins/keycloak";
|
||||
import http from "@/plugins/http";
|
||||
|
|
@ -14,22 +14,18 @@ import interactionPlugin from "@fullcalendar/interaction";
|
|||
import allLocales from "@fullcalendar/core/locales-all";
|
||||
import listPlugin from "@fullcalendar/list";
|
||||
|
||||
/** import type*/
|
||||
import type { DataDateMonthObject } from "@/modules/05_leave/interface/request/Calendar.ts";
|
||||
import type {
|
||||
DataCalendar,
|
||||
LeaveType,
|
||||
FilterList,
|
||||
} from "@/modules/05_leave/interface/response/leave";
|
||||
|
||||
/** import componest*/
|
||||
import DialogDetail from "@/modules/05_leave/componenst/DialogDetail.vue";
|
||||
// import FormMain from "@/modules/05_leave/componenst/formDetail/formMain.vue";
|
||||
import FormLeave from "@/modules/05_leave/componenst/formDetail/formLeave.vue";
|
||||
import FormChildbirth from "@/modules/05_leave/componenst/formDetail/formChildbirth.vue";
|
||||
import FormHoliday from "@/modules/05_leave/componenst/formDetail/formHoliday.vue";
|
||||
import FormUpasom from "@/modules/05_leave/componenst/formDetail/formUpasom.vue";
|
||||
import FormHajj from "@/modules/05_leave/componenst/formDetail/formHajj.vue";
|
||||
import FormCheckSelect from "@/modules/05_leave/componenst/formDetail/formCheckSelect.vue";
|
||||
import FormStudy from "@/modules/05_leave/componenst/formDetail/formStudy.vue";
|
||||
import FormLeaveToTraining from "@/modules/05_leave/componenst/formDetail/formLeaveToTraining.vue";
|
||||
import FormLeaveToWorkInternational from "@/modules/05_leave/componenst/formDetail/formLeaveToWorkInternational.vue";
|
||||
import FormSpouse from "@/modules/05_leave/componenst/formDetail/formSpouse.vue";
|
||||
import FormVocationalRehabilitation from "@/modules/05_leave/componenst/formDetail/formVocationalRehabilitation.vue";
|
||||
|
||||
/** import stort*/
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
|
||||
const mixin = useCounterMixin();
|
||||
|
|
@ -40,16 +36,8 @@ const $q = useQuasar();
|
|||
|
||||
const emit = defineEmits(["update:dateYear"]);
|
||||
|
||||
/**
|
||||
* ตัวแปรทั้งหมด
|
||||
*/
|
||||
|
||||
const fullName = ref<string>("");
|
||||
const mainData = ref<any>([]);
|
||||
|
||||
const modalCancel = ref<boolean>(false);
|
||||
const modeCancel = ref<boolean>(true);
|
||||
const title = ref<string>("");
|
||||
const mainData = ref<DataCalendar[]>([]);
|
||||
|
||||
/**
|
||||
* Option ของปฏิทิน
|
||||
|
|
@ -78,40 +66,7 @@ const calendarOptions = ref<CalendarOptions>({
|
|||
eventBorderColor: "#50a5fc",
|
||||
displayEventTime: false,
|
||||
editable: true,
|
||||
events: [
|
||||
{
|
||||
groupId: "2",
|
||||
title: "ลาป่วย",
|
||||
start: "2023-11-24",
|
||||
end: "2023-11-25",
|
||||
|
||||
color: "#4CAF4F",
|
||||
textColor: "white",
|
||||
},
|
||||
{
|
||||
groupId: "4",
|
||||
title: "ลากิจ",
|
||||
start: "2023-11-15",
|
||||
allDay: true,
|
||||
color: "#4CAF4F",
|
||||
textColor: "white",
|
||||
},
|
||||
{
|
||||
groupId: "4",
|
||||
title: "นางสาวสมศรี ใจดี (ลากิจ)",
|
||||
start: "2023-11-21",
|
||||
end: "2023-11-23",
|
||||
allDay: true,
|
||||
color: "#ddd",
|
||||
},
|
||||
{
|
||||
groupId: "4",
|
||||
title: "นายสมชาย สุขใจ",
|
||||
start: "2023-11-21",
|
||||
allDay: true,
|
||||
color: "#ddd",
|
||||
},
|
||||
],
|
||||
events: [],
|
||||
});
|
||||
|
||||
const dateMonth = ref<DataDateMonthObject>({
|
||||
|
|
@ -119,18 +74,18 @@ const dateMonth = ref<DataDateMonthObject>({
|
|||
year: new Date().getFullYear(),
|
||||
});
|
||||
|
||||
/** function เรียกข้อมูล calendar*/
|
||||
async function fetchDataCalendar() {
|
||||
showLoader;
|
||||
showLoader();
|
||||
await http
|
||||
.post(config.API.leaveCalendar(), {
|
||||
year: dateMonth.value.year,
|
||||
})
|
||||
.then((res) => {
|
||||
console.log(res);
|
||||
mainData.value = res.data.result;
|
||||
|
||||
const double_name = [
|
||||
...new Set(mainData.value.map((item: any) => item.fullName)),
|
||||
...new Set(mainData.value.map((item: DataCalendar) => item.fullName)),
|
||||
];
|
||||
|
||||
for (let i = 1; i <= double_name.length; i++) {
|
||||
|
|
@ -147,11 +102,10 @@ async function fetchDataCalendar() {
|
|||
const data = mainData.value.filter(
|
||||
(e: any) => e.fullName === "นางสาวสาวิตรี ศรีสมัย"
|
||||
);
|
||||
console.log(data);
|
||||
|
||||
const event = data.map((e: any) => ({
|
||||
const event = data.map((e: DataCalendar) => ({
|
||||
id: e.id,
|
||||
title: e.leaveTypeName,
|
||||
title: `${e.fullName} (${e.leaveTypeName})`,
|
||||
start: e.leaveStartDate,
|
||||
end: e.leaveEndDate,
|
||||
allDay: true,
|
||||
|
|
@ -167,7 +121,8 @@ async function fetchDataCalendar() {
|
|||
});
|
||||
}
|
||||
|
||||
const leaveType = ref<any>();
|
||||
const leaveType = ref<LeaveType[]>([]);
|
||||
/** function เรียกประเภทการลา */
|
||||
async function fectOptionType() {
|
||||
await http
|
||||
.get(config.API.leaveType())
|
||||
|
|
@ -179,8 +134,6 @@ async function fectOptionType() {
|
|||
});
|
||||
}
|
||||
|
||||
/**Status Form การลา*/
|
||||
|
||||
/**
|
||||
* แปลง ปีและเดือนเป็นภาษาไทย
|
||||
* @param val datepicker แบบเลือกปีและเดือน
|
||||
|
|
@ -190,6 +143,7 @@ function monthYearThai(val: DataDateMonthObject) {
|
|||
else return monthYear2Thai(val.month, val.year);
|
||||
}
|
||||
|
||||
/** function อัปเดท Calendar */
|
||||
async function updateMonth() {
|
||||
await fetchDataCalendar();
|
||||
const calen = fullCalendar.value.getApi();
|
||||
|
|
@ -197,33 +151,25 @@ async function updateMonth() {
|
|||
calen.gotoDate(date);
|
||||
}
|
||||
|
||||
/**
|
||||
* ฟังก์ชั่นยกเลิก model
|
||||
* @param text
|
||||
*/
|
||||
async function cancel(text: string) {
|
||||
title.value = text;
|
||||
modalCancel.value = true;
|
||||
modeCancel.value = true;
|
||||
}
|
||||
|
||||
const modal = ref<boolean>(false);
|
||||
const leaveId = ref<string>("");
|
||||
|
||||
/**
|
||||
* ฟังก์ชั่นเปิด model
|
||||
* @param id
|
||||
* function openPopupDateail
|
||||
* @param id การลา
|
||||
*/
|
||||
async function onCilckview(id: string) {
|
||||
modal.value = true;
|
||||
leaveId.value = id;
|
||||
}
|
||||
|
||||
/** function closePopup*/
|
||||
async function onClickClose() {
|
||||
modal.value = false;
|
||||
}
|
||||
|
||||
// filter calendar left
|
||||
const filterLists = ref<any[]>([]);
|
||||
/** filter calendar left */
|
||||
const filterLists = ref<FilterList[]>([]);
|
||||
const filterVal = ref(["นางสาวสาวิตรี ศรีสมัย"]);
|
||||
|
||||
watch(
|
||||
|
|
@ -231,10 +177,10 @@ watch(
|
|||
() => {
|
||||
const eventData = filterVal.value.map((item: any) => {
|
||||
return mainData.value
|
||||
.filter((e: any) => e.fullName === item)
|
||||
.map((e: any) => ({
|
||||
.filter((e: DataCalendar) => e.fullName === item)
|
||||
.map((e) => ({
|
||||
id: e.id,
|
||||
title: e.leaveTypeName,
|
||||
title: `${e.fullName} (${e.leaveTypeName})`,
|
||||
start: e.leaveStartDate,
|
||||
end: e.leaveEndDate,
|
||||
allDay: true,
|
||||
|
|
@ -248,8 +194,6 @@ onMounted(async () => {
|
|||
if (keycloak.tokenParsed != null) {
|
||||
fullName.value = keycloak.tokenParsed.name;
|
||||
}
|
||||
console.log(fullName.value);
|
||||
|
||||
await fetchDataCalendar();
|
||||
await fectOptionType();
|
||||
});
|
||||
|
|
@ -257,12 +201,10 @@ onMounted(async () => {
|
|||
|
||||
<template>
|
||||
<div class="row">
|
||||
<!-- Filter ตามคนและประเภทการลา -->
|
||||
<div class="col-sm-12 col-md-3 q-mt-sm q-pr-sm">
|
||||
<q-card class="col-12">
|
||||
<div class="q-gutter-sm">
|
||||
<q-list bordered class="rounded-borders">
|
||||
<!-- <q-item-label header>User</q-item-label> -->
|
||||
<q-item
|
||||
v-for="(item, i) in filterLists"
|
||||
:key="i"
|
||||
|
|
@ -281,11 +223,6 @@ onMounted(async () => {
|
|||
</q-item>
|
||||
</q-list>
|
||||
</div>
|
||||
|
||||
<!-- show value filterVal -->
|
||||
<!-- <div class="q-px-sm q-mt-sm">
|
||||
Your selection is: <strong>{{ filterVal }}</strong>
|
||||
</div> -->
|
||||
</q-card>
|
||||
</div>
|
||||
|
||||
|
|
@ -341,22 +278,12 @@ onMounted(async () => {
|
|||
class="row col-12 items-center no-wrap"
|
||||
:style="`background: + ${arg.event.color}`"
|
||||
>
|
||||
<!-- <b>{{ arg.timeText }}</b> -->
|
||||
<div
|
||||
class="textHover col-10"
|
||||
@click="onCilckview(arg.event.id)"
|
||||
>
|
||||
{{ arg.event.title }}
|
||||
</div>
|
||||
<q-btn
|
||||
dense
|
||||
v-if="arg.event.groupId == 1"
|
||||
icon="mdi-close"
|
||||
flat
|
||||
round
|
||||
size="8px"
|
||||
@click="cancel(arg.event.title)"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</FullCalendar>
|
||||
|
|
@ -382,14 +309,6 @@ onMounted(async () => {
|
|||
/>
|
||||
<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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue