แก้แบบฟอร์มเพิ่มเติม

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

@@ -4,8 +4,8 @@
     v-model:edit="edit"
     :header="
       $q.screen.gt.xs
-        ? 'Upload รูปถ่าย (รูปถ่ายหน้าตรง ชุดสุภาพ ไม่สวมหมวก/แว่นตาดำ และไม่มีลวดลายใด ๆ บนรูปถ่าย)'
+        ? 'อัปโหลดเอกสาร (ถ้ามี)'
-        : 'Upload'
+        : 'อัปโหลดเอกสาร'
     "
     icon="mdi-file-document"
     :addData="true"

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

@@ -10,7 +10,27 @@
   />
   <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-9 items-center q-col-gutter-x-sm q-col-gutter-y-xs">
-      <div class="col-xs-12 col-sm-3 col-md-3">
+      <div class="col-xs-12 col-sm-3 col-md-4">
+        <q-input
+          :class="getClass(status == 'register' || status == 'rejectRegister')"
+          :outlined="status == 'register' || status == 'rejectRegister'"
+          dense
+          type="tel"
+          mask="#############"
+          :counter="status == 'register' || status == 'rejectRegister' ? true : false"
+          lazy-rules
+          :readonly="!(status == 'register' || status == 'rejectRegister')"
+          :borderless="!(status == 'register' || status == 'rejectRegister')"
+          v-model="defaultInformation.cardid"
+          maxlength="13"
+          :rules="[
+            (val) => val.length == 13 || `${'กรุณากรอก เลขประจำตัวประชาชน'}`,
+            (val) => /^[0-9]*$/.test(val) || `${'กรุณากรอกเลขประจำตัวประชาชนให้ถูกต้อง'}`
+          ]"
+          label="เลขบัตรประจำตัวประชาชน"
+        />
+      </div>
+      <div class="col-xs-12 col-sm-3 col-md-2">
         <q-select
           :class="getClass(status == 'register' || status == 'rejectRegister')"
           :readonly="!(status == 'register' || status == 'rejectRegister')"
@@ -54,14 +74,14 @@
           :label="`${'นามสกุล'}`"
         />
       </div>
-      <div class="col-xs-12 col-sm-3 col-md-3">
+      <div class="col-xs-12 col-sm-3 col-md-3"><!-- :borderless="!false" -->
         <q-input
           :class="getClass(false)"
-          :outlined="false"
+          outlined
           dense
           lazy-rules
           :readonly="!false"
-          :borderless="!false"
+          
           v-model="defaultInformation.nationality"
           :rules="[(val) => !!val || `${'กรุณากรอก สัญชาติ'}`]"
           :label="`${'สัญชาติ'}`"
@@ -141,8 +161,7 @@
           dense
           lazy-rules
           readonly
-          borderless
+          outlined
-          :style="!(status == 'register' || status == 'rejectRegister') ? '' : 'padding:0 12px;'"
           :model-value="
             defaultInformation.birthDate == null ? null : calAge(defaultInformation.birthDate)
           "
@@ -169,26 +188,6 @@
           ]"
         />
       </div>
-      <div class="col-xs-12 col-sm-3 col-md-3">
-        <q-input
-          :class="getClass(status == 'register' || status == 'rejectRegister')"
-          :outlined="status == 'register' || status == 'rejectRegister'"
-          dense
-          type="tel"
-          mask="#############"
-          :counter="status == 'register' || status == 'rejectRegister' ? true : false"
-          lazy-rules
-          :readonly="!(status == 'register' || status == 'rejectRegister')"
-          :borderless="!(status == 'register' || status == 'rejectRegister')"
-          v-model="defaultInformation.cardid"
-          maxlength="13"
-          :rules="[
-            (val) => val.length == 13 || `${'กรุณากรอก เลขประจำตัวประชาชน'}`,
-            (val) => /^[0-9]*$/.test(val) || `${'กรุณากรอกเลขประจำตัวประชาชนให้ถูกต้อง'}`
-          ]"
-          label="เลขบัตรประจำตัวประชาชน"
-        />
-      </div>
       <!-- <div class="col-xs-12 col-sm-3 col-md-3">
         <q-input
           :outlined="status == 'register' || status == 'rejectRegister'"
@@ -209,14 +208,13 @@
           :label="`${'โทรศัพท์มือถือ'}`"
         />
       </div> -->
-      <div class="col-xs-12 col-sm-3 col-md-3 q-pb-md">
+      <div class="col-xs-12 col-sm-3 col-md-3 q-pb-md"><!-- style="padding: 0 12px" -->
         <q-input
           :class="getClass(status == 'register' || status == 'rejectRegister')"
           dense
           lazy-rules
           readonly
-          borderless
+          outlined
-          style="padding: 0 12px"
           v-model="defaultInformation.email"
           label="E-mail address"
         />