แก้uiสรรหา

2023-09-29 17:39:23 +07:00 · 2023-09-29 17:39:23 +07:00 · 6976007b64
commit 6976007b64
parent b01e667f34
9 changed files with 438 additions and 197 deletions
--- 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;
--- 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);
--- 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;
--- 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;
--- 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();
                });
            }
          });
+          //     }
+          //   });
        }
      });
    }
--- 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 () => {
--- 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 {
--- 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",
      });
    }
  });
--- 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,