From 9451b2999250e8e4251e5cdb260bee46de8fc2ae Mon Sep 17 00:00:00 2001
From: Suphonchai Phoonsawat <suphonchai.ph@gmail.com>
Date: Sun, 15 Oct 2023 16:44:49 +0700
Subject: [PATCH 1/3] =?UTF-8?q?=E0=B9=80=E0=B8=9B=E0=B8=A5=E0=B8=B5?=
 =?UTF-8?q?=E0=B9=88=E0=B8=A2=E0=B8=99=E0=B8=81=E0=B8=B2=E0=B8=A3=E0=B8=95?=
 =?UTF-8?q?=E0=B8=A3=E0=B8=A7=E0=B8=88=E0=B8=AA=E0=B8=AD=E0=B8=9A=E0=B9=80?=
 =?UTF-8?q?=E0=B8=9A=E0=B8=AD=E0=B8=A3=E0=B9=8C=E0=B9=82=E0=B8=97=E0=B8=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../01_exam/components/Form/Career.vue        | 1152 ++++++++---------
 .../01_exam/components/Form/Contact.vue       |  255 ++--
 .../01_exam/components/Form/Information.vue   | 1056 +++++++--------
 .../01_exam/components/Form/Occupation.vue    |  346 ++---
 4 files changed, 1405 insertions(+), 1404 deletions(-)

diff --git a/src/modules/01_exam/components/Form/Career.vue b/src/modules/01_exam/components/Form/Career.vue
index 41db96f..fd2967c 100644
--- a/src/modules/01_exam/components/Form/Career.vue
+++ b/src/modules/01_exam/components/Form/Career.vue
@@ -1,107 +1,107 @@
 <!-- tab ประวัติการทำงาน -->
 <template>
-  <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"
-      :addData="false"
-      :bottom="true"
-      :editBtn="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 == 'startDate' || col.name == 'endDate'">
-              {{ date2Thai(col.value) }}
-            </div>
-            <div v-else>
-              {{ col.value }}
-            </div>
-          </q-td>
-          <q-td auto-width v-if="status == 'startDate' || status == 'endDate'">
-            <q-btn
-              color="red"
-              flat
-              dense
-              round
-              size="14px"
-              icon="mdi-trash-can-outline"
-              @click="checkDelete(props.row)"
-            />
-          </q-td>
-        </q-tr>
-      </template>
-      <template #bottom="props">
-        <div style="width: 63.5% !important" />
+	<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"
+			:addData="false"
+			:bottom="true"
+			:editBtn="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 == 'startDate' || col.name == 'endDate'">
+							{{ date2Thai(col.value) }}
+						</div>
+						<div v-else>
+							{{ col.value }}
+						</div>
+					</q-td>
+					<q-td auto-width v-if="status == 'startDate' || status == 'endDate'">
+						<q-btn
+							color="red"
+							flat
+							dense
+							round
+							size="14px"
+							icon="mdi-trash-can-outline"
+							@click="checkDelete(props.row)"
+						/>
+					</q-td>
+				</q-tr>
+			</template>
+			<template #bottom="props">
+				<div style="width: 63.5% !important" />
 
-        <div :props="props" class="row" style="width: 33% !important; padding-left: 20px">
-          <div class="text-weight-medium text-subtitle2 q-py-sm row col-12 justify-between">
-            <div>รวมระยะเวลา :</div>
+				<div :props="props" class="row" style="width: 33% !important; padding-left: 20px">
+					<div class="text-weight-medium text-subtitle2 q-py-sm row col-12 justify-between">
+						<div>รวมระยะเวลา :</div>
 
-            <div>{{ total }}</div>
-          </div>
-        </div>
-      </template>
-    </Table>
-  </q-form>
-  <q-dialog v-model="modal" persistent>
-    <q-card style="width: 600px">
-      <q-form ref="myForm">
-        <DialogHeader
-          tittle="ประวัติการทำงาน (ตั้งแต่เริ่มปฏิบัติงานกับกรุงเทพมหานคร - ปัจจุบัน)"
-          :close="checkClose"
-        />
-        <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-12 col-sm-6 col-md-6">
-              <q-input
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="position"
-                :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่ง/ลักษณะงาน'}`]"
-                :label="`${'ตำแหน่ง/ลักษณะงาน'}`"
-                @update:modelValue="clickEditRowPosition"
-                hide-bottom-space
-              />
-            </div>
-            <div class="col-xs-12 col-sm-6 col-md-6">
-              <q-select
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="type"
-                :options="opType"
-                :rules="[(val) => !!val || `${'กรุณาเลือกประเภท'}`]"
-                :label="`${'ประเภท'}`"
-                @update:modelValue="clickEditRowPosition"
-                hide-bottom-space
-              />
-            </div>
-            <!-- 
+						<div>{{ total }}</div>
+					</div>
+				</div>
+			</template>
+		</Table>
+	</q-form>
+	<q-dialog v-model="modal" persistent>
+		<q-card style="width: 600px">
+			<q-form ref="myForm">
+				<DialogHeader
+					tittle="ประวัติการทำงาน (ตั้งแต่เริ่มปฏิบัติงานกับกรุงเทพมหานคร - ปัจจุบัน)"
+					:close="checkClose"
+				/>
+				<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-12 col-sm-6 col-md-6">
+							<q-input
+								:class="getClass(edit)"
+								:outlined="edit"
+								dense
+								lazy-rules
+								:readonly="!edit"
+								:borderless="!edit"
+								v-model="position"
+								:rules="[(val) => !!val || `${'กรุณากรอกตำแหน่ง/ลักษณะงาน'}`]"
+								:label="`${'ตำแหน่ง/ลักษณะงาน'}`"
+								@update:modelValue="clickEditRowPosition"
+								hide-bottom-space
+							/>
+						</div>
+						<div class="col-xs-12 col-sm-6 col-md-6">
+							<q-select
+								:class="getClass(edit)"
+								:outlined="edit"
+								dense
+								lazy-rules
+								:readonly="!edit"
+								:borderless="!edit"
+								v-model="type"
+								:options="opType"
+								:rules="[(val) => !!val || `${'กรุณาเลือกประเภท'}`]"
+								:label="`${'ประเภท'}`"
+								@update:modelValue="clickEditRowPosition"
+								hide-bottom-space
+							/>
+						</div>
+						<!-- 
             <div class="col-xs-12 col-sm-6 col-md-6">
               <q-input
                 :class="getClass(edit)"
@@ -132,128 +132,128 @@
                 hide-bottom-space
               />
             </div> -->
-            <div class="col-xs-12 col-sm-6 col-md-6">
-              <div class="col-xs-12 col-sm-12 col-md-12">
-                <datepicker
-                  menu-class-name="modalfix"
-                  :readonly="!edit"
-                  v-model="startDate"
-                  :locale="'th'"
-                  autoApply
-                  :enableTimePicker="false"
-                  @update:modelValue="clickEditRow"
-                  week-start="0"
-                >
-                  <template #year="{ year }">
-                    {{ year + 543 }}
-                  </template>
-                  <template #year-overlay-value="{ value }">
-                    {{ parseInt(value + 543) }}
-                  </template>
-                  <template #trigger>
-                    <q-input
-                      :class="getClass(edit)"
-                      :outlined="edit"
-                      dense
-                      lazy-rules
-                      :borderless="!edit"
-                      :model-value="date2Thai(startDate)"
-                      :rules="[
-                        (val) => !!val || `${'กรุณาเลือกวันที่เริ่ม'}`,
-                        (val) => startDate <= endDate || `${'กรุณาเลือกวันที่เริ่มให้ถูกต้อง'}`
-                      ]"
-                      hide-bottom-space
-                      :label="`${'วันที่เริ่ม'}`"
-                    >
-                      <template v-slot:prepend>
-                        <q-icon
-                          name="event"
-                          class="cursor-pointer"
-                          :style="edit ? 'color: var(--q-primary)' : 'color: var(--q-grey)'"
-                        >
-                        </q-icon>
-                      </template>
-                    </q-input>
-                  </template>
-                </datepicker>
-              </div>
-            </div>
-            <div class="col-xs-12 col-sm-6 col-md-6">
-              <datepicker
-                menu-class-name="modalfix"
-                :readonly="!edit"
-                v-model="endDate"
-                :locale="'th'"
-                autoApply
-                :enableTimePicker="false"
-                @update:modelValue="clickEditRow"
-                week-start="0"
-              >
-                <template #year="{ year }">
-                  {{ year + 543 }}
-                </template>
-                <template #year-overlay-value="{ value }">
-                  {{ parseInt(value + 543) }}
-                </template>
-                <template #trigger>
-                  <q-input
-                    :class="getClass(edit)"
-                    :outlined="edit"
-                    dense
-                    lazy-rules
-                    :borderless="!edit"
-                    :model-value="date2Thai(endDate)"
-                    :rules="[
-                      (val) => !!val || `${'กรุณาเลือกวันที่สิ้นสุด'}`,
-                      (val) => startDate <= endDate || `${'กรุณาเลือกวันที่สิ้นสุดให้ถูกต้อง'}`
-                    ]"
-                    hide-bottom-space
-                    :label="`${'วันที่สิ้นสุด'}`"
-                  >
-                    <template v-slot:prepend>
-                      <q-icon
-                        name="event"
-                        class="cursor-pointer"
-                        :style="edit ? 'color: var(--q-primary)' : 'color: var(--q-grey)'"
-                      >
-                      </q-icon>
-                    </template>
-                  </q-input>
-                </template>
-              </datepicker>
-            </div>
-            <div class="col-xs-12 col-sm-12 col-md-12">
-              <q-input
-                :class="getClass(false)"
-                :outlined="false"
-                dense
-                lazy-rules
-                :readonly="!false"
-                :borderless="!false"
-                v-model="rangeDate"
-                :label="`${'ระยะเวลา'}`"
-                @update:modelValue="clickEditRow"
-                hide-bottom-space
-              />
-            </div>
-          </div>
-        </q-card-section>
-        <q-separator />
-        <DialogFooter
-          :edit="clickEdit"
-          :save="clickSave"
-          :validate="validateData"
-          :clickNext="clickNext"
-          :clickPrevious="clickPrevious"
-          :editData="status == 'register' || status == 'rejectRegister'"
-          v-model:editvisible="edit"
-          v-model:next="next"
-          v-model:previous="previous"
-          v-model:modalEdit="modalEdit"
-        />
-      </q-form>
-    </q-card>
-  </q-dialog>
+						<div class="col-xs-12 col-sm-6 col-md-6">
+							<div class="col-xs-12 col-sm-12 col-md-12">
+								<datepicker
+									menu-class-name="modalfix"
+									:readonly="!edit"
+									v-model="startDate"
+									:locale="'th'"
+									autoApply
+									:enableTimePicker="false"
+									@update:modelValue="clickEditRow"
+									week-start="0"
+								>
+									<template #year="{ year }">
+										{{ year + 543 }}
+									</template>
+									<template #year-overlay-value="{ value }">
+										{{ parseInt(value + 543) }}
+									</template>
+									<template #trigger>
+										<q-input
+											:class="getClass(edit)"
+											:outlined="edit"
+											dense
+											lazy-rules
+											:borderless="!edit"
+											:model-value="date2Thai(startDate)"
+											:rules="[
+												(val) => !!val || `${'กรุณาเลือกวันที่เริ่ม'}`,
+												(val) => startDate <= endDate || `${'กรุณาเลือกวันที่เริ่มให้ถูกต้อง'}`
+											]"
+											hide-bottom-space
+											:label="`${'วันที่เริ่ม'}`"
+										>
+											<template v-slot:prepend>
+												<q-icon
+													name="event"
+													class="cursor-pointer"
+													:style="edit ? 'color: var(--q-primary)' : 'color: var(--q-grey)'"
+												>
+												</q-icon>
+											</template>
+										</q-input>
+									</template>
+								</datepicker>
+							</div>
+						</div>
+						<div class="col-xs-12 col-sm-6 col-md-6">
+							<datepicker
+								menu-class-name="modalfix"
+								:readonly="!edit"
+								v-model="endDate"
+								:locale="'th'"
+								autoApply
+								:enableTimePicker="false"
+								@update:modelValue="clickEditRow"
+								week-start="0"
+							>
+								<template #year="{ year }">
+									{{ year + 543 }}
+								</template>
+								<template #year-overlay-value="{ value }">
+									{{ parseInt(value + 543) }}
+								</template>
+								<template #trigger>
+									<q-input
+										:class="getClass(edit)"
+										:outlined="edit"
+										dense
+										lazy-rules
+										:borderless="!edit"
+										:model-value="date2Thai(endDate)"
+										:rules="[
+											(val) => !!val || `${'กรุณาเลือกวันที่สิ้นสุด'}`,
+											(val) => startDate <= endDate || `${'กรุณาเลือกวันที่สิ้นสุดให้ถูกต้อง'}`
+										]"
+										hide-bottom-space
+										:label="`${'วันที่สิ้นสุด'}`"
+									>
+										<template v-slot:prepend>
+											<q-icon
+												name="event"
+												class="cursor-pointer"
+												:style="edit ? 'color: var(--q-primary)' : 'color: var(--q-grey)'"
+											>
+											</q-icon>
+										</template>
+									</q-input>
+								</template>
+							</datepicker>
+						</div>
+						<div class="col-xs-12 col-sm-12 col-md-12">
+							<q-input
+								:class="getClass(false)"
+								:outlined="false"
+								dense
+								lazy-rules
+								:readonly="!false"
+								:borderless="!false"
+								v-model="rangeDate"
+								:label="`${'ระยะเวลา'}`"
+								@update:modelValue="clickEditRow"
+								hide-bottom-space
+							/>
+						</div>
+					</div>
+				</q-card-section>
+				<q-separator />
+				<DialogFooter
+					:edit="clickEdit"
+					:save="clickSave"
+					:validate="validateData"
+					:clickNext="clickNext"
+					:clickPrevious="clickPrevious"
+					:editData="status == 'register' || status == 'rejectRegister'"
+					v-model:editvisible="edit"
+					v-model:next="next"
+					v-model:previous="previous"
+					v-model:modalEdit="modalEdit"
+				/>
+			</q-form>
+		</q-card>
+	</q-dialog>
 </template>
 <script setup lang="ts">
 import { onMounted, ref, watch } from 'vue'
@@ -265,9 +265,9 @@ import config from '@/app.config'
 import { useExamDataStore } from '@/modules/01_exam/store'
 import { useRoute } from 'vue-router'
 import type {
-  RequestItemsObject,
-  Columns,
-  DataProps
+	RequestItemsObject,
+	Columns,
+	DataProps
 } from '@/modules/01_exam/interface/request/Career'
 import type { ResponseObject } from '@/modules/01_exam/interface/response/Career'
 import Table from '@/components/Table.vue'
@@ -275,10 +275,10 @@ import DialogHeader from '@/components/DialogHeader.vue'
 import DialogFooter from '@/components/DialogFooter.vue'
 
 const props = defineProps({
-  status: {
-    type: String,
-    required: true
-  }
+	status: {
+		type: String,
+		required: true
+	}
 })
 
 const $q = useQuasar()
@@ -319,42 +319,42 @@ const filter = ref<string>('') //search data table
 const visibleColumns = ref<String[]>([])
 
 examData.career.columns.length == 0
-  ? (visibleColumns.value = [
-      'position',
-      /*
+	? (visibleColumns.value = [
+			'position',
+			/*
         'pile',
         'org', */
-      'type',
-      'startDate',
-      'endDate',
-      'rangeDate'
-    ])
-  : (visibleColumns.value = examData.career.columns)
+			'type',
+			'startDate',
+			'endDate',
+			'rangeDate'
+	  ])
+	: (visibleColumns.value = examData.career.columns)
 
 const columns = ref<any>([
-  {
-    name: 'position',
-    align: 'left',
-    label: 'ชื่อตำแหน่ง',
-    sortable: true,
-    field: 'position',
-    headerStyle: 'font-size: 14px',
-    style: 'font-size: 14px; width:25%;',
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: 'base' })
-  },
-  {
-    name: 'type',
-    align: 'left',
-    label: 'ประเภท',
-    sortable: true,
-    field: 'type',
-    headerStyle: 'font-size: 14px',
-    style: 'font-size: 14px; width:20%;',
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: 'base' })
-  },
-  /*
+	{
+		name: 'position',
+		align: 'left',
+		label: 'ชื่อตำแหน่ง',
+		sortable: true,
+		field: 'position',
+		headerStyle: 'font-size: 14px',
+		style: 'font-size: 14px; width:25%;',
+		sort: (a: string, b: string) =>
+			a.localeCompare(b, undefined, { numeric: true, sensitivity: 'base' })
+	},
+	{
+		name: 'type',
+		align: 'left',
+		label: 'ประเภท',
+		sortable: true,
+		field: 'type',
+		headerStyle: 'font-size: 14px',
+		style: 'font-size: 14px; width:20%;',
+		sort: (a: string, b: string) =>
+			a.localeCompare(b, undefined, { numeric: true, sensitivity: 'base' })
+	},
+	/*
     {
       name: 'pile',
       align: 'left',
@@ -377,373 +377,373 @@ const columns = ref<any>([
       sort: (a: string, b: string) =>
         a.localeCompare(b, undefined, { numeric: true, sensitivity: 'base' })
     }, */
-  {
-    name: 'startDate',
-    align: 'center',
-    label: 'เริ่ม',
-    sortable: true,
-    field: 'startDate',
-    headerStyle: 'font-size: 14px',
-    style: 'font-size: 14px; width:15%;',
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: 'base' })
-  },
-  {
-    name: 'endDate',
-    align: 'center',
-    label: 'สิ้นสุด',
-    sortable: true,
-    field: 'endDate',
-    headerStyle: 'font-size: 14px',
-    style: 'font-size: 14px; width:15%;',
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: 'base' })
-  },
-  {
-    name: 'rangeDate',
-    align: 'right',
-    label: 'ระยะเวลา',
-    sortable: true,
-    field: 'rangeDate',
-    headerStyle: 'font-size: 14px',
-    style: 'font-size: 14px; width:20%;',
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: 'base' })
-  }
+	{
+		name: 'startDate',
+		align: 'center',
+		label: 'เริ่ม',
+		sortable: true,
+		field: 'startDate',
+		headerStyle: 'font-size: 14px',
+		style: 'font-size: 14px; width:15%;',
+		sort: (a: string, b: string) =>
+			a.localeCompare(b, undefined, { numeric: true, sensitivity: 'base' })
+	},
+	{
+		name: 'endDate',
+		align: 'center',
+		label: 'สิ้นสุด',
+		sortable: true,
+		field: 'endDate',
+		headerStyle: 'font-size: 14px',
+		style: 'font-size: 14px; width:15%;',
+		sort: (a: string, b: string) =>
+			a.localeCompare(b, undefined, { numeric: true, sensitivity: 'base' })
+	},
+	{
+		name: 'rangeDate',
+		align: 'right',
+		label: 'ระยะเวลา',
+		sortable: true,
+		field: 'rangeDate',
+		headerStyle: 'font-size: 14px',
+		style: 'font-size: 14px; width:20%;',
+		sort: (a: string, b: string) =>
+			a.localeCompare(b, undefined, { numeric: true, sensitivity: 'base' })
+	}
 ])
 
 watch(visibleColumns, async (count: String[], prevCount: String[]) => {
-  await changeExamColumns('career', count)
+	await changeExamColumns('career', count)
 })
 
 watch(startDate, async (count: Date, prevCount: Date) => {
-  await calDate()
+	await calDate()
 })
 
 watch(endDate, async (count: Date, prevCount: Date) => {
-  await calDate()
+	await calDate()
 })
 
 onMounted(async () => {
-  await fetchData()
+	await fetchData()
 })
 
 const calDate = async () => {
-  let _startDate = new Date(startDate.value.toISOString().substr(0, 10))
-  let _endDate = new Date(endDate.value.toISOString().substr(0, 10))
-  _endDate.setDate(_endDate.getDate() + 1)
-  if (_startDate > _endDate) {
-    const swap = _startDate
-    _startDate = _endDate
-    _endDate = swap
-  }
-  const startYear = _startDate.getFullYear()
-  const february = (startYear % 4 === 0 && startYear % 100 !== 0) || startYear % 400 === 0 ? 29 : 28
-  const daysInMonth = [31, february, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
+	let _startDate = new Date(startDate.value.toISOString().substr(0, 10))
+	let _endDate = new Date(endDate.value.toISOString().substr(0, 10))
+	_endDate.setDate(_endDate.getDate() + 1)
+	if (_startDate > _endDate) {
+		const swap = _startDate
+		_startDate = _endDate
+		_endDate = swap
+	}
+	const startYear = _startDate.getFullYear()
+	const february = (startYear % 4 === 0 && startYear % 100 !== 0) || startYear % 400 === 0 ? 29 : 28
+	const daysInMonth = [31, february, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
 
-  let yearDiff = _endDate.getFullYear() - startYear
-  let monthDiff = _endDate.getMonth() - _startDate.getMonth()
-  if (monthDiff < 0) {
-    yearDiff--
-    monthDiff += 12
-  }
-  let dayDiff = _endDate.getDate() - _startDate.getDate()
-  if (dayDiff < 0) {
-    if (monthDiff > 0) {
-      monthDiff--
-    } else {
-      yearDiff--
-      monthDiff = 11
-    }
-    dayDiff += daysInMonth[_startDate.getMonth()]
-  }
-  if (dayDiff >= 30) {
-    monthDiff = monthDiff + 1
-    dayDiff = 0
-    if (monthDiff >= 12) {
-      yearDiff = yearDiff + 1
-      monthDiff = 0
-    }
-  }
-  rangeDate.value = `${yearDiff > 0 ? yearDiff + ' ปี ' : ''}${
-    monthDiff > 0 ? monthDiff + ' เดือน ' : ''
-  }${dayDiff > 0 ? dayDiff + ' วัน ' : ''}`
+	let yearDiff = _endDate.getFullYear() - startYear
+	let monthDiff = _endDate.getMonth() - _startDate.getMonth()
+	if (monthDiff < 0) {
+		yearDiff--
+		monthDiff += 12
+	}
+	let dayDiff = _endDate.getDate() - _startDate.getDate()
+	if (dayDiff < 0) {
+		if (monthDiff > 0) {
+			monthDiff--
+		} else {
+			yearDiff--
+			monthDiff = 11
+		}
+		dayDiff += daysInMonth[_startDate.getMonth()]
+	}
+	if (dayDiff >= 30) {
+		monthDiff = monthDiff + 1
+		dayDiff = 0
+		if (monthDiff >= 12) {
+			yearDiff = yearDiff + 1
+			monthDiff = 0
+		}
+	}
+	rangeDate.value = `${yearDiff > 0 ? yearDiff + ' ปี ' : ''}${
+		monthDiff > 0 ? monthDiff + ' เดือน ' : ''
+	}${dayDiff > 0 ? dayDiff + ' วัน ' : ''}`
 }
 
 const calDateSplit = async (startDate: Date, endDate: Date) => {
-  let _startDate = new Date(startDate.toISOString().substr(0, 10))
-  let _endDate = new Date(endDate.toISOString().substr(0, 10))
-  _endDate.setDate(_endDate.getDate() + 1)
-  if (_startDate > _endDate) {
-    const swap = _startDate
-    _startDate = _endDate
-    _endDate = swap
-  }
-  const startYear = _startDate.getFullYear()
-  const february = (startYear % 4 === 0 && startYear % 100 !== 0) || startYear % 400 === 0 ? 29 : 28
-  const daysInMonth = [31, february, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
+	let _startDate = new Date(startDate.toISOString().substr(0, 10))
+	let _endDate = new Date(endDate.toISOString().substr(0, 10))
+	_endDate.setDate(_endDate.getDate() + 1)
+	if (_startDate > _endDate) {
+		const swap = _startDate
+		_startDate = _endDate
+		_endDate = swap
+	}
+	const startYear = _startDate.getFullYear()
+	const february = (startYear % 4 === 0 && startYear % 100 !== 0) || startYear % 400 === 0 ? 29 : 28
+	const daysInMonth = [31, february, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
 
-  let yearDiff = _endDate.getFullYear() - startYear
-  let monthDiff = _endDate.getMonth() - _startDate.getMonth()
-  if (monthDiff < 0) {
-    yearDiff--
-    monthDiff += 12
-  }
-  let dayDiff = _endDate.getDate() - _startDate.getDate()
-  if (dayDiff < 0) {
-    if (monthDiff > 0) {
-      monthDiff--
-    } else {
-      yearDiff--
-      monthDiff = 11
-    }
-    dayDiff += daysInMonth[_startDate.getMonth()]
-  }
-  if (dayDiff >= 30) {
-    monthDiff = monthDiff + 1
-    dayDiff = 0
-    if (monthDiff >= 12) {
-      yearDiff = yearDiff + 1
-      monthDiff = 0
-    }
-  }
-  var obj = {
-    yearDiff: yearDiff,
-    monthDiff: monthDiff,
-    dayDiff: dayDiff
-  }
-  return obj
+	let yearDiff = _endDate.getFullYear() - startYear
+	let monthDiff = _endDate.getMonth() - _startDate.getMonth()
+	if (monthDiff < 0) {
+		yearDiff--
+		monthDiff += 12
+	}
+	let dayDiff = _endDate.getDate() - _startDate.getDate()
+	if (dayDiff < 0) {
+		if (monthDiff > 0) {
+			monthDiff--
+		} else {
+			yearDiff--
+			monthDiff = 11
+		}
+		dayDiff += daysInMonth[_startDate.getMonth()]
+	}
+	if (dayDiff >= 30) {
+		monthDiff = monthDiff + 1
+		dayDiff = 0
+		if (monthDiff >= 12) {
+			yearDiff = yearDiff + 1
+			monthDiff = 0
+		}
+	}
+	var obj = {
+		yearDiff: yearDiff,
+		monthDiff: monthDiff,
+		dayDiff: dayDiff
+	}
+	return obj
 }
 
 const fetchData = async () => {
-  loaderPage(true)
-  await http
-    .get(config.API.candidateCareer(examId.value, positionId.value))
-    .then((res) => {
-      const data = res.data.result
-      var yearDiff = 0
-      var monthDiff = 0
-      var dayDiff = 0
-      total.value = '-'
-      rows.value = []
-      data.map((r: any) => {
-        rows.value.push({
-          ...r,
-          startDate: new Date(r.durationStart),
-          endDate: new Date(r.durationEnd)
-        })
-        calDateSplit(new Date(r.durationStart), new Date(r.durationEnd)).then((d) => {
-          yearDiff = yearDiff + d.yearDiff
-          monthDiff = monthDiff + d.monthDiff
-          dayDiff = dayDiff + d.dayDiff
-          if (dayDiff > 30) {
-            monthDiff = monthDiff + parseInt((dayDiff / 30).toString())
-            dayDiff = dayDiff % 30
-          }
-          if (monthDiff > 12) {
-            yearDiff = yearDiff + parseInt((monthDiff / 12).toString())
-            monthDiff = monthDiff % 12
-          }
-          total.value = `${yearDiff > 0 ? yearDiff + ' ปี ' : ''}${
-            monthDiff > 0 ? monthDiff + ' เดือน ' : ''
-          }${dayDiff > 0 ? dayDiff + ' วัน ' : ''}`
-        })
-      })
-    })
-    .catch((e) => {
-      //   messageError($q, e)
-    })
-    .finally(() => {
-      loaderPage(false)
-    })
+	loaderPage(true)
+	await http
+		.get(config.API.candidateCareer(examId.value, positionId.value))
+		.then((res) => {
+			const data = res.data.result
+			var yearDiff = 0
+			var monthDiff = 0
+			var dayDiff = 0
+			total.value = '-'
+			rows.value = []
+			data.map((r: any) => {
+				rows.value.push({
+					...r,
+					startDate: new Date(r.durationStart),
+					endDate: new Date(r.durationEnd)
+				})
+				calDateSplit(new Date(r.durationStart), new Date(r.durationEnd)).then((d) => {
+					yearDiff = yearDiff + d.yearDiff
+					monthDiff = monthDiff + d.monthDiff
+					dayDiff = dayDiff + d.dayDiff
+					if (dayDiff > 30) {
+						monthDiff = monthDiff + parseInt((dayDiff / 30).toString())
+						dayDiff = dayDiff % 30
+					}
+					if (monthDiff > 12) {
+						yearDiff = yearDiff + parseInt((monthDiff / 12).toString())
+						monthDiff = monthDiff % 12
+					}
+					total.value = `${yearDiff > 0 ? yearDiff + ' ปี ' : ''}${
+						monthDiff > 0 ? monthDiff + ' เดือน ' : ''
+					}${dayDiff > 0 ? dayDiff + ' วัน ' : ''}`
+				})
+			})
+		})
+		.catch((e) => {
+			//   messageError($q, e)
+		})
+		.finally(() => {
+			loaderPage(false)
+		})
 }
 
 /**
  * กดดูข้อมูลก่อนหน้า
  */
 const clickPrevious = async () => {
-  rowIndex.value -= 1
-  const row = rows.value[rowIndex.value]
-  position.value = row.position
-  type.value = row.type
-  pile.value = row.pile
-  org.value = row.org
-  startDate.value = row.startDate
-  endDate.value = row.endDate
-  rangeDate.value = row.rangeDate
-  id.value = row.id
-  await checkRowPage()
+	rowIndex.value -= 1
+	const row = rows.value[rowIndex.value]
+	position.value = row.position
+	type.value = row.type
+	pile.value = row.pile
+	org.value = row.org
+	startDate.value = row.startDate
+	endDate.value = row.endDate
+	rangeDate.value = row.rangeDate
+	id.value = row.id
+	await checkRowPage()
 }
 
 /**
  * กดดูข้อมูลต่อไป
  */
 const clickNext = async () => {
-  rowIndex.value += 1
-  const row = rows.value[rowIndex.value]
-  position.value = row.position
-  type.value = row.type
-  pile.value = row.pile
-  org.value = row.org
-  startDate.value = row.startDate
-  endDate.value = row.endDate
-  rangeDate.value = row.rangeDate
-  id.value = row.id
-  await checkRowPage()
+	rowIndex.value += 1
+	const row = rows.value[rowIndex.value]
+	position.value = row.position
+	type.value = row.type
+	pile.value = row.pile
+	org.value = row.org
+	startDate.value = row.startDate
+	endDate.value = row.endDate
+	rangeDate.value = row.rangeDate
+	id.value = row.id
+	await checkRowPage()
 }
 
 /**
  * เช็คปุ่มดูข้อมูล ย้อน กับ ต่อไป ว่าต้องแสดงไหม
  */
 const checkRowPage = () => {
-  editRow.value = false
-  next.value = true
-  previous.value = true
-  if (rowIndex.value + 1 >= rows.value.length) {
-    next.value = false
-  }
-  if (rowIndex.value - 1 < 0) {
-    previous.value = false
-  }
+	editRow.value = false
+	next.value = true
+	previous.value = true
+	if (rowIndex.value + 1 >= rows.value.length) {
+		next.value = false
+	}
+	if (rowIndex.value - 1 < 0) {
+		previous.value = false
+	}
 }
 
 //validate วันที่สิ้นสุด
 
 const endDateValidation = (value: Date) => {
-  if (startDate.value <= endDate.value) {
-    return true
-  }
-  return false
+	if (startDate.value <= endDate.value) {
+		return true
+	}
+	return false
 }
 
 /**
  * กดปุ่มแก้ไขใน dialog
  */
 const clickEdit = () => {
-  next.value = false
-  previous.value = false
+	next.value = false
+	previous.value = false
 }
 
 /**
  * กดปุ่มเพิ่มด้านบน table
  */
 const clickAdd = async () => {
-  await addRow()
+	await addRow()
 }
 
 const checkDelete = (row: RequestItemsObject) => {
-  rawItem.value = row
-  modalDelete($q, 'ยืนยันการลบข้อมูล', 'หากต้องการลบกดให้กดตกลง', clickDeleteRow)
+	rawItem.value = row
+	modalDelete($q, 'ยืนยันการลบข้อมูล', 'หากต้องการลบกดให้กดตกลง', clickDeleteRow)
 }
 
 /**
  * ลบข้อมูลใน table
  */
 const clickDeleteRow = async () => {
-  if (rawItem.value != null) {
-    loaderPage(true)
-    await http
-      .delete(config.API.candidateCareer(rawItem.value.id, ''))
-      .then(() => {
-        success($q, 'ลบข้อมูลสำเร็จ')
-      })
-      .catch((e) => {
-        messageError($q, e)
-      })
-      .finally(async () => {
-        await fetchData()
-      })
-  } else {
-    await fetchData()
-  }
+	if (rawItem.value != null) {
+		loaderPage(true)
+		await http
+			.delete(config.API.candidateCareer(rawItem.value.id, ''))
+			.then(() => {
+				success($q, 'ลบข้อมูลสำเร็จ')
+			})
+			.catch((e) => {
+				messageError($q, e)
+			})
+			.finally(async () => {
+				await fetchData()
+			})
+	} else {
+		await fetchData()
+	}
 }
 
 /**
  * กดบันทึกใน dialog
  */
 const clickSave = async () => {
-  myForm.value.validate().then(async (result: boolean) => {
-    if (result) {
-      if (modalEdit.value) {
-        await editData()
-      } else {
-        await saveData()
-      }
-    }
-  })
+	myForm.value.validate().then(async (result: boolean) => {
+		if (result) {
+			if (modalEdit.value) {
+				await editData()
+			} else {
+				await saveData()
+			}
+		}
+	})
 }
 
 /**
  * บันทึกเพิ่มข้อมูล
  */
 const saveData = async () => {
-  loaderPage(true)
-  await http
-    .post(config.API.candidateCareer(examId.value, positionId.value), {
-      position: position.value,
-      type: type.value,
-      pile: pile.value,
-      org: org.value,
-      durationStart: dateToISO(new Date(startDate.value)),
-      durationEnd: dateToISO(new Date(endDate.value)),
-      rangeDate: rangeDate.value
-    })
-    .then(() => {
-      success($q, 'บันทึกข้อมูลสำเร็จ')
-    })
-    .catch((e) => {
-      messageError($q, e)
-    })
-    .finally(async () => {
-      modal.value = false
-      await fetchData()
-    })
+	loaderPage(true)
+	await http
+		.post(config.API.candidateCareer(examId.value, positionId.value), {
+			position: position.value,
+			type: type.value,
+			pile: pile.value,
+			org: org.value,
+			durationStart: dateToISO(new Date(startDate.value)),
+			durationEnd: dateToISO(new Date(endDate.value)),
+			rangeDate: rangeDate.value
+		})
+		.then(() => {
+			success($q, 'บันทึกข้อมูลสำเร็จ')
+		})
+		.catch((e) => {
+			messageError($q, e)
+		})
+		.finally(async () => {
+			modal.value = false
+			await fetchData()
+		})
 }
 
 /**
  * บันทึกแก้ไขข้อมูล
  */
 const editData = async () => {
-  loaderPage(true)
-  await http
-    .put(config.API.candidateCareer(id.value, ''), {
-      position: position.value,
-      type: type.value,
-      pile: pile.value,
-      org: org.value,
-      durationStart: dateToISO(new Date(startDate.value)),
-      durationEnd: dateToISO(new Date(endDate.value)),
-      rangeDate: rangeDate.value
-    })
-    .then(() => {
-      success($q, 'บันทึกข้อมูลสำเร็จ')
-    })
-    .catch((e) => {
-      messageError($q, e)
-    })
-    .finally(async () => {
-      modal.value = false
-      await fetchData()
-    })
+	loaderPage(true)
+	await http
+		.put(config.API.candidateCareer(id.value, ''), {
+			position: position.value,
+			type: type.value,
+			pile: pile.value,
+			org: org.value,
+			durationStart: dateToISO(new Date(startDate.value)),
+			durationEnd: dateToISO(new Date(endDate.value)),
+			rangeDate: rangeDate.value
+		})
+		.then(() => {
+			success($q, 'บันทึกข้อมูลสำเร็จ')
+		})
+		.catch((e) => {
+			messageError($q, e)
+		})
+		.finally(async () => {
+			modal.value = false
+			await fetchData()
+		})
 }
 
 const checkClose = async () => {
-  if (editRow.value == true) {
-    modalConfirm($q, 'ข้อมูลมีการแก้ไข', 'ยืนยันการดำเนินต่อใช่หรือไม่', clickClose)
-  } else {
-    await clickClose()
-  }
-  await fetchData()
+	if (editRow.value == true) {
+		modalConfirm($q, 'ข้อมูลมีการแก้ไข', 'ยืนยันการดำเนินต่อใช่หรือไม่', clickClose)
+	} else {
+		await clickClose()
+	}
+	await fetchData()
 }
 
 /**
  * กดปิด dialog
  */
 const clickClose = async () => {
-  modal.value = false
-  editRow.value = false
-  next.value = false
-  previous.value = false
+	modal.value = false
+	editRow.value = false
+	next.value = false
+	previous.value = false
 }
 
 /**
@@ -751,60 +751,60 @@ const clickClose = async () => {
  * @param props ค่า props ใน row ที่เลือก
  */
 const selectData = (props: any) => {
-  modalEdit.value = true
-  modal.value = true
-  editRow.value = false
-  rawItem.value = props.row
-  rowIndex.value = props.rowIndex
-  position.value = props.row.position
-  type.value = props.row.type
-  pile.value = props.row.pile
-  org.value = props.row.org
-  startDate.value = props.row.startDate
-  endDate.value = props.row.endDate
-  rangeDate.value = props.row.rangeDate
-  id.value = props.row.id
-  next.value = false
-  previous.value = false
+	modalEdit.value = true
+	modal.value = true
+	editRow.value = false
+	rawItem.value = props.row
+	rowIndex.value = props.rowIndex
+	position.value = props.row.position
+	type.value = props.row.type
+	pile.value = props.row.pile
+	org.value = props.row.org
+	startDate.value = props.row.startDate
+	endDate.value = props.row.endDate
+	rangeDate.value = props.row.rangeDate
+	id.value = props.row.id
+	next.value = false
+	previous.value = false
 }
 
 /**
  * กดปุ่มเพิ่มบน table
  */
 const addRow = () => {
-  modalEdit.value = false
-  modal.value = true
-  position.value = null
-  type.value = null
-  pile.value = null
-  org.value = null
-  startDate.value = new Date()
-  endDate.value = new Date()
-  rangeDate.value = null
+	modalEdit.value = false
+	modal.value = true
+	position.value = null
+	type.value = null
+	pile.value = null
+	org.value = null
+	startDate.value = new Date()
+	endDate.value = new Date()
+	rangeDate.value = null
 }
 
 /**
  * เช็คว่ามีการแก้ไขข้อมูล
  */
 const clickEditRow = () => {
-  myForm.value.validate()
-  editRow.value = true
+	myForm.value.validate()
+	editRow.value = true
 }
 
 const clickEditRowPosition = () => {
-  editRow.value = true
+	editRow.value = true
 }
 
 /**
  * validate input ใน dialog
  */
 const validateData = async () => {
-  checkValidate.value = true
-  await myForm.value.validate().then((result: boolean) => {
-    if (result == false) {
-      checkValidate.value = false
-    }
-  })
+	checkValidate.value = true
+	await myForm.value.validate().then((result: boolean) => {
+		if (result == false) {
+			checkValidate.value = false
+		}
+	})
 }
 
 /**
@@ -812,18 +812,18 @@ const validateData = async () => {
  * @param val ข้อมูล input สำหรับแก้ไขหรือไม่
  */
 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
+	}
 }
 </script>
 <style>
 .modalfix {
-  position: fixed !important;
-  top: auto !important;
-  transform: none !important;
-  left: auto !important;
-  margin-top: 10px;
+	position: fixed !important;
+	top: auto !important;
+	transform: none !important;
+	left: auto !important;
+	margin-top: 10px;
 }
 </style>
diff --git a/src/modules/01_exam/components/Form/Contact.vue b/src/modules/01_exam/components/Form/Contact.vue
index f71beff..b237ead 100644
--- a/src/modules/01_exam/components/Form/Contact.vue
+++ b/src/modules/01_exam/components/Form/Contact.vue
@@ -1,94 +1,95 @@
 <!-- card บุคคลที่สามารถติดต่อได้ -->
 <template>
-  <HeaderTop
-    v-model:edit="edit"
-    header="บุคคลที่สามารถติดต่อได้"
-    icon="mdi-account-circle"
-    :addData="true"
-    :editOnly="false"
-    :editData="false"
-  />
-  <q-form ref="myform">
-    <div class="row col-12 items-center q-col-gutter-x-sm q-col-gutter-y-xs">
-      <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="defaultContact.contactprefixId"
-          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="defaultContact.contactfirstname"
-          :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="defaultContact.contactlastname"
-          :rules="[(val) => !!val || `${'กรุณากรอก นามสกุล'}`]"
-          :label="`${'นามสกุล'}`"
-        />
-      </div>
-      <div class="col-xs-12 col-sm-3 col-md-4">
-        <q-input
-          :class="getClass(status == 'register' || status == 'rejectRegister')"
-          :outlined="status == 'register' || status == 'rejectRegister'"
-          dense
-          lazy-rules
-          :readonly="!(status == 'register' || status == 'rejectRegister')"
-          :borderless="!(status == 'register' || status == 'rejectRegister')"
-          v-model="defaultContact.contactrelations"
-          :rules="[(val) => !!val || `${'กรุณากรอกความสัมพันธ์'}`]"
-          :label="`${'เกี่ยวข้องเป็น'}`"
-        />
-      </div>
-      <div class="col-xs-12 col-sm-3 col-md-4">
-        <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="defaultContact.contacttel"
-          :label="`${'โทรศัพท์'}`"
-          :rules="[
-            (val) => val.length == 10 || `${'กรุณากรอก โทรศัพท์'}`,
-            (val) => /^[0-9]*$/.test(val) || `${'กรุณากรอกข้อมูลโทรศัพท์ให้ถูกต้อง'}`
-          ]"
-        />
-      </div>
-    </div>
-  </q-form>
+	<HeaderTop
+		v-model:edit="edit"
+		header="บุคคลที่สามารถติดต่อได้"
+		icon="mdi-account-circle"
+		:addData="true"
+		:editOnly="false"
+		:editData="false"
+	/>
+	<q-form ref="myform">
+		<div class="row col-12 items-center q-col-gutter-x-sm q-col-gutter-y-xs">
+			<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="defaultContact.contactprefixId"
+					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="defaultContact.contactfirstname"
+					: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="defaultContact.contactlastname"
+					:rules="[(val) => !!val || `${'กรุณากรอก นามสกุล'}`]"
+					:label="`${'นามสกุล'}`"
+				/>
+			</div>
+			<div class="col-xs-12 col-sm-3 col-md-4">
+				<q-input
+					:class="getClass(status == 'register' || status == 'rejectRegister')"
+					:outlined="status == 'register' || status == 'rejectRegister'"
+					dense
+					lazy-rules
+					:readonly="!(status == 'register' || status == 'rejectRegister')"
+					:borderless="!(status == 'register' || status == 'rejectRegister')"
+					v-model="defaultContact.contactrelations"
+					:rules="[(val) => !!val || `${'กรุณากรอกความสัมพันธ์'}`]"
+					:label="`${'เกี่ยวข้องเป็น'}`"
+				/>
+			</div>
+			<div class="col-xs-12 col-sm-3 col-md-4">
+				<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="defaultContact.contacttel"
+					:label="`${'โทรศัพท์'}`"
+					:rules="[
+						(val) => !!val || '* กรุณากรอกข้อมูลหมายเลขโทรศัพท์',
+						(val) =>
+							(val.length >= 9 && val.length <= 10) || 'กรุณากรอกข้อมูลหมายเลขโทรศัพท์ให้ถูกต้อง'
+					]"
+				/>
+			</div>
+		</div>
+	</q-form>
 </template>
 <script setup lang="ts">
 import { ref, onMounted, watch, PropType } from 'vue'
@@ -104,18 +105,18 @@ import HeaderTop from '@/components/top.vue'
 import { DataOption } from '../../interface/index/Main'
 
 const props = defineProps({
-  status: {
-    type: String,
-    required: true
-  },
-  form: {
-    type: Object,
-    required: true
-  },
-  prefixOptions: {
-    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
+	}
 })
 const emit = defineEmits(['update:form'])
 
@@ -131,43 +132,43 @@ const examId = ref<string>(route.params.id.toString())
 const positionId = ref<string>(route.params.positionId.toString())
 
 watch(myform, async (count: any, prevCount: any) => {
-  emit('update:form', count)
+	emit('update:form', count)
 })
 
 watch(defaultContact, async (count: Contact, prevCount: Contact) => {
-  await changeData('contact', count)
+	await changeData('contact', count)
 })
 
 onMounted(async () => {
-  await fetchData()
+	await fetchData()
 })
 
 const fetchData = async () => {
-  loaderPage(true)
-  await http
-    .get(config.API.candidateContact(examId.value, positionId.value))
-    .then((res) => {
-      const data = res.data.result
-      if (data != null) {
-        defaultContact.value.contactprefixId = data.contactPrefixId
-        defaultContact.value.contactfirstname = data.contactFirstname
-        defaultContact.value.contactlastname = data.contactLastname
-        defaultContact.value.contactrelations = data.contactRelations
-        defaultContact.value.contacttel = data.contactTel
-      }
-    })
-    .catch((e) => {
-      //   messageError($q, e)
-    })
-    .finally(() => {
-      loaderPage(false)
-    })
+	loaderPage(true)
+	await http
+		.get(config.API.candidateContact(examId.value, positionId.value))
+		.then((res) => {
+			const data = res.data.result
+			if (data != null) {
+				defaultContact.value.contactprefixId = data.contactPrefixId
+				defaultContact.value.contactfirstname = data.contactFirstname
+				defaultContact.value.contactlastname = data.contactLastname
+				defaultContact.value.contactrelations = data.contactRelations
+				defaultContact.value.contacttel = data.contactTel
+			}
+		})
+		.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
+	}
 }
 </script>
diff --git a/src/modules/01_exam/components/Form/Information.vue b/src/modules/01_exam/components/Form/Information.vue
index 08b6440..506abd8 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,172 +65,172 @@
           ]"
           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 == 10 || `${'กรุณากรอก โทรศัพท์'}`,
-            (val) => /^[0-9]*$/.test(val) || `${'กรุณากรอกข้อมูลโทรศัพท์ให้ถูกต้อง'}`
-          ]"
-        />
-      </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) || 'กรุณากรอกข้อมูลหมายเลขโทรศัพท์ให้ถูกต้อง'
+					]"
+				/>
+			</div>
+			<!-- <div class="col-xs-12 col-sm-3 col-md-3">
         <q-input
           :outlined="status == 'register' || status == 'rejectRegister'"
           dense
@@ -250,55 +250,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'"
@@ -311,65 +311,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'
@@ -386,26 +386,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'])
 
@@ -431,255 +431,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>
diff --git a/src/modules/01_exam/components/Form/Occupation.vue b/src/modules/01_exam/components/Form/Occupation.vue
index 3f958f1..1c17631 100644
--- a/src/modules/01_exam/components/Form/Occupation.vue
+++ b/src/modules/01_exam/components/Form/Occupation.vue
@@ -1,141 +1,141 @@
 <!-- card ตำแหน่งปัจจุบัน -->
 <template>
-  <HeaderTop
-    v-model:edit="edit"
-    header="ตำแหน่งปัจจุบัน"
-    icon="mdi-briefcase"
-    :addData="true"
-    :editOnly="false"
-    :editData="false"
-  />
-  <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">
-        <q-radio
-          v-model="defaultOccupation.positionType"
-          label="ลูกจ้างประจำ"
-          color="teal"
-          val="prem"
-          :disable="!(status == 'register' || status == 'rejectRegister')"
-        />
-        <q-radio
-          v-model="defaultOccupation.positionType"
-          label="ลูกจ้างชั่วคราว"
-          color="teal"
-          val="temp"
-          :disable="!(status == 'register' || status == 'rejectRegister')"
-        />
-        <q-radio
-          v-model="defaultOccupation.positionType"
-          label="ผู้ปฏิบัติงานอื่นในกรุงเทพมหานคร"
-          color="teal"
-          val="other"
-          :disable="!(status == 'register' || status == 'rejectRegister')"
-        />
-      </div>
-      <div class="col-12 row">
-        <div class="col-3">
-          <q-input
-            :class="getClass(status == 'register' || status == 'rejectRegister')"
-            :outlined="status == 'register' || status == 'rejectRegister'"
-            dense
-            lazy-rules
-            autogrow
-            :readonly="!(status == 'register' || status == 'rejectRegister')"
-            :borderless="!(status == 'register' || status == 'rejectRegister')"
-            v-model="defaultOccupation.position"
-            :rules="[(val) => !!val || `${'กรุณากรอก ชื่อตำแหน่ง'}`]"
-            :label="`${'ชื่อตำแหน่ง'}`"
-          />
-        </div>
-        <div class="col-3">
-          <q-input
-            class="q-pl-sm"
-            :class="getClass(status == 'register' || status == 'rejectRegister')"
-            :outlined="status == 'register' || status == 'rejectRegister'"
-            dense
-            lazy-rules
-            type="number"
-            autogrow
-            :readonly="!(status == 'register' || status == 'rejectRegister')"
-            :borderless="!(status == 'register' || status == 'rejectRegister')"
-            v-model="defaultOccupation.salary"
-            :rules="[(val) => !!val || `${'กรุณากรอก เงินเดือน'}`]"
-            :label="`${'เงินเดือน'}`"
-          />
-        </div>
-      </div>
-      <div class="col-12 row">
-        <div class="col-3">
-          <q-input
-            :class="getClass(status == 'register' || status == 'rejectRegister')"
-            :outlined="status == 'register' || status == 'rejectRegister'"
-            dense
-            lazy-rules
-            autogrow
-            :readonly="!(status == 'register' || status == 'rejectRegister')"
-            :borderless="!(status == 'register' || status == 'rejectRegister')"
-            v-model="defaultOccupation.group"
-            :rules="[(val) => !!val || `${'กรุณากรอก กลุ่ม/ฝ่าย'}`]"
-            :label="`${'กลุ่ม/ฝ่าย'}`"
-          />
-        </div>
-        <div class="col-3">
-          <q-input
-            class="q-pl-sm"
-            :class="getClass(status == 'register' || status == 'rejectRegister')"
-            :outlined="status == 'register' || status == 'rejectRegister'"
-            dense
-            lazy-rules
-            autogrow
-            :readonly="!(status == 'register' || status == 'rejectRegister')"
-            :borderless="!(status == 'register' || status == 'rejectRegister')"
-            v-model="defaultOccupation.pile"
-            :rules="[(val) => !!val || `${'กรุณากรอก กอง'}`]"
-            :label="`${'กอง'}`"
-          />
-        </div>
-        <div class="col-3">
-          <q-input
-            class="q-pl-sm"
-            :class="getClass(status == 'register' || status == 'rejectRegister')"
-            :outlined="status == 'register' || status == 'rejectRegister'"
-            dense
-            lazy-rules
-            autogrow
-            :readonly="!(status == 'register' || status == 'rejectRegister')"
-            :borderless="!(status == 'register' || status == 'rejectRegister')"
-            v-model="defaultOccupation.org"
-            :rules="[(val) => !!val || `${'กรุณากรอก สังกัด'}`]"
-            :label="`${'สังกัด'}`"
-          />
-        </div>
-        <div class="col-3">
-          <q-input
-            class="q-pl-sm"
-            :class="getClass(status == 'register' || status == 'rejectRegister')"
-            :outlined="status == 'register' || status == 'rejectRegister'"
-            dense
-            :counter="status == 'register' || status == 'rejectRegister' ? true : false"
-            maxlength="10"
-            lazy-rules
-            type="tel"
-            mask="##########"
-            autogrow
-            :readonly="!(status == 'register' || status == 'rejectRegister')"
-            :borderless="!(status == 'register' || status == 'rejectRegister')"
-            v-model="defaultOccupation.tel"
-            :rules="[
-              (val) => !!val || `${'กรุณากรอก เบอร์โทรที่ทำงาน'}`,
-              (val) => val.length == 10 || `${'กรุณากรอก เบอร์โทรที่ทำงาน'}`,
-              (val) => /^[0-9]*$/.test(val) || 'กรุณากรอก เบอร์โทรที่ทำงานให้ถูกต้อง'
-            ]"
-            :label="`${'เบอร์โทรที่ทำงาน'}`"
-          />
-        </div>
-      </div>
-    </div>
-  </q-form>
+	<HeaderTop
+		v-model:edit="edit"
+		header="ตำแหน่งปัจจุบัน"
+		icon="mdi-briefcase"
+		:addData="true"
+		:editOnly="false"
+		:editData="false"
+	/>
+	<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">
+				<q-radio
+					v-model="defaultOccupation.positionType"
+					label="ลูกจ้างประจำ"
+					color="teal"
+					val="prem"
+					:disable="!(status == 'register' || status == 'rejectRegister')"
+				/>
+				<q-radio
+					v-model="defaultOccupation.positionType"
+					label="ลูกจ้างชั่วคราว"
+					color="teal"
+					val="temp"
+					:disable="!(status == 'register' || status == 'rejectRegister')"
+				/>
+				<q-radio
+					v-model="defaultOccupation.positionType"
+					label="ผู้ปฏิบัติงานอื่นในกรุงเทพมหานคร"
+					color="teal"
+					val="other"
+					:disable="!(status == 'register' || status == 'rejectRegister')"
+				/>
+			</div>
+			<div class="col-12 row">
+				<div class="col-3">
+					<q-input
+						:class="getClass(status == 'register' || status == 'rejectRegister')"
+						:outlined="status == 'register' || status == 'rejectRegister'"
+						dense
+						lazy-rules
+						autogrow
+						:readonly="!(status == 'register' || status == 'rejectRegister')"
+						:borderless="!(status == 'register' || status == 'rejectRegister')"
+						v-model="defaultOccupation.position"
+						:rules="[(val) => !!val || `${'กรุณากรอก ชื่อตำแหน่ง'}`]"
+						:label="`${'ชื่อตำแหน่ง'}`"
+					/>
+				</div>
+				<div class="col-3">
+					<q-input
+						class="q-pl-sm"
+						:class="getClass(status == 'register' || status == 'rejectRegister')"
+						:outlined="status == 'register' || status == 'rejectRegister'"
+						dense
+						lazy-rules
+						type="number"
+						autogrow
+						:readonly="!(status == 'register' || status == 'rejectRegister')"
+						:borderless="!(status == 'register' || status == 'rejectRegister')"
+						v-model="defaultOccupation.salary"
+						:rules="[(val) => !!val || `${'กรุณากรอก เงินเดือน'}`]"
+						:label="`${'เงินเดือน'}`"
+					/>
+				</div>
+			</div>
+			<div class="col-12 row">
+				<div class="col-3">
+					<q-input
+						:class="getClass(status == 'register' || status == 'rejectRegister')"
+						:outlined="status == 'register' || status == 'rejectRegister'"
+						dense
+						lazy-rules
+						autogrow
+						:readonly="!(status == 'register' || status == 'rejectRegister')"
+						:borderless="!(status == 'register' || status == 'rejectRegister')"
+						v-model="defaultOccupation.group"
+						:rules="[(val) => !!val || `${'กรุณากรอก กลุ่ม/ฝ่าย'}`]"
+						:label="`${'กลุ่ม/ฝ่าย'}`"
+					/>
+				</div>
+				<div class="col-3">
+					<q-input
+						class="q-pl-sm"
+						:class="getClass(status == 'register' || status == 'rejectRegister')"
+						:outlined="status == 'register' || status == 'rejectRegister'"
+						dense
+						lazy-rules
+						autogrow
+						:readonly="!(status == 'register' || status == 'rejectRegister')"
+						:borderless="!(status == 'register' || status == 'rejectRegister')"
+						v-model="defaultOccupation.pile"
+						:rules="[(val) => !!val || `${'กรุณากรอก กอง'}`]"
+						:label="`${'กอง'}`"
+					/>
+				</div>
+				<div class="col-3">
+					<q-input
+						class="q-pl-sm"
+						:class="getClass(status == 'register' || status == 'rejectRegister')"
+						:outlined="status == 'register' || status == 'rejectRegister'"
+						dense
+						lazy-rules
+						autogrow
+						:readonly="!(status == 'register' || status == 'rejectRegister')"
+						:borderless="!(status == 'register' || status == 'rejectRegister')"
+						v-model="defaultOccupation.org"
+						:rules="[(val) => !!val || `${'กรุณากรอก สังกัด'}`]"
+						:label="`${'สังกัด'}`"
+					/>
+				</div>
+				<div class="col-3">
+					<q-input
+						class="q-pl-sm"
+						:class="getClass(status == 'register' || status == 'rejectRegister')"
+						:outlined="status == 'register' || status == 'rejectRegister'"
+						dense
+						:counter="status == 'register' || status == 'rejectRegister' ? true : false"
+						maxlength="10"
+						lazy-rules
+						type="tel"
+						mask="##########"
+						autogrow
+						:readonly="!(status == 'register' || status == 'rejectRegister')"
+						:borderless="!(status == 'register' || status == 'rejectRegister')"
+						v-model="defaultOccupation.tel"
+						:rules="[
+							(val) => !!val || '* กรุณากรอกข้อมูลหมายเลขโทรศัพท์',
+							(val) =>
+								(val.length >= 9 && val.length <= 10) || 'กรุณากรอกข้อมูลหมายเลขโทรศัพท์ให้ถูกต้อง'
+						]"
+						:label="`${'เบอร์โทรที่ทำงาน'}`"
+					/>
+				</div>
+			</div>
+		</div>
+	</q-form>
 </template>
 <script setup lang="ts">
 import { ref, onMounted, watch } from 'vue'
@@ -150,14 +150,14 @@ import { defaultOccupation, changeData } from '@/modules/01_exam/interface/index
 import HeaderTop from '@/components/top.vue'
 
 const props = defineProps({
-  status: {
-    type: String,
-    required: true
-  },
-  form: {
-    type: Object,
-    required: true
-  }
+	status: {
+		type: String,
+		required: true
+	},
+	form: {
+		type: Object,
+		required: true
+	}
 })
 const emit = defineEmits(['update:form'])
 
@@ -173,46 +173,46 @@ const examId = ref<string>(route.params.id.toString())
 const positionId = ref<string>(route.params.positionId.toString())
 
 watch(myform, async (count: any, prevCount: any) => {
-  emit('update:form', count)
+	emit('update:form', count)
 })
 
 watch(defaultOccupation, async (count: Occupation, prevCount: Occupation) => {
-  await changeData('occupation', count)
+	await changeData('occupation', count)
 })
 
 onMounted(async () => {
-  await fetchData()
+	await fetchData()
 })
 
 const fetchData = async () => {
-  loaderPage(true)
-  await http
-    .get(config.API.candidateOccupation(examId.value, positionId.value))
-    .then((res) => {
-      const data = res.data.result
-      if (data != null) {
-        defaultOccupation.value.org = data.occupationOrg
-        defaultOccupation.value.pile = data.occupationPile
-        defaultOccupation.value.group = data.occupationGroup
-        defaultOccupation.value.salary = data.occupationSalary
-        defaultOccupation.value.position = data.occupationPosition
-        defaultOccupation.value.positionType =
-          data.occupationPositionType == null ? 'other' : data.occupationPositionType
-        defaultOccupation.value.tel = data.occupationTelephone
-      }
-    })
-    .catch((e) => {
-      messageError($q, e)
-    })
-    .finally(() => {
-      loaderPage(false)
-    })
+	loaderPage(true)
+	await http
+		.get(config.API.candidateOccupation(examId.value, positionId.value))
+		.then((res) => {
+			const data = res.data.result
+			if (data != null) {
+				defaultOccupation.value.org = data.occupationOrg
+				defaultOccupation.value.pile = data.occupationPile
+				defaultOccupation.value.group = data.occupationGroup
+				defaultOccupation.value.salary = data.occupationSalary
+				defaultOccupation.value.position = data.occupationPosition
+				defaultOccupation.value.positionType =
+					data.occupationPositionType == null ? 'other' : data.occupationPositionType
+				defaultOccupation.value.tel = data.occupationTelephone
+			}
+		})
+		.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
+	}
 }
 </script>

From 614ef79050fef704b87b64310b9bfeb5498a2b2a Mon Sep 17 00:00:00 2001
From: Suphonchai Phoonsawat <suphonchai.ph@gmail.com>
Date: Sun, 15 Oct 2023 19:46:36 +0700
Subject: [PATCH 2/3] fix CRLF = LF

---
 entrypoint.sh | 1 +
 1 file changed, 1 insertion(+)

diff --git a/entrypoint.sh b/entrypoint.sh
index 38b8d06..cc1ae84 100644
--- a/entrypoint.sh
+++ b/entrypoint.sh
@@ -14,3 +14,4 @@ done
 
 echo "Starting Nginx"
 nginx -g 'daemon off;'
+

From da8d718b9549153bd7782ff48820368cc7b70045 Mon Sep 17 00:00:00 2001
From: Suphonchai Phoonsawat <suphonchai.ph@gmail.com>
Date: Sun, 15 Oct 2023 20:28:43 +0700
Subject: [PATCH 3/3] check telephone number

---
 src/modules/01_exam/components/Form/Contact.vue     | 3 ++-
 src/modules/01_exam/components/Form/Information.vue | 3 ++-
 src/modules/01_exam/components/Form/Occupation.vue  | 3 ++-
 3 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/modules/01_exam/components/Form/Contact.vue b/src/modules/01_exam/components/Form/Contact.vue
index b237ead..a8e8cfc 100644
--- a/src/modules/01_exam/components/Form/Contact.vue
+++ b/src/modules/01_exam/components/Form/Contact.vue
@@ -84,7 +84,8 @@
 					:rules="[
 						(val) => !!val || '* กรุณากรอกข้อมูลหมายเลขโทรศัพท์',
 						(val) =>
-							(val.length >= 9 && val.length <= 10) || 'กรุณากรอกข้อมูลหมายเลขโทรศัพท์ให้ถูกต้อง'
+							(val.length >= 9 && val.length <= 10 && val.startsWith('0')) ||
+							'กรุณากรอกข้อมูลหมายเลขโทรศัพท์ให้ถูกต้อง'
 					]"
 				/>
 			</div>
diff --git a/src/modules/01_exam/components/Form/Information.vue b/src/modules/01_exam/components/Form/Information.vue
index 506abd8..172ddef 100644
--- a/src/modules/01_exam/components/Form/Information.vue
+++ b/src/modules/01_exam/components/Form/Information.vue
@@ -226,7 +226,8 @@
 					:rules="[
 						(val) => !!val || '* กรุณากรอกข้อมูลหมายเลขโทรศัพท์',
 						(val) =>
-							(val.length >= 9 && val.length <= 10) || 'กรุณากรอกข้อมูลหมายเลขโทรศัพท์ให้ถูกต้อง'
+							(val.length >= 9 && val.length <= 10 && val.startsWith('0')) ||
+							'กรุณากรอกข้อมูลหมายเลขโทรศัพท์ให้ถูกต้อง'
 					]"
 				/>
 			</div>
diff --git a/src/modules/01_exam/components/Form/Occupation.vue b/src/modules/01_exam/components/Form/Occupation.vue
index 1c17631..20ceaf3 100644
--- a/src/modules/01_exam/components/Form/Occupation.vue
+++ b/src/modules/01_exam/components/Form/Occupation.vue
@@ -128,7 +128,8 @@
 						:rules="[
 							(val) => !!val || '* กรุณากรอกข้อมูลหมายเลขโทรศัพท์',
 							(val) =>
-								(val.length >= 9 && val.length <= 10) || 'กรุณากรอกข้อมูลหมายเลขโทรศัพท์ให้ถูกต้อง'
+								(val.length >= 9 && val.length <= 10 && val.startsWith('0')) ||
+								'กรุณากรอกข้อมูลหมายเลขโทรศัพท์ให้ถูกต้อง'
 						]"
 						:label="`${'เบอร์โทรที่ทำงาน'}`"
 					/>