diff --git a/src/modules/06_evaluate/components/EvaluateStepMain.vue b/src/modules/06_evaluate/components/EvaluateStepMain.vue
index fc9706c..726dfc3 100644
--- a/src/modules/06_evaluate/components/EvaluateStepMain.vue
+++ b/src/modules/06_evaluate/components/EvaluateStepMain.vue
@@ -1,192 +1,178 @@
 <script setup lang="ts">
-import { ref, reactive, onMounted, watch } from "vue"
-import { useRouter, useRoute } from "vue-router"
-import { useQuasar } from "quasar"
-import http from "@/plugins/http"
-import config from "@/app.config"
+import { ref, reactive, onMounted, watch } from "vue";
+import { useRouter, useRoute } from "vue-router";
+import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
 
 /** import Type*/
-import type { FormSpec, FormCommand, FormCommandRef } from "@/modules/06_evaluate/interface/evalute"
+import type {
+  PersonInformation,
+  FormSpec,
+  FormCommand,
+  FormCommandRef,
+} from "@/modules/06_evaluate/interface/evalute";
 
 /** import Components*/
-import Stepper from "@/modules/06_evaluate/components/Stepper.vue"
-import Step1 from "@/modules/06_evaluate/components/step/step1.vue"
-import Step2 from "@/modules/06_evaluate/components/step/step2.vue"
-import Step3 from "@/modules/06_evaluate/components/step/step3.vue"
-import Step4 from "@/modules/06_evaluate/components/step/step4.vue"
-import Step5 from "@/modules/06_evaluate/components/step/step5.vue"
-import Step6 from "@/modules/06_evaluate/components/step/step6.vue"
-import Step7 from "@/modules/06_evaluate/components/step/step7.vue"
-import Step8 from "@/modules/06_evaluate/components/step/step8.vue"
-import Step9 from "@/modules/06_evaluate/components/step/step9.vue"
-
-import ViewStep1 from "@/modules/06_evaluate/components/viewstep/viewStep1.vue"
-import ViewStep3 from "@/modules/06_evaluate/components/viewstep/viewStep3.vue"
-import ViewStep7 from "@/modules/06_evaluate/components/viewstep/viewStep7.vue"
-
-import PopupHistory from "@/modules/06_evaluate/components/viewstep/popupHistory.vue"
+import Stepper from "@/modules/06_evaluate/components/Stepper.vue";
+import Step1 from "@/modules/06_evaluate/components/step/step1.vue"; // 1.ตรวจสอบคุณสมบัติ
+import Step2 from "@/modules/06_evaluate/components/step/step2.vue"; // 2.จัดเตรียมเอกสารเล่ม 1
+import Step3 from "@/modules/06_evaluate/components/step/step3.vue"; // 3.ตรวจสอบเอกสารเล่ม 1
+import Step4 from "@/modules/06_evaluate/components/step/step4.vue"; // 4.รอตรวจสอบคุณสมบัติ
+import Step5 from "@/modules/06_evaluate/components/step/step5.vue"; // 5.ประกาศบนเว็บไซต์
+import Step6 from "@/modules/06_evaluate/components/step/step6.vue"; // 6.จัดเตรียมเอกสารเล่ม 2
+import Step7 from "@/modules/06_evaluate/components/step/step7.vue"; // 7.รอพิจารณาผลการประเมิน 2
+import Step8 from "@/modules/06_evaluate/components/step/step8.vue"; // 8.ตรวจสอบความถูกต้องของเอกสารเล่ม 2
+import Step9 from "@/modules/06_evaluate/components/step/step9.vue"; // 9.เสร็จสิ้น
+import ViewStep1 from "@/modules/06_evaluate/components/viewstep/viewStep1.vue"; //  ข้อมูลส่วนตัว
+import ViewStep3 from "@/modules/06_evaluate/components/viewstep/viewStep3.vue"; //
+import ViewStep7 from "@/modules/06_evaluate/components/viewstep/viewStep7.vue"; //
+import PopupHistory from "@/modules/06_evaluate/components/viewstep/popupHistory.vue"; // ประวัติการประเมิน
 
 /** import Store*/
-import { useEvaluateStore } from "@/modules/06_evaluate/store"
-import { useCounterMixin } from "@/stores/mixin"
+import { useEvaluateStore } from "@/modules/06_evaluate/store";
+import { useCounterMixin } from "@/stores/mixin";
 
 /** use*/
-const router = useRouter()
-const route = useRoute()
-const store = useEvaluateStore()
-const mixin = useCounterMixin()
-const $q = useQuasar()
+const router = useRouter();
+const route = useRoute();
+const store = useEvaluateStore();
+const mixin = useCounterMixin();
+const $q = useQuasar();
 
-const { showLoader, hideLoader, messageError, dialogConfirm } = mixin
+const { showLoader, hideLoader, messageError, dialogConfirm } = mixin;
 
-const externalLink = "https://accreditation.ocsc.go.th/accreditation/search/curriculum"
+const externalLink =
+  "https://accreditation.ocsc.go.th/accreditation/search/curriculum";
 
-const showLoadStatus = ref<boolean>(false)
+const showLoadStatus = ref<boolean>(false);
 
-const modalHistory = ref<boolean>(false)
+const modalHistory = ref<boolean>(false);
 function onClickPopupHistory() {
-	modalHistory.value = !modalHistory.value
+  modalHistory.value = !modalHistory.value;
 }
 
 /** function NextToStep*/
 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 === 7
-			? await saveStep7
-			: store.step === 8
-			? await saveStep8
-			: store.step === 9
-			? await saveStep9
-			: null
-	store.step === 2 || store.step === 6
-		? validateForm()
-		: store.step == 3 || store.step == 7
-		? dialogConfirm(
-				$q,
-				() => {
-					functionCreateDoc?.()
-				},
-				"ยืนยันการยื่นเอกสาร",
-				"ต้องการยืนยันการยื่นเอกสารใช่หรือไม่? หากยืนยันแล้วคุณจะไม่สามารถกลับมาแก้ไขเอกสารได้อีก"
-		  )
-		: store.step < 9 &&
-		  dialogConfirm(
-				$q,
-				async () => {
-					showLoader()
-					await functionCreateDoc?.()
-				},
-				"ยืนยันการดำเนินการ",
-				"ต้องการยืนยันการดำเนินการต่อใช่หรือไม่?"
-		  )
+  const functionCreateDoc: (() => Promise<void>) | null =
+    store.step === 1
+      ? await saveStep1
+      : store.step === 3
+      ? await saveStep3
+      : store.step === 7
+      ? await saveStep7
+      : null;
+  store.step === 2 || store.step === 6
+    ? validateForm()
+    : store.step == 3 || store.step == 7
+    ? dialogConfirm(
+        $q,
+        () => {
+          functionCreateDoc?.();
+        },
+        "ยืนยันการยื่นเอกสาร",
+        "ต้องการยืนยันการยื่นเอกสารใช่หรือไม่? หากยืนยันแล้วคุณจะไม่สามารถกลับมาแก้ไขเอกสารได้อีก"
+      )
+    : store.step < 9 &&
+      dialogConfirm(
+        $q,
+        async () => {
+          showLoader();
+          await functionCreateDoc?.();
+        },
+        "ยืนยันการดำเนินการ",
+        "ต้องการยืนยันการดำเนินการต่อใช่หรือไม่?"
+      );
 }
 
 /** function validateForm Step 2,4*/
 async function validateForm() {
-	store.checkFileupload = !store.checkFileupload
-	const emptyValues = downloadFileRef.value.filter((e: any) => e === "")
-	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)) {
-		if (emptyValues.length > 0 && store.statusUpload === true) {
-			console.log("There are empty values in the array.")
-		} else if (store.step === 2) {
-			if (store.statusUpload === false) {
-				saveStep2()
-			} else {
-				nextTostep3()
-			}
-		} else {
-			if (store.statusUpload === false) {
-				saveStep6()
-			} else {
-				nextTostep7()
-			}
-		}
-	}
+  store.checkFileupload = !store.checkFileupload;
+  const emptyValues = downloadFileRef.value.filter((e: string) => e === "");
+  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)) {
+    if (emptyValues.length > 0 && store.statusUpload === true) {
+      console.log("There are empty values in the array.");
+    } else if (store.step === 2) {
+      if (store.statusUpload === false) {
+        saveStep2();
+      } else {
+        nextTostep3();
+      }
+    } else {
+      if (store.statusUpload === false) {
+        saveStep6();
+      } else {
+        nextTostep7();
+      }
+    }
+  }
 }
 
-const pdfSrc = ref<any>()
-const urlDownloadFile = ref<string>("")
+const pdfSrc = ref<any>();
+const urlDownloadFile = ref<string>("");
+/**
+ * function update ลิงก์ PDF
+ * @param url ลิงก์ PDF
+ * @param urlDownload  ลิงก์ดาวน์โหลด
+ */
 async function updateFilePDF(url: any, urlDownload: string) {
-	pdfSrc.value = url
-	urlDownloadFile.value = urlDownload
+  pdfSrc.value = url;
+  urlDownloadFile.value = urlDownload;
 }
 
-// /** function เช็คการยื่นข้อประเมิน*/
-// async function fetchCheckStatus() {
-//   showLoader();
-//   await http
-//     .get(config.API.evaluationCheckStatus())
-//     .then((res) => {
-//       const data = res.data.result;
-//       const id =
-//         route.params.type === "expert" ? data.expertId : data.specialExpertId;
-//       router.push(`/evaluate/detail/${route.params.type}/${id}`);
-//     })
-//     .catch((err) => {
-//       messageError($q, err);
-//     })
-//     .finally(() => {
-//       hideLoader();
-//     });
-// }
-
+/**
+ * function เช็ตสถานะขั้ยตอน
+ * @param id idประเมิน
+ */
 async function fetchCheckStep(id: string) {
-	showLoadStatus.value = false
-	if (id) {
-		await http
-			.get(config.API.evaluationCheckStep(id))
-			.then(res => {
-				const data = res.data.result
+  showLoadStatus.value = false;
+  if (id) {
+    await http
+      .get(config.API.evaluationCheckStep(id))
+      .then((res) => {
+        const data = res.data.result;
 
-				let step =
-					data.step === "CHECK_SPEC"
-						? 1
-						: data.step === "PREPARE_DOC_V1"
-						? 2
-						: data.step === "CHECK_DOC_V1"
-						? 3
-						: data.step === "WAIT_CHECK_DOC_V1"
-						? 4
-						: data.step === "ANNOUNCE_WEB"
-						? 5
-						: data.step === "PREPARE_DOC_V2"
-						? 6
-						: data.step === "WAIT_CHECK_DOC_V2"
-						? 7
-						: data.step === "CHECK_DOC_V2"
-						? 8
-						: data.step === "DONE"
-						? 9
-						: 1
+        let step =
+          data.step === "CHECK_SPEC"
+            ? 1
+            : data.step === "PREPARE_DOC_V1"
+            ? 2
+            : data.step === "CHECK_DOC_V1"
+            ? 3
+            : data.step === "WAIT_CHECK_DOC_V1"
+            ? 4
+            : data.step === "ANNOUNCE_WEB"
+            ? 5
+            : data.step === "PREPARE_DOC_V2"
+            ? 6
+            : data.step === "WAIT_CHECK_DOC_V2"
+            ? 7
+            : data.step === "CHECK_DOC_V2"
+            ? 8
+            : data.step === "DONE"
+            ? 9
+            : 1;
 
-				store.currentStep = step
-				store.step = step
-			})
-			.catch(err => {
-				messageError($q, err)
-			})
-			.finally(() => {
-				showLoadStatus.value = true
-			})
-	} else (store.step = 1), (store.currentStep = 1)
+        store.currentStep = step;
+        store.step = step;
+      })
+      .catch((err) => {
+        messageError($q, err);
+      })
+      .finally(() => {
+        showLoadStatus.value = true;
+      });
+  } else (store.step = 1), (store.currentStep = 1);
 }
 
 /** STEP 1*/
@@ -223,425 +209,550 @@ async function fetchDataStep1(id: string) {
     });
 }
 
+/**
+ * function อัปเดทคุณสมบัติ
+ * @param data  ข้อมูลคุณสมบัติ
+ */
 async function updateCheckSpec(data: FormSpec) {
-	formSpec.isEducationalQft = data.isEducationalQft
-	formSpec.isGovermantServiceHtr = data.isGovermantServiceHtr
-	formSpec.isOperatingExp = data.isOperatingExp
-	formSpec.isMinPeriodOfTenure = data.isMinPeriodOfTenure
-	formSpec.isHaveSpecificQft = data.isHaveSpecificQft
-	formSpec.isHaveProLicense = data.isHaveProLicense
-	formSpec.isHaveMinPeriodOrHoldPos = data.isHaveMinPeriodOrHoldPos
+  formSpec.isEducationalQft = data.isEducationalQft;
+  formSpec.isGovermantServiceHtr = data.isGovermantServiceHtr;
+  formSpec.isOperatingExp = data.isOperatingExp;
+  formSpec.isMinPeriodOfTenure = data.isMinPeriodOfTenure;
+  formSpec.isHaveSpecificQft = data.isHaveSpecificQft;
+  formSpec.isHaveProLicense = data.isHaveProLicense;
+  formSpec.isHaveMinPeriodOrHoldPos = data.isHaveMinPeriodOrHoldPos;
 }
-
+/**
+ * funciton อัปเดทข้อมูลส่วนตัว
+ * @param data ข้อมูลส่วนตัว
+ */
 function updateFormDetail(data: any) {
-	formDetail.value = data
+  formDetail.value = data;
 }
-
+/** function บันทักตรวจสอบคุณสมบัติ*/
 async function saveStep1() {
-	const salaries = formDetail.value.trainings.map((e: any) => ({
-		amount: e.amount,
-		date: e.date,
-		mouthSalaryAmount: e.mouthSalaryAmount ? e.mouthSalaryAmount : 0,
-		posNo: e.posNo,
-		position: e.position,
-		positionSalaryAmount: e.positionSalaryAmount ? e.positionSalaryAmount : 0,
-		refCommandDate: e.refCommandDate,
-		refCommandNo: e.refCommandNo ? e.refCommandNo : "",
-		salaryClass: e.salaryClass ? e.salaryClass : "",
-		salaryRef: e.salaryRef ? e.salaryRef : "",
-		salaryStatus: e.salaryStatus ? e.salariesStatus : "",
-	}))
+  const salaries = formDetail.value.trainings.map((e: any) => ({
+    amount: e.amount,
+    date: e.date,
+    mouthSalaryAmount: e.mouthSalaryAmount ? e.mouthSalaryAmount : 0,
+    posNo: e.posNo,
+    position: e.position,
+    positionSalaryAmount: e.positionSalaryAmount ? e.positionSalaryAmount : 0,
+    refCommandDate: e.refCommandDate,
+    refCommandNo: e.refCommandNo ? e.refCommandNo : "",
+    salaryClass: e.salaryClass ? e.salaryClass : "",
+    salaryRef: e.salaryRef ? e.salaryRef : "",
+    salaryStatus: e.salaryStatus ? e.salariesStatus : "",
+  }));
 
-	const educations = formDetail.value.educations.map((e: any) => ({
-		country: e.country,
-		degree: e.degree,
-		duration: e.duration,
-		durationYear: e.durationYear.toString(),
-		educationLevel: e.educationLevel,
-		endDate: e.endDate,
-		field: e.field,
-		finishDate: e.finishDate,
-		fundName: e.fundName,
-		gpa: e.gpa,
-		institute: e.institute,
-		isDate: e.isDate,
-		isEducation: e.isEducation,
-		other: e.other,
-		startDate: e.startDate,
-	}))
-	const evaluateType = route.params.type.toString()
+  const educations = formDetail.value.educations.map((e: any) => ({
+    country: e.country,
+    degree: e.degree,
+    duration: e.duration,
+    durationYear: e.durationYear.toString(),
+    educationLevel: e.educationLevel,
+    endDate: e.endDate,
+    field: e.field,
+    finishDate: e.finishDate,
+    fundName: e.fundName,
+    gpa: e.gpa,
+    institute: e.institute,
+    isDate: e.isDate,
+    isEducation: e.isEducation,
+    other: e.other,
+    startDate: e.startDate,
+  }));
+  const evaluateType = route.params.type.toString();
 
-	const form = {
-		userId: formDetail.value.id,
-		citizenId: formDetail.value.citizenId,
-		prefix: formDetail.value.prefix,
-		fullName: `${formDetail.value.firstName} ${formDetail.value.lastName}`,
-		position: formDetail.value.position,
-		oc: formDetail.value.oc,
-		salary: formDetail.value.salary.toString(),
-		positionLevel: formDetail.value.positionLevel,
-		posNo: formDetail.value.posNo,
-		birthDate: formDetail.value.birthDate,
-		govAge: formDetail.value.govAge,
-		type: evaluateType.toUpperCase(),
-		step: "PREPARE_DOC_V1",
-		isEducationalQft: formSpec.isEducationalQft,
-		isGovermantServiceHtr: formSpec.isGovermantServiceHtr,
-		isOperatingExp: formSpec.isOperatingExp,
-		isMinPeriodOfTenure: formSpec.isMinPeriodOfTenure,
-		isHaveSpecificQft: formSpec.isHaveSpecificQft,
-		isHaveProLicense: formSpec.isHaveProLicense,
-		isHaveMinPeriodOrHoldPos: formSpec.isHaveMinPeriodOrHoldPos,
-		reason: "",
-		educations: [...educations],
-		certificates: [...formDetail.value.certificates],
-		salaries: [...salaries],
-		trainings: [...formDetail.value.trainings],
-		assessments: [...formDetail.value.assessments],
-	}
+  const form = {
+    userId: formDetail.value.id,
+    citizenId: formDetail.value.citizenId,
+    prefix: formDetail.value.prefix,
+    fullName: `${formDetail.value.firstName}   ${formDetail.value.lastName}.`,
+    position: formDetail.value.position,
+    oc: formDetail.value.oc,
+    salary: formDetail.value.salary.toString(),
+    positionLevel: formDetail.value.positionLevel,
+    posNo: formDetail.value.posNo,
+    birthDate: formDetail.value.birthDate,
+    govAge: formDetail.value.govAge,
+    type: evaluateType.toUpperCase(),
+    step: "PREPARE_DOC_V1",
+    isEducationalQft: formSpec.isEducationalQft,
+    isGovermantServiceHtr: formSpec.isGovermantServiceHtr,
+    isOperatingExp: formSpec.isOperatingExp,
+    isMinPeriodOfTenure: formSpec.isMinPeriodOfTenure,
+    isHaveSpecificQft: formSpec.isHaveSpecificQft,
+    isHaveProLicense: formSpec.isHaveProLicense,
+    isHaveMinPeriodOrHoldPos: formSpec.isHaveMinPeriodOrHoldPos,
+    reason: "",
+    educations: [...educations],
+    certificates: [...formDetail.value.certificates],
+    salaries: [...salaries],
+    trainings: [...formDetail.value.trainings],
+    assessments: [...formDetail.value.assessments],
+  };
 
-	await http
-		.post(config.API.evaluationCheckspec(), form)
-		.then(res => {
-			const id = res.data.result.id
-			router.push(`/evaluate/detail/${route.params.type}/${id}`)
-		})
-		.catch(err => {
-			messageError($q, err)
-		})
-		.finally(() => {
-			hideLoader()
-		})
+  await http
+    .post(config.API.evaluationCheckspec(), form)
+    .then((res) => {
+      const id = res.data.result.id;
+      router.push(`/evaluate/detail/${route.params.type}/${id}`);
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
 }
 
 /** STEP 2*/
-const statusUpload = ref<boolean>(false)
+const statusUpload = ref<boolean>(false);
 const formCommand = reactive<FormCommand>({
-	commanderFullname: "",
-	commanderPosition: "",
-	commanderAboveFullname: "",
-	commanderAbovePosition: "",
-	author: "",
-	subject: "",
-	assignedPosition: "",
-})
-const commanderFullnameRef = ref<object | null>(null)
-const commanderPositionRef = ref<object | null>(null)
-const commanderAboveFullnameRef = ref<object | null>(null)
-const commanderAbovePositionRef = ref<object | null>(null)
-const fileEvaluation1Ref = ref<object | null>(null)
-const fileEvaluation2Ref = ref<object | null>(null)
-const fileEvaluation3Ref = ref<object | null>(null)
-const fileEvaluation4Ref = ref<object | null>(null)
-const fileEvaluation5Ref = ref<object | null>(null)
-const fileEvaluation6Ref = ref<object | null>(null)
-const performanceRef = ref<object | null>(null)
-const performanceOwnerRef = ref<object | null>(null)
-const assignedPositionRef = ref<object | null>(null)
+  commanderFullname: "",
+  commanderPosition: "",
+  commanderAboveFullname: "",
+  commanderAbovePosition: "",
+  author: "",
+  subject: "",
+  assignedPosition: "",
+});
+const commanderFullnameRef = ref<object | null>(null);
+const commanderPositionRef = ref<object | null>(null);
+const commanderAboveFullnameRef = ref<object | null>(null);
+const commanderAbovePositionRef = ref<object | null>(null);
+const fileEvaluation1Ref = ref<object | null>(null);
+const fileEvaluation2Ref = ref<object | null>(null);
+const fileEvaluation3Ref = ref<object | null>(null);
+const fileEvaluation4Ref = ref<object | null>(null);
+const fileEvaluation5Ref = ref<object | null>(null);
+const fileEvaluation6Ref = ref<object | null>(null);
+const performanceRef = ref<object | null>(null);
+const performanceOwnerRef = ref<object | null>(null);
+const assignedPositionRef = ref<object | null>(null);
 const formCommandRef: FormCommandRef = {
-	commanderFullname: commanderFullnameRef,
-	commanderPosition: commanderPositionRef,
-	commanderAboveFullname: commanderAboveFullnameRef,
-	commanderAbovePosition: commanderAbovePositionRef,
-	fileEvaluation1: fileEvaluation1Ref,
-	fileEvaluation2: fileEvaluation2Ref,
-	fileEvaluation3: fileEvaluation3Ref,
-	fileEvaluation4: fileEvaluation4Ref,
-	fileEvaluation5: fileEvaluation5Ref,
-	fileEvaluation6: fileEvaluation6Ref,
-	performance: performanceRef,
-	performanceOwner: performanceOwnerRef,
-	assignedPosition: assignedPositionRef,
-}
-const downloadFileRef = ref<any>()
-
+  commanderFullname: commanderFullnameRef,
+  commanderPosition: commanderPositionRef,
+  commanderAboveFullname: commanderAboveFullnameRef,
+  commanderAbovePosition: commanderAbovePositionRef,
+  fileEvaluation1: fileEvaluation1Ref,
+  fileEvaluation2: fileEvaluation2Ref,
+  fileEvaluation3: fileEvaluation3Ref,
+  fileEvaluation4: fileEvaluation4Ref,
+  fileEvaluation5: fileEvaluation5Ref,
+  fileEvaluation6: fileEvaluation6Ref,
+  performance: performanceRef,
+  performanceOwner: performanceOwnerRef,
+  assignedPosition: assignedPositionRef,
+};
+const downloadFileRef = ref<any>();
+/**
+ * function  อัปเดท ผลงาน,ผู้เซ็นเอกสาร, Ref
+ * @param val ผู้เซ็นเอกสาร
+ * @param ref validate
+ */
 function updateformCommand(val: any, ref: any) {
-	formCommand.commanderFullname = val.commanderFullname
-	formCommand.commanderPosition = val.commanderPosition
-	formCommand.commanderAboveFullname = val.commanderAboveFullname
-	formCommand.commanderAbovePosition = val.commanderAbovePosition
-	formCommand.author = val.author
-	formCommand.subject = val.subject
-	formCommand.assignedPosition = val.assignedPosition
-	commanderFullnameRef.value = ref.commanderFullnameRef
-	commanderPositionRef.value = ref.commanderPositionRef
-	commanderAboveFullnameRef.value = ref.commanderAboveFullnameRef
-	commanderAbovePositionRef.value = ref.commanderAbovePositionRef
-	fileEvaluation1Ref.value = ref.fileEvaluation1Ref
-	fileEvaluation2Ref.value = ref.fileEvaluation2Ref
-	fileEvaluation3Ref.value = ref.fileEvaluation3Ref
-	fileEvaluation4Ref.value = ref.fileEvaluation4Ref
-	fileEvaluation5Ref.value = ref.fileEvaluation5Ref
-	fileEvaluation6Ref.value = ref.fileEvaluation6Ref
-	downloadFileRef.value = ref.downloadFile
-	performanceRef.value = ref.performance
-	performanceOwnerRef.value = ref.performanceOwner
-	assignedPositionRef.value = ref.assignedPosition
-	statusUpload.value = ref.statusUpload
+  formCommand.commanderFullname = val.commanderFullname;
+  formCommand.commanderPosition = val.commanderPosition;
+  formCommand.commanderAboveFullname = val.commanderAboveFullname;
+  formCommand.commanderAbovePosition = val.commanderAbovePosition;
+  formCommand.author = val.author;
+  formCommand.subject = val.subject;
+  formCommand.assignedPosition = val.assignedPosition;
+  commanderFullnameRef.value = ref.commanderFullnameRef;
+  commanderPositionRef.value = ref.commanderPositionRef;
+  commanderAboveFullnameRef.value = ref.commanderAboveFullnameRef;
+  commanderAbovePositionRef.value = ref.commanderAbovePositionRef;
+  fileEvaluation1Ref.value = ref.fileEvaluation1Ref;
+  fileEvaluation2Ref.value = ref.fileEvaluation2Ref;
+  fileEvaluation3Ref.value = ref.fileEvaluation3Ref;
+  fileEvaluation4Ref.value = ref.fileEvaluation4Ref;
+  fileEvaluation5Ref.value = ref.fileEvaluation5Ref;
+  fileEvaluation6Ref.value = ref.fileEvaluation6Ref;
+  downloadFileRef.value = ref.downloadFile;
+  performanceRef.value = ref.performance;
+  performanceOwnerRef.value = ref.performanceOwner;
+  assignedPositionRef.value = ref.assignedPosition;
+  statusUpload.value = ref.statusUpload;
 }
-
+/** function บันทึกข้อมูล ผลงานม,ผู้เซ็นเอกสาร*/
 async function saveStep2() {
-	const body = {
-		commanderFullname: formCommand.commanderFullname,
-		commanderPosition: formCommand.commanderPosition,
-		commanderAboveFullname: formCommand.commanderAboveFullname,
-		commanderAbovePosition: formCommand.commanderAbovePosition,
-		author: formCommand.author,
-		subject: formCommand.subject,
-	}
+  const body = {
+    commanderFullname: formCommand.commanderFullname,
+    commanderPosition: formCommand.commanderPosition,
+    commanderAboveFullname: formCommand.commanderAboveFullname,
+    commanderAbovePosition: formCommand.commanderAbovePosition,
+    author: formCommand.author,
+    subject: formCommand.subject,
+  };
 
-	dialogConfirm(
-		$q,
-		async () => {
-			statusUpload.value = true
-			store.statusUpload = statusUpload.value
-			showLoader()
-			await http
-				.put(config.API.evaluationUpdateAuthor(route.params.id.toString(), "director"), body)
-				.then(() => {
-					route.params.id && fetchCheckStep(route.params.id.toString())
-				})
-				.catch(err => {
-					messageError($q, err)
-				})
-				.finally(() => {
-					hideLoader()
-				})
-		},
-		"ยืนยันการบันทึกข้อมูล",
-		"ต้องการยืนยันการบันทึกข้อมูลนี้ใช่หรือไม่?"
-	)
+  dialogConfirm(
+    $q,
+    async () => {
+      statusUpload.value = true;
+      store.statusUpload = statusUpload.value;
+      showLoader();
+      await http
+        .put(
+          config.API.evaluationUpdateAuthor(
+            route.params.id.toString(),
+            "director"
+          ),
+          body
+        )
+        .then(() => {
+          route.params.id && fetchCheckStep(route.params.id.toString());
+        })
+        .catch((err) => {
+          messageError($q, err);
+        })
+        .finally(() => {
+          hideLoader();
+        });
+    },
+    "ยืนยันการบันทึกข้อมูล",
+    "ต้องการยืนยันการบันทึกข้อมูลนี้ใช่หรือไม่?"
+  );
 }
-
+/** function ดำเนินการต่อไป 3.ตรวจสอบเอกสารเล่ม 1*/
 async function nextTostep3() {
-	dialogConfirm(
-		$q,
-		async () => {
-			showLoader()
-			await http
-				.put(config.API.evaluationPreparedoc(route.params.id.toString(), "approve"))
-				.then(() => {
-					route.params.id && fetchCheckStep(route.params.id.toString())
-				})
-				.catch(err => {
-					messageError($q, err)
-				})
-				.finally(() => {
-					hideLoader()
-				})
-		},
-		"ยืนยันการดำเนินการ",
-		"ต้องการยืนยันการดำเนินการต่อใช่หรือไม่?"
-	)
+  dialogConfirm(
+    $q,
+    async () => {
+      showLoader();
+      await http
+        .put(
+          config.API.evaluationPreparedoc(route.params.id.toString(), "approve")
+        )
+        .then(() => {
+          route.params.id && fetchCheckStep(route.params.id.toString());
+        })
+        .catch((err) => {
+          messageError($q, err);
+        })
+        .finally(() => {
+          hideLoader();
+        });
+    },
+    "ยืนยันการดำเนินการ",
+    "ต้องการยืนยันการดำเนินการต่อใช่หรือไม่?"
+  );
 }
 
 /** STEP3*/
+/** function ยืนยันการยื่นเอกสารไปยัง 4.รอตรวจสอบคุณสมบัติ*/
 async function saveStep3() {
-	showLoader()
-	await http
-		.put(config.API.evaluationCheckdoc(route.params.id.toString(), "approve"))
-		.then(() => {
-			route.params.id && fetchCheckStep(route.params.id.toString())
-		})
-		.catch(err => {
-			messageError($q, err)
-		})
-		.finally(() => {
-			hideLoader()
-		})
-}
-async function saveStep4() {
-	console.log("Save 4")
-}
-async function saveStep5() {
-	console.log("Save 5")
+  showLoader();
+  await http
+    .put(config.API.evaluationCheckdoc(route.params.id.toString(), "approve"))
+    .then(() => {
+      route.params.id && fetchCheckStep(route.params.id.toString());
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
 }
 
 /** STEP 6*/
+/** function บันทึกข้อมูล ผลงานม,ผู้เซ็นเอกสาร*/
 async function saveStep6() {
-	const body = {
-		commanderAboveFullnameDoc2: formCommand.commanderAboveFullname,
-		commanderAbovePositionDoc2: formCommand.commanderAbovePosition,
-		commanderFullnameDoc2: formCommand.commanderFullname,
-		commanderPositionDoc2: formCommand.commanderPosition,
-		authorDoc2: formCommand.author,
-		subjectDoc2: formCommand.subject,
-		assignedPosition: formCommand.assignedPosition,
-	}
-	dialogConfirm(
-		$q,
-		async () => {
-			statusUpload.value = true
-			store.statusUpload = statusUpload.value
-			showLoader()
-			await http
-				.put(config.API.evaluationUpdateAuthor(route.params.id.toString(), "director2"), body)
-				.then(() => {
-					route.params.id && fetchCheckStep(route.params.id.toString())
-				})
-				.catch(err => {
-					messageError($q, err)
-				})
-				.finally(() => {
-					hideLoader()
-				})
-		},
-		"ยืนยันการบันทึกข้อมูล",
-		"ต้องการยืนยันการบันทึกข้อมูลนี้ใช่หรือไม่?"
-	)
+  const body = {
+    commanderAboveFullnameDoc2: formCommand.commanderAboveFullname,
+    commanderAbovePositionDoc2: formCommand.commanderAbovePosition,
+    commanderFullnameDoc2: formCommand.commanderFullname,
+    commanderPositionDoc2: formCommand.commanderPosition,
+    authorDoc2: formCommand.author,
+    subjectDoc2: formCommand.subject,
+    assignedPosition: formCommand.assignedPosition,
+  };
+  dialogConfirm(
+    $q,
+    async () => {
+      statusUpload.value = true;
+      store.statusUpload = statusUpload.value;
+      showLoader();
+      await http
+        .put(
+          config.API.evaluationUpdateAuthor(
+            route.params.id.toString(),
+            "director2"
+          ),
+          body
+        )
+        .then(() => {
+          route.params.id && fetchCheckStep(route.params.id.toString());
+        })
+        .catch((err) => {
+          messageError($q, err);
+        })
+        .finally(() => {
+          hideLoader();
+        });
+    },
+    "ยืนยันการบันทึกข้อมูล",
+    "ต้องการยืนยันการบันทึกข้อมูลนี้ใช่หรือไม่?"
+  );
 }
-
+/** function ดำเนินการต่อไป 7.รอพิจารณาผลการประเมิน 2*/
 async function nextTostep7() {
-	dialogConfirm(
-		$q,
-		async () => {
-			showLoader()
-			await http
-				.put(config.API.evaluationCheckdocV2(route.params.id.toString()))
-				.then(() => {
-					route.params.id && fetchCheckStep(route.params.id.toString())
-				})
-				.catch(err => {
-					messageError($q, err)
-				})
-				.finally(() => {
-					hideLoader()
-				})
-		},
-		"ยืนยันการดำเนินการ",
-		"ต้องการยืนยันการดำเนินการต่อใช่หรือไม่?"
-	)
+  dialogConfirm(
+    $q,
+    async () => {
+      showLoader();
+      await http
+        .put(config.API.evaluationCheckdocV2(route.params.id.toString()))
+        .then(() => {
+          route.params.id && fetchCheckStep(route.params.id.toString());
+        })
+        .catch((err) => {
+          messageError($q, err);
+        })
+        .finally(() => {
+          hideLoader();
+        });
+    },
+    "ยืนยันการดำเนินการ",
+    "ต้องการยืนยันการดำเนินการต่อใช่หรือไม่?"
+  );
 }
 
 /** STEP 7*/
+/** function ยืนยันการยื่นเอกสารไปยัง 8.ตรวจสอบความถูกต้องของเอกสารเล่ม 2
+ */
 async function saveStep7() {
-	showLoader()
-	await http
-		.put(config.API.evaluationPreparedocV2(route.params.id.toString()))
-		.then(() => {
-			route.params.id && fetchCheckStep(route.params.id.toString())
-		})
-		.catch(() => {})
-		.finally(() => {
-			hideLoader()
-		})
-}
-async function saveStep8() {
-	console.log("Save 8")
-}
-async function saveStep9() {
-	console.log("Save 9")
+  showLoader();
+  await http
+    .put(config.API.evaluationPreparedocV2(route.params.id.toString()))
+    .then(() => {
+      route.params.id && fetchCheckStep(route.params.id.toString());
+    })
+    .catch(() => {})
+    .finally(() => {
+      hideLoader();
+    });
 }
 
+/** function callblck ทำงานเมื่อมีการเปลี่ยน Step*/
 watch(
-	() => store.step,
-	() => {
-		if (route.params.id) {
-			const id = route.params.id.toString()
-			store.step === 1 && fetchDataStep1(id)
-		}
-	}
-)
+  () => store.step,
+  () => {
+    if (route.params.id) {
+      const id = route.params.id.toString();
+      store.step === 1 && fetchDataStep1(id);
+    }
+  }
+);
 
+/** Hook lifecycle*/
 onMounted(async () => {
-	route.params.id && fetchCheckStep(route.params.id.toString())
-	route.name === "evaluate-add" && (showLoadStatus.value = true) && store.step === 1
-})
+  route.params.id && fetchCheckStep(route.params.id.toString());
+  route.name === "evaluate-add" &&
+    (showLoadStatus.value = true) &&
+    store.step === 1;
+});
 </script>
 <template>
-	<div class="col-12 row justify-center">
-		<div class="col-xs-12 col-sm-12 col-md-11">
-			<div class="toptitle text-white col-12 row items-center">
-				<q-btn icon="mdi-arrow-left" unelevated round dense flat color="primary" class="q-mr-sm" @click="router.go(-1)" />
-				<div>ประเมินบุคคล</div>
-			</div>
-		</div>
+  <div class="col-12 row justify-center">
+    <div class="col-xs-12 col-sm-12 col-md-11">
+      <div class="toptitle text-white col-12 row items-center">
+        <q-btn
+          icon="mdi-arrow-left"
+          unelevated
+          round
+          dense
+          flat
+          color="primary"
+          class="q-mr-sm"
+          @click="router.go(-1)"
+        />
+        <div>ประเมินบุคคล</div>
+      </div>
+    </div>
 
-		<div class="col-xs-12 col-sm-12 col-md-11 row q-col-gutter-md">
-			<div class="col-12 row">
-				<q-card bordered class="col-12 row caedNone q-pa-md q-col-gutter-md">
-					<div class="col-xs-12 col-sm-3">
-						<div class="toptitle">
-							{{ route.params.type === "expert" ? "ประเมินชำนาญการ" : "ประเมินชำนาญการพิเศษ" }}
-							<q-btn flat round dense color="primary" icon="history" @click="onClickPopupHistory">
-								<q-tooltip>ประวัติการประเมิน</q-tooltip>
-							</q-btn>
-						</div>
-						<Stepper />
-					</div>
+    <div class="col-xs-12 col-sm-12 col-md-11 row q-col-gutter-md">
+      <div class="col-12 row">
+        <q-card bordered class="col-12 row caedNone q-pa-md q-col-gutter-md">
+          <div class="col-xs-12 col-sm-3">
+            <div class="toptitle">
+              {{
+                route.params.type === "expert"
+                  ? "ประเมินชำนาญการ"
+                  : "ประเมินชำนาญการพิเศษ"
+              }}
+              <q-btn
+                flat
+                round
+                dense
+                color="primary"
+                icon="history"
+                @click="onClickPopupHistory"
+              >
+                <q-tooltip>ประวัติการประเมิน</q-tooltip>
+              </q-btn>
+            </div>
+            <Stepper />
+          </div>
 
-					<div class="col-xs-12 col-sm-9" v-if="showLoadStatus">
-						<div class="col-12 row">
-							<div class="col-9">
-								<div class="toptitle">{{ store.step }}.{{ store.title[store.step - 1] }}</div>
-							</div>
-							<div class="col-3 text-right">
-								<q-btn v-if="store.step === 1" :href="externalLink" target="_blank" outline color="blue" no-caps> ตรวจสอบคุณสมบัติกับ ก.พ. </q-btn>
-							</div>
-						</div>
-						<div class="row q-col-gutter-md col-12">
-							<div
-								:class="
-									store.step === 2 || store.step === 4 || store.step === 5 || store.step === 6 || store.step === 8 || store.step === 9
-										? 'col-xs-12 col-sm-12 row'
-										: 'col-xs-12 col-sm-5 row'
-								"
-							>
-								<q-card flat bordered class="col-12 q-pa-md">
-									<q-card-section>
-										<Step1 v-if="store.step === 1" @update:spec="updateCheckSpec" :data="formDataStep1" />
-										<Step2 v-if="store.step === 2" @update:form="updateformCommand" />
-										<Step3 v-if="store.step === 3" @update:file="updateFilePDF" />
-										<Step4 v-if="store.step === 4" />
-										<Step5 v-if="store.step === 5" />
-										<Step6 v-if="store.step === 6" @update:form="updateformCommand" />
-										<Step7 v-if="store.step === 7" @update:file="updateFilePDF" />
-										<Step8 v-if="store.step === 8" />
-										<Step9 v-if="store.step === 9" />
-									</q-card-section>
-								</q-card>
-							</div>
-							<div class="col-xs-12 col-sm-7 row" v-if="store.step === 1 || store.step === 3 || store.step === 7">
-								<div class="col-12">
-									<ViewStep1 v-if="store.step === 1" @update:formDeital="updateFormDetail" :data="formDataStep1" />
-									<ViewStep3 v-if="store.step === 3 && pdfSrc" :pdfSrc="pdfSrc" :urlDownloadFile="urlDownloadFile" />
-									<ViewStep7 v-if="store.step === 7 && pdfSrc" :pdfSrc="pdfSrc" :urlDownloadFile="urlDownloadFile" />
-								</div>
-							</div>
-						</div>
-						<div class="q-mt-md q-gutter-md" align="right">
-							<q-btn
-								v-if="
-									store.step >= store.currentStep &&
-									store.statusUpload === false &&
-									store.step !== 3 &&
-									store.step !== 4 &&
-									store.step !== 5 &&
-									store.step !== 7 &&
-									store.step !== 8 &&
-									store.step !== 9
-								"
-								unelevated
-								:label="store.step === 2 || store.step === 6 ? 'บันทึกข้อมูล' : 'ดำเนินการต่อ'"
-								color="public"
-								@click="onCilckNextStep()"
-							/>
+          <div class="col-xs-12 col-sm-9" v-if="showLoadStatus">
+            <div class="col-12 row">
+              <div class="col-9">
+                <div class="toptitle">
+                  {{ store.step }}.{{ store.title[store.step - 1] }}
+                </div>
+              </div>
+              <div class="col-3 text-right">
+                <q-btn
+                  v-if="store.step === 1"
+                  :href="externalLink"
+                  target="_blank"
+                  outline
+                  color="blue"
+                  no-caps
+                >
+                  ตรวจสอบคุณสมบัติกับ ก.พ.
+                </q-btn>
+              </div>
+            </div>
+            <div class="row q-col-gutter-md col-12">
+              <div
+                :class="
+                  store.step === 2 ||
+                  store.step === 4 ||
+                  store.step === 5 ||
+                  store.step === 6 ||
+                  store.step === 8 ||
+                  store.step === 9
+                    ? 'col-xs-12 col-sm-12 row'
+                    : 'col-xs-12 col-sm-5 row'
+                "
+              >
+                <q-card flat bordered class="col-12 q-pa-md">
+                  <q-card-section>
+                    <Step1
+                      v-if="store.step === 1"
+                      @update:spec="updateCheckSpec"
+                      :data="formDataStep1"
+                    />
+                    <Step2
+                      v-if="store.step === 2"
+                      @update:form="updateformCommand"
+                    />
+                    <Step3
+                      v-if="store.step === 3"
+                      @update:file="updateFilePDF"
+                    />
+                    <Step4 v-if="store.step === 4" />
+                    <Step5 v-if="store.step === 5" />
+                    <Step6
+                      v-if="store.step === 6"
+                      @update:form="updateformCommand"
+                    />
+                    <Step7
+                      v-if="store.step === 7"
+                      @update:file="updateFilePDF"
+                    />
+                    <Step8 v-if="store.step === 8" />
+                    <Step9 v-if="store.step === 9" />
+                  </q-card-section>
+                </q-card>
+              </div>
+              <div
+                class="col-xs-12 col-sm-7 row"
+                v-if="store.step === 1 || store.step === 3 || store.step === 7"
+              >
+                <div class="col-12">
+                  <ViewStep1
+                    v-if="store.step === 1"
+                    @update:formDeital="updateFormDetail"
+                    :data="formDataStep1"
+                  />
+                  <ViewStep3
+                    v-if="store.step === 3 && pdfSrc"
+                    :pdfSrc="pdfSrc"
+                    :urlDownloadFile="urlDownloadFile"
+                  />
+                  <ViewStep7
+                    v-if="store.step === 7 && pdfSrc"
+                    :pdfSrc="pdfSrc"
+                    :urlDownloadFile="urlDownloadFile"
+                  />
+                </div>
+              </div>
+            </div>
+            <div class="q-mt-md q-gutter-md" align="right">
+              <q-btn
+                v-if="
+                  store.step >= store.currentStep &&
+                  store.statusUpload === false &&
+                  store.step !== 3 &&
+                  store.step !== 4 &&
+                  store.step !== 5 &&
+                  store.step !== 7 &&
+                  store.step !== 8 &&
+                  store.step !== 9
+                "
+                unelevated
+                :label="
+                  store.step === 2 || store.step === 6
+                    ? 'บันทึกข้อมูล'
+                    : 'ดำเนินการต่อ'
+                "
+                color="public"
+                @click="onCilckNextStep()"
+              />
 
-							<q-btn v-else-if="store.step >= store.currentStep && (store.step == 3 || store.step == 7)" unelevated label="ยื่นเอกการ" color="public" @click="onCilckNextStep()" />
+              <q-btn
+                v-else-if="
+                  store.step >= store.currentStep &&
+                  (store.step == 3 || store.step == 7)
+                "
+                unelevated
+                label="ยื่นเอกการ"
+                color="public"
+                @click="onCilckNextStep()"
+              />
 
-							<q-btn v-if="store.step >= store.currentStep && store.step == 2 && store.statusUpload" unelevated label="ดำเนินการต่อ" color="public" @click="onCilckNextStep()" />
-							<q-btn v-if="store.step >= store.currentStep && store.step == 6 && store.statusUpload" unelevated label="ดำเนินการต่อ" color="public" @click="onCilckNextStep()" />
-						</div>
-					</div>
-				</q-card>
-			</div>
-		</div>
-	</div>
+              <q-btn
+                v-if="
+                  store.step >= store.currentStep &&
+                  store.step == 2 &&
+                  store.statusUpload
+                "
+                unelevated
+                label="ดำเนินการต่อ"
+                color="public"
+                @click="onCilckNextStep()"
+              />
+              <q-btn
+                v-if="
+                  store.step >= store.currentStep &&
+                  store.step == 6 &&
+                  store.statusUpload
+                "
+                unelevated
+                label="ดำเนินการต่อ"
+                color="public"
+                @click="onCilckNextStep()"
+              />
+            </div>
+          </div>
+        </q-card>
+      </div>
+    </div>
+  </div>
 
-	<PopupHistory :modal="modalHistory" :close="onClickPopupHistory" :id="store.evaluateId" />
+  <PopupHistory
+    :modal="modalHistory"
+    :close="onClickPopupHistory"
+    :id="store.evaluateId"
+  />
 </template>
 <style>
 .q-stepper--vertical .q-stepper__step-inner {
-	padding: 0;
+  padding: 0;
 }
 </style>