From 12b9ad4a0d0b865f07711356fac20afcbcdd26dd Mon Sep 17 00:00:00 2001
From: AnandaTon <ananda@frappet.com>
Date: Thu, 5 Oct 2023 10:12:10 +0700
Subject: [PATCH] addAbsence Ui

---
 .../05_leave/componenst/addAbsence.vue        | 362 ++++++++++++++
 src/modules/05_leave/router.ts                |  33 +-
 src/modules/05_leave/views/Main.vue           | 444 ++++++++----------
 3 files changed, 568 insertions(+), 271 deletions(-)
 create mode 100644 src/modules/05_leave/componenst/addAbsence.vue

diff --git a/src/modules/05_leave/componenst/addAbsence.vue b/src/modules/05_leave/componenst/addAbsence.vue
new file mode 100644
index 0000000..f5b80fa
--- /dev/null
+++ b/src/modules/05_leave/componenst/addAbsence.vue
@@ -0,0 +1,362 @@
+<script setup lang="ts">
+import { ref, onMounted } from "vue"
+import { useQuasar } from "quasar"
+import { useRouter, useRoute } from "vue-router"
+import { useCounterMixin } from "@/stores/mixin"
+import http from "@/plugins/http"
+import config from "@/app.config"
+import type { QForm } from "quasar"
+
+const mixin = useCounterMixin()
+const { date2Thai, dateToISO, success, messageError, showLoader, hideLoader, fails } = mixin
+const router = useRouter()
+const route = useRoute()
+const myform = ref<QForm | null>(null)
+const $q = useQuasar()
+const routeName = router.currentRoute.value.name
+const id = ref<string>("")
+const fileDocDataUpload = ref<File[]>([])
+const files = ref<any>()
+const tranferOrg = ref("")
+const dateCommand = ref<Date>(new Date())
+const dateLeave = ref<Date>(new Date())
+const noteReason = ref("")
+const nameFile = ref<string>("")
+const model = ref(null)
+const modelSpecific = ref(null)
+const options = ref([
+	"ลาป่วย",
+	"ลากิจส่วนตัว",
+	"ลาคลอดบุตร",
+	"ลาไปช่วยเหลือภริยาที่คลอดบุตร",
+	"ลาพักผ่อน",
+	"ลาอุปสมบทหรือลาประกอบพิธีฮัจย์ฯ",
+	"ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล",
+	"ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน",
+	"ลาไปปฎิบัติงานในองค์การระหว่างประเทศ",
+	"ลาติดตามคู่สมรส",
+	"ลาไปฟื้นฟูสมรรถภาพด้านอาชีพ",
+])
+
+const optionsSpecific = ref(["ลาไปศึกษา", "ฝึกอบรม", "ปฎิบัติการวิจัย", "ดูงาน"])
+
+const dataDetail = ref<any>({
+	datetext: "",
+	activeDate: new Date(),
+	createdAt: new Date(),
+	firstName: "",
+	id: "",
+	isActive: true,
+	lastName: "",
+	location: "",
+	organizationPositionOld: "",
+	positionLevelOld: "",
+	positionNumberOld: "",
+	positionTypeOld: "",
+	prefix: "",
+	profileId: "",
+	reason: "",
+	salary: 0,
+	sendDate: new Date(),
+	status: "",
+	statustext: "",
+	fullname: "",
+})
+
+const clickBack = () => {
+	router.push(`/retire`)
+}
+
+const statusOrder = (val: boolean) => {
+	switch (val) {
+		case true:
+			return "ยับยั้งการลาออก"
+		case false:
+			return "อนุมัติการลาออก"
+	}
+}
+
+onMounted(() => {
+	// if (route.params.id !== undefined) {
+	// 	id.value = route.params.id.toString()
+	// 	fectDataresign(id.value)
+	// }
+})
+
+const saveResing = () => {
+	$q.dialog({
+		title: "ยืนยันการยื่นข้อมูลลาออก",
+		message: "ต้องการยื่นข้อมูลลาออกนี้ใช่หรือไม่?",
+		cancel: {
+			flat: true,
+			color: "negative",
+		},
+		persistent: true,
+	})
+		.onOk(() => {
+			// createFormresign()
+		})
+		.onCancel(() => {})
+		.onDismiss(() => {})
+}
+</script>
+<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>
+			<q-form ref="myform" class="col-12">
+				<q-card bordered>
+					<div class="col-12 row q-col-gutter-md q-pa-md">
+						<div class="col-xs-12 col-sm-12">
+							<div class="q-pl-sm text-weight-bold text-dark">เลือกประเภทการลา</div>
+							<div class="col-12 row q-pa-sm q-col-gutter-sm">
+								<q-select dense class="q-ml-lg col-6" outlined v-model="model" :options="options" prefix="ประเภทใบลา :" />
+							</div>
+							<div class="q-pl-sm text-weight-bold text-dark" v-if="model == 'ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน'">เลือกประเภทใบลาศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน</div>
+							<div class="col-12 row q-pa-sm q-col-gutter-sm" v-if="model == 'ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน'">
+								<q-select dense class="q-ml-lg col-6" outlined v-model="modelSpecific" :options="optionsSpecific" />
+							</div>
+							<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
+							<q-card bordered class="q-pa-md bg-grey-1">
+								<div class="col-12 row q-pa-sm q-col-gutter-sm">
+									<datepicker
+										class="col-2"
+										menu-class-name="modalfix"
+										v-model="dateLeave"
+										:locale="'th'"
+										autoApply
+										borderless
+										:enableTimePicker="false"
+										week-start="0"
+										:readonly="routeName != 'addAbsence'"
+									>
+										<template #year="{ year }">
+											{{ year + 543 }}
+										</template>
+										<template #year-overlay-value="{ value }">
+											{{ parseInt(value + 543) }}
+										</template>
+										<template #trigger>
+											<q-input
+												outlined
+												dense
+												hide-bottom-space
+												:readonly="routeName != 'addAbsence'"
+												class="full-width datepicker"
+												:model-value="dateLeave != null ? date2Thai(dateLeave) : null"
+												:label="`${'วันที่เริ่ม'}`"
+												:rules="[val => !!val || `${'กรุณาเลือกวันที่เริ่มลา'}`]"
+											>
+												<template v-slot:prepend>
+													<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
+												</template>
+											</q-input>
+										</template>
+									</datepicker>
+									<datepicker
+										class="col-2"
+										menu-class-name="modalfix"
+										v-model="dateLeave"
+										:locale="'th'"
+										autoApply
+										borderless
+										:enableTimePicker="false"
+										week-start="0"
+										:readonly="routeName != 'addAbsence'"
+									>
+										<template #year="{ year }">
+											{{ year + 543 }}
+										</template>
+										<template #year-overlay-value="{ value }">
+											{{ parseInt(value + 543) }}
+										</template>
+										<template #trigger>
+											<q-input
+												outlined
+												dense
+												hide-bottom-space
+												:readonly="routeName != 'addAbsence'"
+												class="full-width datepicker"
+												:model-value="dateLeave != null ? date2Thai(dateLeave) : null"
+												:label="`${'จนถึงวันที่'}`"
+												:rules="[val => !!val || `${'กรุณาเลือกวันที่่สิ้นสุดการลา'}`]"
+											>
+												<template v-slot:prepend>
+													<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
+												</template>
+											</q-input>
+										</template>
+									</datepicker>
+									<q-input
+										class="col-2"
+										dense
+										outlined
+										v-model="noteReason"
+										label="จำนวนวัน(บันทึกลง ก.พ.7)"
+										:readonly="routeName != 'addAbsence'"
+										:rules="[val => !!val || `${'กรุณากรอกจำนวนวัน'}`]"
+									/>
+									<q-input class="col-3" dense outlined v-model="noteReason" label="เขียนที่" :readonly="routeName != 'addAbsence'" :rules="[val => !!val || `${'เขียนที่'}`]" />
+									<q-input
+										class="col-3"
+										dense
+										outlined
+										v-model="noteReason"
+										label="หมายเลขโทรศัพท์ที่ติดต่อได้"
+										:readonly="routeName != 'addAbsence'"
+										:rules="[val => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`]"
+									/>
+									<q-input
+										class="col-6"
+										dense
+										outlined
+										v-model="noteReason"
+										label="รายละเอียด"
+										:readonly="routeName != 'addAbsence'"
+										:rules="[val => !!val || `${'กรุณากรอกรายละเอียด'}`]"
+									/>
+									<q-input
+										class="col-6"
+										dense
+										outlined
+										v-model="noteReason"
+										label="สถาที่ติดต่อขณะลา"
+										:readonly="routeName != 'addAbsence'"
+										:rules="[val => !!val || `${'กรุณากรอกสถาที่ติดต่อขณะลา'}`]"
+									/>
+
+									<q-input
+										class="col-4"
+										v-if="model == 'ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน'"
+										dense
+										outlined
+										v-model="noteReason"
+										label="ระดับที่ขอลาศึกษา"
+										:readonly="routeName != 'addAbsence'"
+									/>
+
+									<q-input
+										class="col-4"
+										v-if="model == 'ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน'"
+										dense
+										outlined
+										v-model="noteReason"
+										label="ชื่อปริญญา/ประกาศนียบัตร"
+										:readonly="routeName != 'addAbsence'"
+									/>
+
+									<q-input
+										class="col-4"
+										v-if="model == 'ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน'"
+										dense
+										outlined
+										v-model="noteReason"
+										label="สาขาวิชาเอก/หลักสูตร/วิชา"
+										:readonly="routeName != 'addAbsence'"
+									/>
+
+									<q-input
+										class="col-4"
+										v-if="model == 'ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน'"
+										dense
+										outlined
+										v-model="noteReason"
+										label="ณ สถานศึกษา"
+										:readonly="routeName != 'addAbsence'"
+									/>
+
+									<q-input
+										class="col-4"
+										v-if="model == 'ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน'"
+										dense
+										outlined
+										v-model="noteReason"
+										label="ระยะเวลาในการศึกษาตลอดหลักสูตร"
+										:readonly="routeName != 'addAbsence'"
+									/>
+
+									<q-input
+										class="col-4"
+										v-if="model == 'ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน'"
+										dense
+										outlined
+										v-model="noteReason"
+										label="ประเทศ"
+										:readonly="routeName != 'addAbsence'"
+									/>
+
+									<q-input
+										class="col-4"
+										v-if="model == 'ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน'"
+										dense
+										outlined
+										v-model="noteReason"
+										label="ด้วยทุน"
+										:readonly="routeName != 'addAbsence'"
+									/>
+
+									<q-input
+										class="col-8"
+										v-if="model == 'ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน'"
+										dense
+										outlined
+										v-model="noteReason"
+										label="ที่มาของหลักสูตร"
+										:readonly="routeName != 'addAbsence'"
+									/>
+
+									<q-file v-model="files" dense label="เอกสารประกอบ" outlined use-chips multiple class="q-pl-sm col-6">
+										<template v-slot:prepend>
+											<q-icon name="attach_file" color="primary" />
+										</template>
+									</q-file>
+
+									<div class="col-12 row" v-if="routeName != 'addAbsence'">
+										<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
+											<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
+										</div>
+										<q-card bordered flat class="full-width">
+											<q-list separator>
+												<q-item v-for="file in files" :key="file.key" class="q-my-xs">
+													<q-item-section>
+														<q-item-label class="full-width ellipsis">
+															{{ file.fileName }}
+														</q-item-label>
+
+														<q-item-label caption> </q-item-label>
+													</q-item-section>
+												</q-item>
+											</q-list>
+										</q-card>
+									</div>
+								</div>
+							</q-card>
+						</div>
+
+						<!-- <div class="row col-12 q-pa-md" v-if="routeName != 'addAbsence'">
+							<q-space />
+							<q-btn
+								v-if="dataDetail.status !== 'DELETE' && dataDetail.status !== 'DONE'"
+								unelevated
+								dense
+								class="q-px-md items-center"
+								color="orange"
+								label="ยกเลิกการลา"
+								@click="cancelResing"
+								:disable="tranferOrg == '' && noteReason == ''"
+							/>
+						</div> -->
+					</div>
+					<q-separator />
+					<div class="row col-12 q-pa-md">
+						<q-space />
+						<q-btn unelevated dense class="q-px-md items-center" color="primary" label="บันทึก" @click="saveData" :disable="tranferOrg == '' && noteReason == ''" />
+					</div>
+				</q-card>
+			</q-form>
+		</div>
+	</div>
+</template>
diff --git a/src/modules/05_leave/router.ts b/src/modules/05_leave/router.ts
index f0c2ffc..777a84b 100644
--- a/src/modules/05_leave/router.ts
+++ b/src/modules/05_leave/router.ts
@@ -1,18 +1,29 @@
 /**
  * Router leave
  */
-const leave = () => import("@/modules/05_leave/views/Main.vue");
+const leave = () => import("@/modules/05_leave/views/Main.vue")
+
+const addAbsence = () => import("@/modules/05_leave/componenst/addAbsence.vue")
 
 /* const Checkout = () => import("@/modules/04_checkin/views/Checkout.vue");
  */
 export default [
-  {
-    path: "/leave",
-    name: "leave",
-    component: leave,
-    meta: {
-      Auth: true,
-      Key: [7],
-    },
-  }
-]
\ No newline at end of file
+	{
+		path: "/leave",
+		name: "leave",
+		component: leave,
+		meta: {
+			Auth: true,
+			Key: [7],
+		},
+	},
+	{
+		path: "/leave/add",
+		name: "addAbsence",
+		component: addAbsence,
+		meta: {
+			Auth: true,
+			Key: [7],
+		},
+	},
+]
diff --git a/src/modules/05_leave/views/Main.vue b/src/modules/05_leave/views/Main.vue
index becfe41..b3418c2 100644
--- a/src/modules/05_leave/views/Main.vue
+++ b/src/modules/05_leave/views/Main.vue
@@ -5,254 +5,175 @@
 				<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>
+		</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">
-                                        <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>
+								<!-- 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";
+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;
+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 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 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 data = ref(false)
 const columns = ref<QTableProps["columns"]>([
 	{
 		name: "no",
@@ -263,7 +184,7 @@ const columns = ref<QTableProps["columns"]>([
 		headerStyle: "font-size: 14px",
 		style: "font-size: 14px; width:5%;",
 	},
-    {
+	{
 		name: "type",
 		align: "left",
 		label: "ประเภทการลา",
@@ -281,7 +202,7 @@ const columns = ref<QTableProps["columns"]>([
 		headerStyle: "font-size: 14px",
 		style: "font-size: 14px; width:15%;",
 	},
-    {
+	{
 		name: "extend",
 		align: "left",
 		label: "ทดวันลา",
@@ -290,7 +211,7 @@ const columns = ref<QTableProps["columns"]>([
 		headerStyle: "font-size: 14px",
 		style: "font-size: 14px; width:15%;",
 	},
-    {
+	{
 		name: "use",
 		align: "left",
 		label: "ใช้ไป (%)",
@@ -299,7 +220,7 @@ const columns = ref<QTableProps["columns"]>([
 		headerStyle: "font-size: 14px",
 		style: "font-size: 14px; width:15%;",
 	},
-    {
+	{
 		name: "numAll",
 		align: "left",
 		label: "จำนวนยื่นขอลา (วัน)",
@@ -308,7 +229,7 @@ const columns = ref<QTableProps["columns"]>([
 		headerStyle: "font-size: 14px",
 		style: "font-size: 14px; width:15%;",
 	},
-    {
+	{
 		name: "numDone",
 		align: "left",
 		label: "จำนวนที่อนุมัติ (วัน)",
@@ -317,7 +238,7 @@ const columns = ref<QTableProps["columns"]>([
 		headerStyle: "font-size: 14px",
 		style: "font-size: 14px; width:15%;",
 	},
-    {
+	{
 		name: "numNot",
 		align: "left",
 		label: "จำนวนที่ไม่อนุมัติ (วัน)",
@@ -326,7 +247,7 @@ const columns = ref<QTableProps["columns"]>([
 		headerStyle: "font-size: 14px",
 		style: "font-size: 14px; width:15%;",
 	},
-    {
+	{
 		name: "numCancel",
 		align: "left",
 		label: "จำนวนที่ยกเลิก (วัน)",
@@ -337,24 +258,27 @@ const columns = ref<QTableProps["columns"]>([
 	},
 ])
 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: 'ลาฟื้นฟูสมรรถภาพด้านอาชีพ' }
+	{ 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 pagination = ref({ rowsPerPage: 11 })
 
+const addAbsence = async () => {
+	router.push(`/leave/add`)
+}
 </script>
 <style>
-.borderTop{
-    border-top: 1px solid #EDEDED ;
-    border-bottom:1px solid #EDEDED ;
+.borderTop {
+	border-top: 1px solid #ededed;
+	border-bottom: 1px solid #ededed;
 }
-</style>
\ No newline at end of file
+</style>