เครื่องราชอิสริยาภรณ์ => ปรับ 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,53 +238,43 @@ async function fectDataByid(id: string) {
 }
 
 /** function บักทึกผล*/
-async function clickSave() {
+async function onSubmit() {
-  let body = {
+  dialogConfirm($q, () => {
-    citizanId: cardid.value, // เลขประจำตัวประชาชน
+    if (props.roundId !== undefined) {
-    insigniaId: brand.value, // insigniaID
+      showLoader();
-    number: Advertise.value,
+      let body = {
-    issue: issue.value,
+        citizanId: cardid.value, // เลขประจำตัวประชาชน
-    dateReceive: receivedate.value, // วันที่ได้รับเครื่องราชฯ
+        insigniaId: brand.value, // insigniaID
-    organizationOrganizationSend: affiliationRequest.value,
+        number: Advertise.value,
-    organizationOrganizationReceive: affiliationReceived.value,
+        issue: issue.value,
-    date: announceDate.value, // วันที่กิจนุเบก
+        dateReceive: receivedate.value, // วันที่ได้รับเครื่องราชฯ
-    volumeNo: volume.value, // เล่ม
+        organizationOrganizationSend: affiliationRequest.value,
-    section: episode.value, //ตอนที่
+        organizationOrganizationReceive: affiliationReceived.value,
-    page: duty.value, //หน้าที่
+        date: announceDate.value, // วันที่กิจนุเบก
-    no: announced.value,
+        volumeNo: volume.value, // เล่ม
-    datePayment: invoiceDate.value, //วันที่จ่าย
+        section: episode.value, //ตอนที่
-    typePayment: payment.value, // รูปแบบการจ่าย
+        page: duty.value, //หน้าที่
-    address: addressPayment.value, //ที่อยู่
+        no: announced.value,
-  };
+        datePayment: invoiceDate.value, //วันที่จ่าย
-  // เช็คค่าว่าง
+        typePayment: payment.value, // รูปแบบการจ่าย
-  await myForm.value!.validate().then((result: boolean) => {
+        address: addressPayment.value, //ที่อยู่
-    if (result) {
+      };
-      dialogConfirm($q, async () => {
+      http
-        await addNote(body);
+        .put(config.API.noteAdd(props.roundId), body)
-      });
+        .then(() => {
+          success($q, "บันทึกข้อมูลสำเร็จ");
+          props.close?.();
+        })
+        .catch((err) => {
+          messageError($q, err);
+        })
+        .finally(() => {
+          hideLoader();
+        });
     }
   });
 }
 
-/** function เพิ่มแก้ ข้อมูลบันทึกผล*/
-async function addNote(body: any) {
-  if (props.roundId !== undefined) {
-    await http
-      .put(config.API.noteAdd(props.roundId), body)
-      .then(() => {
-        success($q, "บันทึกข้อมูลสำเร็จ");
-      })
-      .catch((err) => {
-        messageError($q, err);
-      })
-      .finally(() => {
-        if (props.close) {
-          props.close();
-        }
-      });
-  }
-}
-
 /** function หาเลขประจำตัวประชาชน*/
 function searchcardid() {
   if (cardid.value.length === 13) {
@@ -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" >
-      <DialogHeader tittle="บันทึกผล" :close="props.close" />
+      <q-form
-      <q-separator />
+        ref="myForm"
-
+        greedy
-      <q-form ref="myForm">
+        @submit.prevent
-        <div class="q-pa-md bg-grey-1">
+        @validation-success="onSubmit"
+      >
+        <DialogHeader tittle="บันทึกผล" :close="props.close" />
+        <q-separator />
+        <q-card-section>
           <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 />
-
+        <q-card-actions align="right">
-      <q-separator />
+          <q-btn label="บันทึก" type="submit" color="public"
-      <div class="q-pa-md">
-        <div class="row justify-end">
-          <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,53 +75,41 @@ 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) {
+    const formData = new FormData();
-      dialogConfirm($q, () => dataSave(type, id));
+    if (props.dateCheckReceive === null) {
+      formData.append("Date", dateToISO((Datereceive.value as Date) ?? nullii));
+      formData.append("File", files.value);
+      formData.append("OrgId", OrganazationId.value);
     } else {
+      formData.append("Date", dateToISO((Datereturn.value as Date) ?? nullii));
+      formData.append("File", filesReturn.value);
+      formData.append("OrgId", OrganazationId2.value);
     }
+    showLoader();
+    http
+      .put(config.API.requestinsignia(type, id), formData)
+      .then(() => {
+        success($q, "บันทึกข้อมูลสำเร็จ");
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(async () => {
+        Datereceive.value = null;
+        files.value = null;
+        OrganazationId.value = "";
+        Datereturn.value = null;
+        filesReturn.value = null;
+        OrganazationId2.value = "";
+        props.fecthlistInsignia?.();
+        props.close?.();
+        hideLoader();
+      });
   });
 }
 
-/**
- * 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));
-    formData.append("File", files.value);
-    formData.append("OrgId", OrganazationId.value);
-  } else {
-    formData.append("Date", dateToISO((Datereturn.value as Date) ?? nullii));
-    formData.append("File", filesReturn.value);
-    formData.append("OrgId", OrganazationId2.value);
-  }
-  showLoader();
-  http
-    .put(config.API.requestinsignia(type, id), formData)
-    .then(() => {
-      success($q, "บันทึกข้อมูลสำเร็จ");
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      Datereceive.value = null;
-      files.value = null;
-      OrganazationId.value = "";
-      Datereturn.value = null;
-      filesReturn.value = null;
-      OrganazationId2.value = "";
-      props.fecthlistInsignia?.();
-      props.close?.();
-      hideLoader();
-    });
-}
-
 /** function เรียกหน่วยงาน*/
 async function fetchOrgList() {
   showLoader();
@@ -175,23 +164,32 @@ watch(props, () => {
 <template>
   <q-dialog v-model="props.modal" persistent>
     <q-card style="min-width: 900px">
-      <q-toolbar>
+      <q-form
-        <q-toolbar-title class="text-subtitle2 text-bold"
+        ref="myForm"
-          >รับ-คืนเครื่องราชฯ</q-toolbar-title
+        greedy
-        >
+        @submit.prevent
-        <q-btn
+        @validation-success="
-          icon="close"
+          onSubmit(
-          unelevated
+            props.dateCheckReceive === null ? 'receive' : 'return',
-          round
+            props.personId as string
-          dense
+          )
-          @click="close"
+        "
-          style="color: #ff8080; background-color: #ffdede"
+      >
-        />
+        <q-toolbar>
-      </q-toolbar>
+          <q-toolbar-title class="text-subtitle2 text-bold"
-      <q-separator />
+            >รับ-คืนเครื่องราชฯ</q-toolbar-title
-
+          >
-      <q-form ref="myForm">
+          <q-btn
-        <div class="q-pa-md bg-grey-1">
+            icon="close"
+            unelevated
+            round
+            dense
+            @click="close"
+            style="color: #ff8080; background-color: #ffdede"
+          />
+        </q-toolbar>
+        <q-separator />
+        <q-card-section>
           <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">
-      <DialogHeader tittle="แก้ไขการจัดสรรเครื่องราชฯ" :close="closeModal" />
+      <q-form
-      <q-separator />
+        ref="myForm"
-
+        greedy
-      <q-form ref="myForm">
+        @submit.prevent
-        <div class="q-pa-md bg-grey-1">
+        @validation-success="onSubmit"
+      >
+        <DialogHeader tittle="แก้ไขการจัดสรรเครื่องราชฯ" :close="closeModal" />
+        <q-separator />
+        <q-card-section>
           <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-separator />
+        <q-card-actions align="right">
+          <q-btn label="บันทึก" type="submit" color="public">
+            <q-tooltip>บันทึก</q-tooltip>
+          </q-btn>
+        </q-card-actions>
       </q-form>
-      <q-separator />
-      <div class="row justify-end q-py-sm">
-        <div class="q-px-md">
-          <q-btn label="บันทึก" @click="clickSave" color="public" />
-        </div>
-      </div>
     </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));
+  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">
-      <DialogHeader tittle="จัดสรรเครื่องราชฯ" :close="closeModal" />
+      <q-form
-      <q-separator />
+        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'
@@ -120,7 +130,7 @@ watch(
                     : `เลือกหน่วยงาน`
                 "
                 @filter="(inputValue:any,doneFn:Function) => 
-                filterSelector(inputValue, doneFn,'filterInsigniaOp') "
+                  filterSelector(inputValue, doneFn,'filterInsigniaOp') "
               />
             </div>
             <div class="col-xs-12 col-sm-6">
@@ -137,20 +147,15 @@ watch(
               />
             </div>
           </div>
-        </div>
+        </q-card-section>
-      </q-form>
 
-      <q-separator />
+        <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,46 +160,44 @@ async function fetchOrgList() {
 // บันทึกข้อมูลการยืม-คืน
 
 /** function บันทึกการเพิ่มข้อมูล*/
-async function clickSave() {
+async function onSubmit() {
-  await myForm.value!.validate().then((result: boolean) => {
+  dialogConfirm($q, async () => {
-    if (result) {
+    showLoader();
-      dialogConfirm($q, async () => {
+    if (props.action == "addData") {
-        if (props.action == "addData") {
+      await http
-          await http
+        .post(config.API.insigniaManageBorrow(), {
-            .post(config.API.insigniaManageBorrow(), {
+          borrowDate: receivedate.value,
-              borrowDate: receivedate.value,
+          insigniaNoteProfileId: insigniaNoteProfileId.value,
-              // borrowOrganizationId: OrganazationId.value,
+        })
-              insigniaNoteProfileId: insigniaNoteProfileId.value,
+        .then(() => {
-            })
+          success($q, "บันทึกข้อมูลสำเร็จ");
-            .then(() => {
+          clearData();
-              success($q, "บันทึกข้อมูลสำเร็จ");
+          props.closeAndFecth();
-            })
+        })
-            .catch((err) => {
+        .catch((err) => {
-              messageError($q, err);
+          messageError($q, err);
-            })
+        })
-            .finally(() => {
+        .finally(() => {
-              clearData();
+          hideLoader();
-              props.closeAndFecth();
+        });
-            });
+    } else {
-        } else {
+      await http
-          await http
+        .put(config.API.insigniaManageBorrowReturn(props.profileId), {
-            .put(config.API.insigniaManageBorrowReturn(props.profileId), {
+          returnDate: returndate.value,
-              returnDate: returndate.value,
+          returnOrganizationId: OrganazationId.value,
-              returnOrganizationId: OrganazationId.value,
+          returnReason: reason.value,
-              returnReason: reason.value,
+        })
-            })
+        .then(() => {
-            .then(() => {
+          success($q, "บันทึกข้อมูลสำเร็จ");
-              success($q, "บันทึกข้อมูลสำเร็จ");
+          clearData();
-            })
+          props.closeAndFecth();
-            .catch((err) => {
+        })
-              messageError($q, err);
+        .catch((err) => {
-            })
+          messageError($q, err);
-            .finally(() => {
+        })
-              clearData();
+        .finally(() => {
-              props.closeAndFecth();
+          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-form
-      <q-separator />
+        ref="myForm "
-
+        greedy
-      <q-form ref="myForm">
+        @submit.prevent
-        <div class="q-pa-md bg-grey-1">
+        @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 || `${'กรุณากรอกเลขประจำตัวประชาชน'}`,
-                    (val: string) =>
+                  (val: string) =>
-                      val.length >= 13 ||
+                    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
+              <q-select
-                  hide-bottom-space
+                hide-bottom-space
-                  :options="filterOrgList"
+                :options="filterOrgList"
-                  dense
+                dense
-                  lazy-rules
+                lazy-rules
-                  borderless
+                borderless
-                  option-label="name"
+                option-label="name"
-                  option-value="id"
+                option-value="id"
-                  emit-value
+                emit-value
-                  map-options
+                map-options
-                  outlined
+                outlined
-                  use-input
+                use-input
-                  v-model="OrganazationId"
+                v-model="OrganazationId"
-                  :label="`เลือกหน่วยงานที่ส่งคืน`"
+                :label="`เลือกหน่วยงานที่ส่งคืน`"
-                  :rules="[(val) => !!val || 'กรุณาเลือกหน่วยงานที่คืน']"
+                :rules="[(val) => !!val || 'กรุณาเลือกหน่วยงานที่คืน']"
-                  @filter="(inputValue:any,
+                @filter="(inputValue:any,
-                      doneFn:Function) => filterSelector(inputValue, doneFn,'filterOrgList'
+                    doneFn:Function) => filterSelector(inputValue, doneFn,'filterOrgList'
-                      ) "
+                    ) "
-                />
+              />
-              </div> -->
+            </div> -->
 
               <div class="col-12">
                 <q-input
@@ -542,19 +524,17 @@ watch(props, () => {
                   :label="`สาเหตุที่ส่งคืนเครื่องราชอิสริยาภรณ์`"
                 />
               </div>
-            </div>
+            </div></div
-          </div>
+        ></q-card-section>
-        </div>
-      </q-form>
 
-      <q-separator />
+        <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 "อนุมัติ";