hrms-user/src/modules/05_leave/views/Main.vue

<template>
	<div class="col-12 row justify-center">
		<div class="col-xs-12 col-sm-12 col-md-11">
			<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>
			</div>
		</div>
		<div class="col-xs-12 col-sm-12 col-md-11 row q-col-gutter-md">
			<div class="row col-12 q-col-gutter-sm">
				<div class="col-xs-12 col-sm-9 col-md-9 row">
					<q-card bordered class="q-pa-md col-12">
						<div class="row col-12">
							<div class="row items-center">
								<!-- filter เลือกเดือนปี -->
								<datepicker v-model="dateMonth" :locale="'th'" autoApply month-picker :enableTimePicker="false" v-if="currentTab === 'calendar'">
									<template #year="{ year }">{{ year + 543 }}</template>
									<template #year-overlay-value="{ value }">{{ parseInt(value + 543) }}</template>
									<template #trigger>
										<q-input :model-value="monthYearThai(dateMonth)" dense outlined hide-bottom-space style="width: 130px">
											<template v-slot:prepend>
												<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
											</template>
										</q-input>
									</template>
								</datepicker>

								<!-- filter เลือกปี -->
								<datepicker v-model="dateYear" :locale="'th'" autoApply year-picker :enableTimePicker="false" v-if="currentTab === 'list'">
									<template #year="{ year }">{{ year + 543 }}</template>
									<template #year-overlay-value="{ value }">{{ parseInt(value + 543) }}</template>
									<template #trigger>
										<q-input :model-value="dateYear + 543" dense outlined style="width: 100px" hide-bottom-space>
											<template v-slot:prepend>
												<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
											</template>
										</q-input>
									</template>
								</datepicker>
								<div class="q-ml-sm">
									<!-- icon เพิ่มวันหยุด -->
									<q-btn round dense flat size="13px" class="q-px-sm" @click="addAbsence">
										<q-icon name="mdi-plus" size="22px" color="primary" />
										<q-tooltip>ยื่นใบลา</q-tooltip>
									</q-btn>
								</div>
							</div>
							<q-space />
							<div class="justify-center row items-center">
								<!-- tab รูปแบบแสดงวันหยุด ปฏิทินกับรายการ -->
								<q-tabs v-model="currentTab" indicator-color="transparent" align="left" active-color="activetab" class="text-nativetab" inline-label dense>
									<q-btn
										name="calendar"
										round
										size="12px"
										flat
										icon="mdi-calendar-month"
										@click="currentTab = 'calendar'"
										:color="currentTab == 'calendar' ? 'primary' : 'grey-6'"
										class="q-mr-sm"
									>
										<q-tooltip>ปฏิทิน</q-tooltip>
									</q-btn>
									<q-separator vertical inset />
									<q-btn
										name="list"
										round
										size="12px"
										flat
										icon="mdi-format-list-bulleted"
										@click="currentTab = 'list'"
										:color="currentTab == 'list' ? 'primary' : 'grey-6'"
										class="q-ml-sm"
									>
										<q-tooltip>รายการ</q-tooltip>
									</q-btn>
								</q-tabs>
							</div>
						</div>
						<div class="col-12">
							<subCalendarComponent v-if="currentTab === 'calendar'" />
						</div>

						<div class="col-12">
							<subListCalendarComponent v-if="currentTab === 'list'" />
						</div>
					</q-card>
				</div>
				<div class="col-xs-12 col-sm-3 col-md-3 row">
					<q-card bordered class="col-12 row caedNone">
						<div class="col-12 row">
							<q-card class="row col-12 items-center q-px-md q-py-sm">
								<div class="text-weight-bold">สถิติการลา</div>
								<q-space />
								<q-btn dense flat class="text-blue" icon="mdi-chart-line-variant" @click="data = true" label="ตารางสถิติการลา" />
							</q-card>
							<div bordered class="col-12 row justify-center q-px-md q-pb-md" v-for="(item, index) in itemPie" :key="index">
								<q-card bordered flat class="col-12 row q-pt-md justify-center shadow-0">
									<q-knob readonly v-model="item.value" show-value size="70px" :thickness="0.15" track-color="grey-3" :class="`${item.color}`">
										<span class="text-subtitle2 text-weight-bold">{{ item.value }}%</span>
									</q-knob>
									<div class="col-12 text-center text-weight-medium q-py-xs">
										{{ item.text }}
									</div>
									<div class="col-12 row bg-grey-1 no-wrap text-dark text-body2 items-center borderTop">
										<div class="col-4 column q-pa-xs text-center">
											<span class="text-weight-bold">{{ item.all }}</span>
											<span class="text-grey-7 text-caption">ทั้งหมด</span>
										</div>
										<q-separator vertical />
										<div class="col-4 column q-pa-xs text-center">
											<span class="text-weight-bold">{{ item.use }}</span>
											<span class="text-grey-7 text-caption">ใช้ไป</span>
										</div>
										<q-separator vertical />
										<div class="col-4 column q-pa-xs text-center">
											<span class="text-weight-bold">{{ item.remain }}</span>
											<span class="text-grey-7 text-caption">คงเหลือ</span>
										</div>
									</div>
								</q-card>
							</div>
						</div>
					</q-card>
				</div>
			</div>
		</div>
	</div>
	<!-- modal ตารางสถิติการลา -->
	<q-dialog v-model="data" persistent>
		<q-card style="min-width: 85%">
			<q-card-section class="row items-center q-pa-sm">
				<div class="text-bold q-pl-sm">ตารางสถิติการลา</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-table flat bordered dense :rows="rows" :columns="columns" row-key="name" class="col-12" hide-bottom v-model:pagination="pagination" />
			</q-card-section>
		</q-card>
	</q-dialog>
</template>
<script setup lang="ts">
import type { QTableProps } from "quasar"
import { defineComponent, onMounted } from "@vue/runtime-core"
import { reactive, ref, watch } from "vue"
import { useRouter } from "vue-router"
import subCalendarComponent from "@/modules/05_leave/componenst/Calendar.vue"
import subListCalendarComponent from "@/modules/05_leave/componenst/ListCalendar.vue"
import { useCounterMixin } from "@/stores/mixin"
import type { DataDateMonthObject } from "@/modules/05_leave/interface/request/Calendar.ts"

const router = useRouter()
const currentTab = ref<string>("calendar") //ระบุ tab ใช้งานอยู่ calendar=รายการ list=รายการ
const dateMonth = ref<number>(new Date().getFullYear())
const dateYear = ref<number>(new Date().getFullYear())

const mixin = useCounterMixin() //เรียกฟังก์ชันกลาง
const { monthYear2Thai } = mixin
/**
 * แปลง ปีและเดือนเป็นภาษาไทย
 * @param val datepicker แบบเลือกปีและเดือน
 */
const monthYearThai = (val: DataDateMonthObject) => {
	if (val == null) return ""
	else return monthYear2Thai(val.month, val.year)
}

const value = ref(90)
const itemPie = ref([
	{ text: "ลาป่วย", color: "text-pink-5", value: 90, all: "10", use: "9", remain: "1" },
	{ text: "ลากิจส่วนตัว", color: "text-deep-purple", value: 80, all: "12", use: "9", remain: "3" },
	{ text: "ลาพักผ่อน", color: "text-indigo", value: 78, all: "20", use: "17", remain: "3" },
])

const data = ref(false)
const columns = ref<QTableProps["columns"]>([
	{
		name: "no",
		align: "left",
		label: "ลำดับ",
		sortable: true,
		field: "no",
		headerStyle: "font-size: 14px",
		style: "font-size: 14px; width:5%;",
	},
	{
		name: "type",
		align: "left",
		label: "ประเภทการลา",
		sortable: true,
		field: "type",
		headerStyle: "font-size: 14px",
		style: "font-size: 14px; width:15%;",
	},
	{
		name: "numDate",
		align: "left",
		label: "โควตาวันลา",
		sortable: true,
		field: "numDate",
		headerStyle: "font-size: 14px",
		style: "font-size: 14px; width:15%;",
	},
	{
		name: "extend",
		align: "left",
		label: "ทดวันลา",
		sortable: true,
		field: "extend",
		headerStyle: "font-size: 14px",
		style: "font-size: 14px; width:15%;",
	},
	{
		name: "use",
		align: "left",
		label: "ใช้ไป (%)",
		sortable: true,
		field: "use",
		headerStyle: "font-size: 14px",
		style: "font-size: 14px; width:15%;",
	},
	{
		name: "numAll",
		align: "left",
		label: "จำนวนยื่นขอลา (วัน)",
		sortable: true,
		field: "numAll",
		headerStyle: "font-size: 14px",
		style: "font-size: 14px; width:15%;",
	},
	{
		name: "numDone",
		align: "left",
		label: "จำนวนที่อนุมัติ (วัน)",
		sortable: true,
		field: "numDone",
		headerStyle: "font-size: 14px",
		style: "font-size: 14px; width:15%;",
	},
	{
		name: "numNot",
		align: "left",
		label: "จำนวนที่ไม่อนุมัติ (วัน)",
		sortable: true,
		field: "numNot",
		headerStyle: "font-size: 14px",
		style: "font-size: 14px; width:15%;",
	},
	{
		name: "numCancel",
		align: "left",
		label: "จำนวนที่ยกเลิก (วัน)",
		sortable: true,
		field: "numCancel",
		headerStyle: "font-size: 14px",
		style: "font-size: 14px; width:15%;",
	},
])
const rows = ref<any>([
	{ no: "1", type: "ลาป่วย" },
	{ no: "2", type: "ลากิจส่วนตัว" },
	{ no: "3", type: "ลาคลอดบุตร" },
	{ no: "4", type: "ลาช่วยเหลือภริยาที่คลอดบุตร" },
	{ no: "5", type: "ลาพักผ่อน" },
	{ no: "6", type: "ลาอุปสมบทหรือการลาประกอบพิธีฮัจย์ฯ" },
	{ no: "7", type: "ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล" },
	{ no: "8", type: "ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน" },
	{ no: "9", type: "ลาไปปฏิบัติงานในองค์การระหว่างประเทศ" },
	{ no: "10", type: "ลาติดตามคู่สมรส" },
	{ no: "11", type: "ลาฟื้นฟูสมรรถภาพด้านอาชีพ" },
])
const pagination = ref({ rowsPerPage: 11 })

const addAbsence = async () => {
	router.push(`/leave/add`)
}
</script>
<style>
.borderTop {
	border-top: 1px solid #ededed;
	border-bottom: 1px solid #ededed;
}
</style>