validateForm เพิ่มเรื่องร้องเรียน

src/modules/11_discipline/components/4_Order/Step01.vue

@@ -2,7 +2,7 @@
 import { ref } from "vue";
 import { useQuasar } from "quasar";
 
-import type { DataOption } from "../../interface/index/Main";
+import type { DataOption, MyObjectRef } from "../../interface/index/Main";
 // importStroe
 import { useCounterMixin } from "@/stores/mixin";
 
@@ -21,7 +21,7 @@ const props = defineProps({
   },
 });
 const next = () => props.next();
-
+// Options ต่างๆ
 const orderTypeOptions = ref<DataOption[]>([
   { id: "0", name: "ประเภทคำสั่ง 1" },
   { id: "1", name: "ประเภทคำสั่ง 2" },
@@ -37,7 +37,7 @@ const listInvestigationOptions = ref<DataOption[]>([
   { id: "1", name: "รายการสอบสวนความผิดทางวินัย 2" },
   { id: "2", name: "รายการสอบสวนความผิดทางวินัย 3" },
 ]);
-
+// ตัวแปรทั้งหมด
 const orderType = ref<string>("");
 const orderBy = ref<string>("");
 const listInvestigation = ref<string>("");
@@ -49,6 +49,47 @@ const authorityPosition = ref<string>("");
 const subject = ref<string>("");
 const mistakeDetail = ref<string>("");
 
+// validateForm
+const orderTypeRef = ref<any>(null);
+const orderByRef = ref<any>(null);
+const listInvestigationRef = ref<any>(null);
+const authorityRef = ref<any>(null);
+const orderNumberRef = ref<any>(null);
+const dateYearRef = ref<any>(null);
+const dateRef = ref<any>(null);
+const authorityPositionRef = ref<any>(null);
+const subjectRef = ref<any>(null);
+const mistakeDetailRef = ref<any>(null);
+const myObjectRef: MyObjectRef = {
+  orderType: orderTypeRef,
+  orderBy: orderByRef,
+  listInvestigation: listInvestigationRef,
+  authority: authorityRef,
+  orderNumber: orderNumberRef,
+  dateYear: dateYearRef,
+  date: dateRef,
+  authorityPosition: authorityPositionRef,
+  subject: subjectRef,
+  mistakeDetail: mistakeDetailRef,
+};
+function validateForm() {
+  const hasError = [];
+  for (const key in myObjectRef) {
+    if (Object.prototype.hasOwnProperty.call(myObjectRef, key)) {
+      const property = myObjectRef[key];
+      if (property.value && typeof property.value.validate === "function") {
+        const isValid = property.value.validate();
+        hasError.push(isValid);
+      }
+    }
+  }
+  if (hasError.every((result) => result === true)) {
+    onSubmit();
+  } else {
+    console.log("ไม่ผ่าน ");
+  }
+}
+
 function onSubmit() {
   dialogConfirm(
     $q,
@@ -62,12 +103,13 @@ function onSubmit() {
 </script>
 
 <template>
-  <q-form @submit.prevent="onSubmit">
+  <form @submit.prevent.stop="validateForm">
     <div class="col-12 row q-pa-lg">
       <div class="col-xs-12 col-sm-12 q-col-gutter-x-lg row q-col-gutter-y-xs">
         <div class="col-xs-12 col-sm-6">
           ประเภทคำสั่ง
           <q-select
+            ref="orderTypeRef"
             dense
             outlined
             v-model="orderType"
@@ -84,6 +126,7 @@ function onSubmit() {
         <div class="col-xs-12 col-sm-6">
           คำสั่งโดย
           <q-select
+            ref="orderByRef"
             dense
             outlined
             v-model="orderBy"
@@ -100,6 +143,7 @@ function onSubmit() {
         <div class="col-xs-12 col-sm-6">
           เลือกรายการสอบสวนความผิดทางวินัย
           <q-select
+            ref="listInvestigationRef"
             dense
             outlined
             v-model="listInvestigation"
@@ -118,6 +162,7 @@ function onSubmit() {
         <div class="col-xs-12 col-sm-6">
           ผู้มีอำนาจลงนาม
           <q-input
+            ref="authorityRef"
             dense
             outlined
             v-model="authority"
@@ -130,6 +175,7 @@ function onSubmit() {
           <div class="col-6">
             คำสั่งที่
             <q-input
+              ref="orderNumberRef"
               outlined
               dense
               v-model="orderNumber"
@@ -157,6 +203,7 @@ function onSubmit() {
               }}</template>
               <template #trigger>
                 <q-input
+                  ref="dateYearRef"
                   :model-value="dateYear + 543"
                   :rules="[(val) => !!val || `${'กรุณากรอก พ.ศ.'}`]"
                   :label="`${'พ.ศ.'}`"
@@ -187,6 +234,7 @@ function onSubmit() {
             </template>
             <template #trigger>
               <q-input
+                ref="dateRef"
                 outlined
                 dense
                 class="full-width datepicker"
@@ -208,6 +256,7 @@ function onSubmit() {
         <div class="col-xs-12 col-sm-6">
           ตำแหน่งผู้มีอำนาจลงนาม
           <q-input
+            ref="authorityPositionRef"
             dense
             outlined
             v-model="authorityPosition"
@@ -219,6 +268,7 @@ function onSubmit() {
         <div class="col-xs-12 col-sm-6">
           คำสั่งเรื่อง
           <q-input
+            ref="subjectRef"
             dense
             outlined
             v-model="subject"
@@ -230,6 +280,7 @@ function onSubmit() {
         <div class="col-xs-12 col-sm-12">
           รายละเอียดการกระทำความผิด
           <q-input
+            ref="mistakeDetailRef"
             dense
             outlined
             v-model="mistakeDetail"
@@ -252,7 +303,7 @@ function onSubmit() {
         type="submit"
       />
     </q-card-actions>
-  </q-form>
+  </form>
 </template>
 
 <style scoped></style>