ui step กรอกข้อมูล

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

@@ -1,3 +1,4 @@
+<!-- card ข้อมูลส่วนตัว -->
 <template>
   <q-card flat bordered class="col-12 q-px-lg q-py-md">
     <HeaderTop v-model:edit="edit" header="ข้อมูลส่วนตัว" icon="mdi-account" :save="saveData" />
@@ -114,41 +115,36 @@
           />
         </div>
         <div class="col-xs-6 col-sm-3 col-md-3">
-          <q-input
+          <q-select
             hide-bottom-space
-            :outlined="edit"
-            dense
-            lazy-rules
-            type="tel"
             :class="getClass(edit)"
             :readonly="!edit"
             :borderless="!edit"
-            v-model="informaData.tel"
-            :rules="[
-              (val) => !!val || `${'กรุณากรอก โทรศัพท์'}`,
-              (val) => val.length >= 9 || `${'กรุณากรอกข้อมูลโทรศัพท์ให้ครบ'}`
-            ]"
-            :label="`${'โทรศัพท์'}`"
-            mask="#########"
+            :rules="[(val) => !!val || `${'กรุณาเลือก สถานภาพ'}`]"
+            :outlined="edit"
+            dense
+            lazy-rules
+            v-model="informaData.statusId"
+            emit-value
+            map-options
+            option-label="name"
+            :options="statusOptions"
+            option-value="id"
+            :label="`${'สถานภาพ'}`"
           />
         </div>
         <div class="col-xs-6 col-sm-3 col-md-3">
           <q-input
+            :class="getClass(edit)"
             hide-bottom-space
             :outlined="edit"
             dense
             lazy-rules
-            type="tel"
-            :class="getClass(edit)"
             :readonly="!edit"
             :borderless="!edit"
-            v-model="informaData.phone"
-            :rules="[
-              (val) => !!val || `${'กรุณากรอก โทรศัพท์มือถือ'}`,
-              (val) => val.length >= 10 || `${'กรุณากรอกข้อมูลโทรศัพท์มือถือให้ครบ'}`
-            ]"
-            :label="`${'โทรศัพท์มือถือ'}`"
-            mask="##########"
+            v-model="informaData.email"
+            :rules="[(val) => !!val || `${'กรุณากรอก E-mail address'}`]"
+            label="E-mail address"
           />
         </div>
         <div class="col-xs-6 col-sm-3 col-md-3">
@@ -241,16 +237,40 @@
         </div>
         <div class="col-xs-6 col-sm-3 col-md-3">
           <q-input
-            :class="getClass(edit)"
             hide-bottom-space
             :outlined="edit"
             dense
             lazy-rules
+            type="tel"
+            :class="getClass(edit)"
             :readonly="!edit"
             :borderless="!edit"
-            v-model="informaData.email"
-            :rules="[(val) => !!val || `${'กรุณากรอก E-mail address'}`]"
-            label="E-mail address"
+            v-model="informaData.tel"
+            :rules="[
+              (val) => !!val || `${'กรุณากรอก โทรศัพท์'}`,
+              (val) => val.length >= 9 || `${'กรุณากรอกข้อมูลโทรศัพท์ให้ครบ'}`
+            ]"
+            :label="`${'โทรศัพท์'}`"
+            mask="#########"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <q-input
+            hide-bottom-space
+            :outlined="edit"
+            dense
+            lazy-rules
+            type="tel"
+            :class="getClass(edit)"
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="informaData.phone"
+            :rules="[
+              (val) => !!val || `${'กรุณากรอก โทรศัพท์มือถือ'}`,
+              (val) => val.length >= 10 || `${'กรุณากรอกข้อมูลโทรศัพท์มือถือให้ครบ'}`
+            ]"
+            :label="`${'โทรศัพท์มือถือ'}`"
+            mask="##########"
           />
         </div>
       </div>