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

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-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="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></div
+        ></q-card-section>
+
+        <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 = () => {
-  if (myForm.value !== null) {
-    myForm.value.validate().then(async (success) => {
-      if (success) {
-        dialogConfirm($q, () => props.save(grandCross.value, amount.value));
-      } else {
-        dialogMessageNotify($q, "กรุณาข้อมูลให้ครบ");
-      }
-    });
-  }
+const onSubmit = () => {
+  // if (myForm.value !== null) {
+  //   myForm.value.validate().then(async (success) => {
+  //     if (success) {
+  dialogConfirm($q, () => props.save(grandCross.value, amount.value));
+  //     } else {
+  //       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">
-      <DialogHeader tittle="จัดสรรเครื่องราชฯ" :close="closeModal" />
-      <q-separator />
+    <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">
-        <div class="q-pa-md bg-grey-1">
+        <q-card-section>
           <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-form>
+        </q-card-section>
 
-      <q-separator />
-      <div class="row justify-end q-py-sm">
-        <div class="q-px-md">
-          <q-btn
-            label="บันทึก"
-            @click="clickSave"
-            color="public"
-            :disable="grandCross == '' || amount == null || amount == 0"
-          />
-        </div>
-      </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-card>
   </q-dialog>
 </template>