ปรับ css และดีไซน์หน้า กรอกข้อมูลสมัครสอบ

src/components/Table.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="q-pb-sm row">
+  <div class="q-pb-sm row items-center">
     <!--  -->
     <HeaderTop
       v-model:edit="editBtn"
@@ -207,7 +207,7 @@ const add = () => {
   }
 
   .q-table thead tr {
-    background: #ecebeb;
+    background: #a6b8c313;
   }
 
   .q-table thead tr th {

src/components/top.vue

@@ -1,8 +1,8 @@
 <template>
-  <div class="flex items-center">
+  <div class="flex items-center q-pb-md">
     <div class="flex items-center" v-if="header != ''">
-      <q-icon :name="icon" size="1.5em" color="grey-5" class="q-mr-md" />
-      <div class="text-weight-medium text-dark col-12 row items-center text-header">
+      <q-icon :name="icon" size="1.5em" color="accent" class="q-mr-md" />
+      <div class="text-weight-medium text-dark col-12 row items-center text-subtitle1">
         {{ header }}
       </div>
     </div>
@@ -21,9 +21,9 @@
           <q-tooltip>แก้ไขข้อมูล</q-tooltip>
         </q-btn> -->
         <q-btn
-          size="12px"
+          size="15px"
           flat
-          round
+          dense
           v-if="edit && !editOnly"
           :color="!edit ? 'grey-7' : 'public'"
           @click="save"

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

@@ -41,8 +41,7 @@
         </q-tabs>
       </template>
     </q-splitter> -->
-
-    <div>
+    <div class="text-center q-pt-sm">
       <q-checkbox
         v-model="acceptTermOfUse"
         :disable="(status !== 'register' && status !== 'rejectRegister') || statusEdit"
@@ -77,9 +76,11 @@
         :disable="statusEdit"
       /> -->
       <q-btn
-        color="primary"
+        color="blue"
         class="q-ml-md"
         label="บันทึกข้อมูล"
+        outline
+        icon="mdi-content-save"
         @click="okModalConfirm"
         v-if="status === 'register' || status === 'rejectRegister'"
         :disable="!acceptTermOfUse || statusEdit"
@@ -87,6 +88,7 @@
       <q-btn
         color="primary"
         class="q-ml-md"
+        icon="mdi-check"
         label="สมัครสอบ"
         @click="okModalConfirm"
         v-if="status === 'register' || status === 'rejectRegister'"

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

@@ -1,6 +1,5 @@
 <!-- card ข้อมูลที่อยู่ -->
 <template>
-  <q-card flat bordered class="col-12 q-px-lg q-py-md q-mt-md">
     <HeaderTop
       v-model:edit="edit"
       header="ข้อมูลที่อยู่"
@@ -14,7 +13,7 @@
     />
     <!-- :changeBtn="changeBtn" -->
     <q-form ref="myform">
-      <div class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs">
+      <div class="row col-12 items-center q-col-gutter-x-sm q-col-gutter-y-xs">
         <div class="col-xs-12">
           <q-input
             :class="getClass(status == 'register' || status == 'rejectRegister')"
@@ -31,7 +30,7 @@
           />
           <!-- :filled="(status == 'register' || status == 'rejectRegister')" -->
         </div>
-        <div class="col-xs-6 col-sm-3 col-md-3">
+        <div class="col-xs-12 col-sm-3 col-md-3">
           <q-select
             :class="getClass(status == 'register' || status == 'rejectRegister')"
             :readonly="!(status == 'register' || status == 'rejectRegister')"
@@ -50,7 +49,7 @@
             @update:model-value="(value) => selectProvince(value, '1')"
           />
         </div>
-        <div class="col-xs-6 col-sm-3 col-md-3">
+        <div class="col-xs-12 col-sm-3 col-md-3">
           <q-select
             :class="getClass(status == 'register' || status == 'rejectRegister')"
             :readonly="!(status == 'register' || status == 'rejectRegister')"
@@ -69,7 +68,7 @@
             @update:model-value="(value) => selectDistrict(value, '1')"
           />
         </div>
-        <div class="col-xs-6 col-sm-3 col-md-3">
+        <div class="col-xs-12 col-sm-3 col-md-3">
           <q-select
             :class="getClass(status == 'register' || status == 'rejectRegister')"
             :readonly="!(status == 'register' || status == 'rejectRegister')"
@@ -88,7 +87,7 @@
             @update:model-value="(value) => selectSubDistrict(value, '1')"
           />
         </div>
-        <div class="col-xs-6 col-sm-3 col-md-3">
+        <div class="col-xs-12 col-sm-3 col-md-3">
           <q-input
             :class="getClass(status == 'register' || status == 'rejectRegister')"
             dense
@@ -100,8 +99,7 @@
             :label="`${'รหัสไปรษณีย์'}`"
           />
         </div>
-        <div class="col-12"><q-separator /></div>
-        <div class="col-xs-12 q-gutter-sm items-center flex q-my-sm">
+        <div class="col-xs-12 q-gutter-sm items-center flex q-mb-sm">
           <label class="text-bold">ที่อยู่ปัจจุบันตรงกับที่อยู่ตามทะเบียนบ้าน</label>
           <q-radio
             v-model="addressData.same"
@@ -138,7 +136,7 @@
             :label="`${'ที่อยู่ปัจจุบัน'}`"
           />
         </div>
-        <div class="col-xs-6 col-sm-3 col-md-3" v-if="addressData.same == '0'">
+        <div class="col-xs-12 col-sm-3 col-md-3" v-if="addressData.same == '0'">
           <q-select
             :class="getClass(status == 'register' || status == 'rejectRegister')"
             :readonly="!(status == 'register' || status == 'rejectRegister')"
@@ -157,7 +155,7 @@
             @update:model-value="(value) => selectProvince(value, '2')"
           />
         </div>
-        <div class="col-xs-6 col-sm-3 col-md-3" v-if="addressData.same == '0'">
+        <div class="col-xs-12 col-sm-3 col-md-3" v-if="addressData.same == '0'">
           <q-select
             :class="getClass(status == 'register' || status == 'rejectRegister')"
             :readonly="!(status == 'register' || status == 'rejectRegister')"
@@ -176,7 +174,7 @@
             @update:model-value="(value) => selectDistrict(value, '2')"
           />
         </div>
-        <div class="col-xs-6 col-sm-3 col-md-3" v-if="addressData.same == '0'">
+        <div class="col-xs-12 col-sm-3 col-md-3" v-if="addressData.same == '0'">
           <q-select
             :class="getClass(status == 'register' || status == 'rejectRegister')"
             :readonly="!(status == 'register' || status == 'rejectRegister')"
@@ -195,7 +193,7 @@
             @update:model-value="(value) => selectSubDistrict(value, '2')"
           />
         </div>
-        <div class="col-xs-6 col-sm-3 col-md-3" v-if="addressData.same == '0'">
+        <div class="col-xs-12 col-sm-3 col-md-3" v-if="addressData.same == '0'">
           <q-input
             :class="getClass(status == 'register' || status == 'rejectRegister')"
             dense
@@ -209,7 +207,6 @@
         </div>
       </div>
     </q-form>
-  </q-card>
   <!-- <q-dialog :model-value="modalConsend" persistent>
     <q-card style="min-width: 800px">
       <Conference :ok="consendOk" :close="consenClose" />

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

@@ -1,58 +1,56 @@
 <!-- tab ประวัติการทำงาน/ฝึกงาน -->
 <template>
-  <q-card flat bordered class="col-12 q-px-lg q-py-md q-mt-md">
-    <q-form ref="myForm">
-      <Table
-        :rows="rows"
-        :columns="columns"
-        :filter="filter"
-        :visible-columns="visibleColumns"
-        v-model:inputfilter="filter"
-        v-model:inputvisible="visibleColumns"
-        v-model:editvisible="edit"
-        :add="clickAdd"
-        :edit="clickEdit"
-        :cancel="clickCancel"
-        :addData="false"
-        :editData="status == 'register' || status == 'rejectRegister'"
-        name="ประวัติการทำงาน/ฝึกงาน"
-        icon="mdi-briefcase"
-      >
-        <template #columns="props">
-          <q-tr :props="props">
-            <q-td
-              v-for="col in props.cols"
-              :key="col.name"
-              :props="props"
-              @click="selectData(props)"
-              class="cursor-pointer"
-            >
-              <div v-if="col.name == 'salary'" class="">
-                {{ col.value.toLocaleString('en-US') }}
-              </div>
-              <div v-else-if="col.name == 'duration'" class="">
-                {{ dateThaiRange(col.value) }}
-              </div>
-              <div v-else class="">
-                {{ col.value }}
-              </div>
-            </q-td>
-            <q-td auto-width v-if="edit === true">
-              <q-btn
-                color="red"
-                flat
-                dense
-                round
-                size="14px"
-                icon="mdi-trash-can-outline"
-                @click="checkDelete(props.row)"
-              />
-            </q-td>
-          </q-tr>
-        </template>
-      </Table>
-    </q-form>
-  </q-card>
+  <q-form ref="myForm">
+    <Table
+      :rows="rows"
+      :columns="columns"
+      :filter="filter"
+      :visible-columns="visibleColumns"
+      v-model:inputfilter="filter"
+      v-model:inputvisible="visibleColumns"
+      v-model:editvisible="edit"
+      :add="clickAdd"
+      :edit="clickEdit"
+      :cancel="clickCancel"
+      :addData="false"
+      :editData="status == 'register' || status == 'rejectRegister'"
+      name="ประวัติการทำงาน/ฝึกงาน"
+      icon="mdi-briefcase"
+    >
+      <template #columns="props">
+        <q-tr :props="props">
+          <q-td
+            v-for="col in props.cols"
+            :key="col.name"
+            :props="props"
+            @click="selectData(props)"
+            class="cursor-pointer"
+          >
+            <div v-if="col.name == 'salary'" class="">
+              {{ col.value.toLocaleString('en-US') }}
+            </div>
+            <div v-else-if="col.name == 'duration'" class="">
+              {{ dateThaiRange(col.value) }}
+            </div>
+            <div v-else class="">
+              {{ col.value }}
+            </div>
+          </q-td>
+          <q-td auto-width v-if="edit === true">
+            <q-btn
+              color="red"
+              flat
+              dense
+              round
+              size="14px"
+              icon="mdi-trash-can-outline"
+              @click="checkDelete(props.row)"
+            />
+          </q-td>
+        </q-tr>
+      </template>
+    </Table>
+  </q-form>
   <!-- popup Edit window-->
   <q-dialog v-model="modal" persistent>
     <q-card style="width: 600px">
@@ -61,7 +59,7 @@
         <q-separator />
         <q-card-section class="q-p-sm">
           <div class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs">
-            <div class="col-xs-6 col-sm-6 col-md-6">
+            <div class="col-xs-12 col-sm-6 col-md-6">
               <q-input
                 :class="getClass(edit)"
                 :outlined="edit"
@@ -75,7 +73,7 @@
                 @update:modelValue="clickEditRow"
               />
             </div>
-            <div class="col-xs-6 col-sm-6 col-md-6">
+            <div class="col-xs-12 col-sm-6 col-md-6">
               <q-input
                 :class="getClass(edit)"
                 :outlined="edit"
@@ -89,7 +87,7 @@
                 @update:modelValue="clickEditRow"
               />
             </div>
-            <div class="col-xs-6 col-sm-6 col-md-6">
+            <div class="col-xs-12 col-sm-6 col-md-6">
               <q-input
                 :class="getClass(edit)"
                 :outlined="edit"
@@ -104,7 +102,7 @@
                 type="number"
               />
             </div>
-            <div class="col-xs-6 col-sm-6 col-md-6">
+            <div class="col-xs-12 col-sm-6 col-md-6">
               <datepicker
                 :readonly="!edit"
                 v-model="duration"
@@ -131,7 +129,7 @@
                     :model-value="dateThaiRange(duration)"
                   >
                     <template v-slot:prepend>
-                      <q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
+                      <q-icon name="mdi-calendar-outline" class="cursor-pointer" style="color: var(--q-primary)">
                       </q-icon>
                     </template>
                   </q-input>

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

@@ -1,78 +1,70 @@
 <!-- card อัปโหลดเอกสาร -->
 <template>
-  <q-card flat bordered class="col-12 q-px-lg q-py-md q-mt-md">
-    <div class="col-12">
-      <HeaderTop
-        v-model:edit="edit"
-        header="อัปโหลดเอกสาร(เช่น สำเนาบัตรประชาชน ทะเบียนบ้าน วุฒิการศึกษา)"
-        icon="mdi-file-document"
-        :addData="true"
-        :editOnly="true"
-        :cancel="cancelData"
-        :editData="status == 'register' || status == 'rejectRegister'"
-      />
-    </div>
-    <div class="col-12">
-      <div v-if="edit" class="row justify-center q-pa-md">
-        <div class="col-4">
-          <q-input
-            class="q-my-sm"
-            :outlined="edit"
-            dense
-            lazy-rules
-            :readonly="!edit"
-            :borderless="!edit"
-            v-model="name"
-            :rules="[(val) => !!val || `${'กรุณากรอกชื่อเอกสาร'}`]"
-            :label="`${'ชื่อเอกสาร'}`"
-          />
-          <q-uploader
-            color="blue"
-            type="file"
-            flat
-            auto-upload
-            :factory="fileUpload"
-            class="full-width"
-            :max-size="10000000"
-            accept=".jpg,.png,.pdf,.csv,.doc"
-            bordered
-            label="[ไฟล์ jpg,png,pdf,csv,doc ขนาดไม่เกิน 10MB]"
-          />
-        </div>
-      </div>
-      <q-separator class="q-mt-sm" />
-      <q-card bordered flat class="full-width">
-        <q-list separator>
-          <q-item v-for="file in files" :key="file.key" class="q-my-xs">
-            <q-item-section>
-              <q-item-label class="full-width ellipsis">
-                {{ file.name }}
-              </q-item-label>
+  <HeaderTop
+    v-model:edit="edit"
+    header="อัปโหลดเอกสาร(เช่น สำเนาบัตรประชาชน ทะเบียนบ้าน วุฒิการศึกษา)"
+    icon="mdi-file-document"
+    :addData="true"
+    :editOnly="true"
+    :cancel="cancelData"
+    :editData="status == 'register' || status == 'rejectRegister'"
+  />
 
-              <q-item-label caption> สถานะ: {{ file.status }} / {{ file.sizeLabel }} </q-item-label>
-            </q-item-section>
-            <q-item-section top side>
-              <div class="q-gutter-sm">
-                <q-btn size="12px" flat dense round color="blue" icon="mdi-download-outline">
-                  <q-tooltip>ดาวน์โหลด</q-tooltip>
-                </q-btn>
-                <q-btn
-                  size="12px"
-                  flat
-                  dense
-                  round
-                  color="red"
-                  icon="mdi-delete-outline"
-                  v-if="edit"
-                >
-                  <q-tooltip>ลบไฟล์</q-tooltip>
-                </q-btn>
-              </div>
-            </q-item-section>
-          </q-item>
-        </q-list>
-      </q-card>
-    </div>
+  <div v-if="edit" class="row justify-center row col-12">
+    <q-input
+      class="q-mt-sm col-12"
+      :outlined="edit"
+      dense
+      lazy-rules
+      :readonly="!edit"
+      :borderless="!edit"
+      v-model="name"
+      :rules="[(val) => !!val || `${'กรุณากรอกชื่อเอกสาร'}`]"
+      :label="`${'ชื่อเอกสาร'}`"
+    />
+    <q-uploader
+      color="blue"
+      type="file"
+      flat
+      auto-upload
+      :factory="fileUpload"
+      class="full-width"
+      :max-size="10000000"
+      accept=".jpg,.png,.pdf,.csv,.doc"
+      bordered
+      label="[ไฟล์ jpg,png,pdf,csv,doc ขนาดไม่เกิน 10MB]"
+    />
+  </div>
+  <q-card bordered flat class="full-width q-my-md">
+    <q-list separator>
+      <q-item v-for="file in files" :key="file.key" class="q-my-xs">
+        <q-item-section>
+          <q-item-label class="full-width ellipsis">
+            {{ file.name }}
+          </q-item-label>
+
+          <q-item-label caption> สถานะ: {{ file.status }} / {{ file.sizeLabel }} </q-item-label>
+        </q-item-section>
+        <q-item-section top side>
+          <div class="q-gutter-sm">
+            <q-btn size="12px" flat dense round color="blue" icon="mdi-download-outline">
+              <q-tooltip>ดาวน์โหลด</q-tooltip>
+            </q-btn>
+            <q-btn
+              size="12px"
+              flat
+              dense
+              round
+              color="red"
+              icon="mdi-delete-outline"
+              v-if="edit"
+            >
+              <q-tooltip>ลบไฟล์</q-tooltip>
+            </q-btn>
+          </div>
+        </q-item-section>
+      </q-item>
+    </q-list>
   </q-card>
 </template>
 <script setup lang="ts">

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

@@ -1,55 +1,53 @@
 <!-- tab ประวัติการศึกษา -->
 <template>
-  <q-card flat bordered class="col-12 q-px-lg q-py-md q-mt-md">
-    <q-form ref="myForm">
-      <Table
-        :rows="rows"
-        :columns="columns"
-        :filter="filter"
-        :visible-columns="visibleColumns"
-        v-model:inputfilter="filter"
-        v-model:inputvisible="visibleColumns"
-        v-model:editvisible="edit"
-        :add="clickAdd"
-        :edit="clickEdit"
-        :cancel="clickCancel"
-        :addData="false"
-        :editData="status == 'register' || status == 'rejectRegister'"
-        name="ประวัติการศีกษา"
-        icon="mdi-school"
-      >
-        <template #columns="props">
-          <q-tr :props="props">
-            <q-td
-              v-for="col in props.cols"
-              :key="col.name"
-              :props="props"
-              @click="selectData(props)"
-              class="cursor-pointer"
-            >
-              <div v-if="col.name == 'duration'" class="">
-                {{ dateThaiRange(col.value) }}
-              </div>
-              <div v-else class="">
-                {{ col.value }}
-              </div>
-            </q-td>
-            <q-td auto-width v-if="edit === true">
-              <q-btn
-                color="red"
-                flat
-                dense
-                round
-                size="14px"
-                icon="mdi-trash-can-outline"
-                @click="checkDelete(props.row)"
-              />
-            </q-td>
-          </q-tr>
-        </template>
-      </Table>
-    </q-form>
-  </q-card>
+  <q-form ref="myForm">
+    <Table
+      :rows="rows"
+      :columns="columns"
+      :filter="filter"
+      :visible-columns="visibleColumns"
+      v-model:inputfilter="filter"
+      v-model:inputvisible="visibleColumns"
+      v-model:editvisible="edit"
+      :add="clickAdd"
+      :edit="clickEdit"
+      :cancel="clickCancel"
+      :addData="false"
+      :editData="status == 'register' || status == 'rejectRegister'"
+      name="ประวัติการศีกษา"
+      icon="mdi-school"
+    >
+      <template #columns="props">
+        <q-tr :props="props">
+          <q-td
+            v-for="col in props.cols"
+            :key="col.name"
+            :props="props"
+            @click="selectData(props)"
+            class="cursor-pointer"
+          >
+            <div v-if="col.name == 'duration'" class="">
+              {{ dateThaiRange(col.value) }}
+            </div>
+            <div v-else class="">
+              {{ col.value }}
+            </div>
+          </q-td>
+          <q-td auto-width v-if="edit === true">
+            <q-btn
+              color="red"
+              flat
+              dense
+              round
+              size="14px"
+              icon="mdi-trash-can-outline"
+              @click="checkDelete(props.row)"
+            />
+          </q-td>
+        </q-tr>
+      </template>
+    </Table>
+  </q-form>
   <!-- popup Edit window-->
   <q-dialog v-model="modal" persistent>
     <q-card style="width: 600px">
@@ -147,7 +145,7 @@
                     :model-value="dateThaiRange(duration)"
                   >
                     <template v-slot:prepend>
-                      <q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
+                      <q-icon name="mdi-calendar-outline" class="cursor-pointer" style="color: var(--q-primary)">
                       </q-icon>
                     </template>
                   </q-input>

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

@@ -1,262 +1,260 @@
 <!-- card ข้อมูลครอบครัว -->
 <template>
-  <q-card flat bordered class="col-12 q-px-lg q-py-md q-mt-md text-dark">
-    <HeaderTop
-      v-model:edit="edit"
-      header="ข้อมูลครอบครัว"
-      icon="mdi-account-group"
-      :save="saveData"
-      :addData="true"
-      :editOnly="false"
-      :cancel="cancelData"
-      :editData="status == 'register' || status == 'rejectRegister'"
-      :disable="statusEdit"
-    />
-    <!-- :changeBtn="changeBtn" -->
-    <q-form ref="myform" class="col-12">
-      <div class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs">
-        <div class="col-xs-12 q-gutter-sm items-center flex q-my-sm">
-          <label class="text-weight-bold">• คู่สมรส</label>
-          <q-radio
-            v-model="familyData.same"
-            checked-icon="task_alt"
-            unchecked-icon="panorama_fish_eye"
-            val="1"
-            label="มี"
-            dense
-            :disable="!(status == 'register' || status == 'rejectRegister')"
-            @update:model-value="selectRadio"
-          />
-          <q-radio
-            v-model="familyData.same"
-            checked-icon="task_alt"
-            unchecked-icon="panorama_fish_eye"
-            val="0"
-            label="ไม่มี"
-            dense
-            :disable="!(status == 'register' || status == 'rejectRegister')"
-            @update:model-value="selectRadio"
-          />
-        </div>
-        <div class="col-xs-12 col-sm-2 col-md-2" v-if="familyData.same == '1'">
-          <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="familyData.prefixIdC"
-            emit-value
-            map-options
-            option-label="name"
-            :options="prefixOptions"
-            option-value="id"
-            :label="`${'คำนำหน้า'}`"
-          />
-        </div>
-
-        <div class="col-xs-6 col-sm-3 col-md-3" v-if="familyData.same == '1'">
-          <q-input
-            :class="getClass(status == 'register' || status == 'rejectRegister')"
-            :outlined="status == 'register' || status == 'rejectRegister'"
-            dense
-            lazy-rules
-            :readonly="!(status == 'register' || status == 'rejectRegister')"
-            :borderless="!(status == 'register' || status == 'rejectRegister')"
-            v-model="familyData.firstnameC"
-            :rules="[(val) => !!val || `${'กรุณากรอก ชื่อ'}`]"
-            :label="`${'ชื่อ'}`"
-          />
-        </div>
-        <div class="col-xs-6 col-sm-3 col-md-3" v-if="familyData.same == '1'">
-          <q-input
-            :class="getClass(status == 'register' || status == 'rejectRegister')"
-            :outlined="status == 'register' || status == 'rejectRegister'"
-            dense
-            lazy-rules
-            :readonly="!(status == 'register' || status == 'rejectRegister')"
-            :borderless="!(status == 'register' || status == 'rejectRegister')"
-            v-model="familyData.lastnameC"
-            :rules="[(val) => !!val || `${'กรุณากรอก นามสกุล'}`]"
-            :label="`${'นามสกุล'}`"
-          />
-        </div>
-        <div class="col-xs-12 col-sm-2 col-md-2" v-if="familyData.same == '1'">
-          <q-input
-            :class="getClass(status == 'register' || status == 'rejectRegister')"
-            :outlined="status == 'register' || status == 'rejectRegister'"
-            dense
-            lazy-rules
-            :readonly="!(status == 'register' || status == 'rejectRegister')"
-            :borderless="!(status == 'register' || status == 'rejectRegister')"
-            v-model="familyData.occupationC"
-            :rules="[(val) => !!val || `${'กรุณากรอก อาชีพ'}`]"
-            :label="`${'อาชีพ'}`"
-          />
-        </div>
-        <div class="col-xs-12 col-sm-2 col-md-2" v-if="familyData.same == '1'">
-          <q-input
-            :class="getClass(status == 'register' || status == 'rejectRegister')"
-            :outlined="status == 'register' || status == 'rejectRegister'"
-            dense
-            lazy-rules
-            :readonly="!(status == 'register' || status == 'rejectRegister')"
-            :borderless="!(status == 'register' || status == 'rejectRegister')"
-            v-model="familyData.nationalityC"
-            :rules="[(val) => !!val || `${'กรุณากรอก สัญชาติ'}`]"
-            :label="`${'สัญชาติ'}`"
-          />
-        </div>
-
-        <div class="col-xs-12 text-weight-bold">• บิดา</div>
-        <div class="col-xs-12 col-sm-2 col-md-2">
-          <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="familyData.prefixIdM"
-            emit-value
-            map-options
-            option-label="name"
-            :options="prefixOptions"
-            option-value="id"
-            :label="`${'คำนำหน้า'}`"
-          />
-        </div>
-
-        <div class="col-xs-6 col-sm-3 col-md-3">
-          <q-input
-            :class="getClass(status == 'register' || status == 'rejectRegister')"
-            :outlined="status == 'register' || status == 'rejectRegister'"
-            dense
-            lazy-rules
-            :readonly="!(status == 'register' || status == 'rejectRegister')"
-            :borderless="!(status == 'register' || status == 'rejectRegister')"
-            v-model="familyData.firstnameM"
-            :rules="[(val) => !!val || `${'กรุณากรอก ชื่อ'}`]"
-            :label="`${'ชื่อ'}`"
-          />
-        </div>
-        <div class="col-xs-6 col-sm-3 col-md-3">
-          <q-input
-            :class="getClass(status == 'register' || status == 'rejectRegister')"
-            :outlined="status == 'register' || status == 'rejectRegister'"
-            dense
-            lazy-rules
-            :readonly="!(status == 'register' || status == 'rejectRegister')"
-            :borderless="!(status == 'register' || status == 'rejectRegister')"
-            v-model="familyData.lastnameM"
-            :rules="[(val) => !!val || `${'กรุณากรอก นามสกุล'}`]"
-            :label="`${'นามสกุล'}`"
-          />
-        </div>
-        <div class="col-xs-12 col-sm-2 col-md-2">
-          <q-input
-            :class="getClass(status == 'register' || status == 'rejectRegister')"
-            :outlined="status == 'register' || status == 'rejectRegister'"
-            dense
-            lazy-rules
-            :readonly="!(status == 'register' || status == 'rejectRegister')"
-            :borderless="!(status == 'register' || status == 'rejectRegister')"
-            v-model="familyData.occupationM"
-            :rules="[(val) => !!val || `${'กรุณากรอก อาชีพ'}`]"
-            :label="`${'อาชีพ'}`"
-          />
-        </div>
-        <div class="col-xs-12 col-sm-2 col-md-2">
-          <q-input
-            :class="getClass(status == 'register' || status == 'rejectRegister')"
-            :outlined="status == 'register' || status == 'rejectRegister'"
-            dense
-            lazy-rules
-            :readonly="!(status == 'register' || status == 'rejectRegister')"
-            :borderless="!(status == 'register' || status == 'rejectRegister')"
-            v-model="familyData.nationalityM"
-            :rules="[(val) => !!val || `${'กรุณากรอก สัญชาติ'}`]"
-            :label="`${'สัญชาติ'}`"
-          />
-        </div>
-
-        <div class="col-xs-12 text-weight-bold">• มารดา</div>
-        <div class="col-xs-12 col-sm-2 col-md-2">
-          <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="familyData.prefixIdF"
-            emit-value
-            map-options
-            option-label="name"
-            :options="prefixOptions"
-            option-value="id"
-            :label="`${'คำนำหน้า'}`"
-          />
-        </div>
-        <div class="col-xs-6 col-sm-3 col-md-3">
-          <q-input
-            :class="getClass(status == 'register' || status == 'rejectRegister')"
-            :outlined="status == 'register' || status == 'rejectRegister'"
-            dense
-            lazy-rules
-            :readonly="!(status == 'register' || status == 'rejectRegister')"
-            :borderless="!(status == 'register' || status == 'rejectRegister')"
-            v-model="familyData.firstnameF"
-            :rules="[(val) => !!val || `${'กรุณากรอก ชื่อ'}`]"
-            :label="`${'ชื่อ'}`"
-          />
-        </div>
-        <div class="col-xs-6 col-sm-3 col-md-3">
-          <q-input
-            :class="getClass(status == 'register' || status == 'rejectRegister')"
-            :outlined="status == 'register' || status == 'rejectRegister'"
-            dense
-            lazy-rules
-            :readonly="!(status == 'register' || status == 'rejectRegister')"
-            :borderless="!(status == 'register' || status == 'rejectRegister')"
-            v-model="familyData.lastnameF"
-            :rules="[(val) => !!val || `${'กรุณากรอก นามสกุล'}`]"
-            :label="`${'นามสกุล'}`"
-          />
-        </div>
-        <div class="col-xs-12 col-sm-2 col-md-2">
-          <q-input
-            :class="getClass(status == 'register' || status == 'rejectRegister')"
-            :outlined="status == 'register' || status == 'rejectRegister'"
-            dense
-            lazy-rules
-            :readonly="!(status == 'register' || status == 'rejectRegister')"
-            :borderless="!(status == 'register' || status == 'rejectRegister')"
-            v-model="familyData.occupationF"
-            :rules="[(val) => !!val || `${'กรุณากรอก อาชีพ'}`]"
-            :label="`${'อาชีพ'}`"
-          />
-        </div>
-        <div class="col-xs-12 col-sm-2 col-md-2">
-          <q-input
-            :class="getClass(status == 'register' || status == 'rejectRegister')"
-            :outlined="status == 'register' || status == 'rejectRegister'"
-            dense
-            lazy-rules
-            :readonly="!(status == 'register' || status == 'rejectRegister')"
-            :borderless="!(status == 'register' || status == 'rejectRegister')"
-            v-model="familyData.nationalityF"
-            :rules="[(val) => !!val || `${'กรุณากรอก สัญชาติ'}`]"
-            :label="`${'สัญชาติ'}`"
-          />
-        </div>
+  <HeaderTop
+    v-model:edit="edit"
+    header="ข้อมูลครอบครัว"
+    icon="mdi-account-group"
+    :save="saveData"
+    :addData="true"
+    :editOnly="false"
+    :cancel="cancelData"
+    :editData="status == 'register' || status == 'rejectRegister'"
+    :disable="statusEdit"
+  />
+  <!-- :changeBtn="changeBtn" -->
+  <q-form ref="myform" class="col-12">
+    <div class="row col-12 items-center q-col-gutter-x-sm q-col-gutter-y-xs">
+      <div class="col-xs-12 q-gutter-sm items-center flex q-mb-sm">
+        <label class="text-weight-bold">• คู่สมรส</label>
+        <q-radio
+          v-model="familyData.same"
+          checked-icon="task_alt"
+          unchecked-icon="panorama_fish_eye"
+          val="1"
+          label="มี"
+          dense
+          :disable="!(status == 'register' || status == 'rejectRegister')"
+          @update:model-value="selectRadio"
+        />
+        <q-radio
+          v-model="familyData.same"
+          checked-icon="task_alt"
+          unchecked-icon="panorama_fish_eye"
+          val="0"
+          label="ไม่มี"
+          dense
+          :disable="!(status == 'register' || status == 'rejectRegister')"
+          @update:model-value="selectRadio"
+        />
       </div>
-    </q-form>
-  </q-card>
+      <div class="col-xs-12 col-sm-2 col-md-2" v-if="familyData.same == '1'">
+        <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="familyData.prefixIdC"
+          emit-value
+          map-options
+          option-label="name"
+          :options="prefixOptions"
+          option-value="id"
+          :label="`${'คำนำหน้า'}`"
+        />
+      </div>
+
+      <div class="col-xs-12 col-sm-3 col-md-3" v-if="familyData.same == '1'">
+        <q-input
+          :class="getClass(status == 'register' || status == 'rejectRegister')"
+          :outlined="status == 'register' || status == 'rejectRegister'"
+          dense
+          lazy-rules
+          :readonly="!(status == 'register' || status == 'rejectRegister')"
+          :borderless="!(status == 'register' || status == 'rejectRegister')"
+          v-model="familyData.firstnameC"
+          :rules="[(val) => !!val || `${'กรุณากรอก ชื่อ'}`]"
+          :label="`${'ชื่อ'}`"
+        />
+      </div>
+      <div class="col-xs-12 col-sm-3 col-md-3" v-if="familyData.same == '1'">
+        <q-input
+          :class="getClass(status == 'register' || status == 'rejectRegister')"
+          :outlined="status == 'register' || status == 'rejectRegister'"
+          dense
+          lazy-rules
+          :readonly="!(status == 'register' || status == 'rejectRegister')"
+          :borderless="!(status == 'register' || status == 'rejectRegister')"
+          v-model="familyData.lastnameC"
+          :rules="[(val) => !!val || `${'กรุณากรอก นามสกุล'}`]"
+          :label="`${'นามสกุล'}`"
+        />
+      </div>
+      <div class="col-xs-12 col-sm-2 col-md-2" v-if="familyData.same == '1'">
+        <q-input
+          :class="getClass(status == 'register' || status == 'rejectRegister')"
+          :outlined="status == 'register' || status == 'rejectRegister'"
+          dense
+          lazy-rules
+          :readonly="!(status == 'register' || status == 'rejectRegister')"
+          :borderless="!(status == 'register' || status == 'rejectRegister')"
+          v-model="familyData.occupationC"
+          :rules="[(val) => !!val || `${'กรุณากรอก อาชีพ'}`]"
+          :label="`${'อาชีพ'}`"
+        />
+      </div>
+      <div class="col-xs-12 col-sm-2 col-md-2" v-if="familyData.same == '1'">
+        <q-input
+          :class="getClass(status == 'register' || status == 'rejectRegister')"
+          :outlined="status == 'register' || status == 'rejectRegister'"
+          dense
+          lazy-rules
+          :readonly="!(status == 'register' || status == 'rejectRegister')"
+          :borderless="!(status == 'register' || status == 'rejectRegister')"
+          v-model="familyData.nationalityC"
+          :rules="[(val) => !!val || `${'กรุณากรอก สัญชาติ'}`]"
+          :label="`${'สัญชาติ'}`"
+        />
+      </div>
+
+      <div class="col-xs-12 text-weight-bold">• บิดา</div>
+      <div class="col-xs-12 col-sm-2 col-md-2">
+        <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="familyData.prefixIdM"
+          emit-value
+          map-options
+          option-label="name"
+          :options="prefixOptions"
+          option-value="id"
+          :label="`${'คำนำหน้า'}`"
+        />
+      </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
+          lazy-rules
+          :readonly="!(status == 'register' || status == 'rejectRegister')"
+          :borderless="!(status == 'register' || status == 'rejectRegister')"
+          v-model="familyData.firstnameM"
+          :rules="[(val) => !!val || `${'กรุณากรอก ชื่อ'}`]"
+          :label="`${'ชื่อ'}`"
+        />
+      </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
+          lazy-rules
+          :readonly="!(status == 'register' || status == 'rejectRegister')"
+          :borderless="!(status == 'register' || status == 'rejectRegister')"
+          v-model="familyData.lastnameM"
+          :rules="[(val) => !!val || `${'กรุณากรอก นามสกุล'}`]"
+          :label="`${'นามสกุล'}`"
+        />
+      </div>
+      <div class="col-xs-12 col-sm-2 col-md-2">
+        <q-input
+          :class="getClass(status == 'register' || status == 'rejectRegister')"
+          :outlined="status == 'register' || status == 'rejectRegister'"
+          dense
+          lazy-rules
+          :readonly="!(status == 'register' || status == 'rejectRegister')"
+          :borderless="!(status == 'register' || status == 'rejectRegister')"
+          v-model="familyData.occupationM"
+          :rules="[(val) => !!val || `${'กรุณากรอก อาชีพ'}`]"
+          :label="`${'อาชีพ'}`"
+        />
+      </div>
+      <div class="col-xs-12 col-sm-2 col-md-2">
+        <q-input
+          :class="getClass(status == 'register' || status == 'rejectRegister')"
+          :outlined="status == 'register' || status == 'rejectRegister'"
+          dense
+          lazy-rules
+          :readonly="!(status == 'register' || status == 'rejectRegister')"
+          :borderless="!(status == 'register' || status == 'rejectRegister')"
+          v-model="familyData.nationalityM"
+          :rules="[(val) => !!val || `${'กรุณากรอก สัญชาติ'}`]"
+          :label="`${'สัญชาติ'}`"
+        />
+      </div>
+
+      <div class="col-xs-12 text-weight-bold">• มารดา</div>
+      <div class="col-xs-12 col-sm-2 col-md-2">
+        <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="familyData.prefixIdF"
+          emit-value
+          map-options
+          option-label="name"
+          :options="prefixOptions"
+          option-value="id"
+          :label="`${'คำนำหน้า'}`"
+        />
+      </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
+          lazy-rules
+          :readonly="!(status == 'register' || status == 'rejectRegister')"
+          :borderless="!(status == 'register' || status == 'rejectRegister')"
+          v-model="familyData.firstnameF"
+          :rules="[(val) => !!val || `${'กรุณากรอก ชื่อ'}`]"
+          :label="`${'ชื่อ'}`"
+        />
+      </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
+          lazy-rules
+          :readonly="!(status == 'register' || status == 'rejectRegister')"
+          :borderless="!(status == 'register' || status == 'rejectRegister')"
+          v-model="familyData.lastnameF"
+          :rules="[(val) => !!val || `${'กรุณากรอก นามสกุล'}`]"
+          :label="`${'นามสกุล'}`"
+        />
+      </div>
+      <div class="col-xs-12 col-sm-2 col-md-2">
+        <q-input
+          :class="getClass(status == 'register' || status == 'rejectRegister')"
+          :outlined="status == 'register' || status == 'rejectRegister'"
+          dense
+          lazy-rules
+          :readonly="!(status == 'register' || status == 'rejectRegister')"
+          :borderless="!(status == 'register' || status == 'rejectRegister')"
+          v-model="familyData.occupationF"
+          :rules="[(val) => !!val || `${'กรุณากรอก อาชีพ'}`]"
+          :label="`${'อาชีพ'}`"
+        />
+      </div>
+      <div class="col-xs-12 col-sm-2 col-md-2">
+        <q-input
+          :class="getClass(status == 'register' || status == 'rejectRegister')"
+          :outlined="status == 'register' || status == 'rejectRegister'"
+          dense
+          lazy-rules
+          :readonly="!(status == 'register' || status == 'rejectRegister')"
+          :borderless="!(status == 'register' || status == 'rejectRegister')"
+          v-model="familyData.nationalityF"
+          :rules="[(val) => !!val || `${'กรุณากรอก สัญชาติ'}`]"
+          :label="`${'สัญชาติ'}`"
+        />
+      </div>
+    </div>
+  </q-form>
   <!-- <q-dialog :model-value="modalConsend" persistent>
     <q-card style="min-width: 800px">
       <Conference :ok="consendOk" :close="consenClose" />

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

@@ -1,357 +1,356 @@
 <!-- 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"
-      :addData="true"
-      :editOnly="false"
-      :cancel="cancelData"
-      :editData="status == 'register' || status == 'rejectRegister'"
-      :disable="statusEdit"
-    />
-    <!-- :changeBtn="changeBtn" -->
-    <q-form ref="myform" class="col-12 row">
-      <div class="row col-10 items-center q-col-gutter-x-sm q-col-gutter-y-sm">
-        <div class="col-xs-6 col-sm-2 col-md-2">
-          <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="informaData.prefixId"
-            emit-value
-            map-options
-            option-label="name"
-            :options="prefixOptions"
-            option-value="id"
-            :label="`${'คำนำหน้า'}`"
-          />
-        </div>
-        <div class="col-xs-6 col-sm-5 col-md-5">
-          <q-input
-            :class="getClass(status == 'register' || status == 'rejectRegister')"
-            :outlined="status == 'register' || status == 'rejectRegister'"
-            dense
-            lazy-rules
-            :readonly="!(status == 'register' || status == 'rejectRegister')"
-            :borderless="!(status == 'register' || status == 'rejectRegister')"
-            v-model="informaData.firstname"
-            :rules="[(val) => !!val || `${'กรุณากรอก ชื่อ'}`]"
-            :label="`${'ชื่อ'}`"
-          />
-        </div>
-        <div class="col-xs-6 col-sm-5 col-md-5">
-          <q-input
-            :class="getClass(status == 'register' || status == 'rejectRegister')"
-            :outlined="status == 'register' || status == 'rejectRegister'"
-            dense
-            lazy-rules
-            :readonly="!(status == 'register' || status == 'rejectRegister')"
-            :borderless="!(status == 'register' || status == 'rejectRegister')"
-            v-model="informaData.lastname"
-            :rules="[(val) => !!val || `${'กรุณากรอก นามสกุล'}`]"
-            :label="`${'นามสกุล'}`"
-          />
-        </div>
-        <div class="col-xs-6 col-sm-3 col-md-3">
-          <q-input
-            :class="getClass(status == 'register' || status == 'rejectRegister')"
-            :outlined="status == 'register' || status == 'rejectRegister'"
-            dense
-            lazy-rules
-            :readonly="!(status == 'register' || status == 'rejectRegister')"
-            :borderless="!(status == 'register' || status == 'rejectRegister')"
-            v-model="informaData.nationality"
-            :rules="[(val) => !!val || `${'กรุณากรอก สัญชาติ'}`]"
-            :label="`${'สัญชาติ'}`"
-          />
-        </div>
-        <div class="col-xs-6 col-sm-3 col-md-3">
-          <datepicker
-            v-model="informaData.birthDate"
-            :locale="'th'"
-            autoApply
-            :enableTimePicker="false"
-            week-start="0"
-            :max-date="new Date()"
-            :disabled="!(status == 'register' || status == 'rejectRegister')"
-          >
-            <template #year="{ year }">
-              {{ year + 543 }}
-            </template>
-            <template #year-overlay-value="{ value }">
-              {{ parseInt(value + 543) }}
-            </template>
-            <template #trigger>
-              <q-input
-                :class="getClass(status == 'register' || status == 'rejectRegister')"
-                :outlined="status == 'register' || status == 'rejectRegister'"
-                dense
-                lazy-rules
-                :readonly="!(status == 'register' || status == 'rejectRegister')"
-                :borderless="!(status == 'register' || status == 'rejectRegister')"
-                :model-value="
-                  informaData.birthDate == null ? null : date2Thai(informaData.birthDate)
-                "
-                :rules="[(val) => !!val || `${'กรุณาเลือก วัน/เดือน/ปี เกิด'}`]"
-                :label="`${'วัน/เดือน/ปี เกิด'}`"
-              >
-                <template v-slot:prepend>
-                  <q-icon
-                    name="event"
-                    class="cursor-pointer"
-                    :style="
-                      status == 'register' || status == 'rejectRegister'
-                        ? 'color: var(--q-primary)'
-                        : 'color: var(--q-grey)'
-                    "
-                  >
-                  </q-icon>
-                </template>
-              </q-input>
-            </template>
-          </datepicker>
-        </div>
-        <div class="col-xs-6 col-sm-3 col-md-3">
-          <q-input
-            :class="getClass(status == 'register' || status == 'rejectRegister')"
-            dense
-            lazy-rules
-            readonly
-            borderless
-            :style="!(status == 'register' || status == 'rejectRegister') ? '' : 'padding:0 12px;'"
-            :model-value="informaData.birthDate == null ? null : calAge(informaData.birthDate)"
-            :label="`${'อายุ'}`"
-          />
-        </div>
-        <div class="col-xs-6 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="informaData.relationship"
-            emit-value
-            map-options
-            option-label="name"
-            :options="relationshipOptions"
-            option-value="id"
-            :label="`${'สถานภาพ'}`"
-          />
-        </div>
-        <div class="col-xs-6 col-sm-3 col-md-3">
-          <q-input
-            :class="getClass(status == 'register' || status == 'rejectRegister')"
-            :outlined="status == 'register' || status == 'rejectRegister'"
-            dense
-            type="tel"
-            counter
-            lazy-rules
-            :readonly="!(status == 'register' || status == 'rejectRegister')"
-            :borderless="!(status == 'register' || status == 'rejectRegister')"
-            v-model="informaData.cardid"
-            maxlength="13"
-            :rules="[
-              (val) => !!val || `${'กรุณากรอก เลขบัตรประจำตัวประชาชน'}`,
-              (val) => /^[0-9]*$/.test(val) || `${'กรุณากรอกเลขบัตรประจำตัวประชาชนให้ถูกต้อง'}`
-            ]"
-            label="เลขบัตรประจำตัวประชาชน"
-          />
-        </div>
-        <div class="col-xs-6 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="informaData.provinceId"
-            emit-value
-            map-options
-            option-label="name"
-            :options="provinceOptions"
-            option-value="id"
-            :label="`${'ออกให้ ณ จังหวัด'}`"
-            @update:model-value="(value) => selectProvince(value)"
-          />
-        </div>
-        <div class="col-xs-6 col-sm-3 col-md-3">
-          <!-- <q-input
-            :class="getClass(status == 'register' || status == 'rejectRegister')"
-            
-            :outlined="status == 'register' || status == 'rejectRegister'"
-            dense
-            lazy-rules
-            :readonly="!(status == 'register' || status == 'rejectRegister')"
-            :borderless="!(status == 'register' || status == 'rejectRegister')"
-            v-model="informaData.cardid"
-            :rules="[(val) => !!val || `${'กรุณากรอก ออกให้ ณ อำเภอ'}`]"
-            label="ออกให้ ณ อำเภอ"
-          /> -->
-          <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="informaData.districtId"
-            emit-value
-            map-options
-            option-label="name"
-            :options="districtOptions"
-            option-value="id"
-            :label="`${'ออกให้ ณ อำเภอ'}`"
-          />
-        </div>
+  <HeaderTop
+    v-model:edit="edit"
+    header="ข้อมูลส่วนตัว"
+    icon="mdi-account"
+    :save="saveData"
+    :addData="true"
+    :editOnly="false"
+    :cancel="cancelData"
+    :editData="status == 'register' || status == 'rejectRegister'"
+    :disable="statusEdit"
+  />
+  <!-- :changeBtn="changeBtn" -->
+  <q-form ref="myform" class="col-12 row q-col-gutter-x-sm">
+    <div class="row col-xs-12 col-sm-10 items-center q-col-gutter-x-sm q-col-gutter-y-xs">
+      <div class="col-xs-12 col-sm-2 col-md-2">
+        <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="informaData.prefixId"
+          emit-value
+          map-options
+          option-label="name"
+          :options="prefixOptions"
+          option-value="id"
+          :label="`${'คำนำหน้า'}`"
+        />
+      </div>
+      <div class="col-xs-12 col-sm-5 col-md-5">
+        <q-input
+          :class="getClass(status == 'register' || status == 'rejectRegister')"
+          :outlined="status == 'register' || status == 'rejectRegister'"
+          dense
+          lazy-rules
+          :readonly="!(status == 'register' || status == 'rejectRegister')"
+          :borderless="!(status == 'register' || status == 'rejectRegister')"
+          v-model="informaData.firstname"
+          :rules="[(val) => !!val || `${'กรุณากรอก ชื่อ'}`]"
+          :label="`${'ชื่อ'}`"
+        />
+      </div>
+      <div class="col-xs-12 col-sm-5 col-md-5">
+        <q-input
+          :class="getClass(status == 'register' || status == 'rejectRegister')"
+          :outlined="status == 'register' || status == 'rejectRegister'"
+          dense
+          lazy-rules
+          :readonly="!(status == 'register' || status == 'rejectRegister')"
+          :borderless="!(status == 'register' || status == 'rejectRegister')"
+          v-model="informaData.lastname"
+          :rules="[(val) => !!val || `${'กรุณากรอก นามสกุล'}`]"
+          :label="`${'นามสกุล'}`"
+        />
+      </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
+          lazy-rules
+          :readonly="!(status == 'register' || status == 'rejectRegister')"
+          :borderless="!(status == 'register' || status == 'rejectRegister')"
+          v-model="informaData.nationality"
+          :rules="[(val) => !!val || `${'กรุณากรอก สัญชาติ'}`]"
+          :label="`${'สัญชาติ'}`"
+        />
+      </div>
+      <div class="col-xs-12 col-sm-3 col-md-3">
+        <datepicker
+          v-model="informaData.birthDate"
+          :locale="'th'"
+          autoApply
+          :enableTimePicker="false"
+          week-start="0"
+          :max-date="new Date()"
+          :disabled="!(status == 'register' || status == 'rejectRegister')"
+        >
+          <template #year="{ year }">
+            {{ year + 543 }}
+          </template>
+          <template #year-overlay-value="{ value }">
+            {{ parseInt(value + 543) }}
+          </template>
+          <template #trigger>
+            <q-input
+              :class="getClass(status == 'register' || status == 'rejectRegister')"
+              :outlined="status == 'register' || status == 'rejectRegister'"
+              dense
+              lazy-rules
+              :readonly="!(status == 'register' || status == 'rejectRegister')"
+              :borderless="!(status == 'register' || status == 'rejectRegister')"
+              :model-value="
+                informaData.birthDate == null ? null : date2Thai(informaData.birthDate)
+              "
+              :rules="[(val) => !!val || `${'กรุณาเลือก วัน/เดือน/ปี เกิด'}`]"
+              :label="`${'วัน/เดือน/ปี เกิด'}`"
+            >
+              <template v-slot:prepend>
+                <q-icon
+                  name="mdi-calendar-outline"
+                  class="cursor-pointer"
+                  size="22px"
+                  :style="
+                    status == 'register' || status == 'rejectRegister'
+                      ? 'color: var(--q-primary)'
+                      : 'color: var(--q-grey)'
+                  "
+                >
+                </q-icon>
+              </template>
+            </q-input>
+          </template>
+        </datepicker>
+      </div>
+      <div class="col-xs-12 col-sm-3 col-md-3 q-pb-md">
+        <q-input
+          :class="getClass(status == 'register' || status == 'rejectRegister')"
+          dense
+          lazy-rules
+          readonly
+          borderless
+          :style="!(status == 'register' || status == 'rejectRegister') ? '' : 'padding:0 12px;'"
+          :model-value="informaData.birthDate == null ? null : calAge(informaData.birthDate)"
+          :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="informaData.relationship"
+          emit-value
+          map-options
+          option-label="name"
+          :options="relationshipOptions"
+          option-value="id"
+          :label="`${'สถานภาพ'}`"
+        />
+      </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"
+          counter
+          lazy-rules
+          :readonly="!(status == 'register' || status == 'rejectRegister')"
+          :borderless="!(status == 'register' || status == 'rejectRegister')"
+          v-model="informaData.cardid"
+          maxlength="13"
+          :rules="[
+            (val) => !!val || `${'กรุณากรอก เลขบัตรประจำตัวประชาชน'}`,
+            (val) => /^[0-9]*$/.test(val) || `${'กรุณากรอกเลขบัตรประจำตัวประชาชนให้ถูกต้อง'}`
+          ]"
+          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="informaData.provinceId"
+          emit-value
+          map-options
+          option-label="name"
+          :options="provinceOptions"
+          option-value="id"
+          :label="`${'ออกให้ ณ จังหวัด'}`"
+          @update:model-value="(value) => selectProvince(value)"
+        />
+      </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
+          lazy-rules
+          :readonly="!(status == 'register' || status == 'rejectRegister')"
+          :borderless="!(status == 'register' || status == 'rejectRegister')"
+          v-model="informaData.cardid"
+          :rules="[(val) => !!val || `${'กรุณากรอก ออกให้ ณ อำเภอ'}`]"
+          label="ออกให้ ณ อำเภอ"
+        /> -->
+        <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="informaData.districtId"
+          emit-value
+          map-options
+          option-label="name"
+          :options="districtOptions"
+          option-value="id"
+          :label="`${'ออกให้ ณ อำเภอ'}`"
+        />
+      </div>
 
-        <div class="col-xs-6 col-sm-3 col-md-3">
-          <datepicker
-            v-model="informaData.cardIdDate"
-            :locale="'th'"
-            autoApply
-            :enableTimePicker="false"
-            week-start="0"
-            :max-date="new Date()"
-            :disabled="!(status == 'register' || status == 'rejectRegister')"
-          >
-            <template #year="{ year }">
-              {{ year + 543 }}
-            </template>
-            <template #year-overlay-value="{ value }">
-              {{ parseInt(value + 543) }}
-            </template>
-            <template #trigger>
-              <q-input
-                :class="getClass(status == 'register' || status == 'rejectRegister')"
-                :outlined="status == 'register' || status == 'rejectRegister'"
-                dense
-                lazy-rules
-                :readonly="!(status == 'register' || status == 'rejectRegister')"
-                :borderless="!(status == 'register' || status == 'rejectRegister')"
-                :model-value="
-                  informaData.cardIdDate == null ? null : date2Thai(informaData.cardIdDate)
-                "
-                :rules="[(val) => !!val || `${'กรุณาเลือก วัน/เดือน/ปี ที่ออกบัตร'}`]"
-                :label="`${'วัน/เดือน/ปี ที่ออกบัตร'}`"
-              >
-                <template v-slot:prepend>
-                  <q-icon
-                    name="event"
-                    class="cursor-pointer"
-                    :style="
-                      status == 'register' || status == 'rejectRegister'
-                        ? 'color: var(--q-primary)'
-                        : 'color: var(--q-grey)'
-                    "
-                  >
-                  </q-icon>
-                </template>
-              </q-input>
-            </template>
-          </datepicker>
-        </div>
-        <div class="col-xs-6 col-sm-3 col-md-3">
-          <q-input
-            :outlined="status == 'register' || status == 'rejectRegister'"
-            dense
-            counter
-            lazy-rules
-            type="tel"
-            maxlength="10"
-            :class="getClass(status == 'register' || status == 'rejectRegister')"
-            :readonly="!(status == 'register' || status == 'rejectRegister')"
-            :borderless="!(status == 'register' || status == 'rejectRegister')"
-            v-model="informaData.tel"
-            :rules="[
-              (val) => !!val || `${'กรุณากรอก โทรศัพท์'}`,
-              (val) => /^[0-9]*$/.test(val) || `${'กรุณากรอกข้อมูลโทรศัพท์ให้ถูกต้อง'}`
-            ]"
-            :label="`${'โทรศัพท์'}`"
-          />
-        </div>
-        <div class="col-xs-6 col-sm-3 col-md-3">
-          <q-input
-            :outlined="status == 'register' || status == 'rejectRegister'"
-            dense
-            counter
-            lazy-rules
-            type="tel"
-            maxlength="10"
-            :class="getClass(status == 'register' || status == 'rejectRegister')"
-            :readonly="!(status == 'register' || status == 'rejectRegister')"
-            :borderless="!(status == 'register' || status == 'rejectRegister')"
-            v-model="informaData.phone"
-            :rules="[
-              (val) => !!val || `${'กรุณากรอก โทรศัพท์มือถือ'}`,
-              (val) => /^[0-9]*$/.test(val) || `${'กรุณากรอกข้อมูลโทรศัพท์มือถือให้ถูกต้อง'}`
-            ]"
-            :label="`${'โทรศัพท์มือถือ'}`"
-          />
-        </div>
-        <div class="col-xs-6 col-sm-3 col-md-3">
-          <q-input
-            :class="getClass(false)"
-            :outlined="false"
-            dense
-            lazy-rules
-            :readonly="true"
-            :borderless="true"
-            v-model="informaData.email"
-            label="E-mail address"
-          />
-        </div>
-        <div class="col-xs-12 col-sm-12 col-md-12">
-          <q-input
-            :class="getClass(status == 'register' || status == 'rejectRegister')"
-            :outlined="status == 'register' || status == 'rejectRegister'"
-            dense
-            lazy-rules
-            :readonly="!(status == 'register' || status == 'rejectRegister')"
-            :borderless="!(status == 'register' || status == 'rejectRegister')"
-            v-model="informaData.knowledge"
-            label="ความรู้ความสามารถพิเศษ"
-            type="textarea"
-          />
-        </div>
+      <div class="col-xs-12 col-sm-3 col-md-3">
+        <datepicker
+          v-model="informaData.cardIdDate"
+          :locale="'th'"
+          autoApply
+          :enableTimePicker="false"
+          week-start="0"
+          :max-date="new Date()"
+          :disabled="!(status == 'register' || status == 'rejectRegister')"
+        >
+          <template #year="{ year }">
+            {{ year + 543 }}
+          </template>
+          <template #year-overlay-value="{ value }">
+            {{ parseInt(value + 543) }}
+          </template>
+          <template #trigger>
+            <q-input
+              :class="getClass(status == 'register' || status == 'rejectRegister')"
+              :outlined="status == 'register' || status == 'rejectRegister'"
+              dense
+              lazy-rules
+              :readonly="!(status == 'register' || status == 'rejectRegister')"
+              :borderless="!(status == 'register' || status == 'rejectRegister')"
+              :model-value="
+                informaData.cardIdDate == null ? null : date2Thai(informaData.cardIdDate)
+              "
+              :rules="[(val) => !!val || `${'กรุณาเลือก วัน/เดือน/ปี ที่ออกบัตร'}`]"
+              :label="`${'วัน/เดือน/ปี ที่ออกบัตร'}`"
+            >
+              <template v-slot:prepend>
+                <q-icon
+                  name="mdi-calendar-outline"
+                  class="cursor-pointer"
+                  :style="
+                    status == 'register' || status == 'rejectRegister'
+                      ? 'color: var(--q-primary)'
+                      : 'color: var(--q-grey)'
+                  "
+                >
+                </q-icon>
+              </template>
+            </q-input>
+          </template>
+        </datepicker>
       </div>
-      <div class="row col-2 justify-center q-pt-md">
-        <div class="containerimage row justify-center">
-          <q-file
-            borderless
-            v-model="fileData"
-            stack-label
-            :readonly="!(status == 'register' || status == 'rejectRegister')"
-            @update:model-value="pickFile"
-          >
-            <q-img src="@/assets/avatar_user.jpg" class="col-12">
-              <div class="overlay" v-if="status == 'register' || status == 'rejectRegister'">
-                <q-icon name="mdi-camera" />
-                <br />อัปเดต
-              </div>
-            </q-img>
-          </q-file>
-        </div>
-        <div class="col-12 text-center" v-if="disabledPic">
-          <q-btn outline dense color="black" icon="mdi-content-save-outline" @click="savePic">
-            <q-tooltip content-class="bg-grey-2 text-black">บันทึกรูป</q-tooltip>
-          </q-btn>
-        </div>
+      <div class="col-xs-12 col-sm-3 col-md-3">
+        <q-input
+          :outlined="status == 'register' || status == 'rejectRegister'"
+          dense
+          counter
+          lazy-rules
+          type="tel"
+          maxlength="10"
+          :class="getClass(status == 'register' || status == 'rejectRegister')"
+          :readonly="!(status == 'register' || status == 'rejectRegister')"
+          :borderless="!(status == 'register' || status == 'rejectRegister')"
+          v-model="informaData.tel"
+          :rules="[
+            (val) => !!val || `${'กรุณากรอก โทรศัพท์'}`,
+            (val) => /^[0-9]*$/.test(val) || `${'กรุณากรอกข้อมูลโทรศัพท์ให้ถูกต้อง'}`
+          ]"
+          :label="`${'โทรศัพท์'}`"
+        />
       </div>
-    </q-form>
-  </q-card>
+      <div class="col-xs-12 col-sm-3 col-md-3">
+        <q-input
+          :outlined="status == 'register' || status == 'rejectRegister'"
+          dense
+          counter
+          lazy-rules
+          type="tel"
+          maxlength="10"
+          :class="getClass(status == 'register' || status == 'rejectRegister')"
+          :readonly="!(status == 'register' || status == 'rejectRegister')"
+          :borderless="!(status == 'register' || status == 'rejectRegister')"
+          v-model="informaData.phone"
+          :rules="[
+            (val) => !!val || `${'กรุณากรอก โทรศัพท์มือถือ'}`,
+            (val) => /^[0-9]*$/.test(val) || `${'กรุณากรอกข้อมูลโทรศัพท์มือถือให้ถูกต้อง'}`
+          ]"
+          :label="`${'โทรศัพท์มือถือ'}`"
+        />
+      </div>
+      <div class="col-xs-12 col-sm-3 col-md-3  q-pb-md">
+        <q-input
+          :class="getClass(false)"
+          :outlined="false"
+          dense
+          lazy-rules
+          :readonly="true"
+          :borderless="true"
+          v-model="informaData.email"
+          label="E-mail address"
+        />
+      </div>
+    </div>
+    <div class="row col-xs-12 col-sm-2 justify-center">
+      <div class="containerimage row justify-center">
+        <q-file
+          borderless
+          v-model="fileData"
+          stack-label
+          :readonly="!(status == 'register' || status == 'rejectRegister')"
+          @update:model-value="pickFile"
+        >
+          <q-img src="@/assets/avatar_user.jpg" class="col-12">
+            <div class="overlay" v-if="status == 'register' || status == 'rejectRegister'">
+              <q-icon name="mdi-camera" />
+              <br />อัปเดต
+            </div>
+          </q-img>
+        </q-file>
+      </div>
+      <div class="col-12 text-center" v-if="disabledPic">
+        <q-btn outline dense color="black" icon="mdi-content-save-outline" @click="savePic">
+          <q-tooltip content-class="bg-grey-2 text-black">บันทึกรูป</q-tooltip>
+        </q-btn>
+      </div>
+    </div>
+    <div class="col-xs-12 col-sm-12">
+      <q-input
+        :class="getClass(status == 'register' || status == 'rejectRegister')"
+        :outlined="status == 'register' || status == 'rejectRegister'"
+        dense
+        lazy-rules
+        :readonly="!(status == 'register' || status == 'rejectRegister')"
+        :borderless="!(status == 'register' || status == 'rejectRegister')"
+        v-model="informaData.knowledge"
+        label="ความรู้ความสามารถพิเศษ"
+        type="textarea"
+      />
+    </div>
+  </q-form>
   <!-- <q-dialog :model-value="modalConsend" persistent>
     <q-card style="min-width: 800px">
       <Conference :ok="consendOk" :close="consenClose" />
@@ -576,9 +575,9 @@ const getClass = (val: boolean) => {
   width: 160px;
   height: 170px;
   padding: 1%;
-  border-radius: 3px;
+  border-radius: 8px;
   border: solid 2px rgba(168, 168, 168, 0.055) !important;
-  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.048), 0 3px 6px 0 rgba(0, 0, 0, 0.19);
+  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.048), 0 3px 6px 0 rgba(0, 0, 0, 0.097);
 }
 
 .overlay {
@@ -600,4 +599,8 @@ const getClass = (val: boolean) => {
 .containerimage:hover .overlay {
   opacity: 1;
 }
+
+.q-field__bottom{
+  padding: 5px 10px 0px 0px;
+}
 </style>

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

@@ -1,255 +1,249 @@
 <!-- card อาชีพ -->
 <template>
-  <q-card flat bordered class="col-12 q-px-lg q-py-md q-mt-md">
-    <HeaderTop
-      v-model:edit="edit"
-      header="อาชีพ"
-      icon="mdi-briefcase"
-      :save="saveData"
-      :addData="true"
-      :editOnly="false"
-      :cancel="cancelData"
-      :editData="status == 'register' || status == 'rejectRegister'"
-      :disable="statusEdit"
-    />
-    <!-- :changeBtn="changeBtn" -->
-    <q-form ref="myform">
-      <div class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs">
-        <div class="col-12 row">
-          <q-input
-            :class="getClass(status == 'register' || status == 'rejectRegister')"
-            hide-bottom-space
-            dense
-            lazy-rules
-            type="textarea"
-            autogrow
-            :readonly="!(status == 'register' || status == 'rejectRegister')"
-            :borderless="!(status == 'register' || status == 'rejectRegister')"
-            v-model="occupationData.official"
-            :rules="[(val) => !!val || `${'กรุณากรอก สำนัก/บริษัท'}`]"
-            :disable="
-              occupationData.status !== 'official' ||
-              !(status == 'register' || status == 'rejectRegister')
-            "
-          >
-            <template v-slot:before>
-              <q-radio
-                v-model="occupationData.status"
-                checked-icon="task_alt"
-                unchecked-icon="panorama_fish_eye"
-                val="official"
-                label="ข้าราชการกรุงเทพมหานคร ตำแหน่ง"
-                dense
-                :disable="!(status == 'register' || status == 'rejectRegister')"
-                size="md"
-                style="font-size: 14px; color: black"
-              />
-            </template>
-          </q-input>
-          <q-input
-            :class="getClass(status == 'register' || status == 'rejectRegister')"
-            hide-bottom-space
-            dense
-            lazy-rules
-            type="textarea"
-            autogrow
-            :readonly="!(status == 'register' || status == 'rejectRegister')"
-            :borderless="!(status == 'register' || status == 'rejectRegister')"
-            v-model="occupationData.personnel"
-            :rules="[(val) => !!val || `${'กรุณากรอก สำนัก/บริษัท'}`]"
-            :disable="
-              occupationData.status !== 'personnel' ||
-              !(status == 'register' || status == 'rejectRegister')
-            "
-          >
-            <template v-slot:before>
-              <q-radio
-                v-model="occupationData.status"
-                checked-icon="task_alt"
-                unchecked-icon="panorama_fish_eye"
-                val="personnel"
-                label="บุคลากรกรุงเทพมหานคร ตำแหน่ง"
-                dense
-                :disable="!(status == 'register' || status == 'rejectRegister')"
-                size="md"
-                style="font-size: 14px; color: black"
-              />
-            </template>
-          </q-input>
-          <q-input
-            :class="getClass(status == 'register' || status == 'rejectRegister')"
-            hide-bottom-space
-            dense
-            lazy-rules
-            type="textarea"
-            autogrow
-            :readonly="!(status == 'register' || status == 'rejectRegister')"
-            :borderless="!(status == 'register' || status == 'rejectRegister')"
-            v-model="occupationData.officialsOther"
-            :rules="[(val) => !!val || `${'กรุณากรอก สำนัก/บริษัท'}`]"
-            :disable="
-              occupationData.status !== 'officialsOther' ||
-              !(status == 'register' || status == 'rejectRegister')
-            "
-          >
-            <template v-slot:before>
-              <q-radio
-                v-model="occupationData.status"
-                checked-icon="task_alt"
-                unchecked-icon="panorama_fish_eye"
-                val="officialsOther"
-                label="ข้าราชการประเภทอื่น ตำแหน่ง"
-                dense
-                :disable="!(status == 'register' || status == 'rejectRegister')"
-                size="md"
-                style="font-size: 14px; color: black"
-              />
-            </template>
-          </q-input>
-          <q-input
-            :class="getClass(status == 'register' || status == 'rejectRegister')"
-            hide-bottom-space
-            dense
-            lazy-rules
-            type="textarea"
-            autogrow
-            :readonly="!(status == 'register' || status == 'rejectRegister')"
-            :borderless="!(status == 'register' || status == 'rejectRegister')"
-            v-model="occupationData.employee"
-            :rules="[(val) => !!val || `${'กรุณากรอก สำนัก/บริษัท'}`]"
-            :disable="
-              occupationData.status !== 'employee' ||
-              !(status == 'register' || status == 'rejectRegister')
-            "
-          >
-            <template v-slot:before>
-              <q-radio
-                v-model="occupationData.status"
-                checked-icon="task_alt"
-                unchecked-icon="panorama_fish_eye"
-                val="employee"
-                label="ลูกจ้าง/พนักงานราชการของส่วนราชการอื่น ตำแหน่ง"
-                dense
-                :disable="!(status == 'register' || status == 'rejectRegister')"
-                size="md"
-                style="font-size: 14px; color: black"
-              />
-            </template>
-          </q-input>
-          <q-radio
-            v-model="occupationData.status"
-            checked-icon="task_alt"
-            unchecked-icon="panorama_fish_eye"
-            val="studying"
-            label="กำลังศึกษาต่อ"
-            dense
-            :disable="!(status == 'register' || status == 'rejectRegister')"
-            size="md"
-            style="font-size: 14px; color: black"
-          />
-          <q-input
-            :class="getClass(status == 'register' || status == 'rejectRegister')"
-            hide-bottom-space
-            dense
-            lazy-rules
-            type="textarea"
-            autogrow
-            :readonly="!(status == 'register' || status == 'rejectRegister')"
-            :borderless="!(status == 'register' || status == 'rejectRegister')"
-            v-model="occupationData.other"
-            :rules="[(val) => !!val || `${'กรุณากรอก สำนัก/บริษัท'}`]"
-            :disable="
-              occupationData.status !== 'other' ||
-              !(status == 'register' || status == 'rejectRegister')
-            "
-          >
-            <template v-slot:before>
-              <q-radio
-                v-model="occupationData.status"
-                checked-icon="task_alt"
-                unchecked-icon="panorama_fish_eye"
-                val="other"
-                label="อื่นๆ"
-                dense
-                :disable="!(status == 'register' || status == 'rejectRegister')"
-                size="md"
-                style="font-size: 14px; color: black"
-              />
-            </template>
-          </q-input>
-        </div>
-        <div class="col-xs-6 col-sm-3 col-md-3">
-          <q-input
-            :class="getClass(status == 'register' || status == 'rejectRegister')"
-            hide-bottom-space
-            :outlined="status == 'register' || status == 'rejectRegister'"
-            dense
-            lazy-rules
-            type="textarea"
-            autogrow
-            :readonly="!(status == 'register' || status == 'rejectRegister')"
-            :borderless="!(status == 'register' || status == 'rejectRegister')"
-            v-model="occupationData.company"
-            :rules="[(val) => !!val || `${'กรุณากรอก สำนัก/บริษัท'}`]"
-            :label="`${'สำนัก/บริษัท'}`"
-          />
-        </div>
-        <div class="col-xs-6 col-sm-3 col-md-3">
-          <q-input
-            :class="getClass(status == 'register' || status == 'rejectRegister')"
-            hide-bottom-space
-            :outlined="status == 'register' || status == 'rejectRegister'"
-            dense
-            lazy-rules
-            type="textarea"
-            autogrow
-            :readonly="!(status == 'register' || status == 'rejectRegister')"
-            :borderless="!(status == 'register' || status == 'rejectRegister')"
-            v-model="occupationData.department"
-            :rules="[(val) => !!val || `${'กรุณากรอก กอง/ฝ่าย'}`]"
-            :label="`${'กอง/ฝ่าย'}`"
-          />
-        </div>
-        <div class="col-xs-6 col-sm-3 col-md-3">
-          <q-input
-            :class="getClass(status == 'register' || status == 'rejectRegister')"
-            hide-bottom-space
-            :outlined="status == 'register' || status == 'rejectRegister'"
-            dense
-            lazy-rules
-            type="textarea"
-            autogrow
-            :readonly="!(status == 'register' || status == 'rejectRegister')"
-            :borderless="!(status == 'register' || status == 'rejectRegister')"
-            v-model="occupationData.email"
-            :rules="[(val) => !!val || `${'กรุณากรอก E-mail address'}`]"
-            :label="`${'E-mail address'}`"
-          />
-        </div>
-        <div class="col-xs-6 col-sm-3 col-md-3">
-          <q-input
-            :class="getClass(status == 'register' || status == 'rejectRegister')"
-            hide-bottom-space
-            :outlined="status == 'register' || status == 'rejectRegister'"
-            dense
-            counter
-            maxlength="10"
-            lazy-rules
-            type="tel"
-            autogrow
-            :readonly="!(status == 'register' || status == 'rejectRegister')"
-            :borderless="!(status == 'register' || status == 'rejectRegister')"
-            v-model="occupationData.tel"
-            :rules="[
-              (val) => !!val || `${'กรุณากรอก โทรศัพท์'}`,
-              (val) => /^[0-9]*$/.test(val) || 'กรุณากรอก โทรศัพท์ให้ถูกต้อง'
-            ]"
-            :label="`${'โทรศัพท์'}`"
-          />
-        </div>
+  <HeaderTop
+    v-model:edit="edit"
+    header="อาชีพ"
+    icon="mdi-briefcase"
+    :save="saveData"
+    :addData="true"
+    :editOnly="false"
+    :cancel="cancelData"
+    :editData="status == 'register' || status == 'rejectRegister'"
+    :disable="statusEdit"
+  />
+  <!-- :changeBtn="changeBtn" -->
+  <q-form ref="myform">
+    <div class="row col-12 items-center q-col-gutter-x-sm q-col-gutter-y-xs">
+      <div class="col-12 row q-pb-lg">
+        <q-input
+          :class="getClass(status == 'register' || status == 'rejectRegister')"
+          hide-bottom-space
+          dense
+          lazy-rules
+          type="textarea"
+          autogrow
+          :readonly="!(status == 'register' || status == 'rejectRegister')"
+          :borderless="!(status == 'register' || status == 'rejectRegister')"
+          v-model="occupationData.official"
+          :rules="[(val) => !!val || `${'กรุณากรอก สำนัก/บริษัท'}`]"
+          :disable="
+            occupationData.status !== 'official' ||
+            !(status == 'register' || status == 'rejectRegister')
+          "
+        >
+          <template v-slot:before>
+            <q-radio
+              v-model="occupationData.status"
+              checked-icon="task_alt"
+              unchecked-icon="panorama_fish_eye"
+              val="official"
+              label="ข้าราชการกรุงเทพมหานคร ตำแหน่ง"
+              dense
+              :disable="!(status == 'register' || status == 'rejectRegister')"
+              size="md"
+              style="font-size: 14px; color: black"
+            />
+          </template>
+        </q-input>
+        <q-input
+          :class="getClass(status == 'register' || status == 'rejectRegister')"
+          hide-bottom-space
+          dense
+          lazy-rules
+          type="textarea"
+          autogrow
+          :readonly="!(status == 'register' || status == 'rejectRegister')"
+          :borderless="!(status == 'register' || status == 'rejectRegister')"
+          v-model="occupationData.personnel"
+          :rules="[(val) => !!val || `${'กรุณากรอก สำนัก/บริษัท'}`]"
+          :disable="
+            occupationData.status !== 'personnel' ||
+            !(status == 'register' || status == 'rejectRegister')
+          "
+        >
+          <template v-slot:before>
+            <q-radio
+              v-model="occupationData.status"
+              checked-icon="task_alt"
+              unchecked-icon="panorama_fish_eye"
+              val="personnel"
+              label="บุคลากรกรุงเทพมหานคร ตำแหน่ง"
+              dense
+              :disable="!(status == 'register' || status == 'rejectRegister')"
+              size="md"
+              style="font-size: 14px; color: black"
+            />
+          </template>
+        </q-input>
+        <q-input
+          :class="getClass(status == 'register' || status == 'rejectRegister')"
+          hide-bottom-space
+          dense
+          lazy-rules
+          type="textarea"
+          autogrow
+          :readonly="!(status == 'register' || status == 'rejectRegister')"
+          :borderless="!(status == 'register' || status == 'rejectRegister')"
+          v-model="occupationData.officialsOther"
+          :rules="[(val) => !!val || `${'กรุณากรอก สำนัก/บริษัท'}`]"
+          :disable="
+            occupationData.status !== 'officialsOther' ||
+            !(status == 'register' || status == 'rejectRegister')
+          "
+        >
+          <template v-slot:before>
+            <q-radio
+              v-model="occupationData.status"
+              checked-icon="task_alt"
+              unchecked-icon="panorama_fish_eye"
+              val="officialsOther"
+              label="ข้าราชการประเภทอื่น ตำแหน่ง"
+              dense
+              :disable="!(status == 'register' || status == 'rejectRegister')"
+              size="md"
+              style="font-size: 14px; color: black"
+            />
+          </template>
+        </q-input>
+        <q-input
+          :class="getClass(status == 'register' || status == 'rejectRegister')"
+          hide-bottom-space
+          dense
+          lazy-rules
+          type="textarea"
+          autogrow
+          :readonly="!(status == 'register' || status == 'rejectRegister')"
+          :borderless="!(status == 'register' || status == 'rejectRegister')"
+          v-model="occupationData.employee"
+          :rules="[(val) => !!val || `${'กรุณากรอก สำนัก/บริษัท'}`]"
+          :disable="
+            occupationData.status !== 'employee' ||
+            !(status == 'register' || status == 'rejectRegister')
+          "
+        >
+          <template v-slot:before>
+            <q-radio
+              v-model="occupationData.status"
+              checked-icon="task_alt"
+              unchecked-icon="panorama_fish_eye"
+              val="employee"
+              label="ลูกจ้าง/พนักงานราชการของส่วนราชการอื่น ตำแหน่ง"
+              dense
+              :disable="!(status == 'register' || status == 'rejectRegister')"
+              size="md"
+              style="font-size: 14px; color: black"
+            />
+          </template>
+        </q-input>
+        <q-radio
+          v-model="occupationData.status"
+          checked-icon="task_alt"
+          unchecked-icon="panorama_fish_eye"
+          val="studying"
+          label="กำลังศึกษาต่อ"
+          dense
+          :disable="!(status == 'register' || status == 'rejectRegister')"
+          size="md"
+          style="font-size: 14px; color: black"
+        />
+        <q-input
+          :class="getClass(status == 'register' || status == 'rejectRegister')"
+          hide-bottom-space
+          dense
+          lazy-rules
+          type="textarea"
+          autogrow
+          :readonly="!(status == 'register' || status == 'rejectRegister')"
+          :borderless="!(status == 'register' || status == 'rejectRegister')"
+          v-model="occupationData.other"
+          :rules="[(val) => !!val || `${'กรุณากรอก สำนัก/บริษัท'}`]"
+          :disable="
+            occupationData.status !== 'other' ||
+            !(status == 'register' || status == 'rejectRegister')
+          "
+        >
+          <template v-slot:before>
+            <q-radio
+              v-model="occupationData.status"
+              checked-icon="task_alt"
+              unchecked-icon="panorama_fish_eye"
+              val="other"
+              label="อื่นๆ"
+              dense
+              :disable="!(status == 'register' || status == 'rejectRegister')"
+              size="md"
+              style="font-size: 14px; color: black"
+            />
+          </template>
+        </q-input>
       </div>
-    </q-form>
-  </q-card>
+      <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
+          lazy-rules
+          type="textarea"
+          autogrow
+          :readonly="!(status == 'register' || status == 'rejectRegister')"
+          :borderless="!(status == 'register' || status == 'rejectRegister')"
+          v-model="occupationData.company"
+          :rules="[(val) => !!val || `${'กรุณากรอก สำนัก/บริษัท'}`]"
+          :label="`${'สำนัก/บริษัท'}`"
+        />
+      </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
+          lazy-rules
+          type="textarea"
+          autogrow
+          :readonly="!(status == 'register' || status == 'rejectRegister')"
+          :borderless="!(status == 'register' || status == 'rejectRegister')"
+          v-model="occupationData.department"
+          :rules="[(val) => !!val || `${'กรุณากรอก กอง/ฝ่าย'}`]"
+          :label="`${'กอง/ฝ่าย'}`"
+        />
+      </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
+          lazy-rules
+          type="textarea"
+          autogrow
+          :readonly="!(status == 'register' || status == 'rejectRegister')"
+          :borderless="!(status == 'register' || status == 'rejectRegister')"
+          v-model="occupationData.email"
+          :rules="[(val) => !!val || `${'กรุณากรอก E-mail address'}`]"
+          :label="`${'E-mail address'}`"
+        />
+      </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
+          counter
+          maxlength="10"
+          lazy-rules
+          type="tel"
+          autogrow
+          :readonly="!(status == 'register' || status == 'rejectRegister')"
+          :borderless="!(status == 'register' || status == 'rejectRegister')"
+          v-model="occupationData.tel"
+          :rules="[
+            (val) => !!val || `${'กรุณากรอก โทรศัพท์'}`,
+            (val) => /^[0-9]*$/.test(val) || 'กรุณากรอก โทรศัพท์ให้ถูกต้อง'
+          ]"
+          :label="`${'โทรศัพท์'}`"
+        />
+      </div>
+    </div>
+  </q-form>
   <!-- <q-dialog :model-value="modalConsend" persistent>
     <q-card style="min-width: 800px">
       <Conference :ok="consendOk" :close="consenClose" />

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

@@ -1,44 +1,70 @@
 <!-- tab ข้อมูลส่วนบุคคล -->
 <template>
-  <Information
-    :prefixOptions="prefixOptions"
-    :relationshipOptions="relationshipOptions"
-    :provinceOptions="provinceOptions"
-    v-model:statusEdit="statusEdit"
-    :notiNoEdit="notiNoEdit"
-    :status="status"
-  />
-  <Address
-    :provinceOptions="provinceOptions"
-    v-model:statusEdit="statusEdit"
-    :notiNoEdit="notiNoEdit"
-    :status="status"
-  />
-  <Family
-    :prefixOptions="prefixOptions"
-    v-model:statusEdit="statusEdit"
-    :notiNoEdit="notiNoEdit"
-    :status="status"
-  />
+  <div class="q-px-sm">
+    <Information
+      :prefixOptions="prefixOptions"
+      :relationshipOptions="relationshipOptions"
+      :provinceOptions="provinceOptions"
+      v-model:statusEdit="statusEdit"
+      :notiNoEdit="notiNoEdit"
+      :status="status"
+    />
+  </div>
+  
+  <q-separator class="q-my-lg bg-gray" size="5px" />
+  <div class="q-px-sm">
+    <Address
+      :provinceOptions="provinceOptions"
+      v-model:statusEdit="statusEdit"
+      :notiNoEdit="notiNoEdit"
+      :status="status"
+    />
+  </div>
+
+  <q-separator class="q-my-lg bg-gray" size="5px" />
+  <div class="q-px-sm">
+    <Family
+      :prefixOptions="prefixOptions"
+      v-model:statusEdit="statusEdit"
+      :notiNoEdit="notiNoEdit"
+      :status="status"
+    />
+  </div>
+
+  <q-separator class="q-my-lg bg-gray" size="5px" />
+  <div class="q-px-sm">
   <Occupation v-model:statusEdit="statusEdit" :notiNoEdit="notiNoEdit" :status="status" />
+  </div>
+  
+  <q-separator class="q-my-lg bg-gray" size="5px" />
+  <div class="q-px-sm">
   <Education
     :loader="loader"
     v-model:statusEdit="statusEdit"
     :notiNoEdit="notiNoEdit"
     :status="status"
   />
+  </div>
+
+  <q-separator class="q-my-lg bg-gray" size="5px" />
+  <div class="q-px-sm">
   <Career
     :loader="loader"
     v-model:statusEdit="statusEdit"
     :notiNoEdit="notiNoEdit"
     :status="status"
   />
+  </div>
+
+  <q-separator class="q-my-lg bg-gray" size="5px" />
+  <div class="q-px-sm">
   <Document
     :loader="loader"
     v-model:statusEdit="statusEdit"
     :notiNoEdit="notiNoEdit"
     :status="status"
   />
+  </div>
 </template>
 <script setup lang="ts">
 import { ref, onMounted, watch } from 'vue'

src/modules/01_exam/views/ExamDetail.vue

@@ -1,68 +1,65 @@
 <!-- page:detail page รายการสอบทั้งหมด -->
 <template>
-  <q-toolbar class="q-py-sm q-px-md bg-grey-2">
-    <q-toolbar-title class="toptitle text-dark col-12 row items-center">
+  <q-toolbar class="q-pa-sm text-center">
+    <q-toolbar-title class="text-dark text-weight-medium">
       {{ tittle }}
-      <q-space />
-      <q-btn color="primary" label="ออกจากระบบ" push size="sm" v-close-popup @click="doLogout" />
+      <!-- <q-btn color="primary" label="ออกจากระบบ" push size="sm" v-close-popup @click="doLogout" /> -->
     </q-toolbar-title>
   </q-toolbar>
-  <q-card flat class="">
-    <div class="justify-center">
-      <q-stepper
-        class="col-2"
-        v-model="step"
-        ref="stepper"
-        header-nav
-        animated
-        done-color="positive"
-        active-color="blue-7"
-        inactive-color="positive"
-        done-icon="mdi-check-bold"
-        alternative-labels
-        :active-icon="stepRaw === step && stepRaw != 4 ? 'mdi-pencil' : 'mdi-eye-outline'"
-      >
-        <!-- <q-step
-          :done="step > 1"
-          :disable="stepRaw < 1"
-          :name="1"
-          title="อ่านคำชี้แจง"
-          :icon="
-            stepRaw >= 1 ? (stepRaw == 1 ? 'mdi-pencil' : 'mdi-check-bold') : 'mdi-pencil'
-          "
-        >
-          <ExamDetail :fetchStep="fetchStep" :status="status" />
-        </q-step> -->
-        <q-step
-          :done="step > 2"
-          :disable="stepRaw < 2"
-          :name="2"
-          title="ข้อมูลสมัครสอบ"
-          :icon="stepRaw >= 2 ? (stepRaw == 2 ? 'mdi-pencil' : 'mdi-check-bold') : 'mdi-pencil'"
-        >
-          <ExamForm :fetchStep="fetchStep" :status="status" />
-        </q-step>
-        <q-step
-          :done="step > 3"
-          :disable="stepRaw < 3"
-          :name="3"
-          title="ชำระค่าธรรมเนียมการสอบ"
-          :icon="stepRaw >= 3 ? (stepRaw == 3 ? 'mdi-pencil' : 'mdi-check-bold') : 'mdi-pencil'"
-        >
-          <ExamPayment :fetchStep="fetchStep" :status="status" />
-        </q-step>
-        <q-step
-          :done="step > 4"
-          :disable="stepRaw < 4"
-          :name="4"
-          title="สำเร็จ"
-          :icon="stepRaw >= 4 ? 'mdi-check-bold' : 'mdi-pencil'"
-        >
-          <ExamFinished :fetchStep="fetchStep" :status="status" />
-        </q-step>
-      </q-stepper>
-    </div>
-  </q-card>
+  <q-stepper
+    v-model="step"
+    ref="stepper"
+    alternative-labels
+    header-nav
+    animated
+    done-icon="check"
+    :active-icon="stepRaw === step && stepRaw != 4 ? 'mdi-pencil' : 'mdi-eye'"
+  >
+    <!-- <q-step
+      :done="step > 1"
+      :disable="stepRaw < 1"
+      :name="1"
+      title="อ่านคำชี้แจง"
+      :icon="
+        stepRaw >= 1 ? (stepRaw == 1 ? 'mdi-pencil' : 'mdi-check-bold') : 'mdi-pencil'
+      "
+    >
+      <ExamDetail :fetchStep="fetchStep" :status="status" />
+    </q-step> -->
+    <q-step
+      :done="step > 2"
+      :disable="stepRaw < 2"
+      :name="2"
+      title="ข้อมูลสมัครสอบ"
+      :icon="stepRaw >= 2 ? (stepRaw == 2 ? 'mdi-pencil' : 'mdi-check-bold') : 'mdi-account'"
+    >
+      <q-card bordered class="q-pa-lg"> 
+        <ExamForm :fetchStep="fetchStep" :status="status" />
+      </q-card>
+    </q-step>
+    <q-step
+      :done="step > 3"
+      :disable="stepRaw < 3"
+      :name="3"
+      title="ชำระค่าธรรมเนียม"
+      :icon="stepRaw >= 3 ? (stepRaw == 3 ? 'mdi-pencil' : 'mdi-check-bold') : 'mdi-receipt'"
+    >
+      <q-card bordered class="q-pa-lg"> 
+        <ExamPayment :fetchStep="fetchStep" :status="status" />
+      </q-card>
+    </q-step>
+    <q-step
+      :done="step > 4"
+      :disable="stepRaw < 4"
+      :name="4"
+      title="สำเร็จ"
+      :icon="stepRaw >= 4 ? 'mdi-check-bold' : 'mdi-flag-variant'"
+    >
+      <q-card bordered class="q-pa-lg"> 
+        <ExamFinished :fetchStep="fetchStep" :status="status" />
+      </q-card>
+    </q-step>
+  </q-stepper>
   <q-dialog :model-value="modalConsend" persistent>
     <q-card style="min-width: 800px">
       <Conference :ok="consendOk" :close="consenClose" />
@@ -95,6 +92,8 @@ const status = ref<string>('register')
 const modalConsend = ref<boolean>(false)
 
 onMounted(async () => {
+  stepRaw.value = 2
+  step.value = 2
   await fetchPeriodExam()
   await candidateCheck()
 })
@@ -199,3 +198,59 @@ const doLogout = () => {
   })
 }
 </script>
+<style>
+.q-stepper {
+	box-shadow: none;
+  background: transparent !important;
+}
+.q-stepper--horizontal .q-stepper__step-inner {
+	padding: 0px;
+} 
+.q-stepper__header--alternative-labels .q-stepper__tab {
+	min-height: 0px;
+	padding: 1.5% 0% 1.5% 0%;
+}
+.q-stepper__header--border {
+	border-bottom: none;
+}
+.q-stepper__dot {
+	min-width: 35px;
+	height: 35px;
+	width: 35px;
+	font-size: 20px;
+}
+.q-stepper__title{
+  width: 100px;
+}
+.q-stepper__tab--done .q-stepper__title{
+  color: #62a00b;
+}
+.q-stepper__tab--done .q-stepper__dot{
+  color: #95D710;
+  border: 1px solid #62a00b;
+}
+
+.q-stepper__tab--active .q-stepper__title{
+  color: #318BAE;
+}
+.q-stepper__tab--active .q-stepper__dot{
+  color: #1CB4EA;
+  border: 1px solid #218ab393;
+}
+
+.q-stepper__tab--disabled .q-stepper__title{
+  color: #92B4C8;
+}
+.q-stepper__tab--disabled .q-stepper__dot{
+  background: #DEF2FC !important;
+  border: 1px solid #92b4c876;
+}
+
+.q-stepper__tab--disabled .q-stepper__dot .q-icon{
+  color: #7692a3d0;
+}
+.q-stepper--horizontal .q-stepper__line:before, .q-stepper--horizontal .q-stepper__line:after{
+  background: #92b4c847;
+}
+
+</style>

src/style/quasar-variables.sass

@@ -2,7 +2,7 @@
 
 $primary: #02A998
 $secondary: #016987
-$accent: #9C27B0
+$accent: #7692a3d0
 
 // $dark: #1D1D1D
 $dark: #35473C
@@ -12,6 +12,12 @@ $negative: #C10015
 $info: #31CCEC
 $warning: #F2C037
 
+$gray: #92b4c847
+.gray
+    color: $gray !important
+.bg-gray
+    background: $gray !important
+
 $add: #00aa86
 .text-add
     color: $add !important

src/views/MainLayout.vue

@@ -64,214 +64,33 @@ const doLogout = () => {
   <!-- แบบเก่า design แรก -->
   <!-- <q-layout view="lHh Lpr lff"> -->
   <!-- ปรับให้กับหน้า รายละเอียดรายการสอบทั้งหมด  -->
-  <q-layout view="lHh LpR lff">
+  <q-layout view="lHh LpR lff" class="bgColor text-dark">
     <!-- header -->
-    <q-header flat class="bg-grey-2 text-dark" height-hint="7">
-      <q-toolbar style="padding: 0 2%">
-        <!-- <q-btn
-          size="13px"
-          class="bg-grey-3"
-          flat
-          dense
-          round
-          @click="toggleBtnLeft"
-          aria-label="Menu"
-        >
-          <q-icon
-            :name="miniState == false ? 'mdi-backburger' : 'mdi-menu-open'"
-            size="20px"
-            color="grey-7"
-          />
-        </q-btn> -->
-
-        <q-space />
-
-        <!-- Search -->
-        <!-- <q-input  dense rounded standout v-model="text" placeholder="ค้นหา">
-						<template v-slot:prepend>
-							<q-icon name="mdi-magnify" size="20px" color="grey-7" />
-						</template>
-					</q-input> -->
-        <!-- <q-btn class="bg-grey-3" flat dense round>
-          <q-icon name="mdi-magnify" size="20px" color="grey-7" />
-        </q-btn> -->
-
-        <!-- Notification -->
-        <!-- <q-btn
-          round
-          dense
-          flat
-          size="13px"
-          class="q-mx-md bg-grey-3"
-          :color="notiList.length === 0 ? 'grey-6' : 'grey-8'"
-          :disable="notiList.length === 0"
-        >
-          <q-icon name="mdi-bell" size="18px" color="grey-7" />
-          <q-badge
-            rounded
-            v-show="notiList.length > 0"
-            color="negative"
-            text-color="white"
-            floating
-            >{{ notiList.length }}</q-badge
-          >
-          <q-menu v-model="notiTrigger" max-width="480px" :offset="[0, 10]">
-            <div class="q-px-md q-py-sm row col-12 items-center">
-              <div class="text-subtitle1 text-weight-medium">การแจ้งเตือน</div>
-            </div>
-
-            <q-list style="min-width: 300px" v-for="n in notiList" :key="n.id">
-              <q-item v-ripple class="mytry" dense>
-                <q-item-section avatar top style="min-width: 40px">
-                  <q-avatar color="primary" size="22px" text-color="white">
-                    <span class="text-weight-medium text-uppercase">{{ n.sender }}</span>
-                  </q-avatar>
-                </q-item-section>
-                <q-item-section>
-                  <q-item-label caption class="text-black">{{ n.body }}</q-item-label>
-                  <q-item-label caption class="row items-center text-grey-7">{{
-                    n.timereceive
-                  }}</q-item-label>
-                </q-item-section>
-                <q-btn size="sm" unelevated dense icon="mdi-close" class="mybtn q-mx-xs"></q-btn>
-              </q-item>
-              <q-separator color="grey-2" />
-            </q-list>
-          </q-menu>
-        </q-btn>
-        <div class="row items-center no-wrap">
-          <q-btn-dropdown size="md" dropdown-color="grey" flat>
-            <template v-slot:label>
-              <q-item v-close-popup class="q-pa-none">
-                <q-item-section avatar>
-                  <q-avatar color="grey-3">
-                    <q-icon name="mdi-account" size="22px" color="grey-7" />
-                  </q-avatar>
-                </q-item-section>
-                <q-item-section class="text-left">
-                  <q-item-label class="text-caption text-weight-medium">{{
-                    fullname
-                  }}</q-item-label>
-                  <q-item-label caption>เจ้าหน้าที่ ก.ก.</q-item-label>
-                </q-item-section>
-              </q-item>
-            </template>
-            <div
-              class="row justify-center"
-              style="border-top: solid 3px #1bb19b !important; width: 273.797px"
-            >
-              <div class="column items-center col-12 q-py-md" color="grey-3">
-                <q-avatar size="72px" color="grey-4">
-                  <q-icon name="mdi-account" color="grey-7" />
-                </q-avatar>
-                <div class="text-subtitle2 q-mt-md q-mb-xs text-center">
-                  {{ fullname }}
-                </div>
-                <q-btn
-                  color="primary"
-                  label="ออกจากระบบ"
-                  push
-                  size="sm"
-                  v-close-popup
-                  @click="doLogout"
-                />
-              </div>
-
-              <div class="column col-12">
-                <q-separator />
-                <div class="column q-pb-md justify-center">
-                  <div class="text-overline text-grey q-px-md q-pt-sm">เลือกโหมด</div>
-                  <q-list dense v-for="op in options" :key="op.label">
-                    <q-item clickable>
-                      <q-item-section avatar>
-                        <q-avatar
-                          :color="op.color"
-                          text-color="white"
-                          :icon="op.icon"
-                          size="20px"
-                          font-size="12px"
-                        />
-                      </q-item-section>
-                      <q-item-section class="q-py-sm">{{ op.label }}</q-item-section>
-                    </q-item>
-                  </q-list>
-                </div>
-              </div>
-            </div>
-          </q-btn-dropdown>
-        </div> -->
-      </q-toolbar>
-    </q-header>
+    <q-header flat class="bg-white text-white row justify-center header" height-hint="7">
+			<q-toolbar style="padding:0% 2%" class="col-xs-12 col-sm-11 col-md-11 col-lg-10">
+				<q-toolbar-title  shrink class="row items-center no-wrap">
+					<q-btn flat class="bg-white" dense round>
+						<q-avatar size="35px">
+							<img src="../assets/logo.png" />
+						</q-avatar>
+					</q-btn>
+					<div class="row q-ml-md text-dark" v-if="$q.screen.gt.xs">
+						<div class="col-12 textline1">
+							ระบบทรัพยากรบุคคล
+						</div>
+						<div class="text-caption textline2">
+							กรุงเทพมหานคร
+						</div>
+					</div>
+				</q-toolbar-title>
+        <q-space/>
+        <q-btn v-if="$q.screen.gt.xs"  class="bg-amber-1 text-amber-9" icon="mdi-logout-variant" size="12px"  label="ออกจากระบบ" flat  v-close-popup @click="doLogout" />
+        <q-btn v-else  class="bg-amber-1 text-amber-9" icon="mdi-logout-variant" flat  v-close-popup @click="doLogout" />
+			</q-toolbar>
+		</q-header>
     <!-- end header -->
-
-    <!-- drawer -->
-    <!-- <q-drawer
-      side="left"
-      bordered
-      class="text-white"
-      style="background: #273238"
-      v-model="drawerL"
-      show-if-above
-      :width="260"
-      :breakpoint="1023"
-      :mini="miniState"
-    >
-      <q-scroll-area class="fit">
-        <q-toolbar class="q-py-md" v-if="miniState !== true">
-          <q-toolbar-title v-if="$q.screen.gt.xs" shrink class="row items-center no-wrap">
-            <q-img
-              src="@/assets/logo.png"
-              spinner-color="white"
-              style="height: 40px; max-width: 40px"
-            />
-            <div class="row q-ml-md">
-              <div
-                style="color: #ffffff; letter-spacing: 1px"
-                class="text-body2 text-weight-bolder"
-              >
-                ระบบ<span class="text-primary">ทรัพยากรบุคคล</span>
-              </div>
-              <div class="text-caption text-white">&nbsp;กรุงเทพมหานคร</div>
-            </div>
-          </q-toolbar-title>
-        </q-toolbar>
-        <q-toolbar class="q-py-md" v-else>
-          <q-img
-            src="@/assets/logo.png"
-            spinner-color="white"
-            style="height: 32px; max-width: 32px"
-          />
-        </q-toolbar>
-        <q-separator inset color="grey-9" />
-        <q-list padding>
-          <div v-for="(menuItem, index) in menuList" :key="index">
-            <q-item
-              class="text-weight-medium menu"
-              active-class="text-primary active-item text-weight-bold menuActive"
-              :to="{ name: `${menuItem.path}` }"
-              :active="activeMenu(menuItem.path)"
-              clickable
-              v-ripple
-              dense
-              exact
-            >
-              <q-item-section avatar>
-                <q-avatar size="md" font-size="20px">
-                  <q-icon :name="menuItem.key === active ? menuItem.activeIcon : menuItem.icon" />
-                </q-avatar>
-              </q-item-section>
-
-              <q-item-section>
-                <q-item-label>{{ menuItem.label }}</q-item-label>
-              </q-item-section>
-            </q-item>
-          </div>
-        </q-list>
-      </q-scroll-area>
-    </q-drawer> -->
-
-    <q-page-container class="bg-grey-2">
-      <q-page style="padding: 0 2%">
+    <q-page-container class="row justify-center">
+      <q-page style="padding:1.5% 2%" class="col-xs-12 col-sm-11 col-md-11 col-lg-10">
         <router-view :key="$route.fullPath" />
       </q-page>
     </q-page-container>
@@ -279,35 +98,13 @@ const doLogout = () => {
 </template>
 
 <style>
-.menu {
-  padding-bottom: 5px;
-  padding-top: 5px;
-  border-radius: 0 100px 100px 0;
-  margin-right: 4%;
+.bgColor {
+	/* background-image: url("../assets/bg.png");
+	background-size: cover;
+	background-size: 100%; */
+  background: #F6F9FA;
 }
 
-.menuActive {
-  background: #212a2f;
-  border-radius: 0 100px 100px 0;
-  margin-right: 4%;
-}
-.menuSub .q-item {
-  border-radius: 0 100px 100px 0;
-  margin-right: 4%;
-}
-
-/* .menuSubAct {
-  background: #1e2529d9;
-} */
-
-.menuSubHover {
-  padding-left: 30%;
-  border-radius: 20px;
-}
-.q-expansion-item__content {
-  background: #212a2f;
-  padding: 5px 0px;
-}
 .tabNative {
   color: grey;
   padding-left: 8%;
@@ -321,12 +118,15 @@ const doLogout = () => {
 }
 
 .q-card {
-  box-shadow: 3px 3px 20px -10px rgba(151, 150, 150, 0.261) !important;
+  box-shadow: 3px 3px 20px -10px rgba(151, 150, 150, 0.261) ;
 }
 .q-card--bordered {
-  border: 1px solid #ededed;
+  border: 1px solid #92b4c847;
   box-shadow: none !important;
 }
+.q-stepper{
+  box-shadow: 3px 3px 20px -10px rgba(151, 150, 150, 0.261) ;
+}
 .q-menu {
   box-shadow: 3px 3px 10px 1px rgba(95, 95, 95, 0.15) !important;
 }
@@ -340,10 +140,9 @@ const doLogout = () => {
   border-radius: 5px;
 }
 
-.q-field--outlined .q-field__control:before {
+.q-field--outlined .q-field__control:before,.q-field .q-field__control:before{
   border-color: #c8d3db;
 }
-
 .q-field--outlined .q-icon {
   color: #7474747f;
 }
@@ -367,4 +166,19 @@ const doLogout = () => {
 ::-webkit-scrollbar-thumb:hover {
   background-color: #a8bbbf;
 }
+
+.header{
+  border-bottom: 1px solid #92b4c847;
+  height: 50px;
+}
+.textline1{
+  font-size: 0.90rem;
+  line-height:1.2rem !important;
+  font-weight: 500;
+}
+.textline2{
+  line-height:1rem !important;
+  font-weight: 400;
+  color: #96a9ad;
+}
 </style>