From 05b5f65af7fb6dfe0bb892a411997216d6cc668e Mon Sep 17 00:00:00 2001
From: waruneeta <warunee.auy@gmail.com>
Date: Wed, 8 Nov 2023 11:28:03 +0700
Subject: [PATCH 1/2] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=E0=B8=9F?=
 =?UTF-8?q?=E0=B8=B4=E0=B8=A5=E0=B8=94=E0=B9=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../componenst/Forms/12_FollowSpouseForm.vue  | 25 ++++++++++++-------
 1 file changed, 16 insertions(+), 9 deletions(-)

diff --git a/src/modules/05_leave/componenst/Forms/12_FollowSpouseForm.vue b/src/modules/05_leave/componenst/Forms/12_FollowSpouseForm.vue
index 4cb78cf..7d79cd9 100644
--- a/src/modules/05_leave/componenst/Forms/12_FollowSpouseForm.vue
+++ b/src/modules/05_leave/componenst/Forms/12_FollowSpouseForm.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { ref } from "vue"
+import { ref } from "vue";
 
-const edit = ref<boolean>(false)
+const edit = ref<boolean>(false);
 const props = defineProps({
   data: {
     type: Array,
@@ -14,17 +14,24 @@ const props = defineProps({
   <div>
     ลาติดตามคู่สมรส
     <ul>
+      <li>เขียนที่</li>
       <li>ลาตั้งแต่วันที่</li>
       <li>ลาถึงวันที่</li>
       <li>มีกำหนด กี่ปี กี่เดือน กี่วัน (คำนวนจากทาง frontend Auto)</li>
-      <li>วันเดือนปีเกิด (Auto)</li>
-      <li>วันที่เข้ารับราชการ (Auto)</li>
       <li>เงินเดือนปัจจุบัน (Auto)</li>
-      <li>เงินเดือนปัจจุบัน (เขียนเป็นคำอ่าน) ใช้ฟังก์ชั่นแปลงเลขเป็นข้อความ</li>
-      <li>กรณีลาไปศึกษาต่อ มีฟิลด์เพิ่มคือ ศึกษาวิชา, ขั้นปริญญา, ชื่อสถานศึกษา, ประเทศ, ด้วยทุน</li>
-      <li>กรณีลาไปฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน มีฟิลด์เพิ่มคือ ด้าน/หลักสูตร, ณ สถานที่, ประเทศ, ด้วยทุน</li>
-      <li>ที่อยู่ที่ติดต่อได้ระหว่างลา</li>
-      <li>หมายเลขโทรศัพท์</li>
+      <li>
+        เงินเดือนปัจจุบัน (เขียนเป็นคำอ่าน) ใช้ฟังก์ชั่นแปลงเลขเป็นข้อความ
+      </li>
+      <li>ชื่อคู่สมรส</li>
+      <li>ตำแหน่งคู่สมรส</li>
+      <li>ระดับคู่สมรส</li>
+      <li>ไปปฏิบัติราชการ ณ ประเทศ</li>
+      <li>ระดับคู่สมรส</li>
+      <li>
+        ประวัติการลาติดตามคู่สมรสครั้งสุดท้าย ประกอบด้วย ประเทศ, เป็นเวลา กี่ปี
+        กี่เดือน กี่วัน, ตั้งแต่วันที่, ถึงวันที่ (ในกรณีลาติดต่อกับครั้งก่อน
+        รวมทั้งนี้ด้วย เป็นเวลา กี่ปี กี่เดือน กี่วัน ข้อมูลมาจาก API (Auto))
+      </li>
       <li>รายละเอียด (ไม่บังคับกรอก)</li>
       <li>เอกสารประกอบ</li>
     </ul>

From 3607400650c6be6fa15e7b468e560d9991d86d4b Mon Sep 17 00:00:00 2001
From: waruneeta <warunee.auy@gmail.com>
Date: Wed, 8 Nov 2023 13:04:38 +0700
Subject: [PATCH 2/2] =?UTF-8?q?=E0=B9=80=E0=B8=81=E0=B9=87=E0=B8=9A=20tab?=
 =?UTF-8?q?=20value=20=E0=B9=84=E0=B8=A7=E0=B9=89=E0=B8=97=E0=B8=B5?=
 =?UTF-8?q?=E0=B9=88=20store=20=E0=B9=81=E0=B8=A5=E0=B8=B0=E0=B8=9B?=
 =?UTF-8?q?=E0=B8=A3=E0=B8=B1=E0=B8=9A=20layout=20code?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/05_leave/store.ts       |   2 +
 src/modules/05_leave/views/Main.vue | 740 ++++++++++++++++------------
 2 files changed, 432 insertions(+), 310 deletions(-)

diff --git a/src/modules/05_leave/store.ts b/src/modules/05_leave/store.ts
index 379bcaa..ff24391 100644
--- a/src/modules/05_leave/store.ts
+++ b/src/modules/05_leave/store.ts
@@ -5,6 +5,7 @@ import type { FormLeavetMainData, OptionData, formListLeaveData } from "@/module
 import { useCounterMixin } from "@/stores/mixin"
 
 export const useLeaveStore = defineStore("Leave", () => {
+	const tabValue = ref<string>("calendar");
 	const typeLeave = ref<string|undefined>('')
 	const mixin = useCounterMixin()
 	const { date2Thai } = mixin
@@ -294,6 +295,7 @@ export const useLeaveStore = defineStore("Leave", () => {
 	}
 
 	return {
+		tabValue,
 		typeOptions,
 		optionsSpecific,
 		statusOptions,
diff --git a/src/modules/05_leave/views/Main.vue b/src/modules/05_leave/views/Main.vue
index f6d438e..a16cc62 100644
--- a/src/modules/05_leave/views/Main.vue
+++ b/src/modules/05_leave/views/Main.vue
@@ -1,51 +1,263 @@
+<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 { useLeaveStore } from "@/modules/05_leave/store";
+
+const leaveStore = useLeaveStore();
+const { filterSelector, searchFilterTable } = leaveStore;
+const router = useRouter();
+
+const dateMonth = ref<DataDateMonthObject>({
+  month: new Date().getMonth(),
+  year: new Date().getFullYear(),
+});
+// console.log(dateMonth.value);
+const props = defineProps({
+  dateYear: Number, //ปีที่ส่งไป parent สรุปวันหยุด
+  fetchDataSummaryCalendar: {
+    //ฟังก์ชันอัพเดทสรุปวันหยุด
+    type: Function,
+    default: () => console.log("not function"),
+  },
+});
+const dateYear = ref<number>(new Date().getFullYear());
+const emit = defineEmits(["update:dateYear"]);
+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 updateMonth = async (e: DataDateMonthObject) => {
+  console.log(dateMonth.value);
+  if (e != null) {
+    dateYear.value = e.year;
+    emit("update:dateYear", e.year);
+    await props.fetchDataSummaryCalendar();
+  }
+  console.log(dateMonth.value);
+};
+
+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>
+
 <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'" @update:modelValue="updateMonth">
-									<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 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>
-								<q-select
-									v-if="currentTab === 'list'"
-									outlined
-									dense
-									lazy-rules
-									v-model="LeaveData.fiscalYearyear"
-									:label="`${'ปี พ.ศ.'}`"
-									emit-value
-									map-options
-									option-label="name"
-									:options="LeaveData.fiscalyearOP"
-									option-value="id"
-									hide-bottom-space
-									style="min-width: 150px"
-									class="col-xs-12 col-sm-auto"
-									@update:model-value="searchFilterTable"
-									@filter="(inputValue:any,
+  <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="leaveStore.tabValue === 'calendar'"
+                  @update:modelValue="updateMonth"
+                >
+                  <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
+                      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>
+                <q-select
+                  v-if="leaveStore.tabValue === 'list'"
+                  outlined
+                  dense
+                  lazy-rules
+                  v-model="leaveStore.fiscalYearyear"
+                  :label="`${'ปี พ.ศ.'}`"
+                  emit-value
+                  map-options
+                  option-label="name"
+                  :options="leaveStore.fiscalyearOP"
+                  option-value="id"
+                  hide-bottom-space
+                  style="min-width: 150px"
+                  class="col-xs-12 col-sm-auto"
+                  @update:model-value="searchFilterTable"
+                  @filter="(inputValue:any,
                     doneFn:Function) => filterSelector(inputValue, doneFn,'fiscalyearOP'
                     ) "
-								/>
-								<!-- filter เลือกปี -->
-								<!-- <datepicker v-model="dateYear" :locale="'th'" autoApply year-picker :enableTimePicker="false" v-if="currentTab === 'list'">
+                />
+                <!-- filter เลือกปี -->
+                <!-- <datepicker v-model="dateYear" :locale="'th'" autoApply year-picker :enableTimePicker="false" v-if="leaveStore.tabValue === 'list'">
 									<template #year="{ year }">{{ year + 543 }}</template>
 									<template #year-overlay-value="{ value }">{{ parseInt(value + 543) }}</template>
 									<template #trigger>
@@ -56,274 +268,182 @@
 										</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 :dateYear="dateMonth.year" :dateMonth="dateMonth.month" v-if="currentTab === 'calendar'" />
-						</div>
+                <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="leaveStore.tabValue"
+                  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="leaveStore.tabValue = 'calendar'"
+                    :color="
+                      leaveStore.tabValue == '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="leaveStore.tabValue = 'list'"
+                    :color="
+                      leaveStore.tabValue == 'list' ? 'primary' : 'grey-6'
+                    "
+                    class="q-ml-sm"
+                  >
+                    <q-tooltip>รายการ</q-tooltip>
+                  </q-btn>
+                </q-tabs>
+              </div>
+            </div>
+            <div class="col-12">
+              <subCalendarComponent
+                :dateYear="dateMonth.year"
+                :dateMonth="dateMonth.month"
+                v-if="leaveStore.tabValue === '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>
+            <div class="col-12">
+              <subListCalendarComponent v-if="leaveStore.tabValue === '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 { useLeaveStore } from "@/modules/05_leave/store"
 
-const LeaveData = useLeaveStore()
-const { filterSelector, searchFilterTable } = LeaveData
-const router = useRouter()
-const currentTab = ref<string>("calendar") //ระบุ tab ใช้งานอยู่ calendar=รายการ list=รายการ
-const dateMonth = ref<DataDateMonthObject>({
-	month: new Date().getMonth(),
-	year: new Date().getFullYear(),
-})
-console.log(dateMonth.value)
-const props = defineProps({
-	dateYear: Number, //ปีที่ส่งไป parent สรุปวันหยุด
-	fetchDataSummaryCalendar: {
-		//ฟังก์ชันอัพเดทสรุปวันหยุด
-		type: Function,
-		default: () => console.log("not function"),
-	},
-})
-const dateYear = ref<number>(new Date().getFullYear())
-const emit = defineEmits(["update:dateYear"])
-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 updateMonth = async (e: DataDateMonthObject) => {
-	console.log(dateMonth.value)
-	if (e != null) {
-		dateYear.value = e.year
-		emit("update:dateYear", e.year)
-		await props.fetchDataSummaryCalendar()
-	}
-	console.log(dateMonth.value)
-}
-
-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>
+<style scoped>
 .borderTop {
-	border-top: 1px solid #ededed;
-	border-bottom: 1px solid #ededed;
+  border-top: 1px solid #ededed;
+  border-bottom: 1px solid #ededed;
 }
 </style>