hrms-bangkok/hrms-user
7
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

แสดงปีปัจจุบัน แสดงตัวอย่างการลา

Browse source
This commit is contained in:
AnandaTon 2023-10-27 10:54:49 +07:00
parent 2920faf584
commit cb4850ec27
2 changed files with 213 additions and 228 deletions
Download patch file Download diff file Expand all files Collapse all files

435
src/modules/05_leave/componenst/Calendar.vue
View file

@ -1,214 +1,194 @@
<template>
<div class="q-mt-sm">
<div class="row q-gutter-sm q-pb-sm main-content">
<div class="demo-app-main">
<FullCalendar
ref="fullCalendar"
class="demo-app-calendar"
:options="calendarOptions"
>
<template v-slot:eventContent="arg">
<div class="row col-12 items-center no-wrap" :style="`background: + ${arg.event.color}`">
<!-- <b>{{ arg.timeText }}</b> -->
<div class="textHover col-10" @click="view(arg.event.title)">{{ 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>
</div>
</div>
<div class="row q-col-gutter-lg justify-end">
<div class="items-center row">
<q-icon size="10px" color="light-green" 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="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 class="q-mt-sm">
<div class="row q-gutter-sm q-pb-sm main-content">
<div class="demo-app-main">
<FullCalendar ref="fullCalendar" class="demo-app-calendar" :options="calendarOptions">
<template v-slot:eventContent="arg">
<div class="row col-12 items-center no-wrap" :style="`background: + ${arg.event.color}`">
<!-- <b>{{ arg.timeText }}</b> -->
<div class="textHover col-10" @click="view(arg.event.title)">{{ 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>
</div>
</div>
<div class="row q-col-gutter-lg justify-end">
<div class="items-center row">
<q-icon size="10px" color="light-green" 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="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>
<!-- 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>
<!-- 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>
<script setup lang="ts">
import { ref } from "vue";
import FullCalendar from "@fullcalendar/vue3";
import dayGridPlugin from "@fullcalendar/daygrid";
import { ref } from "vue"
import FullCalendar from "@fullcalendar/vue3"
import dayGridPlugin from "@fullcalendar/daygrid"
import type { CalendarOptions } from "@fullcalendar/core"
import timeGridPlugin from "@fullcalendar/timegrid"
import interactionPlugin from "@fullcalendar/interaction"
import allLocales from "@fullcalendar/core/locales-all"
import listPlugin from "@fullcalendar/list"
const fullCalendar = ref<InstanceType<typeof FullCalendar>>()
const calendarOptions = ref<CalendarOptions>({
plugins: [
dayGridPlugin,
timeGridPlugin,
interactionPlugin, // needed for dateClick
listPlugin,
],
buttonText: {
listYear: "รายการ",
dayGridMonth: "ปฏิทิน",
test: "เพิ่มวันหยุด",
},
headerToolbar: false,
initialView: "dayGridMonth",
initialEvents: [], // alternatively, use the `events` setting to fetch from a feed
selectable: true,
dayMaxEvents: true,
weekends: true,
locale: "th",
locales: allLocales,
expandRows: true,
nowIndicator: true,
height: "100%",
eventColor: "#fff",
eventTextColor: "#4A5568",
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" },
],
})
import timeGridPlugin from "@fullcalendar/timegrid";
import interactionPlugin from "@fullcalendar/interaction";
import allLocales from "@fullcalendar/core/locales-all";
import listPlugin from "@fullcalendar/list";
const fullCalendar = ref<InstanceType<typeof FullCalendar>>();
const calendarOptions = ref({
plugins: [
dayGridPlugin,
timeGridPlugin,
interactionPlugin, // needed for dateClick
listPlugin,
],
buttonText: {
listYear: "รายการ",
dayGridMonth: "ปฏิทิน",
test: "เพิ่มวันหยุด",
},
headerToolbar: null,
initialView: "dayGridMonth",
initialEvents: [], // alternatively, use the `events` setting to fetch from a feed
selectable: true,
dayMaxEvents: true,
weekends: true,
locale: "th",
locales: allLocales,
expandRows: true,
nowIndicator: true,
height: "100%",
eventColor: "#fff",
eventTextColor: "#4A5568",
eventBorderColor: "#50a5fc",
displayEventTime: false,
editable: true,
events: [
{ groupId: "3", title: "ลากิจส่วนตัว", start: "2023-09-10", allDay: true, status: 'done', color: '#E3FDDA' },
{ groupId: "2", title: "ลาป่วย", start: "2023-09-19", allDay: true, status: 'proceed', color: '#e4f3ff' },
{ groupId: "1", title: "ลาป่วย", start: "2023-09-20", allDay: true, status: 'new', color: '#FFF1CC' }
],
});
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 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 cancel = async (text: string) => {
title.value = text;
modalCancel.value = true;
modeCancel.value = true;
};
title.value = text
modalCancel.value = true
modeCancel.value = true
}
const view = async (text: string) => {
title.value = text;
modalCancel.value = true;
modeCancel.value = false;
};
title.value = text
modalCancel.value = true
modeCancel.value = false
}
</script>
<style scope lang="scss">
.main-content {
height: 65vh;
height: 65vh;
}
.color-main {
color: #18a259;
color: #18a259;
}
.padding-content {
padding: 10px;
padding: 10px;
}
.demo-app-main {
flex-grow: 1;
/* padding: 3em; */
flex-grow: 1;
/* padding: 3em; */
}
.fc {
/* the calendar root */
max-width: 1100px;
margin: 0 auto;
background-color: white;
border-radius: 10px;
/* the calendar root */
max-width: 1100px;
margin: 0 auto;
background-color: white;
border-radius: 10px;
}
.fc-day-today {
background-color: #F8F8F8 !important;
background-color: #f8f8f8 !important;
}
.fc-day-today .fc-daygrid-day-number {
display: flex;
justify-content: center;
align-items: center;
/* border: 2px solid #17a259; */
/* border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
/* border: 2px solid #17a259; */
/* border-radius: 50%;
height: 25px;
width: 25px;
font-weight: bold;
@ -217,122 +197,123 @@ const view = async (text: string) => {
}
.fc-day-today .fc-daygrid-day-frame {
padding: 5%;
padding: 5%;
}
.fc .fc-button-group > .fc-button {
color: black;
background-color: #fafafa;
border: none;
color: black;
background-color: #fafafa;
border: none;
}
.fc .fc-button-group > .fc-button:active {
color: white;
background-color: #22a15e;
border: none;
color: white;
background-color: #22a15e;
border: none;
}
.fc .fc-button-group > .fc-button.fc-button-active {
color: white;
background-color: #22a15e;
border: none;
color: white;
background-color: #22a15e;
border: none;
}
.fc-header-toolbar {
background-color: white;
padding: 0px 10px 0px 10px;
border-radius: 10px 10px 0px 0px;
background-color: white;
padding: 0px 10px 0px 10px;
border-radius: 10px 10px 0px 0px;
}
.fc .fc-scrollgrid-liquid > thead {
background-color: white;
background-color: white;
}
.dp-custom-cell {
border-radius: 50%;
border-radius: 50%;
}
.dp__today {
border: 1px solid var(--q-primary);
border: 1px solid var(--q-primary);
}
.dp__range_end,
.dp__range_start,
.dp__active_date {
background: var(--q-primary);
color: var(--dp-primary-text-color);
background: var(--q-primary);
color: var(--dp-primary-text-color);
}
.datepicker .q-field__label {
padding-left: 5px;
padding-left: 5px;
}
.datepicker .q-field__messages {
padding-left: 20px;
padding-left: 20px;
}
.datepicker .q-field__native {
padding-left: 5px;
color: var(--q-primary) !important;
padding-left: 5px;
color: var(--q-primary) !important;
}
.datepicker .q-field__prepend {
padding-left: 6px;
padding-left: 6px;
}
.datepicker .q-field__append {
padding-right: 6px;
padding-right: 6px;
}
.datepicker .q-field__after {
display: flex;
justify-content: flex-end;
align-items: center;
font-weight: 500;
display: flex;
justify-content: flex-end;
align-items: center;
font-weight: 500;
}
.fc .fc-popover {
z-index: 6000;
z-index: 6000;
}
.fc-direction-ltr .fc-daygrid-event.fc-event-end,
.fc-direction-rtl .fc-daygrid-event.fc-event-start {
cursor: pointer;
cursor: pointer;
}
.subName {
display: flex;
justify-content: flex-end;
align-items: center;
font-weight: 500;
display: flex;
justify-content: flex-end;
align-items: center;
font-weight: 500;
}
.subInput {
display: flex;
align-items: center;
display: flex;
align-items: center;
}
.fc-event {
overflow: hidden;
border-color: transparent !important;
font-weight: 500;
overflow: hidden;
border-color: transparent !important;
font-weight: 500;
}
.fc-event-main {
text-align: left;
padding:0px 5px;
text-align: left;
padding: 0px 5px;
}
.fc-direction-ltr .fc-daygrid-event.fc-event-end,
.fc-direction-rtl .fc-daygrid-event.fc-event-start {
padding-left: 0px;
padding-left: 0px;
}
.fc-theme-standard td, .fc-theme-standard th{
border: 1px solid #EBE9F1;
.fc-theme-standard td,
.fc-theme-standard th {
border: 1px solid #ebe9f1;
}
.textHover:hover{
color: #18a259;
.textHover:hover {
color: #18a259;
}
</style>

6
src/modules/05_leave/views/Main.vue
View file

@ -4,6 +4,7 @@
<div class="toptitle text-white col-12 row items-center">
<q-btn icon="mdi-arrow-left" unelevated round dense flat color="primary" class="q-mr-sm" @click="router.go(-1)" />
<div>รายการลา</div>
{{ dateMonth }}
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-11 row q-col-gutter-md">
@ -153,7 +154,10 @@ import type { DataDateMonthObject } from "@/modules/05_leave/interface/request/C
const router = useRouter()
const currentTab = ref<string>("calendar") //ระบุ tab ใช้งานอยู่ calendar=รายการ list=รายการ
const dateMonth = ref<number>(new Date().getFullYear())
const dateMonth = ref<DataDateMonthObject>({
month: new Date().getMonth(), // Months are 0-based in JavaScript, so we add 1 to get the actual month.
year: new Date().getFullYear(),
})
const dateYear = ref<number>(new Date().getFullYear())
const mixin = useCounterMixin() //เรียกฟังก์ชันกลาง