From 87e2e3b08052aeb078b72206ba96507bbf2ea3da Mon Sep 17 00:00:00 2001
From: "STW_TTTY\\stwtt" <trx.setthawut@gmail.com>
Date: Tue, 17 Sep 2024 15:56:06 +0700
Subject: [PATCH] Refactoring code module 03_recruiting

---
 .../03_recruiting/components/Address.vue      |  382 ++---
 .../03_recruiting/components/Career.vue       |  595 +++----
 .../03_recruiting/components/Contact.vue      |  166 +-
 .../components/CurruncyInput.vue              |   41 +-
 .../03_recruiting/components/DialogFooter.vue |   96 +-
 .../03_recruiting/components/Document.vue     |  211 +--
 .../03_recruiting/components/Education.vue    |  227 +--
 .../03_recruiting/components/ExamFinished.vue |  185 +-
 .../03_recruiting/components/Family.vue       |  192 +--
 .../03_recruiting/components/Information.vue  |  509 ++----
 .../03_recruiting/components/Occupation.vue   |  161 +-
 .../03_recruiting/components/Profile.vue      |  147 +-
 .../03_recruiting/components/Table.vue        |  139 +-
 .../03_recruiting/components/Table1.vue       |  187 +--
 .../03_recruiting/components/TableCan.vue     |  197 +--
 .../components/TableCandidate.vue             |  863 +++++-----
 src/modules/03_recruiting/components/top.vue  |   83 +-
 src/modules/03_recruiting/components/top1.vue |  203 +--
 .../03_recruiting/interface/index/Main.ts     |    2 +-
 .../03_recruiting/views/01_compete/Detail.vue |  279 ++--
 .../views/01_compete/DetailEx.vue             |  266 +--
 .../views/01_compete/ImportData.vue           |  179 +-
 .../03_recruiting/views/01_compete/Period.vue |  776 +++++----
 .../views/01_compete/PeriodAdd.vue            |  762 ++++-----
 .../views/01_compete/PeriodStat.vue           |   23 +-
 .../views/02_qualify/DisableDetail.vue        |  296 ++--
 .../views/02_qualify/DisableDetailEx.vue      |  278 ++-
 .../views/02_qualify/DisablePeriod.vue        |  734 ++++----
 .../views/02_qualify/DisablePeriodAdd.vue     |  686 ++++----
 .../views/02_qualify/ExamForm.vue             |  550 +++---
 .../03_recruiting/views/02_qualify/Manage.vue |  127 +-
 .../views/02_qualify/Payment.vue              |  222 +--
 .../03_recruiting/views/02_qualify/Period.vue |  212 +--
 .../views/02_qualify/PeriodAdd.vue            | 1485 ++++++++---------
 .../views/02_qualify/manageDetail.vue         |  789 +++++----
 .../03_recruiting/views/03_editor/index.vue   |  224 ++-
 36 files changed, 6139 insertions(+), 6335 deletions(-)

diff --git a/src/modules/03_recruiting/components/Address.vue b/src/modules/03_recruiting/components/Address.vue
index 03a5c8f8e..7f8cee61f 100644
--- a/src/modules/03_recruiting/components/Address.vue
+++ b/src/modules/03_recruiting/components/Address.vue
@@ -1,4 +1,194 @@
-<!-- card ข้อมูลที่อยู่ -->
+<script setup lang="ts">
+import { ref, onMounted, watch } from "vue";
+import type { PropType } from "vue";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import type {
+  Address,
+  DataOption,
+} from "@/modules/03_recruiting/interface/index/Main";
+import {
+  defaultAddress,
+  changeData,
+} from "@/modules/03_recruiting/interface/index/Main";
+import HeaderTop from "@/modules/03_recruiting/components/top.vue";
+import { useRoute } from "vue-router";
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar } from "quasar";
+
+const props = defineProps({
+  provinceOptions: {
+    type: Array as PropType<DataOption[]>,
+    required: true,
+  },
+  status: {
+    type: String,
+    required: true,
+  },
+  form: {
+    type: Object,
+    required: true,
+  },
+});
+const $q = useQuasar();
+const route = useRoute();
+const candidateId = ref<string>(route.params.candidateId.toString());
+const edit = ref<boolean>(true);
+const myform = ref<any>({});
+
+const districtOptions = ref<DataOption[]>([]);
+const districtCOptions = ref<DataOption[]>([]);
+const subdistrictOptions = ref<DataOption[]>([]);
+const subdistrictCOptions = ref<DataOption[]>([]);
+
+const mixin = useCounterMixin();
+const { messageError, showLoader, hideLoader } = mixin;
+const emit = defineEmits(["update:form"]);
+
+watch(myform, async (count: any, prevCount: any) => {
+  emit("update:form", count);
+});
+
+watch(defaultAddress, async (count: Address, prevCount: Address) => {
+  await changeData("address", count);
+});
+
+onMounted(async () => {
+  await fetchData();
+  if (defaultAddress.value.provinceId != null)
+    await fetchDistrict(defaultAddress.value.provinceId, "1");
+  if (defaultAddress.value.provinceIdC != null)
+    await fetchDistrict(defaultAddress.value.provinceIdC, "2");
+  if (defaultAddress.value.districtId != null)
+    await fetchSubDistrict(defaultAddress.value.districtId, "1");
+  if (defaultAddress.value.districtIdC != null)
+    await fetchSubDistrict(defaultAddress.value.districtIdC, "2");
+});
+
+const fetchData = async () => {
+  await http
+    .get(config.API.candidateAddress(candidateId.value))
+    .then((res) => {
+      const data = res.data.result;
+      defaultAddress.value.address = data.registAddress;
+      defaultAddress.value.addressC = data.currentAddress;
+      defaultAddress.value.provinceId = data.registProvinceId;
+      defaultAddress.value.provinceIdC = data.currentProvinceId;
+      defaultAddress.value.districtId = data.registDistrictId;
+      defaultAddress.value.districtIdC = data.currentDistrictId;
+      defaultAddress.value.subdistrictId = data.registSubDistrictId;
+      defaultAddress.value.subdistrictIdC = data.currentSubDistrictId;
+      defaultAddress.value.code = data.registZipCode;
+      defaultAddress.value.codeC = data.currentZipCode;
+      defaultAddress.value.same =
+        data.registSame == true ? "1" : data.registSame == false ? "0" : null;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+
+const selectProvince = (e: string, name: string) => {
+  if (name == "1") {
+    defaultAddress.value.districtId = "";
+    defaultAddress.value.subdistrictId = "";
+    defaultAddress.value.code = null;
+  } else {
+    defaultAddress.value.districtIdC = "";
+    defaultAddress.value.subdistrictIdC = "";
+    defaultAddress.value.codeC = null;
+  }
+  myform.value.resetValidation();
+  fetchDistrict(e, name);
+};
+
+const selectDistrict = (e: string, name: string) => {
+  if (name == "1") {
+    defaultAddress.value.subdistrictId = "";
+    defaultAddress.value.code = null;
+  } else {
+    defaultAddress.value.subdistrictIdC = "";
+    defaultAddress.value.codeC = null;
+  }
+  myform.value.resetValidation();
+  fetchSubDistrict(e, name);
+};
+
+const selectSubDistrict = (e: string, name: string) => {
+  if (name == "1") {
+    const findcode = subdistrictOptions.value.filter((r) => r.id == e);
+    const namecode = findcode.length > 0 ? findcode[0].zipCode : null;
+    defaultAddress.value.code = namecode;
+  } else {
+    const findcode = subdistrictCOptions.value.filter((r) => r.id == e);
+    const namecode = findcode.length > 0 ? findcode[0].zipCode : null;
+    defaultAddress.value.codeC = namecode;
+  }
+};
+
+const fetchDistrict = async (id: string, position: 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() });
+      });
+      if (position == "1") {
+        districtOptions.value = option;
+      } else {
+        districtCOptions.value = option;
+      }
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+
+const fetchSubDistrict = async (id: string, position: string) => {
+  showLoader();
+  await http
+    .get(config.API.listSubDistrict(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(),
+          zipCode: r.zipCode != null ? r.zipCode : null,
+        });
+      });
+      if (position == "1") {
+        subdistrictOptions.value = option;
+      } else {
+        subdistrictCOptions.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,
+  };
+};
+</script>
+
 <template>
   <HeaderTop
     v-model:edit="edit"
@@ -228,193 +418,3 @@
     </div>
   </q-form>
 </template>
-<script setup lang="ts">
-import { ref, onMounted, watch } from "vue";
-import type { PropType } from "vue";
-import http from "@/plugins/http";
-import config from "@/app.config";
-import type {
-  Address,
-  DataOption,
-} from "@/modules/03_recruiting/interface/index/Main";
-import {
-  defaultAddress,
-  changeData,
-} from "@/modules/03_recruiting/interface/index/Main";
-import HeaderTop from "@/modules/03_recruiting/components/top.vue";
-import { useRoute } from "vue-router";
-import { useCounterMixin } from "@/stores/mixin";
-import { useQuasar } from "quasar";
-
-const props = defineProps({
-  provinceOptions: {
-    type: Array as PropType<DataOption[]>,
-    required: true,
-  },
-  status: {
-    type: String,
-    required: true,
-  },
-  form: {
-    type: Object,
-    required: true,
-  },
-});
-const $q = useQuasar();
-const route = useRoute();
-const candidateId = ref<string>(route.params.candidateId.toString());
-const edit = ref<boolean>(true);
-const myform = ref<any>({});
-
-const districtOptions = ref<DataOption[]>([]);
-const districtCOptions = ref<DataOption[]>([]);
-const subdistrictOptions = ref<DataOption[]>([]);
-const subdistrictCOptions = ref<DataOption[]>([]);
-
-const mixin = useCounterMixin();
-const { messageError, showLoader, hideLoader } = mixin;
-const emit = defineEmits(["update:form"]);
-
-watch(myform, async (count: any, prevCount: any) => {
-  emit("update:form", count);
-});
-
-watch(defaultAddress, async (count: Address, prevCount: Address) => {
-  await changeData("address", count);
-});
-
-onMounted(async () => {
-  await fetchData();
-  if (defaultAddress.value.provinceId != null)
-    await fetchDistrict(defaultAddress.value.provinceId, "1");
-  if (defaultAddress.value.provinceIdC != null)
-    await fetchDistrict(defaultAddress.value.provinceIdC, "2");
-  if (defaultAddress.value.districtId != null)
-    await fetchSubDistrict(defaultAddress.value.districtId, "1");
-  if (defaultAddress.value.districtIdC != null)
-    await fetchSubDistrict(defaultAddress.value.districtIdC, "2");
-});
-
-const fetchData = async () => {
-  await http
-    .get(config.API.candidateAddress(candidateId.value))
-    .then((res) => {
-      const data = res.data.result;
-      defaultAddress.value.address = data.registAddress;
-      defaultAddress.value.addressC = data.currentAddress;
-      defaultAddress.value.provinceId = data.registProvinceId;
-      defaultAddress.value.provinceIdC = data.currentProvinceId;
-      defaultAddress.value.districtId = data.registDistrictId;
-      defaultAddress.value.districtIdC = data.currentDistrictId;
-      defaultAddress.value.subdistrictId = data.registSubDistrictId;
-      defaultAddress.value.subdistrictIdC = data.currentSubDistrictId;
-      defaultAddress.value.code = data.registZipCode;
-      defaultAddress.value.codeC = data.currentZipCode;
-      defaultAddress.value.same =
-        data.registSame == true ? "1" : data.registSame == false ? "0" : null;
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-};
-
-const selectProvince = (e: string, name: string) => {
-  if (name == "1") {
-    defaultAddress.value.districtId = "";
-    defaultAddress.value.subdistrictId = "";
-    defaultAddress.value.code = null;
-  } else {
-    defaultAddress.value.districtIdC = "";
-    defaultAddress.value.subdistrictIdC = "";
-    defaultAddress.value.codeC = null;
-  }
-  myform.value.resetValidation();
-  fetchDistrict(e, name);
-};
-
-const selectDistrict = (e: string, name: string) => {
-  if (name == "1") {
-    defaultAddress.value.subdistrictId = "";
-    defaultAddress.value.code = null;
-  } else {
-    defaultAddress.value.subdistrictIdC = "";
-    defaultAddress.value.codeC = null;
-  }
-  myform.value.resetValidation();
-  fetchSubDistrict(e, name);
-};
-
-const selectSubDistrict = (e: string, name: string) => {
-  if (name == "1") {
-    const findcode = subdistrictOptions.value.filter((r) => r.id == e);
-    const namecode = findcode.length > 0 ? findcode[0].zipCode : null;
-    defaultAddress.value.code = namecode;
-  } else {
-    const findcode = subdistrictCOptions.value.filter((r) => r.id == e);
-    const namecode = findcode.length > 0 ? findcode[0].zipCode : null;
-    defaultAddress.value.codeC = namecode;
-  }
-};
-
-const fetchDistrict = async (id: string, position: 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() });
-      });
-      if (position == "1") {
-        districtOptions.value = option;
-      } else {
-        districtCOptions.value = option;
-      }
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-};
-
-const fetchSubDistrict = async (id: string, position: string) => {
-  showLoader();
-  await http
-    .get(config.API.listSubDistrict(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(),
-          zipCode: r.zipCode != null ? r.zipCode : null,
-        });
-      });
-      if (position == "1") {
-        subdistrictOptions.value = option;
-      } else {
-        subdistrictCOptions.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,
-  };
-};
-</script>
diff --git a/src/modules/03_recruiting/components/Career.vue b/src/modules/03_recruiting/components/Career.vue
index dc678e697..5629ca198 100644
--- a/src/modules/03_recruiting/components/Career.vue
+++ b/src/modules/03_recruiting/components/Career.vue
@@ -1,306 +1,3 @@
-<!-- tab ประวัติการทำงาน (ตั้งแต่เริ่มปฏิบัติงานกับกรุงเทพมหานคร - ปัจจุบัน) -->
-<template>
-  <q-form ref="myForm">
-    <Table
-      :rows="rows"
-      :columns="columns"
-      :filter="filter"
-      :visible-columns="visibleColumns"
-      v-model:inputfilter="filter"
-      v-model:inputvisible="visibleColumns"
-      v-model:editvisible="edit"
-      :add="clickAdd"
-      :edit="clickEdit"
-      :addData="false"
-      :bottom="true"
-      :boss="status == 'checkRegister' || status == 'payment'"
-      :editData="status == 'checkRegister' || status == 'payment'"
-      name="ประวัติการทำงาน (ตั้งแต่เริ่มปฏิบัติงานกับกรุงเทพมหานคร - ปัจจุบัน)"
-      icon="mdi-briefcase"
-      :iconLeft="true"
-    >
-      <template #columns="props">
-        <q-tr :props="props">
-          <q-td
-            style="width: 5% !important"
-            v-if="status == 'checkRegister' || status == 'payment'"
-          >
-            <q-btn
-              color="red"
-              flat
-              dense
-              round
-              size="14px"
-              icon="mdi-trash-can-outline"
-              @click="checkDelete(props.row)"
-            />
-          </q-td>
-          <q-td
-            v-for="col in props.cols"
-            :key="col.name"
-            :props="props"
-            @click="selectData(props)"
-            class="cursor-pointer"
-          >
-            <div v-if="col.name == 'startDate' || col.name == 'endDate'">
-              {{ date2Thai(col.value) }}
-            </div>
-            <div v-else>
-              {{ col.value }}
-            </div>
-          </q-td>
-        </q-tr>
-      </template>
-      <template #bottom="props">
-        <div style="width: 67% !important" />
-
-        <div
-          :props="props"
-          class="row"
-          style="width: 33% !important; padding-left: 20px"
-        >
-          <div
-            class="text-weight-medium text-subtitle2 q-py-sm row col-12 justify-between"
-          >
-            <div>รวมระยะเวลา :</div>
-
-            <div>{{ total }}</div>
-          </div>
-        </div>
-      </template>
-    </Table>
-  </q-form>
-  <!-- popup Edit window-->
-  <q-dialog v-model="modal" persistent>
-    <q-card style="width: 600px">
-      <q-form ref="myForm">
-        <DialogHeader
-          tittle="ประวัติการทำงาน (ตั้งแต่เริ่มปฏิบัติงานกับกรุงเทพมหานคร - ปัจจุบัน)"
-          :close="checkClose"
-        />
-        <q-separator />
-        <q-card-section class="q-p-sm">
-          <div
-            class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs"
-          >
-            <div class="col-xs-12 col-sm-6 col-md-6">
-              <q-input
-                :class="
-                  getClass(status == 'checkRegister' || status == 'payment')
-                "
-                :outlined="status == 'checkRegister' || status == 'payment'"
-                dense
-                lazy-rules
-                :readonly="!status == 'checkRegister' || status == 'payment'"
-                :borderless="!status == 'checkRegister' || status == 'payment'"
-                v-model="position"
-                :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่ง/ลักษณะงาน'}`]"
-                :label="`${'ตำแหน่ง/ลักษณะงาน'}`"
-                @update:modelValue="clickEditRowPosition"
-                hide-bottom-space
-              />
-            </div>
-            <div class="col-xs-12 col-sm-6 col-md-6">
-              <q-select
-                :class="
-                  getClass(status == 'checkRegister' || status == 'payment')
-                "
-                :outlined="status == 'checkRegister' || status == 'payment'"
-                dense
-                lazy-rules
-                :readonly="!status == 'checkRegister' || status == 'payment'"
-                :borderless="!status == 'checkRegister' || status == 'payment'"
-                v-model="type"
-                :options="opType"
-                :rules="[(val) => !!val || `${'กรุณาเลือกประเภท'}`]"
-                :label="`${'ประเภท'}`"
-                @update:modelValue="clickEditRowPosition"
-                hide-bottom-space
-              />
-            </div>
-            <!-- <div class="col-xs-12 col-sm-6 col-md-6">
-              <q-input
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="group"
-                :rules="[(val) => !!val || `${'กรุณากรอกกลุ่ม/ฝ่าย'}`]"
-                :label="`${'กลุ่ม/ฝ่าย'}`"
-                @update:modelValue="clickEditRow"
-                hide-bottom-space
-              />
-            </div>
-            <div class="col-xs-12 col-sm-6 col-md-6">
-              <q-input
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="pile"
-                :rules="[(val) => !!val || `${'กรุณากรอกกอง'}`]"
-                :label="`${'กอง'}`"
-                @update:modelValue="clickEditRow"
-                hide-bottom-space
-              />
-            </div>
-            <div class="col-xs-12 col-sm-6 col-md-6">
-              <q-input
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="org"
-                :rules="[(val) => !!val || `${'กรุณากรอกสังกัด'}`]"
-                :label="`${'ตำแหน่ง/ลักษณะงาน'}`"
-                @update:modelValue="clickEditRow"
-                hide-bottom-space
-              />
-            </div> -->
-            <div class="col-xs-12 col-sm-6 col-md-6">
-              <datepicker
-                menu-class-name="modalfix"
-                :readonly="!status == 'checkRegister' || status == 'payment'"
-                v-model="startDate"
-                :locale="'th'"
-                autoApply
-                :enableTimePicker="false"
-                @update:modelValue="clickEditRow"
-                week-start="0"
-              >
-                <template #year="{ year }">
-                  {{ year + 543 }}
-                </template>
-                <template #year-overlay-value="{ value }">
-                  {{ parseInt(value + 543) }}
-                </template>
-                <template #trigger>
-                  <q-input
-                    :class="
-                      getClass(status == 'checkRegister' || status == 'payment')
-                    "
-                    :outlined="status == 'checkRegister' || status == 'payment'"
-                    dense
-                    :borderless="
-                      !status == 'checkRegister' || status == 'payment'
-                    "
-                    :model-value="date2Thai(startDate)"
-                    :rules="[
-                      (val) => !!val || `${'กรุณาเลือกวันที่เริ่ม'}`,
-                      (val) =>
-                        startDate <= endDate ||
-                        `${'กรุณาเลือกวันที่เริ่มให้ถูกต้อง'}`,
-                    ]"
-                    hide-bottom-space
-                    :label="`${'วันที่เริ่ม'}`"
-                  >
-                    <template v-slot:prepend>
-                      <q-icon
-                        name="event"
-                        class="cursor-pointer"
-                        :style="
-                          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-6 col-md-6">
-              <datepicker
-                menu-class-name="modalfix"
-                :readonly="!status == 'checkRegister' || status == 'payment'"
-                v-model="endDate"
-                :locale="'th'"
-                autoApply
-                :enableTimePicker="false"
-                @update:modelValue="clickEditRow"
-                week-start="0"
-              >
-                <template #year="{ year }">
-                  {{ year + 543 }}
-                </template>
-                <template #year-overlay-value="{ value }">
-                  {{ parseInt(value + 543) }}
-                </template>
-                <template #trigger>
-                  <q-input
-                    :class="
-                      getClass(status == 'checkRegister' || status == 'payment')
-                    "
-                    :outlined="status == 'checkRegister' || status == 'payment'"
-                    dense
-                    :borderless="
-                      !status == 'checkRegister' || status == 'payment'
-                    "
-                    :model-value="date2Thai(endDate)"
-                    :rules="[
-                      (val) => !!val || `${'กรุณาเลือกวันที่สิ้นสุด'}`,
-                      (val) =>
-                        startDate <= endDate ||
-                        `${'กรุณาเลือกวันที่สิ้นสุดให้ถูกต้อง'}`,
-                    ]"
-                    hide-bottom-space
-                    :label="`${'วันที่สิ้นสุด'}`"
-                  >
-                    <template v-slot:prepend>
-                      <q-icon
-                        name="event"
-                        class="cursor-pointer"
-                        :style="
-                          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-12 col-md-12">
-              <q-input
-                :class="getClass(false)"
-                :outlined="false"
-                dense
-                lazy-rules
-                :readonly="!false"
-                :borderless="!false"
-                v-model="rangeDate"
-                :label="`${'ระยะเวลา'}`"
-                hide-bottom-space
-              />
-            </div>
-          </div>
-        </q-card-section>
-        <q-separator />
-        <DialogFooter
-          :edit="clickEdit"
-          :save="clickSave"
-          :validate="validateData"
-          :clickNext="clickNext"
-          :clickPrevious="clickPrevious"
-          :editData="status == 'checkRegister' || status == 'payment'"
-          v-model:editvisible="edit"
-          v-model:next="next"
-          v-model:previous="previous"
-          v-model:modalEdit="modalEdit"
-        />
-      </q-form>
-    </q-card>
-  </q-dialog>
-</template>
 <script setup lang="ts">
 import type { QTableProps } from "quasar";
 import { onMounted, ref, watch } from "vue";
@@ -402,39 +99,6 @@ const columns = ref<QTableProps["columns"]>([
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
-  //   {
-  //     name: "group",
-  //     align: "left",
-  //     label: "กลุ่ม/ฝ่าย",
-  //     sortable: true,
-  //     field: "group",
-  //     headerStyle: "font-size: 14px",
-  //     style: "font-size: 14px",
-  //     sort: (a: string, b: string) =>
-  //       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  //   },
-  //   {
-  //     name: "pile",
-  //     align: "left",
-  //     label: "กอง",
-  //     sortable: true,
-  //     field: "pile",
-  //     headerStyle: "font-size: 14px",
-  //     style: "font-size: 14px",
-  //     sort: (a: string, b: string) =>
-  //       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  //   },
-  //   {
-  //     name: "org",
-  //     align: "left",
-  //     label: "สังกัด",
-  //     sortable: true,
-  //     field: "org",
-  //     headerStyle: "font-size: 14px",
-  //     style: "font-size: 14px",
-  //     sort: (a: string, b: string) =>
-  //       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  //   },
   {
     name: "startDate",
     align: "center",
@@ -891,6 +555,265 @@ const getClass = (val: boolean) => {
   };
 };
 </script>
+
+<template>
+  <q-form ref="myForm">
+    <Table
+      :rows="rows"
+      :columns="columns"
+      :filter="filter"
+      :visible-columns="visibleColumns"
+      v-model:inputfilter="filter"
+      v-model:inputvisible="visibleColumns"
+      v-model:editvisible="edit"
+      :add="clickAdd"
+      :edit="clickEdit"
+      :addData="false"
+      :bottom="true"
+      :boss="status == 'checkRegister' || status == 'payment'"
+      :editData="status == 'checkRegister' || status == 'payment'"
+      name="ประวัติการทำงาน (ตั้งแต่เริ่มปฏิบัติงานกับกรุงเทพมหานคร - ปัจจุบัน)"
+      icon="mdi-briefcase"
+      :iconLeft="true"
+    >
+      <template #columns="props">
+        <q-tr :props="props">
+          <q-td
+            style="width: 5% !important"
+            v-if="status == 'checkRegister' || status == 'payment'"
+          >
+            <q-btn
+              color="red"
+              flat
+              dense
+              round
+              size="14px"
+              icon="mdi-trash-can-outline"
+              @click="checkDelete(props.row)"
+            />
+          </q-td>
+          <q-td
+            v-for="col in props.cols"
+            :key="col.name"
+            :props="props"
+            @click="selectData(props)"
+            class="cursor-pointer"
+          >
+            <div v-if="col.name == 'startDate' || col.name == 'endDate'">
+              {{ date2Thai(col.value) }}
+            </div>
+            <div v-else>
+              {{ col.value }}
+            </div>
+          </q-td>
+        </q-tr>
+      </template>
+      <template #bottom="props">
+        <div style="width: 67% !important" />
+
+        <div
+          :props="props"
+          class="row"
+          style="width: 33% !important; padding-left: 20px"
+        >
+          <div
+            class="text-weight-medium text-subtitle2 q-py-sm row col-12 justify-between"
+          >
+            <div>รวมระยะเวลา :</div>
+
+            <div>{{ total }}</div>
+          </div>
+        </div>
+      </template>
+    </Table>
+  </q-form>
+  <!-- popup Edit window-->
+  <q-dialog v-model="modal" persistent>
+    <q-card style="width: 600px">
+      <q-form ref="myForm">
+        <DialogHeader
+          tittle="ประวัติการทำงาน (ตั้งแต่เริ่มปฏิบัติงานกับกรุงเทพมหานคร - ปัจจุบัน)"
+          :close="checkClose"
+        />
+        <q-separator />
+        <q-card-section class="q-p-sm">
+          <div
+            class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs"
+          >
+            <div class="col-xs-12 col-sm-6 col-md-6">
+              <q-input
+                :class="
+                  getClass(status == 'checkRegister' || status == 'payment')
+                "
+                :outlined="status == 'checkRegister' || status == 'payment'"
+                dense
+                lazy-rules
+                :readonly="status !== 'checkRegister' && status == 'payment'"
+                :borderless="status !== 'checkRegister' && status == 'payment'"
+                v-model="position"
+                :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่ง/ลักษณะงาน'}`]"
+                :label="`${'ตำแหน่ง/ลักษณะงาน'}`"
+                @update:modelValue="clickEditRowPosition"
+                hide-bottom-space
+              />
+            </div>
+            <div class="col-xs-12 col-sm-6 col-md-6">
+              <q-select
+                :class="
+                  getClass(status == 'checkRegister' || status == 'payment')
+                "
+                :outlined="status == 'checkRegister' || status == 'payment'"
+                dense
+                lazy-rules
+                :readonly="status !== 'checkRegister' && status == 'payment'"
+                :borderless="status !== 'checkRegister' && status == 'payment'"
+                v-model="type"
+                :options="opType"
+                :rules="[(val) => !!val || `${'กรุณาเลือกประเภท'}`]"
+                :label="`${'ประเภท'}`"
+                @update:modelValue="clickEditRowPosition"
+                hide-bottom-space
+              />
+            </div>
+            <div class="col-xs-12 col-sm-6 col-md-6">
+              <datepicker
+                menu-class-name="modalfix"
+                :readonly="status !== 'checkRegister' && status == 'payment'"
+                v-model="startDate"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                @update:modelValue="clickEditRow"
+                week-start="0"
+              >
+                <template #year="{ year }">
+                  {{ year + 543 }}
+                </template>
+                <template #year-overlay-value="{ value }">
+                  {{ parseInt(value + 543) }}
+                </template>
+                <template #trigger>
+                  <q-input
+                    :class="
+                      getClass(status == 'checkRegister' || status == 'payment')
+                    "
+                    :outlined="status == 'checkRegister' || status == 'payment'"
+                    dense
+                    :borderless="
+                      status !== 'checkRegister' && status == 'payment'
+                    "
+                    :model-value="date2Thai(startDate)"
+                    :rules="[
+                      (val) => !!val || `${'กรุณาเลือกวันที่เริ่ม'}`,
+                      (val) =>
+                        startDate <= endDate ||
+                        `${'กรุณาเลือกวันที่เริ่มให้ถูกต้อง'}`,
+                    ]"
+                    hide-bottom-space
+                    :label="`${'วันที่เริ่ม'}`"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        :style="
+                          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-6 col-md-6">
+              <datepicker
+                menu-class-name="modalfix"
+                :readonly="status !== 'checkRegister' && status == 'payment'"
+                v-model="endDate"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                @update:modelValue="clickEditRow"
+                week-start="0"
+              >
+                <template #year="{ year }">
+                  {{ year + 543 }}
+                </template>
+                <template #year-overlay-value="{ value }">
+                  {{ parseInt(value + 543) }}
+                </template>
+                <template #trigger>
+                  <q-input
+                    :class="
+                      getClass(status == 'checkRegister' || status == 'payment')
+                    "
+                    :outlined="status == 'checkRegister' || status == 'payment'"
+                    dense
+                    :borderless="
+                      status !== 'checkRegister' && status == 'payment'
+                    "
+                    :model-value="date2Thai(endDate)"
+                    :rules="[
+                      (val) => !!val || `${'กรุณาเลือกวันที่สิ้นสุด'}`,
+                      (val) =>
+                        startDate <= endDate ||
+                        `${'กรุณาเลือกวันที่สิ้นสุดให้ถูกต้อง'}`,
+                    ]"
+                    hide-bottom-space
+                    :label="`${'วันที่สิ้นสุด'}`"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        :style="
+                          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-12 col-md-12">
+              <q-input
+                :class="getClass(false)"
+                :outlined="false"
+                dense
+                lazy-rules
+                :readonly="!false"
+                :borderless="!false"
+                v-model="rangeDate"
+                :label="`${'ระยะเวลา'}`"
+                hide-bottom-space
+              />
+            </div>
+          </div>
+        </q-card-section>
+        <q-separator />
+        <DialogFooter
+          :edit="clickEdit"
+          :save="clickSave"
+          :validate="validateData"
+          :clickNext="clickNext"
+          :clickPrevious="clickPrevious"
+          :editData="status == 'checkRegister' || status == 'payment'"
+          v-model:editvisible="edit"
+          v-model:next="next"
+          v-model:previous="previous"
+          v-model:modalEdit="modalEdit"
+        />
+      </q-form>
+    </q-card>
+  </q-dialog>
+</template>
+
 <style lang="scss">
 .modalfix {
   position: fixed !important;
diff --git a/src/modules/03_recruiting/components/Contact.vue b/src/modules/03_recruiting/components/Contact.vue
index db94bf042..92283145f 100644
--- a/src/modules/03_recruiting/components/Contact.vue
+++ b/src/modules/03_recruiting/components/Contact.vue
@@ -1,4 +1,85 @@
-<!-- card บุคคลที่สามารถติดต่อได้ -->
+<script setup lang="ts">
+import { ref, onMounted, watch, type PropType } from "vue";
+import { useRoute } from "vue-router";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar } from "quasar";
+import type {
+  Contact,
+  DataOption,
+} from "@/modules/03_recruiting/interface/index/Main";
+
+import {
+  defaultContact,
+  changeData,
+} from "@/modules/03_recruiting/interface/index/Main";
+import HeaderTop from "@/modules/03_recruiting/components/top.vue";
+
+const props = defineProps({
+  status: {
+    type: String,
+    required: true,
+  },
+  form: {
+    type: Object,
+    required: true,
+  },
+  prefixOptions: {
+    type: Array as PropType<DataOption[]>,
+    required: true,
+  },
+});
+const emit = defineEmits(["update:form"]);
+
+const mixin = useCounterMixin();
+const { showLoader, hideLoader } = mixin;
+const edit = ref<boolean>(true);
+const myform = ref<Object | null>(null);
+const route = useRoute();
+const candidateId = ref<string>(route.params.candidateId.toString());
+
+watch(myform, async (count: any) => {
+  emit("update:form", count);
+});
+
+watch(defaultContact, async (count: Contact) => {
+  await changeData("contact", count);
+});
+
+onMounted(async () => {
+  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) => {})
+    .finally(() => {
+      hideLoader();
+    });
+};
+
+const getClass = (val: boolean) => {
+  return {
+    "full-width inputgreen cursor-pointer": val,
+    "full-width cursor-pointer": !val,
+  };
+};
+</script>
+
 <template>
   <HeaderTop
     v-model:edit="edit"
@@ -94,86 +175,3 @@
     </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,
-} from "@/modules/03_recruiting/interface/index/Main";
-import {
-  defaultContact,
-  changeData,
-} from "@/modules/03_recruiting/interface/index/Main";
-import HeaderTop from "@/modules/03_recruiting/components/top.vue";
-import { useRoute } from "vue-router";
-
-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,
-  },
-});
-const emit = defineEmits(["update:form"]);
-
-const $q = useQuasar();
-const mixin = useCounterMixin();
-const { messageError, showLoader, hideLoader } = mixin;
-const edit = ref<boolean>(true);
-const myform = ref<any>({});
-const route = useRoute();
-const candidateId = ref<string>(route.params.candidateId.toString());
-
-watch(myform, async (count: any, prevCount: any) => {
-  emit("update:form", count);
-});
-
-watch(defaultContact, async (count: Contact, prevCount: Contact) => {
-  await changeData("contact", count);
-});
-
-onMounted(async () => {
-  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();
-    });
-};
-
-const getClass = (val: boolean) => {
-  return {
-    "full-width inputgreen cursor-pointer": val,
-    "full-width cursor-pointer": !val,
-  };
-};
-</script>
diff --git a/src/modules/03_recruiting/components/CurruncyInput.vue b/src/modules/03_recruiting/components/CurruncyInput.vue
index 9386d093e..7ab182fa9 100644
--- a/src/modules/03_recruiting/components/CurruncyInput.vue
+++ b/src/modules/03_recruiting/components/CurruncyInput.vue
@@ -1,24 +1,3 @@
-<template>
-  <q-input
-    ref="inputRef"
-    v-model="formattedValue"
-    :dense="dense"
-    :outlined="edit"
-    :class="
-      edit == true
-        ? 'full-width inputgreen cursor-pointer'
-        : 'full-width cursor-pointer'
-    "
-    :readonly="!edit"
-    :borderless="!edit"
-    hide-bottom-space
-  >
-    <template v-for="slot in slots">
-      <slot :name="slot" />
-    </template>
-  </q-input>
-</template>
-
 <script setup lang="ts">
 import { useCurrencyInput } from "vue-currency-input";
 import { ref, useSlots, watch } from "vue";
@@ -58,3 +37,23 @@ watch(
   }
 );
 </script>
+<template>
+  <q-input
+    ref="inputRef"
+    v-model="formattedValue"
+    :dense="dense"
+    :outlined="edit"
+    :class="
+      edit == true
+        ? 'full-width inputgreen cursor-pointer'
+        : 'full-width cursor-pointer'
+    "
+    :readonly="!edit"
+    :borderless="!edit"
+    hide-bottom-space
+  >
+    <template v-for="slot in slots">
+      <slot :name="slot" />
+    </template>
+  </q-input>
+</template>
diff --git a/src/modules/03_recruiting/components/DialogFooter.vue b/src/modules/03_recruiting/components/DialogFooter.vue
index 20c8c16c2..8151c6776 100644
--- a/src/modules/03_recruiting/components/DialogFooter.vue
+++ b/src/modules/03_recruiting/components/DialogFooter.vue
@@ -1,51 +1,3 @@
-<template>
-  <q-card-actions class="text-primary q-py-sm">
-    <q-btn
-      flat
-      round
-      icon="mdi-menu-left"
-      @click="clickPrevious"
-      v-if="modalEdit == true"
-      :disable="previous == false"
-      :color="!previous ? 'grey-7' : 'public'"
-    />
-    <q-btn
-      flat
-      round
-      icon="mdi-menu-right"
-      @click="clickNext"
-      v-if="modalEdit == true"
-      :disable="next == false"
-      :color="!next ? 'grey-7' : 'public'"
-    />
-    <q-space />
-    <div v-if="editData">
-      <q-btn
-        v-if="!editvisible"
-        flat
-        round
-        :disabled="editvisible"
-        :color="editvisible ? 'grey-7' : 'primary'"
-        @click="edit"
-        icon="mdi-pencil-outline"
-      >
-        <q-tooltip>แก้ไขข้อมูล</q-tooltip>
-      </q-btn>
-      <div v-else>
-        <q-btn
-          flat
-          round
-          :disabled="!editvisible"
-          :color="!editvisible ? 'grey-7' : 'public'"
-          @click="checkSave"
-          icon="mdi-content-save-outline"
-        >
-          <q-tooltip>บันทึก</q-tooltip>
-        </q-btn>
-      </div>
-    </div>
-  </q-card-actions>
-</template>
 <script setup lang="ts">
 const props = defineProps({
   editvisible: Boolean,
@@ -103,3 +55,51 @@ const clickPrevious = async () => {
   await props.clickPrevious();
 };
 </script>
+<template>
+  <q-card-actions class="text-primary q-py-sm">
+    <q-btn
+      flat
+      round
+      icon="mdi-menu-left"
+      @click="clickPrevious"
+      v-if="modalEdit == true"
+      :disable="previous == false"
+      :color="!previous ? 'grey-7' : 'public'"
+    />
+    <q-btn
+      flat
+      round
+      icon="mdi-menu-right"
+      @click="clickNext"
+      v-if="modalEdit == true"
+      :disable="next == false"
+      :color="!next ? 'grey-7' : 'public'"
+    />
+    <q-space />
+    <div v-if="editData">
+      <q-btn
+        v-if="!editvisible"
+        flat
+        round
+        :disabled="editvisible"
+        :color="editvisible ? 'grey-7' : 'primary'"
+        @click="edit"
+        icon="mdi-pencil-outline"
+      >
+        <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+      </q-btn>
+      <div v-else>
+        <q-btn
+          flat
+          round
+          :disabled="!editvisible"
+          :color="!editvisible ? 'grey-7' : 'public'"
+          @click="checkSave"
+          icon="mdi-content-save-outline"
+        >
+          <q-tooltip>บันทึก</q-tooltip>
+        </q-btn>
+      </div>
+    </div>
+  </q-card-actions>
+</template>
diff --git a/src/modules/03_recruiting/components/Document.vue b/src/modules/03_recruiting/components/Document.vue
index 16cb85c3e..c756b5063 100644
--- a/src/modules/03_recruiting/components/Document.vue
+++ b/src/modules/03_recruiting/components/Document.vue
@@ -1,4 +1,110 @@
-<!-- card อัปโหลดเอกสาร -->
+<script setup lang="ts">
+import { onMounted, ref } from "vue";
+import { useQuasar } from "quasar";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useRoute } from "vue-router";
+import { useCounterMixin } from "@/stores/mixin";
+
+import type { UploadType } from "@/modules/03_recruiting/interface/index/Main";
+
+import HeaderTop from "@/modules/03_recruiting/components/top.vue";
+
+const props = defineProps({
+  status: {
+    type: String,
+    required: true,
+  },
+});
+const $q = useQuasar();
+const route = useRoute();
+const mixin = useCounterMixin();
+const { messageError, showLoader, hideLoader } = mixin;
+
+const candidateId = ref<string>(route.params.candidateId.toString());
+const uploader = ref<any>();
+
+const edit = ref<boolean>(props.status == "checkRegister");
+const name = ref<string>("");
+const files = ref<UploadType[]>([]);
+const file = ref<File[]>([]);
+
+async function fileAdd(val: any) {
+  name.value = val[0].name;
+  file.value = val;
+}
+
+async function getData() {
+  showLoader();
+  await http
+    .get(config.API.candidateUpload(candidateId.value))
+    .then((res) => {
+      const data = res.data.result;
+      files.value = data;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+async function deleteData(id: string) {
+  const params = {
+    documentId: id,
+  };
+  showLoader();
+  await http
+    .delete(config.API.candidateUpload(candidateId.value), {
+      params,
+    })
+    .then((res) => {
+      const data = res.data.result;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      hideLoader();
+      await getData();
+    });
+}
+
+async function uploadData() {
+  const blob = file.value.slice(0, file.value[0].size);
+  const newFile = new File(blob, name.value, {
+    type: file.value[0].type,
+  });
+  const formData = new FormData();
+  formData.append("", newFile);
+  showLoader();
+  await http
+    .put(config.API.candidateUpload(candidateId.value), formData)
+    .then((res) => {
+      const data = res.data.result;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      hideLoader();
+      name.value = "";
+      uploader.value.reset();
+      await getData();
+    });
+}
+
+async function downloadData(path: string) {
+  window.open(path);
+}
+
+onMounted(async () => {
+  await getData();
+});
+</script>
+
 <template>
   <HeaderTop
     v-model:edit="edit"
@@ -136,106 +242,3 @@
     </q-list>
   </q-card>
 </template>
-<script setup lang="ts">
-import { onMounted, ref } from "vue";
-import HeaderTop from "@/modules/03_recruiting/components/top.vue";
-import http from "@/plugins/http";
-import config from "@/app.config";
-import { useRoute } from "vue-router";
-
-import type { UploadType } from "@/modules/03_recruiting/interface/index/Main";
-import { useCounterMixin } from "@/stores/mixin";
-import { useQuasar } from "quasar";
-
-const props = defineProps({
-  status: {
-    type: String,
-    required: true,
-  },
-});
-const $q = useQuasar();
-const route = useRoute();
-const candidateId = ref<string>(route.params.candidateId.toString());
-const uploader = ref<any>();
-
-const edit = ref<boolean>(props.status == "checkRegister");
-const name = ref<string>("");
-const files = ref<UploadType[]>([]);
-const file = ref<File[]>([]);
-const mixin = useCounterMixin();
-const { messageError, showLoader, hideLoader } = mixin;
-
-onMounted(async () => {
-  await getData();
-});
-
-const fileAdd = async (val: any) => {
-  name.value = val[0].name;
-  file.value = val;
-};
-
-const getData = async () => {
-  showLoader();
-  await http
-    .get(config.API.candidateUpload(candidateId.value))
-    .then((res) => {
-      const data = res.data.result;
-      files.value = data;
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-};
-
-const deleteData = async (id: string) => {
-  const params = {
-    documentId: id,
-  };
-  showLoader();
-  await http
-    .delete(config.API.candidateUpload(candidateId.value), {
-      params,
-    })
-    .then((res) => {
-      const data = res.data.result;
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      hideLoader();
-      await getData();
-    });
-};
-
-const uploadData = async () => {
-  const blob = file.value.slice(0, file.value[0].size);
-  const newFile = new File(blob, name.value, {
-    type: file.value[0].type,
-  });
-  const formData = new FormData();
-  formData.append("", newFile);
-  showLoader();
-  await http
-    .put(config.API.candidateUpload(candidateId.value), formData)
-    .then((res) => {
-      const data = res.data.result;
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      hideLoader();
-      name.value = "";
-      uploader.value.reset();
-      await getData();
-    });
-};
-
-const downloadData = async (path: string) => {
-  window.open(path);
-};
-</script>
diff --git a/src/modules/03_recruiting/components/Education.vue b/src/modules/03_recruiting/components/Education.vue
index 96566474e..d4f66d0cb 100644
--- a/src/modules/03_recruiting/components/Education.vue
+++ b/src/modules/03_recruiting/components/Education.vue
@@ -1,4 +1,118 @@
-<!-- card วุฒิที่ใช้สมัครสอบ -->
+<script setup lang="ts">
+import { ref, onMounted, watch, type PropType } from "vue";
+import { useQuasar } from "quasar";
+import { useRoute } from "vue-router";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
+
+import type {
+  DataOption,
+  Education,
+} from "@/modules/03_recruiting/interface/index/Main";
+
+import {
+  defaultEducation,
+  changeData,
+} from "@/modules/03_recruiting/interface/index/Main";
+import HeaderTop from "@/modules/03_recruiting/components/top.vue";
+
+const props = defineProps({
+  status: {
+    type: String,
+    required: true,
+  },
+  form: {
+    type: Object,
+    required: true,
+  },
+  educationLevelOptions: {
+    type: Array as PropType<DataOption[]>,
+    required: true,
+  },
+});
+
+const $q = useQuasar();
+const route = useRoute();
+
+const edit = ref<boolean>(true);
+const showEducationName = ref<boolean>(true);
+const myform = ref<object | null>(null);
+const candidateId = ref<string>(route.params.candidateId.toString());
+const educationTypeOptions = ref<DataOption[]>([
+  {
+    name: "รัฐบาล",
+    id: "รัฐบาล",
+  },
+  {
+    name: "เอกชน",
+    id: "เอกชน",
+  },
+]);
+
+const mixin = useCounterMixin();
+const { messageError, showLoader, hideLoader, date2Thai } = mixin;
+
+const emit = defineEmits(["update:form"]);
+
+watch(myform, async (count: any) => {
+  emit("update:form", count);
+});
+
+watch(defaultEducation, async (count: Education) => {
+  await changeData("education", count);
+});
+
+onMounted(async () => {
+  await fetchData();
+});
+
+const fetchData = async () => {
+  showLoader();
+  await http
+    .get(config.API.candidateEducation(candidateId.value))
+    .then((res) => {
+      const data = res.data.result;
+      if (data != null) {
+        defaultEducation.value.educationLevelExamId = data.educationLevelExamId;
+        defaultEducation.value.educationName = data.educationName;
+        defaultEducation.value.educationMajor = data.educationMajor;
+        defaultEducation.value.educationLocation = data.educationLocation;
+        defaultEducation.value.educationType = data.educationType;
+        defaultEducation.value.educationEndDate = data.educationEndDate;
+        defaultEducation.value.educationScores = data.educationScores;
+        defaultEducation.value.educationLevelHighId = data.educationLevelHighId;
+        checkInputName();
+      }
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+
+const checkInputName = () => {
+  showEducationName.value =
+    props.educationLevelOptions.filter(
+      (x) =>
+        x.id == defaultEducation.value.educationLevelExamId &&
+        (x.name == "ปริญญาตรี" || x.name == "ปริญญาโท" || x.name == "ปริญญาเอก")
+    ).length == 0
+      ? false
+      : true;
+};
+
+const getClass = (val: boolean) => {
+  return {
+    "full-width inputgreen cursor-pointer": val,
+    "full-width cursor-pointer": !val,
+  };
+};
+</script>
+
 <template>
   <HeaderTop
     v-model:edit="edit"
@@ -176,114 +290,3 @@
     </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 {
-  DataOption,
-  Education,
-} from "@/modules/03_recruiting/interface/index/Main";
-import {
-  defaultEducation,
-  changeData,
-} from "@/modules/03_recruiting/interface/index/Main";
-import HeaderTop from "@/modules/03_recruiting/components/top.vue";
-import { useRoute } from "vue-router";
-
-import { useCounterMixin } from "@/stores/mixin";
-import { useQuasar } from "quasar";
-
-const props = defineProps({
-  status: {
-    type: String,
-    required: true,
-  },
-  form: {
-    type: Object,
-    required: true,
-  },
-  educationLevelOptions: {
-    type: Array as PropType<DataOption[]>,
-    required: true,
-  },
-});
-
-const $q = useQuasar();
-const edit = ref<boolean>(true);
-const showEducationName = ref<boolean>(true);
-const myform = ref<any>({});
-const route = useRoute();
-const candidateId = ref<string>(route.params.candidateId.toString());
-const educationTypeOptions = ref<any>([
-  {
-    name: "รัฐบาล",
-    id: "รัฐบาล",
-  },
-  {
-    name: "เอกชน",
-    id: "เอกชน",
-  },
-]);
-
-const mixin = useCounterMixin();
-const { messageError, showLoader, hideLoader, date2Thai } = mixin;
-
-const emit = defineEmits(["update:form"]);
-
-watch(myform, async (count: any, prevCount: any) => {
-  emit("update:form", count);
-});
-
-watch(defaultEducation, async (count: Education, prevCount: Education) => {
-  await changeData("education", count);
-});
-
-onMounted(async () => {
-  await fetchData();
-});
-
-const fetchData = async () => {
-  showLoader();
-  await http
-    .get(config.API.candidateEducation(candidateId.value))
-    .then((res) => {
-      const data = res.data.result;
-      if (data != null) {
-        defaultEducation.value.educationLevelExamId = data.educationLevelExamId;
-        defaultEducation.value.educationName = data.educationName;
-        defaultEducation.value.educationMajor = data.educationMajor;
-        defaultEducation.value.educationLocation = data.educationLocation;
-        defaultEducation.value.educationType = data.educationType;
-        defaultEducation.value.educationEndDate = data.educationEndDate;
-        defaultEducation.value.educationScores = data.educationScores;
-        defaultEducation.value.educationLevelHighId = data.educationLevelHighId;
-        checkInputName();
-      }
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-};
-
-const checkInputName = () => {
-  showEducationName.value =
-    props.educationLevelOptions.filter(
-      (x) =>
-        x.id == defaultEducation.value.educationLevelExamId &&
-        (x.name == "ปริญญาตรี" || x.name == "ปริญญาโท" || x.name == "ปริญญาเอก")
-    ).length == 0
-      ? false
-      : true;
-};
-
-const getClass = (val: boolean) => {
-  return {
-    "full-width inputgreen cursor-pointer": val,
-    "full-width cursor-pointer": !val,
-  };
-};
-</script>
diff --git a/src/modules/03_recruiting/components/ExamFinished.vue b/src/modules/03_recruiting/components/ExamFinished.vue
index 8fdc0c397..bc824c871 100644
--- a/src/modules/03_recruiting/components/ExamFinished.vue
+++ b/src/modules/03_recruiting/components/ExamFinished.vue
@@ -1,3 +1,89 @@
+<script setup lang="ts">
+import { onMounted, ref } from "vue";
+import { useQuasar } from "quasar";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
+
+const props = defineProps({
+  status: {
+    type: String,
+    required: true,
+  },
+  candidateId: {
+    type: String,
+    required: true,
+  },
+});
+
+const $q = useQuasar();
+const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
+const { messageError, date2Thai, showLoader, hideLoader } = mixin;
+
+const fullName = ref<string>("");
+const examNumber = ref<string>("");
+const citizenId = ref<string>("");
+const examSeat = ref<string>("");
+const number = ref<string>("");
+const scoreAFull = ref<number | null>(null);
+const scoreA = ref<number | null>(null);
+const scoreBFull = ref<number | null>(null);
+const scoreB = ref<number | null>(null);
+const scoreCFull = ref<number | null>(null);
+const scoreC = ref<number | null>(null);
+const scoreSumFull = ref<number | null>(null);
+const scoreSum = ref<number | null>(null);
+const examResultinscore = ref<string>("");
+const avatar = ref<string>("");
+const score_expired = ref<Date | null>(new Date());
+const reviewPoint = ref<any>();
+const review = ref<string>("-");
+
+onMounted(async () => {
+  await fetchCard();
+});
+
+const fetchCard = async () => {
+  showLoader();
+  await http
+    .get(config.API.candidateCard(props.candidateId))
+    .then((res) => {
+      const data = res.data.result;
+      fullName.value = data.prefix + data.firstName + " " + data.lastName;
+      examNumber.value = data.examIdenNumber;
+      citizenId.value = data.citizenId;
+      examSeat.value = data.seatNumber;
+      scoreAFull.value = data.pointTotalA;
+      scoreA.value = data.pointA;
+      scoreBFull.value = data.pointTotalB;
+      scoreB.value = data.pointB;
+      scoreCFull.value = data.pointTotalC;
+      scoreC.value = data.pointC;
+      scoreSum.value =
+        parseInt(data.pointA == null ? 0 : data.pointA) +
+        parseInt(data.pointB == null ? 0 : data.pointB) +
+        parseInt(data.pointC == null ? 0 : data.pointC);
+      scoreSumFull.value =
+        parseInt(data.pointTotalA == null ? 0 : data.pointTotalA) +
+        parseInt(data.pointTotalB == null ? 0 : data.pointTotalB) +
+        parseInt(data.pointTotalC == null ? 0 : data.pointTotalC);
+      examResultinscore.value = data.pass;
+      avatar.value = data.avatar;
+      score_expired.value =
+        data.announcementDate == null ? null : new Date(data.announcementDate);
+      number.value = data.number;
+      reviewPoint.value = data.reviewPoint;
+      review.value = data.review == null ? "-" : data.review;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+</script>
 <template>
   <q-card bordered flat class="col-12 row">
     <div class="col-9 q-pa-md q-col-gutter-sm">
@@ -17,18 +103,6 @@
         <div class="">สนามสอบ :</div>
         <div class="text-black text-bold q-pl-sm">{{ examSeat }}</div>
       </div>
-      <!-- <div class="row">
-        <div class="">วันสอบ :</div>
-        <div class="text-black text-bold q-pl-sm">5 มิ.ย. 2566</div>
-      </div>
-      <div class="row">
-        <div class="">ครั้งที่สอบ :</div>
-        <div class="text-black text-bold q-pl-sm">1</div>
-      </div>
-      <div class="row">
-        <div class="">ชุดข้อสอบ :</div>
-        <div class="text-black text-bold q-pl-sm">0506-1/2566</div>
-      </div> -->
     </div>
 
     <q-card-section class="col-3">
@@ -150,91 +224,4 @@
   </q-card>
 </template>
 
-<script setup lang="ts">
-import { onMounted, ref } from "vue";
-import { useCounterMixin } from "@/stores/mixin";
-import http from "@/plugins/http";
-import config from "@/app.config";
-
-import { useQuasar } from "quasar";
-
-const props = defineProps({
-  status: {
-    type: String,
-    required: true,
-  },
-  candidateId: {
-    type: String,
-    required: true,
-  },
-});
-
-const $q = useQuasar();
-const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
-const { messageError, date2Thai, showLoader, hideLoader } = mixin;
-
-const fullName = ref<string>("");
-const examNumber = ref<string>("");
-const citizenId = ref<string>("");
-const examSeat = ref<string>("");
-const number = ref<string>("");
-const scoreAFull = ref<number | null>(null);
-const scoreA = ref<number | null>(null);
-const scoreBFull = ref<number | null>(null);
-const scoreB = ref<number | null>(null);
-const scoreCFull = ref<number | null>(null);
-const scoreC = ref<number | null>(null);
-const scoreSumFull = ref<number | null>(null);
-const scoreSum = ref<number | null>(null);
-const examResultinscore = ref<string>("");
-const avatar = ref<string>("");
-const score_expired = ref<Date | null>(new Date());
-const reviewPoint = ref<number>();
-const review = ref<string>("-");
-
-onMounted(async () => {
-  await fetchCard();
-});
-
-const fetchCard = async () => {
-  showLoader();
-  await http
-    .get(config.API.candidateCard(props.candidateId))
-    .then((res) => {
-      const data = res.data.result;
-      fullName.value = data.prefix + data.firstName + " " + data.lastName;
-      examNumber.value = data.examIdenNumber;
-      citizenId.value = data.citizenId;
-      examSeat.value = data.seatNumber;
-      scoreAFull.value = data.pointTotalA;
-      scoreA.value = data.pointA;
-      scoreBFull.value = data.pointTotalB;
-      scoreB.value = data.pointB;
-      scoreCFull.value = data.pointTotalC;
-      scoreC.value = data.pointC;
-      scoreSum.value =
-        parseInt(data.pointA == null ? 0 : data.pointA) +
-        parseInt(data.pointB == null ? 0 : data.pointB) +
-        parseInt(data.pointC == null ? 0 : data.pointC);
-      scoreSumFull.value =
-        parseInt(data.pointTotalA == null ? 0 : data.pointTotalA) +
-        parseInt(data.pointTotalB == null ? 0 : data.pointTotalB) +
-        parseInt(data.pointTotalC == null ? 0 : data.pointTotalC);
-      examResultinscore.value = data.pass;
-      avatar.value = data.avatar;
-      score_expired.value =
-        data.announcementDate == null ? null : new Date(data.announcementDate);
-      number.value = data.number;
-      reviewPoint.value = data.reviewPoint;
-      review.value = data.review == null ? "-" : data.review;
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-};
-</script>
-
 <style lang="scss" scoped></style>
diff --git a/src/modules/03_recruiting/components/Family.vue b/src/modules/03_recruiting/components/Family.vue
index 6dc72adc8..6983283ce 100644
--- a/src/modules/03_recruiting/components/Family.vue
+++ b/src/modules/03_recruiting/components/Family.vue
@@ -1,4 +1,101 @@
 <!-- card ข้อมูลครอบครัว -->
+<script setup lang="ts">
+import { ref, onMounted, watch } from "vue";
+import type { PropType } from "vue";
+import { useQuasar } from "quasar";
+import { useRoute } from "vue-router";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
+
+import type {
+  Family,
+  DataOption,
+} from "@/modules/03_recruiting/interface/index/Main";
+
+import {
+  defaultFamily,
+  changeData,
+} from "@/modules/03_recruiting/interface/index/Main";
+import HeaderTop from "@/modules/03_recruiting/components/top.vue";
+
+const props = defineProps({
+  prefixOptions: {
+    type: Array as PropType<DataOption[]>,
+    required: true,
+  },
+  status: {
+    type: String,
+    required: true,
+  },
+  form: {
+    type: Object,
+    required: true,
+  },
+});
+const $q = useQuasar();
+const route = useRoute();
+const mixin = useCounterMixin();
+const { messageError, showLoader, hideLoader } = mixin;
+
+const edit = ref<boolean>(true);
+const myform = ref<object | null>(null);
+const candidateId = ref<string>(route.params.candidateId.toString());
+
+const emit = defineEmits(["update:form"]);
+
+async function fetchData() {
+  showLoader();
+  await http
+    .get(config.API.candidateFamily(candidateId.value))
+    .then((res) => {
+      const data = res.data.result;
+      defaultFamily.value.prefixIdC = data.marryPrefixId;
+      defaultFamily.value.firstnameC = data.marryFirstName;
+      defaultFamily.value.lastnameC = data.marryLastName;
+      defaultFamily.value.occupationC = data.marryOccupation;
+      defaultFamily.value.nationalityC = data.marryNationality;
+      defaultFamily.value.prefixIdM = data.fatherPrefixId;
+      defaultFamily.value.firstnameM = data.fatherFirstName;
+      defaultFamily.value.lastnameM = data.fatherLastName;
+      defaultFamily.value.occupationM = data.fatherOccupation;
+      defaultFamily.value.nationalityM = data.fatherNationality;
+      defaultFamily.value.prefixIdF = data.motherPrefixId;
+      defaultFamily.value.firstnameF = data.motherFirstName;
+      defaultFamily.value.lastnameF = data.motherLastName;
+      defaultFamily.value.occupationF = data.motherOccupation;
+      defaultFamily.value.nationalityF = data.motherNationality;
+      defaultFamily.value.same =
+        data.marry == true ? "1" : data.marry == false ? "0" : null;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+function getClass(val: boolean) {
+  return {
+    "full-width inputgreen cursor-pointer": val,
+    "full-width cursor-pointer": !val,
+  };
+}
+
+watch(myform, async (count: any, prevCount: any) => {
+  emit("update:form", count);
+});
+
+watch(defaultFamily, async (count: Family, prevCount: Family) => {
+  await changeData("family", count);
+});
+
+onMounted(async () => {
+  await fetchData();
+});
+</script>
 <template>
   <HeaderTop
     v-model:edit="edit"
@@ -266,98 +363,3 @@
     </div>
   </q-form>
 </template>
-<script setup lang="ts">
-import { ref, onMounted, watch } from "vue";
-import type { PropType } from "vue";
-import http from "@/plugins/http";
-import config from "@/app.config";
-import type {
-  Family,
-  DataOption,
-} from "@/modules/03_recruiting/interface/index/Main";
-import {
-  defaultFamily,
-  changeData,
-} from "@/modules/03_recruiting/interface/index/Main";
-import HeaderTop from "@/modules/03_recruiting/components/top.vue";
-import { useRoute } from "vue-router";
-import { useCounterMixin } from "@/stores/mixin";
-
-import { useQuasar } from "quasar";
-
-const props = defineProps({
-  prefixOptions: {
-    type: Array as PropType<DataOption[]>,
-    required: true,
-  },
-  status: {
-    type: String,
-    required: true,
-  },
-  form: {
-    type: Object,
-    required: true,
-  },
-});
-const $q = useQuasar();
-
-const mixin = useCounterMixin();
-const { messageError, showLoader, hideLoader } = mixin;
-const edit = ref<boolean>(true);
-const myform = ref<any>({});
-const route = useRoute();
-const candidateId = ref<string>(route.params.candidateId.toString());
-
-const emit = defineEmits(["update:form"]);
-
-watch(myform, async (count: any, prevCount: any) => {
-  emit("update:form", count);
-});
-
-watch(defaultFamily, async (count: Family, prevCount: Family) => {
-  await changeData("family", count);
-});
-
-onMounted(async () => {
-  await fetchData();
-});
-
-const fetchData = async () => {
-  showLoader();
-  await http
-    .get(config.API.candidateFamily(candidateId.value))
-    .then((res) => {
-      const data = res.data.result;
-      defaultFamily.value.prefixIdC = data.marryPrefixId;
-      defaultFamily.value.firstnameC = data.marryFirstName;
-      defaultFamily.value.lastnameC = data.marryLastName;
-      defaultFamily.value.occupationC = data.marryOccupation;
-      defaultFamily.value.nationalityC = data.marryNationality;
-      defaultFamily.value.prefixIdM = data.fatherPrefixId;
-      defaultFamily.value.firstnameM = data.fatherFirstName;
-      defaultFamily.value.lastnameM = data.fatherLastName;
-      defaultFamily.value.occupationM = data.fatherOccupation;
-      defaultFamily.value.nationalityM = data.fatherNationality;
-      defaultFamily.value.prefixIdF = data.motherPrefixId;
-      defaultFamily.value.firstnameF = data.motherFirstName;
-      defaultFamily.value.lastnameF = data.motherLastName;
-      defaultFamily.value.occupationF = data.motherOccupation;
-      defaultFamily.value.nationalityF = data.motherNationality;
-      defaultFamily.value.same =
-        data.marry == true ? "1" : data.marry == false ? "0" : null;
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-};
-
-const getClass = (val: boolean) => {
-  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 bfa33c014..67cd95b2f 100644
--- a/src/modules/03_recruiting/components/Information.vue
+++ b/src/modules/03_recruiting/components/Information.vue
@@ -1,4 +1,185 @@
-<!-- card ข้อมูลส่วนตัว -->
+<script setup lang="ts">
+import { ref, onMounted, watch } from "vue";
+import type { PropType } from "vue";
+import { useQuasar } from "quasar";
+import { useRoute } from "vue-router";
+import { tokenParsed } from "@/plugins/auth";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
+
+import type {
+  Information,
+  DataOption,
+} from "@/modules/03_recruiting/interface/index/Main";
+
+import {
+  defaultInformation,
+  changeData,
+} from "@/modules/03_recruiting/interface/index/Main";
+import HeaderTop from "@/modules/03_recruiting/components/top.vue";
+
+const props = defineProps({
+  prefixOptions: {
+    type: Array as PropType<DataOption[]>,
+    required: true,
+  },
+  religionOptions: {
+    type: Array as PropType<DataOption[]>,
+    required: true,
+  },
+  provinceOptions: {
+    type: Array as PropType<DataOption[]>,
+    required: true,
+  },
+  status: {
+    type: String,
+    required: true,
+  },
+  form: {
+    type: Object,
+    required: true,
+  },
+});
+
+const $q = useQuasar();
+const route = useRoute();
+const mixin = useCounterMixin();
+const { date2Thai, calAge, success } = mixin;
+
+const districtOptions = ref<DataOption[]>([]);
+const candidateId = ref<string>(route.params.candidateId.toString());
+const edit = ref<boolean>(true);
+const myform = ref<any>({});
+const img = ref<string>("");
+const opNat = ref(["ไทย"]);
+const fileProfile = ref<File[]>([]);
+
+const { messageError, showLoader, hideLoader } = mixin;
+
+const emit = defineEmits(["update:form"]);
+
+/** ดึงข้อมูล */
+async function fetchData() {
+  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(async () => {
+      const user = await tokenParsed();
+      defaultInformation.value.email = user ? user.email : "";
+      defaultInformation.value.firstname = user ? user.given_name : "";
+      defaultInformation.value.lastname = user ? user.family_name : "";
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/** ดึงข้อมูล รูปภาพ */
+async function fetchImgData() {
+  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();
+    });
+}
+/** อัพโหลด รูปภาพ */
+async function uploadImage(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;
+  }
+}
+
+/**
+ * ดึงข้อมูลเขต
+ * @param id อำเภอ
+ */
+async function fetchDistrict(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();
+    });
+}
+
+function getClass(val: boolean) {
+  return {
+    "full-width inputgreen cursor-pointer": val,
+    "full-width cursor-pointer": !val,
+  };
+}
+
+watch(myform, async (count: any) => {
+  emit("update:form", count);
+});
+
+watch(defaultInformation, async (count: Information) => {
+  await changeData("information", count);
+});
+
+onMounted(async () => {
+  await fetchData();
+  await fetchImgData();
+  if (defaultInformation.value.provinceId != null)
+    await fetchDistrict(defaultInformation.value.provinceId);
+});
+</script>
+
 <template>
   <HeaderTop
     v-model:edit="edit"
@@ -136,7 +317,6 @@
           week-start="0"
           :max-date="new Date()"
           :disabled="!(status == 'checkRegister' || status == 'payment')"
-          @update:modelValue="selectBirthDate"
         >
           <template #year="{ year }">
             {{ year + 543 }}
@@ -222,120 +402,6 @@
           :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.provinceId"
-          emit-value
-          map-options
-          option-label="name"
-          :options="provinceOptions"
-          option-value="id"
-          :label="`${'ออกให้ ณ จังหวัด'}`"
-          @update:model-value="(value) => selectProvince(value)"
-        />
-      </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.districtId"
-          emit-value
-          map-options
-          option-label="name"
-          :options="districtOptions"
-          option-value="id"
-          :label="`${'ออกให้ ณ อำเภอ'}`"
-        />
-      </div>
-
-      <div class="col-xs-12 col-sm-3 col-md-3">
-        <datepicker
-          v-model="defaultInformation.cardIdDate"
-          :locale="'th'"
-          autoApply
-          :enableTimePicker="false"
-          week-start="0"
-          :max-date="new Date()"
-          :disabled="!(status == 'checkRegister' || status == 'payment')"
-        >
-          <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.cardIdDate == null
-                  ? null
-                  : date2Thai(defaultInformation.cardIdDate)
-              "
-              :rules="[
-                (val) => !!val || `${'กรุณาเลือก วัน/เดือน/ปี ที่ออกบัตร'}`,
-              ]"
-              :label="`${'วัน/เดือน/ปี ที่ออกบัตร'}`"
-            >
-              <template v-slot:prepend>
-                <q-icon
-                  name="mdi-calendar-outline"
-                  class="cursor-pointer"
-                  :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-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.phone"
-          :rules="[
-            (val) => val.length == 10 || `${'กรุณากรอก โทรศัพท์มือถือ'}`,
-            (val) =>
-              /^[0-9]*$/.test(val) ||
-              `${'กรุณากรอกข้อมูลโทรศัพท์มือถือให้ถูกต้อง'}`,
-          ]"
-          :label="`${'โทรศัพท์มือถือ'}`"
-        />
-      </div> -->
       <div class="col-xs-12 col-sm-3 col-md-3 q-pb-md">
         <q-input
           :class="getClass(status == 'checkRegister' || status == 'payment')"
@@ -382,220 +448,9 @@
         />
       </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'"
-        dense
-        lazy-rules
-        :readonly="!(status == 'checkRegister' || status == 'payment')"
-        :borderless="!(status == 'checkRegister' || status == 'payment')"
-        v-model="defaultInformation.knowledge"
-        label="ความรู้ความสามารถพิเศษ"
-        type="textarea"
-      />
-    </div> -->
   </q-form>
 </template>
 
-<script setup lang="ts">
-import { ref, onMounted, watch } from "vue";
-import { useCounterMixin } from "@/stores/mixin";
-import http from "@/plugins/http";
-import config from "@/app.config";
-import type { PropType } from "vue";
-import type {
-  Information,
-  DataOption,
-} from "@/modules/03_recruiting/interface/index/Main";
-import {
-  defaultInformation,
-  changeData,
-} from "@/modules/03_recruiting/interface/index/Main";
-import HeaderTop from "@/modules/03_recruiting/components/top.vue";
-import { tokenParsed } from "@/plugins/auth";
-import { useRoute } from "vue-router";
-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,
-  },
-});
-
-const $q = useQuasar();
-const mixin = useCounterMixin();
-const { date2Thai, calAge, modalError, success, notifyError, calAgeYear } =
-  mixin;
-const districtOptions = ref<DataOption[]>([]);
-const route = useRoute();
-const candidateId = ref<string>(route.params.candidateId.toString());
-const edit = ref<boolean>(true);
-const myform = ref<any>({});
-const img = ref<string>("");
-const opNat = ref(["ไทย"]);
-const fileProfile = ref<File[]>([]);
-const registerEndDate = ref<Date>(new Date());
-
-const { messageError, showLoader, hideLoader } = mixin;
-
-const emit = defineEmits(["update:form"]);
-
-watch(myform, async (count: any, prevCount: any) => {
-  emit("update:form", count);
-});
-
-watch(
-  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);
-});
-
-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(async () => {
-      const user = await tokenParsed();
-      defaultInformation.value.email = user ? user.email : "";
-      defaultInformation.value.firstname = user ? user.given_name : "";
-      defaultInformation.value.lastname = user ? user.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();
-    });
-};
-
-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;
-  }
-};
-
-const selectProvince = (val: string) => {
-  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();
-    });
-};
-
-const getClass = (val: boolean) => {
-  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");
-  //     }
-  //   }
-};
-</script>
-
 <style>
 .containerimage {
   position: relative;
diff --git a/src/modules/03_recruiting/components/Occupation.vue b/src/modules/03_recruiting/components/Occupation.vue
index 7ab6eb574..d76977a5c 100644
--- a/src/modules/03_recruiting/components/Occupation.vue
+++ b/src/modules/03_recruiting/components/Occupation.vue
@@ -1,4 +1,85 @@
-<!-- card ตำแหน่งปัจจุบัน -->
+<script setup lang="ts">
+import { ref, onMounted, watch } from "vue";
+import { useQuasar } from "quasar";
+import { useRoute } from "vue-router";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
+
+import type { Occupation } from "@/modules/03_recruiting/interface/index/Main";
+
+import {
+  defaultOccupation,
+  changeData,
+} from "@/modules/03_recruiting/interface/index/Main";
+import HeaderTop from "@/modules/03_recruiting/components/top.vue";
+import CurrencyInput from "@/modules/03_recruiting/components/CurruncyInput.vue";
+
+const props = defineProps({
+  status: {
+    type: String,
+    required: true,
+  },
+  form: {
+    type: Object,
+    required: true,
+  },
+});
+
+const $q = useQuasar();
+const route = useRoute();
+const mixin = useCounterMixin();
+const { messageError, showLoader, hideLoader } = mixin;
+
+const candidateId = ref<string>(route.params.candidateId.toString());
+const edit = ref<boolean>(true);
+const myform = ref<object | null>(null);
+
+const emit = defineEmits(["update:form"]);
+
+async function fetchData() {
+  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();
+    });
+}
+
+function getClass(val: boolean) {
+  return {
+    "full-width inputgreen cursor-pointer": val,
+    "full-width cursor-pointer": !val,
+  };
+}
+
+watch(myform, async (count: any, prevCount: any) => {
+  emit("update:form", count);
+});
+
+watch(defaultOccupation, async (count: Occupation, prevCount: Occupation) => {
+  await changeData("occupation", count);
+});
+
+onMounted(async () => {
+  await fetchData();
+});
+</script>
+
 <template>
   <HeaderTop
     v-model:edit="edit"
@@ -134,81 +215,3 @@
     </div>
   </q-form>
 </template>
-<script setup lang="ts">
-import { ref, onMounted, watch } from "vue";
-import http from "@/plugins/http";
-import config from "@/app.config";
-import type { Occupation } from "@/modules/03_recruiting/interface/index/Main";
-import {
-  defaultOccupation,
-  changeData,
-} from "@/modules/03_recruiting/interface/index/Main";
-import HeaderTop from "@/modules/03_recruiting/components/top.vue";
-import { useRoute } from "vue-router";
-import CurrencyInput from "@/modules/03_recruiting/components/CurruncyInput.vue";
-import { useCounterMixin } from "@/stores/mixin";
-import { useQuasar } from "quasar";
-
-const props = defineProps({
-  status: {
-    type: String,
-    required: true,
-  },
-  form: {
-    type: Object,
-    required: true,
-  },
-});
-
-const $q = useQuasar();
-const edit = ref<boolean>(true);
-const myform = ref<any>({});
-const route = useRoute();
-const candidateId = ref<string>(route.params.candidateId.toString());
-
-const mixin = useCounterMixin();
-const { messageError, showLoader, hideLoader } = mixin;
-
-const emit = defineEmits(["update:form"]);
-
-watch(myform, async (count: any, prevCount: any) => {
-  emit("update:form", count);
-});
-
-watch(defaultOccupation, async (count: Occupation, prevCount: Occupation) => {
-  await changeData("occupation", count);
-});
-
-onMounted(async () => {
-  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();
-    });
-};
-
-const getClass = (val: boolean) => {
-  return {
-    "full-width inputgreen cursor-pointer": val,
-    "full-width cursor-pointer": !val,
-  };
-};
-</script>
diff --git a/src/modules/03_recruiting/components/Profile.vue b/src/modules/03_recruiting/components/Profile.vue
index 22923c693..5d6178342 100644
--- a/src/modules/03_recruiting/components/Profile.vue
+++ b/src/modules/03_recruiting/components/Profile.vue
@@ -1,82 +1,19 @@
-<!-- tab ข้อมูลส่วนบุคคล -->
-<template>
-  <div class="q-px-sm">
-    <Information
-      :prefixOptions="prefixOptions"
-      :religionOptions="religionOptions"
-      :provinceOptions="provinceOptions"
-      :status="status"
-      v-model:form="formInformation"
-    />
-  </div>
-
-  <q-separator class="q-my-lg bg-gray" size="5px" />
-  <div class="q-px-sm">
-    <Address
-      :provinceOptions="provinceOptions"
-      :status="status"
-      v-model:form="formAddress"
-    />
-  </div>
-
-  <!-- <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> -->
-
-  <q-separator class="q-my-lg bg-gray" size="5px" />
-  <div class="q-px-sm">
-    <Education
-      :status="status"
-      v-model:form="formEducation"
-      :educationLevelOptions="educationLevelOptions"
-    />
-  </div>
-
-  <q-separator class="q-my-lg bg-gray" size="5px" />
-  <div class="q-px-sm">
-    <Occupation :status="status" v-model:form="formOccupation" />
-  </div>
-
-  <q-separator class="q-my-lg bg-gray" size="5px" />
-  <div class="q-px-sm">
-    <Career :status="status" />
-  </div>
-
-  <q-separator class="q-my-lg bg-gray" size="5px" />
-  <div class="q-px-sm">
-    <Contact
-      :status="status"
-      v-model:form="formContact"
-      :prefixOptions="prefixOptions"
-    />
-  </div>
-
-  <!-- <q-separator class="q-my-lg bg-gray" size="5px" /> -->
-  <!-- <div class="q-px-sm">
-    <Document :status="status" />
-  </div> -->
-</template>
 <script setup lang="ts">
 import { ref, onMounted, watch } from "vue";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
+import { useQuasar } from "quasar";
+import { useCounterMixin } from "@/stores/mixin";
+
 import type { DataOption } from "@/modules/03_recruiting/interface/index/Main";
+
 import Information from "@/modules/03_recruiting/components/Information.vue";
 import Address from "@/modules/03_recruiting/components/Address.vue";
-import Family from "@/modules/03_recruiting/components/Family.vue";
 import Occupation from "@/modules/03_recruiting/components/Occupation.vue";
 import Contact from "@/modules/03_recruiting/components/Contact.vue";
 import Education from "@/modules/03_recruiting/components/Education.vue";
 import Career from "@/modules/03_recruiting/components/Career.vue";
-import Document from "@/modules/03_recruiting/components/Document.vue";
-
-import { useQuasar } from "quasar";
-import { useCounterMixin } from "@/stores/mixin";
 
 const props = defineProps({
   status: {
@@ -155,7 +92,7 @@ onMounted(() => {
   fetchEducationLevel();
 });
 
-const fetchPrefix = async () => {
+async function fetchPrefix() {
   showLoader();
   await http
     .get(config.API.prefix)
@@ -173,9 +110,9 @@ const fetchPrefix = async () => {
     .finally(() => {
       hideLoader();
     });
-};
+}
 
-const fetchReligion = async () => {
+async function fetchReligion() {
   showLoader();
   await http
     .get(config.API.religion)
@@ -193,9 +130,9 @@ const fetchReligion = async () => {
     .finally(() => {
       hideLoader();
     });
-};
+}
 
-const fetchProvince = async () => {
+async function fetchProvince() {
   showLoader();
   await http
     .get(config.API.province)
@@ -213,9 +150,9 @@ const fetchProvince = async () => {
     .finally(() => {
       hideLoader();
     });
-};
+}
 
-const fetchEducationLevel = async () => {
+async function fetchEducationLevel() {
   showLoader();
   await http
     .get(config.API.educationLevel)
@@ -233,5 +170,63 @@ const fetchEducationLevel = async () => {
     .finally(() => {
       hideLoader();
     });
-};
+}
 </script>
+
+<template>
+  <div class="q-px-sm">
+    <Information
+      :prefixOptions="prefixOptions"
+      :religionOptions="religionOptions"
+      :provinceOptions="provinceOptions"
+      :status="status"
+      v-model:form="formInformation"
+    />
+  </div>
+
+  <q-separator class="q-my-lg bg-gray" size="5px" />
+  <div class="q-px-sm">
+    <Address
+      :provinceOptions="provinceOptions"
+      :status="status"
+      v-model:form="formAddress"
+    />
+  </div>
+
+  <!-- <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> -->
+
+  <q-separator class="q-my-lg bg-gray" size="5px" />
+  <div class="q-px-sm">
+    <Education
+      :status="status"
+      v-model:form="formEducation"
+      :educationLevelOptions="educationLevelOptions"
+    />
+  </div>
+
+  <q-separator class="q-my-lg bg-gray" size="5px" />
+  <div class="q-px-sm">
+    <Occupation :status="status" v-model:form="formOccupation" />
+  </div>
+
+  <q-separator class="q-my-lg bg-gray" size="5px" />
+  <div class="q-px-sm">
+    <Career :status="status" />
+  </div>
+
+  <q-separator class="q-my-lg bg-gray" size="5px" />
+  <div class="q-px-sm">
+    <Contact
+      :status="status"
+      v-model:form="formContact"
+      :prefixOptions="prefixOptions"
+    />
+  </div>
+</template>
diff --git a/src/modules/03_recruiting/components/Table.vue b/src/modules/03_recruiting/components/Table.vue
index f3ff7bbe6..e43894711 100644
--- a/src/modules/03_recruiting/components/Table.vue
+++ b/src/modules/03_recruiting/components/Table.vue
@@ -1,6 +1,78 @@
+<script setup lang="ts">
+import { checkPermission } from "@/utils/permissions";
+import { ref, useAttrs } from "vue";
+import type { Pagination } from "@/modules/04_registry/interface/index/Main";
+
+const attrs = ref<any>(useAttrs());
+const table = ref<any>(null);
+const filterRef = ref<any>(null);
+const initialPagination = ref<Pagination>({
+  rowsPerPage: 0,
+});
+
+const props = defineProps({
+  count: Number,
+  pass: Number,
+  notpass: Number,
+
+  inputfilter: String,
+  name: String,
+  icon: String,
+  inputvisible: Array,
+  editvisible: Boolean,
+  add: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  validate: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  nornmalData: {
+    type: Boolean,
+    defualt: true,
+  },
+  conclude: {
+    type: Boolean,
+    defualt: false,
+  },
+});
+
+const emit = defineEmits([
+  "update:inputfilter",
+  "update:inputvisible",
+  "update:editvisible",
+]);
+const updateInput = (value: string | number | null) => {
+  emit("update:inputfilter", value);
+};
+const updateVisible = (value: []) => {
+  emit("update:inputvisible", value);
+};
+
+/**
+ *
+ * @param start
+ * @param end
+ * @param total
+ */
+function paginationLabel(start: string, end: string, total: string) {
+  return start + "-" + end + " ใน " + total;
+}
+
+/** fn เพิ่มข้อมูล */
+function checkAdd() {
+  props.add();
+}
+
+/** reset ฟิลเตอร์ ที่ ค้นหา */
+function resetFilter() {
+  emit("update:inputfilter", "");
+  filterRef.value.focus();
+}
+</script>
 <template>
   <div class="q-pb-sm row q-col-gutter-sm">
-    <!--  -->
     <div
       class="q-gutter-sm"
       v-if="nornmalData == true && checkPermission($route)?.attrIsCreate"
@@ -125,72 +197,7 @@
     </template>
   </q-table>
 </template>
-<script setup lang="ts">
-import { checkPermission } from "@/utils/permissions";
-import { ref, useAttrs } from "vue";
-import type { Pagination } from "@/modules/04_registry/interface/index/Main";
 
-const attrs = ref<any>(useAttrs());
-const table = ref<any>(null);
-const filterRef = ref<any>(null);
-const initialPagination = ref<Pagination>({
-  rowsPerPage: 0,
-});
-
-const props = defineProps({
-  count: Number,
-  pass: Number,
-  notpass: Number,
-
-  inputfilter: String,
-  name: String,
-  icon: String,
-  inputvisible: Array,
-  editvisible: Boolean,
-  add: {
-    type: Function,
-    default: () => console.log("not function"),
-  },
-  validate: {
-    type: Function,
-    default: () => console.log("not function"),
-  },
-  nornmalData: {
-    type: Boolean,
-    defualt: true,
-  },
-  conclude: {
-    type: Boolean,
-    defualt: false,
-  },
-});
-
-const emit = defineEmits([
-  "update:inputfilter",
-  "update:inputvisible",
-  "update:editvisible",
-]);
-const updateInput = (value: string | number | null) => {
-  emit("update:inputfilter", value);
-};
-const updateVisible = (value: []) => {
-  emit("update:inputvisible", value);
-};
-
-const paginationLabel = (start: string, end: string, total: string) => {
-  return start + "-" + end + " ใน " + total;
-};
-
-const checkAdd = () => {
-  props.add();
-};
-
-const resetFilter = () => {
-  // reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
-  emit("update:inputfilter", "");
-  filterRef.value.focus();
-};
-</script>
 <style lang="scss">
 .icon-color {
   color: #4154b3;
diff --git a/src/modules/03_recruiting/components/Table1.vue b/src/modules/03_recruiting/components/Table1.vue
index d9a8175b9..7ebbd1d92 100644
--- a/src/modules/03_recruiting/components/Table1.vue
+++ b/src/modules/03_recruiting/components/Table1.vue
@@ -1,3 +1,91 @@
+<script setup lang="ts">
+import { ref, useAttrs } from "vue";
+
+import HeaderTop from "@/modules/03_recruiting/components/top1.vue";
+import type { Pagination } from "@/modules/04_registry/interface/index/Main";
+
+const attrs = ref<any>(useAttrs());
+const table = ref<any>(null);
+const filterRef = ref<any>(null);
+const editBtn = ref<boolean>(false);
+const initialPagination = ref<Pagination>({
+  rowsPerPage: 0,
+});
+
+const props = defineProps({
+  inputfilter: String,
+  name: String,
+  icon: String,
+  iconAdd: {
+    type: String,
+    default: null,
+  },
+  inputvisible: Array,
+  editvisible: Boolean,
+  headerShow: {
+    type: Boolean,
+    default: true,
+  },
+  statusEdit: {
+    type: Boolean,
+    required: true,
+  },
+  iconLeft: {
+    type: Boolean,
+  },
+  edit: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  add: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  addleave: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  cancel: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  validate: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+});
+
+const emit = defineEmits([
+  "update:inputfilter",
+  "update:inputvisible",
+  "update:editvisible",
+]);
+
+const updateInput = (value: string | number | null) => {
+  emit("update:inputfilter", value);
+};
+const updateVisible = (value: []) => {
+  emit("update:inputvisible", value);
+};
+
+function paginationLabel(start: string, end: string, total: string) {
+  return start + "-" + end + " ใน " + total;
+}
+
+function checkAddLeave() {
+  props.addleave();
+}
+
+function checkAdd() {
+  props.add();
+}
+
+const resetFilter = () => {
+  // reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
+  emit("update:inputfilter", "");
+  filterRef.value.focus();
+};
+</script>
 <template>
   <div class="q-pb-sm row">
     <HeaderTop
@@ -84,106 +172,7 @@
     </template>
   </q-table>
 </template>
-<script setup lang="ts">
-import { ref, useAttrs } from "vue";
-import HeaderTop from "@/modules/03_recruiting/components/top1.vue";
-import type { Pagination } from "@/modules/04_registry/interface/index/Main";
 
-const attrs = ref<any>(useAttrs());
-const table = ref<any>(null);
-const filterRef = ref<any>(null);
-const editBtn = ref<boolean>(false);
-const initialPagination = ref<Pagination>({
-  rowsPerPage: 0,
-});
-
-const props = defineProps({
-  inputfilter: String,
-  name: String,
-  icon: String,
-  iconAdd: {
-    type: String,
-    default: null,
-  },
-  inputvisible: Array,
-  editvisible: Boolean,
-  headerShow: {
-    type: Boolean,
-    default: true,
-  },
-  statusEdit: {
-    type: Boolean,
-    required: true,
-  },
-  iconLeft: {
-    type: Boolean,
-  },
-  edit: {
-    type: Function,
-    default: () => console.log("not function"),
-  },
-  add: {
-    type: Function,
-    default: () => console.log("not function"),
-  },
-  addleave: {
-    type: Function,
-    default: () => console.log("not function"),
-  },
-  cancel: {
-    type: Function,
-    default: () => console.log("not function"),
-  },
-  validate: {
-    type: Function,
-    default: () => console.log("not function"),
-  },
-});
-
-const emit = defineEmits([
-  "update:inputfilter",
-  "update:inputvisible",
-  "update:editvisible",
-]);
-
-const updateEdit = (value: Boolean) => {
-  emit("update:editvisible", value);
-};
-const updateInput = (value: string | number | null) => {
-  emit("update:inputfilter", value);
-};
-const updateVisible = (value: []) => {
-  emit("update:inputvisible", value);
-};
-
-const paginationLabel = (start: string, end: string, total: string) => {
-  return start + "-" + end + " ใน " + total;
-};
-
-const checkAddLeave = () => {
-  props.addleave();
-};
-
-const checkAdd = () => {
-  props.add();
-};
-
-const edit = async () => {
-  updateEdit(!props.editvisible);
-  props.edit();
-};
-
-const cancel = async () => {
-  updateEdit(!props.editvisible);
-  props.cancel();
-};
-
-const resetFilter = () => {
-  // reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
-  emit("update:inputfilter", "");
-  filterRef.value.focus();
-};
-</script>
 <style lang="scss">
 .icon-color {
   color: #4154b3;
diff --git a/src/modules/03_recruiting/components/TableCan.vue b/src/modules/03_recruiting/components/TableCan.vue
index 91692695f..84c4bd31f 100644
--- a/src/modules/03_recruiting/components/TableCan.vue
+++ b/src/modules/03_recruiting/components/TableCan.vue
@@ -1,3 +1,95 @@
+<script setup lang="ts">
+import { ref, useAttrs, watch } from "vue";
+import HeaderTop from "@/modules/03_recruiting/components/top.vue";
+import type { Pagination } from "@/modules/03_recruiting/interface/index/Main";
+
+const attrs = ref<any>(useAttrs());
+const table = ref<any>(null);
+const filterRef = ref<any>(null);
+const editBtn = ref<boolean>(true);
+const initialPagination = ref<Pagination>({
+  rowsPerPage: 0,
+});
+
+const props = defineProps({
+  inputfilter: String,
+  iconLeft: Boolean,
+  name: String,
+  icon: String,
+  inputvisible: Array,
+  editvisible: Boolean,
+  nameHeader: Boolean,
+  bottom: Boolean,
+  boss: Boolean,
+  addData: {
+    type: Boolean,
+    defualt: true,
+  },
+  edit: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  add: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  cancel: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  validate: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  editData: {
+    type: Boolean,
+    defualt: true,
+    required: true,
+  },
+});
+
+const emit = defineEmits([
+  "update:inputfilter",
+  "update:inputvisible",
+  "update:editvisible",
+]);
+
+watch(props, (count: any, prevCount: any) => {
+  editBtn.value = props.editvisible;
+});
+
+const updateEdit = (value: Boolean) => {
+  emit("update:editvisible", value);
+};
+const updateInput = (value: string | number | null) => {
+  emit("update:inputfilter", value);
+};
+const updateVisible = (value: []) => {
+  emit("update:inputvisible", value);
+};
+
+const paginationLabel = (start: string, end: string, total: string) => {
+  return start + "-" + end + " ใน " + total;
+};
+
+function clickAdd() {
+  props.add();
+}
+
+function clickEdit() {
+  props.edit();
+}
+
+function clickCancel() {
+  props.cancel();
+}
+
+function resetFilter() {
+  // reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
+  emit("update:inputfilter", "");
+  filterRef.value.focus();
+}
+</script>
 <template>
   <div class="q-pb-sm row items-center">
     <!--  -->
@@ -82,112 +174,7 @@
     </template>
   </q-table>
 </template>
-<script setup lang="ts">
-import { ref, useAttrs, watch } from "vue";
-import HeaderTop from "@/modules/03_recruiting/components/top.vue";
-import type { Pagination } from "@/modules/03_recruiting/interface/index/Main";
 
-const attrs = ref<any>(useAttrs());
-const table = ref<any>(null);
-const filterRef = ref<any>(null);
-const editBtn = ref<boolean>(true);
-const initialPagination = ref<Pagination>({
-  rowsPerPage: 0,
-});
-
-const props = defineProps({
-  inputfilter: String,
-  iconLeft: Boolean,
-  name: String,
-  icon: String,
-  inputvisible: Array,
-  editvisible: Boolean,
-  nameHeader: Boolean,
-  bottom: Boolean,
-  boss: Boolean,
-  addData: {
-    type: Boolean,
-    defualt: true,
-  },
-  edit: {
-    type: Function,
-    default: () => console.log("not function"),
-  },
-  add: {
-    type: Function,
-    default: () => console.log("not function"),
-  },
-  cancel: {
-    type: Function,
-    default: () => console.log("not function"),
-  },
-  validate: {
-    type: Function,
-    default: () => console.log("not function"),
-  },
-  editData: {
-    type: Boolean,
-    defualt: true,
-    required: true,
-  },
-});
-
-const emit = defineEmits([
-  "update:inputfilter",
-  "update:inputvisible",
-  "update:editvisible",
-]);
-
-watch(props, (count: any, prevCount: any) => {
-  editBtn.value = props.editvisible;
-});
-
-const updateEdit = (value: Boolean) => {
-  emit("update:editvisible", value);
-};
-const updateInput = (value: string | number | null) => {
-  emit("update:inputfilter", value);
-};
-const updateVisible = (value: []) => {
-  emit("update:inputvisible", value);
-};
-
-const paginationLabel = (start: string, end: string, total: string) => {
-  return start + "-" + end + " ใน " + total;
-};
-
-const clickAdd = () => {
-  props.add();
-};
-
-const clickEdit = () => {
-  props.edit();
-};
-
-const clickCancel = () => {
-  props.cancel();
-};
-
-const edit = async () => {
-  updateEdit(!props.editvisible);
-  props.edit();
-};
-
-const cancel = async () => {
-  updateEdit(!props.editvisible);
-  props.cancel();
-};
-
-const resetFilter = () => {
-  // reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
-  emit("update:inputfilter", "");
-  filterRef.value.focus();
-};
-
-const add = () => {
-  props.add();
-};
-</script>
 <style lang="scss">
 .icon-color {
   color: #4154b3;
diff --git a/src/modules/03_recruiting/components/TableCandidate.vue b/src/modules/03_recruiting/components/TableCandidate.vue
index d35aa456d..c4fca19bf 100644
--- a/src/modules/03_recruiting/components/TableCandidate.vue
+++ b/src/modules/03_recruiting/components/TableCandidate.vue
@@ -1,3 +1,420 @@
+<script setup lang="ts">
+import { ref, useAttrs, watch } from "vue";
+import { checkPermission } from "@/utils/permissions";
+import { useRoute, useRouter } from "vue-router";
+
+import { useCounterMixin } from "@/stores/mixin";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useQuasar } from "quasar";
+
+const route = useRoute();
+const router = useRouter();
+
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const { dateToISO, success, modalError, dialogMessage } = mixin;
+
+const attrs = ref<any>(useAttrs());
+const table = ref<any>(null);
+const files = ref<File[]>([]);
+const filterRef = ref<any>(null);
+const examId = ref<string>(route.params.examId.toString());
+const selected = ref<string[]>([]);
+const { messageError, showLoader, hideLoader } = mixin;
+
+const dateFilter = ref<[Date, Date]>([new Date(), new Date()]); //วันที่เลือกค้นหา
+const props = defineProps({
+  inputfilter: String,
+  inputvisible: Array,
+  inputvisibleFilter: String,
+  editvisible: Boolean,
+  titleText: String,
+  optionsFilter: {
+    type: Array,
+    defualt: [],
+  },
+  selected: {
+    type: Array,
+    defualt: [],
+  },
+  boss: {
+    type: Boolean,
+    defualt: false,
+  },
+  saveNoDraft: {
+    type: Boolean,
+    defualt: false,
+  },
+  history: {
+    type: Boolean,
+    defualt: false,
+  },
+  paging: {
+    type: Boolean,
+    defualt: false,
+  },
+  pageSize: {
+    type: Number,
+    defualt: 25,
+  },
+  page: {
+    type: Number,
+    defualt: 1,
+  },
+  maxPage: {
+    type: Number,
+    defualt: 1,
+  },
+  total: {
+    type: Number,
+    defualt: 0,
+  },
+  nornmalData: {
+    type: Boolean,
+    defualt: false,
+  },
+  nextPageVisible: {
+    type: Boolean,
+    defualt: false,
+  },
+  publicData: {
+    type: Boolean,
+    defualt: true,
+    required: false,
+  },
+  updateData: {
+    type: Boolean,
+    defualt: true,
+    required: false,
+  },
+  statusPayment: {
+    type: Boolean,
+    required: false,
+  },
+  setSeat: {
+    type: Boolean,
+    required: false,
+  },
+  publicNoBtn: {
+    type: Boolean,
+    defualt: false,
+  },
+  save: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  cancel: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  publish: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  validate: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  fetchData: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+});
+
+// Pagination - initial pagination
+const initialPagination = ref<any>({
+  sortBy: null,
+  descending: false,
+  page: 1,
+  rowsPerPage: props.pageSize,
+});
+
+// Pagination - update rowsPerPage
+async function updatePagination(newPagination: any) {
+  initialPagination.value = newPagination;
+  currentPage.value = 1;
+}
+
+const emit = defineEmits([
+  "update:inputfilter",
+  "update:inputvisible",
+  "update:editvisible",
+  "update:titleText",
+  "update:inputvisibleFilter",
+  "update:change-page",
+]);
+
+const updateInput = async (value: any) => {
+  await emit("update:inputfilter", value);
+};
+
+// search & get new data by keyword
+const submitInput = () => {
+  setTimeout(() => {
+    emit("update:change-page", 1, initialPagination.value.rowsPerPage);
+    currentPage.value = 1;
+  }, 500);
+};
+
+const updateVisible = (value: any) => {
+  emit("update:inputvisible", value);
+};
+const updateVisibleFilter = (value: any) => {
+  emit("update:inputvisibleFilter", value);
+};
+
+async function uploadFile() {
+  if (files.value.length > 0) {
+    if (props.setSeat == false) {
+      uploadDataSeat();
+    } else {
+      uploadDataPoint();
+    }
+  } else {
+    modalError(
+      $q,
+      "ไม่สามารถอัปโหลดไฟล์ได้",
+      "กรุณาเลือกไฟล์ที่ต้องการอัปโหลด"
+    );
+  }
+}
+
+async function candidateToPlacement() {
+  $q.dialog({
+    title: "ยืนยันการนำผู้ผ่านคัดเลือกเข้าสู่ระบบบรรจุ",
+    message: "ต้องการนำผู้ผ่านคัดเลือกเข้าสู่ระบบบรรจุใช่หรือไม่?",
+    cancel: {
+      flat: true,
+      color: "negative",
+    },
+    persistent: true,
+  })
+    .onOk(async () => {
+      await http
+        .get(config.API.periodExamToPlacement(examId.value))
+        .then((res) => {
+          success($q, "นำผู้ผ่านคัดเลือกเข้าสู่ระบบบรรจุ");
+        })
+        .catch((e) => {
+          messageError($q, e);
+        })
+        .finally(async () => {
+          hideLoader();
+          router.go(-1);
+        });
+    })
+    .onCancel(() => {})
+    .onDismiss(() => {});
+}
+
+async function uploadDataSeat() {
+  showLoader();
+  const formData = new FormData();
+  formData.append("", files.value[0]);
+  await http
+    .put(config.API.periodExamUploadSeat(examId.value), formData)
+    .then((res) => {
+      success($q, "อัพเดทที่นั่งสอบสำเร็จ");
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      hideLoader();
+      files.value = [];
+      props.fetchData();
+    });
+}
+
+async function uploadDataPoint() {
+  showLoader();
+  const formData = new FormData();
+  formData.append("", files.value[0]);
+  await http
+    .put(config.API.periodExamUploadPoint(examId.value), formData)
+    .then((res) => {
+      success($q, "อัพเดทคะแนนสอบสำเร็จ");
+      files.value = [];
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      hideLoader();
+      files.value = [];
+      props.fetchData();
+    });
+}
+
+async function downloadFile() {
+  showLoader();
+  await http
+    .get(config.API.periodExamDownload(examId.value), {
+      responseType: "blob",
+    })
+    .then((res) => {
+      const data = res.data;
+      downloadFilePDF(data, `Candidate__${dateToISO(new Date())}.xlsx`);
+    })
+    .catch(async (e) => {
+      messageError($q, JSON.parse(await e.response.data.text()));
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+async function downloadFileDetail() {
+  showLoader();
+  await http
+    .get(config.API.periodExamDownloadDetail(examId.value), {
+      responseType: "blob",
+    })
+    .then((res) => {
+      const data = res.data;
+      downloadFilePDF(data, `Candidate_Detail_${dateToISO(new Date())}.xlsx`);
+    })
+    .catch(async (e) => {
+      messageError($q, JSON.parse(await e.response.data.text()));
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+async function checkCandidates() {
+  var _selected: any[] = [];
+  selected.value.map((r: any) => {
+    _selected.push(r.id.toString());
+  });
+  showLoader();
+  await http
+    .post(config.API.candidateCheckRegisters, {
+      candidateId: _selected,
+    })
+    .then((res) => {
+      success($q, "ตรวจสอบข้อมูลสำเร็จ");
+      selected.value = [];
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+      props.fetchData();
+    });
+}
+
+async function downloadFilePDF(res: string, fileName: string) {
+  const link = document.createElement("a");
+  link.href = window.URL.createObjectURL(
+    new Blob([res], {
+      type: "application/vnd.ms-excel",
+    })
+  );
+  link.setAttribute("download", fileName);
+  document.body.appendChild(link);
+  link.click();
+}
+
+async function candidateCheckProfileDialog() {
+  dialogMessage(
+    $q,
+    "ยืนยันการตรวจสอบข้อมูลนี้หรือไม่?",
+    "ยืนยันการตรวจสอบข้อมูล",
+    "mdi-email-check-outline",
+    "ยืนยัน",
+    "public",
+    checkCandidates,
+    undefined
+  );
+}
+
+function resetFilter() {
+  // reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
+  emit("update:inputfilter", "");
+  filterRef.value.focus();
+
+  // clear keyword & get new data
+  emit("update:change-page", 1, initialPagination.value.rowsPerPage);
+  currentPage.value = 1;
+}
+
+async function downloadFileDashboard() {
+  showLoader();
+  await http
+    .put(
+      config.API.periodExamDownloadDashboard(examId.value),
+      {
+        dateStart: dateToISO(dateFilter.value[0]),
+        dateEnd: dateToISO(dateFilter.value[1]),
+        responseType: "blob",
+      },
+      {
+        responseType: "blob",
+      }
+    )
+    .then((res) => {
+      const data = res.data;
+      downloadFilePDF(
+        data,
+        `Candidate_Dashboard_${dateToISO(new Date())}.xlsx`
+      );
+    })
+    .catch(async (e) => {
+      messageError($q, JSON.parse(await e.response.data.text()));
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+async function clickPassExam() {
+  showLoader();
+  await http
+    .get(config.API.exportExamPassExamList(examId.value))
+    .then((res) => {
+      window.open(config.API.exportExamPassExamList(examId.value));
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+async function clickCandidateList() {
+  showLoader();
+  await http
+    .get(config.API.exportExamCandidateList(examId.value))
+    .then((res) => {
+      window.open(config.API.exportExamCandidateList(examId.value));
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+// Pagination - page & change page & get new data
+const currentPage = ref<number>(1);
+watch(
+  [() => currentPage.value, () => initialPagination.value.rowsPerPage],
+  () => {
+    emit(
+      "update:change-page",
+      currentPage.value,
+      initialPagination.value.rowsPerPage,
+      true
+    );
+  }
+);
+
+</script>
 <template>
   <div class="q-px-md q-pb-md">
     <q-card
@@ -235,453 +652,7 @@
     </q-table>
   </div>
 </template>
-<script setup lang="ts">
-import { ref, useAttrs, watch, watchEffect } from "vue";
-import { checkPermission } from "@/utils/permissions";
-import { useRoute, useRouter } from "vue-router";
 
-import { useCounterMixin } from "@/stores/mixin";
-import http from "@/plugins/http";
-import config from "@/app.config";
-import { useQuasar } from "quasar";
-
-const route = useRoute();
-const router = useRouter();
-
-const mixin = useCounterMixin();
-const { dateToISO, success, modalError, dialogMessage } = mixin;
-const $q = useQuasar(); // show dialog
-const attrs = ref<any>(useAttrs());
-const table = ref<any>(null);
-const files = ref<File[]>([]);
-const filterRef = ref<any>(null);
-const examId = ref<string>(route.params.examId.toString());
-const candidateId = ref<string[]>([]);
-const selected = ref<string[]>([]);
-const { messageError, showLoader, hideLoader } = mixin;
-
-const dateFilter = ref<[Date, Date]>([new Date(), new Date()]); //วันที่เลือกค้นหา
-const props = defineProps({
-  inputfilter: String,
-  inputvisible: Array,
-  inputvisibleFilter: String,
-  editvisible: Boolean,
-  titleText: String,
-  optionsFilter: {
-    type: Array,
-    defualt: [],
-  },
-  selected: {
-    type: Array,
-    defualt: [],
-  },
-  boss: {
-    type: Boolean,
-    defualt: false,
-  },
-  saveNoDraft: {
-    type: Boolean,
-    defualt: false,
-  },
-  history: {
-    type: Boolean,
-    defualt: false,
-  },
-  paging: {
-    type: Boolean,
-    defualt: false,
-  },
-  pageSize: {
-    type: Number,
-    defualt: 25,
-  },
-  page: {
-    type: Number,
-    defualt: 1,
-  },
-  maxPage: {
-    type: Number,
-    defualt: 1,
-  },
-  total: {
-    type: Number,
-    defualt: 0,
-  },
-  nornmalData: {
-    type: Boolean,
-    defualt: false,
-  },
-  nextPageVisible: {
-    type: Boolean,
-    defualt: false,
-  },
-  publicData: {
-    type: Boolean,
-    defualt: true,
-    required: false,
-  },
-  updateData: {
-    type: Boolean,
-    defualt: true,
-    required: false,
-  },
-  statusPayment: {
-    type: Boolean,
-    required: false,
-  },
-  setSeat: {
-    type: Boolean,
-    required: false,
-  },
-  publicNoBtn: {
-    type: Boolean,
-    defualt: false,
-  },
-  save: {
-    type: Function,
-    default: () => console.log("not function"),
-  },
-  cancel: {
-    type: Function,
-    default: () => console.log("not function"),
-  },
-  publish: {
-    type: Function,
-    default: () => console.log("not function"),
-  },
-  validate: {
-    type: Function,
-    default: () => console.log("not function"),
-  },
-  fetchData: {
-    type: Function,
-    default: () => console.log("not function"),
-  },
-});
-
-// Pagination - initial pagination
-const initialPagination = ref<any>({
-  sortBy: null,
-  descending: false,
-  page: 1,
-  rowsPerPage: props.pageSize,
-});
-
-// Pagination - page & change page & get new data
-const currentPage = ref<number>(1);
-watch(
-  [() => currentPage.value, () => initialPagination.value.rowsPerPage],
-  () => {
-    emit(
-      "update:change-page",
-      currentPage.value,
-      initialPagination.value.rowsPerPage,
-      true
-    );
-  }
-);
-
-// Pagination - update rowsPerPage
-async function updatePagination(newPagination: any) {
-  initialPagination.value = newPagination;
-  currentPage.value = 1;
-}
-
-const emit = defineEmits([
-  "update:inputfilter",
-  "update:inputvisible",
-  "update:editvisible",
-  "update:titleText",
-  "update:inputvisibleFilter",
-  "update:change-page",
-]);
-
-const updateInput = async (value: any) => {
-  await emit("update:inputfilter", value);
-};
-
-// search & get new data by keyword
-const submitInput = () => {
-  setTimeout(() => {
-    emit("update:change-page", 1, initialPagination.value.rowsPerPage);
-    currentPage.value = 1;
-  }, 500);
-};
-
-const updateVisible = (value: any) => {
-  emit("update:inputvisible", value);
-};
-const updateVisibleFilter = (value: any) => {
-  emit("update:inputvisibleFilter", value);
-};
-
-const uploadFile = async () => {
-  if (files.value.length > 0) {
-    if (props.setSeat == false) {
-      uploadDataSeat();
-    } else {
-      uploadDataPoint();
-    }
-  } else {
-    modalError(
-      $q,
-      "ไม่สามารถอัปโหลดไฟล์ได้",
-      "กรุณาเลือกไฟล์ที่ต้องการอัปโหลด"
-    );
-  }
-};
-
-const candidateToPlacement = async () => {
-  $q.dialog({
-    title: "ยืนยันการนำผู้ผ่านคัดเลือกเข้าสู่ระบบบรรจุ",
-    message: "ต้องการนำผู้ผ่านคัดเลือกเข้าสู่ระบบบรรจุใช่หรือไม่?",
-    cancel: {
-      flat: true,
-      color: "negative",
-    },
-    persistent: true,
-  })
-    .onOk(async () => {
-      await http
-        .get(config.API.periodExamToPlacement(examId.value))
-        .then((res) => {
-          success($q, "นำผู้ผ่านคัดเลือกเข้าสู่ระบบบรรจุ");
-        })
-        .catch((e) => {
-          messageError($q, e);
-        })
-        .finally(async () => {
-          hideLoader();
-          router.go(-1);
-        });
-    })
-    .onCancel(() => {})
-    .onDismiss(() => {});
-};
-
-const uploadDataSeat = async () => {
-  showLoader();
-  const formData = new FormData();
-  formData.append("", files.value[0]);
-  await http
-    .put(config.API.periodExamUploadSeat(examId.value), formData)
-    .then((res) => {
-      success($q, "อัพเดทที่นั่งสอบสำเร็จ");
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      hideLoader();
-      files.value = [];
-      props.fetchData();
-    });
-};
-
-const uploadDataPoint = async () => {
-  showLoader();
-  const formData = new FormData();
-  formData.append("", files.value[0]);
-  await http
-    .put(config.API.periodExamUploadPoint(examId.value), formData)
-    .then((res) => {
-      success($q, "อัพเดทคะแนนสอบสำเร็จ");
-      files.value = [];
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      hideLoader();
-      files.value = [];
-      props.fetchData();
-    });
-};
-
-const downloadFile = async () => {
-  showLoader();
-  await http
-    .get(config.API.periodExamDownload(examId.value), {
-      responseType: "blob",
-    })
-    .then((res) => {
-      const data = res.data;
-      downloadFilePDF(data, `Candidate__${dateToISO(new Date())}.xlsx`);
-    })
-    .catch(async (e) => {
-      messageError($q, JSON.parse(await e.response.data.text()));
-    })
-    .finally(() => {
-      hideLoader();
-    });
-};
-
-const downloadFileDetail = async () => {
-  showLoader();
-  await http
-    .get(config.API.periodExamDownloadDetail(examId.value), {
-      responseType: "blob",
-    })
-    .then((res) => {
-      const data = res.data;
-      downloadFilePDF(data, `Candidate_Detail_${dateToISO(new Date())}.xlsx`);
-    })
-    .catch(async (e) => {
-      messageError($q, JSON.parse(await e.response.data.text()));
-    })
-    .finally(() => {
-      hideLoader();
-    });
-};
-
-const checkCandidates = async () => {
-  var _selected: any[] = [];
-  selected.value.map((r: any) => {
-    _selected.push(r.id.toString());
-  });
-  showLoader();
-  await http
-    .post(config.API.candidateCheckRegisters, {
-      candidateId: _selected,
-    })
-    .then((res) => {
-      success($q, "ตรวจสอบข้อมูลสำเร็จ");
-      selected.value = [];
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-      props.fetchData();
-    });
-};
-
-const downloadFilePDF = async (res: string, fileName: string) => {
-  const link = document.createElement("a");
-  link.href = window.URL.createObjectURL(
-    new Blob([res], {
-      type: "application/vnd.ms-excel",
-    })
-  );
-  link.setAttribute("download", fileName);
-  document.body.appendChild(link);
-  link.click();
-};
-
-const checkSave = () => {
-  props.validate();
-  props.save();
-};
-
-const publishModal = () => {
-  props.validate();
-  const filter = attrs.value.rows.filter((r: any) => r.name == "");
-
-  if (filter.length == 0 || attrs.value.rows.length == 0) {
-    dialogMessage(
-      $q,
-      "ต้องการเผยแพร่ข้อมูลนี้หรือไม่?",
-      "ข้อมูลที่กำลังถูกเผยแพร่นี้จะมีผลใช้งานทันที",
-      "public",
-      "เผยแพร่",
-      "public",
-      props.publish,
-      undefined
-    );
-  }
-};
-
-const candidateCheckProfileDialog = async () => {
-  dialogMessage(
-    $q,
-    "ยืนยันการตรวจสอบข้อมูลนี้หรือไม่?",
-    "ยืนยันการตรวจสอบข้อมูล",
-    "mdi-email-check-outline",
-    "ยืนยัน",
-    "public",
-    checkCandidates,
-    undefined
-  );
-};
-
-// const candidateCheckProfile = async () => {
-//   const filter = attrs.value.rows.filter((r: any) => r.check == true);
-//   filter.map((r: any) => {
-//     candidateId.value.push(r.id.toString());
-//   });
-//   await checkCandidates();
-// };
-
-const resetFilter = () => {
-  // reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
-  emit("update:inputfilter", "");
-  filterRef.value.focus();
-
-  // clear keyword & get new data
-  emit("update:change-page", 1, initialPagination.value.rowsPerPage);
-  currentPage.value = 1;
-};
-
-const downloadFileDashboard = async () => {
-  showLoader();
-  await http
-    .put(
-      config.API.periodExamDownloadDashboard(examId.value),
-      {
-        dateStart: dateToISO(dateFilter.value[0]),
-        dateEnd: dateToISO(dateFilter.value[1]),
-        responseType: "blob",
-      },
-      {
-        responseType: "blob",
-      }
-    )
-    .then((res) => {
-      const data = res.data;
-      downloadFilePDF(
-        data,
-        `Candidate_Dashboard_${dateToISO(new Date())}.xlsx`
-      );
-    })
-    .catch(async (e) => {
-      messageError($q, JSON.parse(await e.response.data.text()));
-    })
-    .finally(() => {
-      hideLoader();
-    });
-};
-
-const clickPassExam = async () => {
-  showLoader();
-  await http
-    .get(config.API.exportExamPassExamList(examId.value))
-    .then((res) => {
-      window.open(config.API.exportExamPassExamList(examId.value));
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-};
-
-const clickCandidateList = async () => {
-  showLoader();
-  await http
-    .get(config.API.exportExamCandidateList(examId.value))
-    .then((res) => {
-      window.open(config.API.exportExamCandidateList(examId.value));
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-};
-</script>
 <style lang="scss">
 .icon-color {
   color: #4154b3;
diff --git a/src/modules/03_recruiting/components/top.vue b/src/modules/03_recruiting/components/top.vue
index 2e4f73298..099ce705b 100644
--- a/src/modules/03_recruiting/components/top.vue
+++ b/src/modules/03_recruiting/components/top.vue
@@ -1,44 +1,3 @@
-<template>
-  <div class="flex items-center q-pb-md">
-    <div class="flex items-center" v-if="header != ''">
-      <q-icon :name="icon" size="1.5em" color="grey-5" class="q-mr-md" />
-      <div
-        class="text-weight-medium text-dark col-12 row items-center text-subtitle1"
-      >
-        {{ header }}
-      </div>
-    </div>
-    <div v-if="editData == true">
-      <div class="q-gutter-sm q-mx-sm" v-if="addData == true">
-        <q-btn
-          size="15px"
-          flat
-          dense
-          v-if="edit && !editOnly"
-          :color="!edit ? 'grey-7' : 'public'"
-          @click="save"
-          icon="mdi-content-save-outline"
-        >
-          <q-tooltip>บันทึกข้อมูล</q-tooltip>
-        </q-btn>
-      </div>
-      <div class="q-pl-sm" v-else>
-        <q-btn
-          size="12px"
-          flat
-          round
-          v-if="edit && !editOnly"
-          :color="!edit ? 'grey-7' : 'add'"
-          @click="add"
-          icon="mdi-plus"
-        >
-          <q-tooltip>เพิ่มข้อมูล</q-tooltip>
-        </q-btn>
-      </div>
-    </div>
-    <q-space />
-  </div>
-</template>
 <script setup lang="ts">
 const props = defineProps({
   header: {
@@ -105,4 +64,46 @@ const add = () => {
   props.add();
 };
 </script>
+<template>
+  <div class="flex items-center q-pb-md">
+    <div class="flex items-center" v-if="header != ''">
+      <q-icon :name="icon" size="1.5em" color="grey-5" class="q-mr-md" />
+      <div
+        class="text-weight-medium text-dark col-12 row items-center text-subtitle1"
+      >
+        {{ header }}
+      </div>
+    </div>
+    <div v-if="editData == true">
+      <div class="q-gutter-sm q-mx-sm" v-if="addData == true">
+        <q-btn
+          size="15px"
+          flat
+          dense
+          v-if="edit && !editOnly"
+          :color="!edit ? 'grey-7' : 'public'"
+          @click="save"
+          icon="mdi-content-save-outline"
+        >
+          <q-tooltip>บันทึกข้อมูล</q-tooltip>
+        </q-btn>
+      </div>
+      <div class="q-pl-sm" v-else>
+        <q-btn
+          size="12px"
+          flat
+          round
+          v-if="edit && !editOnly"
+          :color="!edit ? 'grey-7' : 'add'"
+          @click="add"
+          icon="mdi-plus"
+        >
+          <q-tooltip>เพิ่มข้อมูล</q-tooltip>
+        </q-btn>
+      </div>
+    </div>
+    <q-space />
+  </div>
+</template>
+
 <style scoped></style>
diff --git a/src/modules/03_recruiting/components/top1.vue b/src/modules/03_recruiting/components/top1.vue
index bdd8b7809..1b8f8346a 100644
--- a/src/modules/03_recruiting/components/top1.vue
+++ b/src/modules/03_recruiting/components/top1.vue
@@ -1,3 +1,105 @@
+<script setup lang="ts">
+import { checkPermission } from "@/utils/permissions";
+const props = defineProps({
+  header: {
+    type: String,
+    default: "ข้อความ",
+    required: true,
+  },
+  iconAdd: {
+    type: String,
+    default: null,
+  },
+  icon: {
+    type: String,
+    default: "mdi-help",
+    required: true,
+  },
+  edit: {
+    type: Boolean,
+    default: true,
+    required: true,
+  },
+  history: {
+    type: Boolean,
+    default: true,
+    required: true,
+  },
+  addData: {
+    type: Boolean,
+    defualt: false,
+  },
+  disable: {
+    type: Boolean,
+    defualt: false,
+  },
+  historyClick: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  add: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  addleave: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  save: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  deleted: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  cancel: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  changeBtn: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  addEmployee: {
+    type: Boolean,
+    defualt: false,
+  },
+});
+
+const emit = defineEmits(["update:edit"]);
+
+const updateEdit = (value: any) => {
+  emit("update:edit", value);
+};
+
+const ClickEdit = () => {
+  updateEdit(!props.edit);
+  props.changeBtn();
+};
+
+const historyClick = async () => {
+  await props.historyClick();
+};
+
+const ClickCancel = () => {
+  updateEdit(!props.edit);
+  props.cancel();
+  props.changeBtn();
+};
+
+const save = () => {
+  props.save();
+};
+
+const add = () => {
+  props.add();
+};
+
+const addleave = () => {
+  props.addleave();
+};
+</script>
 <template>
   <div class="flex items-center">
     <div class="flex items-center">
@@ -106,106 +208,5 @@
     </q-btn>
   </div>
 </template>
-<script setup lang="ts">
-import { checkPermission } from "@/utils/permissions";
-const props = defineProps({
-  header: {
-    type: String,
-    default: "ข้อความ",
-    required: true,
-  },
-  iconAdd: {
-    type: String,
-    default: null,
-  },
-  icon: {
-    type: String,
-    default: "mdi-help",
-    required: true,
-  },
-  edit: {
-    type: Boolean,
-    default: true,
-    required: true,
-  },
-  history: {
-    type: Boolean,
-    default: true,
-    required: true,
-  },
-  addData: {
-    type: Boolean,
-    defualt: false,
-  },
-  disable: {
-    type: Boolean,
-    defualt: false,
-  },
-  historyClick: {
-    type: Function,
-    default: () => console.log("not function"),
-  },
-  add: {
-    type: Function,
-    default: () => console.log("not function"),
-  },
-  addleave: {
-    type: Function,
-    default: () => console.log("not function"),
-  },
-  save: {
-    type: Function,
-    default: () => console.log("not function"),
-  },
-  deleted: {
-    type: Function,
-    default: () => console.log("not function"),
-  },
-  cancel: {
-    type: Function,
-    default: () => console.log("not function"),
-  },
-  changeBtn: {
-    type: Function,
-    default: () => console.log("not function"),
-  },
-  addEmployee: {
-    type: Boolean,
-    defualt: false,
-  },
-});
 
-const emit = defineEmits(["update:edit"]);
-
-const updateEdit = (value: any) => {
-  emit("update:edit", value);
-};
-
-const ClickEdit = () => {
-  updateEdit(!props.edit);
-  props.changeBtn();
-};
-
-const historyClick = async () => {
-  await props.historyClick();
-};
-
-const ClickCancel = () => {
-  updateEdit(!props.edit);
-  props.cancel();
-  props.changeBtn();
-};
-
-const save = () => {
-  props.save();
-};
-
-const add = () => {
-  props.add();
-};
-
-const addleave = () => {
-  props.addleave();
-};
-</script>
 <style scoped></style>
diff --git a/src/modules/03_recruiting/interface/index/Main.ts b/src/modules/03_recruiting/interface/index/Main.ts
index e7455baef..e008ce137 100644
--- a/src/modules/03_recruiting/interface/index/Main.ts
+++ b/src/modules/03_recruiting/interface/index/Main.ts
@@ -254,7 +254,7 @@ const defaultEducation = ref<Education>({
   educationLevelHighId: null,
 });
 
-const changeData = (system: String, val: any) => {
+async function changeData(system: String, val: any){
   if (system == "information") defaultInformation.value = val;
   if (system == "address") defaultAddress.value = val;
   if (system == "famliy") defaultFamily.value = val;
diff --git a/src/modules/03_recruiting/views/01_compete/Detail.vue b/src/modules/03_recruiting/views/01_compete/Detail.vue
index 6d29c062e..2bdb1398d 100644
--- a/src/modules/03_recruiting/views/01_compete/Detail.vue
+++ b/src/modules/03_recruiting/views/01_compete/Detail.vue
@@ -1,139 +1,23 @@
 <!-- page:detail page สรรหา -->
-<template>
-  <div class="toptitle text-dark col-12 row items-center">
-    <q-btn
-      icon="mdi-arrow-left"
-      unelevated
-      round
-      dense
-      flat
-      color="primary"
-      class="q-mr-sm"
-      @click="router.go(-1)"
-    />
-    รายชื่อผู้สมัครสอบแข่งขัน {{ name }} ครั้งที่ {{ round }}/{{ year }}
-    <q-space />
-    <q-btn
-      size="md"
-      icon="mdi-content-save-move-outline"
-      round
-      flat
-      color="indigo"
-      v-if="rows.length > 0"
-      @click="candidateToPlacement"
-    >
-      <q-tooltip>บรรจุผู้ผ่านการสอบแข่งขัน</q-tooltip>
-    </q-btn>
-    <q-btn class="bg-teal-1" icon="mdi-download" round color="primary" flat>
-      <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
-      <q-menu>
-        <q-list style="min-width: 100px">
-          <q-item clickable v-close-popup @click="downloadExam()">
-            <q-item-section class="text-blue"
-              >ส่งออกข้อมูลผู้มีสิทธิ์สอบ</q-item-section
-            >
-          </q-item>
-          <q-item clickable v-close-popup @click="downloadPassExam()">
-            <q-item-section class="text-primary"
-              >ส่งออกข้อมูลผู้สอบผ่านภาค ก.</q-item-section
-            >
-          </q-item>
-          <q-item clickable v-close-popup @click="downloadPassResultExam()">
-            <q-item-section class="text-amber-9"
-              >ส่งออกข้อมูลผู้สอบแข่งขันได้</q-item-section
-            >
-          </q-item>
-        </q-list>
-      </q-menu>
-    </q-btn>
-  </div>
-  <q-card flat bordered class="col-12 row q-mt-sm q-pt-sm q-pa-md">
-    <div class="col-12">
-      <Table
-        :count="count"
-        :pass="pass"
-        :notpass="notpass"
-        :rows="rows"
-        :columns="columns"
-        :filter="filter"
-        :visible-columns="visibleColumns"
-        v-model:inputfilter="filter"
-        v-model:inputvisible="visibleColumns"
-        :nornmalData="false"
-        :conclude="true"
-      >
-        <template #columns="props">
-          <q-tr :props="props" class="cursor-pointer">
-            <q-td
-              v-for="col in props.cols"
-              :key="col.name"
-              :props="props"
-              @click="clickDetail(props.row.examID)"
-            >
-              <div v-if="col.name == 'no'">
-                {{ props.rowIndex + 1 }}
-              </div>
-              <div v-else-if="col.name == 'fullname'">
-                <div class="row col-12 items-center">
-                  <img
-                    :src="props.row.avatar"
-                    class="q-mr-sm col-4"
-                    style="width: 28px; height: 28px; border-radius: 50%"
-                  />
-                  <div class="col-4">
-                    <div class="text-weight-medium">
-                      {{ props.row.fullname }}
-                    </div>
-                    <div class="text-weight-light">
-                      {{ props.row.citizenId }}
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div v-else-if="col.name == 'c1'">
-                <q-checkbox disable v-model="props.row.c1" />
-              </div>
-              <div v-else-if="col.name == 'c2'">
-                <q-checkbox disable v-model="props.row.c2" />
-              </div>
-              <div v-else-if="col.name == 'c3'">
-                <q-checkbox disable v-model="props.row.c3" />
-              </div>
-              <div v-else-if="col.name == 'c4'">
-                <q-checkbox disable v-model="props.row.c4" />
-              </div>
-              <div v-else-if="col.name == 'c5'">
-                <q-checkbox disable v-model="props.row.c5" />
-              </div>
-              <div v-else>
-                {{ col.value }}
-              </div>
-            </q-td>
-          </q-tr>
-        </template>
-      </Table>
-    </div>
-  </q-card>
-</template>
 <script setup lang="ts">
 import type { QTableProps } from "quasar";
 import { ref, onMounted } from "vue";
 import { useRouter, useRoute } from "vue-router";
-import type { RecruitDetailResponse } from "@/modules/03_recruiting/interface/response/Period";
-import Table from "@/modules/03_recruiting/components/Table.vue";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
 import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar } from "quasar";
 
-const $q = useQuasar();
+import type { RecruitDetailResponse } from "@/modules/03_recruiting/interface/response/Period";
+import Table from "@/modules/03_recruiting/components/Table.vue";
 
+const $q = useQuasar();
 const router = useRouter();
 const route = useRoute();
-
 const mixin = useCounterMixin();
 const { messageError, success, showLoader, hideLoader } = mixin;
+
 const year = ref<string>("");
 const round = ref<string>("");
 const name = ref<string>("");
@@ -364,16 +248,11 @@ const columns = ref<QTableProps["columns"]>([
   },
 ]);
 
-onMounted(async () => {
-  hideLoader();
-  await fetchData();
-});
-
-const clickDetail = (examID: string) => {
+function clickDetail(examID: string) {
   router.push(`/compete/import/${importId.value}/${examID}`);
-};
+}
 
-const downloadExam = async () => {
+async function downloadExam() {
   showLoader();
   await http
     .get(config.API.exportExam(importId.value), {
@@ -392,9 +271,10 @@ const downloadExam = async () => {
     .finally(() => {
       hideLoader();
     });
-};
+}
 
-const downloadPassExam = async () => {
+/** ดาวห์โลหด รายชื่อผู้สอบผ่าน */
+async function downloadPassExam() {
   showLoader();
   await http
     .get(config.API.exportPassExam(importId.value), {
@@ -413,9 +293,10 @@ const downloadPassExam = async () => {
     .finally(() => {
       hideLoader();
     });
-};
+}
 
-const downloadPassResultExam = async () => {
+/** ดาวห์โลหด สอบแข่งขันได้ */
+async function downloadPassResultExam() {
   showLoader();
   await http
     .get(config.API.exportPassResultExam(importId.value), {
@@ -434,9 +315,10 @@ const downloadPassResultExam = async () => {
     .finally(() => {
       hideLoader();
     });
-};
+}
 
-const fetchData = async () => {
+/** ดึงข้อมูล */
+async function fetchData() {
   showLoader();
   await http
     .post(config.API.getExamResultById(importId.value), {
@@ -449,8 +331,6 @@ const fetchData = async () => {
       count.value = header.count;
       pass.value = header.pass;
       notpass.value = header.notpass;
-
-      // period information
       if (period != null) {
         name.value = period.name;
         round.value = period.order;
@@ -476,9 +356,9 @@ const fetchData = async () => {
     .finally(() => {
       hideLoader();
     });
-};
+}
 
-const candidateToPlacement = async () => {
+async function candidateToPlacement() {
   $q.dialog({
     title: "ยืนยันการนำผู้ผ่านสอบแข่งขันเข้าสู่ระบบบรรจุ",
     message: "ต้องการนำผู้ผ่านสอบแข่งขันเข้าสู่ระบบบรรจุใช่หรือไม่?",
@@ -505,7 +385,128 @@ const candidateToPlacement = async () => {
     })
     .onCancel(() => {})
     .onDismiss(() => {});
-};
+}
+
+onMounted(async () => {
+  hideLoader();
+  await fetchData();
+});
 </script>
+<template>
+  <div class="toptitle text-dark col-12 row items-center">
+    <q-btn
+      icon="mdi-arrow-left"
+      unelevated
+      round
+      dense
+      flat
+      color="primary"
+      class="q-mr-sm"
+      @click="router.go(-1)"
+    />
+    รายชื่อผู้สมัครสอบแข่งขัน {{ name }} ครั้งที่ {{ round }}/{{ year }}
+    <q-space />
+    <q-btn
+      size="md"
+      icon="mdi-content-save-move-outline"
+      round
+      flat
+      color="indigo"
+      v-if="rows.length > 0"
+      @click="candidateToPlacement"
+    >
+      <q-tooltip>บรรจุผู้ผ่านการสอบแข่งขัน</q-tooltip>
+    </q-btn>
+    <q-btn class="bg-teal-1" icon="mdi-download" round color="primary" flat>
+      <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
+      <q-menu>
+        <q-list style="min-width: 100px">
+          <q-item clickable v-close-popup @click="downloadExam()">
+            <q-item-section class="text-blue"
+              >ส่งออกข้อมูลผู้มีสิทธิ์สอบ</q-item-section
+            >
+          </q-item>
+          <q-item clickable v-close-popup @click="downloadPassExam()">
+            <q-item-section class="text-primary"
+              >ส่งออกข้อมูลผู้สอบผ่านภาค ก.</q-item-section
+            >
+          </q-item>
+          <q-item clickable v-close-popup @click="downloadPassResultExam()">
+            <q-item-section class="text-amber-9"
+              >ส่งออกข้อมูลผู้สอบแข่งขันได้</q-item-section
+            >
+          </q-item>
+        </q-list>
+      </q-menu>
+    </q-btn>
+  </div>
+  <q-card flat bordered class="col-12 row q-mt-sm q-pt-sm q-pa-md">
+    <div class="col-12">
+      <Table
+        :count="count"
+        :pass="pass"
+        :notpass="notpass"
+        :rows="rows"
+        :columns="columns"
+        :filter="filter"
+        :visible-columns="visibleColumns"
+        v-model:inputfilter="filter"
+        v-model:inputvisible="visibleColumns"
+        :nornmalData="false"
+        :conclude="true"
+      >
+        <template #columns="props">
+          <q-tr :props="props" class="cursor-pointer">
+            <q-td
+              v-for="col in props.cols"
+              :key="col.name"
+              :props="props"
+              @click="clickDetail(props.row.examID)"
+            >
+              <div v-if="col.name == 'no'">
+                {{ props.rowIndex + 1 }}
+              </div>
+              <div v-else-if="col.name == 'fullname'">
+                <div class="row col-12 items-center">
+                  <img
+                    :src="props.row.avatar"
+                    class="q-mr-sm col-4"
+                    style="width: 28px; height: 28px; border-radius: 50%"
+                  />
+                  <div class="col-4">
+                    <div class="text-weight-medium">
+                      {{ props.row.fullname }}
+                    </div>
+                    <div class="text-weight-light">
+                      {{ props.row.citizenId }}
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div v-else-if="col.name == 'c1'">
+                <q-checkbox disable v-model="props.row.c1" />
+              </div>
+              <div v-else-if="col.name == 'c2'">
+                <q-checkbox disable v-model="props.row.c2" />
+              </div>
+              <div v-else-if="col.name == 'c3'">
+                <q-checkbox disable v-model="props.row.c3" />
+              </div>
+              <div v-else-if="col.name == 'c4'">
+                <q-checkbox disable v-model="props.row.c4" />
+              </div>
+              <div v-else-if="col.name == 'c5'">
+                <q-checkbox disable v-model="props.row.c5" />
+              </div>
+              <div v-else>
+                {{ col.value }}
+              </div>
+            </q-td>
+          </q-tr>
+        </template>
+      </Table>
+    </div>
+  </q-card>
+</template>
 
 <style></style>
diff --git a/src/modules/03_recruiting/views/01_compete/DetailEx.vue b/src/modules/03_recruiting/views/01_compete/DetailEx.vue
index 25e504865..cd6e2a815 100644
--- a/src/modules/03_recruiting/views/01_compete/DetailEx.vue
+++ b/src/modules/03_recruiting/views/01_compete/DetailEx.vue
@@ -1,4 +1,137 @@
 <!-- page:detail page สรรหา -->
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import { useRouter, useRoute } from "vue-router";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar } from "quasar";
+
+const $q = useQuasar();
+
+const router = useRouter();
+const route = useRoute();
+
+const profile_id = ref<string>("");
+const birthdate = ref<string>("");
+const gender = ref<string>("");
+const university = ref<string>("");
+const position_name = ref<string>("");
+const degree = ref<string>("");
+const major = ref<string>("");
+const cert_issuedate = ref<string>("");
+const examAttribute = ref<string>("");
+const examResultinscore = ref<string>("");
+const scoreAFull = ref<string>("");
+const scoreA = ref<string>("");
+const scoreBFull = ref<string>("");
+const scoreB = ref<string>("");
+const scoreCFull = ref<string>("");
+const scoreC = ref<string>("");
+const scoreSumFull = ref<string>("");
+const scoreSum = ref<string>("");
+const examOrder = ref<string>("");
+const number = ref<string>("");
+const score_expired = ref<string>("");
+const mixin = useCounterMixin();
+const { messageError, showLoader, hideLoader } = mixin;
+const examID = ref<string>("62150001");
+const prefix = ref<string>("นาย");
+const fullname = ref<string>("เกียรติศักดิ์ บัณฑิต");
+const importId = ref<string>(route.params.id as string); // Period Import Id
+const examId = ref<string>(route.params.examId as string); // เลขประจำตัวสอบ
+
+/** ดึงข้อมูล */
+async function fetchData() {
+  showLoader();
+  await http
+    .get(config.API.getExamDetail(importId.value, examId.value))
+    .then((res) => {
+      let data = res.data.result;
+      if (data != null) {
+        profile_id.value = data.profileID;
+        examID.value = data.examID;
+        prefix.value = data.prefix;
+        fullname.value = data.fullName;
+        birthdate.value = data.dateOfBirth;
+        gender.value = data.gender;
+        degree.value = data.degree;
+        major.value = data.major;
+        university.value = data.university;
+        position_name.value = data.positionName;
+        cert_issuedate.value = data.certificateIssueDate;
+        examAttribute.value = data.examAttribute;
+        number.value = data.number;
+        examOrder.value = data.examOrder;
+        score_expired.value = data.scoreExpire;
+        if (data.scoreResult != null) {
+          scoreAFull.value = data.scoreResult.scoreAFull;
+          scoreA.value = data.scoreResult.scoreA;
+          scoreBFull.value = data.scoreResult.scoreBFull;
+          scoreB.value = data.scoreResult.scoreB;
+          scoreCFull.value = data.scoreResult.scoreCFull;
+          scoreC.value = data.scoreResult.scoreC;
+          scoreSumFull.value = data.scoreResult.scoreSumFull;
+          scoreSum.value = data.scoreResult.scoreSum;
+          examResultinscore.value = data.scoreResult.examResult;
+        }
+      }
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+async function downloadScore() {
+  showLoader();
+  await http
+    .get(config.API.downloadScoreReport(importId.value, examId.value), {
+      responseType: "blob",
+    })
+    .then((res) => {
+      var a = document.createElement("a");
+      a.href = URL.createObjectURL(res.data);
+      a.download = `ผลคะแนน_${examId.value}.pdf`;
+      // start download
+      a.click();
+    })
+    .catch(async (e) => {
+      messageError($q, JSON.parse(await e.response.data.text()));
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+async function downloadCertificate() {
+  showLoader();
+  let type = degree.value.includes("บัณฑิต") ? 2 : 1;
+  await http
+    .get(config.API.downloadExamReport(importId.value, examId.value, type), {
+      responseType: "blob",
+    })
+    .then((res) => {
+      var a = document.createElement("a");
+      a.href = URL.createObjectURL(res.data);
+      a.download = `เอกสารรับรอง_${examId.value}.pdf`;
+      // start download
+      a.click();
+    })
+    .catch(async (e) => {
+      messageError($q, JSON.parse(await e.response.data.text()));
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+onMounted(async () => {
+  await fetchData();
+});
+</script>
 <template>
   <div class="toptitle text-dark col-12 row items-center">
     <q-btn
@@ -233,138 +366,5 @@
     </div>
   </q-card>
 </template>
-<script setup lang="ts">
-import { ref, onMounted } from "vue";
-import { useRouter, useRoute } from "vue-router";
-
-import http from "@/plugins/http";
-import config from "@/app.config";
-import { useCounterMixin } from "@/stores/mixin";
-import { useQuasar } from "quasar";
-
-const $q = useQuasar();
-
-const router = useRouter();
-const route = useRoute();
-
-const profile_id = ref<string>("");
-const birthdate = ref<string>("");
-const gender = ref<string>("");
-const university = ref<string>("");
-const position_name = ref<string>("");
-const degree = ref<string>("");
-const major = ref<string>("");
-const cert_issuedate = ref<string>("");
-const examAttribute = ref<string>("");
-const examResultinscore = ref<string>("");
-const scoreAFull = ref<string>("");
-const scoreA = ref<string>("");
-const scoreBFull = ref<string>("");
-const scoreB = ref<string>("");
-const scoreCFull = ref<string>("");
-const scoreC = ref<string>("");
-const scoreSumFull = ref<string>("");
-const scoreSum = ref<string>("");
-const examOrder = ref<string>("");
-const number = ref<string>("");
-const score_expired = ref<string>("");
-const mixin = useCounterMixin();
-const { messageError, showLoader, hideLoader } = mixin;
-const examID = ref<string>("62150001");
-const prefix = ref<string>("นาย");
-const fullname = ref<string>("เกียรติศักดิ์ บัณฑิต");
-const importId = ref<string>(route.params.id as string); // Period Import Id
-const examId = ref<string>(route.params.examId as string); // เลขประจำตัวสอบ
-
-onMounted(async () => {
-  await fetchData();
-});
-
-const fetchData = async () => {
-  showLoader();
-  await http
-    .get(config.API.getExamDetail(importId.value, examId.value))
-    .then((res) => {
-      let data = res.data.result;
-      if (data != null) {
-        profile_id.value = data.profileID;
-        examID.value = data.examID;
-        prefix.value = data.prefix;
-        fullname.value = data.fullName;
-        birthdate.value = data.dateOfBirth;
-        gender.value = data.gender;
-        degree.value = data.degree;
-        major.value = data.major;
-        university.value = data.university;
-        position_name.value = data.positionName;
-        cert_issuedate.value = data.certificateIssueDate;
-        examAttribute.value = data.examAttribute;
-        number.value = data.number;
-        examOrder.value = data.examOrder;
-        score_expired.value = data.scoreExpire;
-        if (data.scoreResult != null) {
-          scoreAFull.value = data.scoreResult.scoreAFull;
-          scoreA.value = data.scoreResult.scoreA;
-          scoreBFull.value = data.scoreResult.scoreBFull;
-          scoreB.value = data.scoreResult.scoreB;
-          scoreCFull.value = data.scoreResult.scoreCFull;
-          scoreC.value = data.scoreResult.scoreC;
-          scoreSumFull.value = data.scoreResult.scoreSumFull;
-          scoreSum.value = data.scoreResult.scoreSum;
-          examResultinscore.value = data.scoreResult.examResult;
-        }
-      }
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-};
-
-const downloadScore = async () => {
-  showLoader();
-  await http
-    .get(config.API.downloadScoreReport(importId.value, examId.value), {
-      responseType: "blob",
-    })
-    .then((res) => {
-      var a = document.createElement("a");
-      a.href = URL.createObjectURL(res.data);
-      a.download = `ผลคะแนน_${examId.value}.pdf`;
-      // start download
-      a.click();
-    })
-    .catch(async (e) => {
-      messageError($q, JSON.parse(await e.response.data.text()));
-    })
-    .finally(() => {
-      hideLoader();
-    });
-};
-
-const downloadCertificate = async () => {
-  showLoader();
-  let type = degree.value.includes("บัณฑิต") ? 2 : 1;
-  await http
-    .get(config.API.downloadExamReport(importId.value, examId.value, type), {
-      responseType: "blob",
-    })
-    .then((res) => {
-      var a = document.createElement("a");
-      a.href = URL.createObjectURL(res.data);
-      a.download = `เอกสารรับรอง_${examId.value}.pdf`;
-      // start download
-      a.click();
-    })
-    .catch(async (e) => {
-      messageError($q, JSON.parse(await e.response.data.text()));
-    })
-    .finally(() => {
-      hideLoader();
-    });
-};
-</script>
 
 <style></style>
diff --git a/src/modules/03_recruiting/views/01_compete/ImportData.vue b/src/modules/03_recruiting/views/01_compete/ImportData.vue
index d582218be..2c228b5d1 100644
--- a/src/modules/03_recruiting/views/01_compete/ImportData.vue
+++ b/src/modules/03_recruiting/views/01_compete/ImportData.vue
@@ -1,86 +1,7 @@
 <!-- page:main page สรรหา -->
-<template>
-  <div class="toptitle text-dark col-12 row items-center">
-    รายการนำเข้าข้อมูลผู้สมัครสอบแข่งขัน
-  </div>
-  <q-card flat bordered class="col-12 q-mt-sm q-pt-sm q-pa-md">
-    <div>
-      <Table
-        :rows="rows"
-        :columns="columns"
-        :filter="filter"
-        :visible-columns="visibleColumns"
-        v-model:inputfilter="filter"
-        v-model:inputvisible="visibleColumns"
-        :nornmalData="false"
-      >
-        <template #columns="props">
-          <q-tr :props="props" class="cursor-pointer">
-            <q-td v-for="col in props.cols" :key="col.name" :props="props">
-              <div v-if="col.name == 'no'" @click="clickEdit(props.row.year)">
-                {{ props.rowIndex + 1 }}
-              </div>
-              <div
-                v-else-if="col.name == 'name'"
-                class="table_ellipsis2"
-                @click="clickEdit(props.row.year)"
-              >
-                {{ col.value }}
-              </div>
-              <div v-else-if="col.name == 'file'">
-                <q-btn
-                  size="13px"
-                  flat
-                  class="bg-blue-1 q-ml-xs"
-                  color="blue"
-                  v-if="col.value == null || file == false"
-                >
-                  <q-icon
-                    name="mdi-file-excel-outline"
-                    size="20px"
-                    class="q-mr-sm"
-                  />
-                  นำเข้าไฟล์
-                  <q-tooltip>นำเข้าไฟล์ excel</q-tooltip>
-                </q-btn>
-                <div v-else>
-                  <q-chip
-                    removable
-                    color="grey-2"
-                    text-color="grey-9"
-                    :label="col.value"
-                    size="14px"
-                    square
-                    icon-remove="mdi-close"
-                    v-model="file"
-                    @remove="remove"
-                  >
-                    <q-tooltip>{{ col.value }}</q-tooltip>
-                  </q-chip>
-                  <q-btn
-                    size="14px"
-                    flat
-                    dense
-                    color="positive"
-                    icon="mdi-content-save-settings-outline"
-                  >
-                    <q-tooltip>บันทึกคะแนนสอบ</q-tooltip>
-                  </q-btn>
-                </div>
-              </div>
-              <div v-else @click="clickEdit(props.row.year)">
-                {{ col.value }}
-              </div>
-            </q-td>
-          </q-tr>
-        </template>
-      </Table>
-    </div>
-  </q-card>
-</template>
 <script setup lang="ts">
 import type { QTableProps } from "quasar";
-import { onMounted, ref, watch } from "vue";
+import { ref } from "vue";
 import { useRouter } from "vue-router";
 import { useQuasar } from "quasar";
 import Table from "@/modules/03_recruiting/components/Table.vue";
@@ -178,19 +99,17 @@ const columns = ref<QTableProps["columns"]>([
   },
 ]);
 
+/**
+ * เปืด dialog digital
+ * @param id
+ */
 const rows = ref<any[]>([]);
 
-onMounted(async () => {
-  await fetchData();
-});
-
-const fetchData = () => {};
-
-const clickEdit = (id: string) => {
+function clickEdit(id: string) {
   router.push(`/compete/import/${id}`);
-};
+}
 
-const remove = () => {
+function remove() {
   $q.dialog({
     title: "ยืนยันการลบเอกสารข้อมูล",
     message: "ต้องการลบเอกสารนี้ใช่หรือไม่?",
@@ -207,7 +126,87 @@ const remove = () => {
       file.value = true;
     })
     .onDismiss(() => {});
-};
+}
 </script>
+<template>
+  <div class="toptitle text-dark col-12 row items-center">
+    รายการนำเข้าข้อมูลผู้สมัครสอบแข่งขัน
+  </div>
+  <q-card flat bordered class="col-12 q-mt-sm q-pt-sm q-pa-md">
+    <div>
+      <Table
+        :rows="rows"
+        :columns="columns"
+        :filter="filter"
+        :visible-columns="visibleColumns"
+        v-model:inputfilter="filter"
+        v-model:inputvisible="visibleColumns"
+        :nornmalData="false"
+      >
+        <template #columns="props">
+          <q-tr :props="props" class="cursor-pointer">
+            <q-td v-for="col in props.cols" :key="col.name" :props="props">
+              <div v-if="col.name == 'no'" @click="clickEdit(props.row.year)">
+                {{ props.rowIndex + 1 }}
+              </div>
+              <div
+                v-else-if="col.name == 'name'"
+                class="table_ellipsis2"
+                @click="clickEdit(props.row.year)"
+              >
+                {{ col.value }}
+              </div>
+              <div v-else-if="col.name == 'file'">
+                <q-btn
+                  size="13px"
+                  flat
+                  class="bg-blue-1 q-ml-xs"
+                  color="blue"
+                  v-if="col.value == null || file == false"
+                >
+                  <q-icon
+                    name="mdi-file-excel-outline"
+                    size="20px"
+                    class="q-mr-sm"
+                  />
+                  นำเข้าไฟล์
+                  <q-tooltip>นำเข้าไฟล์ excel</q-tooltip>
+                </q-btn>
+                <div v-else>
+                  <q-chip
+                    removable
+                    color="grey-2"
+                    text-color="grey-9"
+                    :label="col.value"
+                    size="14px"
+                    square
+                    icon-remove="mdi-close"
+                    v-model="file"
+                    @remove="remove"
+                  >
+                    <q-tooltip>{{ col.value }}</q-tooltip>
+                  </q-chip>
+                  <q-btn
+                    size="14px"
+                    flat
+                    dense
+                    color="positive"
+                    icon="mdi-content-save-settings-outline"
+                  >
+                    <q-tooltip>บันทึกคะแนนสอบ</q-tooltip>
+                  </q-btn>
+                </div>
+              </div>
+              <div v-else @click="clickEdit(props.row.year)">
+                {{ col.value }}
+              </div>
+            </q-td>
+          </q-tr>
+        </template>
+      </Table>
+    </div>
+  </q-card>
+</template>
+
 
 <style></style>
diff --git a/src/modules/03_recruiting/views/01_compete/Period.vue b/src/modules/03_recruiting/views/01_compete/Period.vue
index f4e129d5e..12646dbb8 100644
--- a/src/modules/03_recruiting/views/01_compete/Period.vue
+++ b/src/modules/03_recruiting/views/01_compete/Period.vue
@@ -1,4 +1,415 @@
 <!-- page:จัดการรอบการสอบ สรรหา -->
+<script setup lang="ts">
+import type { QTableProps } from "quasar";
+import { onMounted, ref } from "vue";
+import { useRouter } from "vue-router";
+import { useQuasar } from "quasar";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { checkPermission } from "@/utils/permissions";
+import { useCounterMixin } from "@/stores/mixin";
+
+import type { Pagination } from "@/modules/03_recruiting/interface/index/Main";
+import type {
+  ResponseRecruitPeriod,
+  ResponseHistoryObject,
+} from "@/modules/03_recruiting/interface/response/Period";
+
+import Table from "@/modules/03_recruiting/components/Table.vue";
+import DialogHeader from "@/components/DialogHeader.vue";
+import HistoryTable from "@/components/TableHistory.vue";
+
+const $q = useQuasar(); // show dialog
+const mixin = useCounterMixin();
+const { success, dateText, showLoader, hideLoader, messageError } = mixin;
+
+const router = useRouter();
+const name = ref<string>("");
+const year = ref<number>(new Date().getFullYear() + 543);
+const order = ref<number>(1);
+
+const files = ref<any>(null);
+const files_score = ref<any>(null);
+const files_candidate = ref<any>(null);
+const modalAdd = ref<boolean>(false);
+const modalScore = ref<boolean>(false);
+const modalCandidate = ref<boolean>(false);
+const selected_row_id = ref<string>("");
+const rowsHistory = ref<ResponseHistoryObject[]>([]); //select data history
+const tittleHistory = ref<string>("ประวัติการนำเข้าข้อมูล"); //
+const filterHistory = ref<string>(""); //search data table history
+const modalHistory = ref<boolean>(false); //modal ประวัติการแก้ไขข้อมูล
+const modalError = ref<boolean>(false); // modal สำหรับแจ้งเตือนerror
+const modalErrorTittle = ref<string>(""); // tittle modal error
+const modalErrorDetail = ref<string>(""); // detail modal error
+const statusCode = ref<number>();
+const filter = ref<string>(""); //search data table
+const textTittle = ref<string>("");
+const textTittleScore = ref<string>("");
+const textTittleCandidate = ref<string>("");
+const rows = ref<ResponseRecruitPeriod[]>([]);
+const initialPagination = ref<Pagination>({
+  rowsPerPage: 0,
+});
+const visibleColumns = ref<String[]>([
+  "no",
+  "name",
+  "order",
+  "year",
+  "examCount",
+  "scoreCount",
+]);
+
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: false,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "name",
+    align: "left",
+    label: "รอบสอบแข่งขัน",
+    sortable: true,
+    field: "name",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "order",
+    align: "left",
+    label: "ครั้งที่",
+    sortable: true,
+    field: "order",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "year",
+    align: "left",
+    label: "ปีงบประมาณ",
+    sortable: true,
+    field: "year",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "examCount",
+    label: "จำนวนผู้สอบทั้งหมด",
+    align: "right",
+    field: "examCount",
+    sortable: true,
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "scoreCount",
+    label: "จำนวนที่บันทึกผลสอบ",
+    align: "right",
+    field: "scoreCount",
+    sortable: true,
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+
+const columnsHistory = ref<QTableProps["columns"]>([
+  {
+    name: "description",
+    align: "left",
+    label: "รายละเอียด",
+    sortable: true,
+    field: "description",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "createdAt",
+    align: "center",
+    label: "วันที่ดำเนินการ",
+    sortable: true,
+    field: "createdAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "createdFullName",
+    align: "left",
+    label: "ผู้ดำเนินการ",
+    sortable: true,
+    field: "createdFullName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+
+const visibleColumnsHistory = ref<String[]>([
+  "description",
+  "createdAt",
+  "createdFullName",
+]);
+
+/**
+ * ฟังก์ชันแปลง date เป็นภาษาไทย
+ * @param value วันที่ type datetime ที่จะแปลงเป็นไทย
+ */
+function textDate(value: Date) {
+  return dateText(value);
+}
+
+/** ดึงข้อมูล รอบสอบแข่งขัน  */
+async function fetchData() {
+  showLoader();
+  await http
+    .get(config.API.getCandidates)
+    .then((res) => {
+      const data = res.data.result;
+      let result: ResponseRecruitPeriod[] = [];
+      if (data.length > 0) {
+        data.map((r: ResponseRecruitPeriod) => {
+          if (r.score != null) {
+            r.scoreCount = r.score.scoreCount;
+            r.scoreImportDate = r.score.importDate;
+          }
+          result.push(r);
+        });
+      }
+
+      rows.value = result;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/**
+ * ดาวน์โหลดรายชื่อผู้สอบแข่งขันได้
+ * @param id รอบสอบเเข่งขัน
+ */
+function clickPassExam(id: string) {
+  window.open(config.API.exportPassExamList(id));
+}
+
+/**
+ * ดาวน์โหลดรายชื่อผู้มีสิทธิ์สอบ
+ * @param id รอบสอบเเข่งขัน
+ */
+function clickCandidateList(id: string) {
+  window.open(config.API.exportCandidateList(id));
+}
+
+/**
+ * รายละเอียด รอบสอบเเข่งขัน
+ * @param id รอบสอบเเข่งขัน
+ */
+function clickDetail(id: string) {
+  router.push(`/compete/import/${id}`);
+}
+
+/**
+ * นำเข้าไฟล์ผลคะแนนสอบอีกครั้ง
+ * @param id รอบสอบเเข่งขัน
+ */
+async function clickEdit(id: string) {
+  modalScore.value = true;
+  textTittleScore.value = "นำเข้าผลคะแนนสอบแข่งขัน";
+  selected_row_id.value = id;
+}
+
+/**
+ * นำเข้าไฟล์ผู้สมัครสอบอีกครั้ง
+ * @param id รอบสอบเเข่งขัน
+ */
+async function clickUpload(id: string) {
+  modalCandidate.value = true;
+  textTittleCandidate.value = "นำเข้าผู้สมัครสอบแข่งขัน";
+  selected_row_id.value = id;
+}
+
+/**
+ * แก้ไขรอบสอบแข่งขัน
+ * @param id รอบสอบเเข่งขัน
+ */
+function clickEditPeriod(id: string) {
+  router.push(`/compete/period/${id}`);
+}
+
+/**
+ * ประวัติ
+ * @param id รอบสอบเเข่งขัน
+ */
+async function clickHistory(id: string) {
+  modalHistory.value = true;
+  showLoader();
+  await http
+    .get(config.API.getImportHistory(id))
+    .then((res) => {
+      const data = res.data.result;
+      rowsHistory.value = [];
+      if (data.length > 0) {
+        data.map((i: ResponseHistoryObject) => {
+          rowsHistory.value.push({
+            createdAt: i.createdAt,
+            createdFullName: i.createdFullName,
+            createdUserId: i.createdUserId,
+            id: i.id,
+            isActive: i.isActive,
+            lastUpdateFullName: i.lastUpdateFullName,
+            lastUpdateUserId: i.lastUpdateUserId,
+            lastUpdatedAt: i.lastUpdatedAt,
+            description: i.description,
+          });
+        });
+      }
+    })
+    .catch((e) => {
+      modalError.value = true;
+      modalErrorTittle.value = "ไม่พบประวัติการเผยแพร่";
+      modalErrorDetail.value = e.response.data.message;
+      statusCode.value = e.response.data.status;
+    })
+    .finally(async () => {
+      hideLoader();
+    });
+}
+
+/**
+ * ลบข้อมูล
+ *
+ * @param id รอบสอบเเข่งขัน
+ */
+function clickDelete(id: string) {
+  $q.dialog({
+    title: "ยืนยันการลบข้อมูล",
+    message: "ต้องการลบข้อมูลนี้ใช่หรือไม่?",
+    cancel: {
+      flat: true,
+      color: "negative",
+    },
+    persistent: true,
+  })
+    .onOk(async () => {
+      showLoader();
+      await http
+        .delete(config.API.deleteCandidates(id))
+        .then((res) => {
+          success($q, "ลบข้อมูลการสอบสำเร็จ");
+          fetchData();
+        })
+        .catch((e) => {
+          messageError($q, e);
+        })
+        .finally(() => {
+          hideLoader();
+        });
+    })
+    .onCancel(() => {})
+    .onDismiss(() => {});
+}
+
+/** ไปหน้าเพิ่มรอบสอบแข่งขัน */
+function clickAdd() {
+  router.push({ name: "competePeriodAdd" });
+}
+
+/** ปิด dialog */
+async function clickClose() {
+  modalAdd.value = false;
+  await fetchData();
+}
+
+/** ปิด dialog คะเเนน */
+async function clickCloseScore() {
+  modalScore.value = false;
+  await fetchData();
+}
+
+/** ปิด dialog เลือกไฟล์ผู้สมัครสอบแข่งขัน */
+async function clickCloseCandidate() {
+  modalCandidate.value = false;
+  await fetchData();
+}
+
+/** บันทึกข้อมูล เลือกไฟล์ผู้สมัครสอบแข่งขัน */
+async function checkSaveCandidate() {
+  const fd = new FormData();
+  fd.append("attachment", files_candidate.value[0]);
+  showLoader();
+  await http
+    .post(config.API.uploadCandidates(selected_row_id.value), fd)
+    .then((res) => {
+      success($q, "นำเข้าข้อมูลผู้สมัครสอบสำเร็จ");
+      modalCandidate.value = false;
+      selected_row_id.value = "";
+      fetchData();
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/** บันทึด คะเเนน */
+async function checkSaveScore() {
+  const fd = new FormData();
+  fd.append("attachment", files_score.value[0]);
+  showLoader();
+  await http
+    .post(config.API.saveScores(selected_row_id.value), fd)
+    .then((res) => {
+      success($q, "นำเข้าข้อมูลผลคะแนนสอบสำเร็จ");
+      modalScore.value = false;
+      selected_row_id.value = "";
+      fetchData();
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/** save data */
+async function checkSave() {
+  const fd = new FormData();
+  fd.append("attachment", files.value[0]);
+  fd.append("year", year.value.toString());
+  fd.append("order", order.value.toString());
+  fd.append("name", name.value);
+  showLoader();
+  await http
+    .post(config.API.saveCandidates, fd)
+    .then((res) => {
+      success($q, "นำเข้าข้อมูลผู้สมัครสอบแข่งขันสำเร็จ");
+      modalAdd.value = false;
+      fetchData();
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/** ดึงข้อมูล เมื่อโหลดหน้า component */
+onMounted(async () => {
+  hideLoader();
+  await fetchData();
+});
+</script>
+
 <template>
   <div class="toptitle text-dark col-12 row items-center">
     จัดการรอบสอบแข่งขัน
@@ -373,370 +784,5 @@
     </q-card>
   </q-dialog>
 </template>
-<script setup lang="ts">
-import { checkPermission } from "@/utils/permissions";
-import type { QTableProps } from "quasar";
-import { onMounted, ref } from "vue";
-import { useRouter } from "vue-router";
-import { useQuasar } from "quasar";
-import { useCounterMixin } from "@/stores/mixin";
-import type {
-  ResponseRecruitPeriod,
-  ResponseHistoryObject,
-} from "@/modules/03_recruiting/interface/response/Period";
-import type { Pagination } from "@/modules/03_recruiting/interface/index/Main";
-import Table from "@/modules/03_recruiting/components/Table.vue";
-import DialogHeader from "@/components/DialogHeader.vue";
-
-import http from "@/plugins/http";
-import config from "@/app.config";
-import HistoryTable from "@/components/TableHistory.vue";
-
-const $q = useQuasar(); // show dialog
-const router = useRouter();
-const name = ref<string>("");
-const year = ref<number>(new Date().getFullYear() + 543);
-const order = ref<number>(1);
-const mixin = useCounterMixin();
-const { success, dateToISO, dateText, showLoader, hideLoader } = mixin;
-const files = ref<any>(null);
-const files_score = ref<any>(null);
-const files_candidate = ref<any>(null);
-const modalAdd = ref<boolean>(false);
-const modalScore = ref<boolean>(false);
-const modalCandidate = ref<boolean>(false);
-const selected_row_id = ref<string>("");
-const rowsHistory = ref<ResponseHistoryObject[]>([]); //select data history
-const tittleHistory = ref<string>("ประวัติการนำเข้าข้อมูล"); //
-const filterHistory = ref<string>(""); //search data table history
-const modalHistory = ref<boolean>(false); //modal ประวัติการแก้ไขข้อมูล
-const modalError = ref<boolean>(false); // modal สำหรับแจ้งเตือนerror
-const modalErrorTittle = ref<string>(""); // tittle modal error
-const modalErrorDetail = ref<string>(""); // detail modal error
-const statusCode = ref<number>();
-const filter = ref<string>(""); //search data table
-const textTittle = ref<string>("");
-const { messageError } = mixin;
-const textTittleScore = ref<string>("");
-const textTittleCandidate = ref<string>("");
-const rows = ref<any[]>([]);
-const initialPagination = ref<Pagination>({
-  rowsPerPage: 0,
-});
-const visibleColumns = ref<String[]>([
-  "no",
-  "name",
-  "order",
-  "year",
-  "examCount",
-  "scoreCount",
-]);
-
-const columns = ref<QTableProps["columns"]>([
-  {
-    name: "no",
-    align: "left",
-    label: "ลำดับ",
-    sortable: false,
-    field: "no",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "name",
-    align: "left",
-    label: "รอบสอบแข่งขัน",
-    sortable: true,
-    field: "name",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "order",
-    align: "left",
-    label: "ครั้งที่",
-    sortable: true,
-    field: "order",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "year",
-    align: "left",
-    label: "ปีงบประมาณ",
-    sortable: true,
-    field: "year",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "examCount",
-    label: "จำนวนผู้สอบทั้งหมด",
-    align: "right",
-    field: "examCount",
-    sortable: true,
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "scoreCount",
-    label: "จำนวนที่บันทึกผลสอบ",
-    align: "right",
-    field: "scoreCount",
-    sortable: true,
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-]);
-
-const columnsHistory = ref<QTableProps["columns"]>([
-  {
-    name: "description",
-    align: "left",
-    label: "รายละเอียด",
-    sortable: true,
-    field: "description",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "createdAt",
-    align: "center",
-    label: "วันที่ดำเนินการ",
-    sortable: true,
-    field: "createdAt",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "createdFullName",
-    align: "left",
-    label: "ผู้ดำเนินการ",
-    sortable: true,
-    field: "createdFullName",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-]);
-
-const visibleColumnsHistory = ref<String[]>([
-  "description",
-  "createdAt",
-  "createdFullName",
-]);
-
-onMounted(async () => {
-  hideLoader();
-  await fetchData();
-});
-
-/**
- * ฟังก์ชันแปลง date เป็นภาษาไทย
- * @param value วันที่ type datetime ที่จะแปลงเป็นไทย
- */
-const textDate = (value: Date) => {
-  return dateText(value);
-};
-
-const fetchData = async () => {
-  showLoader();
-  await http
-    .get(config.API.getCandidates)
-    .then((res) => {
-      const data = res.data.result;
-      let result: ResponseRecruitPeriod[] = [];
-      if (data.length > 0) {
-        data.map((r: ResponseRecruitPeriod) => {
-          if (r.score != null) {
-            r.scoreCount = r.score.scoreCount;
-            r.scoreImportDate = r.score.importDate;
-          }
-          result.push(r);
-        });
-      }
-
-      rows.value = result;
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-};
-
-const clickPassExam = (id: string) => {
-  window.open(config.API.exportPassExamList(id));
-};
-
-const clickCandidateList = (id: string) => {
-  window.open(config.API.exportCandidateList(id));
-};
-
-const clickDetail = (id: string) => {
-  router.push(`/compete/import/${id}`);
-};
-
-const clickEdit = async (id: string) => {
-  modalScore.value = true;
-  textTittleScore.value = "นำเข้าผลคะแนนสอบแข่งขัน";
-  selected_row_id.value = id;
-};
-
-const clickUpload = async (id: string) => {
-  modalCandidate.value = true;
-  textTittleCandidate.value = "นำเข้าผู้สมัครสอบแข่งขัน";
-  selected_row_id.value = id;
-};
-
-const clickEditPeriod = (id: string) => {
-  router.push(`/compete/period/${id}`);
-};
-
-const clickHistory = async (id: string) => {
-  modalHistory.value = true;
-  showLoader();
-  await http
-    .get(config.API.getImportHistory(id))
-    .then((res) => {
-      const data = res.data.result;
-      rowsHistory.value = [];
-      if (data.length > 0) {
-        data.map((i: ResponseHistoryObject) => {
-          rowsHistory.value.push({
-            createdAt: i.createdAt,
-            createdFullName: i.createdFullName,
-            createdUserId: i.createdUserId,
-            id: i.id,
-            isActive: i.isActive,
-            lastUpdateFullName: i.lastUpdateFullName,
-            lastUpdateUserId: i.lastUpdateUserId,
-            lastUpdatedAt: i.lastUpdatedAt,
-            description: i.description,
-          });
-        });
-      }
-    })
-    .catch((e) => {
-      modalError.value = true;
-      modalErrorTittle.value = "ไม่พบประวัติการเผยแพร่";
-      modalErrorDetail.value = e.response.data.message;
-      statusCode.value = e.response.data.status;
-    })
-    .finally(async () => {
-      hideLoader();
-    });
-};
-
-const clickDelete = (id: string) => {
-  $q.dialog({
-    title: "ยืนยันการลบข้อมูล",
-    message: "ต้องการลบข้อมูลนี้ใช่หรือไม่?",
-    cancel: {
-      flat: true,
-      color: "negative",
-    },
-    persistent: true,
-  })
-    .onOk(async () => {
-      showLoader();
-      await http
-        .delete(config.API.deleteCandidates(id))
-        .then((res) => {
-          success($q, "ลบข้อมูลการสอบสำเร็จ");
-          fetchData();
-        })
-        .catch((e) => {
-          messageError($q, e);
-        })
-        .finally(() => {
-          hideLoader();
-        });
-    })
-    .onCancel(() => {})
-    .onDismiss(() => {});
-};
-
-const clickAdd = () => {
-  router.push({ name: "competePeriodAdd" });
-};
-
-const clickClose = async () => {
-  modalAdd.value = false;
-  await fetchData();
-};
-
-const clickCloseScore = async () => {
-  modalScore.value = false;
-  await fetchData();
-};
-
-const clickCloseCandidate = async () => {
-  modalCandidate.value = false;
-  await fetchData();
-};
-
-const checkSaveCandidate = async () => {
-  const fd = new FormData();
-  fd.append("attachment", files_candidate.value[0]);
-  showLoader();
-  await http
-    .post(config.API.uploadCandidates(selected_row_id.value), fd)
-    .then((res) => {
-      success($q, "นำเข้าข้อมูลผู้สมัครสอบสำเร็จ");
-      modalCandidate.value = false;
-      selected_row_id.value = "";
-      fetchData();
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-};
-
-const checkSaveScore = async () => {
-  const fd = new FormData();
-  fd.append("attachment", files_score.value[0]);
-  showLoader();
-  await http
-    .post(config.API.saveScores(selected_row_id.value), fd)
-    .then((res) => {
-      success($q, "นำเข้าข้อมูลผลคะแนนสอบสำเร็จ");
-      modalScore.value = false;
-      selected_row_id.value = "";
-      fetchData();
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-};
-
-const checkSave = async () => {
-  const fd = new FormData();
-  fd.append("attachment", files.value[0]);
-  fd.append("year", year.value.toString());
-  fd.append("order", order.value.toString());
-  fd.append("name", name.value);
-  showLoader();
-  await http
-    .post(config.API.saveCandidates, fd)
-    .then((res) => {
-      success($q, "นำเข้าข้อมูลผู้สมัครสอบแข่งขันสำเร็จ");
-      modalAdd.value = false;
-      fetchData();
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-};
-</script>
 
 <style></style>
diff --git a/src/modules/03_recruiting/views/01_compete/PeriodAdd.vue b/src/modules/03_recruiting/views/01_compete/PeriodAdd.vue
index 6f3edb9d4..42e52c69f 100644
--- a/src/modules/03_recruiting/views/01_compete/PeriodAdd.vue
+++ b/src/modules/03_recruiting/views/01_compete/PeriodAdd.vue
@@ -1,4 +1,361 @@
-<!-- page:จัดการรอบการสอบแข่งขัน สรรหา -->
+<script setup lang="ts">
+import type { QTableProps } from "quasar";
+import { onMounted, ref, watch } from "vue";
+import { useQuasar, QForm } from "quasar";
+import { useRouter, useRoute } from "vue-router";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
+
+import type { RequestPeriodCompete } from "@/modules/03_recruiting/interface/request/Period";
+import type {
+  DataOption,
+  UploadType,
+} from "@/modules/02_organizational/interface/index/Main";
+
+const $q = useQuasar(); // show dialog
+const mixin = useCounterMixin();
+const router = useRouter();
+const route = useRoute();
+const { date2Thai, success, dateToISO, messageError, showLoader, hideLoader } =
+  mixin;
+
+const myForm = ref<QForm | null>(null); //form data input
+const name = ref<string>("");
+const note = ref<string>("");
+const editor = ref<string>("");
+const announcementExam = ref<boolean>(true);
+const fee = ref<number>(0);
+const round = ref<number>(1);
+const yearly = ref<number>(new Date().getFullYear());
+const dateRegister = ref<[Date, Date] | null>(null); //วันที่สมัคร
+const datePayment = ref<[Date, Date] | null>(null); //วันที่จ่ายเงิน
+const dateAnnouncement = ref<[Date, Date] | null>(null); //วันที่ประกาศ
+const dateExam = ref<Date | null>(null); //วันที่สอบ
+const dateAnnounce = ref<Date | null>(null); //วันที่ประกาศผล
+const positionPathOptions = ref<DataOption[]>([]);
+const organizationShortName = ref<DataOption>({ id: "", name: "" });
+const organizationName = ref<DataOption>({ id: "", name: "" });
+const organizationNameOptions = ref<DataOption[]>([]);
+const fileDocDataUpload = ref<File[]>([]);
+const fileDocs = ref<UploadType[]>([]);
+const fileImgDataUpload = ref<File[]>([]);
+const fileImgs = ref<UploadType[]>([]);
+const id = ref<string>("");
+const edit = ref<boolean>(false);
+
+/** กลับไปหน้าหลัก */
+function clickBack() {
+  router.push({ name: "competePeriod" });
+}
+
+/** ดึงรายละเอียด */
+async function fetchData() {
+  showLoader();
+  await http
+    .get(config.API.getPeriodById(id.value))
+    .then((res) => {
+      const data = res.data.result.periods;
+      const images = res.data.result.images;
+      const files = res.data.result.files;
+
+      id.value = data.id;
+      name.value = data.name;
+      round.value = data.order;
+      yearly.value = data.year;
+      fee.value = data.fee;
+      dateAnnouncement.value =
+        data.announcementStartDate != null && data.announcementEndDate != null
+          ? [
+              new Date(data.announcementStartDate),
+              new Date(data.announcementEndDate),
+            ]
+          : null;
+      dateExam.value = data.examDate != null ? new Date(data.examDate) : null;
+      dateRegister.value =
+        data.registerStartDate != null && data.registerEndDate != null
+          ? [new Date(data.registerStartDate), new Date(data.registerEndDate)]
+          : null;
+      datePayment.value =
+        data.paymentStartDate != null && data.paymentEndDate != null
+          ? [new Date(data.paymentStartDate), new Date(data.paymentEndDate)]
+          : null;
+
+      editor.value = data.detail;
+      note.value = data.note;
+      dateAnnounce.value =
+        data.announcementDate != null ? new Date(data.announcementDate) : null;
+
+      fileDocs.value = files;
+      fileImgs.value = images;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/** อัพโหลดไฟล์ */
+async function fileUploadDoc(files: any) {
+  files.forEach((file: any) => {
+    fileDocDataUpload.value.push(file);
+  });
+}
+
+/** ลบไฟล์ เอกสาร */
+async function fileRemoveDoc(files: any) {
+  files.forEach((file: any) => {
+    const index = fileDocDataUpload.value.findIndex(
+      (x: any) => x.__key == file.__key
+    );
+    if (index > -1) {
+      fileDocDataUpload.value.splice(index, 1);
+    }
+  });
+}
+
+/** อัพโหลด เอกสาร */
+async function uploadDocData() {
+  const formData = new FormData();
+  if (fileDocDataUpload.value.length > 0) {
+    fileDocDataUpload.value.forEach((file: any) => {
+      formData.append("", file);
+    });
+    showLoader();
+    await http
+      .put(config.API.periodRecruitDoc(id.value), formData)
+      .then((res) => {})
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(async () => {
+        hideLoader();
+        success($q, "บันทึกข้อมูลสำเร็จ");
+        clickBack();
+      });
+  } else {
+    success($q, "บันทึกข้อมูลสำเร็จ");
+    clickBack();
+  }
+}
+
+/** อัปโหลด รูปภาพ */
+async function uploadImgData() {
+  if (fileImgDataUpload.value.length > 0) {
+    const formData = new FormData();
+    fileImgDataUpload.value.forEach((file: any) => {
+      formData.append("", file);
+    });
+    showLoader();
+    await http
+      .put(config.API.periodRecruitImg(id.value), formData)
+      .then((res) => {})
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(async () => {
+        hideLoader();
+      });
+  }
+}
+
+/** อัพโหลดไฟล์ immg */
+async function fileUploadImg(files: any) {
+  files.forEach((file: any) => {
+    fileImgDataUpload.value.push(file);
+  });
+}
+
+/** ฟังชั่น ลบ รูป */
+async function fileRemoveImg(files: any) {
+  files.forEach((file: any) => {
+    const index = fileImgDataUpload.value.findIndex(
+      (x: any) => x.__key == file.__key
+    );
+    if (index > -1) {
+      fileImgDataUpload.value.splice(index, 1);
+    }
+  });
+}
+
+/**
+ * ดาวห์โหลดไฟล์
+ * @param path ที่อยู่ url
+ */
+async function downloadData(path: string) {
+  window.open(path);
+}
+
+/**
+ * อัพเดต ปี
+ * @param e ปี
+ */
+async function updateYear(e: number) {
+  yearly.value = e;
+}
+
+/** ฟังชั่น add edit */
+async function checkSave() {
+  if (myForm.value !== null) {
+    myForm.value.validate().then(async (success) => {
+      if (success) {
+        if (edit.value) {
+          await editData(id.value);
+        } else {
+          await addData();
+        }
+      }
+    });
+  }
+}
+
+/** body ที่บันทึก */
+function sendData() {
+  const valueData: RequestPeriodCompete = {
+    announcementEndDate:
+      dateAnnouncement.value !== null
+        ? dateToISO(dateAnnouncement.value[1])
+        : null,
+    announcementStartDate:
+      dateAnnouncement.value !== null
+        ? dateToISO(dateAnnouncement.value[0])
+        : null,
+    examDate: dateExam.value !== null ? dateToISO(dateExam.value) : null,
+    detail: editor.value,
+    fee: fee.value,
+    id: "",
+    name: name.value,
+    note: note.value,
+    paymentEndDate:
+      datePayment.value !== null ? dateToISO(datePayment.value[1]) : null,
+    paymentStartDate:
+      datePayment.value !== null ? dateToISO(datePayment.value[0]) : null,
+    registerEndDate:
+      dateRegister.value !== null ? dateToISO(dateRegister.value[1]) : null,
+    registerStartDate:
+      dateRegister.value !== null ? dateToISO(dateRegister.value[0]) : null,
+    order: round.value,
+    year: yearly.value,
+    announcementDate:
+      dateAnnounce.value !== null ? dateToISO(dateAnnounce.value) : null,
+  };
+  return valueData;
+}
+
+/**
+ * ลบ เอกสารประกอบ
+ * @param docId id เอกสาร
+ */
+async function deleteDocData(docId: string) {
+  showLoader();
+  await http
+    .delete(config.API.periodDeleteDoc(docId))
+    .then(async () => {
+      await fetchData();
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      hideLoader();
+    });
+}
+
+/**
+ * ลบรูปประกอบ
+ * @param docId id ของรูป
+ */
+async function deleteImgData(docId: string) {
+  showLoader();
+  await http
+    .delete(config.API.periodDeleteImg(docId))
+    .then(async () => {
+      await fetchData();
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      hideLoader();
+    });
+}
+
+/** เพิ่ม รอบสอบแข่งขัน */
+async function addData() {
+  showLoader();
+  await http
+    .post(config.API.savePeriod, sendData())
+    .then(async (res) => {
+      const data = res.data.result;
+      id.value = data.id;
+      await uploadImgData();
+      await uploadDocData();
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      hideLoader();
+    });
+}
+
+/**
+ * บันทึก แก้ไขข้อมูล
+ * @param id
+ */
+async function editData(id: string) {
+  showLoader();
+  await http
+    .put(config.API.editPeriod(id), sendData())
+    .then(async () => {
+      await uploadImgData();
+      await uploadDocData();
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      hideLoader();
+    });
+}
+
+/**
+ * แปลงช่วงวันที่ถ้า2ค่าเป็นวันเดียวกันจะโชววันเดียวแต่ถ้าไม่เท่ากันจะแสดงเป็นช่วง
+ * @param val ช่วงวันที่
+ */
+function dateThaiRange(val: [Date, Date]) {
+  if (val === null) {
+    return "";
+  } else if (date2Thai(val[0], true) === date2Thai(val[1], true)) {
+    return `${date2Thai(val[0], true)}`;
+  } else {
+    return `${date2Thai(val[0], true)} - ${date2Thai(val[1], true)}`;
+  }
+}
+
+watch(organizationShortName, (count: DataOption, prevCount: DataOption) => {
+  organizationNameOptions.value = [];
+});
+
+watch(organizationName, (count: DataOption, prevCount: DataOption) => {
+  positionPathOptions.value = [];
+});
+
+onMounted(async () => {
+  hideLoader();
+  if (route.params.id != undefined) {
+    edit.value = true;
+    id.value = route.params.id.toString();
+    await fetchData();
+  } else {
+    edit.value = false;
+  }
+});
+</script>
+
 <template>
   <div class="toptitle text-dark col-12 row items-center">
     <q-btn
@@ -36,6 +393,7 @@
               label="รอบการสอบ(ครั้ง)"
               dense
               lazy-rules
+              hide-bottom-space
               :rules="[(val) => val > 0 || `${'กรุณากรอกรอบการสอบให้ถูกต้อง'}`]"
             ></q-input>
           </div>
@@ -56,6 +414,7 @@
               <template #trigger>
                 <q-input
                   dense
+                  hide-bottom-space
                   outlined
                   :rules="[(val) => !!val || `${'กรุณาเลือกปีงบประมาณ'}`]"
                   :model-value="yearly + 543"
@@ -77,6 +436,7 @@
             <q-input
               outlined
               v-model="fee"
+              hide-bottom-space
               type="number"
               label="ค่าธรรมเนียม"
               lazy-rules
@@ -655,405 +1015,5 @@
     </q-form>
   </q-card>
 </template>
-<script setup lang="ts">
-import type { QTableProps } from "quasar";
-import { onMounted, ref, watch } from "vue";
-import { useQuasar, QForm } from "quasar";
-import { useCounterMixin } from "@/stores/mixin";
-import { useRouter, useRoute } from "vue-router";
-import type { RequestPeriodCompete } from "@/modules/03_recruiting/interface/request/Period";
-import type {
-  DataOption,
-  UploadType,
-} from "@/modules/02_organizational/interface/index/Main";
-import http from "@/plugins/http";
-import config from "@/app.config";
-
-const $q = useQuasar(); // show dialog
-const mixin = useCounterMixin();
-const router = useRouter();
-const route = useRoute();
-const { date2Thai, success, dateToISO, notifyError, showLoader, hideLoader } =
-  mixin;
-const myForm = ref<QForm | null>(null); //form data input
-const name = ref<string>("");
-const note = ref<string>("");
-const editor = ref<string>("");
-const announcementExam = ref<boolean>(true);
-const fee = ref<number>(0);
-const round = ref<number>(1);
-const yearly = ref<number>(new Date().getFullYear());
-const dateRegister = ref<[Date, Date] | null>(null); //วันที่สมัคร
-const datePayment = ref<[Date, Date] | null>(null); //วันที่จ่ายเงิน
-const dateAnnouncement = ref<[Date, Date] | null>(null); //วันที่ประกาศ
-const dateExam = ref<Date | null>(null); //วันที่สอบ
-const dateAnnounce = ref<Date | null>(null); //วันที่ประกาศผล
-const positionPathOptions = ref<DataOption[]>([]);
-const organizationShortName = ref<DataOption>({ id: "", name: "" });
-const organizationName = ref<DataOption>({ id: "", name: "" });
-const organizationNameOptions = ref<DataOption[]>([]);
-const { messageError } = mixin;
-const fileDocDataUpload = ref<File[]>([]);
-const fileDocs = ref<UploadType[]>([]);
-const fileImgDataUpload = ref<File[]>([]);
-const fileImgs = ref<UploadType[]>([]);
-const id = ref<string>("");
-const pay = ref<string>("");
-const edit = ref<boolean>(false);
-const columnsPayment = ref<QTableProps["columns"]>([
-  {
-    name: "accountNumber",
-    align: "left",
-    label: "เลขบัญชี",
-    sortable: true,
-    field: "accountNumber",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, {
-        numeric: true,
-        sensitivity: "base",
-      }),
-  },
-  {
-    name: "bankName",
-    align: "left",
-    label: "ธนาคาร",
-    sortable: true,
-    field: "bankName",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, {
-        numeric: true,
-        sensitivity: "base",
-      }),
-  },
-  {
-    name: "accountName",
-    align: "left",
-    label: "ชื่อบัญชี",
-    sortable: true,
-    field: "accountName",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, {
-        numeric: true,
-        sensitivity: "base",
-      }),
-  },
-]);
-const visibleColumnsPosition = ref<String[]>(["position", "type"]);
-const columnsPosition = ref<QTableProps["columns"]>([
-  {
-    name: "position",
-    align: "left",
-    label: "ตำแหน่ง",
-    sortable: true,
-    field: "position",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, {
-        numeric: true,
-        sensitivity: "base",
-      }),
-  },
-  {
-    name: "type",
-    align: "left",
-    label: "ประเภทแบบฟอร์ม",
-    sortable: true,
-    field: "type",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, {
-        numeric: true,
-        sensitivity: "base",
-      }),
-  },
-]);
-
-watch(organizationShortName, (count: DataOption, prevCount: DataOption) => {
-  organizationNameOptions.value = [];
-});
-
-watch(organizationName, (count: DataOption, prevCount: DataOption) => {
-  positionPathOptions.value = [];
-});
-
-onMounted(async () => {
-  hideLoader();
-  if (route.params.id != undefined) {
-    edit.value = true;
-    id.value = route.params.id.toString();
-    await fetchData();
-  } else {
-    edit.value = false;
-  }
-});
-
-const clickBack = () => {
-  router.push({ name: "competePeriod" });
-};
-
-const fetchData = async () => {
-  showLoader();
-  await http
-    .get(config.API.getPeriodById(id.value))
-    .then((res) => {
-      const data = res.data.result.periods;
-      const images = res.data.result.images;
-      const files = res.data.result.files;
-
-      id.value = data.id;
-      name.value = data.name;
-      round.value = data.order;
-      yearly.value = data.year;
-      fee.value = data.fee;
-      dateAnnouncement.value =
-        data.announcementStartDate != null && data.announcementEndDate != null
-          ? [
-              new Date(data.announcementStartDate),
-              new Date(data.announcementEndDate),
-            ]
-          : null;
-      dateExam.value = data.examDate != null ? new Date(data.examDate) : null;
-      dateRegister.value =
-        data.registerStartDate != null && data.registerEndDate != null
-          ? [new Date(data.registerStartDate), new Date(data.registerEndDate)]
-          : null;
-      datePayment.value =
-        data.paymentStartDate != null && data.paymentEndDate != null
-          ? [new Date(data.paymentStartDate), new Date(data.paymentEndDate)]
-          : null;
-
-      editor.value = data.detail;
-      note.value = data.note;
-      dateAnnounce.value =
-        data.announcementDate != null ? new Date(data.announcementDate) : null;
-
-      fileDocs.value = files;
-      fileImgs.value = images;
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-};
-
-const fileUploadDoc = async (files: any) => {
-  files.forEach((file: any) => {
-    fileDocDataUpload.value.push(file);
-  });
-};
-
-const fileRemoveDoc = async (files: any) => {
-  files.forEach((file: any) => {
-    const index = fileDocDataUpload.value.findIndex(
-      (x: any) => x.__key == file.__key
-    );
-    if (index > -1) {
-      fileDocDataUpload.value.splice(index, 1);
-    }
-  });
-};
-
-const uploadDocData = async () => {
-  const formData = new FormData();
-  if (fileDocDataUpload.value.length > 0) {
-    fileDocDataUpload.value.forEach((file: any) => {
-      formData.append("", file);
-    });
-    showLoader();
-    await http
-      .put(config.API.periodRecruitDoc(id.value), formData)
-      .then((res) => {})
-      .catch((e) => {
-        messageError($q, e);
-      })
-      .finally(async () => {
-        hideLoader();
-        success($q, "บันทึกข้อมูลสำเร็จ");
-        clickBack();
-      });
-  } else {
-    success($q, "บันทึกข้อมูลสำเร็จ");
-    clickBack();
-  }
-};
-
-const uploadImgData = async () => {
-  if (fileImgDataUpload.value.length > 0) {
-    const formData = new FormData();
-    fileImgDataUpload.value.forEach((file: any) => {
-      formData.append("", file);
-    });
-    showLoader();
-    await http
-      .put(config.API.periodRecruitImg(id.value), formData)
-      .then((res) => {})
-      .catch((e) => {
-        messageError($q, e);
-      })
-      .finally(async () => {
-        hideLoader();
-      });
-  }
-};
-
-const fileUploadImg = async (files: any) => {
-  files.forEach((file: any) => {
-    fileImgDataUpload.value.push(file);
-  });
-};
-
-const fileRemoveImg = async (files: any) => {
-  files.forEach((file: any) => {
-    const index = fileImgDataUpload.value.findIndex(
-      (x: any) => x.__key == file.__key
-    );
-    if (index > -1) {
-      fileImgDataUpload.value.splice(index, 1);
-    }
-  });
-};
-
-const downloadData = async (path: string) => {
-  window.open(path);
-};
-
-const updateYear = async (e: number) => {
-  yearly.value = e;
-};
-
-const checkSave = async () => {
-  if (myForm.value !== null) {
-    myForm.value.validate().then(async (success) => {
-      if (success) {
-        if (edit.value) {
-          await editData(id.value);
-        } else {
-          await addData();
-        }
-      }
-    });
-  }
-};
-
-const sendData = () => {
-  const valueData: RequestPeriodCompete = {
-    announcementEndDate:
-      dateAnnouncement.value !== null
-        ? dateToISO(dateAnnouncement.value[1])
-        : null,
-    announcementStartDate:
-      dateAnnouncement.value !== null
-        ? dateToISO(dateAnnouncement.value[0])
-        : null,
-    examDate: dateExam.value !== null ? dateToISO(dateExam.value) : null,
-    detail: editor.value,
-    fee: fee.value,
-    id: "",
-    name: name.value,
-    note: note.value,
-    paymentEndDate:
-      datePayment.value !== null ? dateToISO(datePayment.value[1]) : null,
-    paymentStartDate:
-      datePayment.value !== null ? dateToISO(datePayment.value[0]) : null,
-    registerEndDate:
-      dateRegister.value !== null ? dateToISO(dateRegister.value[1]) : null,
-    registerStartDate:
-      dateRegister.value !== null ? dateToISO(dateRegister.value[0]) : null,
-    order: round.value,
-    year: yearly.value,
-    announcementDate:
-      dateAnnounce.value !== null ? dateToISO(dateAnnounce.value) : null,
-  };
-  return valueData;
-};
-
-const deleteDocData = async (docId: string) => {
-  showLoader();
-  await http
-    .delete(config.API.periodDeleteDoc(docId))
-    .then(async () => {
-      await fetchData();
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      hideLoader();
-    });
-};
-
-const deleteImgData = async (docId: string) => {
-  showLoader();
-  await http
-    .delete(config.API.periodDeleteImg(docId))
-    .then(async () => {
-      await fetchData();
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      hideLoader();
-    });
-};
-
-const addData = async () => {
-  showLoader();
-  await http
-    .post(config.API.savePeriod, sendData())
-    .then(async (res) => {
-      const data = res.data.result;
-      id.value = data.id;
-      await uploadImgData();
-      await uploadDocData();
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      hideLoader();
-    });
-};
-
-const editData = async (id: string) => {
-  showLoader();
-  await http
-    .put(config.API.editPeriod(id), sendData())
-    .then(async () => {
-      await uploadImgData();
-      await uploadDocData();
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      hideLoader();
-    });
-};
-
-/**
- * แปลงช่วงวันที่ถ้า2ค่าเป็นวันเดียวกันจะโชววันเดียวแต่ถ้าไม่เท่ากันจะแสดงเป็นช่วง
- * @param val ช่วงวันที่
- */
-const dateThaiRange = (val: [Date, Date]) => {
-  if (val === null) {
-    return "";
-  } else if (date2Thai(val[0], true) === date2Thai(val[1], true)) {
-    return `${date2Thai(val[0], true)}`;
-  } else {
-    return `${date2Thai(val[0], true)} - ${date2Thai(val[1], true)}`;
-  }
-};
-</script>
 
 <style></style>
diff --git a/src/modules/03_recruiting/views/01_compete/PeriodStat.vue b/src/modules/03_recruiting/views/01_compete/PeriodStat.vue
index 8dfad847f..f81f45ba7 100644
--- a/src/modules/03_recruiting/views/01_compete/PeriodStat.vue
+++ b/src/modules/03_recruiting/views/01_compete/PeriodStat.vue
@@ -1,15 +1,4 @@
 <!-- page:จัดการรอบการสอบ สรรหา -->
-<template>
-  <div class="toptitle text-dark col-12 row items-center">
-    สถิติสมัครสอบแข่งขัน
-  </div>
-  <q-card flat bordered class="col-12 q-mt-sm q-px-md q-py-sm">
-    <iframe
-      :src="panelUrl"
-      style="height: 80vh; width: 100%; border: none; overflow: hidden"
-    ></iframe>
-  </q-card>
-</template>
 <script setup lang="ts">
 import config from "@/app.config";
 import { ref, onBeforeMount } from "vue";
@@ -21,4 +10,16 @@ onBeforeMount(async () => {
 });
 </script>
 
+<template>
+  <div class="toptitle text-dark col-12 row items-center">
+    สถิติสมัครสอบแข่งขัน
+  </div>
+  <q-card flat bordered class="col-12 q-mt-sm q-px-md q-py-sm">
+    <iframe
+      :src="panelUrl"
+      style="height: 80vh; width: 100%; border: none; overflow: hidden"
+    ></iframe>
+  </q-card>
+</template>
+
 <style></style>
diff --git a/src/modules/03_recruiting/views/02_qualify/DisableDetail.vue b/src/modules/03_recruiting/views/02_qualify/DisableDetail.vue
index 5ffd5bd5b..6a0c1dfec 100644
--- a/src/modules/03_recruiting/views/02_qualify/DisableDetail.vue
+++ b/src/modules/03_recruiting/views/02_qualify/DisableDetail.vue
@@ -1,145 +1,32 @@
 <!-- page:detail page สรรหา -->
-<template>
-  <div class="toptitle text-dark col-12 row items-center">
-    <q-btn
-      icon="mdi-arrow-left"
-      unelevated
-      round
-      dense
-      flat
-      color="primary"
-      class="q-mr-sm"
-      @click="router.go(-1)"
-    />
-    รายชื่อผู้สมัครสอบรอบ {{ name }} ครั้งที่ {{ round }}/{{ year }}
-    <q-space />
-    <q-btn
-      size="md"
-      icon="mdi-content-save-move-outline"
-      round
-      flat
-      color="indigo"
-      v-if="rows.length > 0"
-      @click="candidateToPlacement"
-    >
-      <q-tooltip>บรรจุผู้ผ่านการคัดเลือกผู้พิการ</q-tooltip>
-    </q-btn>
-    <q-btn class="bg-teal-1" icon="mdi-download" round color="primary" flat>
-      <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
-      <q-menu>
-        <q-list style="min-width: 100px">
-          <q-item clickable v-close-popup @click="downloadExam()">
-            <q-item-section class="text-blue"
-              >ส่งออกข้อมูลผู้มีสิทธิ์สอบ</q-item-section
-            >
-          </q-item>
-          <q-item clickable v-close-popup @click="downloadPassExam()">
-            <q-item-section class="text-primary"
-              >ส่งออกข้อมูลผู้สอบผ่านภาค ก.</q-item-section
-            >
-          </q-item>
-          <q-item clickable v-close-popup @click="downloadPassResultExam()">
-            <q-item-section class="text-amber-9"
-              >ส่งออกข้อมูลผู้คัดเลือกคนพิการได้</q-item-section
-            >
-          </q-item>
-        </q-list>
-      </q-menu>
-    </q-btn>
-  </div>
-  <q-card flat bordered class="col-12 row q-mt-sm q-pt-sm q-pa-md">
-    <div class="col-12">
-      <Table
-        :count="count"
-        :pass="pass"
-        :notpass="notpass"
-        :rows="rows"
-        :columns="columns"
-        :filter="filter"
-        :visible-columns="visibleColumns"
-        v-model:inputfilter="filter"
-        v-model:inputvisible="visibleColumns"
-        :nornmalData="false"
-        :conclude="true"
-      >
-        <template #columns="props">
-          <q-tr :props="props" class="cursor-pointer">
-            <q-td
-              v-for="col in props.cols"
-              :key="col.name"
-              :props="props"
-              @click="clickDetail(props.row.examID)"
-            >
-              <div v-if="col.name == 'no'">
-                {{ props.rowIndex + 1 }}
-              </div>
-              <div v-else-if="col.name == 'fullname'">
-                <div class="row col-12 items-center">
-                  <img
-                    :src="props.row.avatar"
-                    class="q-mr-sm col-4"
-                    style="width: 28px; height: 28px; border-radius: 50%"
-                  />
-                  <div class="col-4">
-                    <div class="text-weight-medium">
-                      {{ props.row.fullname }}
-                    </div>
-                    <div class="text-weight-light">
-                      {{ props.row.citizenId }}
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div v-else-if="col.name == 'c1'">
-                <q-checkbox disable v-model="props.row.c1" />
-              </div>
-              <div v-else-if="col.name == 'c2'">
-                <q-checkbox disable v-model="props.row.c2" />
-              </div>
-              <div v-else-if="col.name == 'c3'">
-                <q-checkbox disable v-model="props.row.c3" />
-              </div>
-              <div v-else-if="col.name == 'c4'">
-                <q-checkbox disable v-model="props.row.c4" />
-              </div>
-              <div v-else-if="col.name == 'c5'">
-                <q-checkbox disable v-model="props.row.c5" />
-              </div>
-              <div v-else>
-                {{ col.value }}
-              </div>
-            </q-td>
-          </q-tr>
-        </template>
-      </Table>
-    </div>
-  </q-card>
-</template>
 <script setup lang="ts">
 import type { QTableProps } from "quasar";
 import { ref, onMounted } from "vue";
 import { useRouter, useRoute } from "vue-router";
-import type { RecruitDetailResponse } from "@/modules/03_recruiting/interface/response/Period";
-import Table from "@/modules/03_recruiting/components/Table.vue";
+import { useQuasar } from "quasar";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
 import { useCounterMixin } from "@/stores/mixin";
-import { useQuasar } from "quasar";
+
+import type { RecruitDetailResponse } from "@/modules/03_recruiting/interface/response/Period";
+import Table from "@/modules/03_recruiting/components/Table.vue";
 
 const $q = useQuasar();
+const router = useRouter();
+const route = useRoute();
+const mixin = useCounterMixin();
+const { messageError, success, showLoader, hideLoader } = mixin;
 
 const year = ref<string>("2566");
 const round = ref<string>("1");
 const name = ref<string>("");
-const router = useRouter();
-const route = useRoute();
+
 const count = ref<number>(0);
 const pass = ref<number>(0);
 const notpass = ref<number>(0);
 const importId = ref<string>(route.params.id as string); // Period Import Id
-const mixin = useCounterMixin();
-const { messageError, success, showLoader, hideLoader } = mixin;
+
 const filter = ref<string>(""); //search data table
 const visibleColumns = ref<String[]>([
   "examID",
@@ -321,17 +208,18 @@ const columns = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
-const rows = ref<any[]>([]);
-const clickDetail = (examID: string) => {
+const rows = ref<RecruitDetailResponse[]>([]);
+
+/**
+ * ไปหน้ารายละเอียด จัดการรอบคัดเลือกคนพิการ
+ * @param examID id รอบ
+ */
+function clickDetail(examID: string) {
   router.push(`/disable/import/${importId.value}/${examID}`);
-};
+}
 
-onMounted(async () => {
-  hideLoader();
-  await fetchData();
-});
-
-const downloadExam = async () => {
+/** ส่งออกข้อมูลผู้มีสิทธิ์สอบ */
+async function downloadExam() {
   showLoader();
   await http
     .get(config.API.exportDisableExam(importId.value), {
@@ -350,9 +238,10 @@ const downloadExam = async () => {
     .finally(() => {
       hideLoader();
     });
-};
+}
 
-const downloadPassExam = async () => {
+/** ส่งออกข้อมูลผู้สอบผ่านภาค */
+async function downloadPassExam() {
   showLoader();
   await http
     .get(config.API.exportDisablePassExam(importId.value), {
@@ -371,9 +260,10 @@ const downloadPassExam = async () => {
     .finally(() => {
       hideLoader();
     });
-};
+}
 
-const downloadPassResultExam = async () => {
+/** ส่งออกข้อมูลผู้คัดเลือกคนพิการได้ */
+async function downloadPassResultExam() {
   showLoader();
   await http
     .get(config.API.exportDisablePassResultExam(importId.value), {
@@ -392,9 +282,10 @@ const downloadPassResultExam = async () => {
     .finally(() => {
       hideLoader();
     });
-};
+}
 
-const fetchData = async () => {
+/** ดึงข้อมูลรายละเอียด */
+async function fetchData() {
   showLoader();
   await http
     .post(config.API.getDisableExamResultById(importId.value), {
@@ -428,9 +319,10 @@ const fetchData = async () => {
     .finally(() => {
       hideLoader();
     });
-};
+}
 
-const candidateToPlacement = async () => {
+/** บรรจุผู้ผ่านการคัดเลือกผู้พิการ */
+async function candidateToPlacement() {
   $q.dialog({
     title: "ยืนยันการนำผู้ผ่านคัดเลือกคนพิการเข้าสู่ระบบบรรจุ",
     message: "ต้องการนำผู้ผ่านคัดเลือกคนพิการเข้าสู่ระบบบรรจุใช่หรือไม่?",
@@ -457,7 +349,129 @@ const candidateToPlacement = async () => {
     })
     .onCancel(() => {})
     .onDismiss(() => {});
-};
+}
+
+onMounted(async () => {
+  hideLoader();
+  await fetchData();
+});
 </script>
 
+<template>
+  <div class="toptitle text-dark col-12 row items-center">
+    <q-btn
+      icon="mdi-arrow-left"
+      unelevated
+      round
+      dense
+      flat
+      color="primary"
+      class="q-mr-sm"
+      @click="router.go(-1)"
+    />
+    รายชื่อผู้สมัครสอบรอบ {{ name }} ครั้งที่ {{ round }}/{{ year }}
+    <q-space />
+    <q-btn
+      size="md"
+      icon="mdi-content-save-move-outline"
+      round
+      flat
+      color="indigo"
+      v-if="rows.length > 0"
+      @click="candidateToPlacement"
+    >
+      <q-tooltip>บรรจุผู้ผ่านการคัดเลือกผู้พิการ</q-tooltip>
+    </q-btn>
+    <q-btn class="bg-teal-1" icon="mdi-download" round color="primary" flat>
+      <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
+      <q-menu>
+        <q-list style="min-width: 100px">
+          <q-item clickable v-close-popup @click="downloadExam()">
+            <q-item-section class="text-blue"
+              >ส่งออกข้อมูลผู้มีสิทธิ์สอบ</q-item-section
+            >
+          </q-item>
+          <q-item clickable v-close-popup @click="downloadPassExam()">
+            <q-item-section class="text-primary"
+              >ส่งออกข้อมูลผู้สอบผ่านภาค ก.</q-item-section
+            >
+          </q-item>
+          <q-item clickable v-close-popup @click="downloadPassResultExam()">
+            <q-item-section class="text-amber-9"
+              >ส่งออกข้อมูลผู้คัดเลือกคนพิการได้</q-item-section
+            >
+          </q-item>
+        </q-list>
+      </q-menu>
+    </q-btn>
+  </div>
+  <q-card flat bordered class="col-12 row q-mt-sm q-pt-sm q-pa-md">
+    <div class="col-12">
+      <Table
+        :count="count"
+        :pass="pass"
+        :notpass="notpass"
+        :rows="rows"
+        :columns="columns"
+        :filter="filter"
+        :visible-columns="visibleColumns"
+        v-model:inputfilter="filter"
+        v-model:inputvisible="visibleColumns"
+        :nornmalData="false"
+        :conclude="true"
+      >
+        <template #columns="props">
+          <q-tr :props="props" class="cursor-pointer">
+            <q-td
+              v-for="col in props.cols"
+              :key="col.name"
+              :props="props"
+              @click="clickDetail(props.row.examID)"
+            >
+              <div v-if="col.name == 'no'">
+                {{ props.rowIndex + 1 }}
+              </div>
+              <div v-else-if="col.name == 'fullname'">
+                <div class="row col-12 items-center">
+                  <img
+                    :src="props.row.avatar"
+                    class="q-mr-sm col-4"
+                    style="width: 28px; height: 28px; border-radius: 50%"
+                  />
+                  <div class="col-4">
+                    <div class="text-weight-medium">
+                      {{ props.row.fullname }}
+                    </div>
+                    <div class="text-weight-light">
+                      {{ props.row.citizenId }}
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div v-else-if="col.name == 'c1'">
+                <q-checkbox disable v-model="props.row.c1" />
+              </div>
+              <div v-else-if="col.name == 'c2'">
+                <q-checkbox disable v-model="props.row.c2" />
+              </div>
+              <div v-else-if="col.name == 'c3'">
+                <q-checkbox disable v-model="props.row.c3" />
+              </div>
+              <div v-else-if="col.name == 'c4'">
+                <q-checkbox disable v-model="props.row.c4" />
+              </div>
+              <div v-else-if="col.name == 'c5'">
+                <q-checkbox disable v-model="props.row.c5" />
+              </div>
+              <div v-else>
+                {{ col.value }}
+              </div>
+            </q-td>
+          </q-tr>
+        </template>
+      </Table>
+    </div>
+  </q-card>
+</template>
+
 <style></style>
diff --git a/src/modules/03_recruiting/views/02_qualify/DisableDetailEx.vue b/src/modules/03_recruiting/views/02_qualify/DisableDetailEx.vue
index 79442ce4d..74c9b65ef 100644
--- a/src/modules/03_recruiting/views/02_qualify/DisableDetailEx.vue
+++ b/src/modules/03_recruiting/views/02_qualify/DisableDetailEx.vue
@@ -1,4 +1,139 @@
 <!-- page:detail page สรรหา -->
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import { useRouter, useRoute } from "vue-router";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar } from "quasar";
+
+const $q = useQuasar();
+
+const router = useRouter();
+const route = useRoute();
+const mixin = useCounterMixin();
+const { messageError, showLoader, hideLoader } = mixin;
+
+const profile_id = ref<string>("");
+const birthdate = ref<string>("");
+const gender = ref<string>("");
+const university = ref<string>("");
+const position_name = ref<string>("");
+const degree = ref<string>("");
+const major = ref<string>("");
+const cert_issuedate = ref<string>("");
+const examAttribute = ref<string>("");
+const examResultinscore = ref<string>("");
+const scoreAFull = ref<string>("");
+const scoreA = ref<string>("");
+const scoreBFull = ref<string>("");
+const scoreB = ref<string>("");
+const scoreCFull = ref<string>("");
+const scoreC = ref<string>("");
+const scoreSumFull = ref<string>("");
+const scoreSum = ref<string>("");
+const examOrder = ref<string>("");
+const number = ref<string>("");
+const score_expired = ref<string>("");
+const examID = ref<string>("62150001");
+const prefix = ref<string>("นาย");
+const fullname = ref<string>("เกียรติศักดิ์ บัณฑิต");
+const importId = ref<string>(route.params.id as string); // Period Import Id
+const examId = ref<string>(route.params.examId as string); // เลขประจำตัวสอบ
+
+async function fetchData() {
+  showLoader();
+  await http
+    .get(config.API.getDisableExamDetail(importId.value, examId.value))
+    .then((res) => {
+      let data = res.data.result.data;
+      if (data != null) {
+        profile_id.value = data.profileID;
+        examID.value = data.examID;
+        prefix.value = data.prefix;
+        fullname.value = data.fullName;
+        birthdate.value = data.dateOfBirth;
+        gender.value = data.gender;
+        degree.value = data.degree;
+        major.value = data.major;
+        university.value = data.university;
+        position_name.value = data.positionName;
+        cert_issuedate.value = data.certificateIssueDate;
+        examAttribute.value = data.examAttribute;
+        number.value = data.number;
+        examOrder.value = data.examOrder;
+        score_expired.value = data.scoreExpire;
+        if (data.scoreResult != null) {
+          scoreAFull.value = data.scoreResult.scoreAFull;
+          scoreA.value = data.scoreResult.scoreA;
+          scoreBFull.value = data.scoreResult.scoreBFull;
+          scoreB.value = data.scoreResult.scoreB;
+          scoreCFull.value = data.scoreResult.scoreCFull;
+          scoreC.value = data.scoreResult.scoreC;
+          scoreSumFull.value = data.scoreResult.scoreSumFull;
+          scoreSum.value = data.scoreResult.scoreSum;
+          examResultinscore.value = data.scoreResult.examResult;
+        }
+      }
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+async function downloadScore() {
+  showLoader();
+  await http
+    .get(config.API.downloadDisableScoreReport(importId.value, examId.value), {
+      responseType: "blob",
+    })
+    .then((res) => {
+      var a = document.createElement("a");
+      a.href = URL.createObjectURL(res.data);
+      a.download = `ผลคะแนน_${examId.value}.pdf`;
+      // start download
+      a.click();
+    })
+    .catch(async (e) => {
+      messageError($q, JSON.parse(await e.response.data.text()));
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+async function downloadCertificate() {
+  showLoader();
+  await http
+    .get(
+      config.API.downloadDisableExamReport(importId.value, examId.value, 2),
+      {
+        responseType: "blob",
+      }
+    )
+    .then((res) => {
+      var a = document.createElement("a");
+      a.href = URL.createObjectURL(res.data);
+      a.download = `เอกสารรับรอง_${examId.value}.pdf`;
+      // start download
+      a.click();
+    })
+    .catch(async (e) => {
+      messageError($q, JSON.parse(await e.response.data.text()));
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+onMounted(async () => {
+  await fetchData();
+});
+</script>
 <template>
   <div class="toptitle text-dark col-12 row items-center">
     <q-btn
@@ -228,148 +363,5 @@
     </div>
   </q-card>
 </template>
-<script setup lang="ts">
-import type { QTableProps } from "quasar";
-import { ref, onMounted } from "vue";
-import { useRouter, useRoute } from "vue-router";
-
-import http from "@/plugins/http";
-import config from "@/app.config";
-import { useCounterMixin } from "@/stores/mixin";
-import { useQuasar } from "quasar";
-
-const $q = useQuasar();
-
-const router = useRouter();
-const route = useRoute();
-const mixin = useCounterMixin();
-const { messageError, showLoader, hideLoader } = mixin;
-
-const date = ref<any>();
-const profile_id = ref<string>("");
-const birthdate = ref<string>("");
-const gender = ref<string>("");
-const university = ref<string>("");
-const position_name = ref<string>("");
-const degree = ref<string>("");
-const major = ref<string>("");
-const cert_issuedate = ref<string>("");
-const examAttribute = ref<string>("");
-const checkbox = false;
-const remarkText = ref<string>("");
-const examResultinscore = ref<string>("");
-const scoreAFull = ref<string>("");
-const scoreA = ref<string>("");
-const scoreBFull = ref<string>("");
-const scoreB = ref<string>("");
-const scoreCFull = ref<string>("");
-const scoreC = ref<string>("");
-const scoreSumFull = ref<string>("");
-const scoreSum = ref<string>("");
-const examOrder = ref<string>("");
-const number = ref<string>("");
-const score_expired = ref<string>("");
-const attachments = ref<any>([
-  { fileName: "เอกสารประกอบ 1" },
-  { fileName: "เอกสารประกอบ 2" },
-]);
-const examID = ref<string>("62150001");
-const prefix = ref<string>("นาย");
-const fullname = ref<string>("เกียรติศักดิ์ บัณฑิต");
-const importId = ref<string>(route.params.id as string); // Period Import Id
-const examId = ref<string>(route.params.examId as string); // เลขประจำตัวสอบ
-
-onMounted(async () => {
-  await fetchData();
-});
-
-const fetchData = async () => {
-  showLoader();
-  await http
-    .get(config.API.getDisableExamDetail(importId.value, examId.value))
-    .then((res) => {
-      let data = res.data.result.data;
-      if (data != null) {
-        profile_id.value = data.profileID;
-        examID.value = data.examID;
-        prefix.value = data.prefix;
-        fullname.value = data.fullName;
-        birthdate.value = data.dateOfBirth;
-        gender.value = data.gender;
-        degree.value = data.degree;
-        major.value = data.major;
-        university.value = data.university;
-        position_name.value = data.positionName;
-        cert_issuedate.value = data.certificateIssueDate;
-        examAttribute.value = data.examAttribute;
-        number.value = data.number;
-        examOrder.value = data.examOrder;
-        score_expired.value = data.scoreExpire;
-        if (data.scoreResult != null) {
-          scoreAFull.value = data.scoreResult.scoreAFull;
-          scoreA.value = data.scoreResult.scoreA;
-          scoreBFull.value = data.scoreResult.scoreBFull;
-          scoreB.value = data.scoreResult.scoreB;
-          scoreCFull.value = data.scoreResult.scoreCFull;
-          scoreC.value = data.scoreResult.scoreC;
-          scoreSumFull.value = data.scoreResult.scoreSumFull;
-          scoreSum.value = data.scoreResult.scoreSum;
-          examResultinscore.value = data.scoreResult.examResult;
-        }
-      }
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-};
-
-const downloadScore = async () => {
-  showLoader();
-  await http
-    .get(config.API.downloadDisableScoreReport(importId.value, examId.value), {
-      responseType: "blob",
-    })
-    .then((res) => {
-      var a = document.createElement("a");
-      a.href = URL.createObjectURL(res.data);
-      a.download = `ผลคะแนน_${examId.value}.pdf`;
-      // start download
-      a.click();
-    })
-    .catch(async (e) => {
-      messageError($q, JSON.parse(await e.response.data.text()));
-    })
-    .finally(() => {
-      hideLoader();
-    });
-};
-
-const downloadCertificate = async () => {
-  showLoader();
-  await http
-    .get(
-      config.API.downloadDisableExamReport(importId.value, examId.value, 2),
-      {
-        responseType: "blob",
-      }
-    )
-    .then((res) => {
-      var a = document.createElement("a");
-      a.href = URL.createObjectURL(res.data);
-      a.download = `เอกสารรับรอง_${examId.value}.pdf`;
-      // start download
-      a.click();
-    })
-    .catch(async (e) => {
-      messageError($q, JSON.parse(await e.response.data.text()));
-    })
-    .finally(() => {
-      hideLoader();
-    });
-};
-</script>
 
 <style></style>
diff --git a/src/modules/03_recruiting/views/02_qualify/DisablePeriod.vue b/src/modules/03_recruiting/views/02_qualify/DisablePeriod.vue
index 2268cdcbe..053d6ae34 100644
--- a/src/modules/03_recruiting/views/02_qualify/DisablePeriod.vue
+++ b/src/modules/03_recruiting/views/02_qualify/DisablePeriod.vue
@@ -1,4 +1,382 @@
 <!-- page:จัดการรอบการสอบ สรรหา -->
+<script setup lang="ts">
+import type { QTableProps } from "quasar";
+import { onMounted, ref } from "vue";
+import { useRouter } from "vue-router";
+import { useQuasar } from "quasar";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
+import { checkPermission } from "@/utils/permissions";
+
+import type {
+  ResponseRecruitPeriod,
+  ResponseHistoryObject,
+} from "@/modules/03_recruiting/interface/response/Period";
+import type { Pagination } from "@/modules/03_recruiting/interface/index/Main";
+
+import Table from "@/modules/03_recruiting/components/Table.vue";
+import DialogHeader from "@/components/DialogHeader.vue";
+import HistoryTable from "@/components/TableHistory.vue";
+
+const $q = useQuasar(); // show dialog
+const router = useRouter();
+const mixin = useCounterMixin();
+const { success, dateText, messageError, showLoader, hideLoader } = mixin;
+
+const name = ref<string>("");
+const year = ref<number>(new Date().getFullYear() + 543);
+const round = ref<number>(1);
+const files = ref<any>(null);
+const files_score = ref<any>(null);
+const files_candidate = ref<any>(null);
+const modalAdd = ref<boolean>(false);
+const modalScore = ref<boolean>(false);
+const modalCandidate = ref<boolean>(false);
+const selected_row_id = ref<string>("");
+const rowsHistory = ref<ResponseHistoryObject[]>([]); //select data history
+const tittleHistory = ref<string>("ประวัติการนำเข้าข้อมูล"); //
+const modalHistory = ref<boolean>(false); //modal ประวัติการแก้ไขข้อมูล
+const rows = ref<any[]>([]);
+const filter = ref<string>(""); //search data table
+const textTittle = ref<string>("");
+const textTittleScore = ref<string>("");
+const textTittleCandidate = ref<string>("");
+const initialPagination = ref<Pagination>({
+  rowsPerPage: 0,
+});
+const visibleColumns = ref<String[]>([
+  "no",
+  "name",
+  "round",
+  "year",
+  "examCount",
+  "scoreCount",
+]);
+
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: false,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "name",
+    align: "left",
+    label: "รอบคัดเลือกคนพิการ",
+    sortable: true,
+    field: "name",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "round",
+    align: "left",
+    label: "ครั้งที่",
+    sortable: true,
+    field: "round",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "year",
+    align: "left",
+    label: "ปีงบประมาณ",
+    sortable: true,
+    field: "year",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "examCount",
+    label: "จำนวนผู้สอบทั้งหมด",
+    align: "right",
+    field: "examCount",
+    sortable: true,
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "scoreCount",
+    label: "จำนวนที่บันทึกผลสอบ",
+    align: "right",
+    field: "scoreCount",
+    sortable: true,
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+
+const columnsHistory = ref<QTableProps["columns"]>([
+  {
+    name: "description",
+    align: "left",
+    label: "รายละเอียด",
+    sortable: true,
+    field: "description",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "createdAt",
+    align: "center",
+    label: "วันที่ดำเนินการ",
+    sortable: true,
+    field: "createdAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "createdFullName",
+    align: "left",
+    label: "ผู้ดำเนินการ",
+    sortable: true,
+    field: "createdFullName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+
+const visibleColumnsHistory = ref<String[]>([
+  "description",
+  "createdAt",
+  "createdFullName",
+]);
+
+/**  ดาวน์โหลดรายชื่อผู้สอบคัดเลือกคนพิการได้ */
+function clickPassExam(id: string) {
+  window.open(config.API.exportDisablePassExamList(id));
+}
+
+/** ดาวน์โหลดรายชื่อผู้มีสิทธิ์สอบ */
+function clickCandidateList(id: string) {
+  window.open(config.API.exportDisableCandidateList(id));
+}
+
+/**
+ * ฟังก์ชันแปลง date เป็นภาษาไทย
+ * @param value วันที่ type datetime ที่จะแปลงเป็นไทย
+ */
+function textDate(value: Date) {
+  return dateText(value);
+}
+
+/** ดึง list ข้อมูล */
+async function fetchData() {
+  showLoader();
+  await http
+    .get(config.API.getDisableCandidates)
+    .then((res) => {
+      const data = res.data.result;
+      let result: ResponseRecruitPeriod[] = [];
+      if (data.length > 0) {
+        data.map((r: ResponseRecruitPeriod) => {
+          if (r.score != null) {
+            r.scoreCount = r.score.scoreCount;
+            r.scoreImportDate = r.score.importDate;
+          }
+          result.push(r);
+        });
+      }
+
+      rows.value = result;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/**
+ * ไปหน้ารายละเอียด
+ * @param id รอบการคัดเลือก
+ */
+function clickDetail(id: string) {
+  router.push(`/disable/import/${id}`);
+}
+
+/** นำเข้าไฟล์ผลคะแนนสอบ */
+async function clickEdit(id: string) {
+  modalScore.value = true;
+  textTittleScore.value = "นำเข้าผลการคัดเลือกคนพิการ";
+  selected_row_id.value = id;
+}
+
+/** นำเข้าไฟล์ผู้สมัครสอบ */
+async function clickUpload(id: string) {
+  modalCandidate.value = true;
+  textTittleCandidate.value = "นำเข้าผู้สมัครคัดเลือกคนพิการ";
+  selected_row_id.value = id;
+}
+
+/** ไปหน้าแก้ไข */
+function clickEditPeriod(id: string) {
+  router.push(`/disable/period/${id}`);
+}
+
+/** เปิด ประวัติ */
+async function clickHistory(id: string) {
+  modalHistory.value = true;
+  showLoader();
+  await http
+    .get(config.API.getDisableImportHistory(id))
+    .then((res) => {
+      const data = res.data.result;
+      rowsHistory.value = [];
+      if (data.length > 0) {
+        data.map((i: ResponseHistoryObject) => {
+          rowsHistory.value.push({
+            createdAt: i.createdAt,
+            createdFullName: i.createdFullName,
+            createdUserId: i.createdUserId,
+            id: i.id,
+            isActive: i.isActive,
+            lastUpdateFullName: i.lastUpdateFullName,
+            lastUpdateUserId: i.lastUpdateUserId,
+            lastUpdatedAt: i.lastUpdatedAt,
+            description: i.description,
+          });
+        });
+      }
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      hideLoader();
+    });
+}
+
+/** ลบ รอบการคัดเลือก */
+function clickDelete(id: string) {
+  $q.dialog({
+    title: "ยืนยันการลบข้อมูล",
+    message: "ต้องการลบข้อมูลนี้ใช่หรือไม่?",
+    cancel: {
+      flat: true,
+      color: "negative",
+    },
+    persistent: true,
+  })
+    .onOk(async () => {
+      showLoader();
+      await http
+        .delete(config.API.deleteDisableCandidates(id))
+        .then((res) => {
+          success($q, "ลบข้อมูลการสอบสำเร็จ");
+          fetchData();
+        })
+        .catch((e) => {
+          messageError($q, e);
+        })
+        .finally(() => {
+          hideLoader();
+        });
+    })
+    .onCancel(() => {})
+    .onDismiss(() => {});
+}
+
+/** ไปหน้าเพิ่มข้อมูล */
+function clickAdd() {
+  router.push({ name: "disablePeriodAdd" });
+}
+
+/** ปิด dialog */
+async function clickClose() {
+  modalAdd.value = false;
+  await fetchData();
+}
+
+/** ปิด dialog คะเเนน */
+async function clickCloseScore() {
+  modalScore.value = false;
+  await fetchData();
+}
+
+/** ปิด dialog เลือกไฟล์ผู้สมัครคัดเลือกคนพิการ */
+async function clickCloseCandidate() {
+  modalCandidate.value = false;
+  await fetchData();
+}
+
+/** บันทึก รอบการคัดเลือก */
+async function checkSaveCandidate() {
+  const fd = new FormData();
+  fd.append("attachment", files_candidate.value[0]);
+  showLoader();
+  await http
+    .post(config.API.uploadDisableCandidates(selected_row_id.value), fd)
+    .then((res) => {
+      success($q, "นำเข้าข้อมูลผู้สมัครสอบสำเร็จ");
+      modalCandidate.value = false;
+      selected_row_id.value = "";
+      fetchData();
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/**  บันทึก คะเเนน*/
+async function checkSaveScore() {
+  const fd = new FormData();
+  fd.append("attachment", files_score.value[0]);
+  showLoader();
+  await http
+    .post(config.API.saveDisableScores(selected_row_id.value), fd)
+    .then((res) => {
+      success($q, "นำเข้าข้อมูลผลคะแนนสอบสำเร็จ");
+      modalScore.value = false;
+      selected_row_id.value = "";
+      fetchData();
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/** บันทึกข้อมูล */
+async function checkSave() {
+  const fd = new FormData();
+  fd.append("attachment", files.value[0]);
+  fd.append("year", year.value.toString());
+  fd.append("round", round.value.toString());
+  fd.append("name", name.value);
+  showLoader();
+  await http
+    .post(config.API.saveDisableCandidates, fd)
+    .then((res) => {
+      success($q, "นำเข้าข้อมูลผู้สมัครคัดเลือกคนพิการสำเร็จ");
+      modalAdd.value = false;
+      fetchData();
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+onMounted(async () => {
+  hideLoader();
+  await fetchData();
+});
+</script>
 <template>
   <div class="toptitle text-dark col-12 row items-center">
     จัดการรอบคัดเลือกคนพิการ
@@ -371,361 +749,5 @@
     </q-card>
   </q-dialog>
 </template>
-<script setup lang="ts">
-import type { QTableProps } from "quasar";
-import { checkPermission } from "@/utils/permissions";
-import { onMounted, ref } from "vue";
-import { useRouter } from "vue-router";
-import { useQuasar } from "quasar";
-import { useCounterMixin } from "@/stores/mixin";
-import type {
-  ResponseRecruitPeriod,
-  ResponseHistoryObject,
-} from "@/modules/03_recruiting/interface/response/Period";
-import type { Pagination } from "@/modules/03_recruiting/interface/index/Main";
-import Table from "@/modules/03_recruiting/components/Table.vue";
-import DialogHeader from "@/components/DialogHeader.vue";
-
-import http from "@/plugins/http";
-import config from "@/app.config";
-import HistoryTable from "@/components/TableHistory.vue";
-
-const $q = useQuasar(); // show dialog
-const router = useRouter();
-const name = ref<string>("");
-const year = ref<number>(new Date().getFullYear() + 543);
-const round = ref<number>(1);
-const mixin = useCounterMixin();
-const { success, dateText, messageError, showLoader, hideLoader } = mixin;
-const files = ref<any>(null);
-const files_score = ref<any>(null);
-const files_candidate = ref<any>(null);
-const modalAdd = ref<boolean>(false);
-const modalScore = ref<boolean>(false);
-const modalCandidate = ref<boolean>(false);
-const selected_row_id = ref<string>("");
-const rowsHistory = ref<ResponseHistoryObject[]>([]); //select data history
-const tittleHistory = ref<string>("ประวัติการนำเข้าข้อมูล"); //
-const modalHistory = ref<boolean>(false); //modal ประวัติการแก้ไขข้อมูล
-const rows = ref<any[]>([]);
-const filter = ref<string>(""); //search data table
-const textTittle = ref<string>("");
-const textTittleScore = ref<string>("");
-const textTittleCandidate = ref<string>("");
-const initialPagination = ref<Pagination>({
-  rowsPerPage: 0,
-});
-const visibleColumns = ref<String[]>([
-  "no",
-  "name",
-  "round",
-  "year",
-  "examCount",
-  "scoreCount",
-]);
-
-const columns = ref<QTableProps["columns"]>([
-  {
-    name: "no",
-    align: "left",
-    label: "ลำดับ",
-    sortable: false,
-    field: "no",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "name",
-    align: "left",
-    label: "รอบคัดเลือกคนพิการ",
-    sortable: true,
-    field: "name",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "round",
-    align: "left",
-    label: "ครั้งที่",
-    sortable: true,
-    field: "round",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "year",
-    align: "left",
-    label: "ปีงบประมาณ",
-    sortable: true,
-    field: "year",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "examCount",
-    label: "จำนวนผู้สอบทั้งหมด",
-    align: "right",
-    field: "examCount",
-    sortable: true,
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "scoreCount",
-    label: "จำนวนที่บันทึกผลสอบ",
-    align: "right",
-    field: "scoreCount",
-    sortable: true,
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-]);
-
-const columnsHistory = ref<QTableProps["columns"]>([
-  {
-    name: "description",
-    align: "left",
-    label: "รายละเอียด",
-    sortable: true,
-    field: "description",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "createdAt",
-    align: "center",
-    label: "วันที่ดำเนินการ",
-    sortable: true,
-    field: "createdAt",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "createdFullName",
-    align: "left",
-    label: "ผู้ดำเนินการ",
-    sortable: true,
-    field: "createdFullName",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-]);
-
-const visibleColumnsHistory = ref<String[]>([
-  "description",
-  "createdAt",
-  "createdFullName",
-]);
-
-onMounted(async () => {
-  hideLoader();
-  await fetchData();
-});
-
-const clickPassExam = (id: string) => {
-  window.open(config.API.exportDisablePassExamList(id));
-};
-
-const clickCandidateList = (id: string) => {
-  window.open(config.API.exportDisableCandidateList(id));
-};
-
-/**
- * ฟังก์ชันแปลง date เป็นภาษาไทย
- * @param value วันที่ type datetime ที่จะแปลงเป็นไทย
- */
-const textDate = (value: Date) => {
-  return dateText(value);
-};
-
-const fetchData = async () => {
-  showLoader();
-  await http
-    .get(config.API.getDisableCandidates)
-    .then((res) => {
-      const data = res.data.result;
-      let result: ResponseRecruitPeriod[] = [];
-      if (data.length > 0) {
-        data.map((r: ResponseRecruitPeriod) => {
-          if (r.score != null) {
-            r.scoreCount = r.score.scoreCount;
-            r.scoreImportDate = r.score.importDate;
-          }
-          result.push(r);
-        });
-      }
-
-      rows.value = result;
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-};
-
-const clickDetail = (id: string) => {
-  router.push(`/disable/import/${id}`);
-};
-
-const clickEdit = async (id: string) => {
-  modalScore.value = true;
-  textTittleScore.value = "นำเข้าผลการคัดเลือกคนพิการ";
-  selected_row_id.value = id;
-};
-
-const clickUpload = async (id: string) => {
-  modalCandidate.value = true;
-  textTittleCandidate.value = "นำเข้าผู้สมัครคัดเลือกคนพิการ";
-  selected_row_id.value = id;
-};
-
-const clickEditPeriod = (id: string) => {
-  router.push(`/disable/period/${id}`);
-};
-
-const clickHistory = async (id: string) => {
-  modalHistory.value = true;
-  showLoader();
-  await http
-    .get(config.API.getDisableImportHistory(id))
-    .then((res) => {
-      const data = res.data.result;
-      rowsHistory.value = [];
-      if (data.length > 0) {
-        data.map((i: ResponseHistoryObject) => {
-          rowsHistory.value.push({
-            createdAt: i.createdAt,
-            createdFullName: i.createdFullName,
-            createdUserId: i.createdUserId,
-            id: i.id,
-            isActive: i.isActive,
-            lastUpdateFullName: i.lastUpdateFullName,
-            lastUpdateUserId: i.lastUpdateUserId,
-            lastUpdatedAt: i.lastUpdatedAt,
-            description: i.description,
-          });
-        });
-      }
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      hideLoader();
-    });
-};
-
-const clickDelete = (id: string) => {
-  $q.dialog({
-    title: "ยืนยันการลบข้อมูล",
-    message: "ต้องการลบข้อมูลนี้ใช่หรือไม่?",
-    cancel: {
-      flat: true,
-      color: "negative",
-    },
-    persistent: true,
-  })
-    .onOk(async () => {
-      showLoader();
-      await http
-        .delete(config.API.deleteDisableCandidates(id))
-        .then((res) => {
-          success($q, "ลบข้อมูลการสอบสำเร็จ");
-          fetchData();
-        })
-        .catch((e) => {
-          messageError($q, e);
-        })
-        .finally(() => {
-          hideLoader();
-        });
-    })
-    .onCancel(() => {})
-    .onDismiss(() => {});
-};
-
-const clickAdd = () => {
-  router.push({ name: "disablePeriodAdd" });
-};
-
-const clickClose = async () => {
-  modalAdd.value = false;
-  await fetchData();
-};
-
-const clickCloseScore = async () => {
-  modalScore.value = false;
-  await fetchData();
-};
-
-const clickCloseCandidate = async () => {
-  modalCandidate.value = false;
-  await fetchData();
-};
-
-const checkSaveCandidate = async () => {
-  const fd = new FormData();
-  fd.append("attachment", files_candidate.value[0]);
-  showLoader();
-  await http
-    .post(config.API.uploadDisableCandidates(selected_row_id.value), fd)
-    .then((res) => {
-      success($q, "นำเข้าข้อมูลผู้สมัครสอบสำเร็จ");
-      modalCandidate.value = false;
-      selected_row_id.value = "";
-      fetchData();
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-};
-
-const checkSaveScore = async () => {
-  const fd = new FormData();
-  fd.append("attachment", files_score.value[0]);
-  showLoader();
-  await http
-    .post(config.API.saveDisableScores(selected_row_id.value), fd)
-    .then((res) => {
-      success($q, "นำเข้าข้อมูลผลคะแนนสอบสำเร็จ");
-      modalScore.value = false;
-      selected_row_id.value = "";
-      fetchData();
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-};
-
-const checkSave = async () => {
-  const fd = new FormData();
-  fd.append("attachment", files.value[0]);
-  fd.append("year", year.value.toString());
-  fd.append("round", round.value.toString());
-  fd.append("name", name.value);
-  showLoader();
-  await http
-    .post(config.API.saveDisableCandidates, fd)
-    .then((res) => {
-      success($q, "นำเข้าข้อมูลผู้สมัครคัดเลือกคนพิการสำเร็จ");
-      modalAdd.value = false;
-      fetchData();
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-};
-</script>
 
 <style></style>
diff --git a/src/modules/03_recruiting/views/02_qualify/DisablePeriodAdd.vue b/src/modules/03_recruiting/views/02_qualify/DisablePeriodAdd.vue
index f81a44e49..e71051675 100644
--- a/src/modules/03_recruiting/views/02_qualify/DisablePeriodAdd.vue
+++ b/src/modules/03_recruiting/views/02_qualify/DisablePeriodAdd.vue
@@ -1,4 +1,362 @@
 <!-- page:จัดการรอบคัดเลือกคนพิการ สรรหา -->
+<script setup lang="ts">
+import { onMounted, ref, watch } from "vue";
+import { useQuasar, QForm } from "quasar";
+import { useRouter, useRoute } from "vue-router";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
+
+import type { RequestPeriodDisable } from "@/modules/03_recruiting/interface/request/Period";
+import type {
+  DataOption,
+  UploadType,
+} from "@/modules/02_organizational/interface/index/Main";
+
+const $q = useQuasar(); // show dialog
+const mixin = useCounterMixin();
+const router = useRouter();
+const route = useRoute();
+const {
+  date2Thai,
+  success,
+  dateToISO,
+  notifyError,
+  messageError,
+  showLoader,
+  hideLoader,
+} = mixin;
+const myForm = ref<QForm | null>(null); //form data input
+const name = ref<string>("");
+const note = ref<string>("");
+const editor = ref<string>("");
+const announcementExam = ref<boolean>(true);
+const fee = ref<number>(0);
+const round = ref<number>(1);
+const yearly = ref<number>(new Date().getFullYear());
+const dateRegister = ref<[Date, Date] | null>(null); //วันที่สมัคร
+const datePayment = ref<[Date, Date] | null>(null); //วันที่จ่ายเงิน
+const dateAnnouncement = ref<[Date, Date] | null>(null); //วันที่ประกาศ
+const dateExam = ref<Date | null>(null); //วันที่สอบ
+const dateAnnounce = ref<Date | null>(null); //วันที่ประกาศผล
+const positionPathOptions = ref<DataOption[]>([]);
+const organizationShortName = ref<DataOption>({ id: "", name: "" });
+const organizationName = ref<DataOption>({ id: "", name: "" });
+const organizationNameOptions = ref<DataOption[]>([]);
+
+const fileDocDataUpload = ref<File[]>([]);
+const fileDocs = ref<UploadType[]>([]);
+const fileImgDataUpload = ref<File[]>([]);
+const fileImgs = ref<UploadType[]>([]);
+const id = ref<string>("");
+const edit = ref<boolean>(false);
+
+function clickBack() {
+  router.push({ name: "disablePeriod" });
+}
+
+/** ดึงข้อมูล */
+async function fetchData() {
+  showLoader();
+  await http
+    .get(config.API.getDisablePeriodById(id.value))
+    .then((res) => {
+      const data = res.data.result;
+      id.value = data.id;
+      name.value = data.name;
+      round.value = data.round;
+      yearly.value = data.year;
+      fee.value = data.fee;
+      dateAnnouncement.value =
+        data.announcementStartDate != null && data.announcementEndDate != null
+          ? [
+              new Date(data.announcementStartDate),
+              new Date(data.announcementEndDate),
+            ]
+          : null;
+      dateExam.value = data.examDate != null ? new Date(data.examDate) : null;
+      dateRegister.value =
+        data.registerStartDate != null && data.registerEndDate != null
+          ? [new Date(data.registerStartDate), new Date(data.registerEndDate)]
+          : null;
+      datePayment.value =
+        data.paymentStartDate != null && data.paymentEndDate != null
+          ? [new Date(data.paymentStartDate), new Date(data.paymentEndDate)]
+          : null;
+      editor.value = data.detail;
+      note.value = data.note;
+      dateAnnounce.value =
+        data.announcementDate != null ? new Date(data.announcementDate) : null;
+      fileDocs.value = data.documents;
+      fileImgs.value = data.images;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/**
+ * อัพเดต ปี
+ * @param e ปี
+ */
+async function updateYear(e: number) {
+  yearly.value = e;
+}
+
+/** ฟังชั่น save  */
+async function checkSave() {
+  if (myForm.value !== null) {
+    myForm.value.validate().then(async (success) => {
+      if (success) {
+        if (edit.value) {
+          await editData(id.value);
+        } else {
+          await addData();
+        }
+      }
+    });
+  }
+}
+
+/** save ข้อมูล */
+function sendData() {
+  const valueData: RequestPeriodDisable = {
+    announcementEndDate:
+      dateAnnouncement.value !== null
+        ? dateToISO(dateAnnouncement.value[1])
+        : null,
+    announcementStartDate:
+      dateAnnouncement.value !== null
+        ? dateToISO(dateAnnouncement.value[0])
+        : null,
+    examDate: dateExam.value !== null ? dateToISO(dateExam.value) : null,
+    detail: editor.value,
+    fee: fee.value,
+    id: "",
+    name: name.value,
+    note: note.value,
+    paymentEndDate:
+      datePayment.value !== null ? dateToISO(datePayment.value[1]) : null,
+    paymentStartDate:
+      datePayment.value !== null ? dateToISO(datePayment.value[0]) : null,
+    registerEndDate:
+      dateRegister.value !== null ? dateToISO(dateRegister.value[1]) : null,
+    registerStartDate:
+      dateRegister.value !== null ? dateToISO(dateRegister.value[0]) : null,
+    round: round.value,
+    year: yearly.value,
+    announcementDate:
+      dateAnnounce.value !== null ? dateToISO(dateAnnounce.value) : null,
+  };
+  return valueData;
+}
+
+/** บันทึก เพิ่มข้อมูล */
+async function addData() {
+  showLoader();
+  await http
+    .post(config.API.saveDisablePeriod, sendData())
+    .then(async (res) => {
+      const data = res.data.result;
+      id.value = data;
+      success($q, "บันทึกรอบการสอบคนพิการสำเร็จ");
+      await uploadImgData();
+      await uploadDocData();
+      clickBack();
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      hideLoader();
+    });
+}
+
+/**
+ * บันทึก แก้ไขข้อมูล
+ * @param id id รอบการสอบคนพิการ
+ */
+async function editData(id: string) {
+  showLoader();
+  await http
+    .put(config.API.editDisablePeriod(id), sendData())
+    .then(async () => {
+      success($q, "แก้ไขรอบการสอบคนพิการสำเร็จ");
+      await uploadImgData();
+      await uploadDocData();
+      clickBack();
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      hideLoader();
+    });
+}
+
+/**
+ * บันทึกไฟล์ภาพ
+ * @param files ไฟล์ภาพ
+ */
+async function fileUploadImg(files: any) {
+  files.forEach((file: any) => {
+    fileImgDataUpload.value.push(file);
+  });
+}
+
+/**
+ * ลบไฟล์ภาพ
+ * @param files ไฟล์ภาพ
+ */
+async function fileRemoveImg(files: any) {
+  files.forEach((file: any) => {
+    const index = fileImgDataUpload.value.findIndex(
+      (x: any) => x.__key == file.__key
+    );
+    if (index > -1) {
+      fileImgDataUpload.value.splice(index, 1);
+    }
+  });
+}
+
+/** อัปโหลด ภาพ */
+async function uploadImgData() {
+  if (fileImgDataUpload.value.length > 0) {
+    const formData = new FormData();
+    fileImgDataUpload.value.forEach((file: any) => {
+      formData.append("", file);
+    });
+    showLoader();
+    await http
+      .put(config.API.periodExamImg(id.value), formData)
+      .then((res) => {})
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(async () => {
+        hideLoader();
+      });
+  }
+}
+
+/**
+ * ลบ เอกสาร
+ * @param docId id เอกสาร
+ */
+async function deleteDocData(docId: string) {
+  const params = {
+    documentId: docId,
+  };
+  showLoader();
+  await http
+    .delete(config.API.periodExamDoc(id.value.toString()), {
+      params,
+    })
+    .then((res) => {
+      const data = res.data.result;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await fetchData();
+      hideLoader();
+    });
+}
+
+/**
+ * ดาวห์โหลด
+ * @param path url
+ */
+async function downloadData(path: string) {
+  window.open(path);
+}
+
+/**
+ * อัปโหลดไฟล์เอกสาร
+ * @param files ไฟล์เอกสาร
+ */
+async function fileUploadDoc(files: any) {
+  files.forEach((file: any) => {
+    fileDocDataUpload.value.push(file);
+  });
+}
+
+/**
+ * ลบไฟล์เอกสาร
+ * @param files ไฟล์
+ */
+async function fileRemoveDoc(files: any) {
+  files.forEach((file: any) => {
+    const index = fileDocDataUpload.value.findIndex(
+      (x: any) => x.__key == file.__key
+    );
+    if (index > -1) {
+      fileDocDataUpload.value.splice(index, 1);
+    }
+  });
+}
+
+/** อัปโหลดเอกสาร */
+async function uploadDocData() {
+  const formData = new FormData();
+  if (fileDocDataUpload.value.length > 0) {
+    fileDocDataUpload.value.forEach((file: any) => {
+      formData.append("", file);
+    });
+    showLoader();
+    await http
+      .put(config.API.periodExamDoc(id.value), formData)
+      .then((res) => {})
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(async () => {
+        hideLoader();
+      });
+  } else {
+    clickBack();
+  }
+}
+
+/**
+ * แปลงช่วงวันที่ถ้า2ค่าเป็นวันเดียวกันจะโชววันเดียวแต่ถ้าไม่เท่ากันจะแสดงเป็นช่วง
+ * @param val ช่วงวันที่
+ */
+function dateThaiRange(val: [Date, Date] | null) {
+  if (val === null) {
+    return "";
+  } else if (date2Thai(val[0], true) === date2Thai(val[1], true)) {
+    return `${date2Thai(val[0], true)}`;
+  } else {
+    return `${date2Thai(val[0], true)} - ${date2Thai(val[1], true)}`;
+  }
+}
+
+watch(organizationShortName, (count: DataOption, prevCount: DataOption) => {
+  organizationNameOptions.value = [];
+});
+
+watch(organizationName, (count: DataOption, prevCount: DataOption) => {
+  positionPathOptions.value = [];
+});
+
+onMounted(async () => {
+  if (route.params.id != undefined) {
+    edit.value = true;
+    id.value = route.params.id.toString();
+    hideLoader();
+    await fetchData();
+  } else {
+    edit.value = false;
+  }
+});
+</script>
+
 <template>
   <div class="toptitle text-dark col-12 row items-center">
     <q-btn
@@ -659,333 +1017,5 @@
     </q-form>
   </q-card>
 </template>
-<script setup lang="ts">
-import type { QTableProps } from "quasar";
-import { onMounted, ref, watch } from "vue";
-import { useQuasar, QForm } from "quasar";
-import { useCounterMixin } from "@/stores/mixin";
-import { useRouter, useRoute } from "vue-router";
-import type { RequestPeriodDisable } from "@/modules/03_recruiting/interface/request/Period";
-import type {
-  DataOption,
-  UploadType,
-} from "@/modules/02_organizational/interface/index/Main";
-import http from "@/plugins/http";
-import config from "@/app.config";
-
-const $q = useQuasar(); // show dialog
-const mixin = useCounterMixin();
-const router = useRouter();
-const route = useRoute();
-const {
-  date2Thai,
-  success,
-  dateToISO,
-  notifyError,
-  messageError,
-  showLoader,
-  hideLoader,
-} = mixin;
-const myForm = ref<QForm | null>(null); //form data input
-const name = ref<string>("");
-const note = ref<string>("");
-const editor = ref<string>("");
-const announcementExam = ref<boolean>(true);
-const fee = ref<number>(0);
-const round = ref<number>(1);
-const yearly = ref<number>(new Date().getFullYear());
-const dateRegister = ref<[Date, Date] | null>(null); //วันที่สมัคร
-const datePayment = ref<[Date, Date] | null>(null); //วันที่จ่ายเงิน
-const dateAnnouncement = ref<[Date, Date] | null>(null); //วันที่ประกาศ
-const dateExam = ref<Date | null>(null); //วันที่สอบ
-const dateAnnounce = ref<Date | null>(null); //วันที่ประกาศผล
-const positionPathOptions = ref<DataOption[]>([]);
-const organizationShortName = ref<DataOption>({ id: "", name: "" });
-const organizationName = ref<DataOption>({ id: "", name: "" });
-const organizationNameOptions = ref<DataOption[]>([]);
-const examTypeOptions = [
-  { name: "ทั่วไป", id: "normol" },
-  { name: "แพทย์", id: "docter" },
-];
-const category = ref<string>("");
-const categoryOptions = [
-  { name: "สำนักอนามัย", id: "hygiene" },
-  { name: "สำนักการแพทย์", id: "physician" },
-  { name: "สำนักผังเมือง", id: "city" },
-  { name: "สำนักวัฒนธรรม กีฬา และการท่องเที่ยว", id: "culture" },
-];
-const fileDocDataUpload = ref<File[]>([]);
-const fileDocs = ref<UploadType[]>([]);
-const fileImgDataUpload = ref<File[]>([]);
-const fileImgs = ref<UploadType[]>([]);
-const id = ref<string>("");
-const edit = ref<boolean>(false);
-
-watch(organizationShortName, (count: DataOption, prevCount: DataOption) => {
-  organizationNameOptions.value = [];
-});
-
-watch(organizationName, (count: DataOption, prevCount: DataOption) => {
-  positionPathOptions.value = [];
-});
-
-onMounted(async () => {
-  if (route.params.id != undefined) {
-    edit.value = true;
-    id.value = route.params.id.toString();
-    hideLoader();
-    await fetchData();
-  } else {
-    edit.value = false;
-  }
-});
-
-const clickBack = () => {
-  router.push({ name: "disablePeriod" });
-};
-
-const fetchData = async () => {
-  showLoader();
-  await http
-    .get(config.API.getDisablePeriodById(id.value))
-    .then((res) => {
-      const data = res.data.result;
-      id.value = data.id;
-      name.value = data.name;
-      round.value = data.round;
-      yearly.value = data.year;
-      fee.value = data.fee;
-      dateAnnouncement.value =
-        data.announcementStartDate != null && data.announcementEndDate != null
-          ? [
-              new Date(data.announcementStartDate),
-              new Date(data.announcementEndDate),
-            ]
-          : null;
-      dateExam.value = data.examDate != null ? new Date(data.examDate) : null;
-      dateRegister.value =
-        data.registerStartDate != null && data.registerEndDate != null
-          ? [new Date(data.registerStartDate), new Date(data.registerEndDate)]
-          : null;
-      datePayment.value =
-        data.paymentStartDate != null && data.paymentEndDate != null
-          ? [new Date(data.paymentStartDate), new Date(data.paymentEndDate)]
-          : null;
-      editor.value = data.detail;
-      note.value = data.note;
-      dateAnnounce.value =
-        data.announcementDate != null ? new Date(data.announcementDate) : null;
-      fileDocs.value = data.documents;
-      fileImgs.value = data.images;
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-};
-
-const updateYear = async (e: number) => {
-  yearly.value = e;
-};
-
-const checkSave = async () => {
-  if (myForm.value !== null) {
-    myForm.value.validate().then(async (success) => {
-      if (success) {
-        if (edit.value) {
-          await editData(id.value);
-        } else {
-          await addData();
-        }
-      }
-    });
-  }
-};
-
-const sendData = () => {
-  const valueData: RequestPeriodDisable = {
-    announcementEndDate:
-      dateAnnouncement.value !== null
-        ? dateToISO(dateAnnouncement.value[1])
-        : null,
-    announcementStartDate:
-      dateAnnouncement.value !== null
-        ? dateToISO(dateAnnouncement.value[0])
-        : null,
-    examDate: dateExam.value !== null ? dateToISO(dateExam.value) : null,
-    detail: editor.value,
-    fee: fee.value,
-    id: "",
-    name: name.value,
-    note: note.value,
-    paymentEndDate:
-      datePayment.value !== null ? dateToISO(datePayment.value[1]) : null,
-    paymentStartDate:
-      datePayment.value !== null ? dateToISO(datePayment.value[0]) : null,
-    registerEndDate:
-      dateRegister.value !== null ? dateToISO(dateRegister.value[1]) : null,
-    registerStartDate:
-      dateRegister.value !== null ? dateToISO(dateRegister.value[0]) : null,
-    round: round.value,
-    year: yearly.value,
-    announcementDate:
-      dateAnnounce.value !== null ? dateToISO(dateAnnounce.value) : null,
-  };
-  return valueData;
-};
-
-const addData = async () => {
-  showLoader();
-  await http
-    .post(config.API.saveDisablePeriod, sendData())
-    .then(async (res) => {
-      const data = res.data.result;
-      id.value = data;
-      success($q, "บันทึกรอบการสอบคนพิการสำเร็จ");
-      await uploadImgData();
-      await uploadDocData();
-      clickBack();
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      hideLoader();
-    });
-};
-
-const editData = async (id: string) => {
-  showLoader();
-  await http
-    .put(config.API.editDisablePeriod(id), sendData())
-    .then(async () => {
-      success($q, "แก้ไขรอบการสอบคนพิการสำเร็จ");
-      await uploadImgData();
-      await uploadDocData();
-      clickBack();
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      hideLoader();
-    });
-};
-
-const fileUploadImg = async (files: any) => {
-  files.forEach((file: any) => {
-    fileImgDataUpload.value.push(file);
-  });
-};
-
-const fileRemoveImg = async (files: any) => {
-  files.forEach((file: any) => {
-    const index = fileImgDataUpload.value.findIndex(
-      (x: any) => x.__key == file.__key
-    );
-    if (index > -1) {
-      fileImgDataUpload.value.splice(index, 1);
-    }
-  });
-};
-
-const uploadImgData = async () => {
-  if (fileImgDataUpload.value.length > 0) {
-    const formData = new FormData();
-    fileImgDataUpload.value.forEach((file: any) => {
-      formData.append("", file);
-    });
-    showLoader();
-    await http
-      .put(config.API.periodExamImg(id.value), formData)
-      .then((res) => {})
-      .catch((e) => {
-        messageError($q, e);
-      })
-      .finally(async () => {
-        hideLoader();
-      });
-  }
-};
-
-const deleteDocData = async (docId: string) => {
-  const params = {
-    documentId: docId,
-  };
-  showLoader();
-  await http
-    .delete(config.API.periodExamDoc(id.value.toString()), {
-      params,
-    })
-    .then((res) => {
-      const data = res.data.result;
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      await fetchData();
-      hideLoader();
-    });
-};
-
-const downloadData = async (path: string) => {
-  window.open(path);
-};
-
-const fileUploadDoc = async (files: any) => {
-  files.forEach((file: any) => {
-    fileDocDataUpload.value.push(file);
-  });
-};
-
-const fileRemoveDoc = async (files: any) => {
-  files.forEach((file: any) => {
-    const index = fileDocDataUpload.value.findIndex(
-      (x: any) => x.__key == file.__key
-    );
-    if (index > -1) {
-      fileDocDataUpload.value.splice(index, 1);
-    }
-  });
-};
-
-const uploadDocData = async () => {
-  const formData = new FormData();
-  if (fileDocDataUpload.value.length > 0) {
-    fileDocDataUpload.value.forEach((file: any) => {
-      formData.append("", file);
-    });
-    showLoader();
-    await http
-      .put(config.API.periodExamDoc(id.value), formData)
-      .then((res) => {})
-      .catch((e) => {
-        messageError($q, e);
-      })
-      .finally(async () => {
-        hideLoader();
-      });
-  } else {
-    clickBack();
-  }
-};
-
-/**
- * แปลงช่วงวันที่ถ้า2ค่าเป็นวันเดียวกันจะโชววันเดียวแต่ถ้าไม่เท่ากันจะแสดงเป็นช่วง
- * @param val ช่วงวันที่
- */
-const dateThaiRange = (val: [Date, Date] | null) => {
-  if (val === null) {
-    return "";
-  } else if (date2Thai(val[0], true) === date2Thai(val[1], true)) {
-    return `${date2Thai(val[0], true)}`;
-  } else {
-    return `${date2Thai(val[0], true)} - ${date2Thai(val[1], true)}`;
-  }
-};
-</script>
 
 <style></style>
diff --git a/src/modules/03_recruiting/views/02_qualify/ExamForm.vue b/src/modules/03_recruiting/views/02_qualify/ExamForm.vue
index db8629750..a054ddbb0 100644
--- a/src/modules/03_recruiting/views/02_qualify/ExamForm.vue
+++ b/src/modules/03_recruiting/views/02_qualify/ExamForm.vue
@@ -1,4 +1,284 @@
 <!-- step กรอกข้อมูล -->
+<script setup lang="ts">
+import { onMounted, ref } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import { useQuasar } from "quasar";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
+
+import Profile from "@/modules/03_recruiting/components/Profile.vue";
+import {
+  defaultInformation,
+  defaultOccupation,
+  defaultContact,
+  defaultAddress,
+  defaultEducation,
+} from "@/modules/03_recruiting/interface/index/Main";
+
+const $q = useQuasar();
+const router = useRouter();
+const route = useRoute();
+const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
+const {
+  success,
+  dateToISO,
+  messageError,
+  showLoader,
+  hideLoader,
+  notifyError,
+} = mixin;
+
+const examId = ref<string>(route.params.examId.toString());
+const candidateId = ref<string>(route.params.candidateId.toString());
+const modal = ref<boolean>(false);
+const modalReverseOfficer = ref<boolean>(false);
+const approve = ref<string>("1");
+const reason = ref<string>("");
+const formInformation = ref<any>({});
+const formAddress = ref<any>({});
+const formEducation = ref<any>({});
+const formOccupation = ref<any>({});
+const formContact = ref<any>({});
+const status = ref<string>("");
+const rejectDetail = ref<string>("");
+
+/** ดึงข้อมูลสถานะ */
+async function fetchStatus() {
+  showLoader();
+  await http
+    .get(config.API.candidateId(candidateId.value))
+    .then((res) => {
+      const data = res.data.result;
+      status.value = data.status;
+      rejectDetail.value = data.rejectDetail;
+      console.log(rejectDetail.value);
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      hideLoader();
+    });
+}
+
+/** ยืนยัน  ตรวจสอบข้อมูลสำเร็จ*/
+async function confirm(status: boolean, reason: string) {
+  showLoader();
+  await http
+    .put(config.API.candidateCheckRegister(candidateId.value), {
+      status: status,
+      reason: reason,
+    })
+    .then((res) => {})
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      hideLoader();
+      success($q, "ตรวจสอบข้อมูลสำเร็จ");
+      router.push(`/qualify/manage/${examId.value}`);
+    });
+}
+
+/** ปฏิเสธ ตรวจสอบข้อมูลสำเร็จ */
+async function reject(reason: string) {
+  showLoader();
+  await http
+    .put(config.API.candidateRejectRegister(candidateId.value), {
+      reason: reason,
+    })
+    .then((res) => {})
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      hideLoader();
+      success($q, "ตรวจสอบข้อมูลสำเร็จ");
+      router.push(`/qualify/manage/${examId.value}`);
+    });
+}
+
+/** บันทึกตรวจสอบ */
+function checkSaveReverse() {
+  rejectReverse(reason.value);
+}
+
+/** save ข้อมูล */
+function checkSave() {
+  if (approve.value == "1") {
+    confirm(true, "");
+  } else if (approve.value == "2") {
+    confirm(false, reason.value);
+  } else {
+    reject(reason.value);
+  }
+}
+
+/** บันทึกตรวจสอบ */
+async function rejectReverse(reason: string) {
+  showLoader();
+  await http
+    .put(config.API.candidateCheckRegisterReject(candidateId.value), {
+      reason: reason,
+    })
+    .then((res) => {})
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      hideLoader();
+      success($q, "สำเร็จ");
+      router.push(`/qualify/manage/${examId.value}`);
+    });
+}
+
+/** dialog  ย้อนกลับให้เจ้าหน้าที่ตรวจสอบ*/
+function modalReverse() {
+  modalReverseOfficer.value = true;
+}
+
+/** ปิด dialog ย้อนกลับให้เจ้าหน้าที่ตรวจสอบ */
+function closeReverse() {
+  modalReverseOfficer.value = false;
+}
+
+/** ปิด dialog */
+function close() {
+  modal.value = false;
+}
+
+/** บันทึกข้อมูล คุณสมบัติผู้สมัครสอบรอบคัดเลือก */
+async function clickSave() {
+  await formInformation.value.validate().then(async (suc: boolean) => {
+    if (suc) {
+      await formAddress.value.validate().then(async (suc: boolean) => {
+        if (suc) {
+          await formEducation.value.validate().then(async (suc: boolean) => {
+            if (suc) {
+              await formOccupation.value
+                .validate()
+                .then(async (suc: boolean) => {
+                  if (suc) {
+                    await formContact.value
+                      .validate()
+                      .then(async (suc: boolean) => {
+                        if (suc) {
+                          showLoader();
+                          await http
+                            .post(config.API.candidateId(candidateId.value), {
+                              prefixId: defaultInformation.value.prefixId,
+                              lastName: defaultInformation.value.lastname,
+                              dateOfBirth:
+                                defaultInformation.value.birthDate == null
+                                  ? null
+                                  : dateToISO(
+                                      defaultInformation.value.birthDate
+                                    ),
+                              citizenId: defaultInformation.value.cardid,
+                              firstName: defaultInformation.value.firstname,
+                              religionId: defaultInformation.value.religionId,
+                              nationality: defaultInformation.value.nationality,
+                              email: defaultInformation.value.email,
+                              mobilePhone: defaultInformation.value.phone,
+                              telephone: defaultInformation.value.tel,
+                              knowledge: defaultInformation.value.knowledge,
+                              occupationOrg: defaultOccupation.value.org,
+                              occupationPile: defaultOccupation.value.pile,
+                              occupationGroup: defaultOccupation.value.group,
+                              occupationSalary: defaultOccupation.value.salary,
+                              occupationPosition:
+                                defaultOccupation.value.position,
+                              occupationPositionType:
+                                defaultOccupation.value.positionType,
+                              occupationTelephone: defaultOccupation.value.tel,
+                              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,
+                              educationLevelExamId:
+                                defaultEducation.value.educationLevelExamId,
+                              educationName:
+                                defaultEducation.value.educationName,
+                              educationMajor:
+                                defaultEducation.value.educationMajor,
+                              educationLocation:
+                                defaultEducation.value.educationLocation,
+                              educationType:
+                                defaultEducation.value.educationType,
+                              educationEndDate:
+                                defaultEducation.value.educationEndDate == null
+                                  ? null
+                                  : dateToISO(
+                                      defaultEducation.value.educationEndDate
+                                    ),
+                              educationScores:
+                                defaultEducation.value.educationScores,
+                              educationLevelHighId:
+                                defaultEducation.value.educationLevelHighId,
+                              contactPrefixId:
+                                defaultContact.value.contactPrefixId,
+                              contactFirstname:
+                                defaultContact.value.contactFirstname,
+                              contactLastname:
+                                defaultContact.value.contactLastname,
+                              contactRelations:
+                                defaultContact.value.contactRelations,
+                              contactTel: defaultContact.value.contactTel,
+                            })
+                            .then(async () => {
+                              success($q, "บันทึกข้อมูลส่วนตัวสำเร็จ");
+                            })
+                            .catch((e) => {
+                              messageError($q, e);
+                            })
+                            .finally(async () => {
+                              hideLoader();
+                            });
+                        } else {
+                          notifyError($q, "กรุณากรอกข้อมูลให้ครบถ้วน");
+                        }
+                      });
+                  } else {
+                    notifyError($q, "กรุณากรอกข้อมูลให้ครบถ้วน");
+                  }
+                });
+            } else {
+              notifyError($q, "กรุณากรอกข้อมูลให้ครบถ้วน");
+            }
+          });
+        } else {
+          notifyError($q, "กรุณากรอกข้อมูลให้ครบถ้วน");
+        }
+      });
+    } else {
+      notifyError($q, "กรุณากรอกข้อมูลให้ครบถ้วน");
+    }
+  });
+}
+
+onMounted(async () => {
+  await fetchStatus();
+});
+</script>
+
 <template>
   <div class="toptitle text-dark col-12 row items-center">
     <q-btn
@@ -191,274 +471,4 @@
   </q-dialog>
 </template>
 
-<script setup lang="ts">
-import { onMounted, ref } from "vue";
-import Profile from "@/modules/03_recruiting/components/Profile.vue";
-import {
-  defaultInformation,
-  defaultOccupation,
-  defaultContact,
-  defaultAddress,
-  defaultEducation,
-} from "@/modules/03_recruiting/interface/index/Main";
-import { useCounterMixin } from "@/stores/mixin";
-import { useRoute, useRouter } from "vue-router";
-import { useQuasar } from "quasar";
-import http from "@/plugins/http";
-import config from "@/app.config";
-
-const router = useRouter();
-const $q = useQuasar();
-const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
-const {
-  success,
-  dateToISO,
-  messageError,
-  showLoader,
-  hideLoader,
-  notifyError,
-} = mixin;
-const route = useRoute();
-const examId = ref<string>(route.params.examId.toString());
-const candidateId = ref<string>(route.params.candidateId.toString());
-const modal = ref<boolean>(false);
-const modalReverseOfficer = ref<boolean>(false);
-const approve = ref<string>("1");
-const reason = ref<string>("");
-const formInformation = ref<any>({});
-const formAddress = ref<any>({});
-const formEducation = ref<any>({});
-const formOccupation = ref<any>({});
-const formContact = ref<any>({});
-const status = ref<string>("");
-const rejectDetail = ref<string>("");
-
-onMounted(async () => {
-  await fetchStatus();
-});
-
-const fetchStatus = async () => {
-  showLoader();
-  await http
-    .get(config.API.candidateId(candidateId.value))
-    .then((res) => {
-      const data = res.data.result;
-      status.value = data.status;
-      rejectDetail.value = data.rejectDetail;
-      console.log(rejectDetail.value);
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      hideLoader();
-    });
-};
-
-const confirm = async (status: boolean, reason: string) => {
-  showLoader();
-  await http
-    .put(config.API.candidateCheckRegister(candidateId.value), {
-      status: status,
-      reason: reason,
-    })
-    .then((res) => {})
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      hideLoader();
-      success($q, "ตรวจสอบข้อมูลสำเร็จ");
-      router.push(`/qualify/manage/${examId.value}`);
-    });
-};
-
-const reject = async (reason: string) => {
-  showLoader();
-  await http
-    .put(config.API.candidateRejectRegister(candidateId.value), {
-      reason: reason,
-    })
-    .then((res) => {})
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      hideLoader();
-      success($q, "ตรวจสอบข้อมูลสำเร็จ");
-      router.push(`/qualify/manage/${examId.value}`);
-    });
-};
-
-const checkSaveReverse = () => {
-  rejectReverse(reason.value);
-};
-
-const checkSave = () => {
-  if (approve.value == "1") {
-    confirm(true, "");
-  } else if (approve.value == "2") {
-    confirm(false, reason.value);
-  } else {
-    reject(reason.value);
-  }
-};
-
-const modalCheck = () => {
-  modal.value = true;
-};
-
-const rejectReverse = async (reason: string) => {
-  showLoader();
-  await http
-    .put(config.API.candidateCheckRegisterReject(candidateId.value), {
-      reason: reason,
-    })
-    .then((res) => {})
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      hideLoader();
-      success($q, "สำเร็จ");
-      router.push(`/qualify/manage/${examId.value}`);
-    });
-};
-
-const modalReverse = () => {
-  modalReverseOfficer.value = true;
-};
-
-const closeReverse = () => {
-  modalReverseOfficer.value = false;
-};
-const close = () => {
-  modal.value = false;
-};
-
-const clickSave = async () => {
-  await formInformation.value.validate().then(async (suc: boolean) => {
-    if (suc) {
-      await formAddress.value.validate().then(async (suc: boolean) => {
-        if (suc) {
-          await formEducation.value.validate().then(async (suc: boolean) => {
-            if (suc) {
-              await formOccupation.value
-                .validate()
-                .then(async (suc: boolean) => {
-                  if (suc) {
-                    await formContact.value
-                      .validate()
-                      .then(async (suc: boolean) => {
-                        if (suc) {
-                          showLoader();
-                          await http
-                            .post(config.API.candidateId(candidateId.value), {
-                              prefixId: defaultInformation.value.prefixId,
-                              lastName: defaultInformation.value.lastname,
-                              dateOfBirth:
-                                defaultInformation.value.birthDate == null
-                                  ? null
-                                  : dateToISO(
-                                      defaultInformation.value.birthDate
-                                    ),
-                              citizenId: defaultInformation.value.cardid,
-                              firstName: defaultInformation.value.firstname,
-                              religionId: defaultInformation.value.religionId,
-                              nationality: defaultInformation.value.nationality,
-                              email: defaultInformation.value.email,
-                              mobilePhone: defaultInformation.value.phone,
-                              telephone: defaultInformation.value.tel,
-                              knowledge: defaultInformation.value.knowledge,
-                              occupationOrg: defaultOccupation.value.org,
-                              occupationPile: defaultOccupation.value.pile,
-                              occupationGroup: defaultOccupation.value.group,
-                              occupationSalary: defaultOccupation.value.salary,
-                              occupationPosition:
-                                defaultOccupation.value.position,
-                              occupationPositionType:
-                                defaultOccupation.value.positionType,
-                              occupationTelephone: defaultOccupation.value.tel,
-                              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,
-                              educationLevelExamId:
-                                defaultEducation.value.educationLevelExamId,
-                              educationName:
-                                defaultEducation.value.educationName,
-                              educationMajor:
-                                defaultEducation.value.educationMajor,
-                              educationLocation:
-                                defaultEducation.value.educationLocation,
-                              educationType:
-                                defaultEducation.value.educationType,
-                              educationEndDate:
-                                defaultEducation.value.educationEndDate == null
-                                  ? null
-                                  : dateToISO(
-                                      defaultEducation.value.educationEndDate
-                                    ),
-                              educationScores:
-                                defaultEducation.value.educationScores,
-                              educationLevelHighId:
-                                defaultEducation.value.educationLevelHighId,
-                              contactPrefixId:
-                                defaultContact.value.contactPrefixId,
-                              contactFirstname:
-                                defaultContact.value.contactFirstname,
-                              contactLastname:
-                                defaultContact.value.contactLastname,
-                              contactRelations:
-                                defaultContact.value.contactRelations,
-                              contactTel: defaultContact.value.contactTel,
-                            })
-                            .then(async () => {
-                              success($q, "บันทึกข้อมูลส่วนตัวสำเร็จ");
-                            })
-                            .catch((e) => {
-                              messageError($q, e);
-                            })
-                            .finally(async () => {
-                              hideLoader();
-                            });
-                        } else {
-                          notifyError($q, "กรุณากรอกข้อมูลให้ครบถ้วน");
-                        }
-                      });
-                  } else {
-                    notifyError($q, "กรุณากรอกข้อมูลให้ครบถ้วน");
-                  }
-                });
-            } else {
-              notifyError($q, "กรุณากรอกข้อมูลให้ครบถ้วน");
-            }
-          });
-        } else {
-          notifyError($q, "กรุณากรอกข้อมูลให้ครบถ้วน");
-        }
-      });
-    } else {
-      notifyError($q, "กรุณากรอกข้อมูลให้ครบถ้วน");
-    }
-  });
-};
-</script>
-
 <style lang="scss" scoped></style>
diff --git a/src/modules/03_recruiting/views/02_qualify/Manage.vue b/src/modules/03_recruiting/views/02_qualify/Manage.vue
index f81c7776c..97acc01a0 100644
--- a/src/modules/03_recruiting/views/02_qualify/Manage.vue
+++ b/src/modules/03_recruiting/views/02_qualify/Manage.vue
@@ -1,57 +1,11 @@
 <!-- page:จัดการรอบการสอบ สรรหา -->
-<template>
-  <div class="toptitle text-dark col-12 row items-center">
-    จัดการรายชื่อคัดเลือก
-  </div>
-  <q-card flat bordered class="col-12 q-mt-sm q-pt-sm">
-    <data-table
-      :rows="rows"
-      :columns="columns"
-      :filter="filter"
-      :visible-columns="visibleColumns"
-      v-model:inputfilter="filter"
-      v-model:inputvisible="visibleColumns"
-      :pagination="initialPagination"
-      :nornmalData="true"
-      :paging="true"
-    >
-      <template #columns="props">
-        <q-tr :props="props" class="cursor-pointer">
-          <q-td
-            v-for="col in props.cols"
-            :key="col.name"
-            :props="props"
-            @click="checkPermission($route)?.attrIsGet && viewDetail(props.row)"
-          >
-            <div v-if="col.name == 'no'">
-              {{ props.rowIndex + 1 }}
-            </div>
-            <div v-else-if="col.name == 'yearly'">
-              {{ props.row.round }}/{{ col.value + 543 }}
-            </div>
-            <div
-              v-else-if="
-                col.name == 'dateRegister' ||
-                col.name == 'datePayment' ||
-                col.name == 'dateAnnouncement'
-              "
-            >
-              {{ dateThaiRange(col.value) }}
-            </div>
-            <div v-else>
-              {{ col.value }}
-            </div>
-          </q-td>
-        </q-tr>
-      </template>
-    </data-table>
-  </q-card>
-</template>
 <script setup lang="ts">
 import type { QTableProps } from "quasar";
-import { checkPermission } from "@/utils/permissions";
 import { onMounted, ref } from "vue";
 import { useRouter } from "vue-router";
+import { useQuasar } from "quasar";
+
+import { checkPermission } from "@/utils/permissions";
 import { useCounterMixin } from "@/stores/mixin";
 import type { Pagination } from "@/modules/03_recruiting/interface/index/Main";
 import http from "@/plugins/http";
@@ -59,13 +13,12 @@ import config from "@/app.config";
 
 import type { RequestPeriodExam } from "@/modules/03_recruiting/interface/request/Period";
 import type { ResponsePeriodExam } from "@/modules/03_recruiting/interface/response/Period";
-import { useQuasar } from "quasar";
 
 const $q = useQuasar();
-
 const router = useRouter();
 const mixin = useCounterMixin();
 const { date2Thai, messageError, showLoader, hideLoader } = mixin;
+
 const rows = ref<ResponsePeriodExam[]>([]);
 const initialPagination = ref<Pagination>({
   rowsPerPage: 0,
@@ -162,12 +115,8 @@ const columns = ref<QTableProps["columns"]>([
   },
 ]);
 
-onMounted(async () => {
-  hideLoader();
-  await fetchData();
-});
-
-const fetchData = async () => {
+/** ดึงข้อมูลรายการ */
+async function fetchData() {
   showLoader();
   await http
     .get(config.API.periodExamType("exam"))
@@ -225,17 +174,18 @@ const fetchData = async () => {
     .finally(() => {
       hideLoader();
     });
-};
+}
 
-const viewDetail = (row: any) => {
+/** ไปหน้ารายละเอียด */
+function viewDetail(row: any) {
   router.push(`/qualify/manage/${row.id}`);
-};
+}
 
 /**
  * แปลงช่วงวันที่ถ้า2ค่าเป็นวันเดียวกันจะโชววันเดียวแต่ถ้าไม่เท่ากันจะแสดงเป็นช่วง
  * @param val ช่วงวันที่
  */
-const dateThaiRange = (val: [Date, Date]) => {
+function dateThaiRange(val: [Date, Date]) {
   if (val === null) {
     return "-";
   } else if (date2Thai(val[0], true) === date2Thai(val[1], true)) {
@@ -243,7 +193,60 @@ const dateThaiRange = (val: [Date, Date]) => {
   } else {
     return `${date2Thai(val[0], true)} - ${date2Thai(val[1], true)}`;
   }
-};
+}
+
+onMounted(async () => {
+  hideLoader();
+  await fetchData();
+});
 </script>
+<template>
+  <div class="toptitle text-dark col-12 row items-center">
+    จัดการรายชื่อคัดเลือก
+  </div>
+  <q-card flat bordered class="col-12 q-mt-sm q-pt-sm">
+    <data-table
+      :rows="rows"
+      :columns="columns"
+      :filter="filter"
+      :visible-columns="visibleColumns"
+      v-model:inputfilter="filter"
+      v-model:inputvisible="visibleColumns"
+      :pagination="initialPagination"
+      :nornmalData="true"
+      :paging="true"
+    >
+      <template #columns="props">
+        <q-tr :props="props" class="cursor-pointer">
+          <q-td
+            v-for="col in props.cols"
+            :key="col.name"
+            :props="props"
+            @click="checkPermission($route)?.attrIsGet && viewDetail(props.row)"
+          >
+            <div v-if="col.name == 'no'">
+              {{ props.rowIndex + 1 }}
+            </div>
+            <div v-else-if="col.name == 'yearly'">
+              {{ props.row.round }}/{{ col.value + 543 }}
+            </div>
+            <div
+              v-else-if="
+                col.name == 'dateRegister' ||
+                col.name == 'datePayment' ||
+                col.name == 'dateAnnouncement'
+              "
+            >
+              {{ dateThaiRange(col.value) }}
+            </div>
+            <div v-else>
+              {{ col.value }}
+            </div>
+          </q-td>
+        </q-tr>
+      </template>
+    </data-table>
+  </q-card>
+</template>
 
 <style></style>
diff --git a/src/modules/03_recruiting/views/02_qualify/Payment.vue b/src/modules/03_recruiting/views/02_qualify/Payment.vue
index 465a0f47a..c01569baa 100644
--- a/src/modules/03_recruiting/views/02_qualify/Payment.vue
+++ b/src/modules/03_recruiting/views/02_qualify/Payment.vue
@@ -1,3 +1,115 @@
+<script setup lang="ts">
+import { useRoute, useRouter } from "vue-router";
+import { onMounted, ref } from "vue";
+import { useQuasar } from "quasar";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
+
+const $q = useQuasar();
+const router = useRouter();
+const route = useRoute();
+const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
+const { success, messageError, showLoader, hideLoader } = mixin;
+
+const filePayment = ref<File[]>([]);
+const bank = ref<any>([]);
+const fee = ref<number>();
+const examId = ref<string>(route.params.examId.toString());
+const candidateId = ref<string>(route.params.candidateId.toString());
+const modal = ref<boolean>(false);
+const approve = ref<string>("1");
+const reason = ref<string>("");
+const img = ref<string>("");
+const props = defineProps({
+  fetchStep: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  status: {
+    type: String,
+    required: true,
+  },
+});
+
+async function fetchData() {
+  showLoader();
+  await http
+    .get(config.API.candidatePayment(candidateId.value))
+    .then((res) => {
+      const data = res.data.result;
+      img.value = data;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+async function fetchPaymentExam() {
+  showLoader();
+  await http
+    .get(config.API.periodExamPayment(examId.value))
+    .then((res) => {
+      const data = res.data.result;
+      bank.value = data.bankExam;
+      fee.value = data.fee;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      hideLoader();
+    });
+}
+
+async function confirm(status: boolean, reason: string) {
+  showLoader();
+  await http
+    .put(config.API.candidateCheckPayment(candidateId.value), {
+      status: status,
+      reason: reason,
+    })
+    .then((res) => {})
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      hideLoader();
+      success($q, "ตรวจสอบข้อมูลชำระเงินสำเร็จ");
+      router.push(`/qualify/manage/${examId.value}`);
+    });
+}
+
+function checkSave() {
+  if (approve.value == "1") {
+    confirm(true, "");
+  } else {
+    confirm(false, reason.value);
+  }
+}
+
+function openImg() {
+  window.open(img.value);
+}
+
+function modalCheck() {
+  modal.value = true;
+}
+
+function close() {
+  modal.value = false;
+}
+
+onMounted(async () => {
+  hideLoader();
+  await fetchPaymentExam();
+  await fetchData();
+});
+</script>
 <template>
   <div class="toptitle text-dark col-12 row items-center">
     <q-btn
@@ -271,113 +383,3 @@
     </q-card>
   </q-dialog>
 </template>
-<script setup lang="ts">
-import { useRoute, useRouter } from "vue-router";
-import { onMounted, ref } from "vue";
-import { useQuasar } from "quasar";
-import { useCounterMixin } from "@/stores/mixin";
-import http from "@/plugins/http";
-import config from "@/app.config";
-
-const filePayment = ref<File[]>([]);
-const bank = ref<any>([]);
-const fee = ref<number>();
-const $q = useQuasar();
-const router = useRouter();
-const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
-const { success, messageError, showLoader, hideLoader } = mixin;
-const route = useRoute();
-const examId = ref<string>(route.params.examId.toString());
-const candidateId = ref<string>(route.params.candidateId.toString());
-const modal = ref<boolean>(false);
-const approve = ref<string>("1");
-const reason = ref<string>("");
-const img = ref<string>("");
-const props = defineProps({
-  fetchStep: {
-    type: Function,
-    default: () => console.log("not function"),
-  },
-  status: {
-    type: String,
-    required: true,
-  },
-});
-
-onMounted(async () => {
-  hideLoader();
-  await fetchPaymentExam();
-  await fetchData();
-});
-
-const fetchData = async () => {
-  showLoader();
-  await http
-    .get(config.API.candidatePayment(candidateId.value))
-    .then((res) => {
-      const data = res.data.result;
-      img.value = data;
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-};
-
-const fetchPaymentExam = async () => {
-  showLoader();
-  await http
-    .get(config.API.periodExamPayment(examId.value))
-    .then((res) => {
-      const data = res.data.result;
-      bank.value = data.bankExam;
-      fee.value = data.fee;
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      hideLoader();
-    });
-};
-
-const confirm = async (status: boolean, reason: string) => {
-  showLoader();
-  await http
-    .put(config.API.candidateCheckPayment(candidateId.value), {
-      status: status,
-      reason: reason,
-    })
-    .then((res) => {})
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      hideLoader();
-      success($q, "ตรวจสอบข้อมูลชำระเงินสำเร็จ");
-      router.push(`/qualify/manage/${examId.value}`);
-    });
-};
-
-const checkSave = () => {
-  if (approve.value == "1") {
-    confirm(true, "");
-  } else {
-    confirm(false, reason.value);
-  }
-};
-
-const openImg = () => {
-  window.open(img.value);
-};
-
-const modalCheck = () => {
-  modal.value = true;
-};
-
-const close = () => {
-  modal.value = false;
-};
-</script>
diff --git a/src/modules/03_recruiting/views/02_qualify/Period.vue b/src/modules/03_recruiting/views/02_qualify/Period.vue
index 8b102f14d..39a48379b 100644
--- a/src/modules/03_recruiting/views/02_qualify/Period.vue
+++ b/src/modules/03_recruiting/views/02_qualify/Period.vue
@@ -1,91 +1,15 @@
 <!-- page:จัดการรอบการสอบ สรรหา -->
-<template>
-  <div class="toptitle text-dark col-12 row items-center">
-    จัดการรอบคัดเลือก
-  </div>
-  <q-card flat bordered class="col-12 q-mt-sm q-pt-sm q-pa-md">
-    <div>
-      <Table
-        style="max-height: 80vh"
-        :rows="examData"
-        :columns="columns"
-        :filter="filter"
-        :visible-columns="visibleColumns"
-        v-model:inputfilter="filter"
-        v-model:inputvisible="visibleColumns"
-        :pagination="initialPagination"
-        :nornmalData="true"
-        :add="clickAdd"
-        :paging="true"
-        :titleText="''"
-      >
-        <template #columns="props">
-          <q-tr :props="props" class="cursor-pointer">
-            <q-td>
-              <q-btn
-                v-if="checkPermission($route)?.attrIsDelete"
-                dense
-                size="12px"
-                flat
-                round
-                color="red"
-                @click="clickDelete(props.row.id)"
-                icon="mdi-delete"
-              >
-                <q-tooltip>ลบข้อมูล</q-tooltip>
-              </q-btn>
-            </q-td>
-            <q-td
-              v-for="col in props.cols"
-              :key="col.name"
-              :props="props"
-              @click="
-                checkPermission($route)?.attrIsUpdate
-                  ? clickEdit(props.row)
-                  : undefined
-              "
-            >
-              <div v-if="col.name == 'no'" class="table_ellipsis2">
-                {{ props.rowIndex + 1 }}
-              </div>
-              <div v-else-if="col.name == 'yearly'" class="table_ellipsis2">
-                {{ props.row.round }}/{{ col.value + 543 }}
-              </div>
-              <div
-                v-else-if="
-                  col.name == 'dateRegister' ||
-                  col.name == 'datePayment' ||
-                  col.name == 'dateAnnouncement'
-                "
-                class="table_ellipsis2"
-              >
-                {{ dateThaiRange(col.value) }}
-              </div>
-              <div
-                v-else-if="col.name == 'announcementExam'"
-                class="table_ellipsis2"
-              >
-                {{ col.value ? "ข่าวการสอบ" : "ข่าวทั่วไป" }}
-              </div>
-              <div v-else-if="col.name == 'category'" class="table_ellipsis2">
-                {{ typeCategoryExam(col.value) }}
-              </div>
-              <div v-else class="table_ellipsis2">
-                {{ col.value }}
-              </div>
-            </q-td>
-          </q-tr>
-        </template>
-      </Table>
-    </div>
-  </q-card>
-</template>
 <script setup lang="ts">
-import { checkPermission } from "@/utils/permissions";
-import type { QTableProps } from "quasar";
 import { onMounted, ref } from "vue";
+import type { QTableProps } from "quasar";
 import { useQuasar } from "quasar";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useRouter } from "vue-router";
+import { checkPermission } from "@/utils/permissions";
 import { useCounterMixin } from "@/stores/mixin";
+
 import type {
   RequestPeriodExam,
   RequestPosition,
@@ -93,15 +17,11 @@ import type {
 } from "@/modules/03_recruiting/interface/request/Period";
 import type {
   ResponsePeriodExam,
-  ResponsePosition,
   ResponsePayment,
 } from "@/modules/03_recruiting/interface/response/Period";
 import type { Pagination } from "@/modules/03_recruiting/interface/index/Main";
-import Table from "@/modules/03_recruiting/components/Table.vue";
-import http from "@/plugins/http";
-import config from "@/app.config";
 
-import { useRouter } from "vue-router";
+import Table from "@/modules/03_recruiting/components/Table.vue";
 
 const $q = useQuasar(); // show dialog
 const mixin = useCounterMixin();
@@ -123,7 +43,6 @@ const visibleColumns = ref<String[]>([
   "no",
   "announcementExam",
   "yearly",
-  //   "category",
   "name",
   "document",
   "dateAnnouncement",
@@ -215,12 +134,7 @@ const columns = ref<QTableProps["columns"]>([
   },
 ]);
 
-onMounted(async () => {
-  hideLoader();
-  await fetchData();
-});
-
-const fetchData = async () => {
+async function fetchData() {
   showLoader();
   await http
     .get(config.API.periodExamType("all"))
@@ -305,13 +219,13 @@ const fetchData = async () => {
     .finally(() => {
       hideLoader();
     });
-};
+}
 
-const clickEdit = (col: ResponsePeriodExam) => {
+function clickEdit(col: ResponsePeriodExam) {
   router.push(`/qualify/period/${col.id}`);
-};
+}
 
-const clickDelete = (id: string) => {
+function clickDelete(id: string) {
   $q.dialog({
     title: "ยืนยันการลบข้อมูล",
     message: "ต้องการลบข้อมูลนี้ใช่หรือไม่?",
@@ -326,13 +240,13 @@ const clickDelete = (id: string) => {
     })
     .onCancel(() => {})
     .onDismiss(() => {});
-};
+}
 
-const clickAdd = () => {
+function clickAdd() {
   router.push({ name: "qualifyPeriodAdd" });
-};
+}
 
-const deleteData = async (id: string) => {
+async function deleteData(id: string) {
   showLoader();
   await http
     .delete(config.API.periodExamId(id))
@@ -346,13 +260,13 @@ const deleteData = async (id: string) => {
       hideLoader();
       await fetchData();
     });
-};
+}
 
 /**
  * แปลงช่วงวันที่ถ้า2ค่าเป็นวันเดียวกันจะโชววันเดียวแต่ถ้าไม่เท่ากันจะแสดงเป็นช่วง
  * @param val ช่วงวันที่
  */
-const dateThaiRange = (val: [Date, Date]) => {
+function dateThaiRange(val: [Date, Date]) {
   if (val === null) {
     return "-";
   } else if (date2Thai(val[0], true) === date2Thai(val[1], true)) {
@@ -360,7 +274,93 @@ const dateThaiRange = (val: [Date, Date]) => {
   } else {
     return `${date2Thai(val[0], true)} - ${date2Thai(val[1], true)}`;
   }
-};
+}
+
+onMounted(async () => {
+  hideLoader();
+  await fetchData();
+});
 </script>
+<template>
+  <div class="toptitle text-dark col-12 row items-center">
+    จัดการรอบคัดเลือก
+  </div>
+  <q-card flat bordered class="col-12 q-mt-sm q-pt-sm q-pa-md">
+    <div>
+      <Table
+        style="max-height: 80vh"
+        :rows="examData"
+        :columns="columns"
+        :filter="filter"
+        :visible-columns="visibleColumns"
+        v-model:inputfilter="filter"
+        v-model:inputvisible="visibleColumns"
+        :pagination="initialPagination"
+        :nornmalData="true"
+        :add="clickAdd"
+        :paging="true"
+        :titleText="''"
+      >
+        <template #columns="props">
+          <q-tr :props="props" class="cursor-pointer">
+            <q-td>
+              <q-btn
+                v-if="checkPermission($route)?.attrIsDelete"
+                dense
+                size="12px"
+                flat
+                round
+                color="red"
+                @click="clickDelete(props.row.id)"
+                icon="mdi-delete"
+              >
+                <q-tooltip>ลบข้อมูล</q-tooltip>
+              </q-btn>
+            </q-td>
+            <q-td
+              v-for="col in props.cols"
+              :key="col.name"
+              :props="props"
+              @click="
+                checkPermission($route)?.attrIsUpdate
+                  ? clickEdit(props.row)
+                  : undefined
+              "
+            >
+              <div v-if="col.name == 'no'" class="table_ellipsis2">
+                {{ props.rowIndex + 1 }}
+              </div>
+              <div v-else-if="col.name == 'yearly'" class="table_ellipsis2">
+                {{ props.row.round }}/{{ col.value + 543 }}
+              </div>
+              <div
+                v-else-if="
+                  col.name == 'dateRegister' ||
+                  col.name == 'datePayment' ||
+                  col.name == 'dateAnnouncement'
+                "
+                class="table_ellipsis2"
+              >
+                {{ dateThaiRange(col.value) }}
+              </div>
+              <div
+                v-else-if="col.name == 'announcementExam'"
+                class="table_ellipsis2"
+              >
+                {{ col.value ? "ข่าวการสอบ" : "ข่าวทั่วไป" }}
+              </div>
+              <div v-else-if="col.name == 'category'" class="table_ellipsis2">
+                {{ typeCategoryExam(col.value) }}
+              </div>
+              <div v-else class="table_ellipsis2">
+                {{ col.value }}
+              </div>
+            </q-td>
+          </q-tr>
+        </template>
+      </Table>
+    </div>
+  </q-card>
+</template>
 
 <style></style>
diff --git a/src/modules/03_recruiting/views/02_qualify/PeriodAdd.vue b/src/modules/03_recruiting/views/02_qualify/PeriodAdd.vue
index 7168912c0..55a63d840 100644
--- a/src/modules/03_recruiting/views/02_qualify/PeriodAdd.vue
+++ b/src/modules/03_recruiting/views/02_qualify/PeriodAdd.vue
@@ -1,4 +1,727 @@
 <!-- page:จัดการรอบการสอบ สรรหา -->
+<script setup lang="ts">
+import type { QTableProps } from "quasar";
+import { onMounted, ref, watch } from "vue";
+import { useQuasar, QForm } from "quasar";
+import { useRouter, useRoute } from "vue-router";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
+
+import type {
+  RequestPosition,
+  RequestPayment,
+} from "@/modules/03_recruiting/interface/request/Period";
+import type {
+  ResponsePosition,
+  ResponsePayment,
+} from "@/modules/03_recruiting/interface/response/Period";
+import type {
+  DataOption,
+  UploadType,
+} from "@/modules/02_organizational/interface/index/Main";
+
+import ProfileTable from "@/modules/03_recruiting/components/Table1.vue";
+
+const $q = useQuasar(); // show dialog
+const mixin = useCounterMixin();
+const router = useRouter();
+const route = useRoute();
+const { date2Thai, success, dateToISO, messageError, showLoader, hideLoader } =
+  mixin;
+
+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>(
+  `<div style="text-align: center;"><span style="color: rgb(193, 0, 21); font-weight: 700; letter-spacing: 0.14992px;">ข้อกำหนดและเงื่อนไขฉบับนี้ ถือเป็นข้อตกลงในการเก็บข้อมูล</span><br></div><div style="text-align: center;"><span style="color: rgb(193, 0, 21); font-weight: 700; letter-spacing: 0.14992px;"><br></span></div><div><p style="margin-bottom: 16px;"><span style="font-size: 14px;">&nbsp; &nbsp;&nbsp;ข้าพเจ้าได้ศึกษาและทำความเข้าใจพระราชบัญญัติคุ้มครองข้อมูลส่วนบุคคล พ.ศ. 2562 ตลอดจนประกาศและระเบียบที่เกี่ยวข้องโดยละเอียดครบถ้วนแล้ว ข้าพเจ้ายินยอมให้หน่วยงานหรือบุคคลที่เกี่ยวข้องกับการดำเนินการสรรหา สามารถเก็บ รวบรวม ใช้และเปิดเผยข้อมูลส่วนบุคคลที่เกี่ยวข้องกับข้าพเจ้า เพื่อประโยชน์ของทางราชการตามกฎหมายที่เกี่ยวข้อง</span></p></div>`
+);
+const editorConfirm = ref<string>(
+  `<div style="text-align: center;"><span style="color: rgb(93, 190, 21); font-weight: 700; letter-spacing: 0.14992px;">คำรับรอง</span><br></div><div><div style=""><div style=""><font color="#35473c"><span style="font-size: 14px;"><br></span></font></div><div style=""><font color="#35473c"><span style="font-size: 14px;">1.<span style="white-space: pre;"> </span>ข้าพเจ้าขอให้คำรับรองว่า ข้อความดังกล่าวข้างต้นเป็นจริงทุกประการ และข้าพเจ้ามีคุณสมบัติทั่วไปและไม่มีลักษณะต้องห้ามตามมาตรา 43 แห่งพระราชบัญญัติระเบียบข้าราชการกรุงเทพมหานครและบุคลากรกรุงเทพมหานคร พ.ศ. 2554 และมีคุณสมบัติเฉพาะสำหรับตำแหน่งที่สมัครตรงตามประกาศรับสมัคร</span></font></div><div style=""><font color="#35473c"><span style="font-size: 14px;">2.<span style="white-space:pre"> </span>กรณีข้าพเจ้ามีลักษณะต้องห้าม ตามมาตรา 43 ข. แห่งพระราชบัญญัติระเบียบข้าราชการกรุงเทพมหานครและบุคลากรกรุงเทพมหานคร พ.ศ. 2554 และประสงค์จะยื่นคำขอยกเว้นเข้ารับราชการฯ ต่อสำนักงาน ก.ก. ตามระเบียบ ก.ก. ว่าด้วยการยกเว้นให้ผู้มีลักษณะต้องห้ามเข้ารับราชการเป็นข้าราชการกรุงเทพมหานคร พ.ศ. 2556 ตามมติ ก.ก. ครั้งที่ 7/2556 เมื่อวันที่ 15 สิงหาคม 2556 ข้าพเจ้าจะยื่นคำขอยกเว้นฯ ภายในวันปิดรับสมัคร ทั้งนี้ หากยื่นภายหลังกำหนด สำนักงาน ก.ก. จะไม่รับคำขอดังกล่าว</span></font></div><div style=""><font color="#35473c"><span style="font-size: 14px;">3.<span style="white-space:pre"> </span>ข้าพเจ้าจะยื่นหลักฐานและเอกสารที่แสดงว่า เป็นผู้มีคุณสมบัติทั่วไปและมีคุณสมบัติเฉพาะสำหรับตำแหน่งที่สมัครตรงตามประกาศรับสมัครภายในระยะเวลาที่กำหนดตามประกาศฯ หากมีการตรวจสอบหลักฐานและเอกสาร และหรือคุณวุฒิการศึกษาของข้าพเจ้าในภายหลังปรากฏว่าข้าพเจ้ามีคุณสมบัติไม่ตรงหรือมีลักษณะต้องห้ามตามประกาศรับสมัครหรือไม่ได้รับการยกเว้นให้ถือว่า ข้าพเจ้าเป็นผู้ขาดคุณสมบัติในการสมัครครั้งนี้มาตั้งแต่ต้น และไม่มีสิทธิได้รับการบรรจุและแต่งตั้งให้ดำรงตำแหน่ง และข้าพเจ้าจะไม่มีสิทธิเรียกร้องใด ๆ ทั้งสิ้น และหากข้าพเจ้าจงใจกรอกข้อความอันเป็นเท็จ อาจมีความผิดทางอาญาฐานแจ้งความเท็จต่อเจ้าพนักงาน ตามประมวลกฎหมายอาญา มาตรา 137</span></font></div><div style=""><font color="#35473c"><span style="font-size: 14px;">4.<span style="white-space:pre"> </span>ข้าพเจ้าได้ศึกษาและทำความเข้าใจพระราชบัญญัติคุ้มครองข้อมูลส่วนบุคคล พ.ศ. 2562 ตลอดจนประกาศและระเบียบที่เกี่ยวข้องโดยละเอียดครบถ้วนแล้ว ข้าพเจ้าขอแสดงความยินยอมให้หน่วยงานหรือบุคคลที่เกี่ยวข้องกับการดำเนินการสรรหา สามารถเก็บ รวบรวม ใช้และเปิดเผยข้อมูลส่วนบุคคลที่เกี่ยวข้องกับข้าพเจ้า เพื่อประโยชน์ของทางราชการตามกฎหมายที่เกี่ยวข้อง</span></font></div><div style=""><font color="#35473c"><span style="font-size: 14px;">5.<span style="white-space:pre"> </span>ข้าพเจ้ารับทราบว่าการส่งใบสมัครคัดเลือกฯ พร้อมเอกสารนี้ ยังไม่ได้รับการตรวจสอบคุณสมบัติตามหลักเกณฑ์ ประกาศรับสมัครคัดเลือก และเงื่อนไขต่าง ๆ โดยจะได้รับการตรวจสอบคุณสมบัติเมื่อเป็นผู้สอบผ่านข้อเขียนภาคความรู้ความสามารถที่ใช้เฉพาะตำแหน่งแล้วเท่านั้น</span></font></div></div>`
+);
+const checkDocument = ref<boolean>(false);
+const checkDisability = ref<boolean>(false);
+const announcementExam = ref<boolean>(true);
+const fee = ref<number>(0);
+const round = ref<number>(1);
+const yearly = ref<number>(new Date().getFullYear());
+const nameRaw = ref<number | null>(null);
+const roundRaw = ref<number | null>(null);
+const yearlyRaw = ref<number | null>(null);
+const dateRegister = ref<[Date, Date] | null>(null); //วันที่สมัคร
+const datePayment = ref<[Date, Date] | null>(null); //วันที่จ่ายเงิน
+const dateAnnouncement = ref<[Date, Date] | null>(null); //วันที่ประกาศ
+const dateAnnounce = ref<Date | null>(null); //วันประกาศผลสอบ
+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 organizationShortName = ref<DataOption>();
+const organizationName = ref<DataOption>();
+const examTypeOptions = [
+  { name: "ทั่วไป", id: "normol" },
+  { name: "แพทย์", id: "docter" },
+];
+const category = ref<string>("");
+
+const fileDocDataUpload = ref<File[]>([]);
+const fileDocs = ref<UploadType[]>([]);
+const fileImgDataUpload = ref<File[]>([]);
+const fileImgs = ref<UploadType[]>([]);
+const id = ref<string>("");
+const pay = ref<string>("payment1");
+const filterPayment = ref<string>(""); //search data table
+const filterPosition = ref<string>(""); //search data table
+const edit = ref<boolean>(false);
+const rowsPayment = ref<ResponsePayment[]>([]);
+const rowsPosition = ref<any>([]);
+const visibleColumnsPayment = ref<String[]>([
+  "accountNumber",
+  "bankName",
+  "accountName",
+]);
+const columnsPayment = ref<QTableProps["columns"]>([
+  {
+    name: "accountNumber",
+    align: "left",
+    label: "เลขบัญชี",
+    sortable: true,
+    field: "accountNumber",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "bankName",
+    align: "left",
+    label: "ธนาคาร",
+    sortable: true,
+    field: "bankName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "accountName",
+    align: "left",
+    label: "ชื่อบัญชี",
+    sortable: true,
+    field: "accountName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+const visibleColumnsPosition = ref<String[]>([
+  "code",
+  "position",
+  "level",
+  "type",
+  "highDegree",
+]);
+const columnsPosition = ref<QTableProps["columns"]>([
+  {
+    name: "code",
+    align: "left",
+    label: "รหัสประจำตำแหน่งที่สอบ",
+    sortable: true,
+    field: "code",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "position",
+    align: "left",
+    label: "ตำแหน่ง",
+    sortable: true,
+    field: "position",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    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: "ประเภทตำแหน่ง",
+    sortable: true,
+    field: "highDegree",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "type",
+    align: "left",
+    label: "ประเภทแบบฟอร์ม",
+    sortable: true,
+    field: "type",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+
+/** ย้อนกลับไปหน้าหลัก */
+function clickBack() {
+  router.push({ name: "qualifyPeriod" });
+}
+
+/** ดึงข้อมูล */
+async function fetchData() {
+  showLoader();
+  await http
+    .get(config.API.periodExamId(id.value))
+    .then((res) => {
+      const data = res.data.result;
+      const positionData: ResponsePosition[] = [];
+      data.positionExam.map((r: RequestPosition) => {
+        positionData.push({
+          id: r.id,
+          position: {
+            id: r.positionId,
+            name: r.positionName,
+          },
+          level: {
+            id: r.positionLevelId,
+            name: r.positionLevelName,
+          },
+          type: {
+            id: r.typeId,
+            name: r.typeName,
+          },
+          code: r.code,
+          highDegree: r.highDegree == true ? "1" : "0",
+        });
+      });
+      const bankData: ResponsePayment[] = [];
+      data.bankExam.map((r: RequestPayment) => {
+        bankData.push({
+          id: r.id,
+          accountNumber: r.accountNumber,
+          bankName: r.bankName,
+          accountName: r.accountName,
+        });
+      });
+      id.value = data.id;
+      name.value = data.name;
+      nameRaw.value = data.name;
+      checkDocument.value = data.checkDocument;
+      checkDisability.value = data.checkDisability;
+      announcementExam.value = data.announcementExam;
+      round.value = data.round;
+      yearly.value = data.year;
+      roundRaw.value = data.round;
+      yearlyRaw.value = data.year;
+      fee.value = data.fee;
+      dateAnnounce.value =
+        data.announcementDate != null ? new Date(data.announcementDate) : null;
+      dateAnnouncement.value =
+        data.announcementStartDate != null && data.announcementEndDate != null
+          ? [
+              new Date(data.announcementStartDate),
+              new Date(data.announcementEndDate),
+            ]
+          : null;
+      dateExam.value = data.examDate != null ? new Date(data.examDate) : null;
+      dateRegister.value =
+        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)]
+          : null;
+      if (data.organizationCodeId != null) {
+        organizationShortName.value = {
+          id: data.organizationCodeId,
+          name: data.organizationCodeName,
+        };
+      }
+      if (data.organizationId != null) {
+        organizationName.value = {
+          id: data.organizationId,
+          name: data.organizationName,
+        };
+      }
+      rowsPosition.value = positionData;
+      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;
+      category.value = data.category;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/**
+ * get รายการ ตำแหน่งในสายงาน
+ */
+async function fetchPositionPath() {
+  showLoader();
+  await http
+    .get(config.API.positionPath)
+    .then((res) => {
+      const data = res.data.result;
+      let option: DataOption[] = [];
+      data.map((r: DataOption) => {
+        option.push({
+          id: r.id.toString(),
+          name: r.name.toString(),
+        });
+      });
+      positionPathOptions.value = option;
+      positionPathFilters.value = option;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/**
+ * get รายการ ตำแหน่งระดับ
+ */
+async function fetchPositionLevel() {
+  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(),
+          level: r.level,
+        });
+      });
+      positionLevelOptions.value = option.filter(
+        (v: DataOption) => v.level === 0
+      );
+      positionLevelFilters.value = option.filter(
+        (v: DataOption) => v.level === 0
+      );
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/**
+ * ฟังชั่น filter
+ * @param val input
+ * @param update Function #quasar
+ * @param refData เเยก case
+ */
+function 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;
+  }
+}
+
+/**
+ * update ปี
+ * @param e ปี 
+ */
+async function updateYear(e: number) {
+  yearly.value = e;
+}
+
+/** saveข้อมูล เพิ่ม แก้ไข */
+async function checkSave() {
+  if (myForm.value !== null) {
+    myForm.value.validate().then(async (success) => {
+      if (success) {
+        if (edit.value) {
+          await editData(id.value);
+        } else {
+          await addData();
+        }
+      }
+    });
+  }
+}
+
+/** body สำหรับ save ข้อมูล */
+function sendData() {
+  const positionData: RequestPosition[] = [];
+  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,
+      code: r.code,
+      highDegree: r.highDegree == "1" ? true : false,
+    });
+  });
+  if (fee.value == 0) {
+    datePayment.value = null;
+  }
+  const valueData: any = {
+    announcementDate:
+      dateAnnounce.value != null ? dateToISO(dateAnnounce.value) : null,
+    announcementEndDate:
+      dateAnnouncement.value != null
+        ? dateToISO(dateAnnouncement.value[1])
+        : null,
+    announcementStartDate:
+      dateAnnouncement.value != null
+        ? dateToISO(dateAnnouncement.value[0])
+        : null,
+    examDate: dateExam.value != null ? dateToISO(dateExam.value) : null,
+    bankExam: rowsPayment.value,
+    checkDisability: checkDisability.value,
+    announcementExam: announcementExam.value,
+    checkDocument: checkDocument.value,
+    detail: editor.value,
+    editorCondition: editorCondition.value,
+    editorConfirm: editorConfirm.value,
+    fee: fee.value,
+    id: "",
+    isActive: true,
+    name: name.value,
+    note: note.value,
+    organizationCodeId: organizationShortName.value?.id,
+    organizationCodeName: organizationShortName.value?.name,
+    organizationId: organizationName.value?.id,
+    organizationName: organizationName.value?.name,
+    paymentEndDate:
+      datePayment.value != null ? dateToISO(datePayment.value[1]) : null,
+    paymentKrungThai: pay.value,
+    paymentStartDate:
+      datePayment.value != null ? dateToISO(datePayment.value[0]) : null,
+    positionExam: positionData,
+    registerEndDate:
+      dateRegister.value != null ? dateToISO(dateRegister.value[1]) : null,
+    registerStartDate:
+      dateRegister.value != null ? dateToISO(dateRegister.value[0]) : null,
+    round: round.value,
+    year: yearly.value,
+    category: category.value,
+  };
+  return valueData;
+}
+
+/** เพิ่มข้อมูล */
+async function addData() {
+  showLoader();
+  await http
+    .post(config.API.periodExam, sendData())
+    .then(async (res) => {
+      const data = res.data.result;
+      id.value = data;
+      success($q, "บันทึกรอบคัดเลือกสำเร็จ");
+      await uploadImgData();
+      await uploadDocData();
+      await clickBack();
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      hideLoader();
+    });
+}
+
+/**
+ * แก้ไข ข้อมูล
+ * @param id  id จัดการรอบคัดเลือก
+ */
+async function editData(id: string) {
+  showLoader();
+  await http
+    .put(config.API.periodExamId(id), sendData())
+    .then(async (res) => {
+      success($q, "แก้ไขรอบคัดเลือกสำเร็จ");
+      await uploadImgData();
+      await uploadDocData();
+      await clickBack();
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      hideLoader();
+    });
+}
+
+/**
+ * เก็บไฟล์เป็นอาเรย์
+ * @param files ไฟล์
+ */
+async function fileUploadDoc(files: any) {
+  files.forEach((file: any) => {
+    fileDocDataUpload.value.push(file);
+  });
+}
+
+/**
+ * ลบไฟล์จาก array 
+ * @param files ไฟล์
+ */
+async function fileRemoveDoc(files: any) {
+  files.forEach((file: any) => {
+    const index = fileDocDataUpload.value.findIndex(
+      (x: any) => x.__key == file.__key
+    );
+    if (index > -1) {
+      fileDocDataUpload.value.splice(index, 1);
+    }
+  });
+}
+
+/** อัปโหลดไฟล์เอกสาร */
+async function uploadDocData() {
+  const formData = new FormData();
+  if (fileDocDataUpload.value.length > 0) {
+    fileDocDataUpload.value.forEach((file: any) => {
+      formData.append("", file);
+    });
+    showLoader();
+    await http
+      .put(config.API.periodExamDoc(id.value), formData)
+      .then((res) => {})
+      .catch((e) => {})
+      .finally(async () => {
+        hideLoader();
+      });
+  } else {
+    clickBack();
+  }
+}
+
+/**
+ * ฟังชั่นเก็บ รูปเป็น array
+ * @param files ไฟล์รูป
+ */
+async function fileUploadImg(files: any) {
+  files.forEach((file: any) => {
+    fileImgDataUpload.value.push(file);
+  });
+}
+
+/**
+ * ลบไฟล์รูปจาก array 
+ * @param files รูป
+ */
+async function fileRemoveImg(files: any) {
+  files.forEach((file: any) => {
+    const index = fileImgDataUpload.value.findIndex(
+      (x: any) => x.__key == file.__key
+    );
+    if (index > -1) {
+      fileImgDataUpload.value.splice(index, 1);
+    }
+  });
+}
+
+/** อัปโหลดรูป */
+async function uploadImgData() {
+  if (fileImgDataUpload.value.length > 0) {
+    const formData = new FormData();
+    fileImgDataUpload.value.forEach((file: any) => {
+      formData.append("", file);
+    });
+    showLoader();
+    await http
+      .put(config.API.periodExamImg(id.value), formData)
+      .then((res) => {})
+      .catch((e) => {})
+      .finally(async () => {
+        hideLoader();
+      });
+  }
+}
+
+/**
+ * ลบไฟล์
+ * @param docId ไฟล์ id
+ */
+async function deleteDocData(docId: string) {
+  const params = {
+    documentId: docId,
+  };
+  showLoader();
+  await http
+    .delete(config.API.periodExamDoc(id.value.toString()), {
+      params,
+    })
+    .then((res) => {})
+    .catch((e) => {})
+    .finally(async () => {
+      await fetchData();
+    });
+}
+
+/**
+ * ดาวห์โหลดไฟล์
+ * @param path ลิงก์
+ */
+async function downloadData(path: string) {
+  window.open(path);
+}
+
+/** เพิ่มวิธีการชำระเงิน */
+function clickAddPayment() {
+  myFormPayment.value.validate().then(async (result: boolean) => {
+    if (result) {
+      rowsPayment.value.push({
+        id: "00000000-0000-0000-0000-000000000000",
+        accountNumber: "",
+        bankName: "",
+        accountName: "",
+      });
+    }
+  });
+}
+
+/** ลบวิธีการชำระ */
+function clickDeletePayment(row: any) {
+  const index = rowsPayment.value.indexOf(row);
+  if (index > -1) {
+    rowsPayment.value.splice(index, 1);
+  }
+}
+
+/** เพิ่มตำแหน่ง */
+function clickAddPosition() {
+  myFormPosition.value.validate().then(async (result: boolean) => {
+    if (result) {
+      rowsPosition.value.push({
+        id: "00000000-0000-0000-0000-000000000000",
+        position: null,
+        type: { id: "normol", name: "ทั่วไป" },
+        code: null,
+        highDegree: "0",
+      });
+    }
+  });
+}
+
+/** ลบตำแหน่ง  */
+function clickDeletePosition(row: any) {
+  const index = rowsPosition.value.indexOf(row);
+  if (index > -1) {
+    rowsPosition.value.splice(index, 1);
+  }
+}
+
+/**
+ * แปลงช่วงวันที่ถ้า2ค่าเป็นวันเดียวกันจะโชววันเดียวแต่ถ้าไม่เท่ากันจะแสดงเป็นช่วง
+ * @param val ช่วงวันที่
+ */
+function dateThaiRange(val: [Date, Date] | null) {
+  if (val === null) {
+    return "";
+  } else if (date2Thai(val[0], true) === date2Thai(val[1], true)) {
+    return `${date2Thai(val[0], true)}`;
+  } else {
+    return `${date2Thai(val[0], true)} - ${date2Thai(val[1], true)}`;
+  }
+}
+
+/** clear วันที่สอบ*/
+function clearDateExam() {
+  dateExam.value = null;
+}
+
+/** clear วันที่สมัคร*/
+function clearDateRegister() {
+  dateRegister.value = null;
+}
+
+/** clear วันที่ชำระเงิน*/
+function clearDatePayment() {
+  datePayment.value = null;
+}
+
+/** clear วันประกาศผลสอบ*/
+function clearDateAnnounce() {
+  dateAnnounce.value = null;
+}
+
+watch(fee, () => {
+  if (fee.value <= 0) {
+    pay.value = "";
+  }
+});
+
+onMounted(async () => {
+  hideLoader();
+  if (route.params.id != undefined) {
+    edit.value = true;
+    id.value = route.params.id.toString();
+    await fetchData();
+  } else {
+    pay.value = "";
+    edit.value = false;
+  }
+  await fetchPositionPath();
+  await fetchPositionLevel();
+});
+</script>
+
 <template>
   <div class="toptitle text-dark col-12 row items-center">
     <q-btn
@@ -1143,767 +1866,5 @@
     </q-form>
   </q-card>
 </template>
-<script setup lang="ts">
-import type { QTableProps } from "quasar";
-import { onMounted, ref, watch } from "vue";
-import { useQuasar, QForm } from "quasar";
-import { useCounterMixin } from "@/stores/mixin";
-import { useRouter, useRoute } from "vue-router";
-import type { Columns } from "@/modules/03_recruiting/interface/request/Main";
-import type {
-  RequestPeriodExam,
-  RequestPosition,
-  RequestPayment,
-} from "@/modules/03_recruiting/interface/request/Period";
-import type {
-  ResponsePosition,
-  ResponsePayment,
-} from "@/modules/03_recruiting/interface/response/Period";
-import type {
-  DataOption,
-  UploadType,
-} from "@/modules/02_organizational/interface/index/Main";
-import http from "@/plugins/http";
-import config from "@/app.config";
-
-import ProfileTable from "@/modules/03_recruiting/components/Table1.vue";
-
-const $q = useQuasar(); // show dialog
-const mixin = useCounterMixin();
-const router = useRouter();
-const route = useRoute();
-const { date2Thai, success, dateToISO, messageError, showLoader, hideLoader } =
-  mixin;
-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>(
-  `<div style="text-align: center;"><span style="color: rgb(193, 0, 21); font-weight: 700; letter-spacing: 0.14992px;">ข้อกำหนดและเงื่อนไขฉบับนี้ ถือเป็นข้อตกลงในการเก็บข้อมูล</span><br></div><div style="text-align: center;"><span style="color: rgb(193, 0, 21); font-weight: 700; letter-spacing: 0.14992px;"><br></span></div><div><p style="margin-bottom: 16px;"><span style="font-size: 14px;">&nbsp; &nbsp;&nbsp;ข้าพเจ้าได้ศึกษาและทำความเข้าใจพระราชบัญญัติคุ้มครองข้อมูลส่วนบุคคล พ.ศ. 2562 ตลอดจนประกาศและระเบียบที่เกี่ยวข้องโดยละเอียดครบถ้วนแล้ว ข้าพเจ้ายินยอมให้หน่วยงานหรือบุคคลที่เกี่ยวข้องกับการดำเนินการสรรหา สามารถเก็บ รวบรวม ใช้และเปิดเผยข้อมูลส่วนบุคคลที่เกี่ยวข้องกับข้าพเจ้า เพื่อประโยชน์ของทางราชการตามกฎหมายที่เกี่ยวข้อง</span></p></div>`
-);
-const editorConfirm = ref<string>(
-  `<div style="text-align: center;"><span style="color: rgb(93, 190, 21); font-weight: 700; letter-spacing: 0.14992px;">คำรับรอง</span><br></div><div><div style=""><div style=""><font color="#35473c"><span style="font-size: 14px;"><br></span></font></div><div style=""><font color="#35473c"><span style="font-size: 14px;">1.<span style="white-space: pre;"> </span>ข้าพเจ้าขอให้คำรับรองว่า ข้อความดังกล่าวข้างต้นเป็นจริงทุกประการ และข้าพเจ้ามีคุณสมบัติทั่วไปและไม่มีลักษณะต้องห้ามตามมาตรา 43 แห่งพระราชบัญญัติระเบียบข้าราชการกรุงเทพมหานครและบุคลากรกรุงเทพมหานคร พ.ศ. 2554 และมีคุณสมบัติเฉพาะสำหรับตำแหน่งที่สมัครตรงตามประกาศรับสมัคร</span></font></div><div style=""><font color="#35473c"><span style="font-size: 14px;">2.<span style="white-space:pre"> </span>กรณีข้าพเจ้ามีลักษณะต้องห้าม ตามมาตรา 43 ข. แห่งพระราชบัญญัติระเบียบข้าราชการกรุงเทพมหานครและบุคลากรกรุงเทพมหานคร พ.ศ. 2554 และประสงค์จะยื่นคำขอยกเว้นเข้ารับราชการฯ ต่อสำนักงาน ก.ก. ตามระเบียบ ก.ก. ว่าด้วยการยกเว้นให้ผู้มีลักษณะต้องห้ามเข้ารับราชการเป็นข้าราชการกรุงเทพมหานคร พ.ศ. 2556 ตามมติ ก.ก. ครั้งที่ 7/2556 เมื่อวันที่ 15 สิงหาคม 2556 ข้าพเจ้าจะยื่นคำขอยกเว้นฯ ภายในวันปิดรับสมัคร ทั้งนี้ หากยื่นภายหลังกำหนด สำนักงาน ก.ก. จะไม่รับคำขอดังกล่าว</span></font></div><div style=""><font color="#35473c"><span style="font-size: 14px;">3.<span style="white-space:pre"> </span>ข้าพเจ้าจะยื่นหลักฐานและเอกสารที่แสดงว่า เป็นผู้มีคุณสมบัติทั่วไปและมีคุณสมบัติเฉพาะสำหรับตำแหน่งที่สมัครตรงตามประกาศรับสมัครภายในระยะเวลาที่กำหนดตามประกาศฯ หากมีการตรวจสอบหลักฐานและเอกสาร และหรือคุณวุฒิการศึกษาของข้าพเจ้าในภายหลังปรากฏว่าข้าพเจ้ามีคุณสมบัติไม่ตรงหรือมีลักษณะต้องห้ามตามประกาศรับสมัครหรือไม่ได้รับการยกเว้นให้ถือว่า ข้าพเจ้าเป็นผู้ขาดคุณสมบัติในการสมัครครั้งนี้มาตั้งแต่ต้น และไม่มีสิทธิได้รับการบรรจุและแต่งตั้งให้ดำรงตำแหน่ง และข้าพเจ้าจะไม่มีสิทธิเรียกร้องใด ๆ ทั้งสิ้น และหากข้าพเจ้าจงใจกรอกข้อความอันเป็นเท็จ อาจมีความผิดทางอาญาฐานแจ้งความเท็จต่อเจ้าพนักงาน ตามประมวลกฎหมายอาญา มาตรา 137</span></font></div><div style=""><font color="#35473c"><span style="font-size: 14px;">4.<span style="white-space:pre"> </span>ข้าพเจ้าได้ศึกษาและทำความเข้าใจพระราชบัญญัติคุ้มครองข้อมูลส่วนบุคคล พ.ศ. 2562 ตลอดจนประกาศและระเบียบที่เกี่ยวข้องโดยละเอียดครบถ้วนแล้ว ข้าพเจ้าขอแสดงความยินยอมให้หน่วยงานหรือบุคคลที่เกี่ยวข้องกับการดำเนินการสรรหา สามารถเก็บ รวบรวม ใช้และเปิดเผยข้อมูลส่วนบุคคลที่เกี่ยวข้องกับข้าพเจ้า เพื่อประโยชน์ของทางราชการตามกฎหมายที่เกี่ยวข้อง</span></font></div><div style=""><font color="#35473c"><span style="font-size: 14px;">5.<span style="white-space:pre"> </span>ข้าพเจ้ารับทราบว่าการส่งใบสมัครคัดเลือกฯ พร้อมเอกสารนี้ ยังไม่ได้รับการตรวจสอบคุณสมบัติตามหลักเกณฑ์ ประกาศรับสมัครคัดเลือก และเงื่อนไขต่าง ๆ โดยจะได้รับการตรวจสอบคุณสมบัติเมื่อเป็นผู้สอบผ่านข้อเขียนภาคความรู้ความสามารถที่ใช้เฉพาะตำแหน่งแล้วเท่านั้น</span></font></div></div>`
-);
-const checkDocument = ref<boolean>(false);
-const checkDisability = ref<boolean>(false);
-const announcementExam = ref<boolean>(true);
-const fee = ref<number>(0);
-const round = ref<number>(1);
-const yearly = ref<number>(new Date().getFullYear());
-const nameRaw = ref<number | null>(null);
-const roundRaw = ref<number | null>(null);
-const yearlyRaw = ref<number | null>(null);
-const dateRegister = ref<[Date, Date] | null>(null); //วันที่สมัคร
-const datePayment = ref<[Date, Date] | null>(null); //วันที่จ่ายเงิน
-const dateAnnouncement = ref<[Date, Date] | null>(null); //วันที่ประกาศ
-const dateAnnounce = ref<Date | null>(null); //วันประกาศผลสอบ
-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>();
-const organizationNameOptions = ref<DataOption[]>([]);
-const examTypeOptions = [
-  { name: "ทั่วไป", id: "normol" },
-  { name: "แพทย์", id: "docter" },
-];
-const educateOptions = [
-  { name: "ต่ำกว่าปริญญาตรี", id: "low" },
-  { name: "ปริญญาขึ้นไป", id: "normol" },
-];
-const category = ref<string>("");
-const categoryOptions = [
-  { name: "สำนักอนามัย", id: "hygiene" },
-  { name: "สำนักการแพทย์", id: "physician" },
-  { name: "สำนักผังเมือง", id: "city" },
-  { name: "สำนักวัฒนธรรม กีฬา และการท่องเที่ยว", id: "culture" },
-];
-const fileDocDataUpload = ref<File[]>([]);
-const fileDocs = ref<UploadType[]>([]);
-const fileImgDataUpload = ref<File[]>([]);
-const fileImgs = ref<UploadType[]>([]);
-const id = ref<string>("");
-const pay = ref<string>("payment1");
-const filterPayment = ref<string>(""); //search data table
-const filterPosition = ref<string>(""); //search data table
-const edit = ref<boolean>(false);
-const rowsPayment = ref<ResponsePayment[]>([]);
-const rowsPosition = ref<any>([]);
-const visibleColumnsPayment = ref<String[]>([
-  "accountNumber",
-  "bankName",
-  "accountName",
-]);
-const columnsPayment = ref<QTableProps["columns"]>([
-  {
-    name: "accountNumber",
-    align: "left",
-    label: "เลขบัญชี",
-    sortable: true,
-    field: "accountNumber",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "bankName",
-    align: "left",
-    label: "ธนาคาร",
-    sortable: true,
-    field: "bankName",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "accountName",
-    align: "left",
-    label: "ชื่อบัญชี",
-    sortable: true,
-    field: "accountName",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-]);
-const visibleColumnsPosition = ref<String[]>([
-  "code",
-  "position",
-  "level",
-  "type",
-  "highDegree",
-]);
-const columnsPosition = ref<QTableProps["columns"]>([
-  {
-    name: "code",
-    align: "left",
-    label: "รหัสประจำตำแหน่งที่สอบ",
-    sortable: true,
-    field: "code",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "position",
-    align: "left",
-    label: "ตำแหน่ง",
-    sortable: true,
-    field: "position",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    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: "ประเภทตำแหน่ง",
-    sortable: true,
-    field: "highDegree",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "type",
-    align: "left",
-    label: "ประเภทแบบฟอร์ม",
-    sortable: true,
-    field: "type",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-]);
-
-// watch(organizationShortName, () => {
-//   organizationNameOptions.value = [];
-// });
-
-// watch(organizationName, () => {
-//   positionPathOptions.value = [];
-// });
-
-watch(fee, (count: any, prevCount: any) => {
-  if (fee.value <= 0) {
-    pay.value = "";
-  }
-});
-
-onMounted(async () => {
-  hideLoader();
-  if (route.params.id != undefined) {
-    edit.value = true;
-    id.value = route.params.id.toString();
-    await fetchData();
-  } else {
-    pay.value = "";
-    edit.value = false;
-  }
-  //   await fetchOrganizationShortName();
-  //   if (
-  //     organizationShortName.value != null &&
-  //     organizationShortName.value.id != null
-  //   )
-  //     await fetchOrganizationOrganization(organizationShortName.value.id);
-  //   if (organizationName.value != null && organizationName.value.id != null)
-  //     await fetchPositionPath(organizationName.value.id);
-  await fetchPositionPath("test");
-  await fetchPositionLevel("test");
-});
-
-const clickBack = () => {
-  router.push({ name: "qualifyPeriod" });
-};
-
-const fetchData = async () => {
-  showLoader();
-  await http
-    .get(config.API.periodExamId(id.value))
-    .then((res) => {
-      const data = res.data.result;
-      const positionData: ResponsePosition[] = [];
-      data.positionExam.map((r: RequestPosition) => {
-        positionData.push({
-          id: r.id,
-          position: {
-            id: r.positionId,
-            name: r.positionName,
-          },
-          level: {
-            id: r.positionLevelId,
-            name: r.positionLevelName,
-          },
-          type: {
-            id: r.typeId,
-            name: r.typeName,
-          },
-          code: r.code,
-          highDegree: r.highDegree == true ? "1" : "0",
-        });
-      });
-      const bankData: ResponsePayment[] = [];
-      data.bankExam.map((r: RequestPayment) => {
-        bankData.push({
-          id: r.id,
-          accountNumber: r.accountNumber,
-          bankName: r.bankName,
-          accountName: r.accountName,
-        });
-      });
-      id.value = data.id;
-      name.value = data.name;
-      nameRaw.value = data.name;
-      checkDocument.value = data.checkDocument;
-      checkDisability.value = data.checkDisability;
-      announcementExam.value = data.announcementExam;
-      round.value = data.round;
-      yearly.value = data.year;
-      roundRaw.value = data.round;
-      yearlyRaw.value = data.year;
-      fee.value = data.fee;
-      dateAnnounce.value =
-        data.announcementDate != null ? new Date(data.announcementDate) : null;
-      dateAnnouncement.value =
-        data.announcementStartDate != null && data.announcementEndDate != null
-          ? [
-              new Date(data.announcementStartDate),
-              new Date(data.announcementEndDate),
-            ]
-          : null;
-      dateExam.value = data.examDate != null ? new Date(data.examDate) : null;
-      dateRegister.value =
-        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)]
-          : null;
-      if (data.organizationCodeId != null) {
-        organizationShortName.value = {
-          id: data.organizationCodeId,
-          name: data.organizationCodeName,
-        };
-      }
-      if (data.organizationId != null) {
-        organizationName.value = {
-          id: data.organizationId,
-          name: data.organizationName,
-        };
-      }
-      rowsPosition.value = positionData;
-      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;
-      category.value = data.category;
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-};
-
-/**
- * get รายการ รหัสหน่วยงาน
- */
-const fetchOrganizationShortName = async () => {
-  showLoader();
-  await http
-    .get(config.API.organizationShortName)
-    .then((res) => {
-      const data = res.data.result;
-      let option: DataOption[] = [];
-      data.map((r: any) => {
-        option.push({
-          id: r.id.toString(),
-          name: r.governmentCode.toString(),
-        });
-      });
-      governmentCodeOption.value = option;
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-};
-
-/**
- * get รายการ หน่วยงาน
- */
-const fetchOrganizationOrganization = async (val: string) => {
-  showLoader();
-  await http
-    .get(config.API.organization)
-    .then((res) => {
-      const data = res.data.result;
-      let option: DataOption[] = [];
-      data.map((r: DataOption) => {
-        option.push({
-          id: r.id.toString(),
-          name: r.name.toString(),
-        });
-      });
-      organizationNameOptions.value = option;
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-};
-
-/**
- * get รายการ ตำแหน่งในสายงาน
- */
-const fetchPositionPath = async (val: string) => {
-  showLoader();
-  await http
-    .get(config.API.positionPath)
-    .then((res) => {
-      const data = res.data.result;
-      let option: DataOption[] = [];
-      data.map((r: DataOption) => {
-        option.push({
-          id: r.id.toString(),
-          name: r.name.toString(),
-        });
-      });
-      positionPathOptions.value = option;
-      positionPathFilters.value = option;
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-};
-
-/**
- * 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(),
-          level: r.level,
-        });
-      });
-      positionLevelOptions.value = option.filter(
-        (v: DataOption) => v.level === 0
-      );
-      positionLevelFilters.value = option.filter(
-        (v: DataOption) => v.level === 0
-      );
-    })
-    .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) {
-    myForm.value.resetValidation();
-  }
-  if (row != null) fetchOrganizationOrganization(row.id);
-};
-
-const selectOrganization = (row: DataOption) => {
-  if (myForm.value !== null) {
-    myForm.value.resetValidation();
-  }
-  if (row != null) fetchPositionPath(row.id);
-};
-
-const updateYear = async (e: number) => {
-  yearly.value = e;
-};
-
-const checkSave = async () => {
-  if (myForm.value !== null) {
-    myForm.value.validate().then(async (success) => {
-      if (success) {
-        if (edit.value) {
-          await editData(id.value);
-        } else {
-          await addData();
-        }
-      }
-    });
-  }
-};
-
-const sendData = () => {
-  const positionData: RequestPosition[] = [];
-  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,
-      code: r.code,
-      highDegree: r.highDegree == "1" ? true : false,
-    });
-  });
-  if (fee.value == 0) {
-    datePayment.value = null;
-  }
-  const valueData: any = {
-    announcementDate:
-      dateAnnounce.value != null ? dateToISO(dateAnnounce.value) : null,
-    announcementEndDate:
-      dateAnnouncement.value != null
-        ? dateToISO(dateAnnouncement.value[1])
-        : null,
-    announcementStartDate:
-      dateAnnouncement.value != null
-        ? dateToISO(dateAnnouncement.value[0])
-        : null,
-    examDate: dateExam.value != null ? dateToISO(dateExam.value) : null,
-    bankExam: rowsPayment.value,
-    checkDisability: checkDisability.value,
-    announcementExam: announcementExam.value,
-    checkDocument: checkDocument.value,
-    detail: editor.value,
-    editorCondition: editorCondition.value,
-    editorConfirm: editorConfirm.value,
-    fee: fee.value,
-    id: "",
-    isActive: true,
-    name: name.value,
-    note: note.value,
-    organizationCodeId: organizationShortName.value?.id,
-    organizationCodeName: organizationShortName.value?.name,
-    organizationId: organizationName.value?.id,
-    organizationName: organizationName.value?.name,
-    paymentEndDate:
-      datePayment.value != null ? dateToISO(datePayment.value[1]) : null,
-    paymentKrungThai: pay.value,
-    paymentStartDate:
-      datePayment.value != null ? dateToISO(datePayment.value[0]) : null,
-    positionExam: positionData,
-    registerEndDate:
-      dateRegister.value != null ? dateToISO(dateRegister.value[1]) : null,
-    registerStartDate:
-      dateRegister.value != null ? dateToISO(dateRegister.value[0]) : null,
-    round: round.value,
-    year: yearly.value,
-    category: category.value,
-  };
-  return valueData;
-};
-
-const addData = async () => {
-  showLoader();
-  await http
-    .post(config.API.periodExam, sendData())
-    .then(async (res) => {
-      const data = res.data.result;
-      id.value = data;
-      success($q, "บันทึกรอบคัดเลือกสำเร็จ");
-      await uploadImgData();
-      await uploadDocData();
-      await clickBack();
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      hideLoader();
-    });
-};
-
-const editData = async (id: string) => {
-  showLoader();
-  await http
-    .put(config.API.periodExamId(id), sendData())
-    .then(async (res) => {
-      success($q, "แก้ไขรอบคัดเลือกสำเร็จ");
-      await uploadImgData();
-      await uploadDocData();
-      await clickBack();
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      hideLoader();
-    });
-};
-
-const fileUploadDoc = async (files: any) => {
-  files.forEach((file: any) => {
-    fileDocDataUpload.value.push(file);
-  });
-};
-
-const fileRemoveDoc = async (files: any) => {
-  files.forEach((file: any) => {
-    const index = fileDocDataUpload.value.findIndex(
-      (x: any) => x.__key == file.__key
-    );
-    if (index > -1) {
-      fileDocDataUpload.value.splice(index, 1);
-    }
-  });
-};
-
-const uploadDocData = async () => {
-  const formData = new FormData();
-  if (fileDocDataUpload.value.length > 0) {
-    fileDocDataUpload.value.forEach((file: any) => {
-      formData.append("", file);
-    });
-    showLoader();
-    await http
-      .put(config.API.periodExamDoc(id.value), formData)
-      .then((res) => {})
-      .catch((e) => {})
-      .finally(async () => {
-        hideLoader();
-      });
-  } else {
-    clickBack();
-  }
-};
-
-const fileUploadImg = async (files: any) => {
-  files.forEach((file: any) => {
-    fileImgDataUpload.value.push(file);
-  });
-};
-
-const fileRemoveImg = async (files: any) => {
-  files.forEach((file: any) => {
-    const index = fileImgDataUpload.value.findIndex(
-      (x: any) => x.__key == file.__key
-    );
-    if (index > -1) {
-      fileImgDataUpload.value.splice(index, 1);
-    }
-  });
-};
-
-const uploadImgData = async () => {
-  if (fileImgDataUpload.value.length > 0) {
-    const formData = new FormData();
-    fileImgDataUpload.value.forEach((file: any) => {
-      formData.append("", file);
-    });
-    showLoader();
-    await http
-      .put(config.API.periodExamImg(id.value), formData)
-      .then((res) => {})
-      .catch((e) => {})
-      .finally(async () => {
-        hideLoader();
-      });
-  }
-};
-
-const deleteDocData = async (docId: string) => {
-  const params = {
-    documentId: docId,
-  };
-  showLoader();
-  await http
-    .delete(config.API.periodExamDoc(id.value.toString()), {
-      params,
-    })
-    .then((res) => {})
-    .catch((e) => {})
-    .finally(async () => {
-      await fetchData();
-    });
-};
-
-const downloadData = async (path: string) => {
-  window.open(path);
-};
-
-const clickAddPayment = () => {
-  myFormPayment.value.validate().then(async (result: boolean) => {
-    if (result) {
-      rowsPayment.value.push({
-        id: "00000000-0000-0000-0000-000000000000",
-        accountNumber: "",
-        bankName: "",
-        accountName: "",
-      });
-    }
-  });
-};
-
-const clickDeletePayment = (row: any) => {
-  const index = rowsPayment.value.indexOf(row);
-  if (index > -1) {
-    rowsPayment.value.splice(index, 1);
-  }
-};
-
-const clickAddPosition = () => {
-  myFormPosition.value.validate().then(async (result: boolean) => {
-    if (result) {
-      rowsPosition.value.push({
-        id: "00000000-0000-0000-0000-000000000000",
-        position: null,
-        type: { id: "normol", name: "ทั่วไป" },
-        code: null,
-        highDegree: "0",
-      });
-    }
-  });
-};
-
-const clickDeletePosition = (row: any) => {
-  const index = rowsPosition.value.indexOf(row);
-  if (index > -1) {
-    rowsPosition.value.splice(index, 1);
-  }
-};
-
-/**
- * แปลงช่วงวันที่ถ้า2ค่าเป็นวันเดียวกันจะโชววันเดียวแต่ถ้าไม่เท่ากันจะแสดงเป็นช่วง
- * @param val ช่วงวันที่
- */
-const dateThaiRange = (val: [Date, Date] | null) => {
-  if (val === null) {
-    return "";
-  } else if (date2Thai(val[0], true) === date2Thai(val[1], true)) {
-    return `${date2Thai(val[0], true)}`;
-  } else {
-    return `${date2Thai(val[0], true)} - ${date2Thai(val[1], true)}`;
-  }
-};
-
-const clearDateExam = () => {
-  dateExam.value = null;
-};
-
-const clearDateRegister = () => {
-  dateRegister.value = null;
-};
-
-const clearDatePayment = () => {
-  datePayment.value = null;
-};
-
-const clearDateAnnounce = () => {
-  dateAnnounce.value = null;
-};
-</script>
 
 <style></style>
diff --git a/src/modules/03_recruiting/views/02_qualify/manageDetail.vue b/src/modules/03_recruiting/views/02_qualify/manageDetail.vue
index 9b815b107..29ec3112f 100644
--- a/src/modules/03_recruiting/views/02_qualify/manageDetail.vue
+++ b/src/modules/03_recruiting/views/02_qualify/manageDetail.vue
@@ -1,3 +1,388 @@
+<script setup lang="ts">
+import type { QTableProps } from "quasar";
+import { onMounted, ref, watch } from "vue";
+import { useQuasar } from "quasar";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { checkPermission } from "@/utils/permissions";
+import { useRouter, useRoute } from "vue-router";
+import { useCounterMixin } from "@/stores/mixin";
+
+import type { DataNumObject } from "@/modules/01_metadata/interface/request/Calendar";
+
+import TableCandidate from "@/modules/03_recruiting/components/TableCandidate.vue";
+import ExamFinished from "@/modules/03_recruiting/components/ExamFinished.vue";
+
+const $q = useQuasar();
+const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
+const { genColor15, date2Thai, messageError, showLoader, hideLoader } = mixin;
+const router = useRouter();
+const route = useRoute();
+
+const status = ref<string>("all");
+const filter = ref<string>(""); //search data table
+const name = ref<string>("");
+const candidateId = ref<string>("");
+const statusPayment = ref<boolean>(false);
+const setSeat = ref<boolean>(false);
+const modal = ref<boolean>(false);
+const round = ref<number | null>(null);
+const yearly = ref<number | null>(null);
+const examId = ref<string>(route.params.examId.toString());
+const visible = ref(true); //เปิดปิด card สรุปข้อมูล
+const dataNum = ref<DataNumObject[]>([]); //จำนวนสรุปจำนวนข้อมูลหลัก
+const rows = ref<any[]>([]);
+const visibleColumns = ref<String[]>([
+  "no",
+  "number",
+  "position",
+  "registerDate",
+  "examIdenNumber",
+  "seatNumber",
+  "resultB",
+  "resultC",
+  "pass",
+  "citizenId",
+  "fullname",
+  "career",
+  "office",
+  "edu",
+  "status",
+]);
+const optionsStatus = ref<any>([
+  {
+    id: "all",
+    name: "ทั้งหมด",
+  },
+  {
+    id: "checkRegister",
+    name: "รอกดรับใบสมัคร",
+  },
+  {
+    id: "payment",
+    name: "รอชำระค่าสมัครสอบ",
+  },
+  {
+    id: "checkPayment",
+    name: "ตรวจสอบหลักฐานชำระเงิน",
+  },
+  {
+    id: "rejectPayment",
+    name: "หลักฐานชำระเงินไม่ถูกต้อง",
+  },
+  {
+    id: "checkSeat",
+    name: "กดรับใบสมัครแล้ว",
+  },
+  {
+    id: "checkPoint",
+    name: "รอสรุปคะแนนสอบ",
+  },
+  {
+    id: "done",
+    name: "คัดเลือกสำเร็จ",
+  },
+  {
+    id: "waiver",
+    name: "สละสิทธิ์สอบ",
+  },
+]);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: false,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
+  },
+  {
+    name: "position",
+    align: "left",
+    label: "ตำแหน่งที่สมัคร",
+    sortable: true,
+    field: "position",
+    headerStyle: "font-size: 14px; min-width: 200px",
+    style: "font-size: 14px; ",
+  },
+  {
+    name: "citizenId",
+    align: "left",
+    label: "เลขประจำตัวประชาชน",
+    sortable: true,
+    field: "citizenId",
+    headerStyle: "font-size: 14px; min-width: 200px",
+    style: "font-size: 14px; ",
+  },
+  {
+    name: "fullname",
+    align: "left",
+    label: "ชื่อ-นามสกุล",
+    sortable: true,
+    field: "fullname",
+    headerStyle: "font-size: 14px; min-width: 200px",
+    style: "font-size: 14px; ",
+  },
+  {
+    name: "examIdenNumber",
+    align: "left",
+    label: "เลขประจำตัวสอบ",
+    sortable: true,
+    field: "examIdenNumber",
+    headerStyle: "font-size: 14px;",
+    style: "font-size: 14px; ",
+  },
+  {
+    name: "seatNumber",
+    align: "left",
+    label: "สนามสอบ",
+    sortable: true,
+    field: "seatNumber",
+    headerStyle: "font-size: 14px;",
+    style: "font-size: 14px; ",
+  },
+  {
+    name: "number",
+    align: "left",
+    label: "ลำดับที่สอบได้",
+    sortable: true,
+    field: "number",
+    headerStyle: "font-size: 14px;",
+    style: "font-size: 14px; ",
+  },
+  {
+    name: "resultB",
+    align: "left",
+    label: "ผลสอบภาค ข",
+    sortable: true,
+    field: "resultB",
+    headerStyle: "font-size: 14px;",
+    style: "font-size: 14px; ",
+  },
+  {
+    name: "resultC",
+    align: "left",
+    label: "ผลสอบภาค ค",
+    sortable: true,
+    field: "resultC",
+    headerStyle: "font-size: 14px;",
+    style: "font-size: 14px; ",
+  },
+  {
+    name: "pass",
+    align: "left",
+    label: "ผลสอบ",
+    sortable: true,
+    field: "pass",
+    headerStyle: "font-size: 14px;",
+    style: "font-size: 14px; ",
+  },
+  {
+    name: "registerDate",
+    align: "left",
+    label: "วันและเวลาที่สมัคร",
+    sortable: true,
+    field: "registerDate",
+    headerStyle: "font-size: 14px; min-width: 200px",
+    style: "font-size: 14px; ",
+  },
+  {
+    name: "status",
+    align: "left",
+    label: "สถานะ",
+    sortable: false,
+    field: "status",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
+  },
+]);
+
+// paging
+const page = ref<number>(1);
+const pageSize = ref<number>(25);
+const total = ref<number>(0);
+const maxPage = ref<number>(1);
+
+async function fetchDataCom() {
+  await fetchDataSummary();
+  await fetchPeriodExam();
+  await fetchData();
+}
+
+/** เปลี่ยน page */
+async function changePage(
+  pageVal: number,
+  pageSizeVal: number,
+  loading: boolean = false
+) {
+  page.value = await pageVal;
+  pageSize.value = await pageSizeVal;
+  fetchData(loading);
+}
+
+/** ดึงข้อมูล */
+async function fetchData(loading: boolean = true) {
+  loading === true ?? showLoader();
+  await http
+    .get(
+      config.API.candidateOfPeriodExam(status.value, examId.value) +
+        `?page=${page.value}&pageSize=${pageSize.value}&keyword=${filter.value}`
+    )
+    .then(async (res) => {
+      const data = res.data.result;
+      if (data.data) {
+        total.value = data.total;
+        maxPage.value = await Math.ceil(data.total / pageSize.value);
+        maxPage.value = maxPage.value < 1 ? 1 : maxPage.value;
+
+        rows.value = [];
+        data.data.map((r: any) => {
+          rows.value.push({
+            id: r.id,
+            fullname: `${r.prefixName}${r.firstName} ${r.lastName}`,
+            avatar: r.profileImg != null ? r.profileImg.detail : "",
+            citizenId: r.citizenId,
+            number: r.number,
+            registerDate: date2Thai(r.registerDate, false, true),
+            examIdenNumber: r.examIdenNumber,
+            seatNumber: r.seatNumber,
+            resultC: r.resultC,
+            resultB: r.resultB,
+            pass: r.pass,
+            email: r.email,
+            status: r.status,
+            position: `${r.positionName}${r.positionLevelName}`,
+            positionLevel: r.positionLevelName,
+            check: false,
+          });
+        });
+      }
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      loading === true ?? hideLoader();
+    });
+}
+
+/** ดึงข้อมูล สอบคัดเลือก */
+async function fetchPeriodExam() {
+  showLoader();
+  await http
+    .get(config.API.periodExamStatus(examId.value))
+    .then((res) => {
+      const data = res.data.result;
+      name.value = data.name;
+      round.value = data.round;
+      yearly.value = data.year;
+      statusPayment.value = data.status;
+      setSeat.value = data.setSeat;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/**
+ * สรุปจำนวน
+ */
+async function fetchDataSummary() {
+  dataNum.value = [];
+  showLoader();
+  await http
+    .get(config.API.countDashbordPeriodExam(examId.value))
+    .then((res) => {
+      let data = res.data.result;
+      data.map((e: DataNumObject) => {
+        dataNum.value.push({
+          id: e.id,
+          count: e.count,
+          name: e.name,
+          color: genColor15(e.id),
+        });
+      });
+    })
+    .catch((e) => {
+      dataNum.value = [];
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/**
+ * รอสรุปคะแนนสอบ
+ */
+async function clickPointRow(row: any) {
+  candidateId.value = row.id;
+  modal.value = true;
+}
+
+/** ไปหน้ารายละเอียด */
+function viewDetail(id: string, status: string) {
+  if (status == "checkPayment") {
+    router.push(`${route.fullPath}/payment/${id}`);
+  } else {
+    router.push(`${route.fullPath}/profile/${id}`);
+  }
+}
+
+/**
+ * แปลง สถานะเป็น text
+ * @param status
+ */
+function statusCandidate(status: string) {
+  switch (status) {
+    case "register":
+      return "ยังไม่สมัครสอบ";
+    case "checkRegister":
+      return "รอกดรับใบสมัคร";
+    case "payment":
+      return "รอชำระค่าสมัครสอบ";
+    case "rejectRegister":
+      return "คุณสมบัติสมัครสอบไม่ผ่าน";
+    case "checkPayment":
+      return "ตรวจสอบหลักฐานชำระเงิน";
+    case "rejectPayment":
+      return "หลักฐานชำระเงินไม่ถูกต้อง";
+    case "checkSeat":
+      return "กดรับใบสมัครแล้ว";
+    case "checkPoint":
+      return "รอสรุปคะแนนสอบ";
+    case "done":
+      return "คัดเลือกสำเร็จ";
+    case "waiver":
+      return "สละสิทธิ์สอบ";
+    default:
+      return "-";
+  }
+}
+
+watch(status, (count: String, prevCount: String) => {
+  fetchData();
+});
+
+onMounted(async () => {
+  hideLoader();
+  await fetchDataCom();
+});
+</script>
 <template>
   <div class="toptitle text-dark col-12 row items-center">
     <q-btn
@@ -218,407 +603,3 @@
     </q-card>
   </q-dialog>
 </template>
-<script setup lang="ts">
-import type { QTableProps } from "quasar";
-import { checkPermission } from "@/utils/permissions";
-import { onMounted, ref, watch } from "vue";
-import { useRouter, useRoute } from "vue-router";
-import { useCounterMixin } from "@/stores/mixin";
-import type { Pagination } from "@/modules/03_recruiting/interface/index/Main";
-import http from "@/plugins/http";
-import config from "@/app.config";
-
-import TableCandidate from "@/modules/03_recruiting/components/TableCandidate.vue";
-import ExamFinished from "@/modules/03_recruiting/components/ExamFinished.vue";
-import type { DataNumObject } from "@/modules/01_metadata/interface/request/Calendar";
-import { useQuasar } from "quasar";
-
-const $q = useQuasar();
-const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
-const {
-  genColor15,
-  dateToISO,
-  date2Thai,
-  messageError,
-  showLoader,
-  hideLoader,
-} = mixin;
-
-const router = useRouter();
-const route = useRoute();
-const status = ref<string>("all");
-const filter = ref<string>(""); //search data table
-const name = ref<string>("");
-const candidateId = ref<string>("");
-const statusPayment = ref<boolean>(false);
-const setSeat = ref<boolean>(false);
-const modal = ref<boolean>(false);
-const round = ref<number | null>(null);
-const yearly = ref<number | null>(null);
-const examId = ref<string>(route.params.examId.toString());
-const visible = ref(true); //เปิดปิด card สรุปข้อมูล
-const dataNum = ref<DataNumObject[]>([]); //จำนวนสรุปจำนวนข้อมูลหลัก
-const rows = ref<any[]>([]);
-const checkProfile = ref<any>([]);
-const visibleColumns = ref<String[]>([
-  //   "check",
-  "no",
-  "number",
-  "position",
-  //   "positionLevel",
-  "registerDate",
-  "examIdenNumber",
-  "seatNumber",
-  "resultB",
-  "resultC",
-  "pass",
-  "citizenId",
-  "fullname",
-  "career",
-  "office",
-  "edu",
-  "status",
-]);
-const optionsStatus = ref<any>([
-  {
-    id: "all",
-    name: "ทั้งหมด",
-  },
-  {
-    id: "checkRegister",
-    name: "รอกดรับใบสมัคร",
-  },
-  {
-    id: "payment",
-    name: "รอชำระค่าสมัครสอบ",
-  },
-  {
-    id: "checkPayment",
-    name: "ตรวจสอบหลักฐานชำระเงิน",
-  },
-  {
-    id: "rejectPayment",
-    name: "หลักฐานชำระเงินไม่ถูกต้อง",
-  },
-  {
-    id: "checkSeat",
-    name: "กดรับใบสมัครแล้ว",
-  },
-  {
-    id: "checkPoint",
-    name: "รอสรุปคะแนนสอบ",
-  },
-  {
-    id: "done",
-    name: "คัดเลือกสำเร็จ",
-  },
-  {
-    id: "waiver",
-    name: "สละสิทธิ์สอบ",
-  },
-]);
-const columns = ref<QTableProps["columns"]>([
-  //   {
-  //     name: "check",
-  //     align: "left",
-  //     label: "",
-  //     sortable: true,
-  //     field: "check",
-  //     headerStyle: "font-size: 14px;",
-  //     style: "font-size: 14px; ",
-  //   },
-  {
-    name: "no",
-    align: "left",
-    label: "ลำดับ",
-    sortable: false,
-    field: "no",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, {
-        numeric: true,
-        sensitivity: "base",
-      }),
-  },
-  {
-    name: "position",
-    align: "left",
-    label: "ตำแหน่งที่สมัคร",
-    sortable: true,
-    field: "position",
-    headerStyle: "font-size: 14px; min-width: 200px",
-    style: "font-size: 14px; ",
-  },
-  //   {
-  //     name: "positionLevel",
-  //     align: "left",
-  //     label: "ระดับ",
-  //     sortable: true,
-  //     field: "positionLevel",
-  //     headerStyle: "font-size: 14px; min-width: 200px",
-  //     style: "font-size: 14px; ",
-  //   },
-  {
-    name: "citizenId",
-    align: "left",
-    label: "เลขประจำตัวประชาชน",
-    sortable: true,
-    field: "citizenId",
-    headerStyle: "font-size: 14px; min-width: 200px",
-    style: "font-size: 14px; ",
-  },
-  {
-    name: "fullname",
-    align: "left",
-    label: "ชื่อ-นามสกุล",
-    sortable: true,
-    field: "fullname",
-    headerStyle: "font-size: 14px; min-width: 200px",
-    style: "font-size: 14px; ",
-  },
-  {
-    name: "examIdenNumber",
-    align: "left",
-    label: "เลขประจำตัวสอบ",
-    sortable: true,
-    field: "examIdenNumber",
-    headerStyle: "font-size: 14px;",
-    style: "font-size: 14px; ",
-  },
-  {
-    name: "seatNumber",
-    align: "left",
-    label: "สนามสอบ",
-    sortable: true,
-    field: "seatNumber",
-    headerStyle: "font-size: 14px;",
-    style: "font-size: 14px; ",
-  },
-  {
-    name: "number",
-    align: "left",
-    label: "ลำดับที่สอบได้",
-    sortable: true,
-    field: "number",
-    headerStyle: "font-size: 14px;",
-    style: "font-size: 14px; ",
-  },
-  {
-    name: "resultB",
-    align: "left",
-    label: "ผลสอบภาค ข",
-    sortable: true,
-    field: "resultB",
-    headerStyle: "font-size: 14px;",
-    style: "font-size: 14px; ",
-  },
-  {
-    name: "resultC",
-    align: "left",
-    label: "ผลสอบภาค ค",
-    sortable: true,
-    field: "resultC",
-    headerStyle: "font-size: 14px;",
-    style: "font-size: 14px; ",
-  },
-  {
-    name: "pass",
-    align: "left",
-    label: "ผลสอบ",
-    sortable: true,
-    field: "pass",
-    headerStyle: "font-size: 14px;",
-    style: "font-size: 14px; ",
-  },
-  {
-    name: "registerDate",
-    align: "left",
-    label: "วันและเวลาที่สมัคร",
-    sortable: true,
-    field: "registerDate",
-    headerStyle: "font-size: 14px; min-width: 200px",
-    style: "font-size: 14px; ",
-  },
-  {
-    name: "status",
-    align: "left",
-    label: "สถานะ",
-    sortable: false,
-    field: "status",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, {
-        numeric: true,
-        sensitivity: "base",
-      }),
-  },
-]);
-
-watch(status, (count: String, prevCount: String) => {
-  fetchData();
-});
-
-onMounted(async () => {
-  hideLoader();
-  await fetchDataCom();
-});
-
-const fetchDataCom = async () => {
-  await fetchDataSummary();
-  await fetchPeriodExam();
-  await fetchData();
-};
-
-// paging
-const page = ref<number>(1);
-const pageSize = ref<number>(25);
-const total = ref<number>(0);
-const maxPage = ref<number>(1);
-
-async function changePage(
-  pageVal: number,
-  pageSizeVal: number,
-  loading: boolean = false
-) {
-  page.value = await pageVal;
-  pageSize.value = await pageSizeVal;
-  fetchData(loading);
-}
-
-const fetchData = async (loading: boolean = true) => {
-  loading === true ?? showLoader();
-  await http
-    .get(
-      config.API.candidateOfPeriodExam(status.value, examId.value) +
-        `?page=${page.value}&pageSize=${pageSize.value}&keyword=${filter.value}`
-    )
-    .then(async (res) => {
-      const data = res.data.result;
-      if (data.data) {
-        total.value = data.total;
-        maxPage.value = await Math.ceil(data.total / pageSize.value);
-        maxPage.value = maxPage.value < 1 ? 1 : maxPage.value;
-
-        rows.value = [];
-        data.data.map((r: any) => {
-          rows.value.push({
-            id: r.id,
-            fullname: `${r.prefixName}${r.firstName} ${r.lastName}`,
-            avatar: r.profileImg != null ? r.profileImg.detail : "",
-            citizenId: r.citizenId,
-            number: r.number,
-            registerDate: date2Thai(r.registerDate, false, true),
-            examIdenNumber: r.examIdenNumber,
-            seatNumber: r.seatNumber,
-            resultC: r.resultC,
-            resultB: r.resultB,
-            pass: r.pass,
-            email: r.email,
-            status: r.status,
-            position: `${r.positionName}${r.positionLevelName}`,
-            positionLevel: r.positionLevelName,
-            check: false,
-          });
-        });
-      }
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      loading === true ?? hideLoader();
-    });
-};
-
-const fetchPeriodExam = async () => {
-  showLoader();
-  await http
-    .get(config.API.periodExamStatus(examId.value))
-    .then((res) => {
-      const data = res.data.result;
-      name.value = data.name;
-      round.value = data.round;
-      yearly.value = data.year;
-      statusPayment.value = data.status;
-      setSeat.value = data.setSeat;
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-};
-
-/**
- * สรุปจำนวน
- */
-const fetchDataSummary = async () => {
-  dataNum.value = [];
-  showLoader();
-  await http
-    .get(config.API.countDashbordPeriodExam(examId.value))
-    .then((res) => {
-      let data = res.data.result;
-      data.map((e: DataNumObject) => {
-        dataNum.value.push({
-          id: e.id,
-          count: e.count,
-          name: e.name,
-          color: genColor15(e.id),
-        });
-      });
-    })
-    .catch((e) => {
-      dataNum.value = [];
-    })
-    .finally(() => {
-      hideLoader();
-    });
-};
-
-/**
- * รอสรุปคะแนนสอบ
- */
-const clickPointRow = async (row: any) => {
-  candidateId.value = row.id;
-  modal.value = true;
-};
-
-const viewDetail = (id: string, status: string) => {
-  if (status == "checkPayment") {
-    router.push(`${route.fullPath}/payment/${id}`);
-  } else {
-    router.push(`${route.fullPath}/profile/${id}`);
-  }
-};
-
-const statusCandidate = (status: string) => {
-  switch (status) {
-    case "register":
-      return "ยังไม่สมัครสอบ";
-    case "checkRegister":
-      return "รอกดรับใบสมัคร";
-    case "payment":
-      return "รอชำระค่าสมัครสอบ";
-    case "rejectRegister":
-      return "คุณสมบัติสมัครสอบไม่ผ่าน";
-    case "checkPayment":
-      return "ตรวจสอบหลักฐานชำระเงิน";
-    case "rejectPayment":
-      return "หลักฐานชำระเงินไม่ถูกต้อง";
-    case "checkSeat":
-      return "กดรับใบสมัครแล้ว";
-    case "checkPoint":
-      return "รอสรุปคะแนนสอบ";
-    case "done":
-      return "คัดเลือกสำเร็จ";
-    case "waiver":
-      return "สละสิทธิ์สอบ";
-    default:
-      return "-";
-  }
-};
-</script>
diff --git a/src/modules/03_recruiting/views/03_editor/index.vue b/src/modules/03_recruiting/views/03_editor/index.vue
index 91fb3a476..15d14dc08 100644
--- a/src/modules/03_recruiting/views/03_editor/index.vue
+++ b/src/modules/03_recruiting/views/03_editor/index.vue
@@ -1,7 +1,12 @@
 <script setup lang="ts">
 import type { QTableProps } from "quasar";
 import { checkPermission } from "@/utils/permissions";
-import { ref, onMounted, nextTick } from "vue";
+import { ref, onMounted } from "vue";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
+
 import type {
   WebType,
   AddressWeb,
@@ -10,12 +15,9 @@ import type {
   EnableType,
   CmsTable,
 } from "@/modules/03_recruiting/interface/index/Main";
-import type { Columns } from "@/modules/03_recruiting/interface/request/Career";
 import type { DataLink } from "@/modules/03_recruiting/interface/request/Editor";
 import type { QForm } from "quasar";
-import { useCounterMixin } from "@/stores/mixin";
-import http from "@/plugins/http";
-import config from "@/app.config";
+
 import HeaderTop from "@/modules/03_recruiting/components/top1.vue";
 import ProfileTable from "@/modules/03_recruiting/components/Table1.vue";
 
@@ -29,10 +31,10 @@ const {
   messageError,
   showLoader,
   hideLoader,
-  dialogMessageNotify,
   dialogConfirm,
   dialogRemove,
 } = mixin;
+
 const previous = ref<boolean>(false);
 const next = ref<boolean>(false);
 const addDialog = ref<boolean>(false);
@@ -53,7 +55,6 @@ const inputName = ref<string | null>("");
 const inputNameBack = ref<string | null>("");
 const editvisible = ref<boolean>(false);
 const dialog = ref<boolean>(false);
-const edit = ref<boolean>(false);
 const qeditor = ref<string>("");
 const title = ref<string>("");
 const filter = ref<string>(""); //search data table
@@ -69,6 +70,7 @@ const web = ref<WebType>({
   eng: "",
   descripstion: "",
 });
+
 const address = ref<AddressWeb>({
   address: null,
   provinceId: null,
@@ -82,18 +84,21 @@ const enable = ref<EnableType>({
   web: false,
   about: false,
 });
+
 const visibleColumns = ref<String[]>([
   "name",
   "link",
   "createdAt",
   "lastUpdatedAt",
 ]);
+
 const visibleColumnsAgency = ref<String[]>([
   "name",
   "link",
   "createdAt",
   "lastUpdatedAt",
 ]);
+
 const columns = ref<QTableProps["columns"]>([
   {
     name: "name",
@@ -141,14 +146,11 @@ const columns = ref<QTableProps["columns"]>([
   },
 ]);
 
-onMounted(async () => {
-  await fetchData();
-  await fetchProvince();
-  await fetchDistrict(address.value.provinceId);
-  await fetchSubDistrict(address.value.districtId);
-});
-
-const clickPreviousNext = (page: string) => {
+/**
+ * ฟังชั่น หน้าถัดไป ย้อนกลับหน้า page
+ * @param page next/previous
+ */
+function clickPreviousNext(page: string) {
   const index: number =
     page == "next" ? indexRow.value - 1 : indexRow.value + 1;
   let length: number;
@@ -168,9 +170,14 @@ const clickPreviousNext = (page: string) => {
   previous.value = index == 0 ? false : true;
   next.value = index == length - 1 ? false : true;
   indexRow.value = index;
-};
+}
 
-const selectData = (id: string, agency: boolean) => {
+/**
+ * ฟังชั่น เปิดรายละเอียด
+ * @param id
+ * @param agency
+ */
+function selectData(id: string, agency: boolean) {
   dialog.value = !dialog.value;
   addDialog.value = false;
   editvisible.value = false;
@@ -197,20 +204,25 @@ const selectData = (id: string, agency: boolean) => {
   indexRow.value = index;
   previous.value = index == 0 ? false : true;
   next.value = index == length - 1 ? false : true;
-};
+}
 
-const editDialog = () => {
+/** แก้ไขข้อมูล ส่วนราชการ/หน่วยงาน */
+function editDialog() {
   inputName.value = inputNameBack.value;
 
   editvisible.value = !editvisible.value;
-};
+}
 
-const clickClose = () => {
+/** ปิด dialog ส่วนราชการ/หน่วยงาน */
+function clickClose() {
   dialog.value = !dialog.value;
   addDialog.value = false;
-};
-
-const clickAdd = (agency: boolean) => {
+}
+/**
+ * เปิด dialog ส่วนราชการ/หน่วยงาน
+ * @param agency true/false
+ */
+function clickAdd(agency: boolean) {
   dialog.value = !dialog.value;
   title.value = agency ? "เพิ่มหน่วยงาน" : "เพิ่มส่วนราชการ";
   agencyRow.value = agency;
@@ -218,17 +230,19 @@ const clickAdd = (agency: boolean) => {
   editvisible.value = true;
   inputLink.value = "";
   inputName.value = "";
-};
+}
 
-const statusHeader = () => {
+/** เช็คสถานะ เปิด/ปิด เพิ่มข้อมูล */
+function statusHeader() {
   return Object.values(enable.value).includes(true);
-};
+}
 
-const cancelBlog = async () => {
+/** ปิด dialog ข้อมูลเกี่ยวกับเรา */
+async function cancelBlog() {
   await fetchData();
-};
-
-const saveAdd = async () => {
+}
+/** save ข้อมูล */
+async function saveAdd() {
   dialogform.value?.validate().then(async (result: boolean) => {
     if (result) {
       if (agencyRow.value) {
@@ -262,9 +276,10 @@ const saveAdd = async () => {
       }
     }
   });
-};
+}
 
-const saveDelete = async (del: string) => {
+/** ลบข้อมูล */
+async function saveDelete(del: string) {
   if (agencyRow.value) {
     const filt = cmsAgency.value.filter((r: any) => r.id != idRow.value);
     let arrData: DataLink[] = [];
@@ -288,9 +303,10 @@ const saveDelete = async (del: string) => {
     await saveDataGoverment(arrData, del);
     dialog.value = false;
   }
-};
+}
 
-const saveEdit = async () => {
+/** edit */
+async function saveEdit() {
   if (agencyRow.value) {
     let arrData: DataLink[] = [];
     cmsAgency.value.map((r: any) => {
@@ -325,14 +341,12 @@ const saveEdit = async () => {
     });
     await saveDataGoverment(arrData, "");
   }
-};
+}
 
-const saveDataAgency = async (data: DataLink[], del: string) => {
+/** save หน่วยงาน */
+async function saveDataAgency(data: DataLink[], del: string) {
   dialogform.value?.validate().then(async (result: boolean) => {
     if (result) {
-      //   if (data.length === 0) {
-      //     dialogMessageNotify($q, "ลบข้อมูลต้องมี 2 ลิ้งอย่างน้อย 2 ลิ้ง");
-      //   } else
       if (del) {
         dialogRemove($q, () => dataPostAgency(data));
       } else {
@@ -340,9 +354,10 @@ const saveDataAgency = async (data: DataLink[], del: string) => {
       }
     }
   });
-};
+}
 
-const saveDataGoverment = async (data: DataLink[], del: string) => {
+/** save ราชการ */
+async function saveDataGoverment(data: DataLink[], del: string) {
   dialogform.value?.validate().then(async (result: boolean) => {
     if (result) {
       //   if (data.length === 0) {
@@ -355,8 +370,13 @@ const saveDataGoverment = async (data: DataLink[], del: string) => {
       }
     }
   });
-};
-const dataPostAgency = async (data: DataLink[]) => {
+}
+
+/**
+ * เพิ่มข้อมูล
+ * @param data ข้อมูลหน่วยงาน
+ */
+async function dataPostAgency(data: DataLink[]) {
   showLoader();
   await http
     .post(config.API.cmsAgency, data)
@@ -368,8 +388,13 @@ const dataPostAgency = async (data: DataLink[]) => {
       dialog.value = false;
       await fetchData();
     });
-};
-const dataPost = async (data: DataLink[]) => {
+}
+
+/**
+ * เพิ่มข้อมูล
+ * @param data ข้อมูลราชการ
+ */
+async function dataPost(data: DataLink[]) {
   showLoader();
   await http
     .post(config.API.cmsGoverment, data)
@@ -381,8 +406,10 @@ const dataPost = async (data: DataLink[]) => {
       dialog.value = false;
       await fetchData();
     });
-};
-const fetchData = async () => {
+}
+
+/** ดึงข้อมูลรายละเอียด */
+async function fetchData() {
   showLoader();
   await http
     .get(config.API.cms)
@@ -443,9 +470,10 @@ const fetchData = async () => {
     .finally(() => {
       hideLoader();
     });
-};
+}
 
-const takeLogo = async () => {
+/** เพิ่มโลโก้ */
+async function takeLogo() {
   showLoader();
   const formData = new FormData();
   formData.append("FileData", imageFileLogo.value);
@@ -460,9 +488,10 @@ const takeLogo = async () => {
       imageUrlLogo.value = null;
       await fetchData();
     });
-};
+}
 
-const takeBanner = async () => {
+/** เพิ่ม banner */
+async function takeBanner() {
   showLoader();
   const formData = new FormData();
   formData.append("FileData", imageFile.value);
@@ -477,9 +506,10 @@ const takeBanner = async () => {
       imageUrl.value = null;
       await fetchData();
     });
-};
+}
 
-const sendDataDetail = async () => {
+/** body รายละเอียด */
+async function sendDataDetail() {
   webform.value?.validate().then(async (result: boolean) => {
     if (result) {
       const data = {
@@ -501,9 +531,10 @@ const sendDataDetail = async () => {
         });
     }
   });
-};
+}
 
-const sendDataAbout = async () => {
+/** body  ข้อมูลเกี่ยวกับเรา */
+async function sendDataAbout() {
   myform.value?.validate().then(async (result: boolean) => {
     if (result) {
       const data = {
@@ -528,9 +559,10 @@ const sendDataAbout = async () => {
         });
     }
   });
-};
+}
 
-const fetchProvince = async () => {
+/** ดึงข้อมูลก่อนหน้า dialog */
+async function fetchProvince() {
   showLoader();
   await http
     .get(config.API.province)
@@ -548,9 +580,13 @@ const fetchProvince = async () => {
     .finally(() => {
       hideLoader();
     });
-};
+}
 
-const fetchDistrict = async (id: string | null) => {
+/**
+ * ดึงข้อมูล อำเภอ
+ * @param id id อำเภอ
+ */
+async function fetchDistrict(id: string | null) {
   if (id !== null && id != "") {
     showLoader();
     await http
@@ -570,9 +606,13 @@ const fetchDistrict = async (id: string | null) => {
         hideLoader();
       });
   }
-};
+}
 
-const fetchSubDistrict = async (id: string | null) => {
+/**
+ * ดึงข้อมูล ตำบล
+ * @param id id จังหวัด
+ */
+async function fetchSubDistrict(id: string | null) {
   if (id !== null && id != "") {
     showLoader();
     await http
@@ -596,67 +636,77 @@ const fetchSubDistrict = async (id: string | null) => {
         hideLoader();
       });
   }
-};
+}
 
-const selectProvince = (e: string) => {
+/**
+ * ฟังชั่นเลือกจังหวัด
+ * @param e id จังหวัด
+ */
+function selectProvince(e: string) {
   address.value.districtId = "";
   address.value.subdistrictId = "";
   address.value.code = "";
   myform.value?.resetValidation();
   fetchDistrict(e);
-};
+}
 
-const selectDistrict = (e: string) => {
+/** เลือกอำเภอ */
+function selectDistrict(e: string) {
   address.value.subdistrictId = "";
   address.value.code = "";
 
   myform.value?.resetValidation();
   fetchSubDistrict(e);
-};
+}
 
-const selectSubDistrict = (e: string) => {
+/** เลือกตำบล */
+function selectSubDistrict(e: string) {
   const findcode = subdistrictOptions.value.filter((r: any) => r.id == e);
   const namecode = findcode.length > 0 ? findcode[0].zipCode : "";
   address.value.code = namecode;
-};
+}
 
-const clickImageLogo = () => {
+function clickImageLogo() {
   if (imageFileLogo.value !== null) {
     takeLogo();
   } else {
     inputImageLogo.value.click();
   }
-};
+}
 
-const clickImage = () => {
+/** อัปโหลดแบนเนอร์/โลโก้ */
+function clickImage() {
   if (imageFile.value !== null) {
     takeBanner();
   } else {
     inputImage.value.click();
   }
-};
+}
 
 const checkLogoExits = ref<boolean>(false);
-const checkFileLogo = async () => {
+/** เช็คโลโก้ */
+async function checkFileLogo() {
   try {
     const response = await fetch(imageUrlLogo.value, { method: "GET" });
     checkLogoExits.value = response.ok;
   } catch (error) {
     checkLogoExits.value = false;
   }
-};
+}
 
 const checkBannerExits = ref<boolean>(false);
-const checkFileBanner = async () => {
+/** เช็คแบนเนอร์ */
+async function checkFileBanner() {
   try {
     const response = await fetch(imageUrl.value, { method: "GET" });
     checkBannerExits.value = response.ok;
   } catch (error) {
     checkBannerExits.value = false;
   }
-};
+}
 
-const uploadImageLogo = (e: any) => {
+/** อัปโหลดโลโก้ */
+function uploadImageLogo(e: any) {
   let input = e.target.files;
   if (input.length > 0) {
     const formData = new FormData();
@@ -667,9 +717,10 @@ const uploadImageLogo = (e: any) => {
     return;
   }
   return;
-};
+}
 
-const uploadImage = (e: any) => {
+/** อัปโหลดแบนเนอร์*/
+function uploadImage(e: any) {
   let input = e.target.files;
   if (input.length > 0) {
     const formData = new FormData();
@@ -680,14 +731,21 @@ const uploadImage = (e: any) => {
     return;
   }
   return;
-};
+}
 
-const getClass = (val: boolean) => {
+function getClass(val: boolean) {
   return {
     "full-width inputgreen cursor-pointer": val,
     "full-width cursor-pointer": !val,
   };
-};
+}
+
+onMounted(async () => {
+  await fetchData();
+  await fetchProvince();
+  await fetchDistrict(address.value.provinceId);
+  await fetchSubDistrict(address.value.districtId);
+});
 </script>
 
 <template>