From 0e5d15dc7c1606304756657e786899ac655291af Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Thu, 21 Dec 2023 17:51:13 +0700
Subject: [PATCH] =?UTF-8?q?API=20=E0=B8=9B=E0=B8=A3=E0=B8=B0=E0=B9=80?=
 =?UTF-8?q?=E0=B8=A1=E0=B8=B4=E0=B8=99=20step=201-4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/evaluate/api.evaluate.ts              |   3 +
 src/modules/06_evaluate/components/Tab1.vue   |  33 +++-
 .../06_evaluate/components/step/step1.vue     |  18 +-
 .../06_evaluate/components/step/step2.vue     | 161 ++++++++++++++---
 .../06_evaluate/components/step/step3.vue     |  67 +++++++-
 .../components/viewstep/popupHistory.vue      |  18 +-
 .../components/viewstep/viewPDF.vue           |  54 +++++-
 .../components/viewstep/viewStep1.vue         |  92 ++++++++--
 .../components/viewstep/viewStep3.vue         |  19 +-
 src/modules/06_evaluate/store.ts              |   2 +-
 .../06_evaluate/stores/evaluationFunction.ts  | 162 +++++-------------
 .../06_evaluate/views/EvaluateMain.vue        |   6 +-
 12 files changed, 444 insertions(+), 191 deletions(-)

diff --git a/src/api/evaluate/api.evaluate.ts b/src/api/evaluate/api.evaluate.ts
index 0ae1653..7261793 100644
--- a/src/api/evaluate/api.evaluate.ts
+++ b/src/api/evaluate/api.evaluate.ts
@@ -21,8 +21,11 @@ export default {
   evaluationWaitCheck: (id: string) => `${evaluation}/wait-check-doc-v2/${id}`,
   evaluationDoc2: (id: string) => `${evaluation}/doc2/reject/${id}`,
   evaluationHistory: (id: string) => `${evaluation}/step-history/${id}`,
+  evaluationDetail: () => `${env.API_URI}/profile/keycloak`,
 
   /**document */
   loadPathDocument: (val: string, id: string) =>
     `${evaluation}/document/${val}/${id}`,
+  loadFileDocument: (val: string, id: string, file: String) =>
+    `${evaluation}/document/${val}/${id}/${file}`,
 };
diff --git a/src/modules/06_evaluate/components/Tab1.vue b/src/modules/06_evaluate/components/Tab1.vue
index 2d280b8..5ef151e 100644
--- a/src/modules/06_evaluate/components/Tab1.vue
+++ b/src/modules/06_evaluate/components/Tab1.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, reactive, onMounted } from "vue";
+import { ref, reactive, onMounted, onUnmounted } from "vue";
 import { useQuasar } from "quasar";
 import evaluationFunctions from "@/modules/06_evaluate/stores/evaluationFunction";
 
@@ -47,6 +47,7 @@ const props = defineProps({
 const externalLink =
   "https://accreditation.ocsc.go.th/accreditation/search/curriculum";
 
+const formDetail = ref<any>();
 const formSpec = reactive<FormSpec>({
   isEducationalQft: false, // คุณวุฒิการศึกษา
   isGovermantServiceHtr: false, // ประวัติการรับราชการ
@@ -114,7 +115,7 @@ async function onCilckNextStep() {
         $q,
         () => {
           functionCreateDoc?.();
-          store.step++;
+          // store.step++;
         },
         "ยืนยันการดำเนินการ",
         "ต้องการยืนยันการดำเนินการต่อใช่หรือไม่?"
@@ -134,7 +135,7 @@ async function onCilckprPeviousStep(type: string) {
 }
 
 async function saveStep1() {
-  saveEvaluation(formSpec);
+  saveEvaluation(formSpec, formDetail.value);
 }
 
 async function updateCheckSpec(data: FormSpec) {
@@ -147,6 +148,10 @@ async function updateCheckSpec(data: FormSpec) {
   formSpec.isHaveMinPeriodOrHoldPos = data.isHaveMinPeriodOrHoldPos;
 }
 
+function updateFormDetail(data: any) {
+  formDetail.value = data;
+}
+
 async function saveStep2() {
   dialogConfirm(
     $q,
@@ -159,8 +164,6 @@ async function saveStep2() {
 }
 
 function updateformCommand(val: any, ref: any) {
-  console.log(ref);
-
   formCommand.commanderFullname = val.commanderFullname;
   formCommand.commanderPosition = val.commanderPosition;
   formCommand.commanderAboveFullname = val.commanderAboveFullname;
@@ -196,9 +199,16 @@ async function validateStep2() {
   }
 }
 
+const pdfSrc = ref<any>();
 async function saveStep3() {
   nextCheckDoc("approve");
 }
+async function updateFilePDF(url: any) {
+  console.log(url);
+
+  pdfSrc.value = url;
+}
+
 async function saveStep4() {
   console.log("Save 4");
 }
@@ -320,7 +330,11 @@ onMounted(async () => {
                 @update:form="updateformCommand"
                 :evaluateId="store.evaluateId"
               />
-              <Step3 v-if="store.step === 3" />
+              <Step3
+                v-if="store.step === 3"
+                @update:file="updateFilePDF"
+                :evaluateId="store.evaluateId"
+              />
               <Step4 v-if="store.step === 4" />
               <Step5 v-if="store.step === 5" />
               <Step6
@@ -340,8 +354,11 @@ onMounted(async () => {
         >
           <q-card flat bordered class="col-12">
             <q-card-section>
-              <ViewStep1 v-if="store.step === 1" />
-              <ViewStep3 v-if="store.step === 3" />
+              <ViewStep1
+                v-if="store.step === 1"
+                @update:formDeital="updateFormDetail"
+              />
+              <ViewStep3 v-if="store.step === 3 && pdfSrc" :pdfSrc="pdfSrc" />
               <ViewStep7 v-if="store.step === 7" /> </q-card-section
           ></q-card>
         </div>
diff --git a/src/modules/06_evaluate/components/step/step1.vue b/src/modules/06_evaluate/components/step/step1.vue
index bb1ea3e..6489a13 100644
--- a/src/modules/06_evaluate/components/step/step1.vue
+++ b/src/modules/06_evaluate/components/step/step1.vue
@@ -40,13 +40,13 @@ async function fetchCheckSpec(id: string) {
     .get(config.API.evaluationCheckspecByid(id))
     .then((res) => {
       const data = res.data.result;
-      formData.isEducationalQft = data.IsEducationalQft;
-      formData.isGovermantServiceHtr = data.IsGovermantServiceHtr;
-      formData.isOperatingExp = data.IsOperatingExp;
-      formData.isMinPeriodOfTenure = data.IsMinPeriodOfTenure;
-      formData.isHaveSpecificQft = data.IsHaveSpecificQft;
-      formData.isHaveProLicense = data.IsHaveProLicense;
-      formData.isHaveMinPeriodOrHoldPos = data.IsHaveMinPeriodOrHoldPos;
+      formData.isEducationalQft = data.isEducationalQft;
+      formData.isGovermantServiceHtr = data.isGovermantServiceHtr;
+      formData.isOperatingExp = data.isOperatingExp;
+      formData.isMinPeriodOfTenure = data.isMinPeriodOfTenure;
+      formData.isHaveSpecificQft = data.isHaveSpecificQft;
+      formData.isHaveProLicense = data.isHaveProLicense;
+      formData.isHaveMinPeriodOrHoldPos = data.isHaveMinPeriodOrHoldPos;
     })
     .catch((err) => {
       messageError($q, err);
@@ -57,7 +57,9 @@ async function fetchCheckSpec(id: string) {
 }
 
 onMounted(() => {
-  store.step === 1 && props.evaluateId && fetchCheckSpec(props.evaluateId);
+  console.log(store.step);
+
+  props.evaluateId && fetchCheckSpec(props.evaluateId);
 });
 </script>
 
diff --git a/src/modules/06_evaluate/components/step/step2.vue b/src/modules/06_evaluate/components/step/step2.vue
index f2373a5..02fb27b 100644
--- a/src/modules/06_evaluate/components/step/step2.vue
+++ b/src/modules/06_evaluate/components/step/step2.vue
@@ -4,7 +4,9 @@ import keycloak from "@/plugins/keycloak";
 import http from "@/plugins/http";
 import config from "@/app.config";
 import genReport from "@/plugins/genreport";
-import { useQuasar, type StringDictionary } from "quasar";
+import { VuePDF, usePDF } from "@tato30/vue-pdf";
+import { useQuasar } from "quasar";
+import axios from "axios";
 
 import type { FormCommand } from "@/modules/06_evaluate/interface/evalute";
 
@@ -76,7 +78,7 @@ const page = ref<number>(1);
 const pdfSrc = ref<any>();
 
 function onClickViewPDF(file: any) {
-  pdfSrc.value = file.webkitRelativePath;
+  // pdfSrc.value = file.webkitRelativePath;
   modalView.value = true;
 }
 
@@ -115,24 +117,56 @@ async function onClickDowloadFile(
   await genReport(body, fileName);
 }
 
-async function fetchPathUpload(volume: string, id: string) {
-  showLoader();
+async function fetchPathUpload(
+  volume: string,
+  id: string | undefined,
+  type: string,
+  file: any
+) {
   const body = {
-    fileList: [
-      "1-แบบพิจารณาคุณสมบัติบุคคล",
-      "2-แบบแสดงรายละเอียดการเสนอผลงาน",
-      "3-แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล (เอกสารแบบ ก.)",
-      "4-แบบประเมินคุณลักษณะบุคคล",
-      "5-แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)",
-      "6-ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)",
-    ],
+    fileList: type,
+    replace: true,
+    // "1-แบบพิจารณาคุณสมบัติบุคคล",
+    // "2-แบบแสดงรายละเอียดการเสนอผลงาน",
+    // "3-แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล (เอกสารแบบ ก.)",
+    // "4-แบบประเมินคุณลักษณะบุคคล",
+    // "5-แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)",
+    // "6-ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)",
   };
-  await http
-    .post(config.API.loadPathDocument(volume, id), body)
-    .then((res) => {})
-    .catch((err) => {})
-    .finally(() => {
-      hideLoader();
+  if (id && file) {
+    showLoader();
+    await http
+      .post(config.API.loadPathDocument(volume, id), body)
+      .then((res) => {
+        const foundKey: string | undefined = Object.keys(res.data).find(
+          (key) =>
+            res.data[key]?.fileName !== undefined &&
+            res.data[key]?.fileName !== ""
+        );
+        foundKey && uploadfile(res.data[foundKey]?.uploadUrl, file);
+      })
+      .catch((err) => {
+        messageError($q, err);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  }
+}
+
+async function uploadfile(uploadUrl: string, file: any) {
+  console.log(uploadUrl);
+  await axios
+    .put(uploadUrl, file, {
+      headers: {
+        "Content-Type": file.type,
+      },
+    })
+    .then((res) => {
+      console.log(res);
+    })
+    .catch((err) => {
+      console.log(err);
     });
 }
 
@@ -150,7 +184,6 @@ onMounted(async () => {
     fileEvaluation6Ref: fileEvaluation6Ref.value,
   };
   emit("update:form", formCommand, ref);
-  props.evaluateId && (await fetchPathUpload("เล่ม 1", props.evaluateId));
 });
 </script>
 
@@ -215,7 +248,20 @@ onMounted(async () => {
                 </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-btn
+                  flat
+                  round
+                  dense
+                  color="primary"
+                  icon="mdi-upload"
+                  @click="
+                    fetchPathUpload(
+                      'เล่ม 1',
+                      props.evaluateId,
+                      '1-แบบพิจารณาคุณสมบัติบุคคล',
+                      fileEvaluation1
+                    )
+                  "
                   ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
                 >
               </div>
@@ -283,7 +329,20 @@ onMounted(async () => {
                 </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-btn
+                  flat
+                  round
+                  dense
+                  color="primary"
+                  icon="mdi-upload"
+                  @click="
+                    fetchPathUpload(
+                      'เล่ม 1',
+                      props.evaluateId,
+                      '2-แบบแสดงรายละเอียดการเสนอผลงาน',
+                      fileEvaluation2
+                    )
+                  "
                   ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
                 >
               </div>
@@ -352,7 +411,20 @@ onMounted(async () => {
                 </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-btn
+                  flat
+                  round
+                  dense
+                  color="primary"
+                  icon="mdi-upload"
+                  @click="
+                    fetchPathUpload(
+                      'เล่ม 1',
+                      props.evaluateId,
+                      '3-แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล (เอกสารแบบ ก.)',
+                      fileEvaluation3
+                    )
+                  "
                   ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
                 >
               </div>
@@ -420,7 +492,20 @@ onMounted(async () => {
                 </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-btn
+                  flat
+                  round
+                  dense
+                  color="primary"
+                  icon="mdi-upload"
+                  @click="
+                    fetchPathUpload(
+                      'เล่ม 1',
+                      props.evaluateId,
+                      '4-แบบประเมินคุณลักษณะบุคคล',
+                      fileEvaluation4
+                    )
+                  "
                   ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
                 >
               </div>
@@ -487,7 +572,20 @@ onMounted(async () => {
                 </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-btn
+                  flat
+                  round
+                  dense
+                  color="primary"
+                  icon="mdi-upload"
+                  @click="
+                    fetchPathUpload(
+                      'เล่ม 1',
+                      props.evaluateId,
+                      '5-แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)',
+                      fileEvaluation5
+                    )
+                  "
                   ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
                 >
               </div>
@@ -555,7 +653,20 @@ onMounted(async () => {
                 </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-btn
+                  flat
+                  round
+                  dense
+                  color="primary"
+                  icon="mdi-upload"
+                  @click="
+                    fetchPathUpload(
+                      'เล่ม 1',
+                      props.evaluateId,
+                      '6-ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)',
+                      fileEvaluation6
+                    )
+                  "
                   ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
                 >
               </div>
diff --git a/src/modules/06_evaluate/components/step/step3.vue b/src/modules/06_evaluate/components/step/step3.vue
index 1e89608..4cb2732 100644
--- a/src/modules/06_evaluate/components/step/step3.vue
+++ b/src/modules/06_evaluate/components/step/step3.vue
@@ -1,19 +1,82 @@
 <script setup lang="ts">
-import { reactive, ref } from "vue";
+import { reactive, ref, onMounted } from "vue";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useQuasar } from "quasar";
+import axios from "axios";
 
 import { useCounterMixin } from "@/stores/mixin";
 import { useEvaluateStore } from "@/modules/06_evaluate/store";
 
+const $q = useQuasar();
 const store = useEvaluateStore();
 const mixin = useCounterMixin();
-const { date2Thai } = mixin;
+const { date2Thai, showLoader, hideLoader, messageError } = mixin;
+
+const props = defineProps({
+  evaluateId: {
+    type: String,
+  },
+});
+const emit = defineEmits(["update:file"]);
 
 const selectedItem = ref(1);
+const fileName = ref([
+  "1-แบบพิจารณาคุณสมบัติบุคคล",
+  "2-แบบแสดงรายละเอียดการเสนอผลงาน",
+  "3-แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล (เอกสารแบบ ก.)",
+  "4-แบบประเมินคุณลักษณะบุคคล",
+  "5-แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)",
+  "6-ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)",
+]);
 
 function handleItemClick(itemNumber: number) {
   store.tabPanels = itemNumber.toString();
   selectedItem.value = itemNumber;
+  fetchDocument(fileName.value[itemNumber - 1]);
 }
+async function fetchDocument(fileName: string) {
+  showLoader();
+  props.evaluateId &&
+    (await http
+      .get(config.API.loadFileDocument("เล่ม 1", props.evaluateId, fileName))
+      .then((res) => {
+        console.log(res.data.downloadUrl);
+        downloadFile(res.data.downloadUrl);
+      })
+      .catch((err) => {
+        messageError($q, err);
+      }));
+}
+
+async function downloadFile(url: string) {
+  await axios
+    .get(url, {
+      responseType: "blob",
+      headers: {
+        "Content-Type": "application/json",
+      },
+    })
+    .then((res) => {
+      const blob = new Blob([res.data]);
+      const objectUrl = URL.createObjectURL(blob);
+      console.log(blob);
+
+      console.log(objectUrl);
+
+      emit("update:file", objectUrl);
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+onMounted(async () => {
+  await fetchDocument(fileName.value[selectedItem.value - 1]);
+});
 </script>
 
 <template>
diff --git a/src/modules/06_evaluate/components/viewstep/popupHistory.vue b/src/modules/06_evaluate/components/viewstep/popupHistory.vue
index fe1c8b9..e2060e1 100644
--- a/src/modules/06_evaluate/components/viewstep/popupHistory.vue
+++ b/src/modules/06_evaluate/components/viewstep/popupHistory.vue
@@ -38,29 +38,29 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
   {
-    name: "Step",
+    name: "step",
     align: "left",
     label: "การแก้ไข",
     sortable: true,
-    field: "Step",
+    field: "step",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
   {
-    name: "LastUpdateFullName",
+    name: "lastUpdateFullName",
     align: "left",
     label: "ผู้ดำเนินการ",
     sortable: true,
-    field: "LastUpdateFullName",
+    field: "lastUpdateFullName",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
   {
-    name: "LastUpdatedAt",
+    name: "lastUpdatedAt",
     align: "left",
     label: "วันที่แก้ไข",
     sortable: true,
-    field: "LastUpdatedAt",
+    field: "lastUpdatedAt",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
@@ -74,9 +74,9 @@ async function fetchListHistory(id: string) {
     .then((res) => {
       const data = res.data.result;
       const list = data.map((e: any) => ({
-        Step: e.Step,
-        LastUpdateFullName: e.LastUpdateFullName,
-        LastUpdatedAt: date2Thai(e.LastUpdatedAt),
+        step: e.step,
+        lastUpdateFullName: e.lastUpdateFullName,
+        lastUpdatedAt: date2Thai(e.lastUpdatedAt),
       }));
       row.value = list;
     })
diff --git a/src/modules/06_evaluate/components/viewstep/viewPDF.vue b/src/modules/06_evaluate/components/viewstep/viewPDF.vue
index 81faa83..1df850a 100644
--- a/src/modules/06_evaluate/components/viewstep/viewPDF.vue
+++ b/src/modules/06_evaluate/components/viewstep/viewPDF.vue
@@ -1,5 +1,42 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, onMounted, watch } from "vue";
+import { VuePDF, usePDF } from "@tato30/vue-pdf";
+
+import { useCounterMixin } from "@/stores/mixin";
+
+const mixin = useCounterMixin();
+
+const { showLoader, hideLoader, messageError, date2Thai } = mixin;
+
+const props = defineProps({
+  pdfSrc: {
+    type: String,
+  },
+});
+
+const loadPDF = ref<boolean>(false);
+
+async function loadpdfData() {
+  loadPDF.value = false;
+  const pdfData = await usePDF(`${props.pdfSrc}`);
+  setTimeout(() => {
+    pdfSrc.value = pdfData.pdf.value;
+    numOfPages.value = pdfData.pages.value;
+  }, 1500);
+  setTimeout(() => {
+    loadPDF.value = true;
+  }, 2000);
+}
+
+watch(
+  () => props.pdfSrc,
+  async () => {
+    await loadpdfData();
+  }
+);
+onMounted(async () => {
+  await loadpdfData();
+});
 
 const splitterModel = ref(14);
 const numOfPages = ref<number>(0);
@@ -68,9 +105,22 @@ function backPage() {
       </div>
     </template>
     <template v-slot:after>
-      <div class="q-pa-md">
+      <div v-if="loadPDF">
         <VuePDF ref="vuePDFRef" :pdf="pdfSrc" :page="page" fit-parent />
       </div>
+
+      <div
+        v-else
+        class="text-center"
+        style="
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          height: 25vh;
+        "
+      >
+        <q-spinner color="primary" size="3em" :thickness="2" />
+      </div>
     </template>
     <template v-slot:default>
       <div class="q-pa-md">
diff --git a/src/modules/06_evaluate/components/viewstep/viewStep1.vue b/src/modules/06_evaluate/components/viewstep/viewStep1.vue
index bc8af69..224690c 100644
--- a/src/modules/06_evaluate/components/viewstep/viewStep1.vue
+++ b/src/modules/06_evaluate/components/viewstep/viewStep1.vue
@@ -1,15 +1,87 @@
 <script setup lang="ts">
+import { ref, reactive, onMounted } from "vue";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useQuasar } from "quasar";
+
 import TableData from "@/modules/06_evaluate/components/viewstep/tableStep1.vue";
 
+import { useCounterMixin } from "@/stores/mixin";
 import { useEvaluateDetailStore } from "@/modules/06_evaluate/stores/evaluteDetail";
 
+const mixin = useCounterMixin();
 const store = useEvaluateDetailStore();
+const $q = useQuasar();
+
+const { showLoader, hideLoader, messageError, date2Thai } = mixin;
 const {
   columnsLicense,
   columnPeriodhistory,
   columnTrainingHistory,
   columnProjectsProposed,
 } = store;
+
+const emit = defineEmits(["update:formDeital"]);
+
+const formDetail = reactive({
+  UserId: "",
+  CitizenId: "",
+  Prefix: "",
+  FullName: "",
+  Position: "",
+  Oc: "",
+  Salary: "",
+  PositionLevel: "",
+  PosNo: "",
+  BirthDate: "",
+  GovAge: "",
+  Educations: [],
+  Certificates: [],
+  Salaries: [],
+  Trainings: [],
+  Assessments: [],
+  // Type: "",
+  // Step: "",
+});
+
+async function fetchDetail() {
+  showLoader();
+  await http
+    .get(config.API.evaluationDetail())
+    .then((res) => {
+      const data = res.data.result;
+      formDetail.UserId = data.id;
+      formDetail.CitizenId = data.citizenId;
+      formDetail.Prefix = data.prefix;
+      formDetail.FullName = `${data.firstName}  ${data.lastName}`;
+      formDetail.Position = data.position;
+      formDetail.Oc = data.oc;
+      formDetail.Salary = data.salary;
+      formDetail.PositionLevel = data.positionLevel;
+      formDetail.PosNo = data.posNo;
+      formDetail.BirthDate = data.birthDate && date2Thai(data.birthDate);
+      formDetail.GovAge = data.govAge;
+      formDetail.Educations = data.educations;
+      formDetail.Certificates = data.certificates;
+      formDetail.Salaries = data.salaries;
+      formDetail.Trainings = data.trainings;
+      formDetail.Assessments = data.assessments;
+      // fromDetail.Type = data.
+      // fromDetail.Step = data.
+
+      emit("update:formDeital", data);
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+onMounted(async () => {
+  fetchDetail();
+});
 </script>
 
 <template>
@@ -27,7 +99,7 @@ const {
               <q-input
                 borderless
                 readonly
-                model-value="นาย"
+                :model-value="formDetail.Prefix"
                 label="คำนำหน้าชื่อ"
               ></q-input>
             </div>
@@ -35,14 +107,14 @@ const {
               <q-input
                 borderless
                 readonly
-                model-value="ธนพนธ์ แสงจันทร์"
+                :model-value="formDetail.FullName"
                 label="ชื่อ - นามสกุล"
               />
             </div>
             <div class="col-xs-6 col-sm-4 col-md-3">
               <q-input
                 borderless
-                model-value="19/03/44"
+                :model-value="formDetail.BirthDate"
                 readonly
                 label="วันเดือนปีเกิด"
               >
@@ -55,7 +127,7 @@ const {
               <q-input
                 borderless
                 readonly
-                model-value="ไม่มี"
+                :model-value="formDetail.Position"
                 label="ตำแหน่ง"
               />
             </div>
@@ -63,7 +135,7 @@ const {
               <q-input
                 borderless
                 readonly
-                model-value="กย.11"
+                :model-value="formDetail.PosNo"
                 label="ตำแหน่งเลขที่"
               />
             </div>
@@ -71,7 +143,7 @@ const {
               <q-input
                 borderless
                 readonly
-                model-value="หน่วยใหม่กับหน่วยเก่า"
+                :model-value="formDetail.Oc"
                 label="สังกัด"
               />
             </div>
@@ -79,7 +151,7 @@ const {
               <q-input
                 borderless
                 readonly
-                model-value="1,0000"
+                :model-value="formDetail.Salary"
                 label="เงินเดือน"
               />
             </div>
@@ -88,7 +160,7 @@ const {
               <q-input
                 borderless
                 readonly
-                model-value="ระดับปัจจุบัน"
+                :model-value="formDetail.PositionLevel"
                 label="ระดับปัจจุบัน"
               />
             </div>
@@ -97,7 +169,7 @@ const {
               <q-input
                 borderless
                 readonly
-                model-value="ระดับที่ประเมิน"
+                :model-value="formDetail.PositionLevel"
                 label="ระดับที่ประเมิน"
               />
             </div>
@@ -106,7 +178,7 @@ const {
               <q-input
                 borderless
                 readonly
-                model-value="1000 ปี"
+                :model-value="formDetail.GovAge"
                 label="อายุราชการ"
               />
             </div>
diff --git a/src/modules/06_evaluate/components/viewstep/viewStep3.vue b/src/modules/06_evaluate/components/viewstep/viewStep3.vue
index c83e2d6..57f7efb 100644
--- a/src/modules/06_evaluate/components/viewstep/viewStep3.vue
+++ b/src/modules/06_evaluate/components/viewstep/viewStep3.vue
@@ -2,6 +2,13 @@
 import ViewPDF from "@/modules/06_evaluate/components/viewstep/viewPDF.vue";
 
 import { useEvaluateStore } from "@/modules/06_evaluate/store";
+const props = defineProps({
+  pdfSrc: {
+    type: String,
+  },
+});
+
+
 
 const store = useEvaluateStore();
 </script>
@@ -9,24 +16,24 @@ const store = useEvaluateStore();
 <template>
   <q-tab-panels v-model="store.tabPanels" animated swipeable vertical>
     <q-tab-panel name="1">
-      <ViewPDF />
+      <ViewPDF :pdfSrc="props.pdfSrc" />
     </q-tab-panel>
 
     <q-tab-panel name="2">
-      <ViewPDF />
+      <ViewPDF :pdfSrc="props.pdfSrc" />
     </q-tab-panel>
 
     <q-tab-panel name="3">
-      <ViewPDF />
+      <ViewPDF :pdfSrc="props.pdfSrc" />
     </q-tab-panel>
     <q-tab-panel name="4">
-      <ViewPDF />
+      <ViewPDF :pdfSrc="props.pdfSrc" />
     </q-tab-panel>
     <q-tab-panel name="5">
-      <ViewPDF />
+      <ViewPDF :pdfSrc="props.pdfSrc" />
     </q-tab-panel>
     <q-tab-panel name="6">
-      <ViewPDF />
+      <ViewPDF :pdfSrc="props.pdfSrc" />
     </q-tab-panel>
   </q-tab-panels>
 </template>
diff --git a/src/modules/06_evaluate/store.ts b/src/modules/06_evaluate/store.ts
index fac1525..11efe15 100644
--- a/src/modules/06_evaluate/store.ts
+++ b/src/modules/06_evaluate/store.ts
@@ -4,7 +4,7 @@ import { ref } from "vue";
 export const useEvaluateStore = defineStore("evaluateStore", () => {
   const tabMenu = ref<string>("1");
   const showLoadStatus = ref<boolean>(false);
-  const step = ref<number>(0);
+  const step = ref<number>(1);
   const currentStep = ref<number>(1);
   const title = ref<string[]>([
     "ตรวจสอบคุณสมบัติ",
diff --git a/src/modules/06_evaluate/stores/evaluationFunction.ts b/src/modules/06_evaluate/stores/evaluationFunction.ts
index bc3f51b..d31d0c2 100644
--- a/src/modules/06_evaluate/stores/evaluationFunction.ts
+++ b/src/modules/06_evaluate/stores/evaluationFunction.ts
@@ -14,7 +14,7 @@ const { showLoader, hideLoader, messageError } = mixin;
 /** function เช็คการยื่นข้อประเมิน*/
 async function fetchCheckStatus() {
   store.showLoadStatus = false;
-  store.currentStep = 1;
+  //  = 1;
   showLoader();
   await http
     .get(config.API.evaluationCheckStatus())
@@ -41,27 +41,28 @@ async function fetchCheckStep(id: string) {
         const data = res.data.result;
 
         let step =
-          data.Step === "CHECK_SPEC"
+          data.step === "CHECK_SPEC"
             ? 1
-            : data.Step === "PREPARE_DOC_V1"
+            : data.step === "PREPARE_DOC_V1"
             ? 2
-            : data.Step === "CHECK_DOC_V1"
+            : data.step === "CHECK_DOC_V1"
             ? 3
-            : data.Step === "WAIT_CHECK_DOC_V1"
+            : data.step === "WAIT_CHECK_DOC_V1"
             ? 4
-            : data.Step === "ANNOUNCE_WEB"
+            : data.step === "ANNOUNCE_WEB"
             ? 5
-            : data.Step === "PREPARE_DOC_V2"
+            : data.step === "PREPARE_DOC_V2"
             ? 6
-            : data.Step === "CHECK_DOC_V2"
+            : data.step === "CHECK_DOC_V2"
             ? 7
-            : data.Step === "WAIT_CHECK_DOC_V2"
+            : data.step === "WAIT_CHECK_DOC_V2"
             ? 8
-            : data.Step === "DONE"
+            : data.step === "DONE"
             ? 9
             : 1;
-        store.currentStep = step;
-        store.step = step;
+
+        store.currentStep = 2;
+        store.step = 2;
       })
       .catch((err) => {
         messageError($q, err);
@@ -69,118 +70,45 @@ async function fetchCheckStep(id: string) {
       .finally(() => {
         store.showLoadStatus = true;
       });
-  } else (store.step = 1), (store.showLoadStatus = true);
+  } else
+    ((store.step = 1), (store.currentStep = 1)), (store.showLoadStatus = true);
 }
 
-async function saveEvaluation(body: any) {
-  const data = {
-    IsEducationalQft: body.isEducationalQft,
-    IsGovermantServiceHtr: body.isGovermantServiceHtr,
-    IsOperatingExp: body.isOperatingExp,
-    IsMinPeriodOfTenure: body.isMinPeriodOfTenure,
-    IsHaveSpecificQft: body.isHaveSpecificQft,
-    IsHaveProLicense: body.isHaveProLicense,
-    IsHaveMinPeriodOrHoldPos: body.isHaveMinPeriodOrHoldPos,
+async function saveEvaluation(formSpec: any, detail: any) {
+  const form = {
+    userId: detail.id,
+    citizenId: detail.citizenId,
+    prefix: detail.prefix,
+    fullName: `${detail.firstName}   ${detail.lastName}.`,
+    position: detail.position,
+    oc: detail.oc,
+    salary: detail.salary.toString(),
+    positionLevel: detail.positionLevel,
+    posNo: detail.posNo,
+    birthDate: detail.birthDate,
+    govAge: detail.govAge,
+    type: "",
+    step: "",
+    isEducationalQft: formSpec.isEducationalQft,
+    isGovermantServiceHtr: formSpec.isGovermantServiceHtr,
+    isOperatingExp: formSpec.isOperatingExp,
+    isMinPeriodOfTenure: formSpec.isMinPeriodOfTenure,
+    isHaveSpecificQft: formSpec.isHaveSpecificQft,
+    isHaveProLicense: formSpec.isHaveProLicense,
+    isHaveMinPeriodOrHoldPos: formSpec.isHaveMinPeriodOrHoldPos,
+    reason: "",
+    educations: [...detail.educations],
+    certificates: [...detail.certificates],
+    salaries: [],
+    trainings: [...detail.trainings],
+    assessments: [...detail.assessments],
   };
-  console.log(data);
 
-  //   const form = {
-  //     UserId: "08dbca3a-8b6a-4a4e-8b23-1f62e4f30ef6",
-  //     CitizenId: "1540200054020",
-  //     Prefix: "นางสาว",
-  //     FullName: "สาวิตรี ศรีสมัย",
-  //     Position: "นักทรัพยากรบุคคล",
-  //     Oc: "สำนักปลัดกรุงเทพมหานคร/สำนักงานการเจ้าหน้าที่",
-  //     Salary: "10000",
-  //     PositionLevel: "นักทรัพยากรบุคคล",
-  //     PosNo: "10",
-  //     BirthDate: "string",
-  //     GovAge: "string",
-  //     Type: "string",
-  //     Step: "string",
-  //     IsEducationalQft: true,
-  //     IsGovermantServiceHtr: true,
-  //     IsOperatingExp: true,
-  //     IsMinPeriodOfTenure: true,
-  //     IsHaveSpecificQft: true,
-  //     IsHaveProLicense: true,
-  //     IsHaveMinPeriodOrHoldPos: true,
-  //     Reason: "string",
-  //     Educations: [
-  //       {
-  //         EducationLevel: "string",
-  //         Institute: "string",
-  //         IsDate: true,
-  //         StartDate: "2023-12-19T03:20:04.460Z",
-  //         EndDate: "2023-12-19T03:20:04.460Z",
-  //         FinishDate: "2023-12-19T03:20:04.460Z",
-  //         IsEducation: true,
-  //         Degree: "string",
-  //         Field: "string",
-  //         FundName: "string",
-  //         Gpa: "string",
-  //         Country: "string",
-  //         Other: "string",
-  //         Duration: "string",
-  //         DurationYear: "string",
-  //       },
-  //     ],
-  //     Certificates: [
-  //       {
-  //         Step: "string",
-  //         CertificateType: "string",
-  //         Issuer: "string",
-  //         CertificateNo: "string",
-  //         IssueDate: "2023-12-19T03:20:04.460Z",
-  //         ExpireDate: "2023-12-19T03:20:04.460Z",
-  //       },
-  //     ],
-  //     Salaries: [
-  //       {
-  //         Step: "string",
-  //         Date: "2023-12-19T03:20:04.460Z",
-  //         Amount: 0,
-  //         PositionSalaryAmount: 0,
-  //         MouthSalaryAmount: 0,
-  //         Position: "string",
-  //         PosNo: "string",
-  //         SalaryClass: "string",
-  //         SalaryRef: "string",
-  //         RefCommandNo: "string",
-  //         RefCommandDate: "2023-12-19T03:20:04.460Z",
-  //         SalaryStatus: "string",
-  //       },
-  //     ],
-  //     Trainings: [
-  //       {
-  //         Name: "string",
-  //         Topic: "string",
-  //         StartDate: "2023-12-19T03:20:04.460Z",
-  //         EndDate: "2023-12-19T03:20:04.460Z",
-  //         Yearly: 0,
-  //         Place: "string",
-  //         Duration: "string",
-  //         Department: "string",
-  //         NumberOrder: "string",
-  //         DateOrder: "2023-12-19T03:20:04.460Z",
-  //       },
-  //     ],
-  //     Assessments: [
-  //       {
-  //         Date: "2023-12-19T03:20:04.460Z",
-  //         Point1Total: 0,
-  //         Point1: 0,
-  //         Point2Total: 0,
-  //         Point2: 0,
-  //         PointSumTotal: 0,
-  //         PointSum: 0,
-  //       },
-  //     ],
-  //   };
+  console.log(form);
 
   showLoader();
   await http
-    .post(config.API.evaluationCheckspec(), data)
+    .post(config.API.evaluationCheckspec(), form)
     .then((res) => {
       console.log(res);
     })
diff --git a/src/modules/06_evaluate/views/EvaluateMain.vue b/src/modules/06_evaluate/views/EvaluateMain.vue
index 2bd359d..f29e519 100644
--- a/src/modules/06_evaluate/views/EvaluateMain.vue
+++ b/src/modules/06_evaluate/views/EvaluateMain.vue
@@ -17,8 +17,6 @@ const router = useRouter();
 const $q = useQuasar();
 
 const { showLoader, hideLoader, messageError } = mixin;
-
-onMounted(async () => {});
 </script>
 <template>
   <div class="col-12 row justify-center">
@@ -57,7 +55,9 @@ onMounted(async () => {});
             </q-tabs>
             <q-separator />
             <q-tab-panels v-model="store.tabMenu" animated>
-              <q-tab-panel name="1"> <Tab1 :title="'ชำนาญการ'" /></q-tab-panel>
+              <q-tab-panel name="1">
+                <Tab1 :title="'ชำนาญการ'" />
+              </q-tab-panel>
 
               <q-tab-panel name="2">
                 <Tab1 :title="'ชำนาญการพิเศษ'"