ปรับ ui สรรหาสอบคัดเลือก

src/modules/01_exam/components/Form/Information.vue

@@ -10,7 +10,7 @@
   />
   <q-form ref="myform" class="col-12 row q-col-gutter-x-sm justify-center q-col-gutter-sm">
     <div class="row col-xs-12 col-sm-12 col-md-10 items-center q-col-gutter-x-sm q-col-gutter-y-xs">
-      <div class="col-xs-12 col-sm-2 col-md-2">
+      <div class="col-xs-12 col-sm-3 col-md-3">
         <q-select
           :class="getClass(status == 'register' || status == 'rejectRegister')"
           :readonly="!(status == 'register' || status == 'rejectRegister')"
@@ -28,7 +28,7 @@
           :label="`${'คำนำหน้า'}`"
         />
       </div>
-      <div class="col-xs-12 col-sm-5 col-md-5">
+      <div class="col-xs-12 col-sm-3 col-md-3">
         <q-input
           :class="getClass(status == 'register' || status == 'rejectRegister')"
           :outlined="status == 'register' || status == 'rejectRegister'"
@@ -41,7 +41,7 @@
           :label="`${'ชื่อ'}`"
         />
       </div>
-      <div class="col-xs-12 col-sm-5 col-md-5">
+      <div class="col-xs-12 col-sm-3 col-md-3">
         <q-input
           :class="getClass(status == 'register' || status == 'rejectRegister')"
           :outlined="status == 'register' || status == 'rejectRegister'"
@@ -67,6 +67,24 @@
           :label="`${'สัญชาติ'}`"
         />
       </div>
+      <div class="col-xs-12 col-sm-3 col-md-3">
+        <q-select
+          :class="getClass(status == 'register' || status == 'rejectRegister')"
+          :readonly="!(status == 'register' || status == 'rejectRegister')"
+          :borderless="!(status == 'register' || status == 'rejectRegister')"
+          :rules="[(val) => !!val || `${'กรุณาเลือก ศาสนา'}`]"
+          :outlined="status == 'register' || status == 'rejectRegister'"
+          dense
+          lazy-rules
+          v-model="defaultInformation.religionId"
+          emit-value
+          map-options
+          option-label="name"
+          :options="religionOptions"
+          option-value="id"
+          :label="`${'ศาสนา'}`"
+        />
+      </div>
       <div class="col-xs-12 col-sm-3 col-md-3">
         <datepicker
           menu-class-name="modalfix"
@@ -132,21 +150,23 @@
         />
       </div>
       <div class="col-xs-12 col-sm-3 col-md-3">
-        <q-select
+        <q-input
+          :outlined="status == 'register' || status == 'rejectRegister'"
+          dense
+          :counter="status == 'register' || status == 'rejectRegister' ? true : false"
+          lazy-rules
+          type="tel"
+          mask="##########"
+          maxlength="10"
           :class="getClass(status == 'register' || status == 'rejectRegister')"
           :readonly="!(status == 'register' || status == 'rejectRegister')"
           :borderless="!(status == 'register' || status == 'rejectRegister')"
-          :rules="[(val) => !!val || `${'กรุณาเลือก ศาสนา'}`]"
-          :outlined="status == 'register' || status == 'rejectRegister'"
-          dense
-          lazy-rules
-          v-model="defaultInformation.religionId"
-          emit-value
-          map-options
-          option-label="name"
-          :options="religionOptions"
-          option-value="id"
-          :label="`${'ศาสนา'}`"
+          v-model="defaultInformation.tel"
+          :label="`${'โทรศัพท์'}`"
+          :rules="[
+            (val) => val.length == 10 || `${'กรุณากรอก โทรศัพท์'}`,
+            (val) => /^[0-9]*$/.test(val) || `${'กรุณากรอกข้อมูลโทรศัพท์ให้ถูกต้อง'}`
+          ]"
         />
       </div>
       <div class="col-xs-12 col-sm-3 col-md-3">
@@ -169,28 +189,7 @@
           label="เลขบัตรประจำตัวประชาชน"
         />
       </div>
-      <div class="col-xs-12 col-sm-3 col-md-3">
-        <q-input
-          :outlined="status == 'register' || status == 'rejectRegister'"
-          dense
-          :counter="status == 'register' || status == 'rejectRegister' ? true : false"
-          lazy-rules
-          type="tel"
-          mask="##########"
-          maxlength="10"
-          :class="getClass(status == 'register' || status == 'rejectRegister')"
-          :readonly="!(status == 'register' || status == 'rejectRegister')"
-          :borderless="!(status == 'register' || status == 'rejectRegister')"
-          v-model="defaultInformation.tel"
-          :label="`${'โทรศัพท์'}`"
-          :rules="[
-            (val) => val.length == 10 || `${'กรุณากรอก โทรศัพท์'}`,
-            (val) => /^[0-9]*$/.test(val) || `${'กรุณากรอกข้อมูลโทรศัพท์ให้ถูกต้อง'}`
-          ]"
-        />
-        <!--  -->
-      </div>
-      <div class="col-xs-12 col-sm-3 col-md-3">
+      <!-- <div class="col-xs-12 col-sm-3 col-md-3">
         <q-input
           :outlined="status == 'register' || status == 'rejectRegister'"
           dense
@@ -209,7 +208,7 @@
           ]"
           :label="`${'โทรศัพท์มือถือ'}`"
         />
-      </div>
+      </div> -->
       <div class="col-xs-12 col-sm-3 col-md-3 q-pb-md">
         <q-input
           :class="getClass(status == 'register' || status == 'rejectRegister')"