From e0112b45edde00971289ee9a304bd42b7ed6f13b Mon Sep 17 00:00:00 2001
From: AnandaTon <ananda@frappet.com>
Date: Tue, 31 Oct 2023 15:36:13 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B9=80=E0=B8=9E=E0=B8=B4=E0=B9=88=E0=B8=A1?=
 =?UTF-8?q?=20filter=20=E0=B9=81=E0=B8=81=E0=B9=89=E0=B9=84=E0=B8=82=20sto?=
 =?UTF-8?q?re=20=E0=B8=9B=E0=B8=A3=E0=B8=B1=E0=B8=9A=20ui?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../04_checkin/componenst/tableHistory.vue    | 306 ++++++++----------
 src/modules/04_checkin/views/history.vue      |   2 +-
 .../05_leave/componenst/ListCalendar.vue      | 293 +++++++----------
 src/modules/05_leave/componenst/Table.vue     |  88 +----
 src/modules/05_leave/interface/index/main.ts  |  12 +-
 src/modules/05_leave/store.ts                 | 236 ++++++++++++--
 src/modules/05_leave/views/Main.vue           |   3 +-
 7 files changed, 481 insertions(+), 459 deletions(-)

diff --git a/src/modules/04_checkin/componenst/tableHistory.vue b/src/modules/04_checkin/componenst/tableHistory.vue
index a6ef783..91ab588 100644
--- a/src/modules/04_checkin/componenst/tableHistory.vue
+++ b/src/modules/04_checkin/componenst/tableHistory.vue
@@ -1,205 +1,161 @@
 <template>
-  <div class="q-pb-sm row">
-    <div class="items-center col-12 row q-gutter-sm">
-      <!-- ค้นหาข้อความใน table -->
-      <datepicker
-          menu-class-name="modalfix"
-          v-model="yearly"
-          :locale="'th'"
-          autoApply
-          year-picker
-          :enableTimePicker="false"
-        >
-          <template #year="{ year }">{{ year + 543 }}</template>
-          <template #year-overlay-value="{ value }">{{
-            parseInt(value + 543)
-          }}</template>
-          <template #trigger>
-            <q-input
-              hide-bottom-space
-              outlined
-              dense
-              lazy-rules
-              :model-value="yearly + 543"
-              :rules="[(val) => !!val || `${'กรุณาเลือกปีงบประมาณ'}`]"
-              :label="`${'ปีงบประมาณ'}`"
-              style="width: 150px;"
-            >
-              <template v-slot:prepend>
-                <q-icon
-                  name="event"
-                  class="cursor-pointer"
-                  color="primary"
-                >
-                </q-icon>
-              </template>
-            </q-input>
-          </template>
-        </datepicker>
-      <q-space/>
-      <q-input
-        standout
-        dense
-        :model-value="inputfilter"
-        ref="filterRef"
-        @update:model-value="updateInput"
-        outlined
-        debounce="300"
-        placeholder="ค้นหา"
-        class="gt-xs"
-        style="max-width: 200px"
-      >
-        <template v-slot:append>
-          <q-icon v-if="inputfilter == ''" name="search" />
-          <q-icon
-            v-if="inputfilter !== ''"
-            name="clear"
-            class="cursor-pointer"
-            @click="resetFilter"
-          />
-        </template>
-      </q-input>
-      <!-- แสดงคอลัมน์ใน table -->
-      <q-select
-        :model-value="inputvisible"
-        @update:model-value="updateVisible"
-        :display-value="$q.lang.table.columns"
-        multiple
-        outlined
-        dense
-        :options="attrs.columns"
-        options-dense
-        option-value="name"
-        map-options
-        emit-value
-        style="min-width: 150px"
-        class="gt-xs"
-      >
-        <template> </template>
-      </q-select>
-    </div>
-  </div>
-  <div>
-    <q-table
-      ref="table"
-      flat
-      bordered
-      class="custom-table2"
-      v-bind="attrs"
-      virtual-scroll
-      :virtual-scroll-sticky-size-start="48"
-      dense
-      :pagination-label="paginationLabel"
-      :pagination="initialPagination"
-      :rows-per-page-options="[0]"
-      :grid="grid"
-    >
-      <template v-slot:header="props">
-        <q-tr :props="props">
-          <q-th v-for="col in props.cols" :key="col.name" :props="props">
-            <span class="text-weight-medium" v-html="col.label" />
-          </q-th>
-          <q-th auto-width v-if="inputShow" />
-        </q-tr>
-      </template>
-      <template #body="props">
-        <slot v-bind="props" name="columns"></slot>
-      </template>
-      <template #item="props">
-        <slot v-bind="props" name="item"></slot>
-      </template>
-    </q-table>
-  </div>
+	<div class="q-pb-sm row">
+		<div class="items-center col-12 row q-gutter-sm">
+			<!-- ค้นหาข้อความใน table -->
+			<datepicker menu-class-name="modalfix" v-model="yearly" :locale="'th'" autoApply year-picker :enableTimePicker="false">
+				<template #year="{ year }">{{ year + 543 }}</template>
+				<template #year-overlay-value="{ value }">{{ parseInt(value + 543) }}</template>
+				<template #trigger>
+					<q-input hide-bottom-space outlined dense lazy-rules :model-value="yearly + 543" :rules="[val => !!val || `${'กรุณาเลือกปีพ.ศ.'}`]" :label="`${'ปีพ.ศ.'}`" style="width: 150px">
+						<template v-slot:prepend>
+							<q-icon name="event" class="cursor-pointer" color="primary"> </q-icon>
+						</template>
+					</q-input>
+				</template>
+			</datepicker>
+			<q-space />
+			<q-input standout dense :model-value="inputfilter" ref="filterRef" @update:model-value="updateInput" outlined debounce="300" placeholder="ค้นหา" class="gt-xs" style="max-width: 200px">
+				<template v-slot:append>
+					<q-icon v-if="inputfilter == ''" name="search" />
+					<q-icon v-if="inputfilter !== ''" name="clear" class="cursor-pointer" @click="resetFilter" />
+				</template>
+			</q-input>
+			<!-- แสดงคอลัมน์ใน table -->
+			<q-select
+				:model-value="inputvisible"
+				@update:model-value="updateVisible"
+				:display-value="$q.lang.table.columns"
+				multiple
+				outlined
+				dense
+				:options="attrs.columns"
+				options-dense
+				option-value="name"
+				map-options
+				emit-value
+				style="min-width: 150px"
+				class="gt-xs"
+			>
+				<template> </template>
+			</q-select>
+		</div>
+	</div>
+	<div>
+		<q-table
+			ref="table"
+			flat
+			bordered
+			class="custom-table2"
+			v-bind="attrs"
+			virtual-scroll
+			:virtual-scroll-sticky-size-start="48"
+			dense
+			:pagination-label="paginationLabel"
+			:pagination="initialPagination"
+			:rows-per-page-options="[0]"
+			:grid="grid"
+		>
+			<template v-slot:header="props">
+				<q-tr :props="props">
+					<q-th v-for="col in props.cols" :key="col.name" :props="props">
+						<span class="text-weight-medium" v-html="col.label" />
+					</q-th>
+					<q-th auto-width v-if="inputShow" />
+				</q-tr>
+			</template>
+			<template #body="props">
+				<slot v-bind="props" name="columns"></slot>
+			</template>
+			<template #item="props">
+				<slot v-bind="props" name="item"></slot>
+			</template>
+		</q-table>
+	</div>
 </template>
 <script setup lang="ts">
-import { ref, useAttrs } from "vue";
-const attrs = ref<any>(useAttrs());
-const table = ref<any>(null);
-const filterRef = ref<any>(null);
+import { ref, useAttrs } from "vue"
+const attrs = ref<any>(useAttrs())
+const table = ref<any>(null)
+const filterRef = ref<any>(null)
 const initialPagination = ref({
-  rowsPerPage: 0,
-});
-const yearly = ref<number>(new Date().getFullYear());
+	rowsPerPage: 0,
+})
+const yearly = ref<number>(new Date().getFullYear())
 
 const props = defineProps({
-  count: Number,
-  pass: Number,
-  notpass: Number,
+	count: Number,
+	pass: Number,
+	notpass: Number,
 
-  inputfilter: String,
-  name: String,
-  icon: String,
-  inputvisible: Array,
-  editvisible: Boolean,
-  grid: Boolean,
+	inputfilter: String,
+	name: String,
+	icon: String,
+	inputvisible: Array,
+	editvisible: Boolean,
+	grid: Boolean,
 
-  inputShow: Boolean,
-});
+	inputShow: Boolean,
+})
 
-const emit = defineEmits([
-  "update:inputfilter",
-  "update:inputvisible",
-  "update:editvisible",
-]);
+const emit = defineEmits(["update:inputfilter", "update:inputvisible", "update:editvisible"])
 const updateInput = (value: string | number | null) => {
-  emit("update:inputfilter", value);
-};
+	emit("update:inputfilter", value)
+}
 const updateVisible = (value: []) => {
-  emit("update:inputvisible", value);
-};
+	emit("update:inputvisible", value)
+}
 
 const paginationLabel = (start: string, end: string, total: string) => {
-  return start + "-" + end + " ใน " + total;
-};
+	return start + "-" + end + " ใน " + total
+}
 
 const resetFilter = () => {
-  // reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
-  emit("update:inputfilter", "");
-  filterRef.value.focus();
-};
-
+	// reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
+	emit("update:inputfilter", "")
+	filterRef.value.focus()
+}
 </script>
 <style lang="scss">
 .icon-color {
-  color: #4154b3;
+	color: #4154b3;
 }
 
 .custom-table2 {
-  .q-table tr:nth-child(odd) td {
-    background: white;
-  }
+	.q-table tr:nth-child(odd) td {
+		background: white;
+	}
 
-  .q-table tr:nth-child(even) td {
-    background: #f8f8f8;
-  }
+	.q-table tr:nth-child(even) td {
+		background: #f8f8f8;
+	}
 
-  .q-table thead tr {
-    background: #ecebeb;
-  }
+	.q-table thead tr {
+		background: #ecebeb;
+	}
 
-  .q-table thead tr th {
-    position: sticky;
-  }
+	.q-table thead tr th {
+		position: sticky;
+	}
 
-  .q-table td:nth-of-type(2) {
-    z-index: 3 !important;
-  }
+	.q-table td:nth-of-type(2) {
+		z-index: 3 !important;
+	}
 
-  .q-table th:nth-of-type(2),
-  .q-table td:nth-of-type(2) {
-    position: sticky;
-    left: 0;
-    z-index: 1;
-  }
+	.q-table th:nth-of-type(2),
+	.q-table td:nth-of-type(2) {
+		position: sticky;
+		left: 0;
+		z-index: 1;
+	}
 
-  /* this will be the loading indicator */
-  .q-table thead tr:last-child th {
-    /* height of all previous header rows */
-    top: 48px;
-  }
+	/* this will be the loading indicator */
+	.q-table thead tr:last-child th {
+		/* height of all previous header rows */
+		top: 48px;
+	}
 
-  .q-table thead tr:first-child th {
-    top: 0;
-  }
+	.q-table thead tr:first-child th {
+		top: 0;
+	}
 }
 </style>
diff --git a/src/modules/04_checkin/views/history.vue b/src/modules/04_checkin/views/history.vue
index 5fc459e..5325ab0 100644
--- a/src/modules/04_checkin/views/history.vue
+++ b/src/modules/04_checkin/views/history.vue
@@ -82,7 +82,7 @@ import Table from "@/modules/04_checkin/componenst/tableHistory.vue"
 const router = useRouter()
 
 const filter = ref<string>("")
-const visibleColumns = ref<String[]>(["date", "in", "loIn", "out", "loOut", "status"])
+const visibleColumns = ref<String[]>(["no", "date", "in", "loIn", "out", "loOut", "status"])
 const columns = ref<QTableProps["columns"]>([
 	{
 		name: "no",
diff --git a/src/modules/05_leave/componenst/ListCalendar.vue b/src/modules/05_leave/componenst/ListCalendar.vue
index 5a18f0f..bde82c2 100644
--- a/src/modules/05_leave/componenst/ListCalendar.vue
+++ b/src/modules/05_leave/componenst/ListCalendar.vue
@@ -1,187 +1,134 @@
 <template>
-    <Table
-        :style="$q.screen.gt.xs ? 'height: 58.5vh' : ''"
-        :rows="rows"
-        :columns="columns"
-        :filter="filter"
-        :visible-columns="visibleColumns"
-        v-model:inputfilter="filter"
-        v-model:inputvisible="visibleColumns"
-        :pagination="initialPagination"
-        :inputShow="true"
-        :grid="$q.screen.gt.xs ? false : true"
-        >
-        <template #columns="props">
-            <q-tr :props="props" class=" cursor-pointer">
-                <q-td key="no" :props="props"  @click="view(props.row.type)">
-                    {{ props.rowIndex + 1 }}
-                </q-td>
-                <q-td key="type" :props="props"  @click="view(props.row.type)">
-                    {{ props.row.type }}
-                </q-td>
-                <q-td key="date" :props="props"  @click="view(props.row.type)">
-                    {{ props.row.date }}
-                </q-td>
-                
-                <q-td key="status" :props="props">
-                    <div class="col-12 row items-center">
-                        <div @click="view(props.row.type)">
-                            <q-icon v-if="props.row.status == 'อนุมัติ'" size="10px" color="light-green" name="mdi-circle" class="q-mr-sm" />
-                            <q-icon v-else-if="props.row.status == 'ไม่อนุมัติ'" size="10px" color="red-6" name="mdi-circle" class="q-mr-sm" />
-                            <q-icon v-else-if="props.row.status == 'อยู่ระหว่างดำเนินการ'" size="10px" color="light-blue-14" name="mdi-circle" class="q-mr-sm" />
-                            <q-icon v-else-if="props.row.status == 'ใหม่'" size="10px" color="orange" name="mdi-circle" class="q-mr-sm" />
-                            <span class="q-pr-md">{{ props.row.status }}</span> 
-                        </div>
-                        <q-space/>
-                        <q-btn v-if="props.row.status == 'ใหม่'" label="ขอยกเลิก"  @click="cancel(props.row.type)" size="13px" class="q-px-sm" outline dense color="orange" />
-                    </div>
-                </q-td>
-            </q-tr>
-        </template>
-    </Table>
+	<Table
+		:style="$q.screen.gt.xs ? 'height: 58.5vh' : ''"
+		:rows="LeaveData.rows"
+		:columns="LeaveData.columns"
+		:filter="filter"
+		:visible-columns="LeaveData.visibleColumns"
+		v-model:inputfilter="filter"
+		v-model:inputvisible="LeaveData.visibleColumns"
+		:pagination="initialPagination"
+		:inputShow="true"
+		:grid="$q.screen.gt.xs ? false : true"
+	>
+		<template #columns="props">
+			<q-tr :props="props" class="cursor-pointer">
+				<q-td key="no" :props="props" @click="view(props.row.type)">
+					{{ props.rowIndex + 1 }}
+				</q-td>
+				<q-td key="type" :props="props" @click="view(props.row.type)">
+					{{ props.row.type }}
+				</q-td>
+				<q-td key="date" :props="props" @click="view(props.row.type)">
+					{{ props.row.date }}
+				</q-td>
 
-    <!-- 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>
+				<q-td key="status" :props="props">
+					<div class="col-12 row items-center">
+						<div @click="view(props.row.type)">
+							<q-icon v-if="props.row.status == 'อนุมัติ'" size="10px" color="light-green" name="mdi-circle" class="q-mr-sm" />
+							<q-icon v-else-if="props.row.status == 'ไม่อนุมัติ'" size="10px" color="red-6" name="mdi-circle" class="q-mr-sm" />
+							<q-icon v-else-if="props.row.status == 'อยู่ระหว่างดำเนินการ'" size="10px" color="light-blue-14" name="mdi-circle" class="q-mr-sm" />
+							<q-icon v-else-if="props.row.status == 'ใหม่'" size="10px" color="orange" name="mdi-circle" class="q-mr-sm" />
+							<span class="q-pr-md">{{ props.row.status }}</span>
+						</div>
+						<q-space />
+						<q-btn v-if="props.row.status == 'ใหม่'" label="ขอยกเลิก" @click="cancel(props.row.type)" size="13px" class="q-px-sm" outline dense color="orange" />
+					</div>
+				</q-td>
+			</q-tr>
+		</template>
+	</Table>
+
+	<!-- 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 type { QTableProps } from "quasar";
-import { ref } from "vue";
+import type { QTableProps } from "quasar"
+import { ref, onMounted } from "vue"
 import Table from "@/modules/05_leave/componenst/Table.vue"
+import { useLeaveStore } from "@/modules/05_leave/store"
 
-
+const LeaveData = useLeaveStore()
+const { fecthList, searchFilterTable } = LeaveData
 const filter = ref<string>("")
-const visibleColumns = ref<String[]>(["no", "type", "date", "status"])
-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: "date",
-		align: "left",
-		label: "วันที่ยื่นใบลา",
-		sortable: true,
-		field: "date",
-		headerStyle: "font-size: 14px",
-		style: "font-size: 14px; width:15%;",
-	},
-	{
-		name: "status",
-		align: "left",
-		label: "สถานะ",
-		sortable: true,
-		field: "status",
-		headerStyle: "font-size: 14px",
-		style: "font-size: 14px; width:10%;",
-	},
-])
-const rows = ref<any>([
-    {no:'1',date: '20  ก.ย. 2566',type: 'ลาป่วย',status: 'ใหม่' },
-    {no:'2',date: '19  ก.ย. 2566',type: 'ลาป่วย',status: 'อยู่ระหว่างดำเนินการ' },
-    {no:'3',date: '10  ก.ย. 2566',type: 'ลากิจส่วนตัว',status: 'อนุมัติ' },
-])
+
 const initialPagination = ref({
 	rowsPerPage: 0,
 })
 
-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;
-};
-</script>
\ No newline at end of file
+	title.value = text
+	modalCancel.value = true
+	modeCancel.value = false
+}
+onMounted(async () => {
+	searchFilterTable()
+	fecthList([
+		{ no: "1", date: "2023-09-20", type: "1", status: "4", year: "2566" },
+		{ no: "2", date: "2023-09-19", type: "1", status: "2", year: "2566" },
+		{ no: "3", date: "2023-09-10", type: "2", status: "3", year: "2566" },
+	])
+})
+</script>
diff --git a/src/modules/05_leave/componenst/Table.vue b/src/modules/05_leave/componenst/Table.vue
index f3c19a0..55aea8a 100644
--- a/src/modules/05_leave/componenst/Table.vue
+++ b/src/modules/05_leave/componenst/Table.vue
@@ -7,7 +7,7 @@
 					outlined
 					dense
 					lazy-rules
-					v-model="type"
+					v-model="LeaveData.LeaveType"
 					:rules="[val => !!val || `${'กรุณาเลือกประเภทใบลา'}`]"
 					:label="`${'ประเภทใบลา'}`"
 					emit-value
@@ -20,14 +20,14 @@
 					class="col-xs-12 col-sm-auto"
 					@update:model-value="searchFilterTable"
 					@filter="(inputValue:any,
-                    doneFn:Function) => filterSelector(inputValue, doneFn,'typeOptions'
+                    doneFn:Function) => filterSelector(inputValue, doneFn,'LeaveTypeOption'
                     ) "
 				/>
 				<q-select
 					outlined
 					dense
 					lazy-rules
-					v-model="status"
+					v-model="LeaveData.LeaveStatus"
 					:rules="[val => !!val || `${'กรุณาเลือกสถานะ'}`]"
 					:label="`${'สถานะ'}`"
 					emit-value
@@ -40,7 +40,7 @@
 					class="col-xs-12 col-sm-auto"
 					@update:model-value="searchFilterTable"
 					@filter="(inputValue:any,
-                    doneFn:Function) => filterSelector(inputValue, doneFn,'statusOptions'
+                    doneFn:Function) => filterSelector(inputValue, doneFn,'LeaveStatusOption'
                     ) "
 				/>
 				<q-space />
@@ -99,15 +99,21 @@
 	</div>
 </template>
 <script setup lang="ts">
-import { ref, useAttrs } from "vue"
+import { ref, useAttrs, reactive, onMounted } from "vue"
 import { useLeaveStore } from "@/modules/05_leave/store"
+import type { OptionData } from "@/modules/05_leave/interface/index/main"
 import type { an } from "@fullcalendar/core/internal-common"
+import { useCounterMixin } from "@/stores/mixin"
 
+const mixin = useCounterMixin()
+const { showLoader, hideLoader, date2Thai, messageError } = mixin
 const DataStore = useLeaveStore()
 const LeaveData = useLeaveStore()
+const { filterSelector, searchFilterTable } = LeaveData
 const attrs = ref<any>(useAttrs())
 const table = ref<any>(null)
 const filterRef = ref<any>(null)
+
 const rows = ref<any[]>([])
 const type = ref("ทั้งหมด")
 const status = ref("ทั้งหมด")
@@ -115,15 +121,6 @@ const status = ref("ทั้งหมด")
 const initialPagination = ref({
 	rowsPerPage: 0,
 })
-const yearly = ref<number>(new Date().getFullYear())
-let OriginalData = ref<any[]>([])
-let UpdataData = ref<any[]>([])
-
-const OriginalDataFetch = async () => {
-	await DataStore.DataMain(rows.value)
-	OriginalData.value = await DataStore.DataMainOrig
-	UpdataData.value = OriginalData.value
-}
 
 const props = defineProps({
 	count: Number,
@@ -157,69 +154,6 @@ const resetFilter = () => {
 	emit("update:inputfilter", "")
 	filterRef.value.focus()
 }
-
-const searchFilterTable = async () => {
-	// ส่งไป filter รายการข้อมูลตามเงื่อนไข
-	await DataStore.DataUpdate(typeOptions.value, statusOptions.value)
-	UpdataData.value = DataStore.DataMainUpdate
-}
-
-// รายการข้อมูลประเภท
-const typeOptions = ref<string>("")
-const typeOptionsFilter1 = ref<any>([])
-const typeOptionsOption = ref<any[]>([{ id: "", name: "ทั้งหมด" }])
-
-const TypeFilter = async () => {
-	//   await http
-	//     .get(config.API.typeOrder())
-	//     .then((res) => {
-	//       const response = res.data.result;
-	//       LeaveData.typeOptions = [{ id: "", name: "ทั้งหมด" }];
-	//       TypeOption.value.push(...response);
-	//       typeOptionsFilter1.value = [{ id: "", name: "ทั้งหมด" }];
-	//       typeOptionsFilter1.value.push(...response);
-	//     })
-	//     .catch((e) => {
-	//       messageError($q, e);
-	//     });
-}
-
-// รายการข้อมูลประเภท
-const statusOptions = ref<string>("")
-const statusOptionsFilter1 = ref<any>([])
-const statusOptionsOption = ref<any[]>([{ id: "", name: "ทั้งหมด" }])
-
-const statusOptionsFilter = async () => {
-	//   await http
-	//     .get(config.API.typeOrder())
-	//     .then((res) => {
-	//       const response = res.data.result;
-	//       LeaveData.typeOptions = [{ id: "", name: "ทั้งหมด" }];
-	//       TypeOption.value.push(...response);
-	//       typeOptionsFilter1.value = [{ id: "", name: "ทั้งหมด" }];
-	//       typeOptionsFilter1.value.push(...response);
-	//     })
-	//     .catch((e) => {
-	//       messageError($q, e);
-	//     });
-}
-
-const filterSelector = (val: any, update: Function, refData: string) => {
-	switch (refData) {
-		case "typeOptions":
-			update(() => {
-				LeaveData.typeOptions.values = typeOptionsFilter1.value.filter((v: any) => v.name.indexOf(val) > -1)
-			})
-			break
-		case "statusOptions":
-			update(() => {
-				LeaveData.statusOptions.values = statusOptionsFilter1.value.filter((v: any) => v.name.indexOf(val) > -1)
-			})
-			break
-		default:
-			break
-	}
-}
 </script>
 <style lang="scss">
 .icon-color {
diff --git a/src/modules/05_leave/interface/index/main.ts b/src/modules/05_leave/interface/index/main.ts
index 7168949..96dd28b 100644
--- a/src/modules/05_leave/interface/index/main.ts
+++ b/src/modules/05_leave/interface/index/main.ts
@@ -1,3 +1,5 @@
+import type { S } from "@fullcalendar/core/internal-common"
+
 interface OptionData {
 	id: string | undefined
 	name: string | undefined
@@ -14,4 +16,12 @@ interface FormLeavetMainData {
 	numCancel: string
 }
 
-export type { OptionData, FormLeavetMainData }
+interface formListLeaveData {
+	no: string
+	date: string | null
+	type: string
+	status: string
+	fiscalyear: string
+}
+
+export type { OptionData, FormLeavetMainData, formListLeaveData }
diff --git a/src/modules/05_leave/store.ts b/src/modules/05_leave/store.ts
index 88a9802..f3fae04 100644
--- a/src/modules/05_leave/store.ts
+++ b/src/modules/05_leave/store.ts
@@ -1,27 +1,153 @@
 import { defineStore } from "pinia"
-import { ref } from "vue"
+import { ref, computed } from "vue"
 import type { QTableProps } from "quasar"
-import type { FormLeavetMainData, OptionData } from "@/modules/05_leave/interface/index/"
+import type { FormLeavetMainData, OptionData, formListLeaveData } from "@/modules/05_leave/interface/index/"
+import { useCounterMixin } from "@/stores/mixin"
 
 export const useLeaveStore = defineStore("Leave", () => {
-	const DataMainOrig = ref<FormLeavetMainData[]>([]) // ข้อมูลหลักดั้งเดิม
-	const DataMainUpdate = ref<FormLeavetMainData[]>([]) // ข้อมูลเปลี่ยนแปลง
-
-	const DataMain = (val: FormLeavetMainData[]) => {
-		DataMainOrig.value = val
+	const mixin = useCounterMixin()
+	const { date2Thai } = mixin
+	const LeaveType = ref<string | null>("0")
+	const LeaveStatus = ref<string | null>("0")
+	const fiscalYearyear = ref<number | null>(null)
+	const rows = ref<formListLeaveData>([])
+	const DataMainOrig = ref<formListLeaveData[]>([]) // ข้อมูลหลักดั้งเดิม
+	async function fecthList(data: formListLeaveData[]) {
+		let datalist: formListLeaveData[] = data.map((e: any) => ({
+			no: e.no,
+			type: e.type,
+			status: e.status,
+			date: e.date,
+			year: e.year,
+		}))
+		rows.value = datalist
+		DataMainOrig.value = datalist
 	}
-
-	const DataUpdate = (filter_1: string, filter_2: string) => {
+	const DataMainUpdate = ref<formListLeaveData[]>([]) // ข้อมูลเปลี่ยนแปลง
+	const DataMain = (val: formListLeaveData[]) => (DataMainOrig.value = val)
+	const DataUpdate = (filterType: string, filterStatus: string, filterYear: number | null) => {
 		DataMainUpdate.value = []
 
-		if (filter_1 === "" && filter_2 === "ทั้งหมด") {
+		if (filterType === "" && filterStatus === "" && filterYear === 0) {
 			DataMainUpdate.value = DataMainOrig.value
-		} else if (filter_1 !== "" && filter_2 === "ทั้งหมด") {
-			DataMainUpdate.value = DataMainOrig.value.filter(item => item.TypeValue === filter_1)
-		} else if (filter_1 !== "" && filter_2 !== "ทั้งหมด") {
-			DataMainUpdate.value = DataMainOrig.value.filter(item => item.TypeValue === filter_1 && item.Status === filter_2)
-		} else if (filter_1 === "" && filter_2 !== "ทั้งหมด") {
-			DataMainUpdate.value = DataMainOrig.value.filter(item => item.Status === filter_2)
+		} else if (filterType !== "" && filterStatus === "" && filterYear === 0) {
+			DataMainUpdate.value = DataMainOrig.value.filter((item: formListLeaveData) => item.Type === filterType)
+		} else if (filterType !== "" && filterStatus !== "" && filterYear === null) {
+			DataMainUpdate.value = DataMainOrig.value.filter((item: formListLeaveData) => item.Type === filterType && item.Status === filterStatus)
+		} else if (filterType !== "" && filterStatus === "" && filterYear !== 0) {
+			DataMainUpdate.value = DataMainOrig.value.filter((item: formListLeaveData) => item.Type === filterType && item.fiscalYear === filterYear)
+		} else if (filterType === "" && filterStatus !== "" && filterYear === 0) {
+			DataMainUpdate.value = DataMainOrig.value.filter((item: formListLeaveData) => item.Status === filterStatus)
+		} else if (filterType === "" && filterStatus === "" && filterYear !== 0) {
+			DataMainUpdate.value = DataMainOrig.value.filter((item: formListLeaveData) => item.fiscalYear === filterYear)
+		} else if (filterType === "" && filterStatus !== "" && filterYear !== null) {
+			DataMainUpdate.value = DataMainOrig.value.filter((item: formListLeaveData) => item.Status === filterStatus && item.fiscalYear === filterYear)
+		} else if (filterType !== "" && filterStatus !== "" && filterYear === 0) {
+			DataMainUpdate.value = DataMainOrig.value.filter((item: formListLeaveData) => item.Status === filterStatus && item.Type === filterType)
+		} else if (filterType !== "" && filterStatus !== "" && filterYear !== null) {
+			DataMainUpdate.value = DataMainOrig.value.filter((item: formListLeaveData) => item.Type === filterType && item.Status === filterStatus && item.fiscalYear === filterYear)
+		} else if (filterType == "0" && filterStatus == "0" && filterYear !== null) {
+			DataMainUpdate.value = DataMainOrig.value
+		}
+	}
+
+	//--------------|ฟิลเตอร์|--------------------------------------//
+	const searchFilterTable = async () => {
+		rows.value = []
+
+		if (LeaveType.value !== undefined && LeaveType.value !== null) {
+			await DataUpdate(LeaveType.value === "0" ? "all" : LeaveType.value!, LeaveStatus.value === "0" ? "all" : LeaveStatus.value!, fiscalYearyear.value === "0" ? "all" : fiscalYearyear.value!)
+			let filteredData = DataMainOrig.value
+			if (LeaveType.value !== "0") {
+				filteredData = filteredData.filter((item: formListLeaveData) => item.type === LeaveType.value)
+			}
+			if (LeaveStatus.value !== "0") {
+				filteredData = filteredData.filter((item: formListLeaveData) => item.status === LeaveStatus.value)
+			}
+			// if (fiscalYearyear.value !== "0") {
+			// 	console.log(filteredData)
+			// 	filteredData = filteredData.filter((item: formListLeaveData) => item.status === fiscalYearyear.value)
+			// 	console.log(filteredData)
+			// 	console.log(fiscalYearyear.value)
+			// }
+			const dataArr = filteredData.map((e: any) => ({
+				no: e.no,
+				type: convertType(e.type),
+				status: convertStatus(e.status),
+				date: date2Thai(new Date(e.date)),
+				year: e.year,
+			}))
+			rows.value = dataArr
+		}
+	}
+
+	const filterSelector = (val: any, update: Function, refData: string) => {
+		switch (refData) {
+			case "fiscalyearOP":
+				update(() => {
+					fiscalyearOP.value = fiscalyearOP.value.filter((v: any) => v.name.indexOf(val) > -1)
+				})
+				break
+			case "LeaveTypeOption":
+				update(() => {
+					typeOptions.value = typeOptions.value.filter((v: any) => v.name.indexOf(val) > -1)
+				})
+				break
+			case "LeaveStatusOption":
+				update(() => {
+					statusOptions.value = statusOptions.value.filter((v: any) => v.name.indexOf(val) > -1)
+				})
+				break
+			default:
+				break
+		}
+	}
+
+	const fiscalyearOP = ref<OptionData[]>([
+		{ id: "0", name: "2563" },
+		{ id: "1", name: "2564" },
+		{ id: "2", name: "2565" },
+		{ id: "2", name: "2566" },
+	])
+
+	function convertType(val: string) {
+		switch (val) {
+			case "0":
+				return "ทั้งหมด"
+			case "1":
+				return "ลาป่วย"
+			case "2":
+				return "ลากิจส่วนตัว"
+			case "3":
+				return "ลาคลอดบุตร"
+			case "4":
+				return "ลาไปช่วยเหลือภริยาที่คลอดบุตร"
+			case "5":
+				return "ลาอุปสมบทหรือลาประกอบพิธีฮัจย์ฯ"
+			case "6":
+				return "ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล"
+			case "7":
+				return "ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน"
+			case "8":
+				return "ลาไปปฎิบัติงานในองค์การระหว่างประเทศ"
+			case "9":
+				return "ลาติดตามคู่สมรส"
+			case "10":
+				return "ลาไปฟื้นฟูสมรรถภาพด้านอาชีพ"
+		}
+	}
+	function convertStatus(val: string) {
+		switch (val) {
+			case "0":
+				return "ทั้งหมด"
+			case "1":
+				return "อนุมัติ"
+			case "2":
+				return "ไม่อนุมัติ"
+			case "3":
+				return "อยู่ระหว่างดำเนินการ"
+			case "4":
+				return "ใหม่"
 		}
 	}
 
@@ -32,24 +158,66 @@ export const useLeaveStore = defineStore("Leave", () => {
 		{ id: "2", name: "ดูงาน" },
 	])
 	const typeOptions = ref<OptionData[]>([
-		{ id: "0", name: "ลาป่วย" },
-		{ id: "1", name: "ลากิจส่วนตัว" },
-		{ id: "2", name: "ลาคลอดบุตร" },
-		{ id: "3", name: "ลาไปช่วยเหลือภริยาที่คลอดบุตร" },
-		{ id: "4", name: "ลาอุปสมบทหรือลาประกอบพิธีฮัจย์ฯ" },
-		{ id: "5", name: "ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล" },
-		{ id: "6", name: "ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน" },
-		{ id: "7", name: "ลาไปปฎิบัติงานในองค์การระหว่างประเทศ" },
-		{ id: "8", name: "ลาติดตามคู่สมรส" },
-		{ id: "9", name: "ลาไปฟื้นฟูสมรรถภาพด้านอาชีพ" },
+		{ id: "0", name: "ทั้งหมด" },
+		{ id: "1", name: "ลาป่วย" },
+		{ id: "2", name: "ลากิจส่วนตัว" },
+		{ id: "3", name: "ลาคลอดบุตร" },
+		{ id: "4", name: "ลาไปช่วยเหลือภริยาที่คลอดบุตร" },
+		{ id: "5", name: "ลาอุปสมบทหรือลาประกอบพิธีฮัจย์ฯ" },
+		{ id: "6", name: "ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล" },
+		{ id: "7", name: "ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน" },
+		{ id: "8", name: "ลาไปปฎิบัติงานในองค์การระหว่างประเทศ" },
+		{ id: "9", name: "ลาติดตามคู่สมรส" },
+		{ id: "10", name: "ลาไปฟื้นฟูสมรรถภาพด้านอาชีพ" },
 	])
 
 	const statusOptions = ref<OptionData>([
-		{ id: "0", name: "อนุมัติ" },
-		{ id: "1", name: "ไม่อนุมัติ" },
-		{ id: "2", name: "อยู่ระหว่างดำเนินการ" },
-		{ id: "3", name: "ใหม่" },
+		{ id: "0", name: "ทั้งหมด" },
+		{ id: "1", name: "อนุมัติ" },
+		{ id: "2", name: "ไม่อนุมัติ" },
+		{ id: "3", name: "อยู่ระหว่างดำเนินการ" },
+		{ id: "4", name: "ใหม่" },
 	])
+	const visibleColumns = ref<String[]>(["no", "type", "date", "status"])
+	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: "date",
+			align: "left",
+			label: "วันที่ยื่นใบลา",
+			sortable: true,
+			field: "date",
+			headerStyle: "font-size: 14px",
+			style: "font-size: 14px; width:15%;",
+		},
+		{
+			name: "status",
+			align: "left",
+			label: "สถานะ",
+			sortable: true,
+			field: "status",
+			headerStyle: "font-size: 14px",
+			style: "font-size: 14px; width:10%;",
+		},
+	])
+
 	return {
 		typeOptions,
 		optionsSpecific,
@@ -58,5 +226,13 @@ export const useLeaveStore = defineStore("Leave", () => {
 		DataMainUpdate,
 		DataUpdate,
 		DataMainOrig,
+		visibleColumns,
+		columns,
+		rows,
+		LeaveType,
+		LeaveStatus,
+		fecthList,
+		filterSelector,
+		searchFilterTable,
 	}
 })
diff --git a/src/modules/05_leave/views/Main.vue b/src/modules/05_leave/views/Main.vue
index 14c67c8..2c6c1b3 100644
--- a/src/modules/05_leave/views/Main.vue
+++ b/src/modules/05_leave/views/Main.vue
@@ -4,7 +4,6 @@
 			<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">
@@ -155,7 +154,7 @@ import type { DataDateMonthObject } from "@/modules/05_leave/interface/request/C
 const router = useRouter()
 const currentTab = ref<string>("calendar") //ระบุ tab ใช้งานอยู่ calendar=รายการ list=รายการ
 const dateMonth = ref<DataDateMonthObject>({
-	month: new Date().getMonth(), // Months are 0-based in JavaScript, so we add 1 to get the actual month.
+	month: new Date().getMonth(),
 	year: new Date().getFullYear(),
 })
 const dateYear = ref<number>(new Date().getFullYear())