diff --git a/src/api/12_evaluatePersonal/api.evaluate.ts b/src/api/12_evaluatePersonal/api.evaluate.ts
index bea7b6a23..b1da91002 100644
--- a/src/api/12_evaluatePersonal/api.evaluate.ts
+++ b/src/api/12_evaluatePersonal/api.evaluate.ts
@@ -1,7 +1,7 @@
 import env from "../index";
 const evaluateDirectorMain = `${env.API_URI}/evaluation/director`;
 const evaluation = `${env.API_URI}/evaluation`;
-
+const evaluationFile = `${env.API_URI}/evaluation/document`
 export default {
   evaluateDirectorMain: () => `${evaluateDirectorMain}`,
   evaluateDirectorById: (id: string) => `${evaluateDirectorMain}/${id}`,
@@ -10,4 +10,6 @@ export default {
     `${evaluation}?page=${page}&pageSize=${pageSize}&keyword=${keyword}`,
   meeting: () => `${evaluation}/meeting`,
   meetingById: (id: string) => `${evaluation}/meeting/${id}`,
+
+  evaluationFilebyId:(volume:string,id:string,file:string) => `${evaluationFile}/${volume}/${id}/${file}`
 };
diff --git a/src/modules/12_evaluatePersonal/components/Detail/step/step3.vue b/src/modules/12_evaluatePersonal/components/Detail/step/step3.vue
index c356bdbe1..275677ccf 100644
--- a/src/modules/12_evaluatePersonal/components/Detail/step/step3.vue
+++ b/src/modules/12_evaluatePersonal/components/Detail/step/step3.vue
@@ -1,19 +1,66 @@
 <script setup lang="ts">
-import { reactive, ref } from "vue";
-
+import { reactive, ref, watch, onMounted } from "vue";
+import { useQuasar } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
 import { useEvaluateDetailStore } from "@/modules/12_evaluatePersonal/store/EvaluateDetail";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useRouter, useRoute } from "vue-router";
 
+const router = useRouter();
+const route = useRoute();
+const $q = useQuasar();
+const id = ref<string>(route.params.id as string);
 const store = useEvaluateDetailStore();
 const mixin = useCounterMixin();
-const { date2Thai } = mixin;
+const { date2Thai, showLoader, hideLoader, messageError } = mixin;
 
 const selectedItem = ref(1);
 
 function handleItemClick(itemNumber: number) {
   store.tabPanels = itemNumber.toString();
   selectedItem.value = itemNumber;
+
+  getFile(itemNumber);
 }
+// evaluationFilebyId
+function getFile(volume: number) {
+  const fileText = numToThai(volume);
+  showLoader();
+  http.get(config.API.evaluationFilebyId("เล่ม 1", id.value, fileText))
+  .then((res)=>{
+    console.log(res)
+  })
+  .catch((e)=>{
+    messageError($q,e)
+  })
+  .finally(()=>{
+    hideLoader()
+  })
+}
+
+function numToThai(val: number) {
+  switch (val) {
+    case 1:
+      return "1-แบบพิจารณาคุณสมบัติบุคคล";
+    case 2:
+      return "2-แบบแสดงรายละเอียดการเสนอผลงาน";
+    case 3:
+      return "3-แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูล";
+    case 4:
+      return "4-แบบประเมินคุณลักษณะบุคคล";
+    case 5:
+      return "5-แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก";
+    case 6:
+      return "6-ผลงานที่จะส่งประเมิน";
+    default:
+      return "1-แบบพิจารณาคุณสมบัติบุคคล";
+  }
+}
+
+onMounted(() => {
+  getFile(1)
+});
 </script>
 
 <template>
@@ -44,7 +91,8 @@ function handleItemClick(itemNumber: number) {
       @click="handleItemClick(3)"
     >
       <q-item-section
-        >แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล (เอกสารแบบ ก.)</q-item-section
+        >แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล
+        (เอกสารแบบ ก.)</q-item-section
       >
     </q-item>
     <q-item
@@ -63,7 +111,9 @@ function handleItemClick(itemNumber: number) {
       active-class="text-primary"
       @click="handleItemClick(5)"
     >
-      <q-item-section> แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9) </q-item-section>
+      <q-item-section>
+        แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)
+      </q-item-section>
     </q-item>
     <q-item
       clickable
diff --git a/src/modules/12_evaluatePersonal/store/Evaluate.ts b/src/modules/12_evaluatePersonal/store/Evaluate.ts
index 0539bbdb0..dd3af536f 100644
--- a/src/modules/12_evaluatePersonal/store/Evaluate.ts
+++ b/src/modules/12_evaluatePersonal/store/Evaluate.ts
@@ -63,7 +63,7 @@ export const useEvalutuonStore = defineStore("EvalutuonStore", () => {
   function fetchData(data: any[]) {
     console.log(data);
     const dataList: any[] = data.map((data: any) => ({
-      id: data.id,
+      id: data.Id,
       citizanId: data.CitizenId,
       fullName: data.FullName,
       position: data.Position,
diff --git a/src/modules/12_evaluatePersonal/views/MainPage.vue b/src/modules/12_evaluatePersonal/views/MainPage.vue
index 51e8d9bac..14b6a1baf 100644
--- a/src/modules/12_evaluatePersonal/views/MainPage.vue
+++ b/src/modules/12_evaluatePersonal/views/MainPage.vue
@@ -68,7 +68,7 @@ function getList() {
     )
     .then((res) => {
       maxPage.value = Math.ceil(res.data.result.total / rowsPerPage.value);
-      const data = res.data.result;
+      const data = res.data.result.data;
       store.fetchData(data);
     })
     .catch((e) => {