validate เพิ่มรายการสืบสวนข้อเท็จจริง

src/modules/11_discipline/components/2_InvestigateFacts/AddPage.vue

@@ -1,10 +1,16 @@
 <script setup lang="ts">
 import router from "@/router";
-import { onMounted, ref, watch } from "vue";
+import { onMounted, ref, watch, reactive } from "vue";
+import { useQuasar } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
 import { useInvestigateFactStore } from "@/modules/11_discipline/store/InvestigateFactStore";
+import type {
+  FormData,
+  MyObjectInvestigateRef,
+} from "@/modules/11_discipline/interface/request/investigate";
 const investigateFactStore = useInvestigateFactStore();
 const { filterFnOptionsType } = investigateFactStore;
+
 const mixin = useCounterMixin();
 const {
   messageError,
@@ -14,20 +20,78 @@ const {
   dialogConfirm,
   success,
 } = mixin;
-const complaint = ref<string>("");
-const complaintdetail = ref<string>("");
-const detail = ref<string>("");
-const fault = ref<string>("");
-const results = ref<string>("");
-const other = ref<string>("");
-const evidenceFiles = ref<File | null>(null);
-const fileComplaint = ref<File | null>(null);
-const clickTime = ref<boolean>(false);
-const date = ref<Date>();
-const dateEnd = ref<Date>();
-const investigation = ref<string>("");
+const $q = useQuasar();
+const complaintRef = ref<Object | null>(null);
+const complaintdetailRef = ref<Object | null>(null);
+const detailRef = ref<Object | null>(null);
+const faultRef = ref<Object | null>(null);
+const resultsRef = ref<Object | null>(null);
+const otherRef = ref<Object | null>(null);
+const evidenceFilesRef = ref<Object | null>(null);
+const fileComplaintRef = ref<Object | null>(null);
+const clickTimeRef = ref<Object | null>(null);
+const dateRef = ref<Object | null>(null);
+const dateEndRef = ref<Object | null>(null);
+const investigationRef = ref<Object | null>(null);
+const daysExtendRef = ref<Object | null>(null);
+const formData = reactive<FormData>({
+  complaint: "",
+  complaintdetail: "",
+  detail: "",
+  fault: "",
+  results: "",
+  other: "",
+  evidenceFiles: null,
+  fileComplaint: null,
+  clickTime: false,
+  date: null,
+  dateEnd: null,
+  investigation: "",
+  daysExtend: "",
+});
+const objectInvestigate: MyObjectInvestigateRef = {
+  complaint: complaintRef,
+  complaintdetail: complaintdetailRef,
+  detail: detailRef,
+  fault: faultRef,
+  results: resultsRef,
+  other: otherRef,
+  evidenceFiles: evidenceFilesRef,
+  fileComplaint: fileComplaintRef,
+  date: dateRef,
+  dateEnd: dateEndRef,
+  investigation: investigationRef,
+  daysExtend: daysExtendRef,
+};
 
-const daysExtend = ref<string>("");
+function validateForm() {
+  const hasError = [];
+  for (const key in objectInvestigate) {
+    if (Object.prototype.hasOwnProperty.call(objectInvestigate, key)) {
+      const property = objectInvestigate[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("ไม่ผ่าน ");
+    console.log(hasError);
+  }
+}
+function onSubmit() {
+  dialogConfirm(
+    $q,
+    async () => {
+      console.log(formData);
+    },
+    "ยืนยันการบันทึกข้อมูล",
+    "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
+  );
+}
 </script>
 <template>
   <div class="toptitle text-dark col-12 row items-center">
@@ -45,18 +109,19 @@ const daysExtend = ref<string>("");
   </div>
   <q-card flat bordered class="col-12 q-mt-sm">
     <div class="q-pa-md">
-      <q-form ref="myForm">
+      <form @submit.prevent="validateForm">
         <div class="row col-12">
           <div class="col-12 row bg-white q-col-gutter-md">
             <div class="col-xs-12 row items-center">
               <div class="col-12">
                 <q-input
                   class="full-width inputgreen cursor-pointer"
+                  ref="complaintRef"
                   outlined
                   dense
                   lazy-rules
                   borderless
-                  v-model="complaint"
+                  v-model="formData.complaint"
                   :rules="[(val) => !!val || `${'กรุณากรอกเรื่องร้องเรียน'}`]"
                   hide-bottom-space
                   :label="`${'เรื่องร้องเรียน'}`"
@@ -68,7 +133,9 @@ const daysExtend = ref<string>("");
                   <q-select
                     outlined
                     dense
-                    v-model="fault"
+                    ref="faultRef"
+                    v-model="formData.fault"
+                    :rules="[(val) => !!val || `${'กรุณาเลือกลักษณะความผิด'}`]"
                     :options="investigateFactStore.faultOp"
                     label="ลักษณะความผิด"
                     emit-value
@@ -92,7 +159,11 @@ const daysExtend = ref<string>("");
                   <q-select
                     outlined
                     dense
-                    v-model="investigation"
+                    ref="investigationRef"
+                    :rules="[
+                      (val) => !!val || `${'กรุณาเลือกลักษณะการสืบสวน'}`,
+                    ]"
+                    v-model="formData.investigation"
                     :options="investigateFactStore.investigationOp"
                     label="ลักษณะการสืบสวน"
                     emit-value
@@ -113,16 +184,26 @@ const daysExtend = ref<string>("");
                   </q-select>
                 </div>
               </div>
-              <div v-if="investigation === '003'" class="col-12 q-mb-md">
+              <div
+                v-if="formData.investigation === '003'"
+                class="col-12 q-mb-md"
+              >
                 <q-input
                   class="full-width inputgreen cursor-pointer"
                   outlined
+                  ref="otherRef"
                   dense
                   borderless
-                  v-model="other"
+                  v-model="formData.other"
                   hide-bottom-space
                   :label="`${'รายการอื่นๆ(โปรดระบุ)'}`"
                   type="textarea"
+                  :rules="[
+                    (val) =>
+                      formData.investigation === '003'
+                        ? !!val || 'กรุณาเลือกจำนวนวันที่ต้องการขยาย'
+                        : true,
+                  ]"
                 />
               </div>
 
@@ -134,17 +215,17 @@ const daysExtend = ref<string>("");
                 </p>
                 <q-checkbox
                   size="md"
-                  v-model="clickTime"
+                  v-model="formData.clickTime"
                   label="ขยายเวลา"
                   color="primary"
                   class="text-weight-medium q-ml-sm"
                   keep-color
                 />
-                <div v-if="clickTime !== true" class="self-start row">
+                <div v-if="formData.clickTime !== true" class="self-start row">
                   <div class="q-mx-xs">
                     <datepicker
                       menu-class-name="modalfix"
-                      v-model="date"
+                      v-model="formData.date"
                       :locale="'th'"
                       autoApply
                       :enableTimePicker="false"
@@ -157,11 +238,14 @@ const daysExtend = ref<string>("");
                       <template #trigger>
                         <q-input
                           class="full-width inputgreen cursor-pointer"
+                          ref="dateRef"
                           outlined
                           dense
                           lazy-rules
                           borderless
-                          :model-value="date ? date2Thai(date) : null"
+                          :model-value="
+                            formData.date ? date2Thai(formData.date) : null
+                          "
                           :rules="[
                             (val) =>
                               !!val || `${'กรุณาเลือกวันที่เริ่มการสอบสวน'}`,
@@ -183,7 +267,7 @@ const daysExtend = ref<string>("");
                   <div class="q-mx-xs q-">
                     <datepicker
                       menu-class-name="modalfix"
-                      v-model="dateEnd"
+                      v-model="formData.dateEnd"
                       :locale="'th'"
                       autoApply
                       :enableTimePicker="false"
@@ -195,12 +279,17 @@ const daysExtend = ref<string>("");
                       }}</template>
                       <template #trigger>
                         <q-input
+                          ref="dateEndRef"
                           class="full-width inputgreen cursor-pointer"
                           outlined
                           dense
                           lazy-rules
                           borderless
-                          :model-value="dateEnd ? date2Thai(dateEnd) : null"
+                          :model-value="
+                            formData.dateEnd
+                              ? date2Thai(formData.dateEnd)
+                              : null
+                          "
                           :rules="[
                             (val) =>
                               !!val || `${'กรุณาเลือกวันที่สิ้นสุดการสอบสวน'}`,
@@ -225,14 +314,15 @@ const daysExtend = ref<string>("");
                     outlined
                     dense
                     lazy-rules
-                    v-model="daysExtend"
+                    ref="daysExtendRef"
+                    v-model="formData.daysExtend"
                     :options="investigateFactStore.daysExtendOp"
                     label="จำนวนวันที่ต้องการขยาย"
                     emit-value
                     map-options
                     :rules="[
                       (val) =>
-                        clickTime === true
+                        formData.clickTime === true
                           ? !!val || 'กรุณาเลือกจำนวนวันที่ต้องการขยาย'
                           : true,
                     ]"
@@ -256,10 +346,11 @@ const daysExtend = ref<string>("");
                 <q-input
                   class="full-width inputgreen cursor-pointer"
                   outlined
+                  ref="complaintdetailRef"
                   dense
                   lazy-rules
                   borderless
-                  v-model="complaintdetail"
+                  v-model="formData.complaintdetail"
                   :rules="[
                     (val) => !!val || `${'กรุณากรอกรายละเอียดเรื่องร้องเรียน'}`,
                   ]"
@@ -271,11 +362,12 @@ const daysExtend = ref<string>("");
               <div class="col-12 q-my-sm">
                 <q-file
                   outlined
+                  ref="fileComplaintRef"
                   dense
-                  v-model="fileComplaint"
+                  v-model="formData.fileComplaint"
                   label="ไฟล์เอกสารหลักฐานเรื่องร้องเรียน"
                   lazy-rules
-                  :rules="[(val) => val || 'กรุณาเลือกไฟล์หลักฐานการรับ']"
+                  :rules="[(val) => !!val || 'กรุณาเลือกไฟล์หลักฐานการรับ']"
                   hide-bottom-space
                 >
                   <template v-slot:prepend>
@@ -287,10 +379,11 @@ const daysExtend = ref<string>("");
                 <q-input
                   class="full-width inputgreen cursor-pointer"
                   outlined
+                  ref="detailRef"
                   dense
                   lazy-rules
                   borderless
-                  v-model="detail"
+                  v-model="formData.detail"
                   :rules="[(val) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
                   hide-bottom-space
                   :label="`${'รายละเอียด'}`"
@@ -301,10 +394,11 @@ const daysExtend = ref<string>("");
                 <q-file
                   outlined
                   dense
-                  v-model="evidenceFiles"
+                  ref="evidenceFilesRef"
+                  v-model="formData.evidenceFiles"
                   label="ไฟล์หลักฐานการรับ"
                   lazy-rules
-                  :rules="[(val) => val || 'กรุณาเลือกไฟล์หลักฐานการรับ']"
+                  :rules="[(val) => !!val || 'กรุณาเลือกไฟล์หลักฐานการรับ']"
                   hide-bottom-space
                 >
                   <template v-slot:prepend>
@@ -312,33 +406,43 @@ const daysExtend = ref<string>("");
                   </template>
                 </q-file>
               </div>
-              <div class="col-4 q-mr-sm">
+              <div class="row  col-12 items-start q-mt-sm">
+              <div class="col-4">
                 <q-input
                   standout
                   dense
-                  v-model="results"
+                  ref="resultsRef"
+                  :rules="[(val) => !!val || `${'กรุณากรอกผลการสืบสวน'}`]"
+                  v-model="formData.results"
                   outlined
                   debounce="300"
                   placeholder="ผลการสืบสวน"
                 >
                 </q-input>
               </div>
-              <div class="col-4">
-                <q-btn label="ยืนยันผลการสืบสวน" color="public">
-                  <q-tooltip>ยืนยันผลการสืบสวน</q-tooltip>
-                </q-btn>
+             <div class="col-4">
+               <q-btn label="ยืนยันผลการสืบสวน" color="public" class="q-py-sm q-ml-sm">
+                 <q-tooltip>ยืนยันผลการสืบสวน</q-tooltip>
+               </q-btn>
+             </div>
               </div>
             </div>
           </div>
         </div>
-      </q-form>
-    </div>
-    <q-separator />
-    <div class="row col-12 q-pa-sm">
-      <q-space />
-      <q-btn flat round color="secondary" icon="mdi-content-save-outline"
-        ><q-tooltip>บับทึกข้อมูล</q-tooltip></q-btn
-      >
+        <q-separator />
+        <div class="row col-12 q-pa-sm">
+          <q-space />
+          <q-btn
+            id="onSubmit"
+            type="submit"
+            flat
+            round
+            color="secondary"
+            icon="mdi-content-save-outline"
+            ><q-tooltip>บับทึกข้อมูล</q-tooltip></q-btn
+          >
+        </div>
+      </form>
     </div>
   </q-card>
 </template>

src/modules/11_discipline/interface/request/investigate.ts

@@ -0,0 +1,34 @@
+
+interface FormData {
+    complaint: string
+    complaintdetail: string
+    detail: string
+    fault: string
+    results: string
+    other: string
+    evidenceFiles: File | null
+    fileComplaint: File | null
+    clickTime: boolean
+    date: Date | null
+    dateEnd: Date | null
+    daysExtend: string
+    investigation: string
+}
+interface MyObjectInvestigateRef {
+    complaint: object | null;
+    complaintdetail: object | null;
+    detail: object | null;
+    fault: object | null;
+    results: object | null;
+    evidenceFiles: object | null;
+    fileComplaint: object | null;
+    date: object | null;
+    dateEnd: object | null;
+    investigation: object | null;
+    daysExtend: object | null;
+    [key: string]: any;
+}
+export type {
+    FormData,
+    MyObjectInvestigateRef
+}