From 2f6ac4318cbda7fbe152a9ca5a1c0f4e03e698aa Mon Sep 17 00:00:00 2001
From: Suphonchai Phoonsawat <suphonchai.ph@gmail.com>
Date: Sun, 15 Oct 2023 16:46:06 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B9=80=E0=B8=8A=E0=B9=87=E0=B8=84=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

---
 .../03_recruiting/components/Contact.vue      | 313 +++---
 .../03_recruiting/components/Information.vue  | 959 ++++++++++--------
 .../03_recruiting/components/Occupation.vue   | 409 +++++---
 3 files changed, 951 insertions(+), 730 deletions(-)

diff --git a/src/modules/03_recruiting/components/Contact.vue b/src/modules/03_recruiting/components/Contact.vue
index 725f1348c..ead430abe 100644
--- a/src/modules/03_recruiting/components/Contact.vue
+++ b/src/modules/03_recruiting/components/Contact.vue
@@ -1,109 +1,154 @@
 <!-- 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 == 'checkRegister' || status == 'payment')"
-          :readonly="!(status == 'checkRegister' || status == 'payment')"
-          :borderless="!(status == 'checkRegister' || status == 'payment')"
-          :rules="[(val) => !!val || `${'กรุณาเลือก คำนำหน้า'}`]"
-          :outlined="status == 'checkRegister' || status == 'payment'"
-          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 == 'checkRegister' || status == 'payment')"
-          :outlined="status == 'checkRegister' || status == 'payment'"
-          dense
-          lazy-rules
-          :readonly="!(status == 'checkRegister' || status == 'payment')"
-          :borderless="!(status == 'checkRegister' || status == 'payment')"
-          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 == 'checkRegister' || status == 'payment')"
-          :outlined="status == 'checkRegister' || status == 'payment'"
-          dense
-          lazy-rules
-          :readonly="!(status == 'checkRegister' || status == 'payment')"
-          :borderless="!(status == 'checkRegister' || status == 'payment')"
-          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 == 'checkRegister' || status == 'payment')"
-          :outlined="status == 'checkRegister' || status == 'payment'"
-          dense
-          lazy-rules
-          :readonly="!(status == 'checkRegister' || status == 'payment')"
-          :borderless="!(status == 'checkRegister' || status == 'payment')"
-          v-model="defaultContact.contactRelations"
-          :rules="[(val) => !!val || `${'กรุณากรอกความสัมพันธ์'}`]"
-          :label="`${'เกี่ยวข้องเป็น'}`"
-        />
-      </div>
-      <div class="col-xs-12 col-sm-3 col-md-4">
-        <q-input
-          :outlined="status == 'checkRegister' || status == 'payment'"
-          dense
-          :counter="
-            status == 'checkRegister' || status == 'payment' ? true : false
-          "
-          lazy-rules
-          type="tel"
-          mask="##########"
-          maxlength="10"
-          :class="getClass(status == 'checkRegister' || status == 'payment')"
-          :readonly="!(status == 'checkRegister' || status == 'payment')"
-          :borderless="!(status == 'checkRegister' || status == 'payment')"
-          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 == 'checkRegister' || status == 'payment'
+						)
+					"
+					:readonly="
+						!(status == 'checkRegister' || status == 'payment')
+					"
+					:borderless="
+						!(status == 'checkRegister' || status == 'payment')
+					"
+					:rules="[(val) => !!val || `${'กรุณาเลือก คำนำหน้า'}`]"
+					:outlined="status == 'checkRegister' || status == 'payment'"
+					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 == 'checkRegister' || status == 'payment'
+						)
+					"
+					:outlined="status == 'checkRegister' || status == 'payment'"
+					dense
+					lazy-rules
+					:readonly="
+						!(status == 'checkRegister' || status == 'payment')
+					"
+					:borderless="
+						!(status == 'checkRegister' || status == 'payment')
+					"
+					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 == 'checkRegister' || status == 'payment'
+						)
+					"
+					:outlined="status == 'checkRegister' || status == 'payment'"
+					dense
+					lazy-rules
+					:readonly="
+						!(status == 'checkRegister' || status == 'payment')
+					"
+					:borderless="
+						!(status == 'checkRegister' || status == 'payment')
+					"
+					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 == 'checkRegister' || status == 'payment'
+						)
+					"
+					:outlined="status == 'checkRegister' || status == 'payment'"
+					dense
+					lazy-rules
+					:readonly="
+						!(status == 'checkRegister' || status == 'payment')
+					"
+					:borderless="
+						!(status == 'checkRegister' || status == 'payment')
+					"
+					v-model="defaultContact.contactRelations"
+					:rules="[(val) => !!val || `${'กรุณากรอกความสัมพันธ์'}`]"
+					:label="`${'เกี่ยวข้องเป็น'}`"
+				/>
+			</div>
+			<div class="col-xs-12 col-sm-3 col-md-4">
+				<q-input
+					:outlined="status == 'checkRegister' || status == 'payment'"
+					dense
+					:counter="
+						status == 'checkRegister' || status == 'payment'
+							? true
+							: false
+					"
+					lazy-rules
+					type="tel"
+					mask="##########"
+					maxlength="10"
+					:class="
+						getClass(
+							status == 'checkRegister' || status == 'payment'
+						)
+					"
+					:readonly="
+						!(status == 'checkRegister' || status == 'payment')
+					"
+					:borderless="
+						!(status == 'checkRegister' || status == 'payment')
+					"
+					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";
 import http from "@/plugins/http";
 import config from "@/app.config";
 import type {
-  Contact,
-  DataOption,
+	Contact,
+	DataOption,
 } from "@/modules/03_recruiting/interface/index/Main";
 import {
-  defaultContact,
-  changeData,
+	defaultContact,
+	changeData,
 } from "@/modules/03_recruiting/interface/index/Main";
 import HeaderTop from "@/modules/03_recruiting/components/top.vue";
 import { useRoute } from "vue-router";
@@ -112,18 +157,18 @@ import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar } from "quasar";
 
 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"]);
 
@@ -136,43 +181,43 @@ const route = useRoute();
 const candidateId = ref<string>(route.params.candidateId.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 () => {
-  showLoader();
-  await http
-    .get(config.API.candidateContact(candidateId.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(() => {
-      hideLoader();
-    });
+	showLoader();
+	await http
+		.get(config.API.candidateContact(candidateId.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(() => {
+			hideLoader();
+		});
 };
 
 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/03_recruiting/components/Information.vue b/src/modules/03_recruiting/components/Information.vue
index 6f8b56e88..bc8c7bb45 100644
--- a/src/modules/03_recruiting/components/Information.vue
+++ b/src/modules/03_recruiting/components/Information.vue
@@ -1,91 +1,127 @@
 <!-- card ข้อมูลส่วนตัว -->
 <template>
-  <HeaderTop
-    v-model:edit="edit"
-    header="ข้อมูลส่วนตัว"
-    icon="mdi-account"
-    :addData="true"
-    :editOnly="false"
-    :editData="false"
-  />
-  <!-- :changeBtn="changeBtn" -->
-  <q-form
-    ref="myform"
-    class="col-12 row q-col-gutter-x-sm justify-center q-col-gutter-sm"
-  >
-    <div
-      class="row col-xs-12 col-sm-12 col-md-10 items-center q-col-gutter-x-sm q-col-gutter-y-xs"
-    >
-      <div class="col-xs-12 col-sm-4 col-md-4">
-        <q-input
-          :class="getClass(status == 'checkRegister' || status == 'payment')"
-          :outlined="status == 'checkRegister' || status == 'payment'"
-          dense
-          type="tel"
-          mask="#############"
-          :counter="
-            status == 'checkRegister' || status == 'payment' ? true : false
-          "
-          lazy-rules
-          :readonly="!(status == 'checkRegister' || status == 'payment')"
-          :borderless="!(status == 'checkRegister' || status == 'payment')"
-          v-model="defaultInformation.cardid"
-          maxlength="13"
-          :rules="[
-            (val) => val.length == 13 || `${'กรุณากรอก เลขประจำตัวประชาชน'}`,
-            (val) =>
-              /^[0-9]*$/.test(val) ||
-              `${'กรุณากรอกเลขประจำตัวประชาชนให้ถูกต้อง'}`,
-          ]"
-          label="เลขประจำตัวประชาชน"
-        />
-      </div>
-      <div class="col-xs-12 col-sm-2 col-md-2">
-        <q-select
-          :class="getClass(status == 'checkRegister' || status == 'payment')"
-          :readonly="!(status == 'checkRegister' || status == 'payment')"
-          :borderless="!(status == 'checkRegister' || status == 'payment')"
-          :rules="[(val) => !!val || `${'กรุณาเลือก คำนำหน้าชื่อ'}`]"
-          :outlined="status == 'checkRegister' || status == 'payment'"
-          dense
-          lazy-rules
-          v-model="defaultInformation.prefixId"
-          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 == 'checkRegister' || status == 'payment')"
-          :outlined="status == 'checkRegister' || status == 'payment'"
-          dense
-          lazy-rules
-          :readonly="!(status == 'checkRegister' || status == 'payment')"
-          :borderless="!(status == 'checkRegister' || status == 'payment')"
-          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 == 'checkRegister' || status == 'payment')"
-          :outlined="status == 'checkRegister' || status == 'payment'"
-          dense
-          lazy-rules
-          :readonly="!(status == 'checkRegister' || status == 'payment')"
-          :borderless="!(status == 'checkRegister' || status == 'payment')"
-          v-model="defaultInformation.lastname"
-          :rules="[(val) => !!val || `${'กรุณากรอก นามสกุล'}`]"
-          :label="`${'นามสกุล'}`"
-        />
-      </div>
-      <div class="col-xs-12 col-sm-3 col-md-3">
-        <!-- <q-input
+	<HeaderTop
+		v-model:edit="edit"
+		header="ข้อมูลส่วนตัว"
+		icon="mdi-account"
+		:addData="true"
+		:editOnly="false"
+		:editData="false"
+	/>
+	<!-- :changeBtn="changeBtn" -->
+	<q-form
+		ref="myform"
+		class="col-12 row q-col-gutter-x-sm justify-center q-col-gutter-sm"
+	>
+		<div
+			class="row col-xs-12 col-sm-12 col-md-10 items-center q-col-gutter-x-sm q-col-gutter-y-xs"
+		>
+			<div class="col-xs-12 col-sm-4 col-md-4">
+				<q-input
+					:class="
+						getClass(
+							status == 'checkRegister' || status == 'payment'
+						)
+					"
+					:outlined="status == 'checkRegister' || status == 'payment'"
+					dense
+					type="tel"
+					mask="#############"
+					:counter="
+						status == 'checkRegister' || status == 'payment'
+							? true
+							: false
+					"
+					lazy-rules
+					:readonly="
+						!(status == 'checkRegister' || status == 'payment')
+					"
+					:borderless="
+						!(status == 'checkRegister' || status == 'payment')
+					"
+					v-model="defaultInformation.cardid"
+					maxlength="13"
+					:rules="[
+						(val) =>
+							val.length == 13 ||
+							`${'กรุณากรอก เลขประจำตัวประชาชน'}`,
+						(val) =>
+							/^[0-9]*$/.test(val) ||
+							`${'กรุณากรอกเลขประจำตัวประชาชนให้ถูกต้อง'}`,
+					]"
+					label="เลขประจำตัวประชาชน"
+				/>
+			</div>
+			<div class="col-xs-12 col-sm-2 col-md-2">
+				<q-select
+					:class="
+						getClass(
+							status == 'checkRegister' || status == 'payment'
+						)
+					"
+					:readonly="
+						!(status == 'checkRegister' || status == 'payment')
+					"
+					:borderless="
+						!(status == 'checkRegister' || status == 'payment')
+					"
+					:rules="[(val) => !!val || `${'กรุณาเลือก คำนำหน้าชื่อ'}`]"
+					:outlined="status == 'checkRegister' || status == 'payment'"
+					dense
+					lazy-rules
+					v-model="defaultInformation.prefixId"
+					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 == 'checkRegister' || status == 'payment'
+						)
+					"
+					:outlined="status == 'checkRegister' || status == 'payment'"
+					dense
+					lazy-rules
+					:readonly="
+						!(status == 'checkRegister' || status == 'payment')
+					"
+					:borderless="
+						!(status == 'checkRegister' || status == 'payment')
+					"
+					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 == 'checkRegister' || status == 'payment'
+						)
+					"
+					:outlined="status == 'checkRegister' || status == 'payment'"
+					dense
+					lazy-rules
+					:readonly="
+						!(status == 'checkRegister' || status == 'payment')
+					"
+					:borderless="
+						!(status == 'checkRegister' || status == 'payment')
+					"
+					v-model="defaultInformation.lastname"
+					:rules="[(val) => !!val || `${'กรุณากรอก นามสกุล'}`]"
+					:label="`${'นามสกุล'}`"
+				/>
+			</div>
+			<div class="col-xs-12 col-sm-3 col-md-3">
+				<!-- <q-input
           :class="getClass(status == 'checkRegister' || status == 'payment')"
           :outlined="status == 'checkRegister' || status == 'payment'"
           dense
@@ -96,134 +132,186 @@
           :rules="[(val) => !!val || `${'กรุณากรอก สัญชาติ'}`]"
           :label="`${'สัญชาติ'}`"
         /> -->
-        <q-select
-          :class="getClass(status == 'checkRegister' || status == 'payment')"
-          :readonly="!(status == 'checkRegister' || status == 'payment')"
-          :borderless="!(status == 'checkRegister' || status == 'payment')"
-          :rules="[(val) => !!val || `${'กรุณากรอก สัญชาติ'}`]"
-          :outlined="status == 'checkRegister' || status == 'payment'"
-          dense
-          lazy-rules
-          v-model="defaultInformation.nationality"
-          :options="opNat"
-          :label="`${'สัญชาติ'}`"
-        />
-      </div>
-      <div class="col-xs-12 col-sm-3 col-md-3">
-        <q-select
-          :class="getClass(status == 'checkRegister' || status == 'payment')"
-          :readonly="!(status == 'checkRegister' || status == 'payment')"
-          :borderless="!(status == 'checkRegister' || status == 'payment')"
-          :rules="[(val) => !!val || `${'กรุณาเลือก ศาสนา'}`]"
-          :outlined="status == 'checkRegister' || status == 'payment'"
-          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 == 'checkRegister' || status == 'payment')"
-          @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 == 'checkRegister' || status == 'payment')
-              "
-              :outlined="status == 'checkRegister' || status == 'payment'"
-              dense
-              lazy-rules
-              :readonly="!(status == 'checkRegister' || status == 'payment')"
-              :borderless="!(status == 'checkRegister' || status == 'payment')"
-              :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 == 'checkRegister' || status == 'payment'
-                      ? 'color: var(--q-primary)'
-                      : 'color: var(--q-grey)'
-                  "
-                >
-                </q-icon>
-              </template>
-            </q-input>
-          </template>
-        </datepicker>
-      </div>
-      <div class="col-xs-12 col-sm-3 col-md-3 q-pb-md">
-        <q-input
-          :class="getClass(status == 'checkRegister' || status == 'payment')"
-          dense
-          lazy-rules
-          readonly
-          borderless
-          :style="
-            !(status == 'checkRegister' || status == 'payment')
-              ? ''
-              : 'padding:0 12px;'
-          "
-          :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 == 'checkRegister' || status == 'payment'"
-          dense
-          :counter="
-            status == 'checkRegister' || status == 'payment' ? true : false
-          "
-          lazy-rules
-          type="tel"
-          mask="##########"
-          maxlength="10"
-          :class="getClass(status == 'checkRegister' || status == 'payment')"
-          :readonly="!(status == 'checkRegister' || status == 'payment')"
-          :borderless="!(status == 'checkRegister' || status == 'payment')"
-          v-model="defaultInformation.tel"
-          :rules="[
-            (val) => !!val || `${'กรุณากรอก เบอร์โทร'}`,
-            (val) => val.length == 10 || `${'กรุณากรอก เบอร์โทร'}`,
-            (val) =>
-              /^[0-9]*$/.test(val) || `${'กรุณากรอกข้อมูลเบอร์โทรให้ถูกต้อง'}`,
-          ]"
-          :label="`${'เบอร์โทร'}`"
-        />
-      </div>
-      <!-- <div class="col-xs-12 col-sm-3 col-md-3">
+				<q-select
+					:class="
+						getClass(
+							status == 'checkRegister' || status == 'payment'
+						)
+					"
+					:readonly="
+						!(status == 'checkRegister' || status == 'payment')
+					"
+					:borderless="
+						!(status == 'checkRegister' || status == 'payment')
+					"
+					:rules="[(val) => !!val || `${'กรุณากรอก สัญชาติ'}`]"
+					:outlined="status == 'checkRegister' || status == 'payment'"
+					dense
+					lazy-rules
+					v-model="defaultInformation.nationality"
+					:options="opNat"
+					:label="`${'สัญชาติ'}`"
+				/>
+			</div>
+			<div class="col-xs-12 col-sm-3 col-md-3">
+				<q-select
+					:class="
+						getClass(
+							status == 'checkRegister' || status == 'payment'
+						)
+					"
+					:readonly="
+						!(status == 'checkRegister' || status == 'payment')
+					"
+					:borderless="
+						!(status == 'checkRegister' || status == 'payment')
+					"
+					:rules="[(val) => !!val || `${'กรุณาเลือก ศาสนา'}`]"
+					:outlined="status == 'checkRegister' || status == 'payment'"
+					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 == 'checkRegister' || status == 'payment')
+					"
+					@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 == 'checkRegister' ||
+										status == 'payment'
+								)
+							"
+							:outlined="
+								status == 'checkRegister' || status == 'payment'
+							"
+							dense
+							lazy-rules
+							:readonly="
+								!(
+									status == 'checkRegister' ||
+									status == 'payment'
+								)
+							"
+							:borderless="
+								!(
+									status == 'checkRegister' ||
+									status == 'payment'
+								)
+							"
+							: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 == 'checkRegister' ||
+										status == 'payment'
+											? 'color: var(--q-primary)'
+											: 'color: var(--q-grey)'
+									"
+								>
+								</q-icon>
+							</template>
+						</q-input>
+					</template>
+				</datepicker>
+			</div>
+			<div class="col-xs-12 col-sm-3 col-md-3 q-pb-md">
+				<q-input
+					:class="
+						getClass(
+							status == 'checkRegister' || status == 'payment'
+						)
+					"
+					dense
+					lazy-rules
+					readonly
+					borderless
+					:style="
+						!(status == 'checkRegister' || status == 'payment')
+							? ''
+							: 'padding:0 12px;'
+					"
+					: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 == 'checkRegister' || status == 'payment'"
+					dense
+					:counter="
+						status == 'checkRegister' || status == 'payment'
+							? true
+							: false
+					"
+					lazy-rules
+					type="tel"
+					mask="##########"
+					maxlength="10"
+					:class="
+						getClass(
+							status == 'checkRegister' || status == 'payment'
+						)
+					"
+					:readonly="
+						!(status == 'checkRegister' || status == 'payment')
+					"
+					:borderless="
+						!(status == 'checkRegister' || status == 'payment')
+					"
+					v-model="defaultInformation.tel"
+					:rules="[
+						(val) => !!val || '* กรุณากรอกข้อมูลหมายเลขโทรศัพท์',
+						(val) =>
+							(val.length >= 9 && val.length <= 10) ||
+							'กรุณากรอกข้อมูลหมายเลขโทรศัพท์ให้ถูกต้อง',
+					]"
+					:label="`${'เบอร์โทร'}`"
+				/>
+			</div>
+			<!-- <div class="col-xs-12 col-sm-3 col-md-3">
         <q-select
           :class="getClass(status == 'checkRegister' || status == 'payment')"
           :readonly="!(status == 'checkRegister' || status == 'payment')"
@@ -313,7 +401,7 @@
           </template>
         </datepicker>
       </div> -->
-      <!-- <div class="col-xs-12 col-sm-3 col-md-3">
+			<!-- <div class="col-xs-12 col-sm-3 col-md-3">
         <q-input
           :outlined="status == 'checkRegister' || status == 'payment'"
           dense
@@ -337,53 +425,65 @@
           :label="`${'โทรศัพท์มือถือ'}`"
         />
       </div> -->
-      <div class="col-xs-12 col-sm-3 col-md-3 q-pb-md">
-        <q-input
-          :class="getClass(status == 'checkRegister' || status == 'payment')"
-          dense
-          lazy-rules
-          readonly
-          borderless
-          style="padding: 0 12px"
-          v-model="defaultInformation.email"
-          label="E-mail address"
-        />
-      </div>
-    </div>
-    <div class="row col-xs-12 col-sm-3 col-md-2 justify-center">
-      <div
-        class="containerimage row justify-center col-xs-6 col-sm-10 col-md-12"
-      >
-        <label for="file-upload" class="col-12 row">
-          <q-img v-if="img == ''" src="@/assets/avatar_user.jpg" class="col-12">
-            <div
-              class="overlay"
-              v-if="status == 'checkRegister' || status == 'payment'"
-            >
-              <q-icon name="mdi-camera" />
-              <br />อัปเดต
-            </div>
-          </q-img>
-          <q-img v-else :src="img" class="col-12">
-            <div
-              class="overlay"
-              v-if="status == 'checkRegister' || status == 'payment'"
-            >
-              <q-icon name="mdi-camera" />
-              <br />อัปเดต
-            </div>
-          </q-img>
-        </label>
-        <input
-          id="file-upload"
-          type="file"
-          accept="image/*"
-          @change="uploadImage"
-          v-if="status == 'checkRegister' || status == 'payment'"
-        />
-      </div>
-    </div>
-    <!-- <div class="col-xs-12 col-sm-9 col-md-12">
+			<div class="col-xs-12 col-sm-3 col-md-3 q-pb-md">
+				<q-input
+					:class="
+						getClass(
+							status == 'checkRegister' || status == 'payment'
+						)
+					"
+					dense
+					lazy-rules
+					readonly
+					borderless
+					style="padding: 0 12px"
+					v-model="defaultInformation.email"
+					label="E-mail address"
+				/>
+			</div>
+		</div>
+		<div class="row col-xs-12 col-sm-3 col-md-2 justify-center">
+			<div
+				class="containerimage row justify-center col-xs-6 col-sm-10 col-md-12"
+			>
+				<label for="file-upload" class="col-12 row">
+					<q-img
+						v-if="img == ''"
+						src="@/assets/avatar_user.jpg"
+						class="col-12"
+					>
+						<div
+							class="overlay"
+							v-if="
+								status == 'checkRegister' || status == 'payment'
+							"
+						>
+							<q-icon name="mdi-camera" />
+							<br />อัปเดต
+						</div>
+					</q-img>
+					<q-img v-else :src="img" class="col-12">
+						<div
+							class="overlay"
+							v-if="
+								status == 'checkRegister' || status == 'payment'
+							"
+						>
+							<q-icon name="mdi-camera" />
+							<br />อัปเดต
+						</div>
+					</q-img>
+				</label>
+				<input
+					id="file-upload"
+					type="file"
+					accept="image/*"
+					@change="uploadImage"
+					v-if="status == 'checkRegister' || status == 'payment'"
+				/>
+			</div>
+		</div>
+		<!-- <div class="col-xs-12 col-sm-9 col-md-12">
       <q-input
         :class="getClass(status == 'checkRegister' || status == 'payment')"
         :outlined="status == 'checkRegister' || status == 'payment'"
@@ -396,7 +496,7 @@
         type="textarea"
       />
     </div> -->
-  </q-form>
+	</q-form>
 </template>
 <script setup lang="ts">
 import { ref, onMounted, watch } from "vue";
@@ -405,12 +505,12 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 import type { PropType } from "vue";
 import type {
-  Information,
-  DataOption,
+	Information,
+	DataOption,
 } from "@/modules/03_recruiting/interface/index/Main";
 import {
-  defaultInformation,
-  changeData,
+	defaultInformation,
+	changeData,
 } from "@/modules/03_recruiting/interface/index/Main";
 import HeaderTop from "@/modules/03_recruiting/components/top.vue";
 import { useRoute } from "vue-router";
@@ -418,32 +518,32 @@ import keycloak from "@/plugins/keycloak";
 import { useQuasar } from "quasar";
 
 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 $q = useQuasar();
 const mixin = useCounterMixin();
 const { date2Thai, calAge, modalError, success, notifyError, calAgeYear } =
-  mixin;
+	mixin;
 const districtOptions = ref<DataOption[]>([]);
 const route = useRoute();
 const candidateId = ref<string>(route.params.candidateId.toString());
@@ -459,192 +559,197 @@ const { messageError, showLoader, hideLoader } = mixin;
 const emit = defineEmits(["update:form"]);
 
 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);
-  }
+	defaultInformation,
+	async (count: Information, prevCount: Information) => {
+		await changeData("information", count);
+	}
 );
 
 onMounted(async () => {
-  await fetchData();
-  await fetchImgData();
-  if (defaultInformation.value.provinceId != null)
-    await fetchDistrict(defaultInformation.value.provinceId);
+	await fetchData();
+	await fetchImgData();
+	if (defaultInformation.value.provinceId != null)
+		await fetchDistrict(defaultInformation.value.provinceId);
 });
 
 const fetchData = async () => {
-  showLoader();
-  await http
-    .get(config.API.candidateInformation(candidateId.value))
-    .then((res) => {
-      const data = res.data.result;
-      defaultInformation.value.prefixId = data.prefixId;
-      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(() => {
-      hideLoader();
-    });
+	showLoader();
+	await http
+		.get(config.API.candidateInformation(candidateId.value))
+		.then((res) => {
+			const data = res.data.result;
+			defaultInformation.value.prefixId = data.prefixId;
+			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(() => {
+			hideLoader();
+		});
 };
 
 const fetchImgData = async () => {
-  showLoader();
-  await http
-    .get(config.API.candidateProfile(candidateId.value))
-    .then((res) => {
-      const data = res.data.result;
-      img.value = data;
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      hideLoader();
-    });
+	showLoader();
+	await http
+		.get(config.API.candidateProfile(candidateId.value))
+		.then((res) => {
+			const data = res.data.result;
+			img.value = data;
+		})
+		.catch((e) => {
+			messageError($q, e);
+		})
+		.finally(async () => {
+			hideLoader();
+		});
 };
 
 const uploadImage = async (e: any) => {
-  let input = e.target.files;
-  if (input.length > 0) {
-    const formData = new FormData();
-    formData.append("", input[0]);
-    await http
-      .put(config.API.candidateProfile(candidateId.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]);
+		await http
+			.put(config.API.candidateProfile(candidateId.value), formData)
+			.then((res) => {
+				success($q, "อัปโหลดรูปสำเร็จ");
+			})
+			.catch((e) => {
+				messageError($q, e);
+			})
+			.finally(async () => {
+				await fetchImgData();
+				fileProfile.value = [];
+			});
+		return;
+	}
 };
 
 const selectProvince = (val: string) => {
-  defaultInformation.value.districtId = "";
-  myform.value.resetValidation();
-  fetchDistrict(val);
+	defaultInformation.value.districtId = "";
+	myform.value.resetValidation();
+	fetchDistrict(val);
 };
 
 const fetchDistrict = async (id: string) => {
-  showLoader();
-  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(() => {
-      hideLoader();
-    });
+	showLoader();
+	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(() => {
+			hideLoader();
+		});
 };
 
 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 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");
+	//     }
+	//   }
 };
 </script>
 
 <style>
 .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/03_recruiting/components/Occupation.vue b/src/modules/03_recruiting/components/Occupation.vue
index 67784ce74..48ab56347 100644
--- a/src/modules/03_recruiting/components/Occupation.vue
+++ b/src/modules/03_recruiting/components/Occupation.vue
@@ -1,139 +1,210 @@
 <!-- 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">
-      <div class="col-12 q-pb-sm">
-        <q-radio
-          v-model="defaultOccupation.positionType"
-          label="ลูกจ้างประจำ"
-          color="teal"
-          val="prem"
-          :disable="!(status == 'checkRegister' || status == 'payment')"
-        />
-        <q-radio
-          v-model="defaultOccupation.positionType"
-          label="ลูกจ้างชั่วคราว"
-          color="teal"
-          val="temp"
-          :disable="!(status == 'checkRegister' || status == 'payment')"
-        />
-        <q-radio
-          v-model="defaultOccupation.positionType"
-          label="ผู้ปฏิบัติงานอื่นในกรุงเทพมหานคร"
-          color="teal"
-          val="other"
-          :disable="!(status == 'checkRegister' || status == 'payment')"
-        />
-      </div>
-      <div class="col-12 row q-col-gutter-sm">
-        <div class="col-4">
-          <q-input
-            :class="getClass(status == 'checkRegister' || status == 'payment')"
-            :outlined="status == 'checkRegister' || status == 'payment'"
-            dense
-            lazy-rules
-            autogrow
-            :readonly="!(status == 'checkRegister' || status == 'payment')"
-            :borderless="!(status == 'checkRegister' || status == 'payment')"
-            v-model="defaultOccupation.position"
-            :rules="[(val) => !!val || `${'กรุณากรอก ชื่อตำแหน่ง'}`]"
-            :label="`${'ชื่อตำแหน่ง'}`"
-          />
-        </div>
-        <div class="col-4">
-          <q-input
-            :class="getClass(status == 'checkRegister' || status == 'payment')"
-            :outlined="status == 'checkRegister' || status == 'payment'"
-            dense
-            lazy-rules
-            type="number"
-            autogrow
-            :readonly="!(status == 'checkRegister' || status == 'payment')"
-            :borderless="!(status == 'checkRegister' || status == 'payment')"
-            v-model="defaultOccupation.salary"
-            :rules="[(val) => !!val || `${'กรุณากรอก เงินเดือน'}`]"
-            :label="`${'เงินเดือน'}`"
-          />
-        </div>
+	<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">
+			<div class="col-12 q-pb-sm">
+				<q-radio
+					v-model="defaultOccupation.positionType"
+					label="ลูกจ้างประจำ"
+					color="teal"
+					val="prem"
+					:disable="
+						!(status == 'checkRegister' || status == 'payment')
+					"
+				/>
+				<q-radio
+					v-model="defaultOccupation.positionType"
+					label="ลูกจ้างชั่วคราว"
+					color="teal"
+					val="temp"
+					:disable="
+						!(status == 'checkRegister' || status == 'payment')
+					"
+				/>
+				<q-radio
+					v-model="defaultOccupation.positionType"
+					label="ผู้ปฏิบัติงานอื่นในกรุงเทพมหานคร"
+					color="teal"
+					val="other"
+					:disable="
+						!(status == 'checkRegister' || status == 'payment')
+					"
+				/>
+			</div>
+			<div class="col-12 row q-col-gutter-sm">
+				<div class="col-4">
+					<q-input
+						:class="
+							getClass(
+								status == 'checkRegister' || status == 'payment'
+							)
+						"
+						:outlined="
+							status == 'checkRegister' || status == 'payment'
+						"
+						dense
+						lazy-rules
+						autogrow
+						:readonly="
+							!(status == 'checkRegister' || status == 'payment')
+						"
+						:borderless="
+							!(status == 'checkRegister' || status == 'payment')
+						"
+						v-model="defaultOccupation.position"
+						:rules="[
+							(val) => !!val || `${'กรุณากรอก ชื่อตำแหน่ง'}`,
+						]"
+						:label="`${'ชื่อตำแหน่ง'}`"
+					/>
+				</div>
+				<div class="col-4">
+					<q-input
+						:class="
+							getClass(
+								status == 'checkRegister' || status == 'payment'
+							)
+						"
+						:outlined="
+							status == 'checkRegister' || status == 'payment'
+						"
+						dense
+						lazy-rules
+						type="number"
+						autogrow
+						:readonly="
+							!(status == 'checkRegister' || status == 'payment')
+						"
+						:borderless="
+							!(status == 'checkRegister' || status == 'payment')
+						"
+						v-model="defaultOccupation.salary"
+						:rules="[(val) => !!val || `${'กรุณากรอก เงินเดือน'}`]"
+						:label="`${'เงินเดือน'}`"
+					/>
+				</div>
 
-        <div class="col-4">
-          <q-input
-            :class="getClass(status == 'checkRegister' || status == 'payment')"
-            :outlined="status == 'checkRegister' || status == 'payment'"
-            dense
-            lazy-rules
-            autogrow
-            :readonly="!(status == 'checkRegister' || status == 'payment')"
-            :borderless="!(status == 'checkRegister' || status == 'payment')"
-            v-model="defaultOccupation.group"
-            :rules="[(val) => !!val || `${'กรุณากรอก กลุ่ม/ฝ่าย'}`]"
-            :label="`${'กลุ่ม/ฝ่าย'}`"
-          />
-        </div>
-        <div class="col-4">
-          <q-input
-            :class="getClass(status == 'checkRegister' || status == 'payment')"
-            :outlined="status == 'checkRegister' || status == 'payment'"
-            dense
-            lazy-rules
-            autogrow
-            :readonly="!(status == 'checkRegister' || status == 'payment')"
-            :borderless="!(status == 'checkRegister' || status == 'payment')"
-            v-model="defaultOccupation.pile"
-            :rules="[(val) => !!val || `${'กรุณากรอก กอง'}`]"
-            :label="`${'กอง'}`"
-          />
-        </div>
-        <div class="col-4">
-          <q-input
-            :class="getClass(status == 'checkRegister' || status == 'payment')"
-            :outlined="status == 'checkRegister' || status == 'payment'"
-            dense
-            lazy-rules
-            autogrow
-            :readonly="!(status == 'checkRegister' || status == 'payment')"
-            :borderless="!(status == 'checkRegister' || status == 'payment')"
-            v-model="defaultOccupation.org"
-            :rules="[(val) => !!val || `${'กรุณากรอก สังกัด'}`]"
-            :label="`${'สังกัด'}`"
-          />
-        </div>
-        <div class="col-4">
-          <q-input
-            :class="getClass(status == 'checkRegister' || status == 'payment')"
-            :outlined="status == 'checkRegister' || status == 'payment'"
-            dense
-            :counter="
-              status == 'checkRegister' || status == 'payment' ? true : false
-            "
-            maxlength="10"
-            lazy-rules
-            type="tel"
-            mask="##########"
-            autogrow
-            :readonly="!(status == 'checkRegister' || status == 'payment')"
-            :borderless="!(status == 'checkRegister' || status == 'payment')"
-            v-model="defaultOccupation.tel"
-            :rules="[
-              (val) => !!val || `${'กรุณากรอก เบอร์โทรที่ทำงาน'}`,
-              (val) => val.length == 10 || `${'กรุณากรอก เบอร์โทรที่ทำงาน'}`,
-              (val) =>
-                /^[0-9]*$/.test(val) || 'กรุณากรอก เบอร์โทรที่ทำงานให้ถูกต้อง',
-            ]"
-            :label="`${'เบอร์โทรที่ทำงาน'}`"
-          />
-        </div>
-      </div>
-    </div>
-  </q-form>
+				<div class="col-4">
+					<q-input
+						:class="
+							getClass(
+								status == 'checkRegister' || status == 'payment'
+							)
+						"
+						:outlined="
+							status == 'checkRegister' || status == 'payment'
+						"
+						dense
+						lazy-rules
+						autogrow
+						:readonly="
+							!(status == 'checkRegister' || status == 'payment')
+						"
+						:borderless="
+							!(status == 'checkRegister' || status == 'payment')
+						"
+						v-model="defaultOccupation.group"
+						:rules="[(val) => !!val || `${'กรุณากรอก กลุ่ม/ฝ่าย'}`]"
+						:label="`${'กลุ่ม/ฝ่าย'}`"
+					/>
+				</div>
+				<div class="col-4">
+					<q-input
+						:class="
+							getClass(
+								status == 'checkRegister' || status == 'payment'
+							)
+						"
+						:outlined="
+							status == 'checkRegister' || status == 'payment'
+						"
+						dense
+						lazy-rules
+						autogrow
+						:readonly="
+							!(status == 'checkRegister' || status == 'payment')
+						"
+						:borderless="
+							!(status == 'checkRegister' || status == 'payment')
+						"
+						v-model="defaultOccupation.pile"
+						:rules="[(val) => !!val || `${'กรุณากรอก กอง'}`]"
+						:label="`${'กอง'}`"
+					/>
+				</div>
+				<div class="col-4">
+					<q-input
+						:class="
+							getClass(
+								status == 'checkRegister' || status == 'payment'
+							)
+						"
+						:outlined="
+							status == 'checkRegister' || status == 'payment'
+						"
+						dense
+						lazy-rules
+						autogrow
+						:readonly="
+							!(status == 'checkRegister' || status == 'payment')
+						"
+						:borderless="
+							!(status == 'checkRegister' || status == 'payment')
+						"
+						v-model="defaultOccupation.org"
+						:rules="[(val) => !!val || `${'กรุณากรอก สังกัด'}`]"
+						:label="`${'สังกัด'}`"
+					/>
+				</div>
+				<div class="col-4">
+					<q-input
+						:class="
+							getClass(
+								status == 'checkRegister' || status == 'payment'
+							)
+						"
+						:outlined="
+							status == 'checkRegister' || status == 'payment'
+						"
+						dense
+						:counter="
+							status == 'checkRegister' || status == 'payment'
+								? true
+								: false
+						"
+						maxlength="10"
+						lazy-rules
+						type="tel"
+						mask="##########"
+						autogrow
+						:readonly="
+							!(status == 'checkRegister' || status == 'payment')
+						"
+						:borderless="
+							!(status == 'checkRegister' || status == 'payment')
+						"
+						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";
@@ -141,8 +212,8 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 import type { Occupation } from "@/modules/03_recruiting/interface/index/Main";
 import {
-  defaultOccupation,
-  changeData,
+	defaultOccupation,
+	changeData,
 } from "@/modules/03_recruiting/interface/index/Main";
 import HeaderTop from "@/modules/03_recruiting/components/top.vue";
 import { useRoute } from "vue-router";
@@ -151,14 +222,14 @@ import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar } from "quasar";
 
 const props = defineProps({
-  status: {
-    type: String,
-    required: true,
-  },
-  form: {
-    type: Object,
-    required: true,
-  },
+	status: {
+		type: String,
+		required: true,
+	},
+	form: {
+		type: Object,
+		required: true,
+	},
 });
 
 const $q = useQuasar();
@@ -173,43 +244,43 @@ const { messageError, showLoader, hideLoader } = mixin;
 const emit = defineEmits(["update:form"]);
 
 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 () => {
-  showLoader();
-  await http
-    .get(config.API.candidateOccupation(candidateId.value))
-    .then((res) => {
-      const data = res.data.result;
-      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;
-      defaultOccupation.value.tel = data.occupationTelephone;
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
+	showLoader();
+	await http
+		.get(config.API.candidateOccupation(candidateId.value))
+		.then((res) => {
+			const data = res.data.result;
+			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;
+			defaultOccupation.value.tel = data.occupationTelephone;
+		})
+		.catch((e) => {
+			messageError($q, e);
+		})
+		.finally(() => {
+			hideLoader();
+		});
 };
 
 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>