From 63f307c70d2c7bdd5199f1361b8b43aed686517b Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Tue, 23 Jun 2026 13:41:10 +0700
Subject: [PATCH] feat(timestamp-special): add MultipleApprove  Special Lists

---
 src/api/09_leave/api.leave.ts                 |   1 +
 .../04_SpecialTime/DialogMultipleApprove.vue  | 325 ++++++++++++++++++
 src/modules/09_leave/interface/index/Main.ts  |   2 +
 .../09_leave/views/04_SpecialTimeMain.vue     |  26 +-
 4 files changed, 353 insertions(+), 1 deletion(-)
 create mode 100644 src/modules/09_leave/components/04_SpecialTime/DialogMultipleApprove.vue

diff --git a/src/api/09_leave/api.leave.ts b/src/api/09_leave/api.leave.ts
index d0229b204..3ea0ab8c3 100644
--- a/src/api/09_leave/api.leave.ts
+++ b/src/api/09_leave/api.leave.ts
@@ -25,6 +25,7 @@ export default {
   specialTime: () => `${leave}/admin/edit`,
   specialTimeApprove: (id: string) => `${leave}/admin/edit/approve/${id}`,
   specialTimeReject: (id: string) => `${leave}/admin/edit/reject/${id}`,
+  specialTimeApproveLists: `${leave}/admin/edit/approve-list`,
 
   /** รายการลา*/
   leaveType: () => `${leave}/type`,
diff --git a/src/modules/09_leave/components/04_SpecialTime/DialogMultipleApprove.vue b/src/modules/09_leave/components/04_SpecialTime/DialogMultipleApprove.vue
new file mode 100644
index 000000000..54484d7bd
--- /dev/null
+++ b/src/modules/09_leave/components/04_SpecialTime/DialogMultipleApprove.vue
@@ -0,0 +1,325 @@
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import { useQuasar } from "quasar";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
+import { useSpecialTimeStore } from "@/modules/09_leave/stores/SpecialTimeStore";
+import { usePagination } from "@/composables/usePagination";
+
+import type { QTableProps } from "quasar";
+import type { DataSpecialTime } from "@/modules/09_leave/interface/index/Main";
+
+import DialogHeader from "@/components/DialogHeader.vue";
+
+const $q = useQuasar();
+const store = useSpecialTimeStore();
+const {
+  hideLoader,
+  messageError,
+  showLoader,
+  success,
+  date2Thai,
+  dialogConfirm,
+  dialogMessageNotify,
+  dateToISO,
+} = useCounterMixin();
+const { pagination, params, onRequest } = usePagination("", fetchDataList);
+
+/** props*/
+const modal = defineModel<boolean>("modal", { required: true });
+const props = defineProps({
+  fetchData: { type: Function, default: () => {} },
+  dateThaiRange: { type: Function, default: () => {} },
+  columns: { type: Array as () => QTableProps["columns"], default: () => [] },
+  visibleColumnsMain: { type: Array as () => string[], default: () => [] },
+});
+
+const filterKeyword = ref<string>("");
+const filterStatus = ref<string>("PENDING");
+const filterDate = ref<[Date, Date] | null>([new Date(), new Date()]); //วันที่ประกาศ
+
+const rows = ref<DataSpecialTime[]>([]);
+const visibleColumns = ref<string[]>(props.visibleColumnsMain);
+const selected = ref<DataSpecialTime[]>([]);
+const reason = ref<string>("");
+
+/** ฟังก์ชันเรียกข้อมูลรายการลงเวลากรณีพิเศษ*/
+async function fetchDataList() {
+  showLoader();
+  selected.value = [];
+  await http
+    .get(config.API.specialTime(), {
+      params: {
+        ...params.value,
+        keyword: filterKeyword.value.trim(),
+        status: filterStatus.value,
+        startDate: filterDate.value ? dateToISO(filterDate.value[0]) : null,
+        endDate: filterDate.value ? dateToISO(filterDate.value[1]) : null,
+      },
+    })
+    .then(async (res) => {
+      const result = await res.data.result;
+      pagination.value.rowsNumber = result.total;
+      if (result.data.length > 0) {
+        rows.value = result.data.map((e: DataSpecialTime) => ({
+          ...e,
+          date: date2Thai(new Date(e.createdAt), false, true),
+          dateFix: date2Thai(new Date(e.checkDate)),
+          timeMorning:
+            e.startTimeMorning == null
+              ? "-"
+              : e.checkInEdit == true
+              ? e.startTimeMorning + " - " + e.endTimeMorning
+              : "-",
+          timeAfternoon:
+            e.startTimeAfternoon == null
+              ? "-"
+              : e.checkOutEdit == true
+              ? e.startTimeAfternoon + " - " + e.endTimeAfternoon
+              : "-",
+          checkIn: e.checkInTime,
+          checkOut: e.checkOutTime,
+          checkInStatus: store.convertStatus(e.checkInStatus),
+          checkOutStatus: store.convertStatus(e.checkOutStatus),
+          checkInStatusMain: e.checkInStatus,
+          checkOutStatusMain: e.checkOutStatus,
+        }));
+      } else {
+        rows.value = [];
+      }
+    })
+    .catch((e) => {
+      rows.value = [];
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/** ฟังก์ชันบันทึกข้อมูล*/
+function onSubmit() {
+  if (selected.value.length === 0) {
+    dialogMessageNotify($q, "กรุณาเลือกอย่างน้อย 1 รายการ");
+  } else {
+    dialogConfirm($q, async () => {
+      const payload = selected.value.map((e: DataSpecialTime) => ({
+        recId: e.id,
+        checkInTime: e.checkInTime,
+        checkOutTime: e.checkOutTime,
+        checkInStatus: e.checkInEdit ? "NORMAL" : e.checkInStatusMain,
+        checkOutStatus: e.checkOutEdit ? "NORMAL" : e.checkOutStatusMain,
+        reason: reason.value,
+      }));
+
+      try {
+        await http.put(config.API.specialTimeApproveLists, payload);
+        await props.fetchData();
+        success($q, "บันทึกข้อมูลสำเร็จ");
+        handleClose();
+      } catch (error) {
+        messageError($q, error);
+      } finally {
+        hideLoader();
+      }
+    });
+  }
+}
+
+/** ฟังก์ชั่นค้นหาข้อมูล */
+function onSearchData() {
+  pagination.value.page = 1;
+  fetchDataList();
+}
+
+/** ฟังก์ชันปิด*/
+function handleClose() {
+  modal.value = false;
+  selected.value = [];
+  rows.value = [];
+  reason.value = "";
+  filterDate.value = [new Date(), new Date()];
+  filterKeyword.value = "";
+  pagination.value.page = 1;
+}
+
+watch(modal, async (val) => {
+  if (val) {
+    await fetchDataList();
+  }
+});
+</script>
+
+<template>
+  <q-dialog v-model="modal" persistent>
+    <q-card style="min-width: 800px">
+      <q-form greedy @submit.prevent @validation-success="onSubmit">
+        <DialogHeader
+          tittle="อนุมัติการลงเวลากรณีพิเศษแบบหลายรายการ"
+          :close="handleClose"
+        />
+        <q-separator />
+        <q-card-section class="row q-col-gutter-sm">
+          <div class="col-12">
+            <div class="row q-col-gutter-sm">
+              <div class="col-xs-12 col-sm-6 col-md-3">
+                <datepicker
+                  v-model="filterDate"
+                  :locale="'th'"
+                  autoApply
+                  borderless
+                  range
+                  :enableTimePicker="false"
+                  week-start="0"
+                  @update:modelValue="onSearchData()"
+                >
+                  <template #year="{ year }">
+                    {{ year + 543 }}
+                  </template>
+                  <template #year-overlay-value="{ value }">
+                    {{ parseInt(value + 543) }}
+                  </template>
+                  <template #trigger>
+                    <q-input
+                      outlined
+                      dense
+                      class="full-width datepicker"
+                      :model-value="
+                        filterDate != null ? dateThaiRange(filterDate) : null
+                      "
+                    >
+                      <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 v-if="!$q.screen.xs && !$q.screen.sm" />
+              <div class="col-xs-12 col-sm-6 col-md-2">
+                <q-input
+                  standout
+                  dense
+                  v-model="filterKeyword"
+                  outlined
+                  placeholder="ค้นหาชื่อ-นามสกุล"
+                  @keydown.enter.prevent="onSearchData()"
+                >
+                  <template v-slot:append>
+                    <q-icon name="search" />
+                  </template>
+                </q-input>
+              </div>
+
+              <div class="col-xs-12 col-sm-6 col-md-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"
+                />
+              </div>
+            </div>
+          </div>
+
+          <div class="col-12">
+            <p-table
+              :columns="columns"
+              :rows="rows"
+              row-key="id"
+              flat
+              bordered
+              :paging="false"
+              dense
+              :visible-columns="visibleColumns"
+              :rows-per-page-options="[10, 25, 50, 100]"
+              v-model:pagination="pagination"
+              @request="onRequest"
+              selection="multiple"
+              v-model:selected="selected"
+            >
+              <template v-slot:header-selection="scope">
+                <q-checkbox
+                  keep-color
+                  color="primary"
+                  dense
+                  v-model="scope.selected"
+                />
+              </template>
+
+              <template v-slot:body="props">
+                <q-tr :props="props">
+                  <q-td>
+                    <q-checkbox
+                      keep-color
+                      color="primary"
+                      dense
+                      v-model="props.selected"
+                    />
+                  </q-td>
+                  <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-if="col.name === 'description'"
+                      class="table_ellipsis"
+                    >
+                      {{ col.value ?? "-" }}
+                    </div>
+                    <div v-else>
+                      {{ col.value ?? "-" }}
+                    </div>
+                  </q-td>
+                </q-tr>
+              </template>
+            </p-table>
+          </div>
+
+          <div class="col-12">
+            <q-input
+              outlined
+              v-model="reason"
+              dense
+              lazy-rules
+              type="textarea"
+              :rules="[(val:string) => !!val || 'กรุณาเหตุผลการอนุมัติ']"
+              label="เหตุผลการอนุมัติ"
+              hide-bottom-space
+              rows="3"
+            />
+          </div>
+          <span class="text-red"
+            >*หมายเหตุเลือกทั้งหมดเฉพาะรายการที่แสดงเท่านั้น</span
+          >
+        </q-card-section>
+        <q-separator />
+        <q-card-actions align="right">
+          <q-btn label="บันทึก" color="public" id="onSubmit" type="submit">
+            <q-tooltip>บันทึก</q-tooltip>
+          </q-btn>
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped></style>
diff --git a/src/modules/09_leave/interface/index/Main.ts b/src/modules/09_leave/interface/index/Main.ts
index 41766e80f..9381abe9c 100644
--- a/src/modules/09_leave/interface/index/Main.ts
+++ b/src/modules/09_leave/interface/index/Main.ts
@@ -68,6 +68,8 @@ interface DataSpecialTime {
   statusSort: number;
   timeAfternoon: string;
   timeMorning: string;
+  checkInStatusMain: string;
+  checkOutStatusMain: string;
 }
 export type {
   DataOption,
diff --git a/src/modules/09_leave/views/04_SpecialTimeMain.vue b/src/modules/09_leave/views/04_SpecialTimeMain.vue
index 1ea9ec44b..5c7890cdf 100644
--- a/src/modules/09_leave/views/04_SpecialTimeMain.vue
+++ b/src/modules/09_leave/views/04_SpecialTimeMain.vue
@@ -17,6 +17,7 @@ import type {
 
 import DialogReason from "@/components/Dialogs/PopupReason.vue";
 import DialogApprove from "@/modules/09_leave/components/04_SpecialTime/DialogApprove.vue";
+import DialogMultipleApprove from "@/modules/09_leave/components/04_SpecialTime/DialogMultipleApprove.vue";
 
 const $q = useQuasar(); // show dialog
 const mixin = useCounterMixin();
@@ -47,6 +48,7 @@ const name = ref<string>("");
 const id = ref<string>("");
 const dateDialog = ref<string>("");
 const dateFixDialog = ref<string>("");
+const modalMultiple = ref<boolean>(false);
 
 // ค้นหาในตาราง
 const filterKeyword = ref<string>("");
@@ -54,7 +56,7 @@ const filterStatus = ref<string>("PENDING");
 const filterDate = ref<[Date, Date] | null>([new Date(), new Date()]); //วันที่ประกาศ
 const optionStatus = ref<DataOption[]>(store.optionStatusMain);
 const rows = ref<DataSpecialTime[]>([]);
-const visibleColumns = ref<String[]>([
+const visibleColumns = ref<string[]>([
   "no",
   "fullName",
   "createdAt",
@@ -283,6 +285,20 @@ onMounted(async () => {
 <template>
   <div class="toptitle text-dark col-12 row items-center">
     รายการลงเวลากรณีพิเศษ
+    <q-space />
+    <q-btn
+      v-if="
+        checkPermission($route)?.attrIsUpdate &&
+        checkPermission($route)?.attrIsGet
+      "
+      class="q-px-md"
+      color="primary"
+      dense
+      unelevated
+      @click="modalMultiple = true"
+    >
+      อนุมัติแบบหลายรายการ
+    </q-btn>
   </div>
 
   <q-card flat bordered class="col-12 q-pa-md">
@@ -492,6 +508,14 @@ onMounted(async () => {
     :detailData="detailData"
     :fetch-data="fetchData"
   />
+
+  <DialogMultipleApprove
+    v-model:modal="modalMultiple"
+    :fetch-data="fetchData"
+    :dateThaiRange="dateThaiRange"
+    :columns="columns"
+    :visibleColumnsMain="visibleColumns"
+  />
 </template>
 
 <style></style>