เพิ่ม validate

src/modules/06_retirement/components/ExitInterview/exitMain.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref, onMounted, computed } from "vue";
-import { useQuasar } from "quasar";
+import { useQuasar, QForm } from "quasar";
 import { useRouter } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
 import { useRetirementDataStore } from "@/modules/06_retirement/store";
@@ -20,7 +20,16 @@ const router = useRouter();
 const mixin = useCounterMixin();
 const RetirementData = useRetirementDataStore();
 
-const { messageError, date2Thai, showLoader, hideLoader, success } = mixin;
+const myForm = ref<QForm>();
+
+const {
+  messageError,
+  date2Thai,
+  showLoader,
+  hideLoader,
+  success,
+  dialogConfirm,
+} = mixin;
 const { statusText } = RetirementData;
 
 const rows = ref<ResponseItems[]>([]);
@@ -164,10 +173,10 @@ const resetFilter = () => {
   filterRef.value.focus();
 };
 
-const openModalCalendar = (rows:any) => {
+const openModalCalendar = (rows: any) => {
   openModal();
   dateBreak.value = null;
-  id.value= rows.id;
+  id.value = rows.id;
 };
 
 const openModalOrder = () => {
@@ -208,7 +217,7 @@ const fecthlist = async () => {
           suggestFriendsReason: r.suggestFriendsReason ?? "",
           suggestion: r.suggestion ?? "",
           status: r.status ?? "",
-          appointDate: date2Thai(r.appointDate)
+          appointDate: date2Thai(r.appointDate),
         });
       });
 
@@ -222,25 +231,31 @@ const fecthlist = async () => {
       hideLoader();
     });
 };
-const saveAppoint = async () =>{
-   const body = {
-    appointDate : dateBreak.value
-  };
-  showLoader();
-  await http
-    .put(config.API.AppointInterview(id.value),body)
-    .then((res: any) => {
-      success($q, "ส่งไปออกคำสั่งลาออกสำเร็จ");
-      closeModal();
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      await fecthlist();
-      hideLoader();
-    });
-}
+const saveAppoint = async () => {
+  await myForm.value!.validate().then(async (result: boolean) => {
+    if (result) {
+      dialogConfirm($q, async () => {
+        const body = {
+          appointDate: dateBreak.value,
+        };
+        showLoader();
+        await http
+          .put(config.API.AppointInterview(id.value), body)
+          .then((res: any) => {
+            success($q, "ส่งไปออกคำสั่งลาออกสำเร็จ");
+            closeModal();
+          })
+          .catch((e) => {
+            messageError($q, e);
+          })
+          .finally(async () => {
+            await fecthlist();
+            hideLoader();
+          });
+      });
+    }
+  });
+};
 // const saveOrder = async () => {
 //   const id = selected.value.map((r) => r.id);
 //   const body = {
@@ -415,7 +430,9 @@ const saveAppoint = async () =>{
                     router.push(`/exit-Interview/questionnair/${props.row.id}`)
                   "
                 >
-                  {{ props.row.appointDate == null ? "-":props.row.appointDate }}
+                  {{
+                    props.row.appointDate == null ? "-" : props.row.appointDate
+                  }}
                 </q-td>
                 <q-td
                   key="datetext"
@@ -428,7 +445,7 @@ const saveAppoint = async () =>{
                 </q-td>
                 <q-td auto-width>
                   <q-btn
-                  v-if="props.row.appointDate == null"
+                    v-if="props.row.appointDate == null"
                     icon="mdi-calendar"
                     size="12px"
                     color="blue-7"
@@ -565,9 +582,9 @@ const saveAppoint = async () =>{
     </q-card>
   </q-dialog> -->
 
-  <q-dialog v-model="modal" persistent >
+  <q-dialog v-model="modal" persistent>
     <q-card style="width: 800px">
-      <q-form ref="myFormConfirm">
+      <q-form ref="myForm">
         <DialogHeader
           title="กําหนดวันนัดหมายเพื่อทําการสัมภาษณ์การลาออก"
           :close="closeModal"
@@ -600,6 +617,7 @@ const saveAppoint = async () =>{
                   "
                   hide-bottom-space
                   :label="`${' วันนัดหมายเพื่อทําการสัมภาษณ์การลาออก'}`"
+                  :rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่'}`]"
                 >
                   <template v-slot:prepend>
                     <q-icon
@@ -624,7 +642,7 @@ const saveAppoint = async () =>{
       >
         <q-tooltip>บันทึก</q-tooltip>
       </q-btn> -->
-        <DialogFooter :editvisible="true" :save ="saveAppoint" />
+        <DialogFooter :editvisible="true" :save="saveAppoint" />
       </q-form>
     </q-card>
   </q-dialog>

src/modules/06_retirement/components/resign/ResignByid.vue

@@ -1031,6 +1031,7 @@ const statusOrder = (val: boolean) => {
                   "
                   hide-bottom-space
                   :label="`${' วันสุดท้ายที่ยับยั้ง'}`"
+                  :rules="[(val) => !!val || 'กรุณาเลือกวันที่']"
                 >
                   <template v-slot:prepend>
                     <q-icon

src/modules/06_retirement/views/Main.vue

@@ -290,7 +290,8 @@ import { useCounterMixin } from "@/stores/mixin";
 import type { resMain } from "@/modules/06_retirement/interface/response/Main";
 
 const mixin = useCounterMixin();
-const { messageError, date2Thai, showLoader, hideLoader } = mixin;
+const { messageError, date2Thai, showLoader, hideLoader, dialogConfirm } =
+  mixin;
 const router = useRouter();
 const $q = useQuasar(); //ใช้ noti quasar
 const modal = ref<boolean>(false);
@@ -482,54 +483,22 @@ const rows2 = ref<FormMainProbation2[]>([
 // };
 
 const clickAdd = () => {
-  // console.log(rows.value.length, type.value);
+  console.log(rows.value.length, type.value);
   if (rows.value.length == 0) {
-    $q.dialog({
-      title: "ยืนยันการเพิ่มข้อมูลประกาศเกษียณ",
-      message: "ต้องการเพิ่มข้อมูลประกาศเกษียณใช่หรือไม่?",
-      cancel: {
-        flat: true,
-        color: "negative",
-      },
-      persistent: true,
-    })
-      .onOk(async () => {
+    dialogConfirm(
+      $q,
+      async () => {
         let data = { type: type.value, year: currentYear };
         await cerateRetirement(data);
-      })
-      .onCancel(() => {})
-      .onDismiss(() => {});
+      },
+      "ยืนยันการเพิ่มข้อมูลประกาศเกษียณ",
+      "ต้องการเพิ่มข้อมูลประกาศเกษียณใช่หรือไม่ ?"
+    );
   } else {
     modal.value = true;
     action.value = "";
     radio.value = "";
   }
-
-  // $q.dialog({
-  //   title: "เพิ่มประกาศ",
-  //   message: "เลือกประกาศที่ต้องการเพิ่มข้อมูล",
-  //   options: {
-  //     type: "radio",
-  //     model: "opt1",
-  //     // inline: true
-  //     items: [
-  //       { label: "ประกาศเพิ่มผู้เกษียณ", value: "ADD" },
-  //       { label: "ประกาศแก้ไขข้อมูลผู้เกษียน", value: "EDIT" },
-  //       { label: "ประกาศยกเลิกผู้เกษียณ", value: "REMOVE" },
-  //     ],
-  //   },
-  //   cancel: {
-  //     flat: true,
-  //     color: "negative",
-  //   },
-  //   persistent: true,
-  // })
-  //   .onOk((data) => {
-  //     console.log("option===>", data);
-  //     router.push(`/retirement/list/${type.value}/${currentYear}`);
-  //   })
-  //   .onCancel(() => {})
-  //   .onDismiss(() => {});
 };
 const cerateRetirement = async (data: object) => {
   await http
@@ -544,40 +513,26 @@ const cerateRetirement = async (data: object) => {
     });
 };
 const clickSelect = async (action: string) => {
-  // console.log(action);
-  // console.log(radio.value);
-  $q.dialog({
-    title: "ยืนยันการแก้ไขข้อมูลประกาศเกษียณ",
-    message: "ต้องการแก้ไขข้อมูลประกาศเกษียณใช่หรือไม่?",
-    cancel: {
-      flat: true,
-      color: "negative",
-    },
-    persistent: true,
-  })
-    .onOk(async () => {
+  dialogConfirm(
+    $q,
+    async () => {
       let data = {
         type: type.value,
         year: currentYear,
         retireHistoryId: action,
         option: radio.value,
       };
-      // console.log(data);
 
       await cerateRetirement(data);
-    })
-    .onCancel(() => {})
-    .onDismiss(() => {});
+    },
+    "ยืนยันการแก้ไขข้อมูลประกาศเกษียณ",
+    "ต้องการแก้ไขข้อมูลประกาศเกษียณใช่หรือไม่ ?"
+  );
 };
 
-// const clickClose = async () => {
-//   modal.value = false;
-// };
 const checkjson = ref<boolean>();
 
 const checkststus = (data: any) => {
- 
-  
   let jsonfasle = data.find((e: any) => e.document == false);
   // console.log(jsonfasle)