From 0cb80ca91ddd2c6660f9370d4a4084f22de8cbe9 Mon Sep 17 00:00:00 2001
From: Kittapath <kittapath@frappet.com>
Date: Mon, 8 Jan 2024 13:08:44 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=AA=E0=B8=A3=E0=B9=89=E0=B8=B2=E0=B8=87?=
 =?UTF-8?q?=E0=B9=81=E0=B8=9A=E0=B8=9A=E0=B8=9B=E0=B8=A3=E0=B8=B0=E0=B9=80?=
 =?UTF-8?q?=E0=B8=A1=E0=B8=B4=E0=B8=99=E0=B9=81=E0=B8=81=E0=B9=89=E0=B8=8A?=
 =?UTF-8?q?=E0=B8=B7=E0=B9=88=E0=B8=AD=E0=B8=88=E0=B8=A3=E0=B8=B4=E0=B8=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/EvaluateStepMain.vue           | 1167 ++++++++---------
 1 file changed, 521 insertions(+), 646 deletions(-)

diff --git a/src/modules/06_evaluate/components/EvaluateStepMain.vue b/src/modules/06_evaluate/components/EvaluateStepMain.vue
index 8712874..5f6aebe 100644
--- a/src/modules/06_evaluate/components/EvaluateStepMain.vue
+++ b/src/modules/06_evaluate/components/EvaluateStepMain.vue
@@ -1,137 +1,132 @@
 <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 { 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 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 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 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 === 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?.()
+				},
+				"ยืนยันการดำเนินการ",
+				"ต้องการยืนยันการดำเนินการต่อใช่หรือไม่?"
+		  )
 }
 
 /** 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: 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()
+			}
+		}
+	}
 }
 
-const pdfSrc = ref<any>();
-const urlDownloadFile = ref<string>("");
+const pdfSrc = ref<any>()
+const urlDownloadFile = ref<string>("")
 async function updateFilePDF(url: any, urlDownload: string) {
-  pdfSrc.value = url;
-  urlDownloadFile.value = urlDownload;
+	pdfSrc.value = url
+	urlDownloadFile.value = urlDownload
 }
 
 // /** function เช็คการยื่นข้อประเมิน*/
@@ -154,615 +149,495 @@ async function updateFilePDF(url: any, urlDownload: string) {
 // }
 
 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*/
 const formSpec = reactive<FormSpec>({
-  isEducationalQft: false, // คุณวุฒิการศึกษา
-  isGovermantServiceHtr: false, // ประวัติการรับราชการ
-  isOperatingExp: false, // ประสบการณ์ในการปฏิบัติงาน
-  isMinPeriodOfTenure: false, // ระยะเวลาขั้นต่ำในการดำรงตำแหน่งในสายงานที่ขอเข้ารับการคัดเลือก
-  isHaveSpecificQft: false, // มีคุณสมบัติตรงตามคุณสมบัติเฉพาะสำหรับตำแหน่งที่กำหนด ในมาตราฐานกำหนดตำแหน่ง
-  isHaveProLicense: false, // มีใบอนุญาตประกอบวิชาชีพของสายงานต่างๆ
-  isHaveMinPeriodOrHoldPos: false, // มีระยะเวลาขั้นต่ำในการดำรงตำแหน่งหรือเคยดำรงตำแหน่งในสายงานที่จะคัดเลือกตามคุณวุฒิของบุคคลและระดับตำแหน่งที่จะคัดเลือก
-});
-const formDetail = ref<any>();
-const formDataStep1 = ref<any>();
+	isEducationalQft: false, // คุณวุฒิการศึกษา
+	isGovermantServiceHtr: false, // ประวัติการรับราชการ
+	isOperatingExp: false, // ประสบการณ์ในการปฏิบัติงาน
+	isMinPeriodOfTenure: false, // ระยะเวลาขั้นต่ำในการดำรงตำแหน่งในสายงานที่ขอเข้ารับการคัดเลือก
+	isHaveSpecificQft: false, // มีคุณสมบัติตรงตามคุณสมบัติเฉพาะสำหรับตำแหน่งที่กำหนด ในมาตราฐานกำหนดตำแหน่ง
+	isHaveProLicense: false, // มีใบอนุญาตประกอบวิชาชีพของสายงานต่างๆ
+	isHaveMinPeriodOrHoldPos: false, // มีระยะเวลาขั้นต่ำในการดำรงตำแหน่งหรือเคยดำรงตำแหน่งในสายงานที่จะคัดเลือกตามคุณวุฒิของบุคคลและระดับตำแหน่งที่จะคัดเลือก
+})
+const formDetail = ref<any>()
+const formDataStep1 = ref<any>()
 async function fetchDataStep1(id: string) {
-  showLoadStatus.value = false;
-  showLoader();
-  await http
-    .get(config.API.evaluationCheckspecByid(id))
-    .then((res) => {
-      const data = res.data.result;
-      formDataStep1.value = data;
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-      showLoadStatus.value = true;
-    });
+	showLoadStatus.value = false
+	showLoader()
+	await http
+		.get(config.API.evaluationCheckspecByid(id))
+		.then(res => {
+			const data = res.data.result
+			formDataStep1.value = data
+		})
+		.catch(err => {
+			messageError($q, err)
+		})
+		.finally(() => {
+			hideLoader()
+			showLoadStatus.value = true
+		})
 }
 
 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
 }
 
 function updateFormDetail(data: any) {
-  formDetail.value = data;
+	formDetail.value = data
 }
 
 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 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
 }
 
 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()
+				})
+		},
+		"ยืนยันการบันทึกข้อมูล",
+		"ต้องการยืนยันการบันทึกข้อมูลนี้ใช่หรือไม่?"
+	)
 }
 
 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*/
 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();
-    });
+	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");
+	console.log("Save 4")
 }
 async function saveStep5() {
-  console.log("Save 5");
+	console.log("Save 5")
 }
 
 /** STEP 6*/
 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()
+				})
+		},
+		"ยืนยันการบันทึกข้อมูล",
+		"ต้องการยืนยันการบันทึกข้อมูลนี้ใช่หรือไม่?"
+	)
 }
 
 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*/
 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();
-    });
+	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");
+	console.log("Save 8")
 }
 async function saveStep9() {
-  console.log("Save 9");
+	console.log("Save 9")
 }
 
 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)
+		}
+	}
+)
 
 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>