Validate เพิ่ม id /for เทส

src/modules/11_discipline/components/3_InvestigateDisciplinary/AddPage.vue

@@ -1,12 +1,15 @@
 <script setup lang="ts">
-import { ref, onMounted } from "vue";
+import { ref, onMounted, reactive } from "vue";
 import { useQuasar, QForm } from "quasar";
 import { useRouter, useRoute } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
 import Dialogbody from "@/modules/11_discipline/components/3_InvestigateDisciplinary/Dialogbody.vue";
 import Table from "@/modules/11_discipline/components/3_InvestigateDisciplinary/DirectorTable.vue";
 import { useInvestigateDisStore } from "@/modules/11_discipline/store/InvestigateDisStore";
-
+import type {
+  FormData,
+  disciplinaryRef,
+} from "@/modules/11_discipline/interface/request/disciplinary";
 const investigateDis = useInvestigateDisStore();
 const { fecthDirector } = investigateDis;
 
@@ -36,42 +39,107 @@ const popup = () => {
 };
 
 const mixin = useCounterMixin();
-const { date2Thai, hideLoader } = mixin;
-
-const initialPagination = ref<any>({
-  rowsPerPage: 0,
-});
-
+const { date2Thai, hideLoader, dialogConfirm } = mixin;
 const router = useRouter();
 const route = useRoute();
 const rows = ref([]);
 const modal = ref<boolean>(false);
 const $q = useQuasar();
 const id = ref<string>(route.params.id as string);
+const type = ref<string>("");
 const myForm = ref<QForm | null>(null); //form data input
 const edit = ref<boolean>(false);
 const dateInvestigate = ref<Date>(new Date());
 const dateAllegation = ref<Date>(new Date());
 const dateEvident = ref<Date>(new Date());
 const filterKeyword2 = ref<string>("");
-const typefault = ref<string>("");
-const faultLevel = ref<string>("");
-const type = ref<string>("");
-const Complaint = ref<string>("");
-const trueDetail = ref<string>("");
-const evidence = ref<string>("");
-const recordAccuser = ref<string>("");
-const witnesses = ref<string>("");
-const InvestResults = ref<string>("");
-const files = ref<File>();
-const filesEvidence = ref<File>();
-const filesRecordAccuser = ref<File>();
-const filesWitnesses = ref<File>();
-const filesEtc = ref<File>();
+const complaintRef = ref<Object | null>(null);
+const dateInvestigateRef = ref<Object | null>(null);
+const dateAllegationRef = ref<Object | null>(null);
+const dateEvidentRef = ref<Object | null>(null);
+const casefaultRef = ref<Object | null>(null);
+const refLawRef = ref<Object | null>(null);
+const typefaultRef = ref<Object | null>(null);
+const faultLevelRef = ref<Object | null>(null);
+const detailComplaintRef = ref<Object | null>(null);
+const whereInvestigateRef = ref<Object | null>(null);
+const witnessesRef = ref<Object | null>(null);
+const InvestResultsRef = ref<Object | null>(null);
+const filesEvidenceRef = ref<Object | null>(null);
+const filesRecordAccuserRef = ref<Object | null>(null);
+const filesWitnessesRef = ref<Object | null>(null);
+const filesEtcRef = ref<Object | null>(null);
+const trueDetailRef = ref<Object | null>(null);
+const evidenceRef = ref<Object | null>(null);
+const recordAccuserRef = ref<Object | null>(null);
+
 const fileDocDataUpload = ref<File[]>([]);
-const refRaw = ref<string>("");
-const casefault = ref<string>("");
-const whereInvestigate = ref<string>("");
+const initialPagination = ref<any>({
+  rowsPerPage: 0,
+});
+
+const formData = reactive<FormData>({
+  Complaint: "",
+  dateInvestigate: null,
+  dateAllegation: null,
+  dateEvident: null,
+  casefault: "",
+  typefault: "",
+  faultLevel: "",
+  refLaw: "",
+  detailComplaint: "",
+  whereInvestigate: "",
+  trueDetail: "",
+  evidence: "",
+  recordAccuser: "",
+  witnesses: "",
+  InvestResults: "",
+  filesEvidence: null,
+  filesRecordAccuser: null,
+  filesWitnesses: null,
+  filesEtc: null,
+});
+
+const objectdisciplinary: disciplinaryRef = {
+  Complaint: complaintRef,
+  dateInvestigate: dateInvestigateRef,
+  dateAllegation: dateAllegationRef,
+  dateEvident: dateEvidentRef,
+  casefault: casefaultRef,
+  typefault: typefaultRef,
+  faultLevel: faultLevelRef,
+  refLaw: refLawRef,
+  detailComplaint: detailComplaintRef,
+  whereInvestigate: whereInvestigateRef,
+  trueDetail: trueDetailRef,
+  evidence: evidenceRef,
+  recordAccuser: recordAccuserRef,
+  witnesses: witnessesRef,
+  InvestResults: InvestResultsRef,
+  filesEvidence: filesEvidenceRef,
+  filesRecordAccuser: filesRecordAccuserRef,
+  filesWitnesses: filesWitnessesRef,
+  filesEtc: filesEtcRef,
+};
+
+function validateForm() {
+  const hasError = [];
+  for (const key in objectdisciplinary) {
+    if (Object.prototype.hasOwnProperty.call(objectdisciplinary, key)) {
+      const property = objectdisciplinary[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);
+  }
+}
 
 const routeName = router.currentRoute.value.name;
 
@@ -90,7 +158,16 @@ const fileUploadDoc = async (files: any) => {
 };
 
 // คลิกบันทึก
-const checkSave = () => {};
+function onSubmit() {
+  dialogConfirm(
+    $q,
+    async () => {
+      console.log(formData);
+    },
+    "ยืนยันการบันทึกข้อมูล",
+    "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
+  );
+}
 
 const deleteData = async (id: string) => {
   console.log("delete");
@@ -115,7 +192,7 @@ const clickBack = () => {
       />
       {{ "เพิ่มการสอบสวนความผิดทางวินัย" }}
     </div>
-    <q-form ref="myForm">
+    <form @submit.prevent="validateForm">
       <div class="col-12">
         <q-card bordered>
           <div class="col-12 row q-col-gutter-md q-pa-md">
@@ -126,7 +203,9 @@ const clickBack = () => {
                   class="col-12"
                   dense
                   outlined
-                  v-model="Complaint"
+                  v-model="formData.Complaint"
+                  for="#Complaint"
+                  ref="complaintRef"
                   label="เรื่องร้องเรียน"
                   type="textarea"
                   :rules="[(val:string) => !!val || `${'กรุณากรอกเรื่องร้องเรียน'}`]"
@@ -134,6 +213,7 @@ const clickBack = () => {
                 <datepicker
                   menu-class-name="modalfix"
                   v-model="dateInvestigate"
+                  ref="dateInvestigateRef"
                   :locale="'th'"
                   autoApply
                   class="col-xs-12 col-sm-4"
@@ -173,6 +253,7 @@ const clickBack = () => {
                 </datepicker>
                 <datepicker
                   menu-class-name="modalfix"
+                  ref="dateAllegationRef"
                   v-model="dateAllegation"
                   class="col-xs-12 col-sm-4"
                   :locale="'th'"
@@ -216,6 +297,7 @@ const clickBack = () => {
                 </datepicker>
                 <datepicker
                   menu-class-name="modalfix"
+                  ref="dateEvidentRef"
                   v-model="dateEvident"
                   :locale="'th'"
                   autoApply
@@ -318,7 +400,9 @@ const clickBack = () => {
                   class="col-xs-12 col-sm-6"
                   dense
                   outlined
-                  v-model="casefault"
+                  ref="casefaultRef"
+                  v-model="formData.casefault"
+                  for="#casefault"
                   label="กรณีมีความผิด"
                   :rules="[(val) => !!val || `${'กรุณากรอกกรณีมีความผิด'}`]"
                   lazy-rules
@@ -327,7 +411,9 @@ const clickBack = () => {
                   class="col-xs-12 col-sm-6"
                   dense
                   outlined
-                  v-model="whereInvestigate"
+                  for="#whereInvestigate"
+                  ref="whereInvestigateRef"
+                  v-model="formData.whereInvestigate"
                   label="สอบสวนที่"
                   :rules="[(val) => !!val || `${'กรุณากรอกสอบสวนที่'}`]"
                   lazy-rules
@@ -336,7 +422,9 @@ const clickBack = () => {
                   dense
                   class="col-xs-12 col-sm-3"
                   outlined
-                  v-model="typefault"
+                  for="#typefault"
+                  ref="typefaultRef"
+                  v-model="formData.typefault"
                   option-label="name"
                   option-value="id"
                   :options="investigateDis.optionsTypefault"
@@ -346,7 +434,9 @@ const clickBack = () => {
                   dense
                   class="col-xs-12 col-sm-3"
                   outlined
-                  v-model="faultLevel"
+                  for="#faultLevel"
+                  ref="faultLevelRef"
+                  v-model="formData.faultLevel"
                   option-label="name"
                   option-value="id"
                   :options="investigateDis.optionsfaultLevel"
@@ -355,8 +445,10 @@ const clickBack = () => {
                 <q-input
                   class="col-xs-12 col-sm-6 q-pb-md"
                   dense
+                  for="#refLaw"
                   outlined
-                  v-model="refRaw"
+                  ref="refLawRef"
+                  v-model="formData.refLaw"
                   label="อ้างอิงมาตราตามกฎหมาย"
                   :rules="[
                     (val) => !!val || `${'กรุณากรอกอ้างอิงมาตราตามกฎหมาย'}`,
@@ -367,7 +459,9 @@ const clickBack = () => {
                   class="col-12"
                   dense
                   outlined
-                  v-model="Complaint"
+                  for="#detailComplaint"
+                  ref="detailComplaintRef"
+                  v-model="formData.detailComplaint"
                   label="รายละเอียดเรื่องร้องเรียน"
                   type="textarea"
                   :rules="[(val:string) => !!val || `${'กรุณากรอกรายละเอียดเรื่องร้องเรียน'}`]"
@@ -376,7 +470,9 @@ const clickBack = () => {
                   class="col-12"
                   dense
                   outlined
-                  v-model="trueDetail"
+                  for="#trueDetail"
+                  ref="trueDetailRef"
+                  v-model="formData.trueDetail"
                   label="รายละเอียดสืบสวนข้อเท็จจริง"
                   type="textarea"
                   :rules="[(val:string) => !!val || `${'กรุณากรอกรายละเอียดสืบสวนข้อเท็จจริง'}`]"
@@ -385,7 +481,9 @@ const clickBack = () => {
                   class="col-12"
                   dense
                   outlined
-                  v-model="evidence"
+                  for="#evidence"
+                  ref="evidenceRef"
+                  v-model="formData.evidence"
                   label="สรุปพยานหลักฐานสนับสนุนข้อกล่าวหา"
                   type="textarea"
                   :rules="[(val:string) => !!val || `${'กรุณากรอกสรุปพยานหลักฐานสนับสนุนข้อกล่าวหา'}`]"
@@ -394,7 +492,8 @@ const clickBack = () => {
                   class="col-12 q-pb-md"
                   outlined
                   dense
-                  v-model="filesEvidence"
+                  ref="filesEvidenceRef"
+                  v-model="formData.filesEvidence"
                   @added="fileUploadDoc"
                   label="ไฟล์เอกสารหลักฐานสรุปพยานหลักฐานสนับสนุนข้อกล่าวหา"
                   hide-bottom-space
@@ -409,7 +508,8 @@ const clickBack = () => {
                   class="col-12"
                   dense
                   outlined
-                  v-model="recordAccuser"
+                  ref="recordAccuserRef"
+                  v-model="formData.recordAccuser"
                   label="บันทึกถ้อยคำของผู้กล่าวหา"
                   type="textarea"
                   :rules="[(val:string) => !!val || `${'กรุณากรอกบันทึกถ้อยคำของผู้กล่าวหา'}`]"
@@ -418,7 +518,8 @@ const clickBack = () => {
                   class="col-12 q-pb-md"
                   outlined
                   dense
-                  v-model="filesRecordAccuser"
+                  ref="filesRecordAccuserRef"
+                  v-model="formData.filesRecordAccuser"
                   @added="fileUploadDoc"
                   label="ไฟล์เอกสารบันทึกถ้อยคำของผู้กล่าวหา"
                   hide-bottom-space
@@ -433,7 +534,9 @@ const clickBack = () => {
                   class="col-12"
                   dense
                   outlined
-                  v-model="witnesses"
+                  for="#witnesses"
+                  ref="witnessesRef"
+                  v-model="formData.witnesses"
                   label="พยานและการบันทึกถ้อยคำ"
                   type="textarea"
                   :rules="[(val:string) => !!val || `${'กรุณากรอกพยานและการบันทึกถ้อยคำ'}`]"
@@ -442,7 +545,8 @@ const clickBack = () => {
                   class="col-12 q-pb-md"
                   outlined
                   dense
-                  v-model="filesWitnesses"
+                  ref="filesWitnessesRef"
+                  v-model="formData.filesWitnesses"
                   @added="fileUploadDoc"
                   label="ไฟล์เอกสารพยานและการบันทึกถ้อยคำ"
                   hide-bottom-space
@@ -457,7 +561,9 @@ const clickBack = () => {
                   class="col-12"
                   dense
                   outlined
-                  v-model="InvestResults"
+                  for="#InvestResults"
+                  ref="InvestResultsRef"
+                  v-model="formData.InvestResults"
                   label="ผลการสอบสวน"
                   type="textarea"
                   :rules="[(val:string) => !!val || `${'กรุณากรอกผลการสอบสวน'}`]"
@@ -466,7 +572,8 @@ const clickBack = () => {
                   class="col-12"
                   outlined
                   dense
-                  v-model="filesEtc"
+                  ref="filesEtcRef"
+                  v-model="formData.filesEtc"
                   @added="fileUploadDoc"
                   label="ไฟล์เอกสารหลักฐานอื่น ๆ"
                   hide-bottom-space
@@ -485,18 +592,18 @@ const clickBack = () => {
           <div class="row col-12 q-pa-sm">
             <q-space />
             <q-btn
+              id="onSubmit"
+              type="submit"
               flat
               round
-              color="public"
-              @click="checkSave"
+              color="secondary"
               icon="mdi-content-save-outline"
+              ><q-tooltip>บับทึกข้อมูล</q-tooltip></q-btn
             >
-              <q-tooltip>{{ edit ? "แก้ไขข้อมูล" : "บันทึกข้อมูล" }}</q-tooltip>
-            </q-btn>
           </div>
         </q-card>
       </div>
-    </q-form>
+    </form>
   </div>
   <Dialogbody
     v-model:Modal="modal"