ออกคำสั่ง => ปรับ form

src/modules/10_order/components/step/step01.vue

@@ -1,3 +1,4 @@
+div
 <script setup lang="ts">
 import { ref, onMounted, watch } from "vue";
 import { useCounterMixin } from "@/stores/mixin";
@@ -812,9 +813,9 @@ const getClass = (val: boolean) => {
 };
 </script>
 <template>
-  <q-form greedy @submit.prevent @validation-success="onSubmit" class="q-pa-md">
-    <div class="q-pa-md">
-      <div style="max-height: 68vh; overflow-y: scroll">
+  <q-card>
+    <q-form greedy @submit.prevent @validation-success="onSubmit">
+      <q-card-section style="max-height: 50vh">
         <!-- Main -->
         <div class="row col-12 q-col-gutter-x-lg q-col-gutter-y-md">
           <div class="col-xs-12 col-md-6">
@@ -834,8 +835,8 @@ const getClass = (val: boolean) => {
               input-debounce="0"
               @update:model-value="selectCMP(typeOrder)"
               @filter="(inputValue:any,
-                          doneFn:Function) => filterSelector(inputValue, doneFn,'typeOrderOption'
-                          ) "
+                            doneFn:Function) => filterSelector(inputValue, doneFn,'typeOrderOption'
+                            ) "
             />
           </div>
           <div class="col-xs-12 col-md-6">
@@ -2215,26 +2216,25 @@ const getClass = (val: boolean) => {
               typeOrder.commandCode === 'C-PM-32')
           "
         >
-          <div class="row col-12">
-            <div class="col-xs-12 col-md-6">
-              <selector
-                :class="getClass(true)"
-                outlined
-                dense
-                v-model="complaintId"
-                :rules="[(val: string) => !!val || `${'กรุณาเลือกเรื่องร้องเรียน'}`]"
-                emit-value
-                hide-bottom-space
-                :label="`${'เรื่องร้องเรียน'}`"
-                map-options
-                option-label="name"
-                :options="DataStore.complaintOption"
-                option-value="id"
-                use-input
-                input-debounce="0"
-              />
-            </div>
+          <div class="col-xs-12 col-md-6">
+            <selector
+              :class="getClass(true)"
+              outlined
+              dense
+              v-model="complaintId"
+              :rules="[(val: string) => !!val || `${'กรุณาเลือกเรื่องร้องเรียน'}`]"
+              emit-value
+              hide-bottom-space
+              :label="`${'เรื่องร้องเรียน'}`"
+              map-options
+              option-label="name"
+              :options="DataStore.complaintOption"
+              option-value="id"
+              use-input
+              input-debounce="0"
+            />
           </div>
+          <div class="col-xs-12 col-md-6"></div>
 
           <div class="col-xs-12 col-md-6">
             <q-input
@@ -2281,22 +2281,15 @@ const getClass = (val: boolean) => {
             />
           </div>
         </div>
-      </div>
-    </div>
-
-    <q-separator />
-    <div class="flex justify-end q-gutter-sm q-mt-md">
-      <q-btn
-        unelevated
-        label="บันทึก"
-        id="onSubmit"
-        type="submit"
-        color="public"
-      >
-        <q-tooltip>บันทึกข้อมูล</q-tooltip>
-      </q-btn>
-    </div>
-  </q-form>
+      </q-card-section>
+      <q-separator />
+      <q-card-actions align="right">
+        <q-btn label="บันทึก" id="onSubmit" type="submit" color="public">
+          <q-tooltip>บันทึกข้อมูล</q-tooltip>
+        </q-btn>
+      </q-card-actions>
+    </q-form>
+  </q-card>
 
   <q-dialog v-model="dialogVisible">
     <q-card style="width: 900px; max-width: 80vw">