เพิ่ม 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>