เครื่องราชอิสริยาภรณ์ => ปรับ form Dialog

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

@@ -160,46 +160,44 @@ async function fetchOrgList() {
 // บันทึกข้อมูลการยืม-คืน
 
 /** function บันทึกการเพิ่มข้อมูล*/
-async function clickSave() {
-  await myForm.value!.validate().then((result: boolean) => {
-    if (result) {
-      dialogConfirm($q, async () => {
-        if (props.action == "addData") {
-          await http
-            .post(config.API.insigniaManageBorrow(), {
-              borrowDate: receivedate.value,
-              // borrowOrganizationId: OrganazationId.value,
-              insigniaNoteProfileId: insigniaNoteProfileId.value,
-            })
-            .then(() => {
-              success($q, "บันทึกข้อมูลสำเร็จ");
-            })
-            .catch((err) => {
-              messageError($q, err);
-            })
-            .finally(() => {
-              clearData();
-              props.closeAndFecth();
-            });
-        } else {
-          await http
-            .put(config.API.insigniaManageBorrowReturn(props.profileId), {
-              returnDate: returndate.value,
-              returnOrganizationId: OrganazationId.value,
-              returnReason: reason.value,
-            })
-            .then(() => {
-              success($q, "บันทึกข้อมูลสำเร็จ");
-            })
-            .catch((err) => {
-              messageError($q, err);
-            })
-            .finally(() => {
-              clearData();
-              props.closeAndFecth();
-            });
-        }
-      });
+async function onSubmit() {
+  dialogConfirm($q, async () => {
+    showLoader();
+    if (props.action == "addData") {
+      await http
+        .post(config.API.insigniaManageBorrow(), {
+          borrowDate: receivedate.value,
+          insigniaNoteProfileId: insigniaNoteProfileId.value,
+        })
+        .then(() => {
+          success($q, "บันทึกข้อมูลสำเร็จ");
+          clearData();
+          props.closeAndFecth();
+        })
+        .catch((err) => {
+          messageError($q, err);
+        })
+        .finally(() => {
+          hideLoader();
+        });
+    } else {
+      await http
+        .put(config.API.insigniaManageBorrowReturn(props.profileId), {
+          returnDate: returndate.value,
+          returnOrganizationId: OrganazationId.value,
+          returnReason: reason.value,
+        })
+        .then(() => {
+          success($q, "บันทึกข้อมูลสำเร็จ");
+          clearData();
+          props.closeAndFecth();
+        })
+        .catch((err) => {
+          messageError($q, err);
+        })
+        .finally(() => {
+          hideLoader();
+        });
     }
   });
 }
@@ -297,11 +295,15 @@ watch(props, () => {
 <template>
   <q-dialog v-model="props.modal" persistent>
     <q-card style="min-width: 900px">
-      <DialogHeader tittle="ยืม-คืนเครื่องราชฯ" :close="closeDialog" />
-      <q-separator />
-
-      <q-form ref="myForm">
-        <div class="q-pa-md bg-grey-1">
+      <q-form
+        ref="myForm "
+        greedy
+        @submit.prevent
+        @validation-success="onSubmit"
+      >
+        <DialogHeader tittle="ยืม-คืนเครื่องราชฯ" :close="closeDialog" />
+        <q-separator />
+        <q-card-section>
           <div
             class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs"
           >
@@ -311,6 +313,7 @@ watch(props, () => {
             >
               <div class="col-6">
                 <q-select
+                  class="inputgreen"
                   v-model="roundNo"
                   dense
                   outlined
@@ -329,8 +332,8 @@ watch(props, () => {
                   :rules="[(val) => !!val || 'กรุณาเลือกรอบการขอเครื่องราชฯ']"
                   @update:model-value="fecthlistInsignia()"
                   @filter="(inputValue:any,
-                      doneFn:Function) => filterSelector(inputValue, doneFn,'filterSelectRoundOption'
-                      ) "
+                    doneFn:Function) => filterSelector(inputValue, doneFn,'filterSelectRoundOption'
+                    ) "
                 />
               </div>
               <div class="col-12 q-mt-md text-weight-bold text-grey-7">
@@ -346,11 +349,11 @@ watch(props, () => {
                   dense
                   lazy-rules
                   :rules="[
-                    (val: string) => !!val || `${'กรุณากรอกเลขประจำตัวประชาชน'}`,
-                    (val: string) =>
-                      val.length >= 13 ||
-                      `${'กรุณากรอกเลขประจำตัวประชาชนให้ครบ'}`,
-                  ]"
+                  (val: string) => !!val || `${'กรุณากรอกเลขประจำตัวประชาชน'}`,
+                  (val: string) =>
+                    val.length >= 13 ||
+                    `${'กรุณากรอกเลขประจำตัวประชาชนให้ครบ'}`,
+                ]"
                   label="เลขประจำตัวประชาชน"
                   maxlength="13"
                   mask="#############"
@@ -409,6 +412,7 @@ watch(props, () => {
                   </template>
                   <template #trigger>
                     <q-input
+                      class="inputgreen"
                       dense
                       borderless
                       outlined
@@ -430,28 +434,6 @@ watch(props, () => {
                   </template>
                 </datepicker>
               </div>
-
-              <!-- <div class="col-xs-12 col-sm-6">
-                <q-select
-                  hide-bottom-space
-                  :options="filterOrgList"
-                  dense
-                  borderless
-                  option-label="name"
-                  option-value="id"
-                  emit-value
-                  use-input
-                  map-options
-                  outlined
-                  v-model="OrganazationId"
-                  lazy-rules
-                  :label="`เลือกหน่วยงาน`"
-                  :rules="[(val) => !!val || 'กรุณาเลือกหน่วยงาน']"
-                  @filter="(inputValue:any,
-                      doneFn:Function) => filterSelector(inputValue, doneFn,'filterOrgList'
-                      ) "
-                />
-              </div> -->
             </div>
 
             <div
@@ -505,26 +487,26 @@ watch(props, () => {
               </div>
 
               <!-- <div class="col-xs-12 col-sm-6">
-                <q-select
-                  hide-bottom-space
-                  :options="filterOrgList"
-                  dense
-                  lazy-rules
-                  borderless
-                  option-label="name"
-                  option-value="id"
-                  emit-value
-                  map-options
-                  outlined
-                  use-input
-                  v-model="OrganazationId"
-                  :label="`เลือกหน่วยงานที่ส่งคืน`"
-                  :rules="[(val) => !!val || 'กรุณาเลือกหน่วยงานที่คืน']"
-                  @filter="(inputValue:any,
-                      doneFn:Function) => filterSelector(inputValue, doneFn,'filterOrgList'
-                      ) "
-                />
-              </div> -->
+              <q-select
+                hide-bottom-space
+                :options="filterOrgList"
+                dense
+                lazy-rules
+                borderless
+                option-label="name"
+                option-value="id"
+                emit-value
+                map-options
+                outlined
+                use-input
+                v-model="OrganazationId"
+                :label="`เลือกหน่วยงานที่ส่งคืน`"
+                :rules="[(val) => !!val || 'กรุณาเลือกหน่วยงานที่คืน']"
+                @filter="(inputValue:any,
+                    doneFn:Function) => filterSelector(inputValue, doneFn,'filterOrgList'
+                    ) "
+              />
+            </div> -->
 
               <div class="col-12">
                 <q-input
@@ -542,19 +524,17 @@ watch(props, () => {
                   :label="`สาเหตุที่ส่งคืนเครื่องราชอิสริยาภรณ์`"
                 />
               </div>
-            </div>
-          </div>
-        </div>
-      </q-form>
+            </div></div
+        ></q-card-section>
 
-      <q-separator />
-      <div class="q-pa-md">
-        <div class="row justify-end">
-          <q-btn label="บันทึก" @click="clickSave" color="public">
+        <q-separator />
+
+        <q-card-actions align="right">
+          <q-btn label="บันทึก" type="submit" color="public">
             <q-tooltip>บันทึก</q-tooltip>
           </q-btn>
-        </div>
-      </div>
+        </q-card-actions>
+      </q-form>
     </q-card>
   </q-dialog>
 </template>