From 5b2be2af2b71f630961eaa99cf443d7b64db2189 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Thu, 11 Jan 2024 13:26:46 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=9B=E0=B8=A3=E0=B8=B1=E0=B8=9A=20Code=20?=
 =?UTF-8?q?=E0=B8=9B=E0=B8=A3=E0=B8=B0=E0=B9=80=E0=B8=A1=E0=B8=B7=E0=B8=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/Detail/Stepper.vue             |   2 -
 .../components/Detail/Tab1.vue                | 150 +----
 .../components/Detail/Tab2.vue                |  35 +-
 .../components/Detail/popupHistory.vue        |   6 +-
 .../components/Detail/step/step1.vue          |  17 +-
 .../components/Detail/step/step2.vue          | 593 +-----------------
 .../components/Detail/step/step3.vue          |  45 +-
 .../components/Detail/step/step4.vue          | 108 ++--
 .../components/Detail/step/step5.vue          | 253 ++------
 .../components/Detail/step/step6.vue          | 164 +----
 .../components/Detail/step/step7.vue          |  54 +-
 .../components/Detail/step/step8.vue          | 144 ++---
 .../components/Detail/step/step9.vue          |  17 +-
 .../components/Detail/viewstep/tableStep1.vue |  17 -
 .../components/Detail/viewstep/viewPDF.vue    |   5 +-
 .../components/Detail/viewstep/viewStep1.vue  |  49 +-
 .../components/Detail/viewstep/viewStep3.vue  |   5 +-
 .../components/Detail/viewstep/viewStep7.vue  |   9 +-
 .../components/Director/MainPage.vue          |  26 +-
 .../interface/index/evalute.ts                |  23 +
 .../interface/response/evalute.ts             | 104 +++
 .../12_evaluatePersonal/store/Evaluate.ts     |  61 +-
 .../12_evaluatePersonal/views/DetailPage.vue  |  41 +-
 .../12_evaluatePersonal/views/MainPage.vue    |  73 +--
 24 files changed, 603 insertions(+), 1398 deletions(-)
 create mode 100644 src/modules/12_evaluatePersonal/interface/response/evalute.ts

diff --git a/src/modules/12_evaluatePersonal/components/Detail/Stepper.vue b/src/modules/12_evaluatePersonal/components/Detail/Stepper.vue
index e5ed00a81..09eba344c 100644
--- a/src/modules/12_evaluatePersonal/components/Detail/Stepper.vue
+++ b/src/modules/12_evaluatePersonal/components/Detail/Stepper.vue
@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { ref } from "vue";
-
 import { useEvaluateDetailStore } from "@/modules/12_evaluatePersonal/store/EvaluateDetail";
 
 const store = useEvaluateDetailStore();
diff --git a/src/modules/12_evaluatePersonal/components/Detail/Tab1.vue b/src/modules/12_evaluatePersonal/components/Detail/Tab1.vue
index 43ebc3d92..a81eb056e 100644
--- a/src/modules/12_evaluatePersonal/components/Detail/Tab1.vue
+++ b/src/modules/12_evaluatePersonal/components/Detail/Tab1.vue
@@ -5,11 +5,13 @@ import { useRouter, useRoute } from "vue-router";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
+/** importType*/
 import type {
   FormCommand,
   FormCommandRef,
 } from "@/modules/12_evaluatePersonal/interface/index/evalute";
 
+/** importComponents*/
 import Stepper from "@/modules/12_evaluatePersonal/components/Detail/Stepper.vue";
 import Step1 from "@/modules/12_evaluatePersonal/components/Detail/step/step1.vue";
 import Step2 from "@/modules/12_evaluatePersonal/components/Detail/step/step2.vue";
@@ -20,24 +22,23 @@ import Step6 from "@/modules/12_evaluatePersonal/components/Detail/step/step6.vu
 import Step7 from "@/modules/12_evaluatePersonal/components/Detail/step/step7.vue";
 import Step8 from "@/modules/12_evaluatePersonal/components/Detail/step/step8.vue";
 import Step9 from "@/modules/12_evaluatePersonal/components/Detail/step/step9.vue";
-
 import ViewStep1 from "@/modules/12_evaluatePersonal/components/Detail/viewstep/viewStep1.vue";
 import ViewStep3 from "@/modules/12_evaluatePersonal/components/Detail/viewstep/viewStep3.vue";
 import ViewStep7 from "@/modules/12_evaluatePersonal/components/Detail/viewstep/viewStep7.vue";
+import PopupHistory from "@/modules/12_evaluatePersonal/components/Detail/popupHistory.vue";
 
+/** importStor*/
 import { useEvaluateDetailStore } from "@/modules/12_evaluatePersonal/store/EvaluateDetail";
 import { useCounterMixin } from "@/stores/mixin";
 
-import PopupHistory from "@/modules/12_evaluatePersonal/components/Detail/popupHistory.vue";
-
-const router = useRouter();
+/** use*/
 const route = useRoute();
 const store = useEvaluateDetailStore();
 const mixin = useCounterMixin();
-const { dialogConfirm, showLoader, hideLoader, messageError } = mixin;
-
 const $q = useQuasar();
 
+const { showLoader, hideLoader, messageError } = mixin;
+
 const props = defineProps({
   data: {
     type: Object,
@@ -45,10 +46,9 @@ const props = defineProps({
   },
 });
 
+const id = ref<string>(route.params.id as string); // id รายการประเมิน
+
 const modalHistory = ref<boolean>(false);
-const externalLink =
-  "https://accreditation.ocsc.go.th/accreditation/search/curriculum";
-const id = ref<string>(route.params.id as string);
 const formCommand = reactive<FormCommand>({
   elementaryFullName: "",
   elementaryPosition: "",
@@ -61,63 +61,6 @@ const elementaryPositonRef = ref<object | null>(null);
 const abovelevelFullnameRef = ref<object | null>(null);
 const abovelevelPositionRef = ref<object | null>(null);
 
-const formCommandRef: FormCommandRef = {
-  elementaryFullName: elementaryFullNameRef,
-  elementaryPosition: elementaryPositonRef,
-  abovelevelFullname: abovelevelFullnameRef,
-  abovelevelPosition: abovelevelPositionRef,
-};
-
-async function onCilckNextStep() {
-  const functionCreateDoc: (() => Promise<void>) | null =
-    store.step === 1
-      ? await saveStep1
-      : store.step === 3
-      ? await saveStep3
-      : store.step === 4
-      ? await saveStep4
-      : store.step === 5
-      ? await saveStep5
-      : store.step === 5
-      ? await saveStep5
-      : store.step === 6
-      ? await saveStep6
-      : store.step === 7
-      ? await saveStep7
-      : store.step === 8
-      ? await saveStep8
-      : store.step === 9
-      ? await saveStep9
-      : null;
-  store.step === 2
-    ? validateStep2()
-    : store.step < 9 &&
-      dialogConfirm(
-        $q,
-        () => {
-          functionCreateDoc?.();
-          store.step++;
-        },
-        "ยืนยันการดำเนินการ",
-        "ต้องการยืนยันการดำเนินการต่อใช่หรือไม่?"
-      );
-
-  // functionCreateDoc?.();
-  // store.step < 9 &&
-}
-
-function onCilckprPeviousStep() {
-  store.step > 1 &&
-    dialogConfirm(
-      $q,
-      () => {
-        store.step--;
-      },
-      "ยืนยันการย้อนกลับ",
-      "ต้องการย้อนกลับใช่หรือไม่?"
-    );
-}
-
 function updateformCommand(val: any, ref: any) {
   formCommand.elementaryFullName = val.elementaryFullName;
   formCommand.elementaryPosition = val.elementaryPosition;
@@ -130,70 +73,13 @@ function updateformCommand(val: any, ref: any) {
   abovelevelPositionRef.value = ref.abovelevelPositionRef;
 }
 
-async function validateStep2() {
-  const hasError = [];
-  for (const key in formCommandRef) {
-    if (Object.prototype.hasOwnProperty.call(formCommandRef, key)) {
-      const property = formCommandRef[key];
-      if (property.value && typeof property.value.validate === "function") {
-        const isValid = property.value.validate();
-        hasError.push(isValid);
-      }
-    }
-  }
-  if (hasError.every((result) => result === true)) {
-    saveStep2();
-  } else {
-    console.log("ไม่ผ่าน");
-  }
-}
-
-async function saveStep1() {
-  console.log("Save 1");
-}
-async function saveStep2() {
-  dialogConfirm(
-    $q,
-    () => {
-      store.step++;
-    },
-    "ยืนยันการดำเนินการ",
-    "ต้องการยืนยันการดำเนินการต่อใช่หรือไม่?"
-  );
-}
-async function saveStep3() {
-  console.log("Save 3");
-}
-async function saveStep4() {
-  console.log("Save 4");
-}
-async function saveStep5() {
-  console.log("Save 5");
-}
-async function saveStep6() {
-  console.log("Save 6");
-}
-async function saveStep7() {
-  console.log("Save 7");
-}
-async function saveStep8() {
-  console.log("Save 8");
-}
-async function saveStep9() {
-  console.log("Save 9");
-}
-
-function onClickPopupHistory() {
-  modalHistory.value = !modalHistory.value;
-}
-
-function getStep() {
+/** function เช็คขั้นตอน*/
+async function fetchCheckStep() {
   showLoader();
-  http
+  await http
     .get(config.API.evaluateGetStep(id.value))
-    .then((res: any) => {
+    .then((res) => {
       const data = res.data.result;
-
       let step =
         data.step === "CHECK_SPEC"
           ? 1
@@ -226,9 +112,13 @@ function getStep() {
     });
 }
 
-onMounted(() => {
-  getStep();
-  store.step = 1;
+/** function เปิด,ปิด ประวัติการประเมิน*/
+function onClickPopupHistory() {
+  modalHistory.value = !modalHistory.value;
+}
+
+onMounted(async () => {
+  await fetchCheckStep();
 });
 </script>
 
diff --git a/src/modules/12_evaluatePersonal/components/Detail/Tab2.vue b/src/modules/12_evaluatePersonal/components/Detail/Tab2.vue
index baaa4bab5..3439ed5ca 100644
--- a/src/modules/12_evaluatePersonal/components/Detail/Tab2.vue
+++ b/src/modules/12_evaluatePersonal/components/Detail/Tab2.vue
@@ -1,37 +1,32 @@
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
 import { useQuasar } from "quasar";
+import { useRoute } from "vue-router";
+import http from "@/plugins/http";
+import config from "@/app.config";
 
+/** importComponents*/
 import CardDirector from "@/modules/12_evaluatePersonal/components/Detail/viewTab2/CardDirector.vue";
 import CardMeet from "@/modules/12_evaluatePersonal/components/Detail/viewTab2/CardMeet.vue";
 
-import { useEvaluateDetailStore } from "@/modules/12_evaluatePersonal/store/EvaluateDetail";
+/** importStore*/
 import { useCounterMixin } from "@/stores/mixin";
-import http from "@/plugins/http";
-import config from "@/app.config";
-import { useRouter, useRoute } from "vue-router";
 
-const router = useRouter();
+/** use*/
+const $q = useQuasar();
 const route = useRoute();
-const id = ref<string>(route.params.id as string);
-const store = useEvaluateDetailStore();
 const mixin = useCounterMixin();
-const { dialogConfirm, showLoader, hideLoader, messageError } = mixin;
+
+const { showLoader, hideLoader, messageError } = mixin;
+const id = ref<string>(route.params.id as string);
 
 const director = ref<any[]>();
 const meeting = ref<any[]>();
-const $q = useQuasar();
 
-const props = defineProps({
-  data: {
-    type: Object,
-    default: {},
-  },
-});
-
-function getList() {
+/** function เรียกข้อมูลกรรมการ */
+async function getList() {
   showLoader();
-  http
+  await http
     .get(config.API.evaluationListData(id.value))
     .then((res) => {
       const data = res.data.result;
@@ -46,8 +41,8 @@ function getList() {
     });
 }
 
-onMounted(() => {
-  getList();
+onMounted(async () => {
+  await getList();
 });
 </script>
 
diff --git a/src/modules/12_evaluatePersonal/components/Detail/popupHistory.vue b/src/modules/12_evaluatePersonal/components/Detail/popupHistory.vue
index 1eab54261..86a475021 100644
--- a/src/modules/12_evaluatePersonal/components/Detail/popupHistory.vue
+++ b/src/modules/12_evaluatePersonal/components/Detail/popupHistory.vue
@@ -67,13 +67,17 @@ const columns = ref<QTableProps["columns"]>([
 ]);
 const row = ref<any>();
 
+/**
+ * functio เรียกข่้อมูลประวัติการประเมิน
+ * @param id  ประเมิน
+ */
 async function fetchListHistory(id: string) {
+  showLoader();
   const thaiOptions: Intl.DateTimeFormatOptions = {
     hour: "2-digit",
     minute: "2-digit",
     second: "2-digit",
   };
-  showLoader();
   await http
     .get(config.API.evaluationHistory(id))
     .then((res) => {
diff --git a/src/modules/12_evaluatePersonal/components/Detail/step/step1.vue b/src/modules/12_evaluatePersonal/components/Detail/step/step1.vue
index 9404ab401..cf75cc773 100644
--- a/src/modules/12_evaluatePersonal/components/Detail/step/step1.vue
+++ b/src/modules/12_evaluatePersonal/components/Detail/step/step1.vue
@@ -1,5 +1,8 @@
 <script setup lang="ts">
-import { onMounted, reactive, watch } from "vue";
+import { reactive } from "vue";
+
+/**importType*/
+import type { FormFeature } from "@/modules/12_evaluatePersonal/interface/index/evalute";
 
 const props = defineProps({
   data: {
@@ -8,7 +11,7 @@ const props = defineProps({
   },
 });
 
-const formData = reactive<any>({
+const formData = reactive<FormFeature>({
   isEducationalQft: props.data.isEducationalQft, // คุณวุฒิการศึกษา
   isGovermantServiceHtr: props.data.isGovermantServiceHtr, // ประวัติการรับราชการ
   isOperatingExp: props.data.isOperatingExp, // ประสบการณ์ในการปฏิบัติงาน
@@ -17,16 +20,6 @@ const formData = reactive<any>({
   isHaveProLicense: props.data.isHaveProLicense, // มีใบอนุญาตประกอบวิชาชีพของสายงานต่างๆ
   isHaveMinPeriodOrHoldPos: props.data.isHaveMinPeriodOrHoldPos, // มีระยะเวลาขั้นต่ำในการดำรงตำแหน่งหรือเคยดำรงตำแหน่งในสายงานที่จะคัดเลือกตามคุณวุฒิของบุคคลและระดับตำแหน่งที่จะคัดเลือก]
 });
-
-// watch(props, () => {
-//   formData.isEducationalQft = props.data.isEducationalQft;
-//   formData.isGovermantServiceHtr = props.data.isGovermantServiceHtr;
-//   formData.isOperatingExp = props.data.isOperatingExp;
-//   formData.isMinPeriodOfTenure = props.data.isMinPeriodOfTenure;
-//   formData.isHaveSpecificQft = props.data.isHaveSpecificQft;
-//   formData.isHaveProLicense = props.data.isHaveProLicense;
-//   formData.isHaveMinPeriodOrHoldPos = props.data.isHaveMinPeriodOrHoldPos;
-// });
 </script>
 
 <template>
diff --git a/src/modules/12_evaluatePersonal/components/Detail/step/step2.vue b/src/modules/12_evaluatePersonal/components/Detail/step/step2.vue
index 7f95bd3bb..92b72f64d 100644
--- a/src/modules/12_evaluatePersonal/components/Detail/step/step2.vue
+++ b/src/modules/12_evaluatePersonal/components/Detail/step/step2.vue
@@ -1,16 +1,13 @@
 <script setup lang="ts">
 import { ref, reactive, onMounted } from "vue";
-import keycloak from "@/plugins/keycloak";
+import { useQuasar } from "quasar";
+import { useRoute } from "vue-router";
 import http from "@/plugins/http";
 import config from "@/app.config";
-import { useRouter, useRoute } from "vue-router";
-import genReport from "@/plugins/genreport";
-import { useQuasar } from "quasar";
 
 import type { FormCommand } from "@/modules/12_evaluatePersonal/interface/index/evalute";
 
 import { useCounterMixin } from "@/stores/mixin";
-const router = useRouter();
 const route = useRoute();
 const id = ref<string>(route.params.id as string);
 const $q = useQuasar();
@@ -18,92 +15,20 @@ const $q = useQuasar();
 const mixin = useCounterMixin();
 const { showLoader, hideLoader, messageError } = mixin;
 
-const fullName = ref<string>(
-  keycloak.tokenParsed ? keycloak.tokenParsed.name!.toString() : ""
-);
-
-const emit = defineEmits(["update:form"]);
-
+/** ฟรอมจัดเตรียมเอกสารเล่ม 1*/
+const author = ref<string>("");
+const subject = ref<string>("");
 const formCommand = reactive<FormCommand>({
   elementaryFullName: "",
   elementaryPosition: "",
   abovelevelFullname: "",
   abovelevelPosition: "",
 });
-const author = ref<string>("");
-const subject = ref<string>("");
 
-const elementaryFullNameRef = ref<object | null>(null);
-const elementaryPositonRef = ref<object | null>(null);
-const abovelevelFullnameRef = ref<object | null>(null);
-const abovelevelPositionRef = ref<object | null>(null);
-
-const updateInput = (value: any) => {
-  const ref = {
-    elementaryFullNameRef: elementaryFullNameRef.value,
-    elementaryPositonRef: elementaryPositonRef.value,
-    abovelevelFullnameRef: abovelevelFullnameRef.value,
-    abovelevelPositionRef: abovelevelPositionRef.value,
-  };
-  emit("update:form", value, ref);
-};
-
-const fileEvaluation1 = ref<any>();
-const fileEvaluation2 = ref<any>();
-const fileEvaluation3 = ref<any>();
-const fileEvaluation4 = ref<any>();
-const fileEvaluation5 = ref<any>();
-const fileEvaluation6 = ref<any>();
-
-const modalView = ref<boolean>(false);
-const numOfPages = ref<number>(0);
-const page = ref<number>(1);
-const pdfSrc = ref<any>();
-
-function onClickViewPDF(file: any) {
-  pdfSrc.value = file.webkitRelativePath;
-  modalView.value = true;
-}
-
-/** ไปหน้าต่อไปของรายงาน */
-function nextPage() {
-  if (page.value < numOfPages.value) {
-    page.value++;
-  }
-}
-
-/** กลับหน้าก่อนหน้าของรายงาน */
-function backPage() {
-  if (page.value !== 1) {
-    page.value--;
-  }
-}
-
-async function onClickDowloadFile(
-  tp: string,
-  templateName: string,
-  fileName: string
-) {
+/** function เรียกข้อมลผลงาน*/
+async function fetchSigner() {
   showLoader();
-  const data = Object.assign(
-    { fullName: fullName.value },
-    tp === "EV1_005" || tp === "EV1_007"
-      ? { organizationName: "หน่วยงาน" }
-      : null,
-    tp === "EV1_007" ? { positionName: "ตำแหน่ง" } : null,
-    tp === "EV1_007" ? { positionLeaveName: "ระดับ" } : null
-  );
-  const body = {
-    template: tp,
-    reportName: templateName,
-    data: data,
-  };
-  await genReport(body, fileName);
-}
-
-function getSigner() {
-  showLoader();
-  http
+  await http
     .get(config.API.evaluationSigner(id.value, 1))
     .then((res) => {
       const data = res.data.result;
@@ -126,416 +51,14 @@ function getSigner() {
       hideLoader();
     });
 }
-onMounted(() => {
-  getSigner();
-  const ref = {
-    elementaryFullNameRef: elementaryFullNameRef.value,
-    elementaryPositonRef: elementaryPositonRef.value,
-    abovelevelFullnameRef: abovelevelFullnameRef.value,
-    abovelevelPositionRef: abovelevelPositionRef.value,
-  };
-  emit("update:form", formCommand, ref);
+onMounted(async () => {
+  await fetchSigner();
 });
 </script>
 
 <template>
   <div class="row q-col-gutter-md">
-    <!-- แบบพิจารณาคุณสมบัติบุคคล -->
-    <!-- <div class="col-6">
-      <q-card bordered style="border: 1px solid #d6dee1">
-        <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
-          แบบพิจารณาคุณสมบัติบุคคล
-        </div>
-        <div class="col-12"><q-separator /></div>
-        <div class="row">
-          <div class="col-12 q-pa-sm">
-            <div class="row q-col-gutter-md col-12">
-              <div class="col-xs-12 col-sm-6 row">
-                <q-btn
-                  class="col-12"
-                  outline
-                  icon="download"
-                  label="ดาวน์โหลดต้นแบบ"
-                  color="primary"
-                  @click="
-                    onClickDowloadFile(
-                      'EV1_005',
-                      'template-1',
-                      'แบบพิจารณาคุณสมบัติบุคคล'
-                    )
-                  "
-                >
-                  <q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
-                >
-              </div>
-              <div class="col-xs-12 col-sm-6 row">
-                <q-btn
-                  v-if="fileEvaluation1"
-                  class="col-12"
-                  outline
-                  icon="visibility"
-                  label="ดูไฟล์เอกสาร"
-                  color="primary"
-                  @click="onClickViewPDF(fileEvaluation1)"
-                >
-                  <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
-                >
-              </div>
-              <div class="col-xs-12 col-sm-10 row">
-                <q-file
-                  v-model="fileEvaluation1"
-                  class="col-12"
-                  outlined
-                  dense
-                  hide-bottom-space
-                  lazy-rules
-                  accept=".pdf"
-                >
-                  <template v-slot:prepend>
-                    <q-icon name="attach_file" />
-                  </template>
-                </q-file>
-              </div>
-              <div class="col-2 self-center text-center q-pl-none">
-                <q-btn flat round dense color="primary" icon="mdi-upload"
-                  ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
-                >
-              </div>
-            </div>
-          </div>
-        </div>
-      </q-card>
-    </div> -->
-
-    <!-- แบบแสดงรายละเอียดการเสนอผลงาน     -->
-    <!-- <div class="col-6">
-      <q-card bordered style="border: 1px solid #d6dee1">
-        <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
-          แบบแสดงรายละเอียดการเสนอผลงาน
-        </div>
-        <div class="col-12"><q-separator /></div>
-        <div class="row">
-          <div class="col-12 q-pa-sm">
-            <div class="row q-col-gutter-md col-12">
-              <div class="col-xs-12 col-sm-6 row">
-                <q-btn
-                  class="col-12"
-                  outline
-                  icon="download"
-                  label="ดาวน์โหลดต้นแบบ"
-                  color="primary"
-                  @click="
-                    onClickDowloadFile(
-                      'EV1_006',
-                      'template-2',
-                      'แบบแสดงรายละเอียดการเสนอผลงาน'
-                    )
-                  "
-                >
-                  <q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
-                >
-              </div>
-              <div class="col-xs-12 col-sm-6 row">
-                <q-btn
-                  v-if="fileEvaluation2"
-                  class="col-12"
-                  outline
-                  icon="visibility"
-                  label="ดูไฟล์เอกสาร"
-                  color="primary"
-                >
-                  <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
-                >
-              </div>
-              <div class="col-xs-12 col-sm-10 row">
-                <q-file
-                  v-model="fileEvaluation2"
-                  class="col-12"
-                  outlined
-                  dense
-                  hide-bottom-space
-                  lazy-rules
-                  accept=".pdf"
-                >
-                  <template v-slot:prepend>
-                    <q-icon name="attach_file" />
-                  </template>
-                </q-file>
-              </div>
-              <div class="col-2 self-center text-center q-pl-none">
-                <q-btn flat round dense color="primary" icon="mdi-upload"
-                  ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
-                >
-              </div>
-            </div>
-          </div>
-        </div>
-      </q-card>
-    </div> -->
-
-    <!-- แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล -->
-    <!-- <div class="col-6">
-      <q-card bordered style="border: 1px solid #d6dee1">
-        <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
-          แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล
-        </div>
-        <div class="col-12"><q-separator /></div>
-        <div class="row">
-          <div class="col-12 q-pa-sm">
-            <div class="row q-col-gutter-md col-12">
-              <div class="col-xs-12 col-sm-6 row">
-                <q-btn
-                  class="col-12"
-                  outline
-                  icon="download"
-                  label="ดาวน์โหลดต้นแบบ"
-                  color="primary"
-                  @click="
-                    onClickDowloadFile(
-                      'EV1_007',
-                      'template-3',
-                      'แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล'
-                    )
-                  "
-                >
-                  <q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
-                >
-              </div>
-              <div class="col-xs-12 col-sm-6 row">
-                <q-btn
-                  v-if="fileEvaluation3"
-                  class="col-12"
-                  outline
-                  icon="visibility"
-                  label="ดูไฟล์เอกสาร"
-                  color="primary"
-                >
-                  <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
-                >
-              </div>
-              <div class="col-xs-12 col-sm-10 row">
-                <q-file
-                  v-model="fileEvaluation3"
-                  class="col-12"
-                  outlined
-                  dense
-                  hide-bottom-space
-                  lazy-rules
-                  accept=".pdf"
-                >
-                  <template v-slot:prepend>
-                    <q-icon name="attach_file" />
-                  </template>
-                </q-file>
-              </div>
-              <div class="col-2 self-center text-center q-pl-none">
-                <q-btn flat round dense color="primary" icon="mdi-upload"
-                  ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
-                >
-              </div>
-            </div>
-          </div>
-        </div>
-      </q-card>
-    </div> -->
-
-    <!-- แบบประเมินคุณลักษณะบุคคล -->
-    <!-- <div class="col-6">
-      <q-card bordered style="border: 1px solid #d6dee1">
-        <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
-          แบบประเมินคุณลักษณะบุคคล
-        </div>
-        <div class="col-12"><q-separator /></div>
-        <div class="row">
-          <div class="col-12 q-pa-sm">
-            <div class="row q-col-gutter-md col-12">
-              <div class="col-xs-12 col-sm-6 row">
-                <q-btn
-                  class="col-12"
-                  outline
-                  icon="download"
-                  label="ดาวน์โหลดต้นแบบ"
-                  color="primary"
-                  @click="
-                    onClickDowloadFile(
-                      'EV1_008',
-                      'template-4',
-                      'แบบประเมินคุณลักษณะบุคคล'
-                    )
-                  "
-                >
-                  <q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
-                >
-              </div>
-              <div class="col-xs-12 col-sm-6 row">
-                <q-btn
-                  v-if="fileEvaluation4"
-                  class="col-12"
-                  outline
-                  icon="visibility"
-                  label="ดูไฟล์เอกสาร"
-                  color="primary"
-                >
-                  <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
-                >
-              </div>
-              <div class="col-xs-12 col-sm-10 row">
-                <q-file
-                  v-model="fileEvaluation4"
-                  class="col-12"
-                  outlined
-                  dense
-                  hide-bottom-space
-                  lazy-rules
-                  accept=".pdf"
-                >
-                  <template v-slot:prepend>
-                    <q-icon name="attach_file" />
-                  </template>
-                </q-file>
-              </div>
-              <div class="col-2 self-center text-center q-pl-none">
-                <q-btn flat round dense color="primary" icon="mdi-upload"
-                  ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
-                >
-              </div>
-            </div>
-          </div>
-        </div>
-      </q-card>
-    </div> -->
-
-    <!-- แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก -->
-    <!-- <div class="col-6">
-      <q-card bordered style="border: 1px solid #d6dee1">
-        <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
-          แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก
-        </div>
-        <div class="col-12"><q-separator /></div>
-        <div class="row">
-          <div class="col-12 q-pa-sm">
-            <div class="row q-col-gutter-md col-12">
-              <div class="col-xs-12 col-sm-6 row">
-                <q-btn
-                  class="col-12"
-                  outline
-                  icon="download"
-                  label="ดาวน์โหลดต้นแบบ"
-                  color="primary"
-                  @click="
-                    onClickDowloadFile(
-                      'EV1_009',
-                      'template-5',
-                      'แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก'
-                    )
-                  "
-                >
-                  <q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
-                >
-              </div>
-              <div class="col-xs-12 col-sm-6 row">
-                <q-btn
-                  v-if="fileEvaluation5"
-                  class="col-12"
-                  outline
-                  icon="visibility"
-                  label="ดูไฟล์เอกสาร"
-                  color="primary"
-                >
-                  <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
-                >
-              </div>
-              <div class="col-xs-12 col-sm-10 row">
-                <q-file
-                  v-model="fileEvaluation5"
-                  class="col-12"
-                  outlined
-                  dense
-                  hide-bottom-space
-                  lazy-rules
-                  accept=".pdf"
-                >
-                  <template v-slot:prepend>
-                    <q-icon name="attach_file" />
-                  </template>
-                </q-file>
-              </div>
-              <div class="col-2 self-center text-center q-pl-none">
-                <q-btn flat round dense color="primary" icon="mdi-upload"
-                  ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
-                >
-              </div>
-            </div>
-          </div>
-        </div>
-      </q-card>
-    </div> -->
-
-    <!--ผลงานที่จะส่งประเมิน -->
-    <!-- <div class="col-6">
-      <q-card bordered style="border: 1px solid #d6dee1">
-        <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
-          ผลงานที่จะส่งประเมิน
-        </div>
-        <div class="col-12"><q-separator /></div>
-        <div class="row">
-          <div class="col-12 q-pa-sm">
-            <div class="row q-col-gutter-md col-12">
-              <div class="col-xs-12 col-sm-6 row">
-                <q-btn
-                  class="col-12"
-                  outline
-                  icon="download"
-                  label="ดาวน์โหลดต้นแบบ"
-                  color="primary"
-                  @click="
-                    onClickDowloadFile(
-                      'EV1_010',
-                      'template-6',
-                      'ผลงานที่จะส่งประเมิน'
-                    )
-                  "
-                >
-                  <q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
-                >
-              </div>
-              <div class="col-xs-12 col-sm-6 row">
-                <q-btn
-                  v-if="fileEvaluation6"
-                  class="col-12"
-                  outline
-                  icon="visibility"
-                  label="ดูไฟล์เอกสาร"
-                  color="primary"
-                >
-                  <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
-                >
-              </div>
-              <div class="col-xs-12 col-sm-10 row">
-                <q-file
-                  v-model="fileEvaluation6"
-                  class="col-12"
-                  outlined
-                  dense
-                  hide-bottom-space
-                  lazy-rules
-                  accept=".pdf"
-                >
-                  <template v-slot:prepend>
-                    <q-icon name="attach_file" />
-                  </template>
-                </q-file>
-              </div>
-              <div class="col-2 self-center text-center q-pl-none">
-                <q-btn flat round dense color="primary" icon="mdi-upload"
-                  ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
-                >
-              </div>
-            </div>
-          </div>
-        </div>
-      </q-card>
-    </div> -->
+    <!-- ผลงาน -->
     <div class="col-12">
       <q-card bordered style="border: 1px solid #d6dee1">
         <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">ผลงาน</div>
@@ -551,7 +74,6 @@ onMounted(() => {
                     outlined
                     label="ชื่อผลงาน"
                     v-model="subject"
-                    @update:model-value="updateInput(formCommand)"
                     :rules="[(val) => !!val || `${'กรุณากรอกชื่อผลงาน'}`]"
                     lazy-rules
                   />
@@ -561,7 +83,6 @@ onMounted(() => {
                     dense
                     outlined
                     v-model="author"
-                    @update:model-value="updateInput(formCommand)"
                     label="เจ้าของผลงาน"
                     :rules="[(val) => !!val || `${'กรุณากรอกเจ้าของผลงาน'}`]"
                     lazy-rules
@@ -597,7 +118,6 @@ onMounted(() => {
                     outlined
                     label="ชื่อ-นามสกุล"
                     v-model="formCommand.elementaryFullName"
-                    @update:model-value="updateInput(formCommand)"
                     :rules="[(val) => !!val || `${'กรุณากรอกชื่อ-นามสกุล'}`]"
                     lazy-rules
                   />
@@ -608,7 +128,6 @@ onMounted(() => {
                     dense
                     outlined
                     v-model="formCommand.elementaryPosition"
-                    @update:model-value="updateInput(formCommand)"
                     label="ตำแหน่ง"
                     :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่ง'}`]"
                     lazy-rules
@@ -633,7 +152,6 @@ onMounted(() => {
                     label="ชื่อ-นามสกุล"
                     :rules="[(val) => !!val || `${'กรุณากรอกชื่อ-นามสกุล'}`]"
                     lazy-rules
-                    @update:model-value="updateInput(formCommand)"
                   />
                   <q-input
                     ref="abovelevelPositionRef"
@@ -645,7 +163,6 @@ onMounted(() => {
                     label="ตำแหน่ง"
                     :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่ง'}`]"
                     lazy-rules
-                    @update:model-value="updateInput(formCommand)"
                   />
                 </div>
               </div>
@@ -655,94 +172,6 @@ onMounted(() => {
       </q-card>
     </div>
   </div>
-
-  <!-- Dialog Full Screen -->
-  <q-dialog
-    v-model="modalView"
-    persistent
-    :maximized="true"
-    transition-show="slide-up"
-    transition-hide="slide-down"
-  >
-    <q-card class="bg-white">
-      <div class="flex justify-end items-center align-center q-mr-md q-mt-sm">
-        <q-btn
-          icon="close"
-          unelevated
-          round
-          dense
-          style="color: #ff8080; background-color: #ffdede"
-          size="12px"
-          v-close-popup
-        />
-      </div>
-      <div class="q-pa-md">
-        <div class="row items-start items-center">
-          <div class="col">
-            <q-btn
-              padding="xs"
-              icon="mdi-chevron-left"
-              color="grey-2"
-              text-color="grey-5"
-              size="md"
-              class="my-auto"
-              @click="backPage"
-              :disable="page == 1"
-            />
-          </div>
-          <div class="col-12 col-md-auto">
-            <div class="q-pa-md flex">
-              หน้าที่ {{ page }} จาก {{ numOfPages }}
-            </div>
-          </div>
-          <div class="col text-right">
-            <q-btn
-              padding="xs"
-              icon="mdi-chevron-right"
-              color="grey-2"
-              text-color="grey-5"
-              size="md"
-              @click="nextPage"
-              :disable="page === numOfPages"
-            />
-          </div>
-        </div>
-        <div class="row items- items-center">
-          <VuePDF ref="vuePDFRef" :pdf="pdfSrc" :page="page" fit-parent />
-        </div>
-        <div class="row items- items-end">
-          <div class="col">
-            <q-btn
-              padding="xs"
-              icon="mdi-chevron-left"
-              color="grey-2"
-              text-color="grey-5"
-              size="md"
-              class="my-auto"
-              @click="backPage"
-              :disable="page == 1"
-            />
-          </div>
-          <div class="col-12 col-md-auto">
-            <div class="q-pa-md flex">
-              หน้าที่ {{ page }} จาก {{ numOfPages }}
-            </div>
-          </div>
-          <div class="col text-right">
-            <q-btn
-              padding="xs"
-              icon="mdi-chevron-right"
-              color="grey-2"
-              text-color="grey-5"
-              size="md"
-              @click="nextPage"
-              :disable="page === numOfPages"
-            />
-          </div>
-        </div>
-      </div>
-    </q-card>
-  </q-dialog>
 </template>
 
 <style scoped></style>
diff --git a/src/modules/12_evaluatePersonal/components/Detail/step/step3.vue b/src/modules/12_evaluatePersonal/components/Detail/step/step3.vue
index f89edbf2e..1cae015ac 100644
--- a/src/modules/12_evaluatePersonal/components/Detail/step/step3.vue
+++ b/src/modules/12_evaluatePersonal/components/Detail/step/step3.vue
@@ -1,31 +1,41 @@
 <script setup lang="ts">
-import { reactive, ref, watch, onMounted } from "vue";
+import { ref, onMounted } from "vue";
 import { useQuasar } from "quasar";
-import { VuePDF, usePDF } from "@tato30/vue-pdf";
-import { useCounterMixin } from "@/stores/mixin";
-import { useEvaluateDetailStore } from "@/modules/12_evaluatePersonal/store/EvaluateDetail";
+import { usePDF } from "@tato30/vue-pdf";
+import { useRoute } from "vue-router";
 import http from "@/plugins/http";
 import config from "@/app.config";
-import { useRouter, useRoute } from "vue-router";
 import axios from "axios";
 
-const router = useRouter();
+/** importStore*/
+import { useCounterMixin } from "@/stores/mixin";
+import { useEvaluateDetailStore } from "@/modules/12_evaluatePersonal/store/EvaluateDetail";
+
+/** use*/
 const route = useRoute();
 const $q = useQuasar();
-const id = ref<string>(route.params.id as string);
 const store = useEvaluateDetailStore();
 const mixin = useCounterMixin();
-const { date2Thai, showLoader, hideLoader, messageError } = mixin;
 
-const selectedItem = ref(1);
+const { showLoader, hideLoader, messageError } = mixin;
 
+const id = ref<string>(route.params.id as string);
+const selectedItem = ref<number>(1);
+
+/**
+ * funtion เลือกไฟล์
+ * @param itemNumber indexItems
+ */
 function handleItemClick(itemNumber: number) {
   store.tabPanels = itemNumber.toString();
   selectedItem.value = itemNumber;
-
   getFile(itemNumber);
 }
-// evaluationFilebyId
+
+/**
+ * function เรียกไฟล์
+ * @param volume index item
+ */
 function getFile(volume: number) {
   const fileText = numToThai(volume);
   showLoader();
@@ -45,6 +55,11 @@ function getFile(volume: number) {
     });
 }
 
+/**
+ * function loafFile PDF
+ * @param url linkLoadFile
+ * @param type ประเภทไฟล์
+ */
 function getPDF(url: string, type: string) {
   axios
     .get(url, {
@@ -78,6 +93,10 @@ function getPDF(url: string, type: string) {
     });
 }
 
+/**
+ * function Convert ชื่อไฟล์
+ * @param val indexItems
+ */
 function numToThai(val: number) {
   switch (val) {
     case 1:
@@ -85,7 +104,7 @@ function numToThai(val: number) {
     case 2:
       return "2-แบบแสดงรายละเอียดการเสนอผลงาน";
     case 3:
-      return "3-แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล (เอกสารแบบ ก.)";
+      return "3-แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล (เอกสารแบบ ก)";
     case 4:
       return "4-แบบประเมินคุณลักษณะบุคคล";
     case 5:
@@ -98,7 +117,7 @@ function numToThai(val: number) {
 }
 
 onMounted(() => {
-  getFile(1);
+  getFile(selectedItem.value);
 });
 </script>
 
diff --git a/src/modules/12_evaluatePersonal/components/Detail/step/step4.vue b/src/modules/12_evaluatePersonal/components/Detail/step/step4.vue
index 06b3f4dce..0e2fbc677 100644
--- a/src/modules/12_evaluatePersonal/components/Detail/step/step4.vue
+++ b/src/modules/12_evaluatePersonal/components/Detail/step/step4.vue
@@ -1,18 +1,25 @@
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
-import { useRouter, useRoute } from "vue-router";
+import { useRoute } from "vue-router";
+import { useQuasar } from "quasar";
 import axios from "axios";
 import http from "@/plugins/http";
 import config from "@/app.config";
-import keycloak from "@/plugins/keycloak";
-import { useCounterMixin } from "@/stores/mixin";
 import genReport from "@/plugins/genreport";
-import { useQuasar } from "quasar";
-import PopupReason from "@/components/Dialogs/PopupReason.vue";
+
+/** importType*/
+import type { PersonInformation } from "@/modules/12_evaluatePersonal/interface/response/evalute";
+
+/** importStore*/
+import { useCounterMixin } from "@/stores/mixin";
 import { useEvaluateDetailStore } from "@/modules/12_evaluatePersonal/store/EvaluateDetail";
 
+/** use*/
+const route = useRoute();
 const $q = useQuasar();
 const mixin = useCounterMixin();
+const store = useEvaluateDetailStore();
+
 const {
   date2Thai,
   showLoader,
@@ -21,21 +28,15 @@ const {
   success,
   dialogConfirm,
 } = mixin;
-const store = useEvaluateDetailStore();
 
-const router = useRouter();
-const route = useRoute();
 const id = ref<string>(route.params.id as string);
-const fullName = ref<string>(
-  keycloak.tokenParsed ? keycloak.tokenParsed.name!.toString() : ""
-);
+
 const profile = ref<any>();
 const messenger = ref<string>("");
 const title = ref<string>("");
 const modalEvaluation = ref<boolean>(false);
 const fileEvaluationUpload = ref<any>();
 const fileEvaluationUploadRef = ref<any>();
-const status = ref<string>("WAIT_CHECK_DOC_V1");
 const files = [
   {
     id: "file1",
@@ -71,6 +72,7 @@ const files = [
   },
 ];
 
+/** function ดาวน์โหลดไฟล์ต้นแบบ*/
 async function onClickDowloadFile(
   tp: string,
   templateName: string,
@@ -110,20 +112,23 @@ async function onClickDowloadFile(
   await genReport(body, fileName);
 }
 
-/** ติดต่อผู้ขอประเมิน */
+/** function เปิด popup ติดต่อผู้ขอประเมิน */
 function openPopUp() {
   modalEvaluation.value = true;
 }
 
-function downloadFile(name: string) {
+/**
+ * function ดาวน์โหลดไฟล์
+ * @param name ชื้อไฟล์
+ */
+async function downloadFile(name: string) {
   showLoader();
-  http
+  await http
     .get(config.API.evaluationFilebyId("เล่ม 1", id.value, name))
     .then((res) => {
       const link = res.data.downloadUrl;
       const type = res.data.fileType;
       const fileName = res.data.fileName;
-
       getPDF(link, type, fileName);
     })
     .catch((e) => {})
@@ -132,8 +137,14 @@ function downloadFile(name: string) {
     });
 }
 
-function getPDF(url: string, type: string, fileName: string) {
-  axios
+/**
+ * function เรียกไฟล์ PDF
+ * @param url  link PDF
+ * @param type  ประเภทไฟล์
+ * @param fileName  ชือไฟล์
+ */
+async function getPDF(url: string, type: string, fileName: string) {
+  await axios
     .get(url, {
       method: "GET",
       responseType: "blob",
@@ -152,7 +163,7 @@ function getPDF(url: string, type: string, fileName: string) {
     .finally(() => {});
 }
 
-/** ส่งไปประกาศบนเว็บไซต์ */
+/** function ส่งไปประกาศบนเว็บไซต์ */
 function onWebSite() {
   download10Url.value === ""
     ? (fileEvaluationUpload.value = "")
@@ -168,10 +179,11 @@ function onWebSite() {
         showLoader();
         http
           .put(config.API.evaluationApproveDoc1(id.value))
-          .then(() => {})
+          .then(() => {
+            success($q, "ส่งไปประกาศบนเว็บไซต์สำเร็จ");
+          })
           .catch(() => {})
           .finally(() => {
-            success($q, "ส่งไปประกาศบนเว็บไซต์สำเร็จ");
             getStep();
           });
       },
@@ -181,9 +193,10 @@ function onWebSite() {
   }
 }
 
-function getStep() {
+/** function เช็คขั้นตอน*/
+async function getStep() {
   showLoader();
-  http
+  await http
     .get(config.API.evaluateGetStep(id.value))
     .then((res: any) => {
       const data = res.data.result;
@@ -220,10 +233,14 @@ function getStep() {
     });
 }
 
-function upLoadFile(file: any) {
+/**
+ * function เรียก link อัปโหลด
+ * @param file ไฟล์
+ */
+async function upLoadFile(file: any) {
   if (file) {
     showLoader();
-    http
+    await http
       .post(config.API.evaluationFileListbyId("เล่ม 1", id.value), {
         fileList: {
           fileName: "10-ประกาศผลการคัดเลือกบุคคล (เอกสารหมายเลข 10)",
@@ -252,6 +269,10 @@ function upLoadFile(file: any) {
   }
 }
 
+/**
+ * function อัปโหลดไฟล์
+ * @param url link อัปโหลด
+ */
 function fileUpLoad(url: string) {
   axios
     .put(url, fileEvaluationUpload.value, {
@@ -268,16 +289,18 @@ function fileUpLoad(url: string) {
 }
 
 const myForm = ref<any>();
-function sentMessenger() {
+
+/** fiunction ส่งข้อความ*/
+async function sentMessenger() {
   myForm.value.validate().then(async (result: boolean) => {
     if (result) {
       showLoader();
-      http
+      await http
         .put(config.API.evaluationSentToContact(id.value), {
           subject: title.value,
           body: messenger.value,
         })
-        .then((res) => {
+        .then(() => {
           success($q, "ส่งข้อความสำเร็จ");
         })
         .catch((e) => {
@@ -294,9 +317,10 @@ function sentMessenger() {
 }
 
 const download10Url = ref<string>("");
-function checkDoc10() {
+/** function เช็คไฟล์อัปโหลด*/
+async function checkDoc10() {
   showLoader();
-  http
+  await http
     .get(
       config.API.evaluationPatchData(
         "เล่ม 1",
@@ -307,15 +331,16 @@ function checkDoc10() {
     .then((res: any) => {
       download10Url.value = res.data.downloadUrl;
     })
-    // .catch((e) => {
-    //   messageError($q, e);
-    // })
+    .catch(() => {
+      //   messageError($q, e);
+    })
     .finally(() => {
       hideLoader();
     });
   fetchProfile();
 }
 
+/** function เรียกข้แมูลคุณสมบัติ*/
 async function fetchProfile() {
   showLoader();
   await http
@@ -335,9 +360,10 @@ async function fetchProfile() {
 const author = ref<string>("");
 const subject = ref<string>("");
 
-function fetchDataSigner() {
+/** function เรียกข้อมูลผลงาน*/
+async function fetchDataSigner() {
   showLoader();
-  http
+  await http
     .get(config.API.evaluationSigner(id.value, 1))
     .then((res) => {
       const data = res.data.result;
@@ -352,14 +378,15 @@ function fetchDataSigner() {
     });
 }
 
-onMounted(() => {
-  checkDoc10();
-  fetchDataSigner();
+onMounted(async () => {
+  await checkDoc10();
+  await fetchDataSigner();
 });
 </script>
 
 <template>
   <div class="row q-col-gutter-md">
+    <!-- เอกสารเล่มที่ 1 -->
     <div class="col-12">
       <q-card bordered style="border: 1px solid #d6dee1">
         <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
@@ -397,6 +424,8 @@ onMounted(() => {
         </q-list>
       </q-card>
     </div>
+
+    <!-- ประกาศผลการคัดเลือกบุคคล (เอกสารหมายเลข 10) -->
     <div class="col-12">
       <q-card bordered style="border: 1px solid #d6dee1">
         <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
@@ -478,6 +507,8 @@ onMounted(() => {
         </div>
       </q-card>
     </div>
+
+    <!-- ติดต่อผู้ขอประเมิน -->
     <div class="col-12" v-if="store.currentStep == 4">
       <div class="q-mt-xs q-gutter-md" align="right">
         <q-btn label="ติดต่อผู้ขอประเมิน" color="info" @click="openPopUp" />
@@ -491,6 +522,7 @@ onMounted(() => {
     </div>
   </div>
 
+  <!--  popup ติดต่อผู้ขอประเมิน -->
   <q-dialog v-model="modalEvaluation" persistent>
     <q-card style="min-width: 60vw">
       <q-toolbar>
diff --git a/src/modules/12_evaluatePersonal/components/Detail/step/step5.vue b/src/modules/12_evaluatePersonal/components/Detail/step/step5.vue
index 97e4ae3dc..0fa7a9756 100644
--- a/src/modules/12_evaluatePersonal/components/Detail/step/step5.vue
+++ b/src/modules/12_evaluatePersonal/components/Detail/step/step5.vue
@@ -2,27 +2,18 @@
 import { ref, onMounted } from "vue";
 import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar } from "quasar";
-import keycloak from "@/plugins/keycloak";
-
+import { useRoute } from "vue-router";
 import axios from "axios";
 import http from "@/plugins/http";
 import config from "@/app.config";
-import { useRouter, useRoute } from "vue-router";
-import genReport from "@/plugins/genreport";
+
+/** importStore*/
 import { useEvaluateDetailStore } from "@/modules/12_evaluatePersonal/store/EvaluateDetail";
 
-const store = useEvaluateDetailStore();
-
-const modalView = ref<boolean>(false);
-const fullName = ref<string>(
-  keycloak.tokenParsed ? keycloak.tokenParsed.name!.toString() : ""
-);
-
-const router = useRouter();
-const route = useRoute();
-const numOfPages = ref<number>(0);
-const page = ref<number>(1);
+/** use*/
 const $q = useQuasar();
+const route = useRoute();
+const store = useEvaluateDetailStore();
 const mixin = useCounterMixin();
 const {
   dialogConfirm,
@@ -32,15 +23,16 @@ const {
   messageError,
   success,
 } = mixin;
+
+const page = ref<number>(1);
+const numOfPages = ref<number>(0);
+const modalView = ref<boolean>(false);
 const AnnouncementStartDate = ref<string | null>();
 const AnnouncementEndDate = ref<string | null>();
 const id = ref<string>(route.params.id as string);
 const pdfSrc = ref<any>();
 const fileEvaluation5 = ref<any>();
 const fileEvaluation5Ref = ref<any>();
-const status = ref<string>("ANNOUNCE_WEB");
-const website = ref<string>("https://bma-ehr.frappet.com/");
-
 const files = [
   {
     id: "file1",
@@ -59,28 +51,8 @@ const files = [
   },
 ];
 
-const listFile = [
-  {
-    id: "x1",
-    fileName: "เอกสาร 1",
-    pathName: "12",
-  },
-  {
-    id: "x2",
-    fileName: "เอกสาร 2",
-    pathName: "12",
-  },
-];
-
-function downloadFile(name: string) {
-  console.log("download");
-}
-
-function deleteFile(name: string) {
-  console.log("delete");
-}
-
-function save() {
+/** function บันทึกแจ้งผลการประกาศคัดเลือก*/
+async function save() {
   download10Url.value === ""
     ? (fileEvaluation5.value = "")
     : fileEvaluation5.value;
@@ -89,16 +61,17 @@ function save() {
     fileEvaluation5Ref.value.hasError === false &&
     download10Url.value !== ""
   ) {
-    dialogConfirm($q, () => {
-      showLoader();
+    dialogConfirm($q, async () => {
+      await showLoader();
       http
         .put(config.API.evaluationNext5To6(id.value))
-        // .then((res) => {})
+        .then(() => {
+          success($q, "บันทึกแจ้งผลการประกาศคัดเลือกสำเร็จ");
+        })
         .catch((e) => {
           messageError($q, e);
         })
         .finally(() => {
-          success($q, "บันทึกแจ้งผลการประกาศคัดเลือกสำเร็จ");
           store.step = 6;
           store.currentStep = 6;
           hideLoader();
@@ -107,6 +80,10 @@ function save() {
   }
 }
 
+/**
+ * function เรียก link อัปโหลด
+ * @param file ไฟล์
+ */
 function upLoadFile(file: any) {
   if (file) {
     showLoader();
@@ -139,36 +116,27 @@ function upLoadFile(file: any) {
   }
 }
 
+/**
+ * function อัปโหลดไฟล์
+ * @param url link อัปโหลด
+ */
 function fileUpLoad(url: string) {
   axios
     .put(url, fileEvaluation5.value, {
       headers: { "Content-Type": fileEvaluation5.value?.type },
       onUploadProgress: (e) => console.log(e),
     })
+    .then(() => {
+      success($q, "อัปโหลดไฟล์สำเร็จ");
+    })
     .catch((e) => {
       messageError($q, e);
     })
     .finally(() => {
       checkDocResult();
-      success($q, "อัปโหลดไฟล์สำเร็จ");
     });
 }
 
-function getFileName(fileName: string) {
-  if (fileName && fileName.lastIndexOf(".") !== -1) {
-    const index = fileName.indexOf("(");
-    if (index !== -1) {
-      return fileName.substring(0, index).trim();
-    } else {
-      // กรณีไม่มีวงเล็บ
-      return fileName.split(".").slice(0, -1).join(".");
-    }
-  } else {
-    // ในกรณีที่ไม่มีนามสกุล
-    return fileName;
-  }
-}
-
 /** ไปหน้าต่อไปของรายงาน */
 function nextPage() {
   if (page.value < numOfPages.value) {
@@ -183,31 +151,31 @@ function backPage() {
   }
 }
 
-function copyLink(name: string) {
-  showLoader();
-  http
+/**
+ * function คัดลอก URL
+ * @param name ชื่อไฟล์
+ */
+async function copyLink(name: string) {
+  await http
     .get(config.API.evaluationFilebyId("เล่ม 1", id.value, name))
     .then((res) => {
-      console.log(res.data);
       const link = res.data.downloadUrl;
       navigator.clipboard.writeText(link);
-    })
-    .catch((e) => {})
-    .finally(() => {
       success($q, "คัดลอก URL สำเร็จ");
-      hideLoader();
+    })
+    .catch((e) => {
+      messageError($q, e);
     });
 }
 
-function getDate() {
+/** function เรียกข้อมูลวันที่ประกาศ*/
+async function getDate() {
   showLoader();
-  http
+  await http
     .get(config.API.evaluationDateAnnounce(id.value))
     .then((res) => {
       const data = res.data.result;
       AnnouncementStartDate.value = date2Thai(data.dateStartAnnounce);
-      // const endDate = new Date(data.dateStartAnnounce);
-      // endDate.setDate(endDate.getDate() + 30);
       AnnouncementEndDate.value = date2Thai(data.dateEndAnnounce);
     })
     .catch((e) => {
@@ -217,50 +185,12 @@ function getDate() {
       hideLoader();
     });
 }
-// function linkCopy(link: string) {
-//   navigator.clipboard
-//     .writeText(link)
-//     .then(() => {
-//       console.log(`Copied link for file: ${link}`);
-//     })
-//     .catch((e) => {
-//       messageError($q, e);
-//     })
-//     .finally(() => {
-//       success($q, "คัดลอกสำเร็จ");
-//     });
-// }
-
-// async function onClickDowloadFile(
-//   tp: string,
-//   templateName: string,
-//   fileName: string
-// ) {
-//   showLoader();
-//   const data = Object.assign(
-//     { fullName: fullName.value },
-//     tp === "EV1_005" || tp === "EV1_007" ? { organizationName: "-" } : null,
-//     tp === "EV1_007" ? { positionName: "-" } : null,
-//     tp === "EV1_007" ? { positionLeaveName: "-" } : null
-//   );
-//   const body = {
-//     template: tp,
-//     reportName: templateName,
-//     data: data,
-//   };
-//   console.log(body);
-//   await genReport(body, fileName);
-// }
-
-// function onClickViewPDF(file: any) {
-//   // pdfSrc.value = file.webkitRelativePath;
-//   modalView.value = true;
-// }
 
 const download10Url = ref<string>("");
-function checkDocResult() {
+/** function เช็คไฟล์อัปโหลด*/
+async function checkDocResult() {
   showLoader();
-  http
+  await http
     .get(
       config.API.evaluationPatchData(
         "เล่ม 1",
@@ -271,9 +201,9 @@ function checkDocResult() {
     .then((res: any) => {
       download10Url.value = res.data.downloadUrl;
     })
-    // .catch((e) => {
-    //   messageError($q, e);
-    // })
+    .catch(() => {
+      //   messageError($q, e);
+    })
     .finally(() => {
       hideLoader();
     });
@@ -281,10 +211,10 @@ function checkDocResult() {
 
 const author = ref<string>("");
 const subject = ref<string>("");
-
-function fetchDataSigner() {
+/** function เรียกข้อมูลผลงาน*/
+async function fetchDataSigner() {
   showLoader();
-  http
+  await http
     .get(config.API.evaluationSigner(id.value, 1))
     .then((res) => {
       const data = res.data.result;
@@ -428,91 +358,6 @@ onMounted(async () => {
       </q-card>
     </div>
 
-    <!-- <div class="col-12">
-      <q-card bordered style="border: 1px solid #d6dee1">
-        <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
-          บันทึกแจ้งผลการประกาศคัดเลือก
-        </div>
-        <div class="col-12"><q-separator /></div>
-        <div class="row">
-          <div class="col-12 q-pa-sm">
-            <div class="row q-col-gutter-md col-12 q-mb-xs">
-              <div class="col-xs-12 col-sm-11 row">
-                <q-file
-                  v-model="fileEvaluation5"
-                  class="col-12"
-                  outlined
-                  dense
-                  hide-bottom-space
-                  lazy-rules
-                  accept=".pdf"
-                  label="อัปโหลดไฟล์"
-                >
-                  <template v-slot:prepend>
-                    <q-icon name="attach_file" />
-                  </template>
-                </q-file>
-              </div>
-              <div class="col-1 self-center text-center q-pl-none">
-                <q-btn
-                  flat
-                  round
-                  dense
-                  color="primary"
-                  icon="mdi-upload"
-                  @click="upLoadFile"
-                  ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
-                >
-              </div>
-            </div>
-            <div v-if="listFile.length > 0">
-              <q-list
-                v-for="file in listFile"
-                :key="file.id"
-                class="full-width"
-                bordered
-                separator
-              >
-                <q-item clickable v-ripple>
-                  <q-item-section>{{ file.fileName }}</q-item-section>
-                  <q-item-section avatar>
-                    <div class="row">
-                      <div>
-                        <q-btn
-                          dense
-                          flat
-                          round
-                          size="12px"
-                          color="blue"
-                          icon="mdi-download-outline"
-                          @click="downloadFile(file.pathName)"
-                        >
-                          <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
-                        </q-btn>
-                        <q-btn
-                          dense
-                          flat
-                          round
-                          size="12px"
-                          color="red"
-                          icon="mdi-trash-can-outline"
-                          @click="deleteFile(file.pathName)"
-                        >
-                          <q-tooltip>ลบไฟล์</q-tooltip>
-                        </q-btn>
-                      </div>
-                    </div>
-                  </q-item-section>
-                </q-item>
-              </q-list>
-            </div>
-            <div class="col-12" v-else>
-              <q-card class="q-pa-md" bordered> ไม่มีรายการเอกสาร </q-card>
-            </div>
-          </div>
-        </div>
-      </q-card>
-    </div> -->
     <div v-if="store.currentStep == 5" class="col-12">
       <div class="q-mt-xs q-gutter-md" align="right">
         <q-btn
diff --git a/src/modules/12_evaluatePersonal/components/Detail/step/step6.vue b/src/modules/12_evaluatePersonal/components/Detail/step/step6.vue
index 4df260d41..bc686eb46 100644
--- a/src/modules/12_evaluatePersonal/components/Detail/step/step6.vue
+++ b/src/modules/12_evaluatePersonal/components/Detail/step/step6.vue
@@ -1,52 +1,45 @@
 <script setup lang="ts">
 import { ref, reactive, onMounted } from "vue";
-import ViewPDF from "@/modules/12_evaluatePersonal/components/Detail/viewstep/viewPDF.vue";
-import { useCounterMixin } from "@/stores/mixin";
-import { useRouter, useRoute } from "vue-router";
+import { useRoute } from "vue-router";
 import { useQuasar } from "quasar";
-import type { FormCommand } from "@/modules/12_evaluatePersonal/interface/index/evalute";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
-const router = useRouter();
-const route = useRoute();
-const id = ref<string>(route.params.id as string);
-const $q = useQuasar();
-const dateEndPrepareDoc2 = ref<string | null>();
-const mixin = useCounterMixin();
-const { date2Thai, showLoader, hideLoader, messageError, success } = mixin;
-const AnnouncementDate = ref<string | null>(date2Thai(new Date()));
-const fileEvaluation1 = ref<any>();
+/** importType*/
+import type { FormCommand } from "@/modules/12_evaluatePersonal/interface/index/evalute";
 
-const pdfSrc = ref<any>();
-const modalView = ref<boolean>(false);
-const emit = defineEmits(["update:form"]);
+/** importStore*/
+import { useCounterMixin } from "@/stores/mixin";
+
+/**use*/
+const $q = useQuasar();
+const route = useRoute();
+const mixin = useCounterMixin();
+const dateEndPrepareDoc2 = ref<string | null>();
+
+const { date2Thai, showLoader, hideLoader, messageError } = mixin;
+
+const id = ref<string>(route.params.id as string);
 const formCommand = reactive<FormCommand>({
   elementaryFullName: "",
   elementaryPosition: "",
   abovelevelFullname: "",
   abovelevelPosition: "",
 });
+const author = ref<string>("");
+const subject = ref<string>("");
+const assignedPosition = ref<string>("");
 
-function onClickViewPDF(file: any) {
-  pdfSrc.value = file.webkitRelativePath;
-  modalView.value = true;
-}
-
-const updateInput = (value: any) => {
-  emit("update:form", value, ref);
-};
-
-function getDate() {
+/** function เรียกข้อมูลวันที่ประกาศ*/
+async function getDate() {
   showLoader();
-  http
+  await http
     .get(config.API.evaluationDateAnnounce(id.value))
     .then((res) => {
       const data = res.data.result;
       const endDate = new Date(data.dateEndAnnounce);
       endDate.setDate(endDate.getDate() + 180);
       dateEndPrepareDoc2.value = date2Thai(endDate);
-      // dateEndPrepareDoc2.value = dateEndPrepareDoc2.value;
     })
     .catch((e) => {
       messageError($q, e);
@@ -56,13 +49,10 @@ function getDate() {
     });
 }
 
-const author = ref<string>("");
-const subject = ref<string>("");
-const assignedPosition = ref<string>("");
-
-function getSigner() {
+/** function เรียกข้อมูลผลงาน*/
+async function getSigner() {
   showLoader();
-  http
+  await http
     .get(config.API.evaluationSigner(id.value, 2))
     .then((res) => {
       const data = res.data.result;
@@ -74,17 +64,17 @@ function getSigner() {
       subject.value = data.subjectDoc2;
       assignedPosition.value = data.assignedPosition;
     })
-    // .catch((e) => {
-    //   messageError($q, e);
-    // })
+    .catch((e) => {
+      // messageError($q, e);
+    })
     .finally(() => {
       hideLoader();
     });
 }
 
-onMounted(() => {
-  getSigner();
-  getDate();
+onMounted(async () => {
+  await getSigner();
+  await getDate();
 });
 </script>
 
@@ -99,6 +89,7 @@ onMounted(() => {
       </q-banner>
     </div>
 
+    <!-- ผลงาน -->
     <div class="col-12">
       <q-card bordered style="border: 1px solid #d6dee1">
         <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">ผลงาน</div>
@@ -115,7 +106,6 @@ onMounted(() => {
                     outlined
                     label="ชื่อผลงาน"
                     v-model="subject"
-                    @update:model-value="updateInput(formCommand)"
                     :rules="[(val) => !!val || `${'กรุณากรอกชื่อผลงาน'}`]"
                     lazy-rules
                   />
@@ -125,7 +115,6 @@ onMounted(() => {
                     dense
                     outlined
                     v-model="author"
-                    @update:model-value="updateInput(formCommand)"
                     label="เจ้าของผลงาน"
                     :rules="[(val) => !!val || `${'กรุณากรอกเจ้าของผลงาน'}`]"
                     lazy-rules
@@ -136,7 +125,6 @@ onMounted(() => {
                     dense
                     outlined
                     v-model="assignedPosition"
-                    @update:model-value="updateInput(formCommand)"
                     label="ตำแหน่งที่ได้รับ"
                     :rules="[
                       (val) => !!val || `${'กรุณากรอกตำแหน่งที่ได้รับ'}`,
@@ -150,65 +138,8 @@ onMounted(() => {
         </div>
       </q-card>
     </div>
-    <!-- <div class="col-6">
-      <q-card bordered style="border: 1px solid #d6dee1">
-        <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
-          เอกสารเล่ม 2
-        </div>
-        <div class="col-12"><q-separator /></div>
-        <div class="row">
-          <div class="col-12 q-pa-sm">
-            <div class="row q-col-gutter-md col-12">
-              <div class="col-xs-12 col-sm-6 row">
-                <q-btn
-                  class="col-12"
-                  outline
-                  icon="download"
-                  label="ดาวน์โหลดต้นแบบ"
-                  color="primary"
-                >
-                  <q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
-                >
-              </div>
-              <div class="col-xs-12 col-sm-6 row">
-                <q-btn
-                  v-if="fileEvaluation1"
-                  class="col-12"
-                  outline
-                  icon="visibility"
-                  label="ดูไฟล์เอกสาร"
-                  color="primary"
-                  @click="onClickViewPDF(fileEvaluation1)"
-                >
-                  <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
-                >
-              </div>
-              <div class="col-xs-12 col-sm-11 row">
-                <q-file
-                  v-model="fileEvaluation1"
-                  class="col-12"
-                  outlined
-                  dense
-                  hide-bottom-space
-                  lazy-rules
-                  accept=".pdf"
-                >
-                  <template v-slot:prepend>
-                    <q-icon name="attach_file" />
-                  </template>
-                </q-file>
-              </div>
-              <div class="col-1 self-center text-center">
-                <q-btn flat round dense color="primary" icon="mdi-upload"
-                  ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
-                >
-              </div>
-            </div>
-          </div>
-        </div>
-      </q-card>
-    </div> -->
 
+    <!-- เลือกผู้เซ็นเอกสาร -->
     <div class="col-12">
       <q-card bordered style="border: 1px solid #d6dee1">
         <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
@@ -231,7 +162,6 @@ onMounted(() => {
                     outlined
                     label="ชื่อ-นามสกุล"
                     v-model="formCommand.elementaryFullName"
-                    @update:model-value="updateInput(formCommand)"
                     :rules="[(val) => !!val || `${'กรุณากรอกชื่อ-นามสกุล'}`]"
                     lazy-rules
                   />
@@ -242,7 +172,6 @@ onMounted(() => {
                     dense
                     outlined
                     v-model="formCommand.elementaryPosition"
-                    @update:model-value="updateInput(formCommand)"
                     label="ตำแหน่ง"
                     :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่ง'}`]"
                     lazy-rules
@@ -267,7 +196,6 @@ onMounted(() => {
                     label="ชื่อ-นามสกุล"
                     :rules="[(val) => !!val || `${'กรุณากรอกชื่อ-นามสกุล'}`]"
                     lazy-rules
-                    @update:model-value="updateInput(formCommand)"
                   />
                   <q-input
                     ref="abovelevelPositionRef"
@@ -279,7 +207,6 @@ onMounted(() => {
                     label="ตำแหน่ง"
                     :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่ง'}`]"
                     lazy-rules
-                    @update:model-value="updateInput(formCommand)"
                   />
                 </div>
               </div>
@@ -289,33 +216,6 @@ onMounted(() => {
       </q-card>
     </div>
   </div>
-
-  <!-- Dialog Full Screen -->
-  <q-dialog
-    v-model="modalView"
-    persistent
-    :maximized="true"
-    transition-show="slide-up"
-    transition-hide="slide-down"
-  >
-    <q-card class="bg-white">
-      <div class="flex justify-end items-center align-center q-mr-md q-mt-sm">
-        <q-btn
-          icon="close"
-          unelevated
-          round
-          dense
-          style="color: #ff8080; background-color: #ffdede"
-          size="12px"
-          v-close-popup
-        />
-      </div>
-
-      <div class="q-pa-md">
-        <ViewPDF />
-      </div>
-    </q-card>
-  </q-dialog>
 </template>
 
 <style scoped></style>
diff --git a/src/modules/12_evaluatePersonal/components/Detail/step/step7.vue b/src/modules/12_evaluatePersonal/components/Detail/step/step7.vue
index 931dc45b6..bc4a9adcd 100644
--- a/src/modules/12_evaluatePersonal/components/Detail/step/step7.vue
+++ b/src/modules/12_evaluatePersonal/components/Detail/step/step7.vue
@@ -1,33 +1,41 @@
 <script setup lang="ts">
-import { reactive, ref, onMounted } from "vue";
-import { VuePDF, usePDF } from "@tato30/vue-pdf";
-import { useCounterMixin } from "@/stores/mixin";
-import { useEvaluateDetailStore } from "@/modules/12_evaluatePersonal/store/EvaluateDetail";
+import { ref, onMounted } from "vue";
+import { usePDF } from "@tato30/vue-pdf";
+import { useQuasar } from "quasar";
+import { useRoute } from "vue-router";
 import http from "@/plugins/http";
 import config from "@/app.config";
 import axios from "axios";
-import { useRouter, useRoute } from "vue-router";
-import { useQuasar } from "quasar";
 
+/** importStore*/
+import { useEvaluateDetailStore } from "@/modules/12_evaluatePersonal/store/EvaluateDetail";
+import { useCounterMixin } from "@/stores/mixin";
+
+/** use*/
 const $q = useQuasar();
-const router = useRouter();
 const route = useRoute();
-const id = ref<string>(route.params.id as string);
-
 const store = useEvaluateDetailStore();
 const mixin = useCounterMixin();
 
-const { date2Thai, showLoader, hideLoader, messageError } = mixin;
+const { showLoader, hideLoader, messageError } = mixin;
 
-const selectedItem = ref(1);
+const id = ref<string>(route.params.id as string);
+const selectedItem = ref<number>(1);
 
+/**
+ * funtion เลือกไฟล์
+ * @param itemNumber indexItems
+ */
 function handleItemClick(itemNumber: number) {
   store.tabPanels = itemNumber.toString();
   selectedItem.value = itemNumber;
-
   getFile(itemNumber);
 }
-// evaluationFilebyId
+
+/**
+ * function เรียกไฟล์
+ * @param volume index item
+ */
 function getFile(volume: number) {
   const fileText = numToThai(volume);
   console.log(fileText);
@@ -37,10 +45,9 @@ function getFile(volume: number) {
     .then((res) => {
       const link = res.data.downloadUrl;
       const type = res.data.fileType;
-      console.log(link, type);
       getPDF(link, type);
     })
-    .catch((e) => {
+    .catch(() => {
       // messageError($q, e);
     })
     .finally(() => {
@@ -48,7 +55,13 @@ function getFile(volume: number) {
     });
 }
 
+/**
+ * function loafFile PDF
+ * @param url linkLoadFile
+ * @param type ประเภทไฟล์
+ */
 function getPDF(url: string, type: string) {
+  showLoader();
   axios
     .get(url, {
       method: "GET",
@@ -60,12 +73,11 @@ function getPDF(url: string, type: string) {
     })
     .then(async (res) => {
       store.log = 0;
-      console.log(res);
       const blob = new Blob([res.data]);
       const objectUrl = URL.createObjectURL(blob);
 
       const pdfData = await usePDF(`${objectUrl}`);
-      showLoader();
+
       setTimeout(() => {
         store.urlDownloadFile = url;
         store.log = 1;
@@ -82,6 +94,10 @@ function getPDF(url: string, type: string) {
     });
 }
 
+/**
+ * function Convert ชื่อไฟล์
+ * @param val indexItems
+ */
 function numToThai(val: number) {
   switch (val) {
     case 1:
@@ -91,8 +107,8 @@ function numToThai(val: number) {
   }
 }
 
-onMounted(() => {
-  getFile(1);
+onMounted(async () => {
+  await getFile(selectedItem.value);
 });
 </script>
 
diff --git a/src/modules/12_evaluatePersonal/components/Detail/step/step8.vue b/src/modules/12_evaluatePersonal/components/Detail/step/step8.vue
index e1b9f99c0..658488620 100644
--- a/src/modules/12_evaluatePersonal/components/Detail/step/step8.vue
+++ b/src/modules/12_evaluatePersonal/components/Detail/step/step8.vue
@@ -1,25 +1,25 @@
 <script setup lang="ts">
 import { onMounted, ref } from "vue";
+import { useRoute } from "vue-router";
+import { useQuasar } from "quasar";
 import axios from "axios";
 import http from "@/plugins/http";
 import config from "@/app.config";
-import { useRouter, useRoute } from "vue-router";
-import { useCounterMixin } from "@/stores/mixin";
-import { useQuasar } from "quasar";
-import keycloak from "@/plugins/keycloak";
+import genReport from "@/plugins/genreport";
 
+/** importType*/
 import type { FileEvaluationRefRef } from "@/modules/12_evaluatePersonal/interface/index/evalute";
 
-import genReport from "@/plugins/genreport";
+/** importStore*/
+import { useCounterMixin } from "@/stores/mixin";
 import { useEvaluateDetailStore } from "@/modules/12_evaluatePersonal/store/EvaluateDetail";
 
+/** uer*/
 const store = useEvaluateDetailStore();
-
-const fullName = ref<string>(
-  keycloak.tokenParsed ? keycloak.tokenParsed.name!.toString() : ""
-);
 const $q = useQuasar();
 const mixin = useCounterMixin();
+const route = useRoute();
+
 const {
   date2Thai,
   showLoader,
@@ -28,13 +28,9 @@ const {
   success,
   dialogConfirm,
 } = mixin;
-const router = useRouter();
-const route = useRoute();
+
 const id = ref<string>(route.params.id as string);
 const modalConfirm = ref<boolean>(false);
-const modalView = ref<boolean>(false);
-const pdfSrc = ref<any>();
-
 const nameOfWork = ref<string>("");
 const nameOfOwner = ref<string>("");
 const position = ref<string>("");
@@ -60,6 +56,7 @@ const fileEvaluationRef: FileEvaluationRefRef = {
   fileEvaluation86: fileEvaluation86Ref,
 };
 
+/** function ดาวน์โหลดไฟล์ต้นแบบ*/
 async function onClickDowloadFile(
   tp: string,
   templateName: string,
@@ -95,15 +92,11 @@ async function onClickDowloadFile(
   await genReport(body, fileName);
 }
 
-function onClickViewPDF(file: any) {
-  pdfSrc.value = file.webkitRelativePath;
-  modalView.value = true;
-}
-
-function openConfirmEvalution() {
-  modalConfirm.value = true;
-}
-
+/**
+ * function เรียก link อัปโหลด
+ * @param name ชื่อไฟล์
+ * @param file ไฟล์
+ */
 function upLoadFile(name: string, file: any) {
   if (file) {
     showLoader();
@@ -138,6 +131,11 @@ function upLoadFile(name: string, file: any) {
   }
 }
 
+/**
+ * function อัปโหลดไฟล์
+ * @param url link อัปโหลด
+ * @param file ไฟล์
+ */
 function fileUpLoad(url: string, file: any) {
   axios
     .put(url, file, {
@@ -148,62 +146,11 @@ function fileUpLoad(url: string, file: any) {
       messageError($q, e);
     })
     .finally(() => {
-      // fileEvaluation81.value = null;
-      // fileEvaluation82.value = null;
-      // fileEvaluation83.value = null;
-      // fileEvaluation84.value = null;
-      // fileEvaluation85.value = null;
-      // fileEvaluation86.value = null;
       success($q, "อัปโหลดไฟล์สำเร็จ");
     });
 }
 
-// const fileEdit2 = ref<string>("");
-// function downloadFile() {
-//   showLoader();
-//   http
-//     .get(
-//       config.API.evaluationFilebyId(
-//         "เล่ม 2",
-//         id.value,
-//         "2-เอกสารเล่ม 2 (ฉบับแก้ไข)"
-//       )
-//     )
-//     .then((res) => {
-//       fileEdit2.value = res.data.downloadUrl;
-//       const link = res.data.downloadUrl;
-//       const type = res.data.fileType;
-//       const fileName = res.data.fileName;
-//       getPDF(link, type, fileName);
-//     })
-//     .catch((e) => {})
-//     .finally(() => {
-//       hideLoader();
-//     });
-// }
-
-// function getPDF(url: string, type: string, fileName: string) {
-//   axios
-//     .get(url, {
-//       method: "GET",
-//       responseType: "blob",
-//       headers: {
-//         "Content-Type": "application/json",
-//         Accept: type, // ถ้ามีการระบุเมื่ออัปโหลด
-//       },
-//     })
-//     .then(async (res) => {
-//       console.log(res);
-//       const a = document.createElement("a");
-//       a.href = window.URL.createObjectURL(res.data);
-//       a.download = fileName;
-//       // a.download = res.data.fileName + `.${mime.getExtension(res.data.fileType)}`
-//       a.click();
-//     })
-//     .catch((e) => {})
-//     .finally(() => {});
-// }
-
+/** function ยืนยันผลการพิจารณา*/
 async function confirmApprove() {
   const fileEvaluationValues = [
     fileEvaluation81,
@@ -277,22 +224,25 @@ async function confirmApprove() {
   }, 100);
 }
 
+/** function ยืนยันผลการพิจารณา*/
 function nextStep() {
   showLoader();
   http
     .put(config.API.evaluationNextFinish(id.value))
-    // .then((res) => {})
+    .then(() => {
+      success($q, "ยืนยันผลการพิจารณาสำเร็จ");
+      store.step = 9;
+      store.currentStep = 9;
+    })
     .catch((e) => {
       messageError($q, e);
     })
     .finally(() => {
-      success($q, "ยืนยันผลการพิจารณาสำเร็จ");
-      store.step = 9;
-      store.currentStep = 9;
       hideLoader();
     });
 }
 
+/** function เรียกข้แมูลคุณสมบัติ*/
 async function fetchProfile() {
   showLoader();
   await http
@@ -310,9 +260,9 @@ async function fetchProfile() {
 }
 
 const downloadDocEditUrl = ref<string>("");
-function checkDocEdit() {
+async function checkDocEdit() {
   showLoader();
-  http
+  await http
     .get(
       config.API.evaluationPatchData(
         "เล่ม 2",
@@ -323,9 +273,9 @@ function checkDocEdit() {
     .then((res: any) => {
       downloadDocEditUrl.value = res.data.downloadUrl;
     })
-    // .catch((e) => {
-    //   messageError($q, e);
-    // })
+    .catch(() => {
+      // messageError($q, e);
+    })
     .finally(() => {
       hideLoader();
     });
@@ -337,6 +287,11 @@ const downloadFile3 = ref<string>("");
 const downloadFile4 = ref<string>("");
 const downloadFile5 = ref<string>("");
 const downloadFile6 = ref<string>("");
+
+/**
+ * function ดาวน์โหลดไฟล์
+ * @param fileName ชื่อไฟล์
+ */
 async function downloadFileList(fileName: string) {
   showLoader();
   await http
@@ -368,6 +323,7 @@ const author = ref<string>("");
 const subject = ref<string>("");
 const assignedPosition = ref<string>("");
 
+/** function เรียกข้อมูลผลงาน*/
 async function fetchDataSigner() {
   showLoader();
   await http
@@ -386,19 +342,19 @@ async function fetchDataSigner() {
     });
 }
 
-onMounted(() => {
-  fetchProfile();
-  fetchDataSigner();
-  downloadFileList(
+onMounted(async () => {
+  await fetchProfile();
+  await fetchDataSigner();
+  await downloadFileList(
     "แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลประกอบการประเมินผลงาน (เอกสารแบบ ค)"
   );
-  downloadFileList("บัญชีแสดงการรับ-ส่งผลงาน (เอกสารหมายเลข 15)");
-  downloadFileList("แบบประเมินผลงาน (เอกสารหมายเลข 16)");
-  downloadFileList("แบบแสดงการประเมินผลงาน (เอกสารหมายเลข 17)");
-  downloadFileList("แบบรายงานผลการประเมินบุคคล (เอกสารหมายเลข 18)");
-  downloadFileList("แบบสรุปผลการประเมิน (เอกสารแบบ ง)");
+  await downloadFileList("บัญชีแสดงการรับ-ส่งผลงาน (เอกสารหมายเลข 15)");
+  await downloadFileList("แบบประเมินผลงาน (เอกสารหมายเลข 16)");
+  await downloadFileList("แบบแสดงการประเมินผลงาน (เอกสารหมายเลข 17)");
+  await downloadFileList("แบบรายงานผลการประเมินบุคคล (เอกสารหมายเลข 18)");
+  await downloadFileList("แบบสรุปผลการประเมิน (เอกสารแบบ ง)");
 
-  checkDocEdit();
+  await checkDocEdit();
 });
 </script>
 
diff --git a/src/modules/12_evaluatePersonal/components/Detail/step/step9.vue b/src/modules/12_evaluatePersonal/components/Detail/step/step9.vue
index cd3e16630..431a956f7 100644
--- a/src/modules/12_evaluatePersonal/components/Detail/step/step9.vue
+++ b/src/modules/12_evaluatePersonal/components/Detail/step/step9.vue
@@ -1,18 +1,22 @@
 <script setup lang="ts">
 import { ref } from "vue";
-import { useRouter, useRoute } from "vue-router";
-import { useCounterMixin } from "@/stores/mixin";
+import { useRoute } from "vue-router";
 import { useQuasar } from "quasar";
 import env from "@/api";
 
+/** importStore*/
+import { useCounterMixin } from "@/stores/mixin";
+
+/** use*/
 const $q = useQuasar();
-const mixin = useCounterMixin();
-const { success } = mixin;
 const route = useRoute();
+const mixin = useCounterMixin();
+
+const { success } = mixin;
 const id = ref<string>(route.params.id as string);
-const status = ref<string>("DONE");
 const link = ref<string>(env.LINK_EVALUATE_PUBLISH);
 
+/** function คัดลอกลิงก์*/
 function copyLink() {
   const linkById = `${link.value}/${id.value}`;
   navigator.clipboard.writeText(linkById);
@@ -23,10 +27,7 @@ function copyLink() {
 <template>
   <div class="row">
     <div class="col-12 text-center">
-      <!-- <div> -->
       <p class="text-weight-bold q-mb-none">Public URL</p>
-      <!-- <a :href="link + '/' + id" target="_blank">{{ `${link}/${id}` }}</a> -->
-      <!-- </div> -->
 
       <q-btn
         class="q-mt-md"
diff --git a/src/modules/12_evaluatePersonal/components/Detail/viewstep/tableStep1.vue b/src/modules/12_evaluatePersonal/components/Detail/viewstep/tableStep1.vue
index 11e1a170b..c8c9b55ec 100644
--- a/src/modules/12_evaluatePersonal/components/Detail/viewstep/tableStep1.vue
+++ b/src/modules/12_evaluatePersonal/components/Detail/viewstep/tableStep1.vue
@@ -24,23 +24,6 @@ const props = defineProps({
     style="width: 610px"
     :rows-per-page-options="[10, 25, 50, 100]"
   >
-    <!-- <template v-slot:header="props">
-      <q-tr :props="props">
-        <q-th v-for="col in props.cols" :key="col.name" :props="props">
-          <span class="text-weight-medium" v-html="col.label" />
-        </q-th>
-        <q-th auto-width />
-      </q-tr>
-    </template> -->
-    <!-- <template v-slot:body="props">
-      <q-tr :props="props" class="cursor-pointer">
-        <q-td v-for="col in props.cols" :key="col.name" :props="props">
-          <div>
-            {{ col.value }}
-          </div>
-        </q-td>
-      </q-tr>
-    </template> -->
   </d-table>
 </template>
 
diff --git a/src/modules/12_evaluatePersonal/components/Detail/viewstep/viewPDF.vue b/src/modules/12_evaluatePersonal/components/Detail/viewstep/viewPDF.vue
index e07c44b1b..aafbe8abc 100644
--- a/src/modules/12_evaluatePersonal/components/Detail/viewstep/viewPDF.vue
+++ b/src/modules/12_evaluatePersonal/components/Detail/viewstep/viewPDF.vue
@@ -1,8 +1,11 @@
 <script setup lang="ts">
 import { ref, watch, onMounted } from "vue";
-import { VuePDF, usePDF } from "@tato30/vue-pdf";
+import { VuePDF } from "@tato30/vue-pdf";
+
+/** importStore*/
 import { useEvaluateDetailStore } from "@/modules/12_evaluatePersonal/store/EvaluateDetail";
 
+/** use*/
 const store = useEvaluateDetailStore();
 
 const props = defineProps({
diff --git a/src/modules/12_evaluatePersonal/components/Detail/viewstep/viewStep1.vue b/src/modules/12_evaluatePersonal/components/Detail/viewstep/viewStep1.vue
index 21b4542a5..a0c5786b9 100644
--- a/src/modules/12_evaluatePersonal/components/Detail/viewstep/viewStep1.vue
+++ b/src/modules/12_evaluatePersonal/components/Detail/viewstep/viewStep1.vue
@@ -1,15 +1,31 @@
 <script setup lang="ts">
-import TableData from "@/modules/12_evaluatePersonal/components/Detail/viewstep/tableStep1.vue";
-import { useCounterMixin } from "@/stores/mixin";
+import { onMounted, reactive } from "vue";
 
-import { useEvaluateDetailStore } from "@/modules/12_evaluatePersonal/store/EvaluateDetail";
-import { onMounted, reactive, watch } from "vue";
+/** importType*/
 import type {
   EducationForm,
   CertificatesForm,
 } from "@/modules/12_evaluatePersonal/interface/index/evalute";
 
+/** importComponents*/
+import TableData from "@/modules/12_evaluatePersonal/components/Detail/viewstep/tableStep1.vue";
+
+/** import Store*/
+import { useCounterMixin } from "@/stores/mixin";
+import { useEvaluateDetailStore } from "@/modules/12_evaluatePersonal/store/EvaluateDetail";
+
+/** use*/
 const mixin = useCounterMixin();
+const store = useEvaluateDetailStore();
+
+const {
+  columnsCertificates,
+  columnSalaries,
+  columnTraining,
+  columnProjectsProposed,
+} = store;
+const { date2Thai } = mixin;
+
 const props = defineProps({
   data: {
     type: Object,
@@ -17,18 +33,7 @@ const props = defineProps({
   },
 });
 
-const { date2Thai } = mixin;
-
-const store = useEvaluateDetailStore();
-const {
-  columnsCertificates,
-  columnSalaries,
-  columnTraining,
-  columnProjectsProposed,
-} = store;
-
 const formDetail = reactive({
-  userId: props.data.id,
   citizenId: "",
   prefix: "",
   fullName: "",
@@ -44,10 +49,12 @@ const formDetail = reactive({
   salaries: [],
   trainings: [],
   assessments: [],
-  // Type: "",
-  // Step: "",
 });
 
+function formattedNumber(x: number) {
+  return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+}
+
 onMounted(() => {
   if (props.data) {
     formDetail.prefix = props.data.prefix;
@@ -118,10 +125,6 @@ onMounted(() => {
     formDetail.assessments = props.data.assessments;
   }
 });
-
-function formattedNumber(x: number) {
-  return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
-}
 </script>
 
 <template>
@@ -410,7 +413,9 @@ function formattedNumber(x: number) {
 
         <q-card bordered style="border: 1px solid #d6dee1">
           <div class="text-weight-bold row items-center bg-grey-2">
-            <span class="q-ml-lg q-my-sm">ผลงานที่เคยเสนอขอประเมิน (ถ้ามี)</span>
+            <span class="q-ml-lg q-my-sm"
+              >ผลงานที่เคยเสนอขอประเมิน (ถ้ามี)</span
+            >
           </div>
           <q-separator />
           <div class="row q-pa-sm">
diff --git a/src/modules/12_evaluatePersonal/components/Detail/viewstep/viewStep3.vue b/src/modules/12_evaluatePersonal/components/Detail/viewstep/viewStep3.vue
index 25bddc7b3..3ff4e1269 100644
--- a/src/modules/12_evaluatePersonal/components/Detail/viewstep/viewStep3.vue
+++ b/src/modules/12_evaluatePersonal/components/Detail/viewstep/viewStep3.vue
@@ -1,12 +1,15 @@
 <script setup lang="ts">
 import { ref } from "vue";
+
+/** importComponts*/
 import DialogHeader from "@/components/DialogHeader.vue";
 import ViewPDF from "@/modules/12_evaluatePersonal/components/Detail/viewstep/viewPDF.vue";
 
+/** importStore*/
 import { useEvaluateDetailStore } from "@/modules/12_evaluatePersonal/store/EvaluateDetail";
 
+/** use*/
 const store = useEvaluateDetailStore();
-
 const modalPerview = ref<boolean>(false);
 </script>
 
diff --git a/src/modules/12_evaluatePersonal/components/Detail/viewstep/viewStep7.vue b/src/modules/12_evaluatePersonal/components/Detail/viewstep/viewStep7.vue
index c83e567ad..da523ba30 100644
--- a/src/modules/12_evaluatePersonal/components/Detail/viewstep/viewStep7.vue
+++ b/src/modules/12_evaluatePersonal/components/Detail/viewstep/viewStep7.vue
@@ -1,10 +1,14 @@
 <script setup lang="ts">
 import { ref } from "vue";
+
+/** importComponents*/
 import DialogHeader from "@/components/DialogHeader.vue";
 import ViewPDF from "@/modules/12_evaluatePersonal/components/Detail/viewstep/viewPDF.vue";
 
+/** importStore*/
 import { useEvaluateDetailStore } from "@/modules/12_evaluatePersonal/store/EvaluateDetail";
 
+/** use*/
 const store = useEvaluateDetailStore();
 
 const modalPerview = ref<boolean>(false);
@@ -32,11 +36,8 @@ const modalPerview = ref<boolean>(false);
       ><q-tooltip>ดูเต็มจอ</q-tooltip></q-btn
     >
   </div>
-  <!-- <q-tab-panels v-model="store.tabPanels" animated swipeable vertical>
-    <q-tab-panel name="1"> -->
+
   <ViewPDF />
-  <!-- </q-tab-panel>
-  </q-tab-panels> -->
 
   <q-dialog v-model="modalPerview" full-width fullHeight>
     <q-card>
diff --git a/src/modules/12_evaluatePersonal/components/Director/MainPage.vue b/src/modules/12_evaluatePersonal/components/Director/MainPage.vue
index e8ee8e382..cc0308f3e 100644
--- a/src/modules/12_evaluatePersonal/components/Director/MainPage.vue
+++ b/src/modules/12_evaluatePersonal/components/Director/MainPage.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import { ref, useAttrs, onMounted, watch } from "vue";
-import type { QTableProps } from "quasar";
+import { ref, onMounted, watch } from "vue";
 import router from "@/router";
 import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar } from "quasar";
@@ -12,14 +11,7 @@ import config from "@/app.config";
 const $q = useQuasar();
 const dataStore = useEvaluateDirectorDataStore();
 const mixin = useCounterMixin();
-const {
-  messageError,
-  showLoader,
-  hideLoader,
-  dialogConfirm,
-  dialogRemove,
-  success,
-} = mixin;
+const { messageError, showLoader, hideLoader, dialogRemove, success } = mixin;
 
 const currentPage = ref<number>(1);
 const maxPage = ref<number>(1);
@@ -51,17 +43,13 @@ watch(
     getList();
   }
 );
-        // currentPage.value,
-        // rowsPerPage.value,
-        // filterKeyword.value
+
 function getList() {
   showLoader();
   http
-    .get(
-      config.API.evaluateDirectorMain())
+    .get(config.API.evaluateDirectorMain())
     .then((res) => {
-      // maxPage.value = Math.ceil(res.data.result.total / rowsPerPage.value);
-      const data = res.data.result
+      const data = res.data.result;
       dataStore.fetchData(data);
     })
     .catch((e) => {
@@ -70,7 +58,6 @@ function getList() {
     .finally(() => {
       hideLoader();
     });
-
 }
 
 /**
@@ -89,7 +76,7 @@ async function deleteData(id: string) {
   showLoader();
   await http
     .delete(config.API.evaluateDirectorById(id))
-    .then((res) => {
+    .then(() => {
       success($q, "ลบข้อมูลสำเร็จ");
     })
     .catch((e) => {
@@ -115,7 +102,6 @@ function resetFilter() {
 
 function filterFn() {
   getList();
-  console.log("enter", filterKeyword.value);
 }
 
 onMounted(() => {
diff --git a/src/modules/12_evaluatePersonal/interface/index/evalute.ts b/src/modules/12_evaluatePersonal/interface/index/evalute.ts
index 2a4475d75..f707e324a 100644
--- a/src/modules/12_evaluatePersonal/interface/index/evalute.ts
+++ b/src/modules/12_evaluatePersonal/interface/index/evalute.ts
@@ -51,10 +51,33 @@ interface CertificatesForm {
   issuer: string;
 }
 
+interface EvaluateList {
+  id: string;
+  citizanId: string;
+  fullName: string;
+  position: string;
+  level: string | null;
+  positionNumber: string;
+  agency: string;
+  status: string | null;
+}
+
+interface FormFeature {
+  isEducationalQft: boolean;
+  isGovermantServiceHtr: boolean;
+  isOperatingExp: boolean;
+  isMinPeriodOfTenure: boolean;
+  isHaveSpecificQft: boolean;
+  isHaveProLicense: boolean;
+  isHaveMinPeriodOrHoldPos: boolean;
+}
+
 export type {
   FormCommand,
   FormCommandRef,
   EducationForm,
   CertificatesForm,
   FileEvaluationRefRef,
+  EvaluateList,
+  FormFeature,
 };
diff --git a/src/modules/12_evaluatePersonal/interface/response/evalute.ts b/src/modules/12_evaluatePersonal/interface/response/evalute.ts
new file mode 100644
index 000000000..c1868f24e
--- /dev/null
+++ b/src/modules/12_evaluatePersonal/interface/response/evalute.ts
@@ -0,0 +1,104 @@
+interface EvaluateRes {
+  citizenId: string;
+  createdAt: Date;
+  fullName: string;
+  id: string;
+  oc: string;
+  posNo: string;
+  position: string;
+  step: string;
+  step_th: string;
+  type: string;
+  type_th: string;
+  updatedAt: Date;
+}
+interface PersonInformation {
+  assessments: Assessment[];
+  birthDate: string;
+  certificates: Certificate[];
+  educations: Education[];
+  experience: null;
+  fullName: string;
+  govAge: string;
+  isEducationalQft: boolean;
+  isGovermantServiceHtr: boolean;
+  isHaveMinPeriodOrHoldPos: boolean;
+  isHaveProLicense: boolean;
+  isHaveSpecificQft: boolean;
+  isMinPeriodOfTenure: boolean;
+  isOperatingExp: boolean;
+  oc: string;
+  posNo: string;
+  position: string;
+  positionLevel: string;
+  prefix: string;
+  salaries: Salary[];
+  salary: string;
+  trainings: Training[];
+  type: string;
+}
+
+interface Assessment {
+  date: string;
+  point1Total: number;
+  point1: number;
+  point2Total: number;
+  point2: number;
+  pointSumTotal: number;
+  pointSum: number;
+}
+
+interface Certificate {
+  certificateType: string;
+  issuer: string;
+  certificateNo: string;
+  issueDate: string;
+  expireDate: string;
+}
+
+interface Education {
+  educationLevel: string;
+  institute: string;
+  isDate: boolean;
+  startDate: string;
+  endDate: string;
+  finishDate: string;
+  isEducation: boolean;
+  degree: string;
+  field: string;
+  fundName: string;
+  gpa: string;
+  country: string;
+  other: string;
+  duration: string;
+  durationYear: number;
+}
+
+interface Salary {
+  date: string;
+  amount: number;
+  positionSalaryAmount: null;
+  mouthSalaryAmount: null;
+  position: string;
+  posNo: string;
+  salaryClass: null;
+  salaryRef: null;
+  refCommandNo: null;
+  refCommandDate: null;
+  salaryStatus: null;
+}
+
+interface Training {
+  name: string;
+  topic: string;
+  startDate: string;
+  endDate: string;
+  yearly: number;
+  place: string;
+  duration: string;
+  department: string;
+  numberOrder: string;
+  dateOrder: string;
+}
+
+export type { EvaluateRes, PersonInformation };
diff --git a/src/modules/12_evaluatePersonal/store/Evaluate.ts b/src/modules/12_evaluatePersonal/store/Evaluate.ts
index e78d0f576..44e19c96f 100644
--- a/src/modules/12_evaluatePersonal/store/Evaluate.ts
+++ b/src/modules/12_evaluatePersonal/store/Evaluate.ts
@@ -1,13 +1,19 @@
 import { defineStore } from "pinia";
 import { ref } from "vue";
 import type { QTableProps } from "quasar";
-import type { DataOption } from "@/modules/12_evaluatePersonal/interface/index/Main";
+
+import type { EvaluateList } from "@/modules/12_evaluatePersonal/interface/index/evalute";
+import type { EvaluateRes } from "@/modules/12_evaluatePersonal/interface/response/evalute";
+
 import { useCounterMixin } from "@/stores/mixin";
 
 const mixin = useCounterMixin();
 const { date2Thai } = mixin;
 export const useEvalutuonStore = defineStore("EvalutuonStore", () => {
-  /** function สถานะ*/
+  /**
+   * function Convert สถานะ
+   * @param val สถานะ
+   */
   function convertStatus(val: string) {
     switch (val) {
       case "CHECK_SPEC":
@@ -31,6 +37,10 @@ export const useEvalutuonStore = defineStore("EvalutuonStore", () => {
     }
   }
 
+  /**
+   * function Convert ระดับที่ยื่นขอ
+   * @param val ระดับที่ยื่นขอ
+   */
   function convertType(val: string) {
     if (val === "EXPERT") {
       return "ชำนาญการ";
@@ -39,15 +49,27 @@ export const useEvalutuonStore = defineStore("EvalutuonStore", () => {
     }
   }
 
-  // ตรวจสอบคุณสมบัติด้วยตนเอง -> CHECK_SPEC
-  // จัดเตรียมเอกสารเล่ม 1-> PREPARE_DOC_V1
-  // ตรวจสอบความถูกต้องของเอกสารเล่ม 1 -> CHECK_DOC_V1
-  // รอตรวจสอบคุณสมบัติ -> WAIT_CHECK_DOC_V1
-  // ประกาศบนเว็บไซต์ -> ANNOUNCE_WEB
-  // จัดเตรียมเอกสารเล่ม 2 -> PREPARE_DOC_V2
-  // ตรวจสอบความถูกต้องของเอกสารเล่ม 2 -> CHECK_DOC_V2
-  // รอพิจารณาผลการประเมิน -> WAIT_CHECK_DOC_V2
-  // เสร็จสิ้น -> DONE
+  const rows = ref<EvaluateList[]>([]);
+  /**
+   * function เรียกข้่อมูลรายการคำขอประเมิน
+   * @param data รายการคำขอประเมิน
+   */
+  function fetchData(data: EvaluateRes[]) {
+    const dataList: EvaluateList[] = data.map(
+      (data: EvaluateRes) =>
+        ({
+          id: data.id,
+          citizanId: data.citizenId,
+          fullName: data.fullName,
+          position: data.position,
+          level: convertType(data.type),
+          positionNumber: data.posNo,
+          agency: data.oc,
+          status: convertStatus(data.step),
+        } as EvaluateList)
+    );
+    rows.value = dataList;
+  }
 
   const visibleColumns = ref<String[]>([
     "no",
@@ -59,23 +81,6 @@ export const useEvalutuonStore = defineStore("EvalutuonStore", () => {
     "agency",
     "status",
   ]);
-  const rows = ref<any[]>([]);
-  function fetchData(data: any[]) {
-    console.log(data);
-    const dataList: any[] = data.map((data: any) => ({
-      id: data.id,
-      citizanId: data.citizenId,
-      fullName: data.fullName,
-      position: data.position,
-      level: convertType(data.type),
-      positionNumber: data.posNo,
-      agency: data.oc,
-      status: convertStatus(data.step),
-    }));
-    rows.value = dataList;
-    console.log(dataList);
-  }
-
   const columns = ref<QTableProps["columns"]>([
     {
       name: "no",
diff --git a/src/modules/12_evaluatePersonal/views/DetailPage.vue b/src/modules/12_evaluatePersonal/views/DetailPage.vue
index f6fb8e175..54ebea27b 100644
--- a/src/modules/12_evaluatePersonal/views/DetailPage.vue
+++ b/src/modules/12_evaluatePersonal/views/DetailPage.vue
@@ -2,33 +2,47 @@
 import { ref, onMounted } from "vue";
 import { useQuasar } from "quasar";
 import { useRoute, useRouter } from "vue-router";
-import { useCounterMixin } from "@/stores/mixin";
-
 import http from "@/plugins/http";
 import config from "@/app.config";
 
+/** impolerType*/
+import type { PersonInformation } from "@/modules/12_evaluatePersonal/interface/response/evalute";
+
+/** importComponents*/
 import Tab1 from "@/modules/12_evaluatePersonal/components/Detail/Tab1.vue"; // ชำนาญการ
 import Tab2 from "@/modules/12_evaluatePersonal/components/Detail/Tab2.vue"; // ชำนาญการพิเศษ
 
+/** importStore*/
+import { useCounterMixin } from "@/stores/mixin";
 import { useEvaluateDetailStore } from "@/modules/12_evaluatePersonal/store/EvaluateDetail";
 
+/** use*/
 const mixin = useCounterMixin();
-const { showLoader, hideLoader, messageError } = mixin;
-
 const store = useEvaluateDetailStore();
 const router = useRouter();
 const $q = useQuasar();
 const route = useRoute();
 
-const id = ref<string>(route.params.id as string);
+const { showLoader, hideLoader, messageError } = mixin;
 
-const data = ref<any>({});
-function getData() {
+const id = ref<string>(route.params.id as string); // id รายการประเมิน
+
+const data = ref<PersonInformation[]>([]);
+const prefix = ref<string>("");
+const fullName = ref<string>("");
+
+/** funmction เรียกขอ้มูลคุณสมบัติ*/
+async function fetchFeature() {
   showLoader();
-  http
+  await http
     .get(config.API.evaluateGetDetail(id.value))
-    .then((res: any) => {
+    .then((res) => {
       data.value = res.data.result;
+      const person = data.value[0];
+      if (person) {
+        prefix.value = person.prefix;
+        fullName.value = person.fullName;
+      }
     })
     .catch((e) => {
       messageError($q, e);
@@ -38,8 +52,9 @@ function getData() {
     });
 }
 
-onMounted(() => {
-  getData();
+/** HookLifecycle*/
+onMounted(async () => {
+  await fetchFeature();
 });
 </script>
 
@@ -56,9 +71,7 @@ onMounted(() => {
         class="q-mr-sm"
         @click="router.go(-1)"
       />
-      <div>
-        รายละเอียดการประเมินบุคคลของ {{ `${data.prefix}${data.fullName}` }}
-      </div>
+      <div>รายละเอียดการประเมินบุคคลของ {{ `${prefix}${fullName}` }}</div>
     </div>
   </div>
   <q-card flat bordered class="col-12 q-mt-sm q-pt-sm q-pa-md">
diff --git a/src/modules/12_evaluatePersonal/views/MainPage.vue b/src/modules/12_evaluatePersonal/views/MainPage.vue
index e34a9b22e..75c2ee633 100644
--- a/src/modules/12_evaluatePersonal/views/MainPage.vue
+++ b/src/modules/12_evaluatePersonal/views/MainPage.vue
@@ -1,26 +1,20 @@
 <script setup lang="ts">
-import { onMounted, ref, watch, useAttrs } from "vue";
+import { onMounted, ref, watch } from "vue";
 import { useQuasar } from "quasar";
 import { useRouter } from "vue-router";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
-import Table from "@/modules/12_evaluatePersonal/components/Table.vue";
+/** importStore*/
 import { useCounterMixin } from "@/stores/mixin";
 import { useEvalutuonStore } from "@/modules/12_evaluatePersonal/store/Evaluate";
-import type { Pagination } from "@/modules/03_recruiting/interface/index/Main";
 
-const $q = useQuasar(); // show dialog
+/** use*/
+const $q = useQuasar();
 const router = useRouter();
-//search data table
 const mixin = useCounterMixin();
 const store = useEvalutuonStore();
 const { showLoader, hideLoader, messageError } = mixin;
-const attrs = ref<any>(useAttrs());
-
-function Detailpage(id: string) {
-  router.push(`/evaluate/detail/${id}`);
-}
 
 const currentPage = ref<number>(1);
 const maxPage = ref<number>(0);
@@ -29,9 +23,7 @@ const total = ref<number>(0);
 const filter = ref<string>("");
 const pageSize = ref<number>(10);
 
-/**
- *pagination ของตาราง
- */
+/** pagination ของตาราง*/
 const initialPagination = ref<any>({
   sortBy: null,
   descending: false,
@@ -39,72 +31,75 @@ const initialPagination = ref<any>({
   rowsPerPage: pageSize,
 });
 
-// Pagination - update rowsPerPage
+/**
+ * function อัปเดท paging
+ * @param initialPagination ข้อมูล pagination
+ */
 async function updatePagination(initialPagination: any) {
   currentPage.value = 1;
   pageSize.value = initialPagination.rowsPerPage;
   page.value = 1; // set current page เป็น 1 เสมอเมื่อเปลี่ยน per row
 }
-// Pagination - page & change page & get new data
+
+/** function callback เมื่อมีการเปลี่ยนหน้า*/
 watch(
   [
     () => currentPage.value,
     () => (pageSize.value = initialPagination.value.rowsPerPage),
   ],
   async () => {
-    getList();
+    fetchEvaluteList();
   }
 );
-// Pagination - page & change page & get new data
+
+/** function callback เมื่อมีการเปลี่ยนหน้า*/
 watch(
   [() => currentPage.value, () => initialPagination.value.rowsPerPage],
   async () => {
     page.value = currentPage.value;
-    await getList();
+    await fetchEvaluteList();
   }
 );
+
+/** function callback เมื่อมีการเปลี่ยนจำนวนแถว*/
 watch(
   () => initialPagination.value.rowsPerPage,
   () => {
     pageSize.value = initialPagination.value.rowsPerPage;
     currentPage.value = 1;
-    getList();
+    fetchEvaluteList();
   }
 );
 
-/**
- * filter function
- */
 const filterRef = ref<HTMLInputElement | null>(null);
+/** function ค้นหาตาม keyword*/
 function filterFn() {
   updatePagination(filter.value);
   pageSize.value = initialPagination.value.rowsPerPage;
-  getList();
+  fetchEvaluteList();
 }
-const resetFilter = () => {
+
+/** functrion ล้างค้นหา*/
+function resetFilter() {
   filter.value = "";
-  getList();
+  fetchEvaluteList();
   if (filterRef.value) {
     filterRef.value.focus();
   }
-};
+}
 
-function getList() {
+/** function เรียกรายการคำขอประเมิน*/
+async function fetchEvaluteList() {
   showLoader();
-  http
+  await http
     .get(
       config.API.evaluationMain(currentPage.value, pageSize.value, filter.value)
     )
     .then(async (res) => {
       const data = res.data.result.data;
       total.value = res.data.result.total;
-      console.log(res.data.result.total);
       maxPage.value = await Math.ceil(total.value / pageSize.value);
       maxPage.value = maxPage.value < 1 ? 1 : maxPage.value;
-      console.log(total.value);
-      console.log(pageSize.value);
-      console.log(maxPage.value);
-
       store.fetchData(data);
     })
     .catch((e) => {
@@ -115,11 +110,17 @@ function getList() {
     });
 }
 
-/**เมื่อเริ่มโหลดหน้า
- * ส่งข้อมูลจำลองไปยัง store
+/**
+ * funcition redirectToDetail
+ * @param id รายการคำขอประเมิน
  */
+function Detailpage(id: string) {
+  router.push(`/evaluate/detail/${id}`);
+}
+
+/** HookLifecycle */
 onMounted(async () => {
-  getList();
+  await fetchEvaluteList(); // เรียกข้อมูลรายการปรัเมิน
 });
 </script>