From b272f73edd8ccc85b3f6ec52f7082d6e219314ea Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Fri, 6 Jun 2025 09:42:47 +0700
Subject: [PATCH] fix class modalfix ==> 03_recruiting

---
 .../03_recruiting/components/Career.vue       | 149 ++++++++----------
 .../03_recruiting/components/Education.vue    |   4 +-
 .../03_recruiting/components/Information.vue  |   8 +-
 .../views/01_compete/PeriodAdd.vue            |  15 +-
 .../views/02_qualify/DisablePeriodAdd.vue     |  28 ++--
 .../views/02_qualify/PeriodAdd.vue            |  11 +-
 6 files changed, 93 insertions(+), 122 deletions(-)

diff --git a/src/modules/03_recruiting/components/Career.vue b/src/modules/03_recruiting/components/Career.vue
index b36950613..acdf9b52f 100644
--- a/src/modules/03_recruiting/components/Career.vue
+++ b/src/modules/03_recruiting/components/Career.vue
@@ -1,20 +1,19 @@
 <script setup lang="ts">
-import type { QTableProps } from "quasar";
 import { onMounted, ref, watch } from "vue";
 import { useQuasar } from "quasar";
+
 import { useCounterMixin } from "@/stores/mixin";
+import { useExamDataStore } from "@/modules/03_recruiting/store";
+import { useRoute } from "vue-router";
 import http from "@/plugins/http";
 import config from "@/app.config";
-import { useExamDataStore } from "@/modules/03_recruiting/store";
-import type {
-  RequestItemsObject,
-  DataProps,
-} from "@/modules/03_recruiting/interface/request/Career";
-import type { ResponseObject } from "@/modules/03_recruiting/interface/response/Career";
+
+import type { QTableProps } from "quasar";
+import type { RequestItemsObject } from "@/modules/03_recruiting/interface/request/Career";
+
 import Table from "@/modules/03_recruiting/components/TableCan.vue";
 import DialogHeader from "@/modules/03_recruiting/components/DialogHeader.vue";
 import DialogFooter from "@/modules/03_recruiting/components/DialogFooter.vue";
-import { useRoute } from "vue-router";
 
 const props = defineProps({
   status: {
@@ -25,7 +24,14 @@ const props = defineProps({
 
 const $q = useQuasar();
 const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
-const { date2Thai, modalDelete, modalConfirm, dateToISO, success,onSearchDataTable } = mixin;
+const {
+  date2Thai,
+  modalDelete,
+  modalConfirm,
+  dateToISO,
+  success,
+  onSearchDataTable,
+} = mixin;
 const store = useExamDataStore();
 const { examData, changeExamColumns } = store;
 const id = ref<string>("");
@@ -67,9 +73,6 @@ const visibleColumns = ref<String[]>([]);
 examData.career.columns.length == 0
   ? (visibleColumns.value = [
       "position",
-      //   "group",
-      //   "pile",
-      //   "org",
       "type",
       "startDate",
       "endDate",
@@ -135,22 +138,6 @@ const columns = ref<QTableProps["columns"]>([
   },
 ]);
 
-watch(visibleColumns, async (count: String[], prevCount: String[]) => {
-  await changeExamColumns("career", count);
-});
-
-watch(startDate, async (count: Date, prevCount: Date) => {
-  await calDate();
-});
-
-watch(endDate, async (count: Date, prevCount: Date) => {
-  await calDate();
-});
-
-onMounted(async () => {
-  await fetchData();
-});
-
 const calDate = async () => {
   let _startDate = new Date(startDate.value.toISOString().substr(0, 10));
   let _endDate = new Date(endDate.value.toISOString().substr(0, 10));
@@ -246,6 +233,8 @@ const calDateSplit = async (startDate: Date, endDate: Date) => {
 
 const fetchData = async () => {
   showLoader();
+  rows.value = [];
+  total.value = "-";
   await http
     .get(config.API.candidateCareer(candidateId.value))
     .then((res) => {
@@ -253,8 +242,6 @@ const fetchData = async () => {
       var yearDiff = 0;
       var monthDiff = 0;
       var dayDiff = 0;
-      total.value = "-";
-      rows.value = [];
       data.map((r: any) => {
         rows.value.push({
           ...r,
@@ -294,9 +281,7 @@ const fetchData = async () => {
     });
 };
 
-/**
- * กดดูข้อมูลก่อนหน้า
- */
+/** ฟังก์ชันกดดูข้อมูลก่อนหน้า*/
 const clickPrevious = async () => {
   rowIndex.value -= 1;
   const row = rows.value[rowIndex.value];
@@ -309,12 +294,10 @@ const clickPrevious = async () => {
   rangeDate.value = row.rangeDate;
   type.value = row.type;
   id.value = row.id;
-  await checkRowPage();
+  checkRowPage();
 };
 
-/**
- * กดดูข้อมูลต่อไป
- */
+/** ฟังก์ชันกดดูข้อมูลต่อไป*/
 const clickNext = () => {
   rowIndex.value += 1;
   const row = rows.value[rowIndex.value];
@@ -330,9 +313,7 @@ const clickNext = () => {
   checkRowPage();
 };
 
-/**
- * เช็คปุ่มดูข้อมูล ย้อน กับ ต่อไป ว่าต้องแสดงไหม
- */
+/** ฟังก์ชันเช็คปุ่มดูข้อมูล ย้อน กับ ต่อไป ว่าต้องแสดงไหม*/
 const checkRowPage = () => {
   editRow.value = false;
   next.value = true;
@@ -345,21 +326,21 @@ const checkRowPage = () => {
   }
 };
 
-/**
- * กดปุ่มแก้ไขใน dialog
- */
+/** กดปุ่มแก้ไขใน dialog*/
 const clickEdit = () => {
   next.value = false;
   previous.value = false;
 };
 
-/**
- * กดปุ่มเพิ่มด้านบน table
- */
+/** กดปุ่มเพิ่มด้านบน table*/
 const clickAdd = () => {
   addRow();
 };
 
+/**
+ * กดลบข้อมูลใน table
+ * @param row ข้อมูลที่ต้องการลบ
+ */
 const checkDelete = (row: RequestItemsObject) => {
   rawItem.value = row;
   modalDelete(
@@ -370,31 +351,28 @@ const checkDelete = (row: RequestItemsObject) => {
   );
 };
 
-/**
- * ลบข้อมูลใน table
- */
+/** ลบข้อมูลใน table*/
 const clickDeleteRow = async () => {
   if (rawItem.value != null) {
     showLoader();
     await http
       .delete(config.API.candidateAdminCareer(rawItem.value.id))
-      .then(() => {
+      .then(async () => {
+        await fetchData();
         success($q, "ลบข้อมูลสำเร็จ");
       })
       .catch((e) => {
         messageError($q, e);
       })
-      .finally(async () => {
-        await fetchData();
+      .finally(() => {
+        hideLoader();
       });
   } else {
     await fetchData();
   }
 };
 
-/**
- * กดบันทึกใน dialog
- */
+/** กดบันทึกใน dialog*/
 const clickSave = async () => {
   myForm.value.validate().then(async (result: boolean) => {
     if (result) {
@@ -407,9 +385,7 @@ const clickSave = async () => {
   });
 };
 
-/**
- * บันทึกเพิ่มข้อมูล
- */
+/** ฟังก์ชันบันทึกเพิ่มข้อมูล*/
 const saveData = async () => {
   showLoader();
   await http
@@ -423,7 +399,8 @@ const saveData = async () => {
       rangeDate: rangeDate.value,
       type: type.value,
     })
-    .then(() => {
+    .then(async () => {
+      await fetchData();
       success($q, "บันทึกข้อมูลสำเร็จ");
     })
     .catch((e) => {
@@ -431,13 +408,11 @@ const saveData = async () => {
     })
     .finally(async () => {
       modal.value = false;
-      await fetchData();
+      hideLoader();
     });
 };
 
-/**
- * บันทึกแก้ไขข้อมูล
- */
+/** บันทึกแก้ไขข้อมูล*/
 const editData = async () => {
   showLoader();
   await http
@@ -451,7 +426,8 @@ const editData = async () => {
       rangeDate: rangeDate.value,
       type: type.value,
     })
-    .then(() => {
+    .then(async () => {
+      await fetchData();
       success($q, "บันทึกข้อมูลสำเร็จ");
     })
     .catch((e) => {
@@ -459,10 +435,10 @@ const editData = async () => {
     })
     .finally(async () => {
       modal.value = false;
-      await fetchData();
     });
 };
 
+/** กดปิด dialog และเช็คว่ามีการแก้ไขข้อมูลหรือไม่*/
 const checkClose = async () => {
   if (editRow.value == true) {
     modalConfirm(
@@ -477,9 +453,7 @@ const checkClose = async () => {
   await fetchData();
 };
 
-/**
- * กดปิด dialog
- */
+/** กดปิด dialog*/
 const clickClose = async () => {
   modal.value = false;
   editRow.value = false;
@@ -510,9 +484,7 @@ const selectData = (props: any) => {
   previous.value = false;
 };
 
-/**
- * กดปุ่มเพิ่มบน table
- */
+/** กดปุ่มเพิ่มบน table*/
 const addRow = () => {
   modalEdit.value = false;
   modal.value = true;
@@ -526,9 +498,7 @@ const addRow = () => {
   type.value = null;
 };
 
-/**
- * เช็คว่ามีการแก้ไขข้อมูล
- */
+/** เช็คว่ามีการแก้ไขข้อมูล*/
 const clickEditRow = () => {
   myForm.value.validate();
   editRow.value = true;
@@ -538,9 +508,7 @@ const clickEditRowPosition = () => {
   editRow.value = true;
 };
 
-/**
- * validate input ใน dialog
- */
+/** validate input ใน dialog*/
 const validateData = async () => {
   checkValidate.value = true;
   await myForm.value.validate().then((result: boolean) => {
@@ -561,6 +529,7 @@ const getClass = (val: boolean) => {
   };
 };
 
+/** ฟังก์ชันค้นหาข้อมูลในตาราง */
 function onSearch() {
   rows.value = onSearchDataTable(
     filter.value,
@@ -568,6 +537,26 @@ function onSearch() {
     columns.value ? columns.value : []
   );
 }
+
+/** watch ข้อมูลที่เปลี่ยนแปลงใน visibleColumns */
+watch(visibleColumns, async (count: String[], prevCount: String[]) => {
+  await changeExamColumns("career", count);
+});
+
+/** watch ข้อมูลที่เปลี่ยนแปลงใน startDate และ endDate */
+watch(startDate, async (count: Date, prevCount: Date) => {
+  await calDate();
+});
+
+/** watch ข้อมูลที่เปลี่ยนแปลงใน endDate */
+watch(endDate, async (count: Date, prevCount: Date) => {
+  await calDate();
+});
+
+/** Hook ที่ทำงานเมื่อ component ถูก mount */
+onMounted(async () => {
+  await fetchData();
+});
 </script>
 
 <template>
@@ -829,8 +818,4 @@ function onSearch() {
   </q-dialog>
 </template>
 
-<style lang="scss">
-.modalfix {
-  position: fixed !important;
-}
-</style>
+<style lang="scss"></style>
diff --git a/src/modules/03_recruiting/components/Education.vue b/src/modules/03_recruiting/components/Education.vue
index 32f4ca84c..fe8553521 100644
--- a/src/modules/03_recruiting/components/Education.vue
+++ b/src/modules/03_recruiting/components/Education.vue
@@ -141,7 +141,7 @@ const getClass = (val: boolean) => {
             v-model="defaultEducation.educationLevelExamId"
             :rules="[(val:string) => !!val || `${'กรุณาเลือก วุฒิที่ใช้สมัครสอบ'}`]"
             :label="`${'วุฒิที่ใช้สมัครสอบ'}`"
-            @update:model-value="(value) => checkInputName()"
+            @update:model-value="() => checkInputName()"
           />
         </div>
         <div class="col-xs-12 col-sm-3" v-if="showEducationName">
@@ -233,7 +233,7 @@ const getClass = (val: boolean) => {
                 "
                 :model-value="date2Thai(defaultEducation.educationEndDate)"
                 :rules="[
-                  (val) => !!val || `${'กรุณาเลือกวันที่สำเร็จการศึกษา'}`,
+                  (val:string) => !!val || `${'กรุณาเลือกวันที่สำเร็จการศึกษา'}`,
                 ]"
                 hide-bottom-space
                 :label="`${'วันที่สำเร็จการศึกษา'}`"
diff --git a/src/modules/03_recruiting/components/Information.vue b/src/modules/03_recruiting/components/Information.vue
index 42c8a2995..57a0a1dd0 100644
--- a/src/modules/03_recruiting/components/Information.vue
+++ b/src/modules/03_recruiting/components/Information.vue
@@ -213,8 +213,8 @@ onMounted(async () => {
           v-model="defaultInformation.cardid"
           maxlength="13"
           :rules="[
-            (val) => val.length == 13 || `${'กรุณากรอก เลขประจำตัวประชาชน'}`,
-            (val) =>
+            (val:string) => val.length == 13 || `${'กรุณากรอก เลขประจำตัวประชาชน'}`,
+            (val:string) =>
               /^[0-9]*$/.test(val) ||
               `${'กรุณากรอกเลขประจำตัวประชาชนให้ถูกต้อง'}`,
           ]"
@@ -383,8 +383,8 @@ onMounted(async () => {
           :borderless="!(status == 'checkRegister' || status == 'payment')"
           v-model="defaultInformation.tel"
           :rules="[
-            (val) => !!val || '* กรุณากรอกข้อมูลหมายเลขโทรศัพท์',
-            (val) =>
+            (val:string) => !!val || '* กรุณากรอกข้อมูลหมายเลขโทรศัพท์',
+            (val:string) =>
               (val.length >= 9 && val.length <= 10 && val.startsWith('0')) ||
               'กรุณากรอกข้อมูลหมายเลขโทรศัพท์ให้ถูกต้อง',
           ]"
diff --git a/src/modules/03_recruiting/views/01_compete/PeriodAdd.vue b/src/modules/03_recruiting/views/01_compete/PeriodAdd.vue
index d26d00c2d..75fe25a8f 100644
--- a/src/modules/03_recruiting/views/01_compete/PeriodAdd.vue
+++ b/src/modules/03_recruiting/views/01_compete/PeriodAdd.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import type { QTableProps } from "quasar";
 import { onMounted, ref, watch, computed } from "vue";
 import { useQuasar, QForm } from "quasar";
 import { useRouter, useRoute } from "vue-router";
@@ -21,7 +20,6 @@ const route = useRoute();
 const {
   date2Thai,
   success,
-  dateToISO,
   messageError,
   showLoader,
   hideLoader,
@@ -137,13 +135,14 @@ async function uploadDocData() {
     showLoader();
     await http
       .put(config.API.periodRecruitDoc(id.value), formData)
-      .then((res) => {})
+      .then(() => {
+        success($q, "บันทึกข้อมูลสำเร็จ");
+      })
       .catch((e) => {
         messageError($q, e);
       })
       .finally(async () => {
         hideLoader();
-        success($q, "บันทึกข้อมูลสำเร็จ");
         clickBack();
       });
   } else {
@@ -162,7 +161,7 @@ async function uploadImgData() {
     showLoader();
     await http
       .put(config.API.periodRecruitImg(id.value), formData)
-      .then((res) => {})
+      .then(() => {})
       .catch((e) => {
         messageError($q, e);
       })
@@ -417,7 +416,6 @@ onMounted(async () => {
           </div>
           <div class="col-xs-12 col-sm-4 col-md-1" v-if="announcementExam">
             <datepicker
-              menu-class-name="modalfix"
               v-model="yearly"
               :locale="'th'"
               autoApply
@@ -467,7 +465,6 @@ onMounted(async () => {
           </div>
           <div class="col-xs-12 col-sm-4 col-md-3" v-if="announcementExam">
             <datepicker
-              menu-class-name="modalfix"
               v-model="dateExam"
               :locale="'th'"
               autoApply
@@ -503,7 +500,6 @@ onMounted(async () => {
           </div>
           <div class="col-xs-12 col-sm-3 col-md-3">
             <datepicker
-              menu-class-name="modalfix"
               v-model="dateAnnouncement"
               :locale="'th'"
               autoApply
@@ -546,7 +542,6 @@ onMounted(async () => {
           </div>
           <div class="col-xs-12 col-sm-3 col-md-3" v-if="announcementExam">
             <datepicker
-              menu-class-name="modalfix"
               v-model="dateRegister"
               :locale="'th'"
               autoApply
@@ -588,7 +583,6 @@ onMounted(async () => {
             v-if="announcementExam && isFeeNotZero"
           >
             <datepicker
-              menu-class-name="modalfix"
               v-model="datePayment"
               :locale="'th'"
               autoApply
@@ -628,7 +622,6 @@ onMounted(async () => {
 
           <div class="col-xs-12 col-sm-3 col-md-3" v-if="announcementExam">
             <datepicker
-              menu-class-name="modalfix"
               v-model="dateAnnounce"
               :locale="'th'"
               autoApply
diff --git a/src/modules/03_recruiting/views/02_qualify/DisablePeriodAdd.vue b/src/modules/03_recruiting/views/02_qualify/DisablePeriodAdd.vue
index 962c053b4..97de2e2f6 100644
--- a/src/modules/03_recruiting/views/02_qualify/DisablePeriodAdd.vue
+++ b/src/modules/03_recruiting/views/02_qualify/DisablePeriodAdd.vue
@@ -21,12 +21,10 @@ const route = useRoute();
 const {
   date2Thai,
   success,
-  dateToISO,
-  notifyError,
   messageError,
   showLoader,
   hideLoader,
-  convertDateToAPI
+  convertDateToAPI,
 } = mixin;
 const myForm = ref<QForm | null>(null); //form data input
 const name = ref<string>("");
@@ -141,13 +139,21 @@ function sendData() {
     name: name.value,
     note: note.value,
     paymentEndDate:
-      datePayment.value !== null ? convertDateToAPI(datePayment.value[1]) : null,
+      datePayment.value !== null
+        ? convertDateToAPI(datePayment.value[1])
+        : null,
     paymentStartDate:
-      datePayment.value !== null ? convertDateToAPI(datePayment.value[0]) : null,
+      datePayment.value !== null
+        ? convertDateToAPI(datePayment.value[0])
+        : null,
     registerEndDate:
-      dateRegister.value !== null ? convertDateToAPI(dateRegister.value[1]) : null,
+      dateRegister.value !== null
+        ? convertDateToAPI(dateRegister.value[1])
+        : null,
     registerStartDate:
-      dateRegister.value !== null ? convertDateToAPI(dateRegister.value[0]) : null,
+      dateRegister.value !== null
+        ? convertDateToAPI(dateRegister.value[0])
+        : null,
     round: round.value,
     year: yearly.value,
     announcementDate:
@@ -312,7 +318,7 @@ async function uploadDocData() {
     showLoader();
     await http
       .put(config.API.periodExamDoc(id.value), formData)
-      .then((res) => {})
+      .then(() => {})
       .catch((e) => {
         messageError($q, e);
       })
@@ -405,7 +411,6 @@ onMounted(async () => {
           </div>
           <div class="col-xs-12 col-sm-4 col-md-1" v-if="announcementExam">
             <datepicker
-              menu-class-name="modalfix"
               v-model="yearly"
               :locale="'th'"
               autoApply
@@ -453,7 +458,6 @@ onMounted(async () => {
           </div>
           <div class="col-xs-12 col-sm-3 col-md-3" v-if="announcementExam">
             <datepicker
-              menu-class-name="modalfix"
               v-model="dateExam"
               :locale="'th'"
               autoApply
@@ -489,7 +493,6 @@ onMounted(async () => {
           </div>
           <div class="col-xs-12 col-sm-3 col-md-3">
             <datepicker
-              menu-class-name="modalfix"
               v-model="dateAnnouncement"
               :locale="'th'"
               autoApply
@@ -527,7 +530,6 @@ onMounted(async () => {
           </div>
           <div class="col-xs-12 col-sm-3 col-md-3" v-if="announcementExam">
             <datepicker
-              menu-class-name="modalfix"
               v-model="dateRegister"
               :locale="'th'"
               autoApply
@@ -568,7 +570,6 @@ onMounted(async () => {
             v-if="announcementExam && fee != 0"
           >
             <datepicker
-              menu-class-name="modalfix"
               v-model="datePayment"
               :locale="'th'"
               autoApply
@@ -609,7 +610,6 @@ onMounted(async () => {
 
           <div class="col-xs-12 col-sm-3 col-md-3" v-if="announcementExam">
             <datepicker
-              menu-class-name="modalfix"
               v-model="dateAnnounce"
               :locale="'th'"
               autoApply
diff --git a/src/modules/03_recruiting/views/02_qualify/PeriodAdd.vue b/src/modules/03_recruiting/views/02_qualify/PeriodAdd.vue
index 420ceae43..c2490bc33 100644
--- a/src/modules/03_recruiting/views/02_qualify/PeriodAdd.vue
+++ b/src/modules/03_recruiting/views/02_qualify/PeriodAdd.vue
@@ -1,7 +1,7 @@
 <!-- page:จัดการรอบการสอบ สรรหา -->
 <script setup lang="ts">
 import type { QTableProps } from "quasar";
-import { onMounted, ref, watch, computed } from "vue";
+import { onMounted, ref, watch } from "vue";
 import { useQuasar, QForm } from "quasar";
 import { useRouter, useRoute } from "vue-router";
 
@@ -36,7 +36,7 @@ const route = useRoute();
 const {
   date2Thai,
   success,
-  dateToISO,
+  
   messageError,
   showLoader,
   hideLoader,
@@ -46,7 +46,6 @@ const {
 const checkRoutePermisson = ref<boolean>(
   route.name == "qualifyPeriodEditDetail"
 ); //เช็คชื่อ route
-const fileList = ref<any[]>([]);
 const myForm = ref<QForm | null>(null); //form data input
 const name = ref<string>("");
 const note = ref<string>("");
@@ -967,7 +966,6 @@ onMounted(async () => {
           </div>
           <div class="col-xs-12 col-sm-4 col-md-1" v-if="announcementExam">
             <datepicker
-              menu-class-name="modalfix"
               v-model="yearly"
               :locale="'th'"
               :readonly="checkRoutePermisson"
@@ -995,7 +993,6 @@ onMounted(async () => {
           </div>
           <div class="col-xs-12 col-sm-3 col-md-3" v-if="announcementExam">
             <datepicker
-              menu-class-name="modalfix"
               v-model="dateExam"
               :locale="'th'"
               autoApply
@@ -1035,7 +1032,6 @@ onMounted(async () => {
           </div>
           <div class="col-xs-12 col-sm-3 col-md-3">
             <datepicker
-              menu-class-name="modalfix"
               v-model="dateAnnouncement"
               :locale="'th'"
               :readonly="checkRoutePermisson"
@@ -1075,7 +1071,6 @@ onMounted(async () => {
           </div>
           <div class="col-xs-12 col-sm-3 col-md-3" v-if="announcementExam">
             <datepicker
-              menu-class-name="modalfix"
               v-model="dateRegister"
               :locale="'th'"
               autoApply
@@ -1120,7 +1115,6 @@ onMounted(async () => {
             v-if="announcementExam && fee != 0"
           >
             <datepicker
-              menu-class-name="modalfix"
               v-model="datePayment"
               :readonly="checkRoutePermisson"
               :locale="'th'"
@@ -1161,7 +1155,6 @@ onMounted(async () => {
           </div>
           <div class="col-xs-12 col-sm-3 col-md-3" v-if="announcementExam">
             <datepicker
-              menu-class-name="modalfix"
               v-model="dateAnnounce"
               :locale="'th'"
               autoApply