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

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

@@ -8,8 +8,9 @@ import { useOrderStore } from "../../stroes/OrderStore";
 
 const router = useRouter();
 const OrderStore = useOrderStore();
-const { fecthOrder } = OrderStore;
+const { fecthOrder } = OrderStore; // function จาก stores
 
+// ข้อมูล table
 const columns = ref<QTableProps["columns"]>([
   {
     name: "subject",
@@ -74,13 +75,13 @@ const visibleColumns = ref<string[]>([
   "signer",
   "statusorder",
 ]);
-
 const filterTable = ref<string>("");
 
 onMounted(async () => {
   await fecthListOrder();
 });
 
+// เรียกรายการคำสั่ง จาก API
 async function fecthListOrder() {
   const listData = [
     {
@@ -108,9 +109,10 @@ async function fecthListOrder() {
       statusorder: "เสร็จสิ้นแล้ว",
     },
   ];
-  await fecthOrder(listData);
+  await fecthOrder(listData); // ส่งข้อมูลไปยัง stores
 }
 
+// redirect ไปยังการเพิ่มออกคำสั่งลงโทษทางวินัย
 function redirectToPageadd() {
   router.push(`/discipline-order/add`);
 }

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

@@ -2,6 +2,7 @@
 import { ref } from "vue";
 import { useRouter } from "vue-router";
 
+// import step
 import step01 from "./Step01.vue";
 import step02 from "./Step02.vue";
 import step03 from "./Step03.vue";
@@ -9,11 +10,12 @@ import step03 from "./Step03.vue";
 const router = useRouter();
 
 const step = ref<number>(1);
-
+// nextStep
 const nextStep = async () => {
   localStorage.setItem("currentStep", step.value.toString());
   step.value++;
 };
+// previousStep
 const previousStep = async () => {
   localStorage.setItem("currentStep", step.value.toString());
   step.value--;

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>

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

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { ref } from "vue";
 const props = defineProps({
   next: {
     type: Function,
@@ -11,10 +12,79 @@ const props = defineProps({
 });
 const next = () => props.next();
 const previous = () => props.previous();
+
+const name = ref<string>("");
+const lastname = ref<string>("");
+const age = ref<string>("");
+
+const nameRef = ref<any>(null);
+const ageRef = ref<any>(null);
+const lastnameRef = ref<any>(null);
+const myObject: MyObject = {
+  name: nameRef,
+  lastname: lastnameRef,
+  age: ageRef,
+};
+interface MyObject {
+  name: any;
+  lastname: any;
+  age: any;
+  [key: string]: any;
+}
+
+function onSubmit() {
+  const hasError = [];
+  for (const key in myObject) {
+    if (Object.prototype.hasOwnProperty.call(myObject, key)) {
+      const property = myObject[key];
+      if (property.value && typeof property.value.validate === "function") {
+        const isValid = property.value.validate();
+        hasError.push(isValid);
+      }
+    }
+  }
+  if (hasError.every((result) => result === true)) {
+    console.log("ผ่าน  สำเร็จ!");
+  } else {
+    console.log("ไม่ผ่าน ");
+  }
+}
 </script>
 
 <template>
   <div><h1>step02</h1></div>
+  <form @submit.prevent.stop="onSubmit" class="q-gutter-md">
+    <q-input
+      ref="nameRef"
+      filled
+      v-model="name"
+      label="Your name *"
+      hint="Name and surname"
+      lazy-rules
+      :rules="[(val) => !!val || `${'Name and surname'}`]"
+    />
+    <q-input
+      ref="lastnameRef"
+      filled
+      v-model="lastname"
+      label="lastname *"
+      lazy-rules
+      :rules="[(val) => !!val || `${'lastname'}`]"
+    />
+    <q-input
+      ref="ageRef"
+      filled
+      type="number"
+      v-model="age"
+      label="Your age *"
+      lazy-rules
+      :rules="[(val) => !!val || `${'Your age'}`]"
+    />
+
+    <div>
+      <q-btn label="Submit" type="submit" color="primary" />
+    </div>
+  </form>
   <q-card-actions align="right">
     <q-btn
       dense