From 7d23bdc945f87b132c42599192430084724274ff Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Fri, 20 Oct 2023 16:57:32 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=9B=E0=B8=A3=E0=B8=B1=E0=B8=9A=20table=20?=
 =?UTF-8?q?=E0=B8=A5=E0=B8=87=E0=B9=80=E0=B8=A7=E0=B8=A5=E0=B8=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../09_leave/components/1_Work/TableList.vue  | 179 ++++--------------
 .../09_leave/components/1_Work/ToolBar.vue    |  98 ++++++++++
 .../09_leave/components/2_Leave/TableList.vue | 127 ++-----------
 .../09_leave/components/2_Leave/ToolBar.vue   |  95 ++++++++++
 .../09_leave/interface/request/work.ts        |   0
 .../09_leave/interface/response/leave.ts      |   9 +
 .../09_leave/interface/response/work.ts       |  15 ++
 src/modules/09_leave/stores/LeaveStore.ts     |  21 +-
 src/modules/09_leave/stores/WorkStore.ts      |  16 +-
 src/modules/09_leave/views/LeaveListMain.vue  |   8 +-
 src/modules/09_leave/views/WorkingMain.vue    |   8 +-
 11 files changed, 309 insertions(+), 267 deletions(-)
 create mode 100644 src/modules/09_leave/components/1_Work/ToolBar.vue
 create mode 100644 src/modules/09_leave/components/2_Leave/ToolBar.vue
 create mode 100644 src/modules/09_leave/interface/request/work.ts
 create mode 100644 src/modules/09_leave/interface/response/leave.ts
 create mode 100644 src/modules/09_leave/interface/response/work.ts

diff --git a/src/modules/09_leave/components/1_Work/TableList.vue b/src/modules/09_leave/components/1_Work/TableList.vue
index 301f32a22..79e47a3db 100644
--- a/src/modules/09_leave/components/1_Work/TableList.vue
+++ b/src/modules/09_leave/components/1_Work/TableList.vue
@@ -13,7 +13,6 @@ const workStore = useWorklistDataStore();
 
 const { date2Thai } = mixin;
 const { searchDataFn, filterFn } = workStore;
-onMounted(() => {});
 
 //ข้อมูล Table
 const columns = ref<QTableProps["columns"]>([
@@ -90,6 +89,12 @@ const visibleColumns = ref<string[]>([
   "coordinatesOut",
   "status",
 ]);
+
+onMounted(() => {
+  workStore.columns = columns.value;
+  workStore.visibleColumns = visibleColumns.value;
+});
+
 //DialogDetail
 const modal = ref<boolean>(false);
 const dataDetail = ref<any>([]);
@@ -108,96 +113,9 @@ const pagination = ref({
   page: 1,
   rowsPerPage: 10,
 });
-const paging = ref<boolean>(true);
-const paginationLabel = (start: string, end: string, total: string) => {
-  if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
-  else return start + "-" + end + " ใน " + total;
-};
 </script>
 
 <template>
-  <q-toolbar style="padding: 0" class="q-gutter-sm q-mb-md">
-    <div class="col-2">
-      <datepicker
-        menu-class-name="modalfix"
-        v-model="workStore.selectDate"
-        :locale="'th'"
-        autoApply
-        :enableTimePicker="false"
-        week-start="0"
-        @update:model-value="
-          searchDataFn(workStore.selectDate, workStore.selectStatus)
-        "
-      >
-        <template #year="{ year }">{{ year + 543 }}</template>
-        <template #year-overlay-value="{ value }">{{
-          parseInt(value + 543)
-        }}</template>
-        <template #trigger>
-          <q-input
-            dense
-            outlined
-            lazy-rules
-            :model-value="
-              workStore.selectDate !== null
-                ? date2Thai(workStore.selectDate)
-                : null
-            "
-            hide-bottom-space
-            :label="`${'วันที่'}`"
-          >
-            <template v-slot:prepend>
-              <q-icon name="event" class="cursor-pointer text-primary">
-              </q-icon>
-            </template>
-          </q-input>
-        </template>
-      </datepicker>
-    </div>
-    <div class="col-3">
-      <q-select
-        emit-value
-        map-options
-        outlined
-        dense
-        v-model="workStore.selectStatus"
-        :options="workStore.optionStatus"
-        option-value="id"
-        option-label="name"
-        label="สถานะ"
-        @update:model-value="
-          searchDataFn(workStore.selectDate, workStore.selectStatus)
-        "
-        use-input
-        @filter="filterFn"
-      >
-        <template v-slot:no-option>
-          <q-item>
-            <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
-          </q-item>
-        </template></q-select
-      >
-    </div>
-    <q-space />
-    <div class="col-2">
-      <q-input dense outlined v-model="workStore.filterTable" label="ค้นหา" />
-    </div>
-    <div class="col-2">
-      <q-select
-        v-model="visibleColumns"
-        multiple
-        outlined
-        dense
-        options-dense
-        :display-value="$q.lang.table.columns"
-        emit-value
-        map-options
-        :options="columns"
-        option-value="name"
-        options-cover
-      />
-    </div>
-  </q-toolbar>
   <d-table
     ref="table"
     :columns="columns"
@@ -209,8 +127,7 @@ const paginationLabel = (start: string, end: string, total: string) => {
     :paging="true"
     dense
     class="custom-header-table"
-    :visible-columns="visibleColumns"
-    :pagination-label="paginationLabel"
+    :visible-columns="workStore.visibleColumns"
     v-model:pagination="pagination"
   >
     <template v-slot:header="props">
@@ -222,64 +139,38 @@ const paginationLabel = (start: string, end: string, total: string) => {
     </template>
     <template v-slot:body="props">
       <q-tr :props="props" class="cursor-pointer">
-        <q-td key="no" :props="props" @click.prevent="clickDetail(props.row)">
-          {{ props.rowIndex + 1 }}
-        </q-td>
         <q-td
-          key="fullName"
+          v-for="col in props.cols"
+          :key="col.name"
           :props="props"
           @click.prevent="clickDetail(props.row)"
         >
-          {{ props.row.fullName }}
-        </q-td>
-        <q-td
-          key="timeIn"
-          :props="props"
-          @click.prevent="clickDetail(props.row)"
-        >
-          {{ props.row.timeIn }}
-        </q-td>
-        <q-td
-          key="coordinatesIn"
-          :props="props"
-          @click.prevent="clickDetail(props.row)"
-        >
-          <q-item style="padding: 0">
-            <q-item-section>
-              <q-item-label> {{ props.row.coordinatesIn }}</q-item-label>
-              <q-item-label caption lines="2">{{
-                props.row.latIn + "  " + props.row.longIn
-              }}</q-item-label>
-            </q-item-section>
-          </q-item>
-        </q-td>
-        <q-td
-          key="timeOut"
-          :props="props"
-          @click.prevent="clickDetail(props.row)"
-        >
-          {{ props.row.timeOut }}
-        </q-td>
-        <q-td
-          key="coordinatesOut"
-          :props="props"
-          @click.prevent="clickDetail(props.row)"
-        >
-          <q-item style="padding: 0">
-            <q-item-section>
-              <q-item-label> {{ props.row.coordinatesOut }}</q-item-label>
-              <q-item-label caption lines="2">{{
-                props.row.latOut + "  " + props.row.longOut
-              }}</q-item-label>
-            </q-item-section>
-          </q-item>
-        </q-td>
-        <q-td
-          key="status"
-          :props="props"
-          @click.prevent="clickDetail(props.row)"
-        >
-          {{ props.row.status }}
+          <div v-if="col.name == 'no'">
+            {{ props.rowIndex + 1 }}
+          </div>
+          <div v-else-if="col.name == 'coordinatesIn'">
+            <q-item style="padding: 0">
+              <q-item-section>
+                <q-item-label> {{ props.row.coordinatesIn }}</q-item-label>
+                <q-item-label caption lines="2">{{
+                  props.row.latIn + "  " + props.row.longIn
+                }}</q-item-label>
+              </q-item-section>
+            </q-item>
+          </div>
+          <div v-else-if="col.name == 'coordinatesOut'">
+            <q-item style="padding: 0">
+              <q-item-section>
+                <q-item-label> {{ props.row.coordinatesOut }}</q-item-label>
+                <q-item-label caption lines="2">{{
+                  props.row.latOut + "  " + props.row.longOut
+                }}</q-item-label>
+              </q-item-section>
+            </q-item>
+          </div>
+          <div v-else>
+            {{ col.value }}
+          </div>
         </q-td>
       </q-tr>
     </template>
diff --git a/src/modules/09_leave/components/1_Work/ToolBar.vue b/src/modules/09_leave/components/1_Work/ToolBar.vue
new file mode 100644
index 000000000..e2de148da
--- /dev/null
+++ b/src/modules/09_leave/components/1_Work/ToolBar.vue
@@ -0,0 +1,98 @@
+<script setup lang="ts">
+//import Stores
+import { useCounterMixin } from "@/stores/mixin";
+import { useWorklistDataStore } from "@/modules/09_leave/stores/WorkStore";
+
+const workStore = useWorklistDataStore();
+const mixin = useCounterMixin();
+
+const { date2Thai } = mixin;
+const { filterFn, searchDataFn } = workStore;
+</script>
+
+<template>
+  <q-toolbar style="padding: 0" class="q-gutter-sm q-mb-md">
+    <div class="col-2">
+      <datepicker
+        menu-class-name="modalfix"
+        v-model="workStore.selectDate"
+        :locale="'th'"
+        autoApply
+        :enableTimePicker="false"
+        week-start="0"
+        @update:model-value="
+          searchDataFn(workStore.selectDate, workStore.selectStatus)
+        "
+      >
+        <template #year="{ year }">{{ year + 543 }}</template>
+        <template #year-overlay-value="{ value }">{{
+          parseInt(value + 543)
+        }}</template>
+        <template #trigger>
+          <q-input
+            dense
+            outlined
+            lazy-rules
+            :model-value="
+              workStore.selectDate !== null
+                ? date2Thai(workStore.selectDate)
+                : null
+            "
+            hide-bottom-space
+            :label="`${'วันที่'}`"
+          >
+            <template v-slot:prepend>
+              <q-icon name="event" class="cursor-pointer text-primary">
+              </q-icon>
+            </template>
+          </q-input>
+        </template>
+      </datepicker>
+    </div>
+    <div class="col-3">
+      <q-select
+        emit-value
+        map-options
+        outlined
+        dense
+        v-model="workStore.selectStatus"
+        :options="workStore.optionStatus"
+        option-value="id"
+        option-label="name"
+        label="สถานะ"
+        @update:model-value="
+          searchDataFn(workStore.selectDate, workStore.selectStatus)
+        "
+        use-input
+        @filter="filterFn"
+      >
+        <template v-slot:no-option>
+          <q-item>
+            <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
+          </q-item>
+        </template></q-select
+      >
+    </div>
+    <q-space />
+    <div class="col-2">
+      <q-input dense outlined v-model="workStore.filterTable" label="ค้นหา" />
+    </div>
+    <div class="col-2">
+      <q-select
+        v-model="workStore.visibleColumns"
+        multiple
+        outlined
+        dense
+        options-dense
+        :display-value="$q.lang.table.columns"
+        emit-value
+        map-options
+        :options="workStore.columns"
+        option-value="name"
+        options-cover
+      />
+    </div>
+  </q-toolbar>
+</template>
+
+<style scoped></style>
diff --git a/src/modules/09_leave/components/2_Leave/TableList.vue b/src/modules/09_leave/components/2_Leave/TableList.vue
index 5cc33d2e7..834c1959a 100644
--- a/src/modules/09_leave/components/2_Leave/TableList.vue
+++ b/src/modules/09_leave/components/2_Leave/TableList.vue
@@ -1,9 +1,8 @@
 q
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, onMounted } from "vue";
 import type { QTableProps } from "quasar";
 import { useRouter } from "vue-router";
-
 //import Stores
 import { useCounterMixin } from "@/stores/mixin";
 import { useLeavelistDataStore } from "@/modules/09_leave/stores/LeaveStore";
@@ -71,6 +70,11 @@ const visibleColumns = ref<string[]>([
   "status",
 ]);
 
+onMounted(() => {
+  leaveStore.columns = columns.value;
+  leaveStore.visibleColumns = visibleColumns.value;
+});
+
 const pagination = ref({
   descending: true,
   page: 1,
@@ -85,89 +89,6 @@ const paginationLabel = (start: string, end: string, total: string) => {
 </script>
 
 <template>
-  <q-toolbar style="padding: 0" class="q-gutter-sm q-mb-md">
-    <div class="col-2">
-      <q-select
-        emit-value
-        map-options
-        outlined
-        dense
-        v-model="leaveStore.selectYear"
-        :options="optionYear"
-        option-value="id"
-        option-label="name"
-        label="ปีงบประมาณ"
-      />
-    </div>
-    <div class="col-3">
-      <q-select
-        emit-value
-        map-options
-        outlined
-        dense
-        v-model="leaveStore.selectType"
-        :options="leaveStore.optionType"
-        option-value="id"
-        option-label="name"
-        label="ประเภทการลา"
-        @update:model-value="
-          searchDataFn(leaveStore.selectType, leaveStore.selectStatus)
-        "
-        use-input
-        @filter="
-        (inputValue:any, doneFn:Function) =>
-        filterOption(inputValue, doneFn, 'type')
-      "
-      >
-        <template v-slot:no-option>
-          <q-item>
-            <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
-          </q-item>
-        </template></q-select
-      >
-    </div>
-    <div class="col-2">
-      <q-select
-        v-if="leaveStore.tab == '2'"
-        emit-value
-        map-options
-        outlined
-        dense
-        v-model="leaveStore.selectStatus"
-        :options="leaveStore.optionStatus"
-        option-value="id"
-        option-label="name"
-        label="สถานะ"
-        @update:model-value="
-          searchDataFn(leaveStore.selectType, leaveStore.selectStatus)
-        "
-        use-input
-        @filter="
-        (inputValue:any, doneFn:Function) =>
-        filterOption(inputValue, doneFn, 'status')
-      "
-      />
-    </div>
-    <q-space />
-    <div class="col-2">
-      <q-input dense outlined v-model="leaveStore.filterTable" label="ค้นหา" />
-    </div>
-    <div class="col-2">
-      <q-select
-        v-model="visibleColumns"
-        multiple
-        outlined
-        dense
-        options-dense
-        :display-value="$q.lang.table.columns"
-        emit-value
-        map-options
-        :options="columns"
-        option-value="name"
-        options-cover
-      />
-    </div>
-  </q-toolbar>
   <d-table
     ref="table"
     :columns="columns"
@@ -179,7 +100,7 @@ const paginationLabel = (start: string, end: string, total: string) => {
     :paging="true"
     dense
     class="custom-header-table"
-    :visible-columns="visibleColumns"
+    :visible-columns="leaveStore.visibleColumns"
     :pagination-label="paginationLabel"
     v-model:pagination="pagination"
     :loading="leaveStore.loadTable"
@@ -192,26 +113,20 @@ const paginationLabel = (start: string, end: string, total: string) => {
       </q-tr>
     </template>
     <template v-slot:body="props">
-      <q-tr
-        :props="props"
-        class="cursor-pointer"
-        @click.prevent="router.push(`/leave/detail/${props.row.name}`)"
-      >
-        <q-td key="no" :props="props"> {{ props.rowIndex + 1 }} </q-td>
-        <q-td key="leaveType" :props="props">
-          {{ props.row.leaveType }}
-        </q-td>
-        <q-td key="name" :props="props">
-          {{ props.row.name }}
-        </q-td>
-        <q-td key="Date" :props="props">
-          {{ props.row.Date }}
-        </q-td>
-        <q-td key="timeOut" :props="props">
-          {{ props.row.timeOut }}
-        </q-td>
-        <q-td key="status" :props="props">
-          {{ props.row.status }}
+      <q-tr :props="props" class="cursor-pointer">
+        <q-td
+          v-for="col in props.cols"
+          :key="col.name"
+          :props="props"
+          @click.prevent="router.push(`/leave/detail/${props.row.name}`)"
+        >
+          <div v-if="col.name == 'no'">
+            {{ props.rowIndex + 1 }}
+          </div>
+
+          <div v-else>
+            {{ col.value }}
+          </div>
         </q-td>
       </q-tr>
     </template>
diff --git a/src/modules/09_leave/components/2_Leave/ToolBar.vue b/src/modules/09_leave/components/2_Leave/ToolBar.vue
new file mode 100644
index 000000000..90e93fb7a
--- /dev/null
+++ b/src/modules/09_leave/components/2_Leave/ToolBar.vue
@@ -0,0 +1,95 @@
+<script setup lang="ts">
+//import Stores
+import { useLeavelistDataStore } from "@/modules/09_leave/stores/LeaveStore";
+
+const leaveStore = useLeavelistDataStore();
+const { searchDataFn, filterOption } = leaveStore;
+</script>
+
+<template>
+  <q-toolbar style="padding: 0" class="q-gutter-sm q-mb-md">
+    <div class="col-2">
+      <q-select
+        emit-value
+        map-options
+        outlined
+        dense
+        v-model="leaveStore.selectYear"
+        :options="leaveStore.optionYear"
+        option-value="id"
+        option-label="name"
+        label="ปีงบประมาณ"
+      />
+    </div>
+    <div class="col-3">
+      <q-select
+        emit-value
+        map-options
+        outlined
+        dense
+        v-model="leaveStore.selectType"
+        :options="leaveStore.optionType"
+        option-value="id"
+        option-label="name"
+        label="ประเภทการลา"
+        @update:model-value="
+          searchDataFn(leaveStore.selectType, leaveStore.selectStatus)
+        "
+        use-input
+        @filter="
+            (inputValue:any, doneFn:Function) =>
+            filterOption(inputValue, doneFn, 'type')
+          "
+      >
+        <template v-slot:no-option>
+          <q-item>
+            <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
+          </q-item>
+        </template></q-select
+      >
+    </div>
+    <div class="col-2">
+      <q-select
+        v-if="leaveStore.tab == '2'"
+        emit-value
+        map-options
+        outlined
+        dense
+        v-model="leaveStore.selectStatus"
+        :options="leaveStore.optionStatus"
+        option-value="id"
+        option-label="name"
+        label="สถานะ"
+        @update:model-value="
+          searchDataFn(leaveStore.selectType, leaveStore.selectStatus)
+        "
+        use-input
+        @filter="
+            (inputValue:any, doneFn:Function) =>
+            filterOption(inputValue, doneFn, 'status')
+          "
+      />
+    </div>
+    <q-space />
+    <div class="col-2">
+      <q-input dense outlined v-model="leaveStore.filterTable" label="ค้นหา" />
+    </div>
+    <div class="col-2">
+      <q-select
+        v-model="leaveStore.visibleColumns"
+        multiple
+        outlined
+        dense
+        options-dense
+        :display-value="$q.lang.table.columns"
+        emit-value
+        map-options
+        :options="leaveStore.columns"
+        option-value="name"
+        options-cover
+      />
+    </div>
+  </q-toolbar>
+</template>
+
+<style scoped></style>
diff --git a/src/modules/09_leave/interface/request/work.ts b/src/modules/09_leave/interface/request/work.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/modules/09_leave/interface/response/leave.ts b/src/modules/09_leave/interface/response/leave.ts
new file mode 100644
index 000000000..363087831
--- /dev/null
+++ b/src/modules/09_leave/interface/response/leave.ts
@@ -0,0 +1,9 @@
+interface DataRows {
+    leaveType: string
+    name: string
+    Date: string
+    status: string
+}
+export type {
+    DataRows
+}
\ No newline at end of file
diff --git a/src/modules/09_leave/interface/response/work.ts b/src/modules/09_leave/interface/response/work.ts
new file mode 100644
index 000000000..2877694a2
--- /dev/null
+++ b/src/modules/09_leave/interface/response/work.ts
@@ -0,0 +1,15 @@
+interface TableRows {
+    fullName: string
+    timeIn: string
+    coordinatesIn: string
+    latIn: string
+    longIn: string
+    timeOut: string
+    coordinatesOut: string
+    latOut: string
+    longOut: string
+    status: string
+}
+export type {
+    TableRows
+}
\ No newline at end of file
diff --git a/src/modules/09_leave/stores/LeaveStore.ts b/src/modules/09_leave/stores/LeaveStore.ts
index ca74bf832..6a33dc509 100644
--- a/src/modules/09_leave/stores/LeaveStore.ts
+++ b/src/modules/09_leave/stores/LeaveStore.ts
@@ -3,6 +3,8 @@ import { ref } from "vue";
 import { useCounterMixin } from "@/stores/mixin";
 
 import type { DataOption } from "@/modules/09_leave/interface/index/Main"
+import type { QTableProps } from "quasar";
+import type { DataRows } from "@/modules/09_leave/interface/response/leave"
 
 
 const mixin = useCounterMixin();
@@ -10,21 +12,23 @@ const { date2Thai, showLoader, hideLoader } = mixin;
 export const useLeavelistDataStore = defineStore("leave", () => {
     //TABMENU
     const tab = ref<string>("1");
-    const amounttab1 = ref<string>("")
-    const amounttab2 = ref<string>("")
+    const amounttab1 = ref<number>(0)
+    const amounttab2 = ref<number>(0)
     //ข้อมูลในตาราง
     const mainData = ref<any>([])
-    const rows = ref<any>([])
+    const rows = ref<DataRows[]>([])
+    const columns = ref<QTableProps["columns"]>([]);
+    const visibleColumns = ref<string[]>([]);
     const loadTable = ref<boolean>(false)
-    async function fetchList(data: any) {
-        let datalist = data.map((e: any) => ({
+    async function fetchList(data: DataRows[]) {
+        let datalist = data.map((e: DataRows) => ({
             leaveType: e.leaveType,
             name: e.name,
             Date: e.Date,
             status: convertSatatus(e.status)
         }))
-        tab.value !== "1" ? mainData.value = datalist : mainData.value = datalist.filter((e: any) => e.status === "อยู่ระหว่างกำเนินการ")
-        const filteramounttab1 = datalist.filter((e: any) => e.status === "อยู่ระหว่างกำเนินการ")
+        tab.value !== "1" ? mainData.value = datalist : mainData.value = datalist.filter((e) => e.status === "อยู่ระหว่างกำเนินการ")
+        const filteramounttab1 = datalist.filter((e) => e.status === "อยู่ระหว่างกำเนินการ")
         amounttab1.value = filteramounttab1.length
         amounttab2.value = datalist.length
         await fetchOption()
@@ -163,6 +167,9 @@ export const useLeavelistDataStore = defineStore("leave", () => {
         rows,
         fetchList,
         loadTable,
+        columns,
+        visibleColumns,
+
         //filter table
         filterTable,
         selectYear,
diff --git a/src/modules/09_leave/stores/WorkStore.ts b/src/modules/09_leave/stores/WorkStore.ts
index 9cbd2be96..b73277d46 100644
--- a/src/modules/09_leave/stores/WorkStore.ts
+++ b/src/modules/09_leave/stores/WorkStore.ts
@@ -1,15 +1,19 @@
 import { defineStore } from "pinia";
 import { ref } from "vue";
 import { useCounterMixin } from "@/stores/mixin";
+import type { QTableProps } from "quasar";
 import type { DataOption } from "@/modules/09_leave/interface/index/Main"
+import type { TableRows } from "@/modules/09_leave/interface/response/work"
 const mixin = useCounterMixin();
 const { date2Thai } = mixin;
 export const useWorklistDataStore = defineStore("work", () => {
     // ข้อมูลในตาราง
-    const rows = ref<any>([])
-    const dataMain = ref<any>([])
-    function fetchList(data: any) {
-        let datalist = data.map((e: any) => ({
+    const rows = ref<TableRows[]>([])
+    const columns = ref<QTableProps["columns"]>([]);
+    const visibleColumns = ref<string[]>([]);
+    const dataMain = ref<TableRows[]>([])
+    function fetchList(data: TableRows[]) {
+        let datalist = data.map((e: TableRows) => ({
             fullName: e.fullName,
             timeIn: e.timeIn,
             coordinatesIn: e.coordinatesIn,
@@ -58,7 +62,7 @@ export const useWorklistDataStore = defineStore("work", () => {
             }
         }
     }
-    function filterFn(val: string, update: any) {
+    function filterFn(val: string, update: Function) {
         if (val == "") {
             update(() => {
                 optionStatus.value = optionStatusMain.value;
@@ -86,6 +90,8 @@ export const useWorklistDataStore = defineStore("work", () => {
     return {
         //ข้อมูลในตาราง
         rows,
+        columns,
+        visibleColumns,
         fetchList,
         //ค้นหาข้อมูล
         filterTable,
diff --git a/src/modules/09_leave/views/LeaveListMain.vue b/src/modules/09_leave/views/LeaveListMain.vue
index e0be0bfc7..481095986 100644
--- a/src/modules/09_leave/views/LeaveListMain.vue
+++ b/src/modules/09_leave/views/LeaveListMain.vue
@@ -1,10 +1,12 @@
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
+
+import type { DataRows } from "@/modules/09_leave/interface/response/leave";
 // importStroe
 import { useLeavelistDataStore } from "@/modules/09_leave/stores/LeaveStore";
 // importComponets
 import TableList from "@/modules/09_leave/components/2_Leave/TableList.vue";
-
+import ToolBar from "@/modules/09_leave/components/2_Leave/ToolBar.vue";
 const leaveStore = useLeavelistDataStore();
 const { fetchList, clearFilter } = leaveStore;
 
@@ -13,7 +15,7 @@ onMounted(() => {
 });
 // เรียกข้อมูลจาก API
 function fecthLeaveList() {
-  const data = [
+  const data: DataRows = [
     {
       leaveType: "ลาป่วย",
       name: "นายกัณฐิมา  กาฬสินธ์ุ",
@@ -96,11 +98,13 @@ function changTab() {
       <q-tab-panels v-model="leaveStore.tab" animated>
         <q-tab-panel name="1">
           <!-- <TableList1 /> -->
+          <ToolBar />
           <TableList />
         </q-tab-panel>
 
         <q-tab-panel name="2">
           <!-- <TabList2Vue /> -->
+          <ToolBar />
           <TableList />
         </q-tab-panel>
       </q-tab-panels>
diff --git a/src/modules/09_leave/views/WorkingMain.vue b/src/modules/09_leave/views/WorkingMain.vue
index 463a8f786..ffb36dbfa 100644
--- a/src/modules/09_leave/views/WorkingMain.vue
+++ b/src/modules/09_leave/views/WorkingMain.vue
@@ -5,6 +5,9 @@ import { useCounterMixin } from "@/stores/mixin";
 import { useWorklistDataStore } from "@/modules/09_leave/stores/WorkStore";
 //import Components
 import TableList from "@/modules/09_leave/components/1_Work/TableList.vue";
+import ToolBar from "@/modules/09_leave/components/1_Work/ToolBar.vue";
+// import Type
+import type { TableRows } from "@/modules/09_leave/interface/response/work";
 // use Store
 const mixin = useCounterMixin();
 const workStore = useWorklistDataStore();
@@ -16,7 +19,7 @@ onMounted(() => {
 });
 //เรียกข้อมูลรายการลงเวลาปฏิบัติงาน
 function fecthWorkList() {
-  const listData = [
+  const listData: TableRows[] = [
     {
       fullName: "นายกัณฐิมา  กาฬสินธ์ุ",
       timeIn: "8:04",
@@ -75,8 +78,7 @@ function fecthWorkList() {
   </div>
   <div>
     <q-card flat bordered class="col-12 q-mt-sm">
-      <div class="q-pa-md">
-        <TableList /></div
+      <div class="q-pa-md"><ToolBar /> <TableList /></div
     ></q-card>
   </div>
 </template>