From 8a472f23f7077b06d452c71c71ab5f9ac77a4420 Mon Sep 17 00:00:00 2001
From: AnandaTon <ananda@frappet.com>
Date: Thu, 2 Nov 2023 16:44:02 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B9=80=E0=B8=9E=E0=B8=B4=E0=B9=88=E0=B8=A1?=
 =?UTF-8?q?=20ui=20=E0=B8=A5=E0=B8=87=E0=B9=80=E0=B8=A7=E0=B8=A5=E0=B8=B2?=
 =?UTF-8?q?=E0=B8=81=E0=B8=A3=E0=B8=93=E0=B8=B5=E0=B8=9E=E0=B8=B4=E0=B9=80?=
 =?UTF-8?q?=E0=B8=A8=E0=B8=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/interface/request/main/main.ts            |   8 +-
 .../components/4_specialTime/Table.vue        | 246 ++++++++++++
 src/modules/09_leave/router.ts                | 116 +++---
 src/modules/09_leave/stores/LeaveStore.ts     | 359 +++++++++---------
 .../09_leave/stores/SpecialTimeStore.ts       | 104 +++++
 .../09_leave/views/SpecialTimeMain.vue        | 150 ++++++++
 .../6_BasicInformation/Director/Form.vue      | 122 ++++--
 .../11_discipline/interface/index/Main.ts     |   4 +-
 .../interface/request/disciplinary.ts         |   2 +-
 9 files changed, 853 insertions(+), 258 deletions(-)
 create mode 100644 src/modules/09_leave/components/4_specialTime/Table.vue
 create mode 100644 src/modules/09_leave/stores/SpecialTimeStore.ts
 create mode 100644 src/modules/09_leave/views/SpecialTimeMain.vue

diff --git a/src/interface/request/main/main.ts b/src/interface/request/main/main.ts
index a3533531f..7048e30d3 100644
--- a/src/interface/request/main/main.ts
+++ b/src/interface/request/main/main.ts
@@ -390,12 +390,18 @@ const menuList = readonly<any[]>([
       },
       {
         key: 9.3,
+        label: "ลงเวลากรณีพิเศษ",
+        path: "/special-time",
+        role: "leave",
+      },
+      {
+        key: 9.4,
         label: "รายการลา",
         path: "/leave-list",
         role: "leave",
       },
       {
-        key: 9.4,
+        key: 9.5,
         label: "รายงานสถิติ",
         path: "/statistics-report",
         role: "leave",
diff --git a/src/modules/09_leave/components/4_specialTime/Table.vue b/src/modules/09_leave/components/4_specialTime/Table.vue
new file mode 100644
index 000000000..da911aa3f
--- /dev/null
+++ b/src/modules/09_leave/components/4_specialTime/Table.vue
@@ -0,0 +1,246 @@
+<template>
+  <div class="q-pb-sm row q-col-gutter-sm">
+    <!--  -->
+    <div class="q-gutter-sm" v-if="nornmalData == true">
+      <datepicker
+        v-model="selectedDate"
+        :locale="'th'"
+        autoApply
+        month-picker
+        :enableTimePicker="false"
+      >
+        <template #year="{ year }">{{ year + 543 }}</template>
+        <template #year-overlay-value="{ value }">{{
+          parseInt(value + 543)
+        }}</template>
+        <template #trigger>
+          <q-input
+            :model-value="monthYearThai(dateMonth)"
+            dense
+            outlined
+            hide-bottom-space
+            style="width: 130px"
+          >
+            <template v-slot:prepend>
+              <q-icon
+                name="event"
+                class="cursor-pointer"
+                style="color: var(--q-primary)"
+              >
+              </q-icon>
+            </template>
+          </q-input>
+        </template>
+      </datepicker>
+    </div>
+    <q-space />
+    <!-- ค้นหาข้อความใน table -->
+    <q-input
+      standout
+      dense
+      :model-value="inputfilter"
+      ref="filterRef"
+      @update:model-value="updateInput"
+      outlined
+      debounce="300"
+      placeholder="ค้นหา"
+      style="max-width: 200px"
+      class="col-xs-12 col-sm-3 col-md-2"
+    >
+      <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
+      class="col-xs-12 col-sm-3 col-md-2 gt-xs"
+    >
+      <template> </template>
+    </q-select>
+  </div>
+  <d-table
+    ref="table"
+    flat
+    v-bind="attrs"
+    virtual-scroll
+    :virtual-scroll-sticky-size-start="48"
+    dense
+    :pagination-label="paginationLabel"
+    v-model:pagination="pagination"
+  >
+    <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 />
+        <q-th auto-width />
+        <q-th auto-width v-if="nornmalData == true" />
+      </q-tr>
+    </template>
+    <template #body="props">
+      <slot v-bind="props" name="columns"></slot>
+    </template>
+    <!-- <template v-slot:pagination="scope">
+      <q-pagination
+        v-model="pagination.page"
+        active-color="primary"
+        color="dark"
+        :max="scope.pagesNumber"
+        :max-pages="5"
+        size="sm"
+        boundary-links
+        direction-links
+      ></q-pagination>
+    </template> -->
+  </d-table>
+</template>
+<script setup lang="ts">
+import { ref, useAttrs } from "vue";
+import type { Pagination } from "@/modules/04_registry/interface/index/Main";
+import { useCounterMixin } from "@/stores/mixin";
+
+const mixin = useCounterMixin();
+const { hideLoader, monthYear2Thai } = mixin;
+const attrs = ref<any>(useAttrs());
+const paging = ref<boolean>(true);
+const pagination = ref({
+  // sortBy: "desc",
+  descending: false,
+  page: 1,
+  rowsPerPage: 10,
+});
+const paginationLabel = (start: string, end: string, total: string) => {
+  if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
+  else return start + "-" + end + " ใน " + total;
+};
+const table = ref<any>(null);
+const filterRef = ref<any>(null);
+const initialPagination = ref<Pagination>({
+  rowsPerPage: 0,
+});
+
+const props = defineProps({
+  count: Number,
+  pass: Number,
+  notpass: Number,
+
+  inputfilter: String,
+  name: String,
+  icon: String,
+  inputvisible: Array,
+  editvisible: Boolean,
+  add: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  validate: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  nornmalData: {
+    type: Boolean,
+    defualt: true,
+  },
+  conclude: {
+    type: Boolean,
+    defualt: false,
+  },
+});
+
+const emit = defineEmits([
+  "update:inputfilter",
+  "update:inputvisible",
+  "update:editvisible",
+]);
+const updateInput = (value: string | number | null) => {
+  emit("update:inputfilter", value);
+};
+const updateVisible = (value: []) => {
+  emit("update:inputvisible", value);
+};
+
+const checkAdd = () => {
+  props.add();
+};
+const selectedDate = ref<string>("");
+
+const dateMonth = ref<any>({
+  month: new Date().getMonth(),
+  year: new Date().getFullYear(),
+});
+console.log(dateMonth);
+
+const monthYearThai = (val: any) => {
+  if (val == null) return "";
+  else return monthYear2Thai(val.month, val.year);
+};
+const resetFilter = () => {
+  // reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
+  emit("update:inputfilter", "");
+  filterRef.value.focus();
+};
+</script>
+<style lang="scss">
+.icon-color {
+  color: #4154b3;
+}
+
+.custom-table2 {
+  max-height: 64vh;
+
+  .q-table tr:nth-child(odd) td {
+    background: white;
+  }
+
+  .q-table tr:nth-child(even) td {
+    background: #f8f8f8;
+  }
+
+  .q-table thead tr {
+    background: #ecebeb;
+  }
+
+  .q-table thead tr th {
+    position: sticky;
+  }
+
+  .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;
+  }
+
+  /* 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;
+  }
+}
+</style>
diff --git a/src/modules/09_leave/router.ts b/src/modules/09_leave/router.ts
index 3636190f8..1a7996cc3 100644
--- a/src/modules/09_leave/router.ts
+++ b/src/modules/09_leave/router.ts
@@ -1,61 +1,71 @@
-
-const workMain = () => import("@/modules/09_leave/views/WorkingMain.vue")
+const workMain = () => import("@/modules/09_leave/views/WorkingMain.vue");
 const leaveMain = () => import("@/modules/09_leave/views/LeaveListMain.vue");
-const reportMain = () => import("@/modules/09_leave/views/ReportMain.vue")
-const leaveDetail = () => import("@/modules//09_leave/components/2_Leave/DetailLeave.vue")
-const RoundMain = () => import("@/modules/09_leave/views/RoundMain.vue")
+const reportMain = () => import("@/modules/09_leave/views/ReportMain.vue");
+const leaveDetail = () =>
+  import("@/modules//09_leave/components/2_Leave/DetailLeave.vue");
+const RoundMain = () => import("@/modules/09_leave/views/RoundMain.vue");
+const SpecialTimeMain = () =>
+  import("@/modules/09_leave/views/SpecialTimeMain.vue");
 
 export default [
-    {
-        path: "/round-time",
-        name: "/round-time",
-        component: RoundMain,
-        meta: {
-            Auth: true,
-            Key: [9],
-            Role: "coin",
-        },
+  {
+    path: "/round-time",
+    name: "/round-time",
+    component: RoundMain,
+    meta: {
+      Auth: true,
+      Key: [9],
+      Role: "coin",
     },
-    {
-        path: "/work-list",
-        name: "/work-list",
-        component: workMain,
-        meta: {
-            Auth: true,
-            Key: [9],
-            Role: "coin",
-        },
+  },
+  {
+    path: "/work-list",
+    name: "/work-list",
+    component: workMain,
+    meta: {
+      Auth: true,
+      Key: [9],
+      Role: "coin",
     },
-    {
-        path: "/leave-list",
-        name: "/leave-list",
-        component: leaveMain,
-        meta: {
-            Auth: true,
-            Key: [9],
-            Role: "coin",
-        },
+  },
+  {
+    path: "/special-time",
+    name: "/special-time",
+    component: SpecialTimeMain,
+    meta: {
+      Auth: true,
+      Key: [9],
+      Role: "coin",
     },
-    {
-        path: "/leave/detail/:id",
-        name: "/leave/detail",
-        component: leaveDetail,
-        meta: {
-            Auth: true,
-            Key: [9],
-            Role: "coin",
-        },
+  },
+  {
+    path: "/leave-list",
+    name: "/leave-list",
+    component: leaveMain,
+    meta: {
+      Auth: true,
+      Key: [9],
+      Role: "coin",
     },
-    {
-        path: "/statistics-report",
-        name: "/statistics-report",
-        component: reportMain,
-        meta: {
-            Auth: true,
-            Key: [9],
-            Role: "coin",
-        },
+  },
+  {
+    path: "/leave/detail/:id",
+    name: "/leave/detail",
+    component: leaveDetail,
+    meta: {
+      Auth: true,
+      Key: [9],
+      Role: "coin",
     },
-
-
-]
\ No newline at end of file
+  },
+  {
+    path: "/statistics-report",
+    name: "/statistics-report",
+    component: reportMain,
+    meta: {
+      Auth: true,
+      Key: [9],
+      Role: "coin",
+    },
+  },
+];
diff --git a/src/modules/09_leave/stores/LeaveStore.ts b/src/modules/09_leave/stores/LeaveStore.ts
index 6a33dc509..f3e30f5c3 100644
--- a/src/modules/09_leave/stores/LeaveStore.ts
+++ b/src/modules/09_leave/stores/LeaveStore.ts
@@ -2,186 +2,195 @@ import { defineStore } from "pinia";
 import { ref } from "vue";
 import { useCounterMixin } from "@/stores/mixin";
 
-import type { DataOption } from "@/modules/09_leave/interface/index/Main"
+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"
-
+import type { DataRows } from "@/modules/09_leave/interface/response/leave";
 
 const mixin = useCounterMixin();
 const { date2Thai, showLoader, hideLoader } = mixin;
 export const useLeavelistDataStore = defineStore("leave", () => {
-    //TABMENU
-    const tab = ref<string>("1");
-    const amounttab1 = ref<number>(0)
-    const amounttab2 = ref<number>(0)
+  //TABMENU
+  const tab = ref<string>("1");
+  const amounttab1 = ref<number>(0);
+  const amounttab2 = ref<number>(0);
+  //ข้อมูลในตาราง
+  const mainData = ref<any>([]);
+  const rows = ref<DataRows[]>([]);
+  const columns = ref<QTableProps["columns"]>([]);
+  const visibleColumns = ref<string[]>([]);
+  const loadTable = ref<boolean>(false);
+  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) => e.status === "อยู่ระหว่างกำเนินการ"
+        ));
+    const filteramounttab1 = datalist.filter(
+      (e) => e.status === "อยู่ระหว่างกำเนินการ"
+    );
+    amounttab1.value = filteramounttab1.length;
+    amounttab2.value = datalist.length;
+    await fetchOption();
+    await searchDataFn(selectType.value, selectStatus.value);
+  }
+  //filter table
+  const selectYear = ref<string>("all");
+  const selectType = ref<string>("all");
+  const selectStatus = ref<string>("all");
+  const optionYear = ref<DataOption[]>([{ id: "all", name: "ทั้งหมด" }]);
+  const optionType = ref<DataOption[]>([]);
+  const optionStatus = ref<DataOption[]>([]);
+  const optionTypeMain = ref<DataOption[]>([]);
+  const optionStatusMain = ref<DataOption[]>([]);
+  const filterTable = ref<string>("");
+  function searchDataFn(type: string, status: string) {
+    // selectYear.value = selectYear.value || "all"
+    type = type || "all";
+    status = status || "all";
+    // showLoader()
+    loadTable.value = true;
+    if (selectYear.value == "all" && type == "all" && status == "all") {
+      rows.value = mainData.value;
+    } else if (selectYear.value !== "all" && type == "all" && status == "all") {
+      console.log("ค้นหาจากปี");
+    } else if (selectYear.value == "all" && type !== "all" && status == "all") {
+      console.log("ค้นหาจากประเภท");
+      rows.value = mainData.value.filter((e: any) => e.leaveType === type);
+    } else if (selectYear.value == "all" && type == "all" && status !== "all") {
+      console.log("ค้นหาจากสถานะ");
+      rows.value = mainData.value.filter((e: any) => e.status === status);
+    } else if (
+      selectYear.value !== "all" &&
+      type !== "all" &&
+      status == "all"
+    ) {
+      console.log("ค้นหาจากปีและประเภท");
+    } else if (
+      selectYear.value !== "all" &&
+      type == "all" &&
+      status !== "all"
+    ) {
+      console.log("ค้นหาจากปีและสถานะ");
+    } else if (
+      selectYear.value == "all" &&
+      type !== "all" &&
+      status !== "all"
+    ) {
+      console.log("ค้นหาจากประเภทและสถานะ");
+      rows.value = mainData.value.filter(
+        (e: any) => e.leaveType === type && e.status === status
+      );
+    } else console.log("ค้นหาจากทั้งหมด");
+    setTimeout(function () {
+      loadTable.value = false;
+    }, 500);
+  }
+  function clearFilter() {
+    selectYear.value = "all";
+    selectType.value = "all";
+    selectStatus.value = "all";
+    filterTable.value = "";
+  }
+
+  function fetchOption() {
+    let data = [];
+    data = mainData.value;
+    const double_leaveType = [
+      ...new Set(data.map((item: any) => item.leaveType)),
+    ];
+    // หา optionType
+    optionTypeMain.value = [{ id: "all", name: "ทั้งหมด" }];
+    for (let i = 1; i <= double_leaveType.length; i++) {
+      const type = double_leaveType[i - 1];
+      if (typeof type === "string") {
+        const listtype: DataOption = {
+          id: type,
+          name: type,
+        };
+        optionTypeMain.value.push(listtype);
+        optionType.value = optionTypeMain.value;
+      }
+    }
+    // หา optionStatus
+    const double_status = [...new Set(data.map((item: any) => item.status))];
+    optionStatusMain.value = [{ id: "all", name: "ทั้งหมด" }];
+    for (let i = 1; i <= double_status.length; i++) {
+      const status = double_status[i - 1];
+      if (typeof status === "string") {
+        const liststatus: DataOption = {
+          id: status,
+          name: status,
+        };
+        optionStatusMain.value.push(liststatus);
+        optionStatus.value = optionStatusMain.value;
+      }
+    }
+  }
+  // filter option
+  function filterOption(val: string, update: any, type: string) {
+    let data: DataOption[] = [];
+    let filter: DataOption[] = [];
+    if (type == "type") {
+      data = optionTypeMain.value;
+    } else if (type == "status") {
+      data = optionStatusMain.value;
+    }
+    if (val == "") {
+      update(() => {
+        filter = data;
+      });
+    } else {
+      update(() => {
+        filter = data.filter((e) => e.name.search(val) !== -1);
+      });
+    }
+    if (filter) {
+      if (type == "type") {
+        optionType.value = filter;
+      } else if (type == "status") {
+        optionStatus.value = filter;
+      }
+    }
+  }
+
+  // convertSatatus
+  function convertSatatus(val: string) {
+    switch (val) {
+      case "1":
+        return "ใหม่";
+      case "2":
+        return "อยู่ระหว่างกำเนินการ";
+      case "3":
+        return "อนุมัติ";
+    }
+  }
+  return {
+    tab,
+    amounttab1,
+    amounttab2,
     //ข้อมูลในตาราง
-    const mainData = ref<any>([])
-    const rows = ref<DataRows[]>([])
-    const columns = ref<QTableProps["columns"]>([]);
-    const visibleColumns = ref<string[]>([]);
-    const loadTable = ref<boolean>(false)
-    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) => e.status === "อยู่ระหว่างกำเนินการ")
-        const filteramounttab1 = datalist.filter((e) => e.status === "อยู่ระหว่างกำเนินการ")
-        amounttab1.value = filteramounttab1.length
-        amounttab2.value = datalist.length
-        await fetchOption()
-        await searchDataFn(selectType.value, selectStatus.value)
+    rows,
+    fetchList,
+    loadTable,
+    columns,
+    visibleColumns,
 
-
-    }
     //filter table
-    const selectYear = ref<string>('all')
-    const selectType = ref<string>('all')
-    const selectStatus = ref<string>('all')
-    const optionYear = ref<DataOption[]>([{ id: "all", name: 'ทั้งหมด' }])
-    const optionType = ref<DataOption[]>([])
-    const optionStatus = ref<DataOption[]>([])
-    const optionTypeMain = ref<DataOption[]>([])
-    const optionStatusMain = ref<DataOption[]>([])
-    const filterTable = ref<string>('')
-    function searchDataFn(type: string, status: string) {
-        // selectYear.value = selectYear.value || "all"
-        type = type || "all"
-        status = status || "all"
-        // showLoader()
-        loadTable.value = true
-        if (selectYear.value == "all" && type == "all" && status == "all") {
-            rows.value = mainData.value
-        } else if (selectYear.value !== "all" && type == "all" && status == "all") {
-            console.log("ค้นหาจากปี");
-        } else if (selectYear.value == "all" && type !== "all" && status == "all") {
-            console.log("ค้นหาจากประเภท");
-            rows.value = mainData.value.filter((e: any) => e.leaveType === type)
-        } else if (selectYear.value == "all" && type == "all" && status !== "all") {
-            console.log("ค้นหาจากสถานะ");
-            rows.value = mainData.value.filter((e: any) => e.status === status)
-        } else if (selectYear.value !== "all" && type !== "all" && status == "all") {
-            console.log("ค้นหาจากปีและประเภท");
-        } else if (selectYear.value !== "all" && type == "all" && status !== "all") {
-            console.log("ค้นหาจากปีและสถานะ");
-        } else if (selectYear.value == "all" && type !== "all" && status !== "all") {
-            console.log("ค้นหาจากประเภทและสถานะ");
-            rows.value = mainData.value.filter((e: any) => e.leaveType === type && e.status === status)
-        } else (console.log("ค้นหาจากทั้งหมด"))
-        setTimeout(function () {
-            loadTable.value = false
-        }, 500);
-
-    }
-    function clearFilter() {
-        selectYear.value = "all"
-        selectType.value = "all"
-        selectStatus.value = "all"
-        filterTable.value = ''
-    }
-
-    function fetchOption() {
-        let data = []
-        data = mainData.value
-        const double_leaveType = [
-            ...new Set(data.map((item: any) => item.leaveType)),
-        ];
-        // หา optionType
-        optionTypeMain.value = [{ id: "all", name: "ทั้งหมด" }];
-        for (let i = 1; i <= double_leaveType.length; i++) {
-            const type = double_leaveType[i - 1];
-            if (typeof type === 'string') {
-                const listtype: DataOption = {
-                    id: type,
-                    name: type,
-                };
-                optionTypeMain.value.push(listtype)
-                optionType.value = optionTypeMain.value
-            }
-        }
-        // หา optionStatus
-        const double_status = [
-            ...new Set(data.map((item: any) => item.status)),
-        ];
-        optionStatusMain.value = [{ id: "all", name: "ทั้งหมด" }];
-        for (let i = 1; i <= double_status.length; i++) {
-            const status = double_status[i - 1];
-            if (typeof status === 'string') {
-                const liststatus: DataOption = {
-                    id: status,
-                    name: status,
-                };
-                optionStatusMain.value.push(liststatus);
-                optionStatus.value = optionStatusMain.value
-            }
-        }
-    }
-    // filter option
-    function filterOption(val: string, update: any, type: string) {
-        let data: DataOption[] = []
-        let filter: DataOption[] = []
-        if (type == "type") {
-            data = optionTypeMain.value
-        } else if (type == "status") {
-            data = optionStatusMain.value
-        }
-        if (val == "") {
-            update(() => {
-                filter = data;
-            });
-        } else {
-            update(() => {
-                filter = data.filter(
-                    (e) => e.name.search(val) !== -1
-                );
-            });
-        }
-        if (filter) {
-            if (type == "type") {
-                optionType.value = filter
-            } else if (type == "status") {
-                optionStatus.value = filter
-            }
-        }
-    }
-
-
-    // convertSatatus
-    function convertSatatus(val: string) {
-        switch (val) {
-            case "1":
-                return "ใหม่"
-            case "2":
-                return "อยู่ระหว่างกำเนินการ"
-            case "3":
-                return "อนุมัติ"
-        }
-    }
-    return {
-        tab,
-        amounttab1,
-        amounttab2,
-        //ข้อมูลในตาราง
-        rows,
-        fetchList,
-        loadTable,
-        columns,
-        visibleColumns,
-
-        //filter table
-        filterTable,
-        selectYear,
-        selectType,
-        selectStatus,
-        optionYear,
-        optionType,
-        optionStatus,
-        clearFilter,
-        searchDataFn,
-        filterOption,
-
-
-    };
-})
+    filterTable,
+    selectYear,
+    selectType,
+    selectStatus,
+    optionYear,
+    optionType,
+    optionStatus,
+    clearFilter,
+    searchDataFn,
+    filterOption,
+  };
+});
diff --git a/src/modules/09_leave/stores/SpecialTimeStore.ts b/src/modules/09_leave/stores/SpecialTimeStore.ts
new file mode 100644
index 000000000..8afd5a108
--- /dev/null
+++ b/src/modules/09_leave/stores/SpecialTimeStore.ts
@@ -0,0 +1,104 @@
+import { defineStore } from "pinia";
+import { ref } from "vue";
+import type { QTableProps } from "quasar";
+import type {
+  investigateDisDataRowType,
+  DataOption,
+} from "@/modules/11_discipline/interface/index/Main";
+import { useCounterMixin } from "@/stores/mixin";
+const mixin = useCounterMixin();
+const { date2Thai } = mixin;
+
+export const useSpecialTimeStore = defineStore("LeaveSpecialTime", () => {
+  const rows = ref<any[]>([]);
+  async function fecthList(data: any[]) {
+    let datalist: any[] = data.map((e: any) => ({
+      fullname: e.fullname,
+      date: date2Thai(new Date(e.date)),
+      dateFix: date2Thai(new Date(e.dateFix)),
+      type: e.type,
+      reason: e.reason,
+    }));
+    rows.value = datalist;
+  }
+
+  const visibleColumns = ref<String[]>([
+    "no",
+    "fullname",
+    "date",
+    "dateFix",
+    "type",
+    "reason",
+  ]);
+
+  const columns = ref<QTableProps["columns"]>([
+    {
+      name: "no",
+      align: "center",
+      label: "ลำดับ",
+      sortable: false,
+      field: "no",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+    },
+    {
+      name: "fullname",
+      align: "left",
+      label: "ชื่อ-นามสกุล",
+      sortable: true,
+      field: "fullname",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+    },
+    {
+      name: "date",
+      align: "left",
+      label: "วันที่กรอก",
+      sortable: true,
+      field: "date",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+      sort: (a: string, b: string) =>
+        a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+    },
+    {
+      name: "dateFix",
+      align: "left",
+      label: "วันที่ขอแก้ไข",
+      sortable: true,
+      field: "dateFix",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+      sort: (a: string, b: string) =>
+        a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+    },
+    {
+      name: "type",
+      align: "left",
+      label: "ประเภท",
+      sortable: true,
+      field: "type",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+      sort: (a: string, b: string) =>
+        a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+    },
+    {
+      name: "reason",
+      align: "left",
+      label: "เหตุผล",
+      sortable: true,
+      field: "reason",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+      sort: (a: string, b: string) =>
+        a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+    },
+  ]);
+  return {
+    fecthList,
+    rows,
+    visibleColumns,
+    columns,
+  };
+});
diff --git a/src/modules/09_leave/views/SpecialTimeMain.vue b/src/modules/09_leave/views/SpecialTimeMain.vue
new file mode 100644
index 000000000..3286f8c40
--- /dev/null
+++ b/src/modules/09_leave/views/SpecialTimeMain.vue
@@ -0,0 +1,150 @@
+<script setup lang="ts">
+import { onMounted, ref, useAttrs } from "vue";
+import { useQuasar } from "quasar";
+import { useCounterMixin } from "@/stores/mixin";
+import type { Pagination } from "@/modules/03_recruiting/interface/index/Main";
+import Table from "@/modules/09_leave/components/4_specialTime/Table.vue";
+import { useSpecialTimeStore } from "@/modules/09_leave/stores/SpecialTimeStore";
+import DialogReason from "@/components/Dialogs/PopupReason.vue";
+
+import { useRouter } from "vue-router";
+const dataSpecialTime = useSpecialTimeStore();
+const { fecthList } = dataSpecialTime;
+const $q = useQuasar(); // show dialog
+const mixin = useCounterMixin();
+const router = useRouter();
+const { hideLoader, monthYear2Thai } = mixin;
+const filter = ref<string>(""); //search data table
+const initialPagination = ref<Pagination>({
+  rowsPerPage: 0,
+});
+const attrs = ref<any>(useAttrs());
+const modalUnapprove = ref(false);
+const pagination = ref({
+  // sortBy: "desc",
+  descending: false,
+  page: 1,
+  rowsPerPage: 10,
+});
+const dialogTitle = ref<string>("");
+const dialogDesc = ref<string>("");
+const name = ref("");
+const unapprove = async (fullname: string) => {
+  dialogTitle.value = " ไม่อนุมัติการลงเวลาพิเศษของ" + fullname;
+  name.value = fullname;
+  modalUnapprove.value = true;
+};
+const closeReason = () => {
+  modalUnapprove.value = false;
+};
+const clickSave = () => {
+  modalUnapprove.value = false;
+};
+// ค้นหาในตาราง
+const filterKeyword = ref<string>("");
+const filterRef = ref<HTMLInputElement | null>(null);
+const resetFilter = () => {
+  filterKeyword.value = "";
+  if (filterRef.value) {
+    filterRef.value.focus();
+  }
+};
+
+onMounted(async () => {
+  fecthList([
+    {
+      fullname: "นางสาวณัฐกา ชมสิน",
+      date: "2023-10-30",
+      dateFix: "2023-10-30",
+      type: "Checkin",
+      reason: "ลืม",
+      unapprove: "1",
+      approve: "0",
+    },
+    {
+      fullname: "นางสาวรัชภรณ์ ภักดี",
+      date: "2023-10-30",
+      dateFix: "2023-10-30",
+      type: "Checkin",
+      reason: "ลืม",
+      unapprove: "1",
+      approve: "0",
+    },
+    {
+      fullname: "นางสาวภาพรรณ ลออ",
+      date: "2023-10-30",
+      dateFix: "2023-10-30",
+      type: "Checkin",
+      reason: "ลืม",
+      unapprove: "1",
+      approve: "0",
+    },
+  ]);
+  await hideLoader();
+});
+</script>
+
+<template>
+  <div class="toptitle text-dark col-12 row items-center">
+    รายการลงเวลากรณีพิเศษ
+  </div>
+  <q-card flat bordered class="col-12 q-mt-sm q-pt-sm q-pa-md">
+    <div>
+      <Table
+        style="max-height: 80vh"
+        :rows="dataSpecialTime.rows"
+        :columns="dataSpecialTime.columns"
+        :filter="filter"
+        :visible-columns="dataSpecialTime.visibleColumns"
+        v-model:inputfilter="filter"
+        v-model:inputvisible="dataSpecialTime.visibleColumns"
+        :pagination="initialPagination"
+        :nornmalData="true"
+        :paging="true"
+        :titleText="''"
+      >
+        <template #columns="props">
+          <q-tr :props="props" class="cursor-pointer">
+            <q-td v-for="col in props.cols" :key="col.name" :props="props">
+              <div v-if="col.name == 'no'">
+                {{ props.rowIndex + 1 }}
+              </div>
+              <div v-else>
+                {{ col.value }}
+              </div>
+              <q-th auto-width />
+              <q-th auto-width />
+            </q-td>
+            <q-td auto-width>
+              <q-btn
+                color="orange"
+                class="q-px-md"
+                dense
+                unelevated
+                @click="unapprove(props.row.fullname)"
+                >ไม่อนุมัติ</q-btn
+              >
+              <span>{{ props.row.unapprove }}</span>
+            </q-td>
+            <q-td auto-width>
+              <q-btn color="primary" class="q-px-md" dense unelevated
+                >อนุมัติ</q-btn
+              >
+              <span>{{ props.row.approve }}</span>
+            </q-td>
+          </q-tr>
+        </template>
+      </Table>
+    </div>
+  </q-card>
+  <DialogReason
+    :modal="modalUnapprove"
+    :title="dialogTitle"
+    :desc="dialogDesc"
+    :click-close="closeReason"
+    label="เหตุผล"
+    :savaForm="clickSave"
+  />
+</template>
+
+<style></style>
diff --git a/src/modules/11_discipline/components/6_BasicInformation/Director/Form.vue b/src/modules/11_discipline/components/6_BasicInformation/Director/Form.vue
index 7b0d580d9..45ed7e1c5 100644
--- a/src/modules/11_discipline/components/6_BasicInformation/Director/Form.vue
+++ b/src/modules/11_discipline/components/6_BasicInformation/Director/Form.vue
@@ -34,13 +34,13 @@ const formData = reactive<FormData>({
 
 watch(props.data, async () => {
   // console.log("data==>", props.data)
-  formData.prefix = props.data.prefix
-  formData.firstname = props.data.firstname
-  formData.lastname = props.data.lastname
-  formData.position = props.data.position
-  formData.phone = props.data.phone
-  formData.responsibilities = props.data.responsibilities
-  formData.email = props.data.email
+  formData.prefix = props.data.prefix;
+  formData.firstname = props.data.firstname;
+  formData.lastname = props.data.lastname;
+  formData.position = props.data.position;
+  formData.phone = props.data.phone;
+  formData.responsibilities = props.data.responsibilities;
+  formData.email = props.data.email;
 });
 
 // เพิ่มบุคลากร
@@ -93,50 +93,120 @@ function onValidate() {
             <label>ค้นหาบุคคลากรที่อยู่ในระบบ</label>
           </div>
           <div class="col-6">
-            <q-input dense outlined v-model="idCard" label="รหัสบัตรประชาชน" ref="idCardRef" for="idCardRef"
-              :rules="[(val: string) => !!val || `${'กรุณากรอกรหัสบัตรประชาชน'}`]" />
+            <q-input
+              dense
+              outlined
+              v-model="idCard"
+              label="รหัสบัตรประชาชน"
+              ref="idCardRef"
+              for="idCardRef"
+              :rules="[(val: string) => !!val || `${'กรุณากรอกรหัสบัตรประชาชน'}`]"
+            />
           </div>
           <div class="col-2">
-            <q-btn unelevated dense color="primary" class="q-px-md q-py-sm" @click="addEmployee" label="เพิ่มบุคลากร"
-              id="addCustomer" />
+            <q-btn
+              unelevated
+              dense
+              color="primary"
+              class="q-px-md q-py-sm"
+              @click="addEmployee"
+              label="เพิ่มบุคลากร"
+              id="addCustomer"
+            />
           </div>
         </div>
 
         <div class="row q-px-md q-col-gutter-sm">
           <div class="col-3">
-            <q-input dense outlined v-model="formData.prefix" label="คำนำหน้า" ref="prefixRef" for="prefixRef"
-              :rules="[(val: string) => val !== null && val !== '' || `${'กรุณากรอกคำนำหน้า'}`]" />
+            <q-input
+              dense
+              outlined
+              v-model="formData.prefix"
+              label="คำนำหน้า"
+              ref="prefixRef"
+              for="prefixRef"
+              :rules="[(val: string) => val !== null && val !== '' || `${'กรุณากรอกคำนำหน้า'}`]"
+            />
           </div>
           <div class="col-3">
-            <q-input dense outlined v-model="formData.firstname" label="ชื่อ" ref="firstnameRef" for="firstnameRef"
-              :rules="[(val: string) => val !== null && val !== '' || `${'กรุณากรอกชื่อ'}`]" />
+            <q-input
+              dense
+              outlined
+              v-model="formData.firstname"
+              label="ชื่อ"
+              ref="firstnameRef"
+              for="firstnameRef"
+              :rules="[(val: string) => val !== null && val !== '' || `${'กรุณากรอกชื่อ'}`]"
+            />
           </div>
           <div class="col-3">
-            <q-input dense outlined v-model="formData.lastname" label="นามสกุล" ref="lastnameRef" for="lastnameRef"
-              :rules="[(val: string) => !!val || `${'กรุณากรอกนามสกุล'}`]" />
+            <q-input
+              dense
+              outlined
+              v-model="formData.lastname"
+              label="นามสกุล"
+              ref="lastnameRef"
+              for="lastnameRef"
+              :rules="[(val: string) => !!val || `${'กรุณากรอกนามสกุล'}`]"
+            />
           </div>
           <div class="col-3">
-            <q-input dense outlined v-model="formData.position" label="ตำแหน่ง" ref="positionRef" for="positionRef"
-              :rules="[(val: string) => !!val || `${'กรุณากรอกตำแหน่ง'}`]" />
+            <q-input
+              dense
+              outlined
+              v-model="formData.position"
+              label="ตำแหน่ง"
+              ref="positionRef"
+              for="positionRef"
+              :rules="[(val: string) => !!val || `${'กรุณากรอกตำแหน่ง'}`]"
+            />
           </div>
           <div class="col-3">
-            <q-input dense outlined v-model="formData.phone" label="เบอร์โทร" ref="phoneRef" for="phoneRef"
-              :rules="[(val: string) => !!val || `${'กรุณากรอกเบอร์โทร'}`]" />
+            <q-input
+              dense
+              outlined
+              v-model="formData.phone"
+              label="เบอร์โทร"
+              ref="phoneRef"
+              for="phoneRef"
+              :rules="[(val: string) => !!val || `${'กรุณากรอกเบอร์โทร'}`]"
+            />
           </div>
           <div class="col-3">
-            <q-input dense outlined v-model="formData.responsibilities" label="หน้าที่" ref="responsibilitiesRef"
-              for="responsibilitiesRef" :rules="[(val: string) => !!val || `${'กรุณากรอกหน้าที่'}`]" />
+            <q-input
+              dense
+              outlined
+              v-model="formData.responsibilities"
+              label="หน้าที่"
+              ref="responsibilitiesRef"
+              for="responsibilitiesRef"
+              :rules="[(val: string) => !!val || `${'กรุณากรอกหน้าที่'}`]"
+            />
           </div>
           <div class="col-3">
-            <q-input dense outlined v-model="formData.email" label="อีเมล" ref="emailRef" for="emailRef"
-              :rules="[(val: string) => !!val || `${'กรุณากรอกอีเมล'}`]" />
+            <q-input
+              dense
+              outlined
+              v-model="formData.email"
+              label="อีเมล"
+              ref="emailRef"
+              for="emailRef"
+              :rules="[(val: string) => !!val || `${'กรุณากรอกอีเมล'}`]"
+            />
           </div>
         </div>
 
         <q-separator />
         <div class="row col-12 q-pa-sm">
           <q-space />
-          <q-btn type="submit" flat round color="public" icon="mdi-content-save-outline" id="formSubmit">
+          <q-btn
+            type="submit"
+            flat
+            round
+            color="public"
+            icon="mdi-content-save-outline"
+            id="formSubmit"
+          >
             <q-tooltip>บันทึกข้อมูล</q-tooltip>
           </q-btn>
         </div>
diff --git a/src/modules/11_discipline/interface/index/Main.ts b/src/modules/11_discipline/interface/index/Main.ts
index 3e94e9ffc..a0eb25edb 100644
--- a/src/modules/11_discipline/interface/index/Main.ts
+++ b/src/modules/11_discipline/interface/index/Main.ts
@@ -15,8 +15,8 @@ interface investigateDisDataRowType {
   interrogated: string;
   fault: string | undefined;
   penaltyLevel: string | undefined;
-  caseFault: string | undefined;
-  dateInvestigate: string | undefined;
+  caseFault: string;
+  dateInvestigate: string | null;
   status: string | undefined;
   active: string | undefined;
 }
diff --git a/src/modules/11_discipline/interface/request/disciplinary.ts b/src/modules/11_discipline/interface/request/disciplinary.ts
index 29a27ff6b..5a131513d 100644
--- a/src/modules/11_discipline/interface/request/disciplinary.ts
+++ b/src/modules/11_discipline/interface/request/disciplinary.ts
@@ -43,4 +43,4 @@ interface disciplinaryRef {
   [key: string]: any;
 }
 
-export type { FormData, disciplinaryRef };
+export type { FormData, disciplinaryRef, investigateDisDataRowType };