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

src/modules/07_insignia/components/2_Manage/Tab1.vue

@@ -1360,7 +1360,6 @@ onMounted(async () => {
             @click="clickSave"
             class="q-px-md"
           >
-            <!-- icon="mdi-content-save-outline" -->
             <q-tooltip>บันทึก</q-tooltip>
           </q-btn>
         </q-card-actions>

src/modules/07_insignia/components/3_result/DialogForm.vue

@@ -1,4 +1,4 @@
-<script setup lang="ts">
+divdiv<script setup lang="ts">
 import { ref, watch, computed } from "vue";
 import { QForm, useQuasar } from "quasar";
 import http from "@/plugins/http";
@@ -238,7 +238,10 @@ async function fectDataByid(id: string) {
 }
 
 /** function บักทึกผล*/
-async function clickSave() {
+async function onSubmit() {
+  dialogConfirm($q, () => {
+    if (props.roundId !== undefined) {
+      showLoader();
       let body = {
         citizanId: cardid.value, // เลขประจำตัวประชาชน
         insigniaId: brand.value, // insigniaID
@@ -256,33 +259,20 @@ async function clickSave() {
         typePayment: payment.value, // รูปแบบการจ่าย
         address: addressPayment.value, //ที่อยู่
       };
-  // เช็คค่าว่าง
+      http
-  await myForm.value!.validate().then((result: boolean) => {
-    if (result) {
-      dialogConfirm($q, async () => {
-        await addNote(body);
-      });
-    }
-  });
-}
-
-/** function เพิ่มแก้ ข้อมูลบันทึกผล*/
-async function addNote(body: any) {
-  if (props.roundId !== undefined) {
-    await http
         .put(config.API.noteAdd(props.roundId), body)
         .then(() => {
           success($q, "บันทึกข้อมูลสำเร็จ");
+          props.close?.();
         })
         .catch((err) => {
           messageError($q, err);
         })
         .finally(() => {
-        if (props.close) {
+          hideLoader();
-          props.close();
-        }
         });
     }
+  });
 }
 
 /** function หาเลขประจำตัวประชาชน*/
@@ -317,12 +307,16 @@ const filterSelector = (val: any, update: Function, name: any) => {
 
 <template>
   <q-dialog v-model="props.modal" persistent>
-    <q-card style="min-width: 900px" class="q-pb-md">
+    <q-card style="min-width: 900px" >
+      <q-form
+        ref="myForm"
+        greedy
+        @submit.prevent
+        @validation-success="onSubmit"
+      >
         <DialogHeader tittle="บันทึกผล" :close="props.close" />
         <q-separator />
-
+        <q-card-section>
-      <q-form ref="myForm">
-        <div class="q-pa-md bg-grey-1">
           <div class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs">
             <div class="col-4">
               <q-select
@@ -343,6 +337,7 @@ const filterSelector = (val: any, update: Function, name: any) => {
                 @update:model-value="selectType"
                 :disable="status !== ''"
                 lazy-rules
+                class="inputgreen"
               />
             </div>
             <div class="col-12 text-weight-bold text-grey">
@@ -421,6 +416,7 @@ const filterSelector = (val: any, update: Function, name: any) => {
                 v-model="Advertise"
                 lazy-rules
                 label="หมายเลขประกาศนีย์บัตรกำกับเครื่องราชอิสริยาภรณ์"
+                class="inputgreen"
               />
             </div>
             <div class="col-xs-12 col-sm-6">
@@ -440,6 +436,7 @@ const filterSelector = (val: any, update: Function, name: any) => {
                 :readonly="false"
                 use-input
                 :borderless="false"
+                class="inputgreen"
                 style="min-width: 150px"
                 :rules="[
                   (val) => !!val || 'กรุณากรอกชื่อชั้นตราเครื่องราชอิสริยาภรณ์',
@@ -472,6 +469,7 @@ const filterSelector = (val: any, update: Function, name: any) => {
                     borderless
                     outlined
                     :rules="[(val) => !!val || 'กรุณาเลือกวันที่']"
+                    class="inputgreen"
                     hide-bottom-space
                     :model-value="
                       receivedate != null ? date2Thai(receivedate) : undefined
@@ -493,6 +491,7 @@ const filterSelector = (val: any, update: Function, name: any) => {
               <q-input
                 :disable="disbleStatus || status == 'DONE'"
                 :rules="[(val) => !!val || 'กรุณากรอกทะเบียนฐานนันดร']"
+                class="inputgreen"
                 hide-bottom-space
                 dense
                 borderless
@@ -508,6 +507,7 @@ const filterSelector = (val: any, update: Function, name: any) => {
                   disbleStatus || status == 'DONE' || status == 'PENDING'
                 "
                 :rules="[(val) => !!val || 'กรุณากรอกสังกัด']"
+                class="inputgreen"
                 hide-bottom-space
                 dense
                 lazy-rules
@@ -523,6 +523,7 @@ const filterSelector = (val: any, update: Function, name: any) => {
                   disbleStatus || status == 'DONE' || status == 'PENDING'
                 "
                 :rules="[(val) => !!val || 'กรุณากรอกสังกัด']"
+                class="inputgreen"
                 hide-bottom-space
                 dense
                 borderless
@@ -560,6 +561,7 @@ const filterSelector = (val: any, update: Function, name: any) => {
                     borderless
                     outlined
                     :rules="[(val) => !!val || 'กรุณาเลือกวันที่']"
+                    class="inputgreen"
                     hide-bottom-space
                     :model-value="
                       announceDate != null ? date2Thai(announceDate) : undefined
@@ -660,6 +662,7 @@ const filterSelector = (val: any, update: Function, name: any) => {
                     borderless
                     outlined
                     hide-bottom-space
+                    class="inputgreen"
                     :model-value="
                       invoiceDate != null ? date2Thai(invoiceDate) : undefined
                     "
@@ -684,7 +687,7 @@ const filterSelector = (val: any, update: Function, name: any) => {
                 :disable="disbleStatus"
                 hide-bottom-space
                 :options="paymentOp"
-                class="col-xs-12 col-sm-6"
+                class="inputgreen"
                 dense
                 borderless
                 option-label="label"
@@ -701,27 +704,24 @@ const filterSelector = (val: any, update: Function, name: any) => {
               <q-input
                 :disable="disbleStatus"
                 label="ที่อยู่ที่จ่าย"
-                class="bg-white"
                 dense
                 lazy-rules
                 borderless
                 outlined
                 v-model="addressPayment"
                 type="textarea"
+                class="inputgreen"
               />
             </div>
           </div>
-        </div>
+        </q-card-section>
-      </q-form>
-
         <q-separator />
-      <div class="q-pa-md">
+        <q-card-actions align="right">
-        <div class="row justify-end">
+          <q-btn label="บันทึก" type="submit" color="public"
-          <q-btn label="บันทึก" @click="clickSave" color="public"
             ><q-tooltip>บันทึก</q-tooltip></q-btn
           >
-        </div>
+        </q-card-actions>
-      </div>
+      </q-form>
     </q-card>
   </q-dialog>
 </template>

src/modules/07_insignia/components/3_result/Dialogbody.vue

@@ -1,3 +1,4 @@
+div
 <script setup lang="ts">
 import { onMounted, ref, watch } from "vue";
 import { QForm, useQuasar } from "quasar";
@@ -74,21 +75,8 @@ function close() {
  * @param type receive,return
  * @param id personId
  */
-async function SaveData(type: string, id: string) {
+async function onSubmit(type: string, id: string) {
-  await myForm.value.validate().then((result: boolean) => {
+  dialogConfirm($q, () => {
-    if (result) {
-      dialogConfirm($q, () => dataSave(type, id));
-    } else {
-    }
-  });
-}
-
-/**
- * function บันทึกข้อมูล
- * @param type receive,return
- * @param id personId
- */
-function dataSave(type: string, id: string) {
     const formData = new FormData();
     if (props.dateCheckReceive === null) {
       formData.append("Date", dateToISO((Datereceive.value as Date) ?? nullii));
@@ -119,6 +107,7 @@ function dataSave(type: string, id: string) {
         props.close?.();
         hideLoader();
       });
+  });
 }
 
 /** function เรียกหน่วยงาน*/
@@ -175,6 +164,17 @@ watch(props, () => {
 <template>
   <q-dialog v-model="props.modal" persistent>
     <q-card style="min-width: 900px">
+      <q-form
+        ref="myForm"
+        greedy
+        @submit.prevent
+        @validation-success="
+          onSubmit(
+            props.dateCheckReceive === null ? 'receive' : 'return',
+            props.personId as string
+          )
+        "
+      >
         <q-toolbar>
           <q-toolbar-title class="text-subtitle2 text-bold"
             >รับ-คืนเครื่องราชฯ</q-toolbar-title
@@ -189,9 +189,7 @@ watch(props, () => {
           />
         </q-toolbar>
         <q-separator />
-
+        <q-card-section>
-      <q-form ref="myForm">
-        <div class="q-pa-md bg-grey-1">
           <div class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs">
             <div class="col-12 text-weight-bold text-grey-7">
               รับเครื่องราชฯ
@@ -220,18 +218,20 @@ watch(props, () => {
                     outlined
                     :rules="[(val) => !!val || 'กรุณาเลือกวันที่ได้รับ']"
                     hide-bottom-space
+                    class="inputgreen"
                     :model-value="
                       Datereceive != null ? date2Thai(Datereceive) : null
                     "
                     :label="`${'วันที่ได้รับ'}`"
                     :disable="dateCheckReceive !== null"
                   >
-                    <template v-if="Datereceive" v-slot:append>
+                    <template v-slot:prepend>
                       <q-icon
-                        name="cancel"
+                        name="event"
-                        @click.stop.prevent="Datereceive = null"
                         class="cursor-pointer"
-                      />
+                        color="primary"
+                      >
+                      </q-icon>
                     </template>
                   </q-input>
                 </template>
@@ -285,6 +285,7 @@ watch(props, () => {
                 :label="`หน่วยงานที่รับ`"
                 :rules="[(val) => !!val || 'กรุณาเลือกหน่วยงานที่รับ']"
                 :disable="dateCheckReceive !== null"
+                class="inputgreen"
               />
             </div>
           </div>
@@ -319,6 +320,7 @@ watch(props, () => {
                     dense
                     borderless
                     outlined
+                    class="inputgreen"
                     :rules="[(val) => !!val || 'กรุณาเลือกวันที่คืน']"
                     hide-bottom-space
                     :model-value="
@@ -389,30 +391,24 @@ watch(props, () => {
                 :label="`หน่วยงานที่คืน`"
                 :rules="[(val) => !!val || 'กรุณาเลือกหน่วยงานที่คืน']"
                 :disable="dateCheckReturn !== null"
+                class="inputgreen"
               />
             </div>
           </div>
-        </div>
+        </q-card-section>
-      </q-form>
 
-      <q-separator />
+        <q-separator v-if="dateCheckReturn === null" />
-      <div class="q-px-md q-py-sm">
+        <q-card-actions align="right">
-        <div class="row justify-end">
           <q-btn
             v-if="dateCheckReturn === null"
             label="บันทึก"
             color="public"
-            @click="
+            type="submit"
-              SaveData(
-                props.dateCheckReceive === null ? 'receive' : 'return',
-                props.personId as string
-              )
-            "
           >
             <q-tooltip>บันทึก</q-tooltip>
           </q-btn>
-        </div>
+        </q-card-actions>
-      </div>
+      </q-form>
     </q-card>
   </q-dialog>
 </template>

src/modules/07_insignia/components/4_Allocate/DialogEdit.vue

@@ -1,3 +1,4 @@
+div
 <script setup lang="ts">
 import { ref, watch } from "vue";
 import { QForm, useQuasar } from "quasar";
@@ -41,7 +42,7 @@ function closeModal() {
 }
 
 /** function ยืนยันการบันทึก*/
-const clickSave = () => {
+const onSubmit = () => {
   dialogConfirm($q, () => {
     if (props.actionType === "insignia") {
       props.save(
@@ -68,11 +69,15 @@ watch(props, () => {
 <template>
   <q-dialog v-model="props.modal" persistent>
     <q-card style="width: 800px">
+      <q-form
+        ref="myForm"
+        greedy
+        @submit.prevent
+        @validation-success="onSubmit"
+      >
         <DialogHeader tittle="แก้ไขการจัดสรรเครื่องราชฯ" :close="closeModal" />
         <q-separator />
-
+        <q-card-section>
-      <q-form ref="myForm">
-        <div class="q-pa-md bg-grey-1">
           <div
             class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs"
           >
@@ -99,17 +104,18 @@ watch(props, () => {
                 lazy-rules
                 type="number"
                 label="จำนวน"
+                :rules="[(val) => !!val || `${'กรุณากรอกจำนวน'}`]"
               />
-            </div>
+            </div></div
-          </div>
+        ></q-card-section>
-        </div>
+
-      </q-form>
         <q-separator />
-      <div class="row justify-end q-py-sm">
+        <q-card-actions align="right">
-        <div class="q-px-md">
+          <q-btn label="บันทึก" type="submit" color="public">
-          <q-btn label="บันทึก" @click="clickSave" color="public" />
+            <q-tooltip>บันทึก</q-tooltip>
-        </div>
+          </q-btn>
-      </div>
+        </q-card-actions>
+      </q-form>
     </q-card>
   </q-dialog>
 </template>

src/modules/07_insignia/components/4_Allocate/DialogForm.vue

@@ -1,3 +1,4 @@
+div
 <script setup lang="ts">
 import { ref, watch } from "vue";
 import { QForm, useQuasar } from "quasar";
@@ -53,7 +54,10 @@ function filterSelector(val: any, update: Function, name: any) {
     const needle = val.toLowerCase();
     if (name === "filterInsigniaOp") {
       grandCross.value = null;
-      filterInsigniaOp.value = props.insigniaList.filter(
+      const newList = props.insigniaList.filter(
+        (e: any) => e.name !== "ทั้งหมด"
+      );
+      filterInsigniaOp.value = newList.filter(
         (v: any) => v.name.toLowerCase().indexOf(needle) > -1
       );
     }
@@ -61,16 +65,16 @@ function filterSelector(val: any, update: Function, name: any) {
 }
 
 /** function ยืนยันการบันทึก*/
-const clickSave = () => {
+const onSubmit = () => {
-  if (myForm.value !== null) {
+  // if (myForm.value !== null) {
-    myForm.value.validate().then(async (success) => {
+  //   myForm.value.validate().then(async (success) => {
-      if (success) {
+  //     if (success) {
   dialogConfirm($q, () => props.save(grandCross.value, amount.value));
-      } else {
+  //     } else {
-        dialogMessageNotify($q, "กรุณาข้อมูลให้ครบ");
+  //       dialogMessageNotify($q, "กรุณาข้อมูลให้ครบ");
-      }
+  //     }
-    });
+  //   });
-  }
+  // }
 };
 
 watch(props, () => {
@@ -84,22 +88,28 @@ watch(props, () => {
 watch(
   () => props.insigniaList,
   (newVal) => {
-    filterInsigniaOp.value = newVal;
+    filterInsigniaOp.value = newVal.filter((e: any) => e.name !== "ทั้งหมด");
   }
 );
 </script>
 
 <template>
   <q-dialog v-model="props.modal" persistent>
-    <q-card style="width: 800px">
+    <q-card style="width: 700px; max-width: 80vw">
+      <q-form
+        ref="myForm"
+        greedy
+        @submit.prevent
+        @validation-success="onSubmit"
+      >
         <DialogHeader tittle="จัดสรรเครื่องราชฯ" :close="closeModal" />
         <q-separator />
 
-      <q-form ref="myForm">
+        <q-card-section>
-        <div class="q-pa-md bg-grey-1">
           <div class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs">
             <div class="col-6">
               <q-select
+                class="inputgreen"
                 hide-bottom-space
                 :options="filterInsigniaOp"
                 dense
@@ -112,7 +122,7 @@ watch(
                 map-options
                 outlined
                 options-cover
-                :rules="[(val) => !!val || `${'กรุณากรอกจำนวน'}`]"
+                :rules="[(val) => !!val || `${'กรุณาเลือกเครื่องราชฯ'}`]"
                 v-model="grandCross"
                 :label="
                   routeName == 'insigniaAllocate'
@@ -137,20 +147,15 @@ watch(
               />
             </div>
           </div>
-        </div>
+        </q-card-section>
-      </q-form>
 
         <q-separator />
-      <div class="row justify-end q-py-sm">
+        <q-card-actions align="right">
-        <div class="q-px-md">
+          <q-btn label="บันทึก" type="submit" color="public"
-          <q-btn
+            ><q-tooltip>บันทึก</q-tooltip></q-btn
-            label="บันทึก"
+          >
-            @click="clickSave"
+        </q-card-actions>
-            color="public"
+      </q-form>
-            :disable="grandCross == '' || amount == null || amount == 0"
-          />
-        </div>
-      </div>
     </q-card>
   </q-dialog>
 </template>

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

@@ -160,26 +160,25 @@ async function fetchOrgList() {
 // บันทึกข้อมูลการยืม-คืน
 
 /** function บันทึกการเพิ่มข้อมูล*/
-async function clickSave() {
+async function onSubmit() {
-  await myForm.value!.validate().then((result: boolean) => {
-    if (result) {
   dialogConfirm($q, async () => {
+    showLoader();
     if (props.action == "addData") {
       await http
         .post(config.API.insigniaManageBorrow(), {
           borrowDate: receivedate.value,
-              // borrowOrganizationId: OrganazationId.value,
           insigniaNoteProfileId: insigniaNoteProfileId.value,
         })
         .then(() => {
           success($q, "บันทึกข้อมูลสำเร็จ");
+          clearData();
+          props.closeAndFecth();
         })
         .catch((err) => {
           messageError($q, err);
         })
         .finally(() => {
-              clearData();
+          hideLoader();
-              props.closeAndFecth();
         });
     } else {
       await http
@@ -190,15 +189,14 @@ async function clickSave() {
         })
         .then(() => {
           success($q, "บันทึกข้อมูลสำเร็จ");
+          clearData();
+          props.closeAndFecth();
         })
         .catch((err) => {
           messageError($q, err);
         })
         .finally(() => {
-              clearData();
+          hideLoader();
-              props.closeAndFecth();
-            });
-        }
         });
     }
   });
@@ -297,11 +295,15 @@ watch(props, () => {
 <template>
   <q-dialog v-model="props.modal" persistent>
     <q-card style="min-width: 900px">
+      <q-form
+        ref="myForm "
+        greedy
+        @submit.prevent
+        @validation-success="onSubmit"
+      >
         <DialogHeader tittle="ยืม-คืนเครื่องราชฯ" :close="closeDialog" />
         <q-separator />
-
+        <q-card-section>
-      <q-form ref="myForm">
-        <div class="q-pa-md bg-grey-1">
           <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
@@ -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
@@ -542,19 +524,17 @@ watch(props, () => {
                   :label="`สาเหตุที่ส่งคืนเครื่องราชอิสริยาภรณ์`"
                 />
               </div>
-            </div>
+            </div></div
-          </div>
+        ></q-card-section>
-        </div>
-      </q-form>
 
         <q-separator />
-      <div class="q-pa-md">
+
-        <div class="row justify-end">
+        <q-card-actions align="right">
-          <q-btn label="บันทึก" @click="clickSave" color="public">
+          <q-btn label="บันทึก" type="submit" color="public">
             <q-tooltip>บันทึก</q-tooltip>
           </q-btn>
-        </div>
+        </q-card-actions>
-      </div>
+      </q-form>
     </q-card>
   </q-dialog>
 </template>

src/modules/08_registryEmployee/stores/registry-employee.ts

@@ -36,7 +36,7 @@ export const useRegistryEmp = defineStore("registry-employee", () => {
     switch (val) {
       case "WAITTING":
         return "รอดำเนินการ";
-      case "REPORT":
+      case "PENDING":
         return "เลือกตำแหน่งแล้ว";
       case "APPROVE":
         return "อนุมัติ";