From 6976007b6418341b342eeb9a09049101b0a16ac3 Mon Sep 17 00:00:00 2001
From: Kittapath <kittapath@frappet.com>
Date: Fri, 29 Sep 2023 17:39:23 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89ui=E0=B8=AA=E0=B8=A3?=
 =?UTF-8?q?=E0=B8=A3=E0=B8=AB=E0=B8=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../03_recruiting/components/Information.vue  |  31 +-
 .../03_recruiting/components/Profile.vue      |  34 +-
 .../03_recruiting/interface/request/Period.ts |   2 +
 .../interface/response/Period.ts              |   6 +-
 .../views/02_qualify/ExamForm.vue             | 190 +++++------
 .../03_recruiting/views/02_qualify/Manage.vue |  26 +-
 .../03_recruiting/views/02_qualify/Period.vue |  24 +-
 .../views/02_qualify/PeriodAdd.vue            | 320 +++++++++++++++---
 .../views/02_qualify/manageDetail.vue         |   2 +-
 9 files changed, 438 insertions(+), 197 deletions(-)

diff --git a/src/modules/03_recruiting/components/Information.vue b/src/modules/03_recruiting/components/Information.vue
index 1d0aaf2ae..819a4f752 100644
--- a/src/modules/03_recruiting/components/Information.vue
+++ b/src/modules/03_recruiting/components/Information.vue
@@ -62,12 +62,12 @@
       </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'"
+          :class="getClass(false)"
+          :outlined="false"
           dense
           lazy-rules
-          :readonly="!(status == 'checkRegister' || status == 'payment')"
-          :borderless="!(status == 'checkRegister' || status == 'payment')"
+          :readonly="!false"
+          :borderless="!false"
           v-model="defaultInformation.nationality"
           :rules="[(val) => !!val || `${'กรุณากรอก สัญชาติ'}`]"
           :label="`${'สัญชาติ'}`"
@@ -149,17 +149,17 @@
           :class="getClass(status == 'checkRegister' || status == 'payment')"
           :readonly="!(status == 'checkRegister' || status == 'payment')"
           :borderless="!(status == 'checkRegister' || status == 'payment')"
-          :rules="[(val) => !!val || `${'กรุณาเลือก สถานภาพ'}`]"
+          :rules="[(val) => !!val || `${'กรุณาเลือก ศาสนา'}`]"
           :outlined="status == 'checkRegister' || status == 'payment'"
           dense
           lazy-rules
-          v-model="defaultInformation.relationshipId"
+          v-model="defaultInformation.religionId"
           emit-value
           map-options
           option-label="name"
-          :options="relationshipOptions"
+          :options="religionOptions"
           option-value="id"
-          :label="`${'สถานภาพ'}`"
+          :label="`${'ศาสนา'}`"
         />
       </div>
       <div class="col-xs-12 col-sm-3 col-md-3">
@@ -178,8 +178,7 @@
           v-model="defaultInformation.cardid"
           maxlength="13"
           :rules="[
-            (val) =>
-              val.length == 13 || `${'กรุณากรอก เลขประจำตัวประชาชน'}`,
+            (val) => val.length == 13 || `${'กรุณากรอก เลขประจำตัวประชาชน'}`,
             (val) =>
               /^[0-9]*$/.test(val) ||
               `${'กรุณากรอกเลขประจำตัวประชาชนให้ถูกต้อง'}`,
@@ -187,7 +186,7 @@
           label="เลขประจำตัวประชาชน"
         />
       </div>
-      <div class="col-xs-12 col-sm-3 col-md-3">
+      <!-- <div class="col-xs-12 col-sm-3 col-md-3">
         <q-select
           :class="getClass(status == 'checkRegister' || status == 'payment')"
           :readonly="!(status == 'checkRegister' || status == 'payment')"
@@ -276,7 +275,7 @@
             </q-input>
           </template>
         </datepicker>
-      </div>
+      </div> -->
       <div class="col-xs-12 col-sm-3 col-md-3">
         <q-input
           :outlined="status == 'checkRegister' || status == 'payment'"
@@ -370,7 +369,7 @@
         />
       </div>
     </div>
-    <div class="col-xs-12 col-sm-9 col-md-12">
+    <!-- <div class="col-xs-12 col-sm-9 col-md-12">
       <q-input
         :class="getClass(status == 'checkRegister' || status == 'payment')"
         :outlined="status == 'checkRegister' || status == 'payment'"
@@ -382,7 +381,7 @@
         label="ความรู้ความสามารถพิเศษ"
         type="textarea"
       />
-    </div>
+    </div> -->
   </q-form>
 </template>
 <script setup lang="ts">
@@ -409,7 +408,7 @@ const props = defineProps({
     type: Array as PropType<DataOption[]>,
     required: true,
   },
-  relationshipOptions: {
+  religionOptions: {
     type: Array as PropType<DataOption[]>,
     required: true,
   },
@@ -476,7 +475,7 @@ const fetchData = async () => {
         data.citizenDate == null ? null : new Date(data.citizenDate);
       defaultInformation.value.cardid = data.citizenId;
       defaultInformation.value.firstname = data.firstName;
-      defaultInformation.value.relationshipId = data.relationshipId;
+      defaultInformation.value.religionId = data.religionId;
       defaultInformation.value.nationality = data.nationality;
       defaultInformation.value.email = data.email;
       defaultInformation.value.phone = data.mobilePhone;
diff --git a/src/modules/03_recruiting/components/Profile.vue b/src/modules/03_recruiting/components/Profile.vue
index 8914ba286..0fef4fb72 100644
--- a/src/modules/03_recruiting/components/Profile.vue
+++ b/src/modules/03_recruiting/components/Profile.vue
@@ -3,7 +3,7 @@
   <div class="q-px-sm">
     <Information
       :prefixOptions="prefixOptions"
-      :relationshipOptions="relationshipOptions"
+      :religionOptions="religionOptions"
       :provinceOptions="provinceOptions"
       :status="status"
       v-model:form="formInformation"
@@ -19,14 +19,14 @@
     />
   </div>
 
-  <q-separator class="q-my-lg bg-gray" size="5px" />
+  <!-- <q-separator class="q-my-lg bg-gray" size="5px" />
   <div class="q-px-sm">
     <Family
       :prefixOptions="prefixOptions"
       :status="status"
       v-model:form="formFamily"
     />
-  </div>
+  </div> -->
 
   <q-separator class="q-my-lg bg-gray" size="5px" />
   <div class="q-px-sm">
@@ -77,10 +77,10 @@ const props = defineProps({
     type: Object,
     required: true,
   },
-  formFamily: {
-    type: Object,
-    required: true,
-  },
+  //   formFamily: {
+  //     type: Object,
+  //     required: true,
+  //   },
   formOccupation: {
     type: Object,
     required: true,
@@ -90,11 +90,11 @@ const props = defineProps({
 const $q = useQuasar();
 
 const prefixOptions = ref<DataOption[]>([]);
-const relationshipOptions = ref<DataOption[]>([]);
+const religionOptions = ref<DataOption[]>([]);
 const provinceOptions = ref<DataOption[]>([]);
 const formInformation = ref<any>({});
 const formAddress = ref<any>({});
-const formFamily = ref<any>({});
+// const formFamily = ref<any>({});
 const formOccupation = ref<any>({});
 const mixin = useCounterMixin();
 const { messageError, showLoader, hideLoader } = mixin;
@@ -102,7 +102,7 @@ const { messageError, showLoader, hideLoader } = mixin;
 const emit = defineEmits([
   "update:formInformation",
   "update:formAddress",
-  "update:formFamily",
+  //   "update:formFamily",
   "update:formOccupation",
 ]);
 
@@ -114,9 +114,9 @@ watch(formAddress, async (count: Object, prevCount: Object) => {
   emit("update:formAddress", count);
 });
 
-watch(formFamily, async (count: Object, prevCount: Object) => {
-  emit("update:formFamily", count);
-});
+// watch(formFamily, async (count: Object, prevCount: Object) => {
+//   emit("update:formFamily", count);
+// });
 
 watch(formOccupation, async (count: Object, prevCount: Object) => {
   emit("update:formOccupation", count);
@@ -125,7 +125,7 @@ watch(formOccupation, async (count: Object, prevCount: Object) => {
 onMounted(() => {
   hideLoader();
   fetchPrefix();
-  fetchRelationship();
+  fetchReligion();
   fetchProvince();
 });
 
@@ -149,17 +149,17 @@ const fetchPrefix = async () => {
     });
 };
 
-const fetchRelationship = async () => {
+const fetchReligion = async () => {
   showLoader();
   await http
-    .get(config.API.relationship)
+    .get(config.API.religion)
     .then((res) => {
       const data = res.data.result;
       let option: DataOption[] = [];
       data.map((r: any) => {
         option.push({ id: r.id.toString(), name: r.name.toString() });
       });
-      relationshipOptions.value = option;
+      religionOptions.value = option;
     })
     .catch((e) => {
       messageError($q, e);
diff --git a/src/modules/03_recruiting/interface/request/Period.ts b/src/modules/03_recruiting/interface/request/Period.ts
index 679e021b4..c63335412 100644
--- a/src/modules/03_recruiting/interface/request/Period.ts
+++ b/src/modules/03_recruiting/interface/request/Period.ts
@@ -69,6 +69,8 @@ interface RequestPosition {
   id: string;
   positionId: string;
   positionName: string;
+  positionLevelId: string;
+  positionLevelName: string;
   typeId: string;
   typeName: string;
   highDegree: Boolean;
diff --git a/src/modules/03_recruiting/interface/response/Period.ts b/src/modules/03_recruiting/interface/response/Period.ts
index 028baf9c9..4dadf2056 100644
--- a/src/modules/03_recruiting/interface/response/Period.ts
+++ b/src/modules/03_recruiting/interface/response/Period.ts
@@ -46,11 +46,15 @@ interface ResponsePosition {
     id: string;
     name: string;
   };
+  level: {
+    id: string;
+    name: string;
+  };
   type: {
     id: string;
     name: string;
   };
-  highDegree: Boolean;
+  highDegree: string;
 }
 interface ResponsePayment {
   id: string;
diff --git a/src/modules/03_recruiting/views/02_qualify/ExamForm.vue b/src/modules/03_recruiting/views/02_qualify/ExamForm.vue
index 1ba95a2f0..4602bd93e 100644
--- a/src/modules/03_recruiting/views/02_qualify/ExamForm.vue
+++ b/src/modules/03_recruiting/views/02_qualify/ExamForm.vue
@@ -43,10 +43,10 @@
         :status="status"
         v-model:formInformation="formInformation"
         v-model:formAddress="formAddress"
-        v-model:formFamily="formFamily"
         v-model:formOccupation="formOccupation"
       />
     </div>
+    <!-- v-model:formFamily="formFamily" -->
   </q-card>
   <q-dialog :model-value="modal" persistent>
     <q-card style="min-width: 700px">
@@ -151,7 +151,7 @@ const approve = ref<string>("1");
 const reason = ref<string>("");
 const formInformation = ref<any>({});
 const formAddress = ref<any>({});
-const formFamily = ref<any>({});
+// const formFamily = ref<any>({});
 const formOccupation = ref<any>({});
 const status = ref<string>("");
 
@@ -233,105 +233,101 @@ const clickSave = async () => {
     if (suc) {
       await formAddress.value.validate().then(async (suc: boolean) => {
         if (suc) {
-          await formFamily.value.validate().then(async (suc: boolean) => {
+          //   await formFamily.value.validate().then(async (suc: boolean) => {
+          //     if (suc) {
+          await formOccupation.value.validate().then(async (suc: boolean) => {
             if (suc) {
-              await formOccupation.value
-                .validate()
-                .then(async (suc: boolean) => {
-                  if (suc) {
-                    const type = ref<string | null>("");
-                    if (defaultOccupation.value.status == "official")
-                      type.value = defaultOccupation.value.official;
-                    if (defaultOccupation.value.status == "personnel")
-                      type.value = defaultOccupation.value.personnel;
-                    if (defaultOccupation.value.status == "officialsOther")
-                      type.value = defaultOccupation.value.officialsOther;
-                    if (defaultOccupation.value.status == "employee")
-                      type.value = defaultOccupation.value.employee;
-                    if (defaultOccupation.value.status == "other")
-                      type.value = defaultOccupation.value.other;
-                    showLoader();
-                    await http
-                      .post(config.API.candidateId(candidateId.value), {
-                        prefixId: defaultInformation.value.prefixId,
-                        lastName: defaultInformation.value.lastname,
-                        citizenProvinceId: defaultInformation.value.provinceId,
-                        citizenDistrictId: defaultInformation.value.districtId,
-                        dateOfBirth:
-                          defaultInformation.value.birthDate == null
-                            ? null
-                            : dateToISO(defaultInformation.value.birthDate),
-                        citizenDate:
-                          defaultInformation.value.cardIdDate == null
-                            ? null
-                            : dateToISO(defaultInformation.value.cardIdDate),
-                        citizenId: defaultInformation.value.cardid,
-                        firstName: defaultInformation.value.firstname,
-                        relationshipId: defaultInformation.value.relationshipId,
-                        nationality: defaultInformation.value.nationality,
-                        email: defaultInformation.value.email,
-                        mobilePhone: defaultInformation.value.phone,
-                        telephone: defaultInformation.value.tel,
-                        knowledge: defaultInformation.value.knowledge,
-                        occupationType: defaultOccupation.value.status,
-                        occupationCompany: defaultOccupation.value.company,
-                        occupationDepartment:
-                          defaultOccupation.value.department,
-                        occupationEmail: defaultOccupation.value.email,
-                        occupationTelephone: defaultOccupation.value.tel,
-                        occupationPosition: type.value,
-                        registAddress: defaultAddress.value.address,
-                        currentAddress: defaultAddress.value.addressC,
-                        registProvinceId: defaultAddress.value.provinceId,
-                        currentProvinceId: defaultAddress.value.provinceIdC,
-                        registDistrictId: defaultAddress.value.districtId,
-                        currentDistrictId: defaultAddress.value.districtIdC,
-                        registSubDistrictId: defaultAddress.value.subdistrictId,
-                        currentSubDistrictId:
-                          defaultAddress.value.subdistrictIdC,
-                        registZipCode: defaultAddress.value.code,
-                        currentZipCode: defaultAddress.value.codeC,
-                        registSame:
-                          defaultAddress.value.same == "1"
-                            ? true
-                            : defaultAddress.value.same == "0"
-                            ? false
-                            : null,
-                        marryPrefixId: defaultFamily.value.prefixIdC,
-                        marryFirstName: defaultFamily.value.firstnameC,
-                        marryLastName: defaultFamily.value.lastnameC,
-                        marryOccupation: defaultFamily.value.occupationC,
-                        marryNationality: defaultFamily.value.nationalityC,
-                        fatherPrefixId: defaultFamily.value.prefixIdM,
-                        fatherFirstName: defaultFamily.value.firstnameM,
-                        fatherLastName: defaultFamily.value.lastnameM,
-                        fatherOccupation: defaultFamily.value.occupationM,
-                        fatherNationality: defaultFamily.value.nationalityM,
-                        motherPrefixId: defaultFamily.value.prefixIdF,
-                        motherFirstName: defaultFamily.value.firstnameF,
-                        motherLastName: defaultFamily.value.lastnameF,
-                        motherOccupation: defaultFamily.value.occupationF,
-                        motherNationality: defaultFamily.value.nationalityF,
-                        marry:
-                          defaultFamily.value.same == "1"
-                            ? true
-                            : defaultFamily.value.same == "0"
-                            ? false
-                            : null,
-                      })
-                      .then(async () => {
-                        success($q, "บันทึกข้อมูลส่วนตัวสำเร็จ");
-                      })
-                      .catch((e) => {
-                        messageError($q, e);
-                      })
-                      .finally(async () => {
-                        hideLoader();
-                      });
-                  }
+              const type = ref<string | null>("");
+              if (defaultOccupation.value.status == "official")
+                type.value = defaultOccupation.value.official;
+              if (defaultOccupation.value.status == "personnel")
+                type.value = defaultOccupation.value.personnel;
+              if (defaultOccupation.value.status == "officialsOther")
+                type.value = defaultOccupation.value.officialsOther;
+              if (defaultOccupation.value.status == "employee")
+                type.value = defaultOccupation.value.employee;
+              if (defaultOccupation.value.status == "other")
+                type.value = defaultOccupation.value.other;
+              showLoader();
+              await http
+                .post(config.API.candidateId(candidateId.value), {
+                  prefixId: defaultInformation.value.prefixId,
+                  lastName: defaultInformation.value.lastname,
+                  citizenProvinceId: defaultInformation.value.provinceId,
+                  citizenDistrictId: defaultInformation.value.districtId,
+                  dateOfBirth:
+                    defaultInformation.value.birthDate == null
+                      ? null
+                      : dateToISO(defaultInformation.value.birthDate),
+                  citizenDate:
+                    defaultInformation.value.cardIdDate == null
+                      ? null
+                      : dateToISO(defaultInformation.value.cardIdDate),
+                  citizenId: defaultInformation.value.cardid,
+                  firstName: defaultInformation.value.firstname,
+                  relationshipId: defaultInformation.value.relationshipId,
+                  nationality: defaultInformation.value.nationality,
+                  email: defaultInformation.value.email,
+                  mobilePhone: defaultInformation.value.phone,
+                  telephone: defaultInformation.value.tel,
+                  knowledge: defaultInformation.value.knowledge,
+                  occupationType: defaultOccupation.value.status,
+                  occupationCompany: defaultOccupation.value.company,
+                  occupationDepartment: defaultOccupation.value.department,
+                  occupationEmail: defaultOccupation.value.email,
+                  occupationTelephone: defaultOccupation.value.tel,
+                  occupationPosition: type.value,
+                  registAddress: defaultAddress.value.address,
+                  currentAddress: defaultAddress.value.addressC,
+                  registProvinceId: defaultAddress.value.provinceId,
+                  currentProvinceId: defaultAddress.value.provinceIdC,
+                  registDistrictId: defaultAddress.value.districtId,
+                  currentDistrictId: defaultAddress.value.districtIdC,
+                  registSubDistrictId: defaultAddress.value.subdistrictId,
+                  currentSubDistrictId: defaultAddress.value.subdistrictIdC,
+                  registZipCode: defaultAddress.value.code,
+                  currentZipCode: defaultAddress.value.codeC,
+                  registSame:
+                    defaultAddress.value.same == "1"
+                      ? true
+                      : defaultAddress.value.same == "0"
+                      ? false
+                      : null,
+                  marryPrefixId: defaultFamily.value.prefixIdC,
+                  marryFirstName: defaultFamily.value.firstnameC,
+                  marryLastName: defaultFamily.value.lastnameC,
+                  marryOccupation: defaultFamily.value.occupationC,
+                  marryNationality: defaultFamily.value.nationalityC,
+                  fatherPrefixId: defaultFamily.value.prefixIdM,
+                  fatherFirstName: defaultFamily.value.firstnameM,
+                  fatherLastName: defaultFamily.value.lastnameM,
+                  fatherOccupation: defaultFamily.value.occupationM,
+                  fatherNationality: defaultFamily.value.nationalityM,
+                  motherPrefixId: defaultFamily.value.prefixIdF,
+                  motherFirstName: defaultFamily.value.firstnameF,
+                  motherLastName: defaultFamily.value.lastnameF,
+                  motherOccupation: defaultFamily.value.occupationF,
+                  motherNationality: defaultFamily.value.nationalityF,
+                  marry:
+                    defaultFamily.value.same == "1"
+                      ? true
+                      : defaultFamily.value.same == "0"
+                      ? false
+                      : null,
+                })
+                .then(async () => {
+                  success($q, "บันทึกข้อมูลส่วนตัวสำเร็จ");
+                })
+                .catch((e) => {
+                  messageError($q, e);
+                })
+                .finally(async () => {
+                  hideLoader();
                 });
             }
           });
+          //     }
+          //   });
         }
       });
     }
diff --git a/src/modules/03_recruiting/views/02_qualify/Manage.vue b/src/modules/03_recruiting/views/02_qualify/Manage.vue
index 0852c4f75..2789da007 100644
--- a/src/modules/03_recruiting/views/02_qualify/Manage.vue
+++ b/src/modules/03_recruiting/views/02_qualify/Manage.vue
@@ -126,21 +126,10 @@ const columns = ref<QTableProps["columns"]>([
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
-  {
-    name: "dateAnnouncement",
-    align: "left",
-    label: "วันที่สมัคร",
-    sortable: true,
-    field: "dateAnnouncement",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
   {
     name: "dateRegister",
     align: "left",
-    label: "วันที่ชำระเงิน",
+    label: "วันที่สมัคร",
     sortable: true,
     field: "dateRegister",
     headerStyle: "font-size: 14px",
@@ -151,7 +140,7 @@ const columns = ref<QTableProps["columns"]>([
   {
     name: "datePayment",
     align: "left",
-    label: "วันที่ประกาศ",
+    label: "วันที่ชำระเงิน",
     sortable: true,
     field: "datePayment",
     headerStyle: "font-size: 14px",
@@ -159,6 +148,17 @@ const columns = ref<QTableProps["columns"]>([
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
+  {
+    name: "dateAnnouncement",
+    align: "left",
+    label: "วันที่ประกาศ",
+    sortable: true,
+    field: "dateAnnouncement",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
 ]);
 
 onMounted(async () => {
diff --git a/src/modules/03_recruiting/views/02_qualify/Period.vue b/src/modules/03_recruiting/views/02_qualify/Period.vue
index 92b3923ab..b452e708a 100644
--- a/src/modules/03_recruiting/views/02_qualify/Period.vue
+++ b/src/modules/03_recruiting/views/02_qualify/Period.vue
@@ -180,19 +180,10 @@ const columns = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
-  {
-    name: "dateAnnouncement",
-    align: "left",
-    label: "วันที่สมัคร",
-    sortable: true,
-    field: "dateAnnouncement",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
   {
     name: "dateRegister",
     align: "left",
-    label: "วันที่ชำระเงิน",
+    label: "วันที่สมัคร",
     sortable: true,
     field: "dateRegister",
     headerStyle: "font-size: 14px",
@@ -201,12 +192,21 @@ const columns = ref<QTableProps["columns"]>([
   {
     name: "datePayment",
     align: "left",
-    label: "วันที่ประกาศ",
+    label: "วันที่ชำระเงิน",
     sortable: true,
     field: "datePayment",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
+  {
+    name: "dateAnnouncement",
+    align: "left",
+    label: "วันที่ประกาศ",
+    sortable: true,
+    field: "dateAnnouncement",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
 ]);
 
 onMounted(async () => {
@@ -348,7 +348,7 @@ const deleteData = async (id: string) => {
  */
 const dateThaiRange = (val: [Date, Date]) => {
   if (val === null) {
-    return "";
+    return "-";
   } else if (date2Thai(val[0], true) === date2Thai(val[1], true)) {
     return `${date2Thai(val[0], true)}`;
   } else {
diff --git a/src/modules/03_recruiting/views/02_qualify/PeriodAdd.vue b/src/modules/03_recruiting/views/02_qualify/PeriodAdd.vue
index 855df240e..4bd286296 100644
--- a/src/modules/03_recruiting/views/02_qualify/PeriodAdd.vue
+++ b/src/modules/03_recruiting/views/02_qualify/PeriodAdd.vue
@@ -14,7 +14,9 @@
     {{ edit ? `แก้ไขรอบ` : "เพิ่มรอบคัดเลือก" }}
     {{
       edit && announcementExam
-        ? `${name} ครั้งที่ ${roundRaw}/${yearlyRaw == null ? "" : yearlyRaw + 543}`
+        ? `${name} ครั้งที่ ${roundRaw}/${
+            yearlyRaw == null ? "" : yearlyRaw + 543
+          }`
         : ""
     }}
   </div>
@@ -220,7 +222,10 @@
               </template>
             </datepicker>
           </div>
-          <div class="col-xs-12 col-sm-3 col-md-3" v-if="announcementExam && fee != 0">
+          <div
+            class="col-xs-12 col-sm-3 col-md-3"
+            v-if="announcementExam && fee != 0"
+          >
             <datepicker
               menu-class-name="modalfix"
               v-model="datePayment"
@@ -381,25 +386,14 @@
                         hide-bottom-space
                         lazy-rules
                         :rules="[(val:any) => !!val || `${'กรุณาเลือกตำแหน่ง'}`]"
+                        @filter="(inputValue:any,
+                            doneFn:Function) => filterSelector(inputValue, doneFn,'position'
+                        ) "
                       >
                         <template v-slot:option="scope">
                           <q-item v-bind="scope.itemProps">
                             <q-item-section>
                               <q-item-label>{{ scope.opt.name }}</q-item-label>
-                              <!-- <q-item-label caption>
-                                <q-icon
-                                  class="q-mr-sm"
-                                  size="15px"
-                                  color="primary"
-                                  name="mdi-bookmark"
-                                  v-if="scope.opt.isDirector"
-                                ></q-icon>
-                                {{ scope.opt.positionType }}
-                                {{ scope.opt.positionExecutive }}
-                                {{
-                                  scope.opt.positionExecutiveSide
-                                }}</q-item-label
-                              > -->
                             </q-item-section>
                           </q-item>
                         </template>
@@ -412,26 +406,58 @@
                           >
                             {{ scope.opt.name }}
                           </q-chip>
-                          <!-- <q-item-label caption>
-                            <q-icon
-                              class="q-mr-sm"
-                              size="15px"
-                              color="primary"
-                              name="mdi-bookmark"
-                              v-if="scope.opt.isDirector"
-                            ></q-icon>
-                            {{ scope.opt.positionType }}
-                            {{ scope.opt.positionExecutive }}
-                            {{ scope.opt.positionExecutiveSide }}</q-item-label
-                          > -->
+                        </template>
+                      </selector>
+                    </q-td>
+                    <q-td key="level" :props="props">
+                      <selector
+                        class=""
+                        outlined
+                        use-input
+                        v-model="props.row.level"
+                        :options="positionLevelOptions"
+                        option-value="id"
+                        option-label="name"
+                        input-debounce="0"
+                        dense
+                        hide-bottom-space
+                        lazy-rules
+                        :rules="[(val:any) => !!val || `${'กรุณาเลือกระดับ'}`]"
+                        @filter="(inputValue:any,
+                            doneFn:Function) => filterSelector(inputValue, doneFn,'positionLevel'
+                        ) "
+                      >
+                        <template v-slot:option="scope">
+                          <q-item v-bind="scope.itemProps">
+                            <q-item-section>
+                              <q-item-label>{{ scope.opt.name }}</q-item-label>
+                            </q-item-section>
+                          </q-item>
+                        </template>
+                        <template v-slot:selected-item="scope">
+                          ระดับ:
+                          <q-chip
+                            dense
+                            square
+                            class="q-my-none q-ml-xs q-mr-none"
+                          >
+                            {{ scope.opt.name }}
+                          </q-chip>
                         </template>
                       </selector>
                     </q-td>
                     <q-td key="highDegree" :props="props">
-                      <q-checkbox
+                      <q-radio
                         v-model="props.row.highDegree"
-                        label="ปริญญาขึ้นไป"
+                        label="ต่ำกว่าปริญญาบัตร"
                         color="teal"
+                        val="0"
+                      />
+                      <q-radio
+                        v-model="props.row.highDegree"
+                        label="ปริญญาบัตรขึ้นไป"
+                        color="teal"
+                        val="1"
                       />
                     </q-td>
                     <q-td key="type" :props="props">
@@ -950,6 +976,138 @@
               type="textarea"
             />
           </div>
+          <div class="col-12">
+            <q-separator size="5px" color="grey-2" class="q-my-lg" />
+          </div>
+          <div class="col-12">
+            <div class="text-bold text-subtitle2 q-pb-sm">
+              ข้อกำหนดและเงื่อนไข
+            </div>
+            <q-editor
+              v-model="editorCondition"
+              :dense="$q.screen.lt.md"
+              toolbar-text-color="blue-grey-10"
+              toolbar-bg="blue-grey-2"
+              toolbar-toggle-color="blue-grey-8"
+              class="editor"
+              :toolbar="[
+                ['left', 'center', 'right', 'justify'],
+                [
+                  'bold',
+                  'italic',
+                  'strike',
+                  'underline',
+                  'subscript',
+                  'superscript',
+                ],
+                ['token', 'hr', 'link', 'custom_btn'],
+                ['print', 'fullscreen'],
+                [
+                  {
+                    label: $q.lang.editor.formatting,
+                    icon: $q.iconSet.editor.formatting,
+                    list: 'no-icons',
+                    options: ['p', 'h1', 'h2', 'h3'],
+                  },
+                  {
+                    label: $q.lang.editor.defaultFont,
+                    icon: $q.iconSet.editor.font,
+                    fixedIcon: true,
+                    list: 'no-icons',
+                    options: [
+                      'default_font',
+                      'arial',
+                      'arial_black',
+                      'comic_sans',
+                      'courier_new',
+                      'impact',
+                      'lucida_grande',
+                      'times_new_roman',
+                      'verdana',
+                    ],
+                  },
+                  'removeFormat',
+                ],
+                ['undo', 'redo'],
+                ['viewsource'],
+              ]"
+              :fonts="{
+                arial: 'Arial',
+                arial_black: 'Arial Black',
+                comic_sans: 'Comic Sans MS',
+                courier_new: 'Courier New',
+                impact: 'Impact',
+                lucida_grande: 'Lucida Grande',
+                times_new_roman: 'Times New Roman',
+                verdana: 'Verdana',
+              }"
+            />
+          </div>
+          <div class="col-12">
+            <q-separator size="5px" color="grey-2" class="q-my-lg" />
+          </div>
+          <div class="col-12">
+            <div class="text-bold text-subtitle2 q-pb-sm">คำรับรอง</div>
+            <q-editor
+              v-model="editorConfirm"
+              :dense="$q.screen.lt.md"
+              toolbar-text-color="blue-grey-10"
+              toolbar-bg="blue-grey-2"
+              toolbar-toggle-color="blue-grey-8"
+              class="editor"
+              :toolbar="[
+                ['left', 'center', 'right', 'justify'],
+                [
+                  'bold',
+                  'italic',
+                  'strike',
+                  'underline',
+                  'subscript',
+                  'superscript',
+                ],
+                ['token', 'hr', 'link', 'custom_btn'],
+                ['print', 'fullscreen'],
+                [
+                  {
+                    label: $q.lang.editor.formatting,
+                    icon: $q.iconSet.editor.formatting,
+                    list: 'no-icons',
+                    options: ['p', 'h1', 'h2', 'h3'],
+                  },
+                  {
+                    label: $q.lang.editor.defaultFont,
+                    icon: $q.iconSet.editor.font,
+                    fixedIcon: true,
+                    list: 'no-icons',
+                    options: [
+                      'default_font',
+                      'arial',
+                      'arial_black',
+                      'comic_sans',
+                      'courier_new',
+                      'impact',
+                      'lucida_grande',
+                      'times_new_roman',
+                      'verdana',
+                    ],
+                  },
+                  'removeFormat',
+                ],
+                ['undo', 'redo'],
+                ['viewsource'],
+              ]"
+              :fonts="{
+                arial: 'Arial',
+                arial_black: 'Arial Black',
+                comic_sans: 'Comic Sans MS',
+                courier_new: 'Courier New',
+                impact: 'Impact',
+                lucida_grande: 'Lucida Grande',
+                times_new_roman: 'Times New Roman',
+                verdana: 'Verdana',
+              }"
+            />
+          </div>
         </div>
       </q-card-section>
       <q-separator />
@@ -1003,6 +1161,8 @@ const myForm = ref<QForm | null>(null); //form data input
 const name = ref<string>("");
 const note = ref<string>("");
 const editor = ref<string>("");
+const editorCondition = ref<string>("");
+const editorConfirm = ref<string>("");
 const checkDocument = ref<boolean>(false);
 const checkDisability = ref<boolean>(false);
 const announcementExam = ref<boolean>(true);
@@ -1020,6 +1180,9 @@ const dateExam = ref<Date | null>(null); //วันที่สอบ
 const myFormPayment = ref<any>();
 const myFormPosition = ref<any>();
 const positionPathOptions = ref<DataOption[]>([]);
+const positionPathFilters = ref<DataOption[]>([]);
+const positionLevelOptions = ref<DataOption[]>([]);
+const positionLevelFilters = ref<DataOption[]>([]);
 const governmentCodeOption = ref<DataOption[]>([]);
 const organizationShortName = ref<DataOption>();
 const organizationName = ref<DataOption>();
@@ -1092,6 +1255,7 @@ const columnsPayment = ref<QTableProps["columns"]>([
 ]);
 const visibleColumnsPosition = ref<String[]>([
   "position",
+  "level",
   "type",
   "highDegree",
 ]);
@@ -1107,10 +1271,21 @@ const columnsPosition = ref<QTableProps["columns"]>([
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
+  {
+    name: "level",
+    align: "left",
+    label: "ระดับ",
+    sortable: true,
+    field: "level",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
   {
     name: "highDegree",
     align: "left",
-    label: "วุฒิการศึกษาปริญญาขึ้นไป",
+    label: "วุฒิการศึกษา",
     sortable: true,
     field: "highDegree",
     headerStyle: "font-size: 14px",
@@ -1131,13 +1306,13 @@ const columnsPosition = ref<QTableProps["columns"]>([
   },
 ]);
 
-watch(organizationShortName, () => {
-  organizationNameOptions.value = [];
-});
+// watch(organizationShortName, () => {
+//   organizationNameOptions.value = [];
+// });
 
-watch(organizationName, () => {
-  positionPathOptions.value = [];
-});
+// watch(organizationName, () => {
+//   positionPathOptions.value = [];
+// });
 
 watch(fee, (count: any, prevCount: any) => {
   if (fee.value <= 0) {
@@ -1164,6 +1339,7 @@ onMounted(async () => {
   //   if (organizationName.value != null && organizationName.value.id != null)
   //     await fetchPositionPath(organizationName.value.id);
   await fetchPositionPath("test");
+  await fetchPositionLevel("test");
 });
 
 const clickBack = () => {
@@ -1184,11 +1360,15 @@ const fetchData = async () => {
             id: r.positionId,
             name: r.positionName,
           },
+          level: {
+            id: r.positionLevelId,
+            name: r.positionLevelName,
+          },
           type: {
             id: r.typeId,
             name: r.typeName,
           },
-          highDegree: r.highDegree,
+          highDegree: r.highDegree == true ? "1" : "0",
         });
       });
       const bankData: ResponsePayment[] = [];
@@ -1225,6 +1405,10 @@ const fetchData = async () => {
         data.registerStartDate != null && data.registerEndDate != null
           ? [new Date(data.registerStartDate), new Date(data.registerEndDate)]
           : null;
+      if (data.fee == 0) {
+        data.paymentStartDate = null;
+        data.paymentEndDate = null;
+      }
       datePayment.value =
         data.paymentStartDate != null && data.paymentEndDate != null
           ? [new Date(data.paymentStartDate), new Date(data.paymentEndDate)]
@@ -1245,6 +1429,8 @@ const fetchData = async () => {
       pay.value = data.paymentKrungThai;
       rowsPayment.value = bankData;
       editor.value = data.detail;
+      editorCondition.value = data.editorCondition;
+      editorConfirm.value = data.editorConfirm;
       note.value = data.note;
       fileDocs.value = data.documents;
       fileImgs.value = data.images;
@@ -1327,6 +1513,7 @@ const fetchPositionPath = async (val: string) => {
         });
       });
       positionPathOptions.value = option;
+      positionPathFilters.value = option;
     })
     .catch((e) => {
       messageError($q, e);
@@ -1336,6 +1523,54 @@ const fetchPositionPath = async (val: string) => {
     });
 };
 
+/**
+ * get รายการ ตำแหน่งระดับ
+ */
+const fetchPositionLevel = async (val: string) => {
+  showLoader();
+  await http
+    .get(config.API.positionLevel)
+    .then((res) => {
+      const data = res.data.result;
+      let option: DataOption[] = [];
+      data.map((r: DataOption) => {
+        option.push({
+          id: r.id.toString(),
+          name: r.name.toString(),
+        });
+      });
+      positionLevelOptions.value = option;
+      positionLevelFilters.value = option;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+
+const filterSelector = (val: any, update: Function, refData: string) => {
+  switch (refData) {
+    case "positionLevel":
+      update(() => {
+        positionLevelOptions.value = positionLevelFilters.value.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "position":
+      update(() => {
+        positionPathOptions.value = positionPathFilters.value.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    default:
+      break;
+  }
+};
+
 const selectGovernmentCode = (row: DataOption) => {
   organizationName.value = { id: "", name: "" };
   if (myForm.value !== null) {
@@ -1371,14 +1606,17 @@ const checkSave = async () => {
 
 const sendData = () => {
   const positionData: RequestPosition[] = [];
+  console.log(rowsPosition.value);
   rowsPosition.value.map((r: ResponsePosition) => {
     positionData.push({
       id: r.id,
       positionId: r.position.id,
       positionName: r.position.name,
+      positionLevelId: r.level.id,
+      positionLevelName: r.level.name,
       typeId: r.type.id,
       typeName: r.type.name,
-      highDegree: r.highDegree ? true : false,
+      highDegree: r.highDegree == "1" ? true : false,
     });
   });
   const valueData: any = {
@@ -1398,6 +1636,8 @@ const sendData = () => {
     announcementExam: announcementExam.value,
     checkDocument: checkDocument.value,
     detail: editor.value,
+    editorCondition: editorCondition.value,
+    editorConfirm: editorConfirm.value,
     fee: fee.value,
     id: "",
     isActive: true,
@@ -1579,7 +1819,7 @@ const clickAddPosition = () => {
         id: "00000000-0000-0000-0000-000000000000",
         position: null,
         type: { id: "normol", name: "ทั่วไป" },
-        highDegree: false,
+        highDegree: "0",
       });
     }
   });
diff --git a/src/modules/03_recruiting/views/02_qualify/manageDetail.vue b/src/modules/03_recruiting/views/02_qualify/manageDetail.vue
index 1282691cd..69ca7f4a6 100644
--- a/src/modules/03_recruiting/views/02_qualify/manageDetail.vue
+++ b/src/modules/03_recruiting/views/02_qualify/manageDetail.vue
@@ -542,7 +542,7 @@ const fetchData = async () => {
       data.map((r: any) => {
         rows.value.push({
           id: r.id,
-          fullname: `${r.firstName} ${r.lastName}`,
+          fullname: `${r.prefixName}${r.firstName} ${r.lastName}`,
           avatar: r.profileImg != null ? r.profileImg.detail : "",
           citizenId: r.citizenId,
           number: r.number,