From 5cd1d1beb8bb8c663eb5910f23c3993858ad5f24 Mon Sep 17 00:00:00 2001
From: AnandaTon <ananda@frappet.com>
Date: Fri, 20 Oct 2023 14:38:40 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B9=80=E0=B8=9E=E0=B8=B4=E0=B9=88=E0=B8=A1?=
 =?UTF-8?q?=E0=B8=82=E0=B9=89=E0=B8=AD=E0=B8=84=E0=B8=A7=E0=B8=B2=E0=B8=A1?=
 =?UTF-8?q?=E0=B9=83=E0=B8=99=20ui?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../01_exam/components/Form/Information.vue   | 1058 ++++++++---------
 1 file changed, 529 insertions(+), 529 deletions(-)

diff --git a/src/modules/01_exam/components/Form/Information.vue b/src/modules/01_exam/components/Form/Information.vue
index 172ddef..08e0e9e 100644
--- a/src/modules/01_exam/components/Form/Information.vue
+++ b/src/modules/01_exam/components/Form/Information.vue
@@ -1,53 +1,53 @@
 <!-- card ข้อมูลส่วนตัว -->
 <template>
-	<q-form ref="myform" class="col-12 row justify-center">
-		<div class="row col-xs-12 col-sm-12 col-md-9 items-center q-col-gutter-x-sm q-col-gutter-y-xs">
-			<div class="col-12">
-				<HeaderTop
-					v-model:edit="edit"
-					header="ข้อมูลส่วนตัว"
-					icon="mdi-account"
-					:addData="true"
-					:editOnly="false"
-					:editData="false"
-				/>
-			</div>
-			<div class="col-xs-12 col-sm-3 col-md-4">
-				<q-field
-					:outlined="status == 'register' || status == 'rejectRegister'"
-					bottom-slots
-					:stack-label="defaultInformation.cardid != null"
-					label="เลขประจำตัวประชาชน"
-					dense
-					:readonly="!(status == 'register' || status == 'rejectRegister')"
-					:class="getClass(status == 'register' || status == 'rejectRegister')"
-					:borderless="!(status == 'register' || status == 'rejectRegister')"
-					:rules="[
-						(val) =>
-							(val != null && val.length == 13) || `${'กรุณากรอกเลขประจำตัวประชาชนให้ถูกต้อง'}`,
-						(val) => /^[0-9]*$/.test(val) || `${'กรุณากรอกเลขประจำตัวประชาชนให้ถูกต้อง'}`
-					]"
-					v-model="defaultInformation.cardid"
-				>
-					<template v-slot:prepend>
-						<q-btn
-							round
-							flat
-							dense
-							size="md"
-							@click="idDialog"
-							v-if="status == 'register' || status == 'rejectRegister'"
-						>
-							<q-icon name="mdi-pencil-outline" color="primary" />
-						</q-btn>
-					</template>
-					<template v-slot:control>
-						<div class="self-center full-width no-outline" tabindex="0">
-							{{ defaultInformation.cardid }}
-						</div>
-					</template>
-				</q-field>
-				<!-- <q-input
+  <q-form ref="myform" class="col-12 row justify-center">
+    <div class="row col-xs-12 col-sm-12 col-md-9 items-center q-col-gutter-x-sm q-col-gutter-y-xs">
+      <div class="col-12">
+        <HeaderTop
+          v-model:edit="edit"
+          header="ข้อมูลส่วนตัว"
+          icon="mdi-account"
+          :addData="true"
+          :editOnly="false"
+          :editData="false"
+        />
+      </div>
+      <div class="col-xs-12 col-sm-3 col-md-4">
+        <q-field
+          :outlined="status == 'register' || status == 'rejectRegister'"
+          bottom-slots
+          :stack-label="defaultInformation.cardid != null"
+          label="เลขประจำตัวประชาชน"
+          dense
+          :readonly="!(status == 'register' || status == 'rejectRegister')"
+          :class="getClass(status == 'register' || status == 'rejectRegister')"
+          :borderless="!(status == 'register' || status == 'rejectRegister')"
+          :rules="[
+            (val) =>
+              (val != null && val.length == 13) || `${'กรุณากรอกเลขประจำตัวประชาชนให้ถูกต้อง'}`,
+            (val) => /^[0-9]*$/.test(val) || `${'กรุณากรอกเลขประจำตัวประชาชนให้ถูกต้อง'}`
+          ]"
+          v-model="defaultInformation.cardid"
+        >
+          <template v-slot:prepend>
+            <q-btn
+              round
+              flat
+              dense
+              size="md"
+              @click="idDialog"
+              v-if="status == 'register' || status == 'rejectRegister'"
+            >
+              <q-icon name="mdi-pencil-outline" color="primary" />
+            </q-btn>
+          </template>
+          <template v-slot:control>
+            <div class="self-center full-width no-outline" tabindex="0">
+              {{ defaultInformation.cardid }}
+            </div>
+          </template>
+        </q-field>
+        <!-- <q-input
           :class="getClass(status == 'register' || status == 'rejectRegister')"
           :outlined="status == 'register' || status == 'rejectRegister'"
           dense
@@ -65,173 +65,173 @@
           ]"
           label="เลขบัตรประจำตัวประชาชน"
         /> -->
-			</div>
-			<div class="col-xs-12 col-sm-3 col-md-2">
-				<q-select
-					:class="getClass(status == 'register' || status == 'rejectRegister')"
-					:readonly="!(status == 'register' || status == 'rejectRegister')"
-					:borderless="!(status == 'register' || status == 'rejectRegister')"
-					:rules="[(val) => !!val || `${'กรุณาเลือก คำนำหน้า'}`]"
-					:outlined="status == 'register' || status == 'rejectRegister'"
-					dense
-					lazy-rules
-					v-model="defaultInformation.prefixId"
-					emit-value
-					map-options
-					option-label="name"
-					:options="prefixOptions"
-					option-value="id"
-					:label="`${'คำนำหน้า'}`"
-					@update:model-value="(value) => selectPrefix()"
-				/>
-			</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="defaultInformation.firstname"
-					: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="defaultInformation.lastname"
-					:rules="[(val) => !!val || `${'กรุณากรอก นามสกุล'}`]"
-					:label="`${'นามสกุล'}`"
-				/>
-			</div>
-			<div class="col-xs-12 col-sm-3 col-md-3">
-				<!-- :borderless="!false" -->
-				<q-select
-					:class="getClass(status == 'register' || status == 'rejectRegister')"
-					dense
-					:outlined="status == 'register' || status == 'rejectRegister'"
-					:readonly="!(status == 'register' || status == 'rejectRegister')"
-					:borderless="!(status == 'register' || status == 'rejectRegister')"
-					lazy-rules
-					v-model="defaultInformation.nationality"
-					:options="opNat"
-					:rules="[(val) => !!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="defaultInformation.religionId"
-					emit-value
-					map-options
-					option-label="name"
-					:options="religionOptions"
-					option-value="id"
-					:label="`${'ศาสนา'}`"
-				/>
-			</div>
-			<div class="col-xs-12 col-sm-3 col-md-3">
-				<datepicker
-					v-model="defaultInformation.birthDate"
-					:locale="'th'"
-					autoApply
-					:enableTimePicker="false"
-					week-start="0"
-					:max-date="new Date()"
-					:disabled="!(status == 'register' || status == 'rejectRegister')"
-					@update:modelValue="selectBirthDate"
-				>
-					<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="
-								defaultInformation.birthDate == null
-									? null
-									: date2Thai(defaultInformation.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-input
-					:class="getClass(status == 'register' || status == 'rejectRegister')"
-					dense
-					lazy-rules
-					bottom-slots
-					:outlined="status == 'register' || status == 'rejectRegister'"
-					:readonly="!(status == 'rejectRegister')"
-					:borderless="!(status == 'register' || status == 'rejectRegister')"
-					:model-value="
-						defaultInformation.birthDate == null ? null : calAge(defaultInformation.birthDate)
-					"
-					:label="`${'อายุ'}`"
-				/>
-			</div>
-			<div class="col-xs-12 col-sm-3 col-md-3">
-				<q-input
-					:outlined="status == 'register' || status == 'rejectRegister'"
-					dense
-					:counter="status == 'register' || status == 'rejectRegister' ? true : false"
-					lazy-rules
-					type="tel"
-					mask="##########"
-					maxlength="10"
-					:class="getClass(status == 'register' || status == 'rejectRegister')"
-					:readonly="!(status == 'register' || status == 'rejectRegister')"
-					:borderless="!(status == 'register' || status == 'rejectRegister')"
-					v-model="defaultInformation.tel"
-					:label="`${'โทรศัพท์'}`"
-					:rules="[
-						(val) => !!val || '* กรุณากรอกข้อมูลหมายเลขโทรศัพท์',
-						(val) =>
-							(val.length >= 9 && val.length <= 10 && val.startsWith('0')) ||
-							'กรุณากรอกข้อมูลหมายเลขโทรศัพท์ให้ถูกต้อง'
-					]"
-				/>
-			</div>
-			<!-- <div class="col-xs-12 col-sm-3 col-md-3">
+      </div>
+      <div class="col-xs-12 col-sm-3 col-md-2">
+        <q-select
+          :class="getClass(status == 'register' || status == 'rejectRegister')"
+          :readonly="!(status == 'register' || status == 'rejectRegister')"
+          :borderless="!(status == 'register' || status == 'rejectRegister')"
+          :rules="[(val) => !!val || `${'กรุณาเลือก คำนำหน้า'}`]"
+          :outlined="status == 'register' || status == 'rejectRegister'"
+          dense
+          lazy-rules
+          v-model="defaultInformation.prefixId"
+          emit-value
+          map-options
+          option-label="name"
+          :options="prefixOptions"
+          option-value="id"
+          :label="`${'คำนำหน้า'}`"
+          @update:model-value="(value) => selectPrefix()"
+        />
+      </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="defaultInformation.firstname"
+          :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="defaultInformation.lastname"
+          :rules="[(val) => !!val || `${'กรุณากรอก นามสกุล'}`]"
+          :label="`${'นามสกุล (ภาษาไทย)'}`"
+        />
+      </div>
+      <div class="col-xs-12 col-sm-3 col-md-3">
+        <!-- :borderless="!false" -->
+        <q-select
+          :class="getClass(status == 'register' || status == 'rejectRegister')"
+          dense
+          :outlined="status == 'register' || status == 'rejectRegister'"
+          :readonly="!(status == 'register' || status == 'rejectRegister')"
+          :borderless="!(status == 'register' || status == 'rejectRegister')"
+          lazy-rules
+          v-model="defaultInformation.nationality"
+          :options="opNat"
+          :rules="[(val) => !!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="defaultInformation.religionId"
+          emit-value
+          map-options
+          option-label="name"
+          :options="religionOptions"
+          option-value="id"
+          :label="`${'ศาสนา'}`"
+        />
+      </div>
+      <div class="col-xs-12 col-sm-3 col-md-3">
+        <datepicker
+          v-model="defaultInformation.birthDate"
+          :locale="'th'"
+          autoApply
+          :enableTimePicker="false"
+          week-start="0"
+          :max-date="new Date()"
+          :disabled="!(status == 'register' || status == 'rejectRegister')"
+          @update:modelValue="selectBirthDate"
+        >
+          <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="
+                defaultInformation.birthDate == null
+                  ? null
+                  : date2Thai(defaultInformation.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-input
+          :class="getClass(status == 'register' || status == 'rejectRegister')"
+          dense
+          lazy-rules
+          bottom-slots
+          :outlined="status == 'register' || status == 'rejectRegister'"
+          :readonly="!(status == 'rejectRegister')"
+          :borderless="!(status == 'register' || status == 'rejectRegister')"
+          :model-value="
+            defaultInformation.birthDate == null ? null : calAge(defaultInformation.birthDate)
+          "
+          :label="`${'อายุ'}`"
+        />
+      </div>
+      <div class="col-xs-12 col-sm-3 col-md-3">
+        <q-input
+          :outlined="status == 'register' || status == 'rejectRegister'"
+          dense
+          :counter="status == 'register' || status == 'rejectRegister' ? true : false"
+          lazy-rules
+          type="tel"
+          mask="##########"
+          maxlength="10"
+          :class="getClass(status == 'register' || status == 'rejectRegister')"
+          :readonly="!(status == 'register' || status == 'rejectRegister')"
+          :borderless="!(status == 'register' || status == 'rejectRegister')"
+          v-model="defaultInformation.tel"
+          :label="`${'โทรศัพท์'}`"
+          :rules="[
+            (val) => !!val || '* กรุณากรอกข้อมูลหมายเลขโทรศัพท์',
+            (val) =>
+              (val.length >= 9 && val.length <= 10 && val.startsWith('0')) ||
+              'กรุณากรอกข้อมูลหมายเลขโทรศัพท์ให้ถูกต้อง'
+          ]"
+        />
+      </div>
+      <!-- <div class="col-xs-12 col-sm-3 col-md-3">
         <q-input
           :outlined="status == 'register' || status == 'rejectRegister'"
           dense
@@ -251,55 +251,55 @@
           :label="`${'โทรศัพท์มือถือ'}`"
         />
       </div> -->
-			<div class="col-xs-12 col-sm-3 col-md-3">
-				<!-- style="padding: 0 12px" -->
-				<q-input
-					:class="getClass(status == 'register' || status == 'rejectRegister')"
-					dense
-					lazy-rules
-					bottom-slots
-					:outlined="status == 'register' || status == 'rejectRegister'"
-					:readonly="!(status == 'rejectRegister')"
-					:borderless="!(status == 'register' || status == 'rejectRegister')"
-					v-model="defaultInformation.email"
-					label="E-mail address"
-				/>
-			</div>
-		</div>
-		<div class="row col-xs-12 col-sm-6 col-md-3 justify-end">
-			<q-card bordered class="col-11 q-pa-sm justify-center text-center q-mt-sm">
-				<div class="text-weight-medium q-py-xs">อัปโหลดรูปถ่าย</div>
-				<div class="containerimage row justify-center col-xs-6 col-sm-10 col-md-12">
-					<label for="file-upload" class="col-12 row justify-center">
-						<q-img v-if="img == ''" src="@/assets/avatar_user.jpg" class="col-6">
-							<div
-								class="overlay"
-								v-if="status == 'register' || status == 'rejectRegister' || status == 'done'"
-							>
-								<q-icon name="mdi-camera" />
-								<br />อัปเดต
-							</div>
-						</q-img>
-						<q-img v-else :src="img" class="col-12">
-							<div
-								class="overlay"
-								v-if="status == 'register' || status == 'rejectRegister' || status == 'done'"
-							>
-								<q-icon name="mdi-camera" />
-								<br />อัปเดต
-							</div>
-						</q-img>
-					</label>
-					<input id="file-upload" type="file" accept="image/*" @change="uploadImage" />
-				</div>
-				<div class="text-caption q-pt-sm text-grey-7">
-					<div>รูปถ่ายหน้าตรง ชุดสุภาพ ไม่สวมหมวก</div>
-					<div>ไม่ใส่แว่นตาดำ ไม่มีลวดลายใด ๆ บนรูป</div>
-					<div>ไฟล์ JPG ขนาด 40 -100 KB</div>
-				</div>
-			</q-card>
-		</div>
-		<!-- <div class="col-xs-12 col-sm-9 col-md-12">
+      <div class="col-xs-12 col-sm-3 col-md-3">
+        <!-- style="padding: 0 12px" -->
+        <q-input
+          :class="getClass(status == 'register' || status == 'rejectRegister')"
+          dense
+          lazy-rules
+          bottom-slots
+          :outlined="status == 'register' || status == 'rejectRegister'"
+          :readonly="!(status == 'rejectRegister')"
+          :borderless="!(status == 'register' || status == 'rejectRegister')"
+          v-model="defaultInformation.email"
+          label="E-mail address"
+        />
+      </div>
+    </div>
+    <div class="row col-xs-12 col-sm-6 col-md-3 justify-end">
+      <q-card bordered class="col-11 q-pa-sm justify-center text-center q-mt-sm">
+        <div class="text-weight-medium q-py-xs">อัปโหลดรูปถ่าย</div>
+        <div class="containerimage row justify-center col-xs-6 col-sm-10 col-md-12">
+          <label for="file-upload" class="col-12 row justify-center">
+            <q-img v-if="img == ''" src="@/assets/avatar_user.jpg" class="col-6">
+              <div
+                class="overlay"
+                v-if="status == 'register' || status == 'rejectRegister' || status == 'done'"
+              >
+                <q-icon name="mdi-camera" />
+                <br />อัปเดต
+              </div>
+            </q-img>
+            <q-img v-else :src="img" class="col-12">
+              <div
+                class="overlay"
+                v-if="status == 'register' || status == 'rejectRegister' || status == 'done'"
+              >
+                <q-icon name="mdi-camera" />
+                <br />อัปเดต
+              </div>
+            </q-img>
+          </label>
+          <input id="file-upload" type="file" accept="image/*" @change="uploadImage" />
+        </div>
+        <div class="text-caption q-pt-sm text-grey-7">
+          <div>รูปถ่ายหน้าตรง ชุดสุภาพ ไม่สวมหมวก</div>
+          <div>ไม่ใส่แว่นตาดำ ไม่มีลวดลายใด ๆ บนรูป</div>
+          <div>ไฟล์ JPG ขนาด 40 -100 KB</div>
+        </div>
+      </q-card>
+    </div>
+    <!-- <div class="col-xs-12 col-sm-9 col-md-12">
       <q-input
         :class="getClass(status == 'register' || status == 'rejectRegister')"
         :outlined="status == 'register' || status == 'rejectRegister'"
@@ -312,65 +312,65 @@
         type="textarea"
       />
     </div> -->
-	</q-form>
+  </q-form>
 
-	<!--  dialog กรอกเลขบัตร -->
-	<q-dialog v-model="idModel">
-		<q-card style="width: 350px">
-			<q-card-section class="bg-grey-2 q-py-sm">
-				<div class="text-subtitle1 text-weight-medium">กรอกเลขประจำตัวประชาชน</div>
-			</q-card-section>
-			<q-separator color="grey-4" />
-			<q-card-section>
-				<q-form ref="myformcitizen">
-					<q-input
-						:class="getClass(true)"
-						:outlined="true"
-						dense
-						type="tel"
-						mask="#############"
-						:counter="true ? true : false"
-						lazy-rules
-						:readonly="!true"
-						:borderless="!true"
-						v-model="cardid1"
-						maxlength="13"
-						:rules="[
-							(val) => val.length == 13 || `${'กรุณากรอกเลขประจำตัวประชาชนให้ถูกต้อง'}`,
-							(val) => /^[0-9]*$/.test(val) || `${'กรุณากรอกเลขประจำตัวประชาชนให้ถูกต้อง'}`
-						]"
-						label="เลขบัตรประจำตัวประชาชน"
-						class="q-mb-sm"
-					/>
-					<q-input
-						:disable="cardid1 == null || cardid1.length < 13"
-						:class="getClass(true)"
-						:outlined="true"
-						dense
-						type="tel"
-						mask="#############"
-						:counter="true ? true : false"
-						lazy-rules
-						:readonly="!true"
-						:borderless="!true"
-						v-model="cardid2"
-						maxlength="13"
-						:rules="[
-							(val) => val.length == 13 || `${'กรุณากรอกเลขประจำตัวประชาชนให้ถูกต้อง'}`,
-							(val) => val == cardid1 || `${'เลขประจำตัวประชาชนไม่ตรงกัน'}`,
-							(val) => /^[0-9]*$/.test(val) || `${'กรุณากรอกเลขประจำตัวประชาชนให้ถูกต้อง'}`
-						]"
-						label="ยืนยันเลขบัตรประจำตัวประชาชน"
-					/>
-				</q-form>
-			</q-card-section>
-			<q-separator color="grey-4" />
-			<q-card-actions align="right" class="bg-white text-teal">
-				<q-btn flat label="ยกเลิก" color="red" v-close-popup />
-				<q-btn flat label="ตกลง" @click="checkCardId" class="bg-teal-1" />
-			</q-card-actions>
-		</q-card>
-	</q-dialog>
+  <!--  dialog กรอกเลขบัตร -->
+  <q-dialog v-model="idModel">
+    <q-card style="width: 350px">
+      <q-card-section class="bg-grey-2 q-py-sm">
+        <div class="text-subtitle1 text-weight-medium">กรอกเลขประจำตัวประชาชน</div>
+      </q-card-section>
+      <q-separator color="grey-4" />
+      <q-card-section>
+        <q-form ref="myformcitizen">
+          <q-input
+            :class="getClass(true)"
+            :outlined="true"
+            dense
+            type="tel"
+            mask="#############"
+            :counter="true ? true : false"
+            lazy-rules
+            :readonly="!true"
+            :borderless="!true"
+            v-model="cardid1"
+            maxlength="13"
+            :rules="[
+              (val) => val.length == 13 || `${'กรุณากรอกเลขประจำตัวประชาชนให้ถูกต้อง'}`,
+              (val) => /^[0-9]*$/.test(val) || `${'กรุณากรอกเลขประจำตัวประชาชนให้ถูกต้อง'}`
+            ]"
+            label="เลขบัตรประจำตัวประชาชน"
+            class="q-mb-sm"
+          />
+          <q-input
+            :disable="cardid1 == null || cardid1.length < 13"
+            :class="getClass(true)"
+            :outlined="true"
+            dense
+            type="tel"
+            mask="#############"
+            :counter="true ? true : false"
+            lazy-rules
+            :readonly="!true"
+            :borderless="!true"
+            v-model="cardid2"
+            maxlength="13"
+            :rules="[
+              (val) => val.length == 13 || `${'กรุณากรอกเลขประจำตัวประชาชนให้ถูกต้อง'}`,
+              (val) => val == cardid1 || `${'เลขประจำตัวประชาชนไม่ตรงกัน'}`,
+              (val) => /^[0-9]*$/.test(val) || `${'กรุณากรอกเลขประจำตัวประชาชนให้ถูกต้อง'}`
+            ]"
+            label="ยืนยันเลขบัตรประจำตัวประชาชน"
+          />
+        </q-form>
+      </q-card-section>
+      <q-separator color="grey-4" />
+      <q-card-actions align="right" class="bg-white text-teal">
+        <q-btn flat label="ยกเลิก" color="red" v-close-popup />
+        <q-btn flat label="ตกลง" @click="checkCardId" class="bg-teal-1" />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
 </template>
 <script setup lang="ts">
 import { ref, onMounted, watch } from 'vue'
@@ -387,26 +387,26 @@ import { defaultInformation, changeData } from '@/modules/01_exam/interface/inde
 import HeaderTop from '@/components/top.vue'
 
 const props = defineProps({
-	prefixOptions: {
-		type: Array as PropType<DataOption[]>,
-		required: true
-	},
-	religionOptions: {
-		type: Array as PropType<DataOption[]>,
-		required: true
-	},
-	provinceOptions: {
-		type: Array as PropType<DataOption[]>,
-		required: true
-	},
-	status: {
-		type: String,
-		required: true
-	},
-	form: {
-		type: Object,
-		required: true
-	}
+  prefixOptions: {
+    type: Array as PropType<DataOption[]>,
+    required: true
+  },
+  religionOptions: {
+    type: Array as PropType<DataOption[]>,
+    required: true
+  },
+  provinceOptions: {
+    type: Array as PropType<DataOption[]>,
+    required: true
+  },
+  status: {
+    type: String,
+    required: true
+  },
+  form: {
+    type: Object,
+    required: true
+  }
 })
 const emit = defineEmits(['update:form'])
 
@@ -432,255 +432,255 @@ const opNat = ref(['ไทย'])
 const idModel = ref<boolean>(false)
 
 watch(myform, async (count: any, prevCount: any) => {
-	emit('update:form', count)
+  emit('update:form', count)
 })
 
 watch(defaultInformation, async (count: Information, prevCount: Information) => {
-	await changeData('information', count)
+  await changeData('information', count)
 })
 
 onMounted(async () => {
-	await fetchData()
-	await fetchImgData()
-	if (defaultInformation.value.provinceId != null)
-		await fetchDistrict(defaultInformation.value.provinceId)
-	candidateCheck()
+  await fetchData()
+  await fetchImgData()
+  if (defaultInformation.value.provinceId != null)
+    await fetchDistrict(defaultInformation.value.provinceId)
+  candidateCheck()
 })
 
 const fetchData = async () => {
-	loaderPage(true)
-	await http
-		.get(config.API.candidateInformation(examId.value, positionId.value))
-		.then((res) => {
-			const data = res.data.result
-			defaultInformation.value.prefixId = data.prefixId
-			selectPrefix()
-			if (data.lastName == null || data.lastName == '') {
-				data.lastName = keycloak.tokenParsed == null ? '' : keycloak.tokenParsed.family_name
-			}
-			if (data.firstName == null || data.firstName == '') {
-				data.firstName = keycloak.tokenParsed == null ? '' : keycloak.tokenParsed.given_name
-			}
-			if (data.email == null || data.email == '') {
-				data.email = keycloak.tokenParsed == null ? '' : keycloak.tokenParsed.email
-			}
-			defaultInformation.value.lastname = data.lastName
-			defaultInformation.value.provinceId = data.citizenProvinceId
-			defaultInformation.value.districtId = data.citizenDistrictId
-			defaultInformation.value.birthDate =
-				data.dateOfBirth == null ? null : new Date(data.dateOfBirth)
-			defaultInformation.value.cardIdDate =
-				data.citizenDate == null ? null : new Date(data.citizenDate)
-			defaultInformation.value.cardid = data.citizenId
-			defaultInformation.value.firstname = data.firstName
-			defaultInformation.value.religionId = data.religionId
-			defaultInformation.value.nationality = data.nationality
-			defaultInformation.value.email = data.email
-			defaultInformation.value.phone = data.mobilePhone
-			defaultInformation.value.tel = data.telephone
-			defaultInformation.value.knowledge = data.knowledge
-		})
-		.catch(() => {
-			defaultInformation.value.email =
-				keycloak.tokenParsed == null ? '' : keycloak.tokenParsed.email
-			defaultInformation.value.firstname =
-				keycloak.tokenParsed == null ? '' : keycloak.tokenParsed.given_name
-			defaultInformation.value.lastname =
-				keycloak.tokenParsed == null ? '' : keycloak.tokenParsed.family_name
-		})
-		.finally(() => {
-			loaderPage(false)
-		})
+  loaderPage(true)
+  await http
+    .get(config.API.candidateInformation(examId.value, positionId.value))
+    .then((res) => {
+      const data = res.data.result
+      defaultInformation.value.prefixId = data.prefixId
+      selectPrefix()
+      if (data.lastName == null || data.lastName == '') {
+        data.lastName = keycloak.tokenParsed == null ? '' : keycloak.tokenParsed.family_name
+      }
+      if (data.firstName == null || data.firstName == '') {
+        data.firstName = keycloak.tokenParsed == null ? '' : keycloak.tokenParsed.given_name
+      }
+      if (data.email == null || data.email == '') {
+        data.email = keycloak.tokenParsed == null ? '' : keycloak.tokenParsed.email
+      }
+      defaultInformation.value.lastname = data.lastName
+      defaultInformation.value.provinceId = data.citizenProvinceId
+      defaultInformation.value.districtId = data.citizenDistrictId
+      defaultInformation.value.birthDate =
+        data.dateOfBirth == null ? null : new Date(data.dateOfBirth)
+      defaultInformation.value.cardIdDate =
+        data.citizenDate == null ? null : new Date(data.citizenDate)
+      defaultInformation.value.cardid = data.citizenId
+      defaultInformation.value.firstname = data.firstName
+      defaultInformation.value.religionId = data.religionId
+      defaultInformation.value.nationality = data.nationality
+      defaultInformation.value.email = data.email
+      defaultInformation.value.phone = data.mobilePhone
+      defaultInformation.value.tel = data.telephone
+      defaultInformation.value.knowledge = data.knowledge
+    })
+    .catch(() => {
+      defaultInformation.value.email =
+        keycloak.tokenParsed == null ? '' : keycloak.tokenParsed.email
+      defaultInformation.value.firstname =
+        keycloak.tokenParsed == null ? '' : keycloak.tokenParsed.given_name
+      defaultInformation.value.lastname =
+        keycloak.tokenParsed == null ? '' : keycloak.tokenParsed.family_name
+    })
+    .finally(() => {
+      loaderPage(false)
+    })
 }
 
 const checkCardId = async () => {
-	myformcitizen.value.validate().then(async (result: boolean) => {
-		if (result) {
-			idModel.value = false
-			await http
-				.put(config.API.candidateCheckCitizen(examId.value, positionId.value), {
-					citizenId: cardid2.value
-				})
-				.then((res) => {
-					success
+  myformcitizen.value.validate().then(async (result: boolean) => {
+    if (result) {
+      idModel.value = false
+      await http
+        .put(config.API.candidateCheckCitizen(examId.value, positionId.value), {
+          citizenId: cardid2.value
+        })
+        .then((res) => {
+          success
 
-					defaultInformation.value.cardid = cardid2.value
-				})
-				.catch((e) => {
-					messageError($q, e)
-				})
-				.finally(async () => {})
-			return
-		} else {
-			notifyError($q, 'กรอกเลขบัตรประชาชนไม่ถูกต้อง')
-		}
-	})
+          defaultInformation.value.cardid = cardid2.value
+        })
+        .catch((e) => {
+          messageError($q, e)
+        })
+        .finally(async () => {})
+      return
+    } else {
+      notifyError($q, 'กรอกเลขบัตรประชาชนไม่ถูกต้อง')
+    }
+  })
 }
 
 const selectPrefix = async () => {
-	defaultInformation.value.prefix =
-		props.prefixOptions.filter((x) => x.id == defaultInformation.value.prefixId).length == 0
-			? ''
-			: props.prefixOptions.filter((x) => x.id == defaultInformation.value.prefixId)[0].name
+  defaultInformation.value.prefix =
+    props.prefixOptions.filter((x) => x.id == defaultInformation.value.prefixId).length == 0
+      ? ''
+      : props.prefixOptions.filter((x) => x.id == defaultInformation.value.prefixId)[0].name
 }
 const selectBirthDate = async () => {
-	if (defaultInformation.value.birthDate != null) {
-		if (calAgeYear(defaultInformation.value.birthDate, registerEndDate.value) < 18) {
-			defaultInformation.value.birthDate = null
-			notifyError($q, 'อายุไม่ถึง18')
-		} else if (calAgeYear(defaultInformation.value.birthDate, registerEndDate.value) > 60) {
-			defaultInformation.value.birthDate = null
-			notifyError($q, 'อายุเกิน60')
-		}
-	}
+  if (defaultInformation.value.birthDate != null) {
+    if (calAgeYear(defaultInformation.value.birthDate, registerEndDate.value) < 18) {
+      defaultInformation.value.birthDate = null
+      notifyError($q, 'อายุไม่ถึง18')
+    } else if (calAgeYear(defaultInformation.value.birthDate, registerEndDate.value) > 60) {
+      defaultInformation.value.birthDate = null
+      notifyError($q, 'อายุเกิน60')
+    }
+  }
 }
 
 const candidateCheck = async () => {
-	loaderPage(true)
-	await http
-		.get(config.API.candidateCheckCreate(examId.value, positionId.value))
-		.then(async (res) => {
-			const data = res.data.result
-			registerEndDate.value =
-				data.registerEndDate == null ? new Date() : new Date(data.registerEndDate)
-		})
-		.catch((e) => {
-			messageError($q, e)
-		})
-		.finally(() => {
-			loaderPage(false)
-		})
+  loaderPage(true)
+  await http
+    .get(config.API.candidateCheckCreate(examId.value, positionId.value))
+    .then(async (res) => {
+      const data = res.data.result
+      registerEndDate.value =
+        data.registerEndDate == null ? new Date() : new Date(data.registerEndDate)
+    })
+    .catch((e) => {
+      messageError($q, e)
+    })
+    .finally(() => {
+      loaderPage(false)
+    })
 }
 
 const fetchImgData = async () => {
-	loaderPage(true)
-	await http
-		.get(config.API.candidateProfile(examId.value, positionId.value))
-		.then((res) => {
-			const data = res.data.result
-			img.value = data
-			defaultInformation.value.profileImg = data
-		})
-		.catch((e) => {
-			//   messageError($q, e)
-		})
-		.finally(() => {
-			loaderPage(false)
-		})
+  loaderPage(true)
+  await http
+    .get(config.API.candidateProfile(examId.value, positionId.value))
+    .then((res) => {
+      const data = res.data.result
+      img.value = data
+      defaultInformation.value.profileImg = data
+    })
+    .catch((e) => {
+      //   messageError($q, e)
+    })
+    .finally(() => {
+      loaderPage(false)
+    })
 }
 
 const uploadImage = async (e: any) => {
-	let input = e.target.files
-	if (input.length > 0) {
-		const formData = new FormData()
-		formData.append('', input[0])
-		loaderPage(true)
-		await http
-			.put(config.API.candidateProfile(examId.value, positionId.value), formData)
-			.then((res) => {
-				success($q, 'อัพโหลดรูปสำเร็จ')
-			})
-			.catch((e) => {
-				messageError($q, e)
-			})
-			.finally(async () => {
-				await fetchImgData()
-				fileProfile.value = []
-			})
-		return
-	}
+  let input = e.target.files
+  if (input.length > 0) {
+    const formData = new FormData()
+    formData.append('', input[0])
+    loaderPage(true)
+    await http
+      .put(config.API.candidateProfile(examId.value, positionId.value), formData)
+      .then((res) => {
+        success($q, 'อัพโหลดรูปสำเร็จ')
+      })
+      .catch((e) => {
+        messageError($q, e)
+      })
+      .finally(async () => {
+        await fetchImgData()
+        fileProfile.value = []
+      })
+    return
+  }
 }
 
 const selectProvince = async (val: string) => {
-	defaultInformation.value.districtId = ''
-	myform.value.resetValidation()
-	await fetchDistrict(val)
+  defaultInformation.value.districtId = ''
+  myform.value.resetValidation()
+  await fetchDistrict(val)
 }
 
 const fetchDistrict = async (id: string) => {
-	loaderPage(true)
-	await http
-		.get(config.API.listDistrict(id))
-		.then((res) => {
-			const data = res.data.result
-			let option: DataOption[] = []
-			data.map((r: DataOption) => {
-				option.push({ id: r.id.toString(), name: r.name.toString() })
-			})
-			districtOptions.value = option
-		})
-		.catch((e) => {
-			messageError($q, e)
-		})
-		.finally(() => {
-			loaderPage(false)
-		})
+  loaderPage(true)
+  await http
+    .get(config.API.listDistrict(id))
+    .then((res) => {
+      const data = res.data.result
+      let option: DataOption[] = []
+      data.map((r: DataOption) => {
+        option.push({ id: r.id.toString(), name: r.name.toString() })
+      })
+      districtOptions.value = option
+    })
+    .catch((e) => {
+      messageError($q, e)
+    })
+    .finally(() => {
+      loaderPage(false)
+    })
 }
 
 const getClass = (val: boolean) => {
-	return {
-		'full-width inputgreen cursor-pointer': val,
-		'full-width cursor-pointer': !val
-	}
+  return {
+    'full-width inputgreen cursor-pointer': val,
+    'full-width cursor-pointer': !val
+  }
 }
 
 const idDialog = () => {
-	idModel.value = true
-	cardid2.value = defaultInformation.value.cardid
-	cardid1.value = defaultInformation.value.cardid
+  idModel.value = true
+  cardid2.value = defaultInformation.value.cardid
+  cardid1.value = defaultInformation.value.cardid
 }
 </script>
 
 <style>
 .modalfix {
-	position: fixed !important;
+  position: fixed !important;
 }
 .containerimage {
-	position: relative;
-	width: 100%;
+  position: relative;
+  width: 100%;
 }
 
 .q-img {
-	display: block;
-	width: 100%;
-	max-height: 170px;
-	padding: 1%;
-	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.097);
+  display: block;
+  width: 100%;
+  max-height: 170px;
+  padding: 1%;
+  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.097);
 }
 
 .overlay {
-	position: absolute;
-	bottom: 0;
-	background: rgb(0, 0, 0);
-	background: rgba(0, 0, 0, 0.7);
-	color: #f1f1f1;
-	transition: 0.5s ease;
-	width: 100%;
-	height: 70px;
-	opacity: 0;
-	color: white;
-	text-align: center;
-	cursor: pointer;
-	padding: 5% 0 5% 0;
+  position: absolute;
+  bottom: 0;
+  background: rgb(0, 0, 0);
+  background: rgba(0, 0, 0, 0.7);
+  color: #f1f1f1;
+  transition: 0.5s ease;
+  width: 100%;
+  height: 70px;
+  opacity: 0;
+  color: white;
+  text-align: center;
+  cursor: pointer;
+  padding: 5% 0 5% 0;
 }
 
 .containerimage:hover .overlay {
-	opacity: 1;
+  opacity: 1;
 }
 
 .q-field__bottom {
-	padding: 5px 10px 0px 0px;
+  padding: 5px 10px 0px 0px;
 }
 
 input[type='file'] {
-	display: none;
+  display: none;
 }
 .custom-file-upload {
-	border: 1px solid #ccc;
-	display: inline-block;
-	padding: 6px 12px;
-	cursor: pointer;
+  border: 1px solid #ccc;
+  display: inline-block;
+  padding: 6px 12px;
+  cursor: pointer;
 }
 </style>