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

src/components/information/Information.vue

@@ -73,7 +73,7 @@
             :borderless="!edit"
             v-model="informaData.firstname"
             :rules="[(val:string) => !!val || `${'กรุณากรอก ชื่อ'}`]"
-            :label="`${'ชื่อ'}`"
+            :label="`${'ชื่อ(ภาษาไทย)'}`"
           />
         </div>
         <div class="col-xs-6 col-sm-3 col-md-3">
@@ -87,7 +87,7 @@
             :borderless="!edit"
             v-model="informaData.lastname"
             :rules="[(val:string) => !!val || `${'กรุณากรอก นามสกุล'}`]"
-            :label="`${'นามสกุล'}`"
+            :label="`${'นามสกุล(ภาษาไทย)'}`"
           />
         </div>
         <div class="col-xs-6 col-sm-2 col-md-2">
@@ -116,7 +116,11 @@
                 lazy-rules
                 :readonly="!edit"
                 :borderless="!edit"
-                :model-value="informaData.birthDate ? date2Thai(informaData.birthDate) : null"
+                :model-value="
+                  informaData.birthDate
+                    ? date2Thai(informaData.birthDate)
+                    : null
+                "
                 :rules="[(val:string) => !!val || `${'กรุณาเลือก วัน/เดือน/ปี เกิด'}`]"
                 :label="`${'วัน/เดือน/ปี เกิด'}`"
               >
@@ -1054,7 +1058,9 @@ const editData = async () => {
     nationality: informaData.value.nationality,
     race: informaData.value.ethnicity,
     religionId: informaData.value.religionId,
-    birthDate: informaData.value.birthDate ? dateToISO(informaData.value.birthDate) : dateToISO(new Date()),
+    birthDate: informaData.value.birthDate
+      ? dateToISO(informaData.value.birthDate)
+      : dateToISO(new Date()),
     bloodGroupId: informaData.value.bloodId,
     relationshipId: informaData.value.statusId,
     telephoneNumber: informaData.value.tel,

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 { date2Thai, hideLoader, dialogConfirm } = mixin;
-
-const initialPagination = ref<any>({
-  rowsPerPage: 0,
-});
-
 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 complaintRef = ref<Object | null>(null);
-const faultLevel = ref<string>("");
+const dateInvestigateRef = ref<Object | null>(null);
-const type = ref<string>("");
+const dateAllegationRef = ref<Object | null>(null);
-const Complaint = ref<string>("");
+const dateEvidentRef = ref<Object | null>(null);
-const trueDetail = ref<string>("");
+const casefaultRef = ref<Object | null>(null);
-const evidence = ref<string>("");
+const refLawRef = ref<Object | null>(null);
-const recordAccuser = ref<string>("");
+const typefaultRef = ref<Object | null>(null);
-const witnesses = ref<string>("");
+const faultLevelRef = ref<Object | null>(null);
-const InvestResults = ref<string>("");
+const detailComplaintRef = ref<Object | null>(null);
-const files = ref<File>();
+const whereInvestigateRef = ref<Object | null>(null);
-const filesEvidence = ref<File>();
+const witnessesRef = ref<Object | null>(null);
-const filesRecordAccuser = ref<File>();
+const InvestResultsRef = ref<Object | null>(null);
-const filesWitnesses = ref<File>();
+const filesEvidenceRef = ref<Object | null>(null);
-const filesEtc = ref<File>();
+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 initialPagination = ref<any>({
-const casefault = ref<string>("");
+  rowsPerPage: 0,
-const whereInvestigate = ref<string>("");
+});
+
+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"
+              color="secondary"
-              @click="checkSave"
               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"

src/modules/11_discipline/components/6_BasicInformation/Channel/AddPage.vue

@@ -22,139 +22,22 @@ const myForm = ref<QForm | null>(null); //form data input
 const edit = ref<boolean>(false);
 const channel = ref<string>("");
 
-onMounted(async () => {
+onMounted(async () => {});
-  //   if (route.params.id) {
-  //     // มี params id ให้ เรียกข้อมูลของรอบการเสนอขอ
-  //     await fetchData();
-  //   }
-});
 // เรียกข้อมูลของรอบการเสนอขอ
-const fetchData = async () => {
+const fetchData = async () => {};
-  //   edit.value = true;
-  //   showLoader();
-  //   await http
-  //     .get(config.API.getRoundInsignia(id.value))
-  //     .then((res) => {
-  //       const data = res.data.result;
-  //       id.value = data.period_id;
-  //       roundInsig.value =
-  //         options.value.filter((r: any) => r.value == data.period_round).length >
-  //         0
-  //           ? options.value.filter((r: any) => r.value == data.period_round)[0]
-  //           : null;
-  //       yearly.value = data.period_year;
-  //       datelast.value = data.period_amount;
-  //       dateStart.value = new Date(data.period_start);
-  //       dateEnd.value = new Date(data.period_end);
-  //       files.value = data.period_doc;
-  //     })
-  //     .catch((e) => {
-  //       messageError($q, e);
-  //     })
-  //     .finally(() => {
-  //       hideLoader();
-  //     });
-};
 
-const deleteData = async (id: string) => {
+const deleteData = async (id: string) => {};
-  //   showLoader();
-  //   await http
-  //     .delete(config.API.periodExamId(id))
-  //     .then((res) => {
-  //       success($q, "ลบข้อมูลสำเร็จ");
-  //     })
-  //     .catch((e) => {
-  //       messageError($q, e);
-  //     })
-  //     .finally(async () => {
-  //       hideLoader();
-  //     });
-};
 
 // แก้ไขข้อมูล
 
 // คลิกบันทึก
-const checkSave = () => {
+const checkSave = () => {};
-  //   if (myForm.value !== null) {
-  //     myForm.value.validate().then(async (success) => {
-  //       if (success) {
-  //         dialogConfirm($q, () => SaveData());
-  //       } else if (Number(datelast.value) !== 0) {
-  //         dialogMessageNotify($q, "กรุณาเลือกรอบการเสนอขอพระราชทานเครื่องราชฯ");
-  //       }
-  //     });
-  //   }
-};
 // บันทึกข้อมูล
-const SaveData = async () => {
+const SaveData = async () => {};
-  //   if (edit.value) {
-  //     await editData(id.value);
-  //   } else {
-  //     await addData();
-  //     clickBack();
-  //   }
-};
 // เพิ่มข้อมูลรอบการเสนอขอพระราชทานเครื่องราชฯ
-const addData = async () => {
+const addData = async () => {};
-  //   const formData = new FormData();
-  //   const name = `รอบการเสนอขอพระราชทานเครื่องราชรอบที่ ${
-  //     roundInsig.value.value
-  //   }  ปี ${yearly.value + 543} `;
-  //   formData.append("name", name);
-  //   formData.append("year", yearly.value.toString());
-  //   formData.append("amount", datelast.value.toString());
-  //   formData.append("round", roundInsig.value.value);
-  //   if (dateStart.value !== null) {
-  //     formData.append("startDate", dateToISO(dateStart.value));
-  //   }
-  //   if (dateEnd.value !== null) {
-  //     formData.append("endDate", dateToISO(dateEnd.value));
-  //   }
-  //   formData.append("file", files.value);
-  //   showLoader();
-  //   await http
-  //     .post(config.API.listRoundInsignia(), formData)
-  //     .then(() => {
-  //       success($q, "บันทึกข้อมูลสำเร็จ");
-  //     })
-  //     .catch((e) => {
-  //       messageError($q, e);
-  //     })
-  //     .finally(async () => {
-  //       hideLoader();
-  //     });
-};
 // แก้ไขข้อมูล
-const editData = async (id: string) => {
+const editData = async (id: string) => {};
-  //   const formData = new FormData();
-  //   const name = `รอบการเสนอขอพระราชทานเครื่องราชรอบที่ ${
-  //     roundInsig.value.value
-  //   } ปี ${yearly.value + 543}`;
-  //   formData.append("name", name);
-  //   formData.append("year", yearly.value.toString());
-  //   formData.append("amount", datelast.value.toString());
-  //   formData.append("round", roundInsig.value.value);
-  //   if (dateStart.value !== null) {
-  //     formData.append("startDate", dateToISO(dateStart.value));
-  //   }
-  //   if (dateEnd.value !== null) {
-  //     formData.append("endDate", dateToISO(dateEnd.value));
-  //   }
-  //   formData.append("file", files.value);
-  //   showLoader();
-  //   await http
-  //     .put(config.API.editRoundInsignia(id), formData)
-  //     .then(() => {
-  //       success($q, "แก้ไขข้อมูลสำเร็จ");
-  //     })
-  //     .catch((e) => {
-  //       messageError($q, e);
-  //     })
-  //     .finally(async () => {
-  //       hideLoader();
-  //       clickBack();
-  //     });
-};
 
 const clickBack = () => {
   router.push(`/discipline/channel`);
@@ -187,6 +70,7 @@ const clickBack = () => {
                   dense
                   outlined
                   v-model="channel"
+                  for="channel"
                   label="กรอกชื่อช่องทาง"
                   :rules="[(val:string) => !!val || `${'กรุณากรอกชื่อช่องทาง'}`]"
                 />

src/modules/11_discipline/components/6_BasicInformation/Channel/MainPage.vue

@@ -132,6 +132,7 @@ onMounted(() => {});
         dense
         v-model="filterKeyword"
         ref="filterRef"
+        for="filterKeyword"
         outlined
         debounce="300"
         placeholder="ค้นหา"
@@ -150,6 +151,7 @@ onMounted(() => {});
       <q-select
         v-model="visibleColumns"
         multiple
+        for="visibleColumns"
         outlined
         dense
         options-dense
@@ -204,18 +206,6 @@ onMounted(() => {});
             </q-td>
           </q-tr>
         </template>
-        <!-- <template v-slot:pagination="scope">
-          <q-pagination
-            v-model="pagination.page"
-            active-color="primary"
-            color="dark"
-            :max="scope.pagesNumber"
-            :max-pages="5"
-            size="sm"
-            boundary-links
-            direction-links
-          ></q-pagination>
-        </template> -->
       </d-table>
     </div>
   </q-card>

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

@@ -0,0 +1,46 @@
+interface FormData {
+  Complaint: string;
+  dateInvestigate: Date | null;
+  dateAllegation: Date | null;
+  dateEvident: Date | null;
+  filesEvidence: File | null;
+  filesRecordAccuser: File | null;
+  filesWitnesses: File | null;
+  filesEtc: File | null;
+  casefault: string;
+  typefault: string;
+  faultLevel: string;
+  refLaw: string;
+  detailComplaint: string;
+  whereInvestigate: string;
+  trueDetail: string;
+  evidence: string;
+  recordAccuser: string;
+  witnesses: string;
+  InvestResults: string;
+}
+
+interface disciplinaryRef {
+  Complaint: object | null;
+  dateInvestigate: object | null;
+  dateAllegation: object | null;
+  dateEvident: object | null;
+  filesEvidence: object | null;
+  filesRecordAccuser: object | null;
+  filesWitnesses: object | null;
+  filesEtc: object | null;
+  casefault: object | null;
+  typefault: object | null;
+  faultLevel: object | null;
+  refLaw: object | null;
+  detailComplaint: object | null;
+  whereInvestigate: object | null;
+  trueDetail: object | null;
+  evidence: object | null;
+  recordAccuser: object | null;
+  witnesses: object | null;
+  InvestResults: object | null;
+  [key: string]: any;
+}
+
+export type { FormData, disciplinaryRef };