แก้ bug เครื่องราช, เพิ่ม validate

src/modules/07_insignia/components/5_Borrow/DialogForm.vue

@@ -32,6 +32,7 @@ const listPerson = ref<any>([]);
 const OrgList = ref<DataOption[]>([]);
 const insigniaNoteProfileId = ref<string>("");
 
+// เคลียร์ข้อมูลในฟอร์ม
 const clearData = () => {
   receivedate.value = null;
   returndate.value = null;
@@ -75,17 +76,21 @@ const props = defineProps({
   },
 });
 
+// เช็ค props ถ้าเปิด dialog ให้ดึงรายการข้อมูล
 watch(props, () => {
   if (props.modal == true && props.roundId != "all") {
     roundNo.value = props.roundId;
     fecthlistInsignia();
     fetchOrgList();
-    if (props.action == "editData") {
-      fetchData();
-    }
+
+    // ดึงข้อมูลการยืม-คืนมาแสดงเก็บไว้ก่อนเผื่อต้องเอาข้อมูลมาแสดงเพิ่ม
+    // if (props.action == "editData") {
+    //   fetchData();
+    // }
   }
 });
 
+// ดึงข้อมูลรายการเครื่องราช
 const fecthlistInsignia = async () => {
   showLoader();
   let data = {
@@ -111,6 +116,7 @@ const fecthlistInsignia = async () => {
     });
 };
 
+// ดึงข้อมูลรายการหน่วยงาน
 const fetchOrgList = async () => {
   showLoader();
   await http
@@ -141,21 +147,21 @@ const fetchOrgList = async () => {
     });
 };
 
-const fetchData = async () => {
-  showLoader();
-  await http
-    .get(config.API.insigniaManageBorrowById(props.profileId))
-    .then(async (response: any) => {
-      console.log(response);
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-};
+// ดึงข้อมูลการยืม-คืนมาแสดงเก็บไว้ก่อนเผื่อต้องเอาข้อมูลมาแสดงเพิ่ม
+// const fetchData = async () => {
+//   showLoader();
+//   await http
+//     .get(config.API.insigniaManageBorrowById(props.profileId))
+//     .catch((err) => {
+//       messageError($q, err);
+//     })
+//     .finally(() => {
+//       hideLoader();
+//     });
+// };
 
+
+// บันทึกข้อมูลการยืม-คืน
 const clickSave = async () => {
   await myForm.value!.validate().then((result: boolean) => {
     if (result) {
@@ -200,6 +206,7 @@ const clickSave = async () => {
   });
 };
 
+// ค้นหาคนจากเลขประจำตัวประชาชน
 const searchcardid = async () => {
   if (cardid.value.length === 13) {
     const node = await listPerson.value.find(
@@ -220,15 +227,26 @@ const searchcardid = async () => {
   }
 };
 
+// ปิด dialog
 const closeDialog = () => {
   clearData();
   props.close();
 };
+
+// reset วันที่ยืม
+const clearReceiveDate = () => {
+  receivedate.value = null;
+}
+
+// reset วันที่คืน
+const clearReturnDate = () => {
+  returndate.value = null;
+}
 </script>
 
 <template>
   <q-dialog v-model="props.modal" persistent>
-    <q-card style="min-width: 900px" class="q-pb-md">
+    <q-card style="min-width: 900px">
       <DialogHeader tittle="ยืม-คืนเครื่องราชฯ" :close="closeDialog" />
       <q-separator />
 
@@ -261,7 +279,7 @@ const closeDialog = () => {
                   @update:model-value="fecthlistInsignia()"
                 />
               </div>
-              <div class="col-12 text-weight-bold text-grey">ข้อมูลผู้ยืม</div>
+              <div class="col-12 q-mt-md text-weight-bold text-grey-7">ข้อมูลผู้ยืม</div>
               <div class="col-xs-12 col-sm-6">
                 <q-input
                   :disable="roundNo == ''"
@@ -272,7 +290,7 @@ const closeDialog = () => {
                   dense
                   lazy-rules
                   :rules="[
-                    (val: string) => !!val || `${'กรุณากรอก เลขประจำตัวประชาชน'}`,
+                    (val: string) => !!val || `${'กรุณากรอกเลขประจำตัวประชาชน'}`,
                     (val: string) =>
                       val.length >= 13 ||
                       `${'กรุณากรอกเลขประจำตัวประชาชนให้ครบ'}`,
@@ -285,7 +303,7 @@ const closeDialog = () => {
               </div>
               <div class="col-xs-6 col-sm-6">
                 <q-input
-                  disable
+                  readonly
                   hide-bottom-space
                   outlined
                   dense
@@ -294,15 +312,16 @@ const closeDialog = () => {
                   borderless
                   v-model="fullName"
                   :label="`${'ชื่อ-นามสกุล'}`"
+                  :rules="[(val) => !!val || 'ชื่อ-นามสกุลต้องไม่ว่าง กรุณากรอกเลขประจำตัวประชาชนให้ถูกต้อง']"
                 />
               </div>
 
-              <div class="col-12 q-my-xs"><q-separator size="2px" /></div>
-              <div class="col-12 text-weight-bold text-grey">
+              <div class="col-12 q-mt-md text-weight-bold text-grey-7">
                 รายละเอียดการยืมเครื่องราชฯ
               </div>
               <div class="col-xs-12 col-sm-6">
                 <q-input
+                  :rules="[(val) => !!val || 'กรุณาเลือกเครื่องราชฯ']"
                   v-model="brand"
                   disable
                   dense
@@ -341,6 +360,7 @@ const closeDialog = () => {
                       "
                       :label="`${'วันที่ยืม'}`"
                       clearable
+                      @clear="clearReceiveDate"
                     >
                       <template v-slot:prepend>
                         <q-icon
@@ -369,6 +389,7 @@ const closeDialog = () => {
                   v-model="OrganazationId"
                   lazy-rules
                   :label="`เลือกหน่วยงาน`"
+                  :rules="[(val) => !!val || 'กรุณาเลือกหน่วยงาน']"
                 />
               </div>
             </div>
@@ -377,8 +398,8 @@ const closeDialog = () => {
               class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs"
               v-if="props.action === 'editData'"
             >
-              <div class="col-12 q-my-xs"><q-separator size="2px" /></div>
-              <div class="col-12 text-weight-bold text-grey">
+
+            <div class="col-12 text-weight-bold text-grey-7">
                 รายละเอียดการคืนเครื่องราชฯ
               </div>
               <div class="col-xs-12 col-sm-6">
@@ -403,13 +424,14 @@ const closeDialog = () => {
                       borderless
                       outlined
                       lazy-rules
-                      :rules="[(val) => !!val || 'กรุณาเลือกวันที่']"
+                      :rules="[(val) => !!val || 'กรุณาเลือกวันที่คืน']"
                       hide-bottom-space
                       :model-value="
                         returndate != null ? date2Thai(returndate) : undefined
                       "
                       :label="`${'วันที่คืน'}`"
                       clearable
+                      @clear="clearReturnDate"
                     >
                       <template v-slot:prepend>
                         <q-icon
@@ -438,6 +460,7 @@ const closeDialog = () => {
                   outlined
                   v-model="OrganazationId"
                   :label="`เลือกหน่วยงานที่ส่งคืน`"
+                  :rules="[(val) => !!val || 'กรุณาเลือกหน่วยงานที่คืน']"
                 />
               </div>
 

src/modules/07_insignia/components/5_Borrow/Main.vue

@@ -137,9 +137,7 @@ const columns = ref<QTableProps["columns"]>([
     align: "left",
     label: "ลำดับ",
     field: "no",
-    sortable: true,
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+    sortable: false,
   },
   {
     name: "citizenId",