diff --git a/src/api/12_evaluatePersonal/api.evaluate.ts b/src/api/12_evaluatePersonal/api.evaluate.ts
index 62bd3c98d..a81c62e8c 100644
--- a/src/api/12_evaluatePersonal/api.evaluate.ts
+++ b/src/api/12_evaluatePersonal/api.evaluate.ts
@@ -9,10 +9,10 @@ export default {
   evaluationMain: () => `${evaluation}`,
 
   evaluateGetDetail: (id: string) => `${evaluation}/admin/check-spec/${id}`,
-  evaluateGetReport: (id: string) => `${evaluation}/report/check-spec-report/${id}`,
+  evaluateGetReport: (id: string) =>
+    `${evaluation}/report/check-spec-report/${id}`,
   evaluateGetStep: (id: string) => `${evaluation}/check/admin/${id}`,
 
-  
   meeting: () => `${evaluation}/meeting`,
   meetingById: (id: string) => `${evaluation}/meeting/${id}`,
   meetingFilebyId: (volume: string, id: string) =>
@@ -28,6 +28,9 @@ export default {
   evaluationNext5To6: (id: string) => `${evaluation}/announce/${id}`,
   evaluationNextFinish: (id: string) => `${evaluation}/wait-check-doc-v2/${id}`,
 
+  evaluationAnnounceTemplete: (type: string, id: string) =>
+    `${evaluation}/${type}-announce-template/${id}`,
+
   evaluationHistory: (id: string) => `${evaluation}/step-history/${id}`,
 
   evaluationDateAnnounce: (id: string) =>
@@ -47,7 +50,8 @@ export default {
     `${evaluation}/choose-meetings/${id}`,
 
   evaluationListData: (id: string) => `${evaluation}/director-meeting/${id}`,
-  evaluationReport:`${evaluation}/report`,
+  evaluationReport: `${evaluation}/report`,
 
-  updateEvaluationResult:(id:string) =>`${evaluation}/updateEvaluationResult/${id}`
+  updateEvaluationResult: (id: string) =>
+    `${evaluation}/updateEvaluationResult/${id}`,
 };
diff --git a/src/modules/12_evaluatePersonal/components/Detail/step/step2.vue b/src/modules/12_evaluatePersonal/components/Detail/step/step2.vue
index 1ee96e01d..122218c2e 100644
--- a/src/modules/12_evaluatePersonal/components/Detail/step/step2.vue
+++ b/src/modules/12_evaluatePersonal/components/Detail/step/step2.vue
@@ -1,3 +1,4 @@
+div
 <script setup lang="ts">
 import { ref, reactive, onMounted } from "vue";
 import { useQuasar } from "quasar";
@@ -16,13 +17,19 @@ const { showLoader, hideLoader, messageError } = mixin;
 
 const id = ref<string>(route.params.id as string); //id ประเมิน
 /** ฟรอมจัดเตรียมเอกสารเล่ม 1*/
-const subject = ref<string>(""); //ชื่อผลงาน
+const subject = ref<string[]>([""]); //ชื่อผลงาน
 const author = ref<string>(""); //เจ้าของผลงาน
 const formCommand = reactive<FormCommand>({
   elementaryFullName: "", //ชื่อ-นามสกุลผู้บังคับบัญชาชั้นต้น
   elementaryPosition: "", //ตำแหน่งผู้บังคับบัญชาชั้นต้น
+  elementaryPositionOld: "", //ตำแหน่งเดิมผู้บังคับบัญชาชั้นต้น
+  elementaryOrg: "", //สังกัดผู้บังคับบัญชาชั้นต้น
+  elementaryOrgOld: "", //สังกัดเดิมผู้บังคับบัญชาชั้นต้น
   abovelevelFullname: "", //ชื่อ-นามสกุลผู้บังคับบัญชาเหนือขึ้นไป 1 ระดับ
   abovelevelPosition: "", //ตำแหน่งผู้บังคับบัญชาเหนือขึ้นไป 1 ระดับ
+  abovelevelPositionOld: "", //ตำแหน่งเดิมผู้บังคับบัญชาเหนือขึ้นไป 1 ระดับ
+  abovelevelOrg: "", //สังกัดผู้บังคับบัญชาเหนือขึ้นไป 1 ระดับ
+  abovelevelOrgOld: "", //สังกัดเดิมผู้บังคับบัญชาเหนือขึ้นไป 1 ระดับ
 });
 
 /**
@@ -35,26 +42,25 @@ async function fetchSigner() {
     .then((res) => {
       const data = res.data.result;
       if (data) {
-        formCommand.elementaryFullName =
-          data == null ? "" : data.commanderFullname;
-        formCommand.elementaryPosition =
-          data == null ? "" : data.commanderPosition;
-        formCommand.abovelevelFullname =
-          data == null ? "" : data.commanderAboveFullname;
-        formCommand.abovelevelPosition =
-          data == null ? "" : data.commanderAbovePosition;
+        formCommand.elementaryFullName = data.commanderFullname;
+        formCommand.elementaryPosition = data.commanderPosition;
+        formCommand.elementaryPositionOld = data.commanderPositionOld;
+        formCommand.elementaryOrg = data.commanderOrg;
+        formCommand.elementaryOrgOld = data.commanderOrgOld;
+        formCommand.abovelevelFullname = data.commanderAboveFullname;
+        formCommand.abovelevelPosition = data.commanderAbovePosition;
+        formCommand.abovelevelPositionOld = data.commanderAbovePositionOld;
+        formCommand.abovelevelOrg = data.commanderAboveOrg;
+        formCommand.abovelevelOrgOld = data.commanderAboveOrgOld;
         author.value = data.author;
         subject.value = data.subject;
       }
     })
     .catch((e) => {
-      // messageError($q, e);
       console.log(e);
     })
     .finally(() => {
-      setTimeout(() => {
-        hideLoader();
-      }, 1000);
+      hideLoader();
     });
 }
 
@@ -74,34 +80,32 @@ onMounted(async () => {
         <q-card bordered style="border: 1px solid #d6dee1">
           <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">ผลงาน</div>
           <div class="col-12"><q-separator /></div>
-          <div class="row">
-            <div class="col-12 q-pa-sm">
-              <div class="row q-col-gutter-sm col-12">
-                <div class="col-xs-12 col-sm-12 row">
-                  <div class="row col-12 q-col-gutter-sm">
-                    <q-input
-                      readonly
-                      dense
-                      class="col-xs-12 col-sm-6"
-                      outlined
-                      label="ชื่อผลงาน"
-                      v-model="subject"
-                      :rules="[(val:string) => !!val || `${'กรุณากรอกชื่อผลงาน'}`]"
-                      lazy-rules
-                      hide-bottom-space
-                    />
-                    <q-input
-                      readonly
-                      class="col-xs-12 col-sm-6"
-                      dense
-                      outlined
-                      v-model="author"
-                      label="เจ้าของผลงาน"
-                      :rules="[(val:string) => !!val || `${'กรุณากรอกเจ้าของผลงาน'}`]"
-                      lazy-rules
-                      hide-bottom-space
-                    />
-                  </div>
+
+          <div class="col-12 q-pa-sm">
+            <div class="row q-col-gutter-sm">
+              <div class="col-12">
+                <q-input
+                  readonly
+                  dense
+                  outlined
+                  v-model="author"
+                  label="เจ้าของผลงาน"
+                  lazy-rules
+                  hide-bottom-space
+                />
+              </div>
+              <div class="col-12" v-for="(item, index) in subject" :key="index">
+                <div class="row col-12 q-col-gutter-sm">
+                  <q-input
+                    readonly
+                    dense
+                    class="col-xs-12 col-sm-12"
+                    outlined
+                    label="ชื่อผลงาน"
+                    v-model="subject[index]"
+                    lazy-rules
+                    hide-bottom-space
+                  />
                 </div>
               </div>
             </div>
@@ -123,31 +127,63 @@ onMounted(async () => {
                   <div class="text-weight-medium q-py-xs q-pl-sm">
                     ผู้บังคับบัญชาชั้นต้น
                   </div>
+
                   <div class="row col-12 q-col-gutter-sm">
                     <q-input
                       readonly
-                      ref="elementaryFullNameRef"
                       dense
                       class="col-xs-12 col-sm-6"
                       outlined
-                      label="ชื่อ-นามสกุล"
                       v-model="formCommand.elementaryFullName"
-                      :rules="[(val:string) => !!val || `${'กรุณากรอกชื่อ-นามสกุล'}`]"
-                      lazy-rules
-                      hide-bottom-space
-                    />
-                    <q-input
-                      readonly
-                      ref="elementaryPositonRef"
-                      class="col-xs-12 col-sm-6"
-                      dense
-                      outlined
-                      v-model="formCommand.elementaryPosition"
-                      label="ตำแหน่ง"
-                      :rules="[(val:string) => !!val || `${'กรุณากรอกตำแหน่ง'}`]"
+                      label="ชื่อ-นามสกุล"
                       lazy-rules
                       hide-bottom-space
                     />
+
+                    <div class="col-12">
+                      <div class="row col-12 q-col-gutter-sm">
+                        <q-input
+                          readonly
+                          class="col-xs-6 col-sm-3"
+                          dense
+                          outlined
+                          v-model="formCommand.elementaryPosition"
+                          label="ตำแหน่ง"
+                          lazy-rules
+                          hide-bottom-space
+                        />
+                        <q-input
+                          readonly
+                          class="col-xs-6 col-sm-3"
+                          dense
+                          outlined
+                          v-model="formCommand.elementaryPositionOld"
+                          label="ตำแหน่งเดิม"
+                          lazy-rules
+                          hide-bottom-space
+                        />
+                        <q-input
+                          readonly
+                          class="col-xs-6 col-sm-3"
+                          dense
+                          outlined
+                          v-model="formCommand.elementaryOrg"
+                          label="สังกัด"
+                          lazy-rules
+                          hide-bottom-space
+                        />
+                        <q-input
+                          readonly
+                          class="col-xs-6 col-sm-3"
+                          dense
+                          outlined
+                          v-model="formCommand.elementaryOrgOld"
+                          label="สังกัดเดิม"
+                          lazy-rules
+                          hide-bottom-space
+                        />
+                      </div>
+                    </div>
                   </div>
                 </div>
               </div>
@@ -170,18 +206,50 @@ onMounted(async () => {
                       lazy-rules
                       hide-bottom-space
                     />
-                    <q-input
-                      ref="abovelevelPositionRef"
-                      class="col-xs-12 col-sm-6"
-                      dense
-                      readonly
-                      outlined
-                      v-model="formCommand.abovelevelPosition"
-                      label="ตำแหน่ง"
-                      :rules="[(val:string) => !!val || `${'กรุณากรอกตำแหน่ง'}`]"
-                      lazy-rules
-                      hide-bottom-space
-                    />
+                    <div class="col-12">
+                      <div class="row col-12 q-col-gutter-sm">
+                        <q-input
+                          readonly
+                          class="col-xs-6 col-sm-3"
+                          dense
+                          outlined
+                          v-model="formCommand.abovelevelPosition"
+                          label="ตำแหน่ง"
+                          lazy-rules
+                          hide-bottom-space
+                        />
+                        <q-input
+                          readonly
+                          class="col-xs-6 col-sm-3"
+                          dense
+                          outlined
+                          v-model="formCommand.abovelevelPositionOld"
+                          label="ตำแหน่งเดิม"
+                          lazy-rules
+                          hide-bottom-space
+                        />
+                        <q-input
+                          readonly
+                          class="col-xs-6 col-sm-3"
+                          dense
+                          outlined
+                          v-model="formCommand.abovelevelOrg"
+                          label="สังกัด"
+                          lazy-rules
+                          hide-bottom-space
+                        />
+                        <q-input
+                          readonly
+                          class="col-xs-6 col-sm-3"
+                          dense
+                          outlined
+                          v-model="formCommand.abovelevelOrgOld"
+                          label="สังกัดเดิม"
+                          lazy-rules
+                          hide-bottom-space
+                        />
+                      </div>
+                    </div>
                   </div>
                 </div>
               </div>
diff --git a/src/modules/12_evaluatePersonal/components/Detail/step/step3.vue b/src/modules/12_evaluatePersonal/components/Detail/step/step3.vue
index 4ffca732c..f061ad143 100644
--- a/src/modules/12_evaluatePersonal/components/Detail/step/step3.vue
+++ b/src/modules/12_evaluatePersonal/components/Detail/step/step3.vue
@@ -22,6 +22,25 @@ const { showLoader, hideLoader, messageError } = mixin;
 const id = ref<string>(route.params.id as string); //id ประเมิน
 const selectedItem = ref<number>(1); //ไฟล์ที่เลือก
 
+const formTemplates = ref([
+  {
+    title: "แบบพิจารณาคุณสมบัติบุคคล",
+    fileName: "1-แบบพิจารณาคุณสมบัติบุคคล",
+  },
+  {
+    title: "แบบแสดงรายละเอียดการเสนอผลงาน",
+    fileName: "2-แบบแสดงรายละเอียดการเสนอผลงาน",
+  },
+  {
+    title: "แบบประเมินคุณลักษณะบุคคล",
+    fileName: "4-แบบประเมินคุณลักษณะบุคคล",
+  },
+  {
+    title: "ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)",
+    fileName: "6-ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)",
+  },
+]);
+
 /**
  * funtion เลือกไฟล์
  * @param itemNumber indexItems
@@ -29,29 +48,30 @@ const selectedItem = ref<number>(1); //ไฟล์ที่เลือก
 function handleItemClick(itemNumber: number) {
   store.tabPanels = itemNumber.toString();
   selectedItem.value = itemNumber;
-  getFile(itemNumber);
+  store.pdfSrcStore = undefined;
+  fetchDocument(formTemplates.value[itemNumber - 1].fileName);
 }
 
 /**
- * function เรียกไฟล์
- * @param volume index item
+ * function เรีกยเอกสาร
+ * @param fileName ชื่อเอกสาร
  */
-async function getFile(volume: number) {
+async function fetchDocument(fileName: string) {
   showLoader();
-  const fileText = numToThai(volume);
-  await http
-    .get(config.API.evaluationFilebyId("เล่ม 1", id.value, fileText))
-    .then(async (res) => {
-      const link = res.data.downloadUrl;
-      const type = res.data.fileType;
-      await getPDF(link, type);
-    })
-    .catch((e) => {
-      messageError($q, e);
-      hideLoader();
-
-      store.pdfSrcStore = undefined;
-    });
+  id.value &&
+    (await http
+      .get(config.API.evaluationFilebyId("เล่ม 1", id.value, fileName))
+      .then(async (res) => {
+        const link = res.data.downloadUrl;
+        const type = res.data.fileType;
+        await getPDF(link, type);
+      })
+      .catch((err) => {
+        messageError($q, err);
+      })
+      .finally(() => {
+        hideLoader();
+      }));
 }
 
 /**
@@ -80,111 +100,33 @@ async function getPDF(url: string, type: string) {
         store.log = 1;
         store.pdfSrcStore = pdfData.pdf.value;
         store.numOfPagesStore = pdfData.pages.value;
-        hideLoader();
       }, 1500);
     })
-    .catch(() => {
-      hideLoader();
-    })
     .finally(() => {
+      hideLoader();
       store.log = 0;
     });
 }
 
-/**
- * function Convert ชื่อไฟล์
- * @param val indexItems
- */
-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-แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)";
-    case 6:
-      return "6-ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)";
-    default:
-      return "1-แบบพิจารณาคุณสมบัติบุคคล";
-  }
-}
-
+/** HooK lifecycle*/
 onMounted(async () => {
-  await getFile(selectedItem.value);
+  await fetchDocument(formTemplates.value[selectedItem.value - 1].fileName);
 });
 </script>
 
 <template>
-  <q-list separator dense>
+  <q-list separator>
     <q-item
+      v-for="(item, index) in formTemplates"
+      :key="index"
       clickable
       v-ripple
-      :active="selectedItem === 1 ? true : false"
+      :active="selectedItem === index + 1 ? true : false"
       active-class="text-primary"
-      @click="handleItemClick(1)"
+      @click="handleItemClick(index + 1)"
+      class="cursor-pointer"
     >
-      <q-item-section class="q-py-sm">แบบพิจารณาคุณสมบัติบุคคล</q-item-section>
-    </q-item>
-    <q-item
-      clickable
-      v-ripple
-      :active="selectedItem === 2 ? true : false"
-      active-class="text-primary"
-      @click="handleItemClick(2)"
-    >
-      <q-item-section class="q-py-sm"
-        >แบบแสดงรายละเอียดการเสนอผลงาน</q-item-section
-      >
-    </q-item>
-    <q-item
-      clickable
-      v-ripple
-      :active="selectedItem === 3 ? true : false"
-      active-class="text-primary"
-      @click="handleItemClick(3)"
-    >
-      <q-item-section class="q-py-sm"
-        >แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล
-        (เอกสารแบบ ก)</q-item-section
-      >
-    </q-item>
-    <q-item
-      clickable
-      v-ripple
-      :active="selectedItem === 4 ? true : false"
-      active-class="text-primary"
-      @click="handleItemClick(4)"
-    >
-      <q-item-section class="q-py-sm">
-        แบบประเมินคุณลักษณะบุคคล
-      </q-item-section>
-    </q-item>
-    <q-item
-      clickable
-      v-ripple
-      :active="selectedItem === 5 ? true : false"
-      active-class="text-primary"
-      @click="handleItemClick(5)"
-    >
-      <q-item-section class="q-py-sm">
-        แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)
-      </q-item-section>
-    </q-item>
-    <q-item
-      clickable
-      v-ripple
-      :active="selectedItem === 6 ? true : false"
-      active-class="text-primary"
-      @click="handleItemClick(6)"
-    >
-      <q-item-section class="q-py-sm">
-        ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)
-      </q-item-section>
+      <q-item-section>{{ item.title }}</q-item-section>
     </q-item>
   </q-list>
 </template>
diff --git a/src/modules/12_evaluatePersonal/components/Detail/step/step4.vue b/src/modules/12_evaluatePersonal/components/Detail/step/step4.vue
index dc1ad5ddc..d18a5ec92 100644
--- a/src/modules/12_evaluatePersonal/components/Detail/step/step4.vue
+++ b/src/modules/12_evaluatePersonal/components/Detail/step/step4.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted } from "vue";
+import { ref, onMounted, reactive } from "vue";
 import { useQuasar } from "quasar";
 
 import { useRoute } from "vue-router";
@@ -11,6 +11,8 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 import genReport from "@/plugins/genreport";
 
+import DialogHeader from "@/components/DialogHeader.vue";
+
 /** use*/
 const route = useRoute();
 const $q = useQuasar();
@@ -40,23 +42,23 @@ const files = [
     fileName: "แบบแสดงรายละเอียดการเสนอผลงาน",
     pathName: "2-แบบแสดงรายละเอียดการเสนอผลงาน",
   },
-  {
-    id: "file3",
-    fileName:
-      "แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล (เอกสารแบบ ก)",
-    pathName:
-      "3-แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล (เอกสารแบบ ก)",
-  },
+  // {
+  //   id: "file3",
+  //   fileName:
+  //     "แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล (เอกสารแบบ ก)",
+  //   pathName:
+  //     "3-แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล (เอกสารแบบ ก)",
+  // },
   {
     id: "file4",
     fileName: "แบบประเมินคุณลักษณะบุคคล",
     pathName: "4-แบบประเมินคุณลักษณะบุคคล",
   },
-  {
-    id: "file5",
-    fileName: "แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)",
-    pathName: "5-แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)",
-  },
+  // {
+  //   id: "file5",
+  //   fileName: "แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)",
+  //   pathName: "5-แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)",
+  // },
   {
     id: "file6",
     fileName: "ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)",
@@ -64,6 +66,72 @@ const files = [
   },
 ];
 
+const download10Url = ref<string>("");
+
+const modalTemplates = ref<boolean>(false);
+const formBodyTemplates = reactive({
+  detailFooter: "",
+  detailBody: "",
+});
+const formTemplates = ref<any[]>([
+  {
+    code: "EV1_005",
+    templateName: "template-1",
+    title: "แบบพิจารณาคุณสมบัติบุคคล (ฉบับแก้ไข)",
+    fileName: "1-แบบพิจารณาคุณสมบัติบุคคล (ฉบับแก้ไข)",
+    downloadFile: "",
+    fileType: "",
+  },
+  {
+    code: "EV1_006",
+    templateName: "template-2",
+    title: "แบบแสดงรายละเอียดการเสนอผลงาน (ฉบับแก้ไข)",
+    fileName: "2-แบบแสดงรายละเอียดการเสนอผลงาน (ฉบับแก้ไข)",
+    downloadFile: "",
+    fileType: "",
+  },
+  {
+    code: "EV1_008",
+    templateName: "template-4",
+    title: "แบบประเมินคุณลักษณะบุคคล (ฉบับแก้ไข)",
+    fileName: "4-แบบประเมินคุณลักษณะบุคคล (ฉบับแก้ไข)",
+    downloadFile: "",
+    fileType: "",
+  },
+  {
+    code: "EV1_010",
+    templateName: "template-6",
+    title: "ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11) (ฉบับแก้ไข)",
+    fileName: "6-ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11) (ฉบับแก้ไข)",
+    downloadFile: "",
+    fileType: "",
+  },
+]);
+
+const fileEvaluatioRef = ref<any>();
+const formEvaluation = ref<any[]>([
+  {
+    code: "EV1_007",
+    templateName: "template-3",
+    title:
+      "แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล(เอกสารแบบ ก)",
+    fileName:
+      "3-แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล (เอกสารแบบ ก)",
+    downloadFile: "",
+    fileType: "",
+    file: null,
+  },
+  {
+    code: "EV1_009",
+    templateName: "template-5",
+    title: "แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก(เอกสารหมายเลข 9)",
+    fileName: "5-แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)",
+    downloadFile: "",
+    fileType: "",
+    file: null,
+  },
+]);
+
 /**
  * function ดาวน์โหลดไฟล์ต้นแบบ
  */
@@ -83,12 +151,13 @@ async function onClickDowloadFile(
         data: data,
       };
       await genReport(body, fileName);
-      hideLoader();
     })
     .catch((e) => {
       messageError($q, e);
     })
-    .finally(() => {});
+    .finally(() => {
+      hideLoader();
+    });
 }
 
 /**
@@ -106,13 +175,15 @@ async function downloadFile(name: string) {
   showLoader();
   await http
     .get(config.API.evaluationFilebyId("เล่ม 1", id.value, name))
-    .then((res) => {
+    .then(async (res) => {
       const link = res.data.downloadUrl;
       const type = res.data.fileType;
       const fileName = res.data.fileName;
-      getPDF(link, type, fileName);
+      await getPDF(link, type, fileName);
+    })
+    .catch((err) => {
+      messageError($q, err);
     })
-    .catch((e) => {})
     .finally(() => {
       hideLoader();
     });
@@ -148,14 +219,26 @@ async function getPDF(url: string, type: string, fileName: string) {
 
 /** function ส่งไปประกาศบนเว็บไซต์ */
 function onWebSite() {
-  download10Url.value === ""
-    ? (fileEvaluationUpload.value = "")
-    : fileEvaluationUpload.value;
-  fileEvaluationUploadRef.value.validate();
-  if (
-    fileEvaluationUploadRef.value.hasError === false &&
-    download10Url.value !== ""
-  ) {
+  const downloadArray = [
+    download10Url.value,
+    formEvaluation.value[0].downloadFile,
+    formEvaluation.value[1].downloadFile,
+  ];
+
+  if (downloadArray.some((e: any) => e === "")) {
+    for (let i = 0; i < downloadArray.length; i++) {
+      if (downloadArray[i] === "") {
+        if (i == 0) {
+          fileEvaluationUploadRef.value.validate();
+          fileEvaluationUpload.value = null;
+        } else {
+          fileEvaluatioRef.value[0].validate();
+          fileEvaluatioRef.value[1].validate();
+          formEvaluation.value[i - 1].file = null;
+        }
+      }
+    }
+  } else {
     dialogConfirm(
       $q,
       () => {
@@ -164,16 +247,48 @@ function onWebSite() {
           .put(config.API.evaluationApproveDoc1(id.value))
           .then(() => {
             success($q, "ส่งไปประกาศบนเว็บไซต์สำเร็จ");
-          })
-          .catch(() => {})
-          .finally(() => {
             getStep();
+          })
+          .catch((err) => {
+            messageError($q, err);
+          })
+          .finally(() => {
+            hideLoader();
           });
       },
       "ยืนยันการส่งไปประกาศบนเว็บไซต์",
       "ยืนยันการส่งไปประกาศบนเว็บไซต์ใช่หรือไม่?"
     );
   }
+
+  // download10Url.value === ""
+  //   ? (fileEvaluationUpload.value = "")
+  //   : fileEvaluationUpload.value;
+
+  // fileEvaluatioRef.value[0].validate();
+  // fileEvaluatioRef.value[1].validate();
+  // if (
+  //   fileEvaluationUploadRef.value.hasError === false &&
+  //   download10Url.value !== ""
+  // ) {
+  //   dialogConfirm(
+  //     $q,
+  //     () => {
+  //       showLoader();
+  //       http
+  //         .put(config.API.evaluationApproveDoc1(id.value))
+  //         .then(() => {
+  //           success($q, "ส่งไปประกาศบนเว็บไซต์สำเร็จ");
+  //         })
+  //         .catch(() => {})
+  //         .finally(() => {
+  //           getStep();
+  //         });
+  //     },
+  //     "ยืนยันการส่งไปประกาศบนเว็บไซต์",
+  //     "ยืนยันการส่งไปประกาศบนเว็บไซต์ใช่หรือไม่?"
+  //   );
+  // }
 }
 
 /** function เช็คขั้นตอน*/
@@ -220,13 +335,13 @@ async function getStep() {
  * function เรียก link อัปโหลด
  * @param file ไฟล์
  */
-async function upLoadFile(file: any) {
+async function upLoadFile(file: any, fileName: string) {
   if (file) {
     showLoader();
     await http
       .post(config.API.evaluationFileListbyId("เล่ม 1", id.value), {
         fileList: {
-          fileName: "10-ประกาศผลการคัดเลือกบุคคล (เอกสารหมายเลข 10)",
+          fileName: fileName,
           metadata: {
             tag: "value",
             subject: subject.value,
@@ -241,7 +356,8 @@ async function upLoadFile(file: any) {
             res.data[key]?.fileName !== ""
         );
         const link = res.data[foundKey]?.uploadUrl;
-        await fileUpLoad(link);
+        await uploadfile(link, file);
+        await fetchCheckFile(fileName);
       })
       .catch((e) => {
         messageError($q, e);
@@ -253,31 +369,26 @@ async function upLoadFile(file: any) {
 }
 
 /**
- * function อัปโหลดไฟล์
- * @param url link อัปโหลด
+ *  functoin อัปโหลดไฟล์
+ * @param uploadUrl  link อัปโหลด
+ * @param file  ไฟล์
  */
-async function fileUpLoad(url: string) {
-  showLoader();
-  axios
-    .put(url, fileEvaluationUpload.value, {
-      headers: { "Content-Type": fileEvaluationUpload.value?.type },
-      onUploadProgress: (e) => console.log(e),
+async function uploadfile(uploadUrl: string, file: any) {
+  await axios
+    .put(uploadUrl, file, {
+      headers: {
+        "Content-Type": file.type,
+      },
     })
-    .then(async () => {
-      await checkDoc10();
-      success($q, "อัปโหลดไฟล์สำเร็จ");
+    .then(() => {
+      success($q, "อัปโหลไฟล์สำเร็จ");
     })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
+    .catch((err) => {
+      messageError($q, err);
     });
 }
 
-/**
- *  fiunction ส่งข้อความ
- */
+/**  fiunction ส่งข้อความ*/
 async function sentMessenger() {
   myForm.value.validate().then(async (result: boolean) => {
     if (result) {
@@ -303,33 +414,8 @@ async function sentMessenger() {
   });
 }
 
-const download10Url = ref<string>("");
-/**
- *  function เช็คไฟล์อัปโหลด
- */
-async function checkDoc10() {
-  showLoader();
-  await http
-    .get(
-      config.API.evaluationPatchData(
-        "เล่ม 1",
-        id.value,
-        "10-ประกาศผลการคัดเลือกบุคคล (เอกสารหมายเลข 10)"
-      )
-    )
-    .then(async (res) => {
-      download10Url.value = await res.data.downloadUrl;
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
-/**
- * function เรียกข้อมูลผลงาน
- */
+/** function เรียกข้อมูลผลงาน*/
 async function fetchDataSigner() {
-  showLoader();
   await http
     .get(config.API.evaluationSigner(id.value, 1))
     .then((res) => {
@@ -339,16 +425,100 @@ async function fetchDataSigner() {
     })
     .catch((e) => {
       messageError($q, e);
-    })
-    .finally(() => {
-      setTimeout(() => {
-        hideLoader();
-      }, 1500);
     });
 }
 
+/**
+ * function ดาวน์โหลดไฟล์
+ * @param fileName ชื่อไฟล์
+ */
+async function fetchCheckFile(fileName: string) {
+  await http
+    .get(config.API.evaluationPatchData("เล่ม 1", id.value, fileName))
+    .then((res) => {
+      const index = formTemplates.value.findIndex(
+        (item) => item.fileName === fileName
+      );
+      if (index !== -1) {
+        formTemplates.value[index].downloadFile = res.data.downloadUrl;
+        formTemplates.value[index].fileType = res.data.fileType;
+      }
+
+      const index2 = formEvaluation.value.findIndex(
+        (item) => item.fileName === fileName
+      );
+      if (index2 !== -1) {
+        formEvaluation.value[index2].downloadFile = res.data.downloadUrl;
+      }
+
+      if (fileName === "10-ประกาศผลการคัดเลือกบุคคล (เอกสารหมายเลข 10)") {
+        download10Url.value = res.data.downloadUrl;
+      }
+    });
+}
+
+function onOpenDialogTemplates() {
+  modalTemplates.value = true;
+  fetchDataAnnounceTemplete();
+}
+
+async function fetchDataAnnounceTemplete() {
+  showLoader();
+  await http
+    .get(config.API.evaluationAnnounceTemplete("get", id.value))
+    .then((res) => {
+      const data = res.data.result;
+      formBodyTemplates.detailBody = data.detailAnnounceStep5Body;
+      formBodyTemplates.detailFooter = data.detailAnnounceStep5Footer;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+function onSubmitBodyTemplates() {
+  dialogConfirm($q, async () => {
+    showLoader();
+    await http
+      .put(
+        config.API.evaluationAnnounceTemplete("edit", id.value),
+        formBodyTemplates
+      )
+      .then(() => {
+        success($q, "บันทึกข้อมูลสำเร็จ");
+        modalTemplates.value = false;
+      })
+      .catch((err) => {
+        messageError($q, err);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  });
+}
+
 onMounted(async () => {
-  await Promise.all([checkDoc10(), fetchDataSigner()]);
+  try {
+    showLoader();
+    await Promise.all([
+      fetchDataSigner(),
+      formTemplates.value.forEach((e) => {
+        fetchCheckFile(e.fileName);
+      }),
+      formEvaluation.value.forEach((e) => {
+        fetchCheckFile(e.fileName);
+      }),
+
+      fetchCheckFile("10-ประกาศผลการคัดเลือกบุคคล (เอกสารหมายเลข 10)"),
+    ]);
+  } catch (error) {
+    console.log(error);
+  } finally {
+    hideLoader();
+  }
 });
 </script>
 
@@ -394,6 +564,124 @@ onMounted(async () => {
       </q-card>
     </div>
 
+    <!-- เอกสารเล่มที่ 1 (ฉบับแก้ไข)-->
+    <div
+      class="col-12"
+      v-if="formTemplates.some((e:any) => e.downloadFile !== '')"
+    >
+      <q-card bordered style="border: 1px solid #d6dee1">
+        <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
+          เอกสารเล่มที่ 1 (ฉบับแก้ไข)
+        </div>
+        <div class="col-12"><q-separator /></div>
+
+        <q-list v-for="file in formTemplates" :key="file.id" class="full-width">
+          <q-item clickable v-ripple v-if="file.downloadFile !== ''">
+            <q-item-section class="text-grey-9">
+              {{ file.title }}
+            </q-item-section>
+            <q-item-section avatar>
+              <div class="row">
+                <div>
+                  <q-btn
+                    dense
+                    flat
+                    round
+                    size="12px"
+                    color="blue"
+                    icon="mdi-download"
+                    @click="getPDF(file.downloadFile, file.type, file.fileName)"
+                  >
+                    <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
+                  </q-btn>
+                </div>
+              </div>
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </q-card>
+    </div>
+
+    <div
+      class="col-6"
+      v-if="store.currentStep === 4"
+      v-for="(item, index) in formEvaluation"
+      :key="index"
+    >
+      <q-card bordered class="cardSp1">
+        <div
+          class="text-weight-medium bg-grey-1 q-py-sm q-pl-md q-pr-sm col-12 row items-center"
+        >
+          <div>{{ item.title }}</div>
+          <q-space />
+          <div>
+            <q-btn
+              flat
+              dense
+              icon="download"
+              color="indigo"
+              @click="
+                onClickDowloadFile(item.code, item.templateName, item.title)
+              "
+            >
+              <q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
+            >
+          </div>
+          <div>
+            <q-btn
+              v-if="item.downloadFile != ''"
+              :href="item.downloadFile"
+              target="_blank"
+              class="q-ml-sm"
+              color="blue"
+              flat
+              dense
+              icon="visibility"
+            >
+              <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
+            >
+          </div>
+        </div>
+        <div class="col-12"><q-separator /></div>
+        <div class="row">
+          <div class="col-12 q-pa-sm">
+            <div class="row q-col-gutter-md col-12">
+              <q-file
+                ref="fileEvaluatioRef"
+                v-model="item.file"
+                class="col-xs-12 col-sm-12"
+                label="อัปโหลดไฟล์"
+                outlined
+                dense
+                lazy-rules
+                hide-bottom-space
+                accept=".pdf"
+                :rules="
+                item.downloadFile === '' ? [(val:string) => !!val || 'กรุณาเลือกไฟล์'] : []
+              "
+              >
+                <template v-slot:prepend>
+                  <q-icon name="attach_file" />
+                </template>
+                <template v-slot:after>
+                  <q-btn
+                    flat
+                    round
+                    dense
+                    color="primary"
+                    icon="mdi-upload"
+                    @click="upLoadFile(item.file, item.fileName)"
+                  >
+                    <q-tooltip>อัปโหลดไฟล์</q-tooltip>
+                  </q-btn>
+                </template>
+              </q-file>
+            </div>
+          </div>
+        </div>
+      </q-card>
+    </div>
+
     <!-- ประกาศผลการคัดเลือกบุคคล (เอกสารหมายเลข 10) -->
     <div class="col-12" v-if="store.currentStep == 4">
       <q-card bordered style="border: 1px solid #d6dee1">
@@ -401,6 +689,17 @@ onMounted(async () => {
           class="text-weight-medium row col-12 bg-grey-1 q-py-sm q-px-md items-center"
         >
           <div>ประกาศผลการคัดเลือกบุคคล (เอกสารหมายเลข 10)</div>
+
+          <q-btn
+            flat
+            dense
+            round
+            color="edit"
+            icon="edit"
+            @click="onOpenDialogTemplates"
+          >
+            <q-tooltip>แก้ไขประกาศ</q-tooltip>
+          </q-btn>
           <q-space />
           <div>
             <q-btn
@@ -468,7 +767,12 @@ onMounted(async () => {
                   dense
                   color="primary"
                   icon="mdi-upload "
-                  @click="upLoadFile(fileEvaluationUpload)"
+                  @click="
+                    upLoadFile(
+                      fileEvaluationUpload,
+                      '10-ประกาศผลการคัดเลือกบุคคล (เอกสารหมายเลข 10)'
+                    )
+                  "
                   ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
                 >
               </template>
@@ -498,22 +802,15 @@ onMounted(async () => {
   <!--  popup ติดต่อผู้ขอประเมิน -->
   <q-dialog v-model="modalEvaluation" persistent>
     <q-card style="min-width: 60vw">
-      <q-toolbar>
-        <q-toolbar-title class="text-subtitle2 text-bold">
-          ติดต่อผู้ขอประเมิน
-        </q-toolbar-title>
-        <q-btn
-          icon="close"
-          unelevated
-          round
-          dense
-          @click="modalEvaluation = false"
-          style="color: #ff8080; background-color: #ffdede"
+      <q-form ref="myForm">
+        <DialogHeader
+          tittle="ติดต่อผู้ขอประเมิน"
+          :close="
+            () => ((modalEvaluation = false), (title = ''), (messenger = ''))
+          "
         />
-      </q-toolbar>
-      <q-separator />
-      <q-card-section class="q-pa-md bg-grey-1">
-        <q-form ref="myForm">
+        <q-separator />
+        <q-card-section class="q-pa-md bg-grey-1">
           <div class="row q-col-gutter-sm">
             <div class="col-12">
               <q-input
@@ -537,21 +834,69 @@ onMounted(async () => {
               />
             </div>
           </div>
-        </q-form>
-      </q-card-section>
-      <q-separator />
+        </q-card-section>
+        <q-separator />
 
-      <div class="row justify-end q-px-md q-py-sm items-center">
-        <q-btn
-          dense
-          color="public"
-          id="onSubmit"
-          class="q-px-md q-py-xs"
-          label="ส่งข้อความ"
-          @click="sentMessenger"
-        >
-        </q-btn>
-      </div>
+        <div class="row justify-end q-px-md q-py-sm items-center">
+          <q-btn
+            dense
+            color="public"
+            id="onSubmit"
+            class="q-px-md q-py-xs"
+            label="ส่งข้อความ"
+            @click="sentMessenger"
+          >
+          </q-btn>
+        </div>
+      </q-form>
+    </q-card>
+  </q-dialog>
+
+  <!--  popup แก้ไขประกาศ -->
+  <q-dialog v-model="modalTemplates" persistent>
+    <q-card style="min-width: 60vw">
+      <q-form
+        greedy
+        @submit.prevent
+        @validation-success="onSubmitBodyTemplates"
+      >
+        <DialogHeader
+          tittle="แก้ไขประกาศ"
+          :close="() => (modalTemplates = false)"
+        />
+        <q-separator />
+        <q-card-section class="q-pa-md bg-grey-1">
+          <div class="row q-col-gutter-sm">
+            <div class="col-12">
+              <q-input
+                v-model="formBodyTemplates.detailBody"
+                label="เนื้อหาประกาศผลการคัดเลือกบุคคลส่วนที่ 1"
+                type="textarea"
+                outlined
+                dense
+                bg-color="white"
+              />
+            </div>
+            <div class="col-12">
+              <q-input
+                v-model="formBodyTemplates.detailFooter"
+                label="เนื้อหาประกาศผลการคัดเลือกบุคคลส่วนที่ 2"
+                type="textarea"
+                outlined
+                dense
+                bg-color="white"
+              />
+            </div>
+          </div>
+        </q-card-section>
+        <q-separator />
+
+        <q-card-actions align="right">
+          <q-btn type="submit" color="public" label="บันทึก">
+            <q-tooltip>บันทึกข้อมูล</q-tooltip>
+          </q-btn>
+        </q-card-actions>
+      </q-form>
     </q-card>
   </q-dialog>
 </template>
diff --git a/src/modules/12_evaluatePersonal/components/Detail/step/step6.vue b/src/modules/12_evaluatePersonal/components/Detail/step/step6.vue
index 4f69df166..29227328f 100644
--- a/src/modules/12_evaluatePersonal/components/Detail/step/step6.vue
+++ b/src/modules/12_evaluatePersonal/components/Detail/step/step6.vue
@@ -21,19 +21,22 @@ const id = ref<string>(route.params.id as string); //id ประเมิน
 const formCommand = reactive<FormCommand>({
   elementaryFullName: "", //ชื่อ-นามสกุลผู้บังคับบัญชาชั้นต้น
   elementaryPosition: "", //ตำแหน่งผู้บังคับบัญชาชั้นต้น
+  elementaryPositionOld: "", //ตำแหน่งเดิมผู้บังคับบัญชาชั้นต้น
+  elementaryOrg: "", //สังกัดผู้บังคับบัญชาชั้นต้น
+  elementaryOrgOld: "", //สังกัดเดิมผู้บังคับบัญชาชั้นต้น
   abovelevelFullname: "", //ชื่อ-นามสกุลผู้บังคับบัญชาเหนือขึ้นไป 1 ระดับ
   abovelevelPosition: "", //ตำแหน่งผู้บังคับบัญชาเหนือขึ้นไป 1 ระดับ
+  abovelevelPositionOld: "", //ตำแหน่งเดิมผู้บังคับบัญชาเหนือขึ้นไป 1 ระดับ
+  abovelevelOrg: "", //สังกัดผู้บังคับบัญชาเหนือขึ้นไป 1 ระดับ
+  abovelevelOrgOld: "", //สังกัดเดิมผู้บังคับบัญชาเหนือขึ้นไป 1 ระดับ
 });
 const author = ref<string>(""); //เจ้าของผลงาน
-const subject = ref<string>(""); //ชื่อผลงาน
+const subject = ref<string[]>([""]); //ชื่อผลงาน
 const assignedPosition = ref<string>(""); //ตำแหน่งที่ได้รับ
 const dateEndPrepareDoc2 = ref<string | null>(); //วันสุดท้ายของการส่งผลงาน
 
-/**
- * function เรียกข้อมูลวันที่ประกาศ
- */
+/** function เรียกข้อมูลวันที่ประกาศ*/
 async function getDate() {
-  showLoader();
   await http
     .get(config.API.evaluationDateAnnounce(id.value))
     .then((res) => {
@@ -44,11 +47,6 @@ async function getDate() {
     })
     .catch((e) => {
       messageError($q, e);
-    })
-    .finally(() => {
-      setTimeout(() => {
-        hideLoader();
-      }, 1500);
     });
 }
 
@@ -56,7 +54,6 @@ async function getDate() {
  * function เรียกข้อมูลผลงาน
  */
 async function getSigner() {
-  showLoader();
   await http
     .get(config.API.evaluationSigner(id.value, 2))
     .then((res) => {
@@ -64,8 +61,14 @@ async function getSigner() {
       if (data) {
         formCommand.elementaryFullName = data.commanderFullnameDoc2;
         formCommand.elementaryPosition = data.commanderPositionDoc2;
+        formCommand.elementaryPositionOld = data.commanderPositionOldDoc2;
+        formCommand.elementaryOrg = data.commanderOrgDoc2;
+        formCommand.elementaryOrgOld = data.commanderOrgOldDoc2;
         formCommand.abovelevelFullname = data.commanderAboveFullnameDoc2;
         formCommand.abovelevelPosition = data.commanderAbovePositionDoc2;
+        formCommand.abovelevelPositionOld = data.commanderAbovePositionOldDoc2;
+        formCommand.abovelevelOrg = data.commanderAboveOrgDoc2;
+        formCommand.abovelevelOrgOld = data.commanderAboveOrgOldDoc2;
         author.value = data.authorDoc2;
         subject.value = data.subjectDoc2;
         assignedPosition.value = data.assignedPosition;
@@ -73,16 +76,18 @@ async function getSigner() {
     })
     .catch((e) => {
       messageError($q, e);
-    })
-    .finally(() => {
-      setTimeout(() => {
-        hideLoader();
-      }, 1500);
     });
 }
 
 onMounted(async () => {
-  await Promise.all([getSigner(), getDate()]);
+  try {
+    showLoader();
+    await Promise.all([getSigner(), getDate()]);
+  } catch (error) {
+    console.log(error);
+  } finally {
+    hideLoader();
+  }
 });
 </script>
 
@@ -104,47 +109,47 @@ onMounted(async () => {
       <q-card bordered style="border: 1px solid #d6dee1">
         <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">ผลงาน</div>
         <div class="col-12"><q-separator /></div>
-        <div class="row">
-          <div class="col-12 q-pa-sm">
-            <div class="row q-col-gutter-sm col-12">
-              <div class="col-xs-12 col-sm-12 row">
-                <div class="row col-12 q-col-gutter-sm">
-                  <q-input
-                    readonly
-                    dense
-                    class="col-xs-12 col-sm-6"
-                    outlined
-                    label="ชื่อผลงาน"
-                    v-model="subject"
-                    :rules="[(val:string) => !!val || `${'กรุณากรอกชื่อผลงาน'}`]"
-                    lazy-rules
-                    hide-bottom-space
-                  />
-                  <q-input
-                    readonly
-                    class="col-xs-12 col-sm-6"
-                    dense
-                    outlined
-                    v-model="author"
-                    label="เจ้าของผลงาน"
-                    :rules="[(val:string) => !!val || `${'กรุณากรอกเจ้าของผลงาน'}`]"
-                    lazy-rules
-                    hide-bottom-space
-                  />
-                  <q-input
-                    readonly
-                    class="col-xs-12 col-sm-6"
-                    dense
-                    outlined
-                    v-model="assignedPosition"
-                    label="ตำแหน่งที่ได้รับ"
-                    :rules="[
-                      (val:string) => !!val || `${'กรุณากรอกตำแหน่งที่ได้รับ'}`,
-                    ]"
-                    lazy-rules
-                    hide-bottom-space
-                  />
-                </div>
+
+        <div class="col-12 q-pa-sm">
+          <div class="row q-col-gutter-sm">
+            <div class="col-12 row q-col-gutter-sm">
+              <q-input
+                readonly
+                class="col-xs-12 col-sm-6"
+                dense
+                outlined
+                v-model="author"
+                label="เจ้าของผลงาน"
+                lazy-rules
+                hide-bottom-space
+              />
+              <q-input
+                readonly
+                class="col-xs-12 col-sm-6"
+                dense
+                outlined
+                v-model="assignedPosition"
+                label="ตำแหน่งที่ได้รับ"
+                lazy-rules
+                hide-bottom-space
+              />
+            </div>
+
+            <div
+              class="row col-12 q-col-gutter-sm"
+              v-for="(item, index) in subject"
+              :key="index"
+            >
+              <div class="col-12">
+                <q-input
+                  readonly
+                  dense
+                  outlined
+                  label="ชื่อผลงาน"
+                  v-model="subject[index]"
+                  hide-bottom-space
+                  lazy-rules
+                />
               </div>
             </div>
           </div>
@@ -159,48 +164,81 @@ onMounted(async () => {
           เลือกผู้เซ็นเอกสาร
         </div>
         <div class="col-12"><q-separator /></div>
-        <div class="row">
-          <div class="col-12 q-pa-sm">
-            <div class="row q-col-gutter-sm col-12">
+        <div class="col-12 q-pa-sm">
+          <div class="row q-col-gutter-sm">
+            <div class="col-xs-12 col-sm-12 row">
               <div class="col-xs-12 col-sm-12 row">
                 <div class="text-weight-medium q-pl-sm q-py-sm">
                   ผู้บังคับบัญชาชั้นต้น
                 </div>
-                <div class="row col-12 q-col-gutter-sm">
+                <div class="row col-12 q-col-gutter-sm q-pa-sm">
                   <q-input
                     readonly
-                    ref="elementaryFullNameRef"
                     dense
                     class="col-xs-12 col-sm-6"
                     outlined
                     label="ชื่อ-นามสกุล"
                     v-model="formCommand.elementaryFullName"
-                    :rules="[(val:string) => !!val || `${'กรุณากรอกชื่อ-นามสกุล'}`]"
-                    lazy-rules
-                    hide-bottom-space
-                  />
-                  <q-input
-                    readonly
-                    ref="elementaryPositonRef"
-                    class="col-xs-12 col-sm-6"
-                    dense
-                    outlined
-                    v-model="formCommand.elementaryPosition"
-                    label="ตำแหน่ง"
-                    :rules="[(val:string) => !!val || `${'กรุณากรอกตำแหน่ง'}`]"
                     lazy-rules
                     hide-bottom-space
                   />
+                  <div class="col-12">
+                    <div class="row col-12 q-col-gutter-sm">
+                      <q-input
+                        readonly
+                        class="col-xs-6 col-sm-3"
+                        dense
+                        outlined
+                        v-model="formCommand.elementaryPosition"
+                        label="ตำแหน่ง"
+                        lazy-rules
+                        hide-bottom-space
+                      />
+
+                      <q-input
+                        readonly
+                        class="col-xs-6 col-sm-3"
+                        dense
+                        outlined
+                        v-model="formCommand.elementaryPositionOld"
+                        label="ตำแหน่งเดิม"
+                        :rules="[(val:string) => !!val || `${'กรุณากรอกตำแหน่งเดิม'}`]"
+                        lazy-rules
+                        hide-bottom-space
+                      />
+
+                      <q-input
+                        readonly
+                        class="col-xs-6 col-sm-3"
+                        dense
+                        outlined
+                        v-model="formCommand.elementaryOrg"
+                        label="สังกัด"
+                        lazy-rules
+                        hide-bottom-space
+                      />
+                      <q-input
+                        readonly
+                        class="col-xs-6 col-sm-3"
+                        dense
+                        outlined
+                        v-model="formCommand.elementaryOrgOld"
+                        label="สังกัดเดิม"
+                        lazy-rules
+                        hide-bottom-space
+                      />
+                    </div>
+                  </div>
                 </div>
               </div>
             </div>
 
-            <div class="row q-col-gutter-sm col-12">
+            <div class="row q-col-gutter-sm">
               <div class="col-xs-12 col-sm-12 row">
                 <div class="text-weight-medium q-pl-sm q-pt-md q-mb-xs">
                   ผู้บังคับบัญชาเหนือขึ้นไป 1 ระดับ
                 </div>
-                <div class="row col-12 q-col-gutter-sm">
+                <div class="row col-12 q-col-gutter-sm q-pa-sm">
                   <q-input
                     readonly
                     ref="abovelevelFullnameRef"
@@ -213,18 +251,54 @@ onMounted(async () => {
                     lazy-rules
                     hide-bottom-space
                   />
-                  <q-input
-                    ref="abovelevelPositionRef"
-                    class="col-xs-12 col-sm-6"
-                    dense
-                    readonly
-                    outlined
-                    v-model="formCommand.abovelevelPosition"
-                    label="ตำแหน่ง"
-                    :rules="[(val:string) => !!val || `${'กรุณากรอกตำแหน่ง'}`]"
-                    lazy-rules
-                    hide-bottom-space
-                  />
+
+                  <div class="col-12">
+                    <div class="row col-12 q-col-gutter-sm">
+                      <q-input
+                        readonly
+                        class="col-xs-6 col-sm-3"
+                        dense
+                        outlined
+                        v-model="formCommand.abovelevelPosition"
+                        label="ตำแหน่ง"
+                        lazy-rules
+                        hide-bottom-space
+                      />
+
+                      <q-input
+                        readonly
+                        class="col-xs-6 col-sm-3"
+                        dense
+                        outlined
+                        v-model="formCommand.abovelevelPositionOld"
+                        label="ตำแหน่งเดิม"
+                        :rules="[(val:string) => !!val || `${'กรุณากรอกตำแหน่งเดิม'}`]"
+                        lazy-rules
+                        hide-bottom-space
+                      />
+
+                      <q-input
+                        readonly
+                        class="col-xs-6 col-sm-3"
+                        dense
+                        outlined
+                        v-model="formCommand.abovelevelOrg"
+                        label="สังกัด"
+                        lazy-rules
+                        hide-bottom-space
+                      />
+                      <q-input
+                        readonly
+                        class="col-xs-6 col-sm-3"
+                        dense
+                        outlined
+                        v-model="formCommand.abovelevelOrgOld"
+                        label="สังกัดเดิม"
+                        lazy-rules
+                        hide-bottom-space
+                      />
+                    </div>
+                  </div>
                 </div>
               </div>
             </div>
diff --git a/src/modules/12_evaluatePersonal/components/Detail/step/step7.vue b/src/modules/12_evaluatePersonal/components/Detail/step/step7.vue
index 2f40443f1..cae9a2c2b 100644
--- a/src/modules/12_evaluatePersonal/components/Detail/step/step7.vue
+++ b/src/modules/12_evaluatePersonal/components/Detail/step/step7.vue
@@ -39,13 +39,10 @@ async function getFile(volume: number) {
   showLoader();
   await http
     .get(config.API.evaluationFilebyId("เล่ม 2", id.value, fileText))
-    .then((res) => {
+    .then(async (res) => {
       const link = res.data.downloadUrl;
       const type = res.data.fileType;
-      getPDF(link, type);
-    })
-    .catch(() => {
-      // messageError($q, e);
+      await getPDF(link, type);
     })
     .finally(() => {
       hideLoader();
@@ -57,9 +54,8 @@ async function getFile(volume: number) {
  * @param url linkLoadFile
  * @param type ประเภทไฟล์
  */
-function getPDF(url: string, type: string) {
-  showLoader();
-  axios
+async function getPDF(url: string, type: string) {
+  await axios
     .get(url, {
       method: "GET",
       responseType: "blob",
@@ -80,7 +76,6 @@ function getPDF(url: string, type: string) {
         store.log = 1;
         store.pdfSrcStore = pdfData.pdf.value;
         store.numOfPagesStore = pdfData.pages.value;
-        hideLoader();
       }, 1500);
     })
     .catch(async (e) => {
diff --git a/src/modules/12_evaluatePersonal/components/Detail/step/step8.vue b/src/modules/12_evaluatePersonal/components/Detail/step/step8.vue
index 423d1caaf..01d9e8462 100644
--- a/src/modules/12_evaluatePersonal/components/Detail/step/step8.vue
+++ b/src/modules/12_evaluatePersonal/components/Detail/step/step8.vue
@@ -11,8 +11,7 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 import genReport from "@/plugins/genreport";
 
-/** importType*/
-import type { FileEvaluationRefRef } from "@/modules/12_evaluatePersonal/interface/index/evalute";
+import DialogHeader from "@/components/DialogHeader.vue";
 
 /** uer*/
 const store = useEvaluateDetailStore();
@@ -29,26 +28,66 @@ const modalConfirm = ref<boolean>(false);
 const nameOfWork = ref<string>("");
 const nameOfOwner = ref<string>("");
 const position = ref<string>("");
-const fileEvaluation81 = ref<any>(); //แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลประกอบการประเมินผลงาน (เอกสารแบบ ค)
-const fileEvaluation82 = ref<any>(); //บัญชีแสดงการรับ-ส่งผลงาน (เอกสารหมายเลข 15)
-const fileEvaluation83 = ref<any>(); //แบบประเมินผลงาน (เอกสารหมายเลข 16)
-const fileEvaluation84 = ref<any>(); //แบบแสดงการประเมินผลงาน (เอกสารหมายเลข 17)
-const fileEvaluation85 = ref<any>(); //แบบรายงานผลการประเมินบุคคล (เอกสารหมายเลข 18)
-const fileEvaluation86 = ref<any>(); //แบบสรุปผลการประเมิน (เอกสารแบบ ง)
-const fileEvaluation81Ref = ref<object | null>(null);
-const fileEvaluation82Ref = ref<object | null>(null);
-const fileEvaluation83Ref = ref<object | null>(null);
-const fileEvaluation84Ref = ref<object | null>(null);
-const fileEvaluation85Ref = ref<object | null>(null);
-const fileEvaluation86Ref = ref<object | null>(null);
-const fileEvaluationRef: FileEvaluationRefRef = {
-  fileEvaluation81: fileEvaluation81Ref,
-  fileEvaluation82: fileEvaluation82Ref,
-  fileEvaluation83: fileEvaluation83Ref,
-  fileEvaluation84: fileEvaluation84Ref,
-  fileEvaluation85: fileEvaluation85Ref,
-  fileEvaluation86: fileEvaluation86Ref,
-};
+
+const formTemplates = ref<any[]>([
+  {
+    code: "เอกสารแบบ ค",
+    templateName: "template-4",
+    title:
+      " แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลประกอบการประเมินผลงาน(เอกสารแบบ ค)",
+    fileName:
+      "แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลประกอบการประเมินผลงาน (เอกสารแบบ ค)",
+    downloadFile: "",
+    file: null,
+  },
+  {
+    code: "เอกสารหมายเลข 15",
+    templateName: "template-4",
+    title: "บัญชีแสดงการรับ-ส่งผลงาน (เอกสารหมายเลข 15)",
+    fileName: "บัญชีแสดงการรับ-ส่งผลงาน (เอกสารหมายเลข 15)",
+    downloadFile: "",
+    file: null,
+  },
+  {
+    code: "เอกสารหมายเลข 16",
+    templateName: "template-4",
+    title: "  แบบประเมินผลงาน (เอกสารหมายเลข 16)",
+    fileName: "แบบประเมินผลงาน (เอกสารหมายเลข 16)",
+    downloadFile: "",
+    file: null,
+  },
+  {
+    code: "เอกสารหมายเลข 17",
+    templateName: "template-4",
+    title: "   แบบแสดงการประเมินผลงาน (เอกสารหมายเลข 17)",
+    fileName: "แบบแสดงการประเมินผลงาน (เอกสารหมายเลข 17)",
+    downloadFile: "",
+    file: null,
+  },
+
+  {
+    code: "เอกสารหมายเลข 18",
+    templateName: "template-4",
+    title: "  แบบรายงานผลการประเมินบุคคล (เอกสารหมายเลข 18)",
+    fileName: "แบบรายงานผลการประเมินบุคคล (เอกสารหมายเลข 18)",
+    downloadFile: "",
+    file: null,
+  },
+
+  {
+    code: "เอกสารแบบ ง",
+    templateName: "template-4",
+    title: "แบบสรุปผลการประเมิน (เอกสารแบบ ง)",
+    fileName: "แบบสรุปผลการประเมิน (เอกสารแบบ ง)",
+    downloadFile: "",
+    file: null,
+  },
+]);
+
+/** ติดต่อผู้ขอประเมิน*/
+const messenger = ref<string>(""); //ข้อความ
+const title = ref<string>(""); //หัวข้อ
+const modalEvaluation = ref<boolean>(false); //แสดง popup ติดต่อผู้ขอประเมิน
 
 /** function ดาวน์โหลดไฟล์ต้นแบบ*/
 async function onClickDowloadFile(
@@ -108,6 +147,8 @@ function upLoadFile(name: string, file: any) {
       })
       .catch((e) => {
         messageError($q, e);
+      })
+      .finally(() => {
         hideLoader();
       });
   }
@@ -118,8 +159,8 @@ function upLoadFile(name: string, file: any) {
  * @param url link อัปโหลด
  * @param file ไฟล์
  */
-function fileUpLoad(url: string, file: any) {
-  axios
+async function fileUpLoad(url: string, file: any) {
+  await axios
     .put(url, file, {
       headers: { "Content-Type": file?.type },
       onUploadProgress: (e) => console.log(e),
@@ -135,97 +176,62 @@ function fileUpLoad(url: string, file: any) {
     });
 }
 
-/** function ยืนยันผลการพิจารณา */
-async function confirmApprove() {
-  const fileEvaluationValues = [
-    fileEvaluation81,
-    fileEvaluation82,
-    fileEvaluation83,
-    fileEvaluation84,
-    fileEvaluation85,
-    fileEvaluation86,
-  ];
-  const downloadFileValues = [
-    downloadFile1,
-    downloadFile2,
-    downloadFile3,
-    downloadFile4,
-    downloadFile5,
-    downloadFile6,
-  ];
-
-  for (let i = 0; i < downloadFileValues.length; i++) {
-    if (downloadFileValues[i].value === "") {
-      fileEvaluationValues[i].value = null;
-    }
-  }
-  setTimeout(() => {
-    const hasError = [];
-    for (const key in fileEvaluationRef) {
-      if (Object.prototype.hasOwnProperty.call(fileEvaluationRef, key)) {
-        const property = fileEvaluationRef[key];
-        if (property.value && typeof property.value.validate === "function") {
-          const isValid = property.value.validate();
-          hasError.push(isValid);
-        }
+function onSubmit() {
+  if (formTemplates.value.some((e: any) => e.downloadFile === "")) {
+    for (let i = 0; i < formTemplates.value.length; i++) {
+      if (formTemplates.value[i].downloadFile === "") {
+        formTemplates.value[i].file = null;
       }
     }
+  } else {
+    modalConfirm.value = true;
+  }
+}
 
-    if (hasError.every((result) => result === true)) {
-      dialogConfirm(
-        $q,
-        async () => {
-          showLoader();
-          const data = {
-            metadata: {
-              additionalProp1: nameOfWork.value,
-              additionalProp2: nameOfOwner.value,
-              additionalProp3: position.value,
-            },
-          };
-          await http
-            .patch(
-              config.API.evaluationPatchData(
-                "เล่ม 2",
-                id.value,
-                "1-เอกสารเล่ม 2"
-              ),
-              data
-            )
-            .then(async () => {
-              await updateEvaluationResult();
-              await nextStep();
-              modalConfirm.value = false;
-            })
-            .catch((e) => {
-              messageError($q, e);
-            })
-            .finally(() => {
-              hideLoader();
-            });
+/** function ยืนยันผลการพิจารณา */
+async function confirmApprove() {
+  dialogConfirm(
+    $q,
+    async () => {
+      showLoader();
+      const data = {
+        metadata: {
+          additionalProp1: nameOfWork.value,
+          additionalProp2: nameOfOwner.value,
+          additionalProp3: position.value,
         },
-        "ยืนยันผลการพิจารณา",
-        "ต้องการยืนยันผลการพิจารณาใช่หรือไม่?"
-      );
-    }
-  }, 100);
+      };
+      await http
+        .patch(
+          config.API.evaluationPatchData("เล่ม 2", id.value, "1-เอกสารเล่ม 2"),
+          data
+        )
+        .then(async () => {
+          await Promise.all([updateEvaluationResult(), nextStep()]);
+          modalConfirm.value = false;
+          store.step = 9;
+          store.currentStep = 9;
+          success($q, "ยืนยันผลการพิจารณาสำเร็จ");
+        })
+        .catch((e) => {
+          messageError($q, e);
+        })
+        .finally(() => {
+          hideLoader();
+        });
+    },
+    "ยืนยันผลการพิจารณา",
+    "ต้องการยืนยันผลการพิจารณาใช่หรือไม่?"
+  );
 }
 
 /**  function ยืนยันผลการพิจารณา*/
-function nextStep() {
-  showLoader();
-  http
+async function nextStep() {
+  await http
     .put(config.API.evaluationNextFinish(id.value))
-    .then(() => {
-      success($q, "ยืนยันผลการพิจารณาสำเร็จ");
-      store.step = 9;
-      store.currentStep = 9;
-    })
+    .then(() => {})
     .catch((e) => {
       messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
     });
 }
 
@@ -233,7 +239,6 @@ const downloadDocEditUrl = ref<string>("");
 
 /** function ตรวจสอบไฟล์แก้ไข*/
 async function checkDocEdit() {
-  showLoader();
   await http
     .get(
       config.API.evaluationPatchData(
@@ -244,55 +249,23 @@ async function checkDocEdit() {
     )
     .then((res: any) => {
       downloadDocEditUrl.value = res.data.downloadUrl;
-    })
-    .catch((e) => {
-      // messageError($q, e);
-    })
-    .finally(() => {
-      setTimeout(() => {
-        hideLoader();
-      }, 2000);
     });
 }
 
-//ไฟล์โหล
-const downloadFile1 = ref<string>(""); //"แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลประกอบการประเมินผลงาน (เอกสารแบบ ค)
-const downloadFile2 = ref<string>(""); //บัญชีแสดงการรับ-ส่งผลงาน (เอกสารหมายเลข 15)"
-const downloadFile3 = ref<string>(""); //แบบประเมินผลงาน (เอกสารหมายเลข 16)
-const downloadFile4 = ref<string>(""); //แบบแสดงการประเมินผลงาน (เอกสารหมายเลข 17)
-const downloadFile5 = ref<string>(""); //แบบรายงานผลการประเมินบุคคล (เอกสารหมายเลข 18)
-const downloadFile6 = ref<string>(""); //แบบสรุปผลการประเมิน (เอกสารแบบ ง)
-
 /**
  * function ดาวน์โหลดไฟล์
  * @param fileName ชื่อไฟล์
  */
 async function downloadFileList(fileName: string) {
-  showLoader();
   await http
     .get(config.API.evaluationFilebyId("เล่ม 2", id.value, fileName))
     .then((res) => {
-      if (
-        fileName ===
-        "แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลประกอบการประเมินผลงาน (เอกสารแบบ ค)"
-      ) {
-        downloadFile1.value = res.data.downloadUrl;
-      } else if (fileName === "บัญชีแสดงการรับ-ส่งผลงาน (เอกสารหมายเลข 15)") {
-        downloadFile2.value = res.data.downloadUrl;
-      } else if (fileName === "แบบประเมินผลงาน (เอกสารหมายเลข 16)") {
-        downloadFile3.value = res.data.downloadUrl;
-      } else if (fileName === "แบบแสดงการประเมินผลงาน (เอกสารหมายเลข 17)") {
-        downloadFile4.value = res.data.downloadUrl;
-      } else if (fileName === "แบบรายงานผลการประเมินบุคคล (เอกสารหมายเลข 18)") {
-        downloadFile5.value = res.data.downloadUrl;
-      } else if (fileName === "แบบสรุปผลการประเมิน (เอกสารแบบ ง)") {
-        downloadFile6.value = res.data.downloadUrl;
+      const index = formTemplates.value.findIndex(
+        (item) => item.fileName === fileName
+      );
+      if (index !== -1) {
+        formTemplates.value[index].downloadFile = res.data.downloadUrl;
       }
-    })
-    .finally(() => {
-      setTimeout(() => {
-        hideLoader();
-      }, 2000);
     });
 }
 
@@ -302,7 +275,6 @@ const assignedPosition = ref<string>(""); //ตำแหน่ง
 
 /** function เรียกข้อมูลผลงาน*/
 async function fetchDataSigner() {
-  showLoader();
   await http
     .get(config.API.evaluationSigner(id.value, 2))
     .then((res) => {
@@ -312,7 +284,7 @@ async function fetchDataSigner() {
         subject.value = data.subjectDoc2;
         assignedPosition.value = data.assignedPosition;
 
-        nameOfWork.value = data.subjectDoc2;
+        nameOfWork.value = data.subjectDoc2[0];
         nameOfOwner.value = data.authorDoc2;
         position.value = data.assignedPosition;
         evaluationResult.value = data.evaluationResult;
@@ -320,20 +292,34 @@ async function fetchDataSigner() {
     })
     .catch((e) => {
       messageError($q, e);
-    })
-    .finally(() => {
-      setTimeout(() => {
-        hideLoader();
-      }, 2000);
     });
 }
 
 async function updateEvaluationResult() {
-  http
+  await http
     .put(config.API.updateEvaluationResult(id.value), {
       result: checkBox.value,
     })
     .then(() => {})
+    .catch((e) => {
+      messageError($q, e);
+    });
+}
+
+/**  fiunction ส่งข้อความ*/
+async function onSentMessenger() {
+  showLoader();
+  await http
+    .put(config.API.evaluationSentToContact(id.value), {
+      subject: title.value,
+      body: messenger.value,
+    })
+    .then(() => {
+      success($q, "ส่งข้อความสำเร็จ");
+      title.value = "";
+      messenger.value = "";
+      modalEvaluation.value = false;
+    })
     .catch((e) => {
       messageError($q, e);
     })
@@ -343,487 +329,121 @@ async function updateEvaluationResult() {
 }
 
 onMounted(async () => {
-  await Promise.all([
-    fetchDataSigner(),
-    downloadFileList(
-      "แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลประกอบการประเมินผลงาน (เอกสารแบบ ค)"
-    ),
-    downloadFileList("บัญชีแสดงการรับ-ส่งผลงาน (เอกสารหมายเลข 15)"),
-    downloadFileList("แบบประเมินผลงาน (เอกสารหมายเลข 16)"),
-    downloadFileList("แบบแสดงการประเมินผลงาน (เอกสารหมายเลข 17)"),
-    downloadFileList("แบบรายงานผลการประเมินบุคคล (เอกสารหมายเลข 18)"),
-    downloadFileList("แบบสรุปผลการประเมิน (เอกสารแบบ ง)"),
-    checkDocEdit(),
-  ]);
+  try {
+    showLoader();
+    await Promise.all([
+      fetchDataSigner(),
+      formTemplates.value.forEach((e) => {
+        downloadFileList(e.fileName);
+      }),
+
+      // downloadFileList(
+      //   "แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลประกอบการประเมินผลงาน (เอกสารแบบ ค)"
+      // ),
+      // downloadFileList("บัญชีแสดงการรับ-ส่งผลงาน (เอกสารหมายเลข 15)"),
+      // downloadFileList("แบบประเมินผลงาน (เอกสารหมายเลข 16)"),
+      // downloadFileList("แบบแสดงการประเมินผลงาน (เอกสารหมายเลข 17)"),
+      // downloadFileList("แบบรายงานผลการประเมินบุคคล (เอกสารหมายเลข 18)"),
+      // downloadFileList("แบบสรุปผลการประเมิน (เอกสารแบบ ง)"),
+      checkDocEdit(),
+    ]);
+  } catch (error) {
+    console.log(error);
+  } finally {
+    hideLoader();
+  }
 });
 </script>
 
 <template>
   <div class="row q-col-gutter-sm q-pa-sm">
-    <div class="col-12">
-      <q-card bordered style="border: 1px solid #d6dee1">
-        <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
-          เอกสารที่เกี่ยวข้องกับการประเมิน
-        </div>
-        <div class="col-12"><q-separator /></div>
-        <div class="col-12 q-pa-sm">
-          <div class="row q-col-gutter-sm col-12">
-            <div class="col-6">
-              <q-card bordered style="border: 1px solid #d6dee1">
-                <div
-                  class="col-12 row items-center text-weight-medium bg-grey-1 q-py-sm q-px-sm"
-                >
-                  <div class="col-xs-12 col-sm-9">
-                    แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลประกอบการประเมินผลงาน
-                    (เอกสารแบบ ค)
-                  </div>
-                  <q-space />
-                  <div class="col-xs-12 col-sm-3 row justify-end">
-                    <div v-if="store.currentStep == 8">
-                      <q-btn
-                        class="col-12"
-                        flat
-                        dense
-                        icon="download"
-                        color="indigo"
-                        @click="
-                          onClickDowloadFile(
-                            'เอกสารแบบ ค',
-                            'template-4',
-                            'เอกสารแบบ ค'
-                          )
-                        "
-                      >
-                        <q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
-                      >
+    <q-form
+      class="row q-col-gutter-sm"
+      greedy
+      @submit.prevent
+      @validation-success="onSubmit"
+    >
+      <div class="col-12">
+        <q-card bordered style="border: 1px solid #d6dee1">
+          <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
+            เอกสารที่เกี่ยวข้องกับการประเมิน
+          </div>
+          <div class="col-12"><q-separator /></div>
+          <div class="col-12 q-pa-sm">
+            <div class="row q-col-gutter-sm col-12">
+              <div
+                class="col-6"
+                v-for="(item, index) in formTemplates"
+                :key="index"
+              >
+                <q-card bordered style="border: 1px solid #d6dee1">
+                  <div
+                    class="col-12 row items-center text-weight-medium bg-grey-1 q-py-sm q-px-sm"
+                  >
+                    <div class="col-xs-12 col-sm-9">
+                      {{ item.title }}
                     </div>
-                    <div>
-                      <q-btn
-                        v-if="downloadFile1"
-                        :href="downloadFile1"
-                        target="_blank"
-                        class="col-12"
-                        flat
-                        dense
-                        icon="visibility"
-                        color="blue"
-                      >
-                        <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
-                      >
-                    </div>
-                  </div>
-                </div>
-                <div class="col-12" v-if="store.currentStep == 8">
-                  <q-separator />
-                </div>
-                <div
-                  class="row col-12 q-pa-sm"
-                  v-if="
-                    store.currentStep == 8 &&
-                    checkPermission($route)?.attrIsUpdate
-                  "
-                >
-                  <div class="row col-12">
-                    <q-file
-                      ref="fileEvaluation81Ref"
-                      v-model="fileEvaluation81"
-                      outlined
-                      hide-bottom-space
-                      lazy-rules
-                      label="อัปโหลดไฟล์"
-                      class="col-12"
-                      dense
-                      accept=".pdf"
-                      :rules="
-                        downloadFile1 === ''
-                          ? [(val:string) => !!val || 'กรุณาเลือกไฟล์']
-                          : []
-                      "
-                    >
-                      <template v-slot:prepend>
-                        <q-icon name="attach_file" />
-                      </template>
-                      <template v-slot:after>
+                    <q-space />
+                    <div class="col-xs-12 col-sm-3 row justify-end">
+                      <div v-if="store.currentStep == 8">
                         <q-btn
+                          class="col-12"
                           flat
-                          round
                           dense
-                          color="primary"
-                          icon="mdi-upload"
+                          icon="download"
+                          color="indigo"
                           @click="
-                            upLoadFile(
-                              'แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลประกอบการประเมินผลงาน (เอกสารแบบ ค)',
-                              fileEvaluation81
+                            onClickDowloadFile(
+                              item.code,
+                              item.templateName,
+                              item.code
                             )
                           "
-                          ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
                         >
-                      </template>
-                    </q-file>
-                  </div>
-                </div>
-              </q-card>
-            </div>
-
-            <div class="col-6">
-              <q-card bordered style="border: 1px solid #d6dee1">
-                <div
-                  class="col-12 row items-center text-weight-medium bg-grey-1 q-py-sm q-px-sm"
-                >
-                  <div class="col-xs-12 col-sm-9">
-                    บัญชีแสดงการรับ-ส่งผลงาน (เอกสารหมายเลข 15)
-                  </div>
-                  <q-space />
-                  <div class="col-xs-12 col-sm-3 row justify-end">
-                    <div v-if="store.currentStep == 8">
-                      <q-btn
-                        class="col-12"
-                        flat
-                        dense
-                        icon="download"
-                        color="indigo"
-                        @click="
-                          onClickDowloadFile(
-                            'เอกสารหมายเลข 15',
-                            'template-4',
-                            'เอกสารหมายเลข 15'
-                          )
-                        "
-                      >
-                        <q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
-                      >
-                    </div>
-                    <div>
-                      <q-btn
-                        v-if="downloadFile2"
-                        :href="downloadFile2"
-                        target="_blank"
-                        class="col-12"
-                        flat
-                        dense
-                        icon="visibility"
-                        color="blue"
-                      >
-                        <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
-                      >
-                    </div>
-                  </div>
-                </div>
-                <div class="col-12" v-if="store.currentStep == 8">
-                  <q-separator />
-                </div>
-                <div
-                  class="col-12 q-pa-sm"
-                  v-if="
-                    store.currentStep == 8 &&
-                    checkPermission($route)?.attrIsUpdate
-                  "
-                >
-                  <div class="row col-12">
-                    <q-file
-                      ref="fileEvaluation82Ref"
-                      v-model="fileEvaluation82"
-                      class="col-12"
-                      outlined
-                      dense
-                      hide-bottom-space
-                      lazy-rules
-                      label="อัปโหลดไฟล์"
-                      accept=".pdf"
-                      :rules="
-                        downloadFile2 === ''
-                          ? [(val:string) => !!val || 'กรุณาเลือกไฟล์']
-                          : []
-                      "
-                    >
-                      <template v-slot:prepend>
-                        <q-icon name="attach_file" />
-                      </template>
-                      <template v-slot:after>
+                          <q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
+                        >
+                      </div>
+                      <div>
                         <q-btn
+                          v-if="item.downloadFile"
+                          :href="item.downloadFile"
+                          target="_blank"
+                          class="col-12"
                           flat
-                          round
                           dense
-                          color="primary"
-                          icon="mdi-upload"
-                          @click="
-                            upLoadFile(
-                              'บัญชีแสดงการรับ-ส่งผลงาน (เอกสารหมายเลข 15)',
-                              fileEvaluation82
-                            )
-                          "
-                          ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
+                          icon="visibility"
+                          color="blue"
                         >
-                      </template>
-                    </q-file>
-                  </div>
-                </div>
-              </q-card>
-            </div>
-
-            <div class="col-6">
-              <q-card bordered style="border: 1px solid #d6dee1">
-                <div
-                  class="col-12 row items-center text-weight-medium bg-grey-1 q-py-sm q-px-sm"
-                >
-                  <div class="col-xs-12 col-sm-9">
-                    แบบประเมินผลงาน (เอกสารหมายเลข 16)
-                  </div>
-                  <q-space />
-                  <div class="col-xs-12 col-sm-3 row justify-end">
-                    <div v-if="store.currentStep == 8">
-                      <q-btn
-                        class="col-12"
-                        dense
-                        flat
-                        icon="download"
-                        color="indigo"
-                        @click="
-                          onClickDowloadFile(
-                            'เอกสารหมายเลข 16',
-                            'template-4',
-                            'เอกสารหมายเลข 16'
-                          )
-                        "
-                      >
-                        <q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
-                      >
-                    </div>
-                    <div>
-                      <q-btn
-                        v-if="downloadFile3"
-                        :href="downloadFile3"
-                        target="_blank"
-                        class="col-12"
-                        flat
-                        dense
-                        icon="visibility"
-                        color="blue"
-                      >
-                        <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
-                      >
-                    </div>
-                  </div>
-                </div>
-                <div class="col-12" v-if="store.currentStep == 8">
-                  <q-separator />
-                </div>
-                <div
-                  class="col-12 q-pa-sm"
-                  v-if="
-                    store.currentStep == 8 &&
-                    checkPermission($route)?.attrIsUpdate
-                  "
-                >
-                  <div class="row col-12">
-                    <q-file
-                      ref="fileEvaluation83Ref"
-                      v-model="fileEvaluation83"
-                      class="col-12"
-                      outlined
-                      dense
-                      hide-bottom-space
-                      lazy-rules
-                      label="อัปโหลดไฟล์"
-                      accept=".pdf"
-                      :rules="
-                        downloadFile3 === ''
-                          ? [(val:string) => !!val || 'กรุณาเลือกไฟล์']
-                          : []
-                      "
-                    >
-                      <template v-slot:prepend>
-                        <q-icon name="attach_file" />
-                      </template>
-                      <template v-slot:after>
-                        <q-btn
-                          flat
-                          round
-                          dense
-                          color="primary"
-                          icon="mdi-upload"
-                          @click="
-                            upLoadFile(
-                              'แบบประเมินผลงาน (เอกสารหมายเลข 16)',
-                              fileEvaluation83
-                            )
-                          "
-                          ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
+                          <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
                         >
-                      </template>
-                    </q-file>
-                  </div>
-                </div>
-              </q-card>
-            </div>
-
-            <div class="col-6">
-              <q-card bordered style="border: 1px solid #d6dee1">
-                <div
-                  class="col-12 row items-center text-weight-medium bg-grey-1 q-py-sm q-px-sm"
-                >
-                  <div class="col-xs-12 col-sm-9">
-                    แบบแสดงการประเมินผลงาน (เอกสารหมายเลข 17)
-                  </div>
-                  <q-space />
-                  <div class="col-xs-12 col-sm-3 row justify-end">
-                    <div v-if="store.currentStep == 8">
-                      <q-btn
-                        class="col-12"
-                        flat
-                        dense
-                        icon="download"
-                        color="indigo"
-                        @click="
-                          onClickDowloadFile(
-                            'เอกสารหมายเลข 17',
-                            'template-4',
-                            'เอกสารหมายเลข 17'
-                          )
-                        "
-                      >
-                        <q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
-                      >
-                    </div>
-                    <div>
-                      <q-btn
-                        v-if="downloadFile4"
-                        :href="downloadFile4"
-                        target="_blank"
-                        class="col-12"
-                        flat
-                        dense
-                        icon="visibility"
-                        color="blue"
-                      >
-                        <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
-                      >
+                      </div>
                     </div>
                   </div>
-                </div>
-                <div class="col-12" v-if="store.currentStep == 8">
-                  <q-separator />
-                </div>
-                <div
-                  class="col-12 q-pa-sm"
-                  v-if="
-                    store.currentStep == 8 &&
-                    checkPermission($route)?.attrIsUpdate
-                  "
-                >
-                  <div class="row col-12">
-                    <q-file
-                      ref="fileEvaluation84Ref"
-                      v-model="fileEvaluation84"
-                      class="col-12"
-                      outlined
-                      dense
-                      hide-bottom-space
-                      lazy-rules
-                      label="อัปโหลดไฟล์"
-                      accept=".pdf"
-                      :rules="
-                        downloadFile4 === ''
-                          ? [(val:string) => !!val || 'กรุณาเลือกไฟล์']
-                          : []
-                      "
-                    >
-                      <template v-slot:prepend>
-                        <q-icon name="attach_file" />
-                      </template>
-                      <template v-slot:after>
-                        <q-btn
-                          flat
-                          round
-                          dense
-                          color="primary"
-                          icon="mdi-upload"
-                          @click="
-                            upLoadFile(
-                              'แบบแสดงการประเมินผลงาน (เอกสารหมายเลข 17)',
-                              fileEvaluation84
-                            )
-                          "
-                          ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
-                        >
-                      </template>
-                    </q-file>
+                  <div class="col-12" v-if="store.currentStep == 8">
+                    <q-separator />
                   </div>
-                </div>
-              </q-card>
-            </div>
-
-            <div class="col-6">
-              <q-card bordered style="border: 1px solid #d6dee1">
-                <div
-                  class="col-12 row items-center text-weight-medium bg-grey-1 q-py-sm q-px-sm"
-                >
-                  <div class="col-xs-12 col-sm-9">
-                    แบบรายงานผลการประเมินบุคคล (เอกสารหมายเลข 18)
-                  </div>
-                  <q-space />
-                  <div class="col-xs-12 col-sm-3 row justify-end">
-                    <div v-if="store.currentStep == 8">
-                      <q-btn
-                        class="col-12"
-                        flat
-                        dense
-                        icon="download"
-                        color="indigo"
-                        @click="
-                          onClickDowloadFile(
-                            'เอกสารหมายเลข 18',
-                            'template-4',
-                            'เอกสารหมายเลข 18'
-                          )
-                        "
-                      >
-                        <q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
-                      >
-                    </div>
-                    <div>
-                      <q-btn
-                        v-if="downloadFile5"
-                        :href="downloadFile5"
-                        target="_blank"
-                        class="col-12"
-                        flat
-                        dense
-                        icon="visibility"
-                        color="blue"
-                      >
-                        <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
-                      >
-                    </div>
-                  </div>
-                </div>
-                <div class="col-12" v-if="store.currentStep == 8">
-                  <q-separator />
-                </div>
-                <div
-                  class="col-12 q-pa-sm"
-                  v-if="
-                    store.currentStep == 8 &&
-                    checkPermission($route)?.attrIsUpdate
-                  "
-                >
-                  <div class="row q-col-gutter-md col-12">
+                  <div
+                    class="row col-12 q-pa-sm"
+                    v-if="
+                      store.currentStep == 8 &&
+                      checkPermission($route)?.attrIsUpdate
+                    "
+                  >
                     <div class="row col-12">
                       <q-file
-                        ref="fileEvaluation85Ref"
-                        v-model="fileEvaluation85"
-                        class="col-12"
+                        v-model="item.file"
                         outlined
-                        dense
                         hide-bottom-space
                         lazy-rules
                         label="อัปโหลดไฟล์"
+                        class="col-12"
+                        dense
                         accept=".pdf"
                         :rules="
-                          downloadFile5 === ''
-                            ? [(val:string) => !!val || 'กรุณาเลือกไฟล์']
-                            : []
-                        "
+                      item.downloadFile === ''
+                          ? [(val:string) => !!val || 'กรุณาเลือกไฟล์']
+                          : []
+                      "
                       >
                         <template v-slot:prepend>
                           <q-icon name="attach_file" />
@@ -835,185 +455,90 @@ onMounted(async () => {
                             dense
                             color="primary"
                             icon="mdi-upload"
-                            @click="
-                              upLoadFile(
-                                'แบบรายงานผลการประเมินบุคคล (เอกสารหมายเลข 18)',
-                                fileEvaluation85
-                              )
-                            "
+                            @click="upLoadFile(item.fileName, item.file)"
                             ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
                           >
                         </template>
                       </q-file>
                     </div>
                   </div>
-                </div>
-              </q-card>
-            </div>
-
-            <div class="col-6">
-              <q-card bordered style="border: 1px solid #d6dee1">
-                <div
-                  class="col-12 row items-center text-weight-medium bg-grey-1 q-py-sm q-px-sm"
-                >
-                  <div class="col-xs-12 col-sm-9">
-                    แบบสรุปผลการประเมิน (เอกสารแบบ ง)
-                  </div>
-                  <q-space />
-                  <div class="col-xs-12 col-sm-3 row justify-end">
-                    <div v-if="store.currentStep == 8">
-                      <q-btn
-                        flat
-                        dense
-                        icon="download"
-                        color="indigo"
-                        @click="
-                          onClickDowloadFile(
-                            'เอกสารแบบ ง',
-                            'template-4',
-                            'เอกสารแบบ ง'
-                          )
-                        "
-                      >
-                        <q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
-                      >
-                    </div>
-                    <div>
-                      <q-btn
-                        v-if="downloadFile6"
-                        :href="downloadFile6"
-                        target="_blank"
-                        class="col-12"
-                        flat
-                        dense
-                        icon="visibility"
-                        color="blue"
-                      >
-                        <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
-                      >
-                    </div>
-                  </div>
-                </div>
-                <div class="col-12" v-if="store.currentStep == 8">
-                  <q-separator />
-                </div>
-                <div
-                  class="col-12 q-pa-sm"
-                  v-if="
-                    store.currentStep == 8 &&
-                    checkPermission($route)?.attrIsUpdate
-                  "
-                >
-                  <div class="row col-12">
-                    <q-file
-                      ref="fileEvaluation86Ref"
-                      v-model="fileEvaluation86"
-                      class="col-12"
-                      outlined
-                      dense
-                      hide-bottom-space
-                      lazy-rules
-                      label="อัปโหลดไฟล์"
-                      accept=".pdf"
-                      :rules="
-                        downloadFile6 === ''
-                          ? [(val:string) => !!val || 'กรุณาเลือกไฟล์']
-                          : []
-                      "
-                    >
-                      <template v-slot:prepend>
-                        <q-icon name="attach_file" />
-                      </template>
-                      <template v-slot:after>
-                        <q-btn
-                          flat
-                          round
-                          dense
-                          color="primary"
-                          icon="mdi-upload"
-                          @click="
-                            upLoadFile(
-                              'แบบสรุปผลการประเมิน (เอกสารแบบ ง)',
-                              fileEvaluation86
-                            )
-                          "
-                          ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
-                        >
-                      </template>
-                    </q-file>
-                  </div>
-                </div>
-              </q-card>
+                </q-card>
+              </div>
             </div>
           </div>
-        </div>
-      </q-card>
-    </div>
-    <div class="col-12">
-      <q-card bordered style="border: 1px solid #d6dee1">
-        <div
-          class="col-12 row items-center text-weight-medium bg-grey-1 q-py-sm q-px-md"
-        >
-          <div>เอกสารเล่ม 2 (ฉบับแก้ไข)</div>
-          <q-space />
-          <div v-if="downloadDocEditUrl !== ''">
-            <q-btn
-              :href="downloadDocEditUrl"
-              target="_blank"
-              class="col-12"
-              icon="visibility"
-              color="blue"
-              flat
-              dense
-            >
-              <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
-            >
-          </div>
-        </div>
-      </q-card>
-    </div>
-
-    <div
-      v-if="store.currentStep == 8 && checkPermission($route)?.attrIsUpdate"
-      class="col-12"
-    >
-      <div align="right">
-        <q-btn
-          unelevated
-          label="ยืนยันผลการพิจารณา"
-          color="public"
-          @click="modalConfirm = true"
-        />
+        </q-card>
       </div>
-    </div>
-    <div v-if="evaluationResult !== 'PENDING'" align="right" class="full-width">
-      ผลการประเมิน:
-      <span
-        :class="
-          evaluationResult == 'PASS'
-            ? `full-width text-green`
-            : `full-width text-red`
-        "
-        >{{ evaluationResult == "PASS" ? "ผ่าน" : "ไม่ผ่าน" }}</span
+      <div class="col-12" v-if="downloadDocEditUrl !== ''">
+        <q-card bordered style="border: 1px solid #d6dee1">
+          <div
+            class="col-12 row items-center text-weight-medium bg-grey-1 q-py-sm q-px-md"
+          >
+            <div>เอกสารเล่ม 2 (ฉบับแก้ไข)</div>
+            <q-space />
+            <div>
+              <q-btn
+                :href="downloadDocEditUrl"
+                target="_blank"
+                class="col-12"
+                icon="visibility"
+                color="blue"
+                flat
+                dense
+              >
+                <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
+              >
+            </div>
+          </div>
+        </q-card>
+      </div>
+
+      <div
+        v-if="store.currentStep == 8 && checkPermission($route)?.attrIsUpdate"
+        class="col-12"
       >
-    </div>
+        <!-- @click="modalConfirm = true" -->
+        <div align="right">
+          <q-btn
+            class="q-mr-sm"
+            label="ติดต่อผู้ขอประเมิน"
+            color="info"
+            @click="modalEvaluation = true"
+          />
+          <q-btn
+            type="submit"
+            unelevated
+            label="ยืนยันผลการพิจารณา"
+            color="public"
+          />
+        </div>
+      </div>
+
+      <div
+        v-if="evaluationResult !== 'PENDING'"
+        align="right"
+        class="full-width"
+      >
+        ผลการประเมิน:
+        <span
+          :class="
+            evaluationResult == 'PASS'
+              ? `full-width text-green`
+              : `full-width text-red`
+          "
+          >{{ evaluationResult == "PASS" ? "ผ่าน" : "ไม่ผ่าน" }}</span
+        >
+      </div>
+    </q-form>
   </div>
 
+  <!-- dialog ยืนยันผลการพิจารณา -->
   <q-dialog v-model="modalConfirm" persistent>
     <q-card style="min-width: 60vw">
-      <q-toolbar>
-        <q-toolbar-title class="text-subtitle2 text-bold">
-          ยืนยันผลการพิจารณา
-        </q-toolbar-title>
-        <q-btn
-          icon="close"
-          unelevated
-          round
-          dense
-          @click="modalConfirm = false"
-          style="color: #ff8080; background-color: #ffdede"
-        />
-      </q-toolbar>
+      <DialogHeader
+        tittle="ยืนยันผลการพิจารณา"
+        :close="() => (modalConfirm = false)"
+      />
+
       <q-separator />
       <q-card-section class="q-pa-md bg-grey-1">
         <div class="row q-col-gutter-sm">
@@ -1073,7 +598,6 @@ onMounted(async () => {
           :disable="checkBox == ''"
           dense
           color="public"
-          id="onSubmit"
           class="q-px-md q-py-xs"
           label="ยืนยัน"
           @click="confirmApprove"
@@ -1082,6 +606,51 @@ onMounted(async () => {
       </div>
     </q-card>
   </q-dialog>
+
+  <!--  popup ติดต่อผู้ขอประเมิน -->
+  <q-dialog v-model="modalEvaluation" persistent>
+    <q-card style="min-width: 60vw">
+      <q-form greedy @submit.prevent @validation-success="onSentMessenger">
+        <DialogHeader
+          tittle="ติดต่อผู้ขอประเมิน"
+          :close="
+            () => ((modalEvaluation = false), (title = ''), (messenger = ''))
+          "
+        />
+        <q-separator />
+        <q-card-section class="q-pa-md bg-grey-1">
+          <div class="row q-col-gutter-sm">
+            <div class="col-12">
+              <q-input
+                v-model="title"
+                label="หัวข้อ"
+                outlined
+                dense
+                bg-color="white"
+                :rules="[(val:string) => !!val || 'กรุณากรอกหัวข้อ']"
+              />
+            </div>
+            <div class="col-12">
+              <q-input
+                v-model="messenger"
+                label="ข้อความ"
+                type="textarea"
+                outlined
+                dense
+                bg-color="white"
+                :rules="[(val:string) => !!val || 'กรุณากรอกข้อความ']"
+              />
+            </div>
+          </div>
+        </q-card-section>
+        <q-separator />
+
+        <q-card-actions align="right">
+          <q-btn color="public" type="submit" label="ส่งข้อความ" />
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
 </template>
 
 <style scoped></style>
diff --git a/src/modules/12_evaluatePersonal/components/Detail/viewstep/viewStep1.vue b/src/modules/12_evaluatePersonal/components/Detail/viewstep/viewStep1.vue
index 5770f2253..deb8ccbbc 100644
--- a/src/modules/12_evaluatePersonal/components/Detail/viewstep/viewStep1.vue
+++ b/src/modules/12_evaluatePersonal/components/Detail/viewstep/viewStep1.vue
@@ -21,6 +21,7 @@ const {
   columnSalaries,
   columnTraining,
   columnAssessments,
+  columnExperience,
 } = store;
 const { date2Thai, showLoader, hideLoader } = mixin;
 
@@ -51,6 +52,7 @@ const formDetail = reactive({
   salaries: [], //ประวัติการรับราชการ
   trainings: [], //ประวัติการฝึกอบรมดูงาน
   assessments: [], //ประสบการณ์ในการปฏิบัติงาน
+  experience: [],
 });
 
 function formattedNumber(x: number) {
@@ -60,6 +62,7 @@ function formattedNumber(x: number) {
 onMounted(() => {
   if (props.data) {
     showLoader();
+    console.log("props.data :>> ", props.data);
     formDetail.prefix = props.data.prefix ?? "-";
     formDetail.fullName = props.data.fullName ?? "-";
     formDetail.position = props.data.position ?? "-";
@@ -99,7 +102,8 @@ onMounted(() => {
           yearly: e.yearly,
         }))
       : [];
-    formDetail.assessments = props.data.assessments;
+    formDetail.assessments = props.data.performances;
+    formDetail.experience = props.data.portfolios;
     setTimeout(() => {
       hideLoader();
     }, 1000);
@@ -382,7 +386,11 @@ onMounted(() => {
           <span class="q-ml-lg q-my-sm">ประสบการณ์ในการปฏิบัติงาน </span>
         </div>
         <div class="col-12"><q-separator /></div>
-        <div class="col-12 q-pa-sm">-</div>
+        <TableData
+          class="col-12"
+          :columns="columnExperience"
+          :row="formDetail.experience"
+        />
       </q-card>
 
       <q-card class="col-12 cardSp1" bordered>
@@ -390,13 +398,12 @@ onMounted(() => {
           <span class="q-ml-lg q-my-sm">ผลงานที่เคยเสนอขอประเมิน (ถ้ามี)</span>
         </div>
         <div class="col-12"><q-separator /></div>
-        <div class="col-12 q-pa-sm">-</div>
-        <!-- <div class="col-10">
-          <TableData
-            :columns="columnAssessments"
-            :row="formDetail.assessments"
-          />
-        </div> -->
+
+        <TableData
+          class="col-12"
+          :columns="columnAssessments"
+          :row="formDetail.assessments"
+        />
       </q-card>
     </div>
   </q-card>
diff --git a/src/modules/12_evaluatePersonal/interface/index/evalute.ts b/src/modules/12_evaluatePersonal/interface/index/evalute.ts
index f707e324a..16ff58fa6 100644
--- a/src/modules/12_evaluatePersonal/interface/index/evalute.ts
+++ b/src/modules/12_evaluatePersonal/interface/index/evalute.ts
@@ -1,8 +1,14 @@
 interface FormCommand {
   elementaryFullName: string;
   elementaryPosition: string;
+  elementaryPositionOld: string;
+  elementaryOrg: string;
+  elementaryOrgOld: string;
   abovelevelFullname: string;
   abovelevelPosition: string;
+  abovelevelPositionOld: string;
+  abovelevelOrg: string;
+  abovelevelOrgOld: string;
 }
 
 interface FormCommandRef {
diff --git a/src/modules/12_evaluatePersonal/store/EvaluateDetail.ts b/src/modules/12_evaluatePersonal/store/EvaluateDetail.ts
index ef98b0c4e..2a55289aa 100644
--- a/src/modules/12_evaluatePersonal/store/EvaluateDetail.ts
+++ b/src/modules/12_evaluatePersonal/store/EvaluateDetail.ts
@@ -328,97 +328,65 @@ export const useEvaluateDetailStore = defineStore("evaluateDetailStore", () => {
     },
   ]);
 
-  /** คอลัมน์ ผลงานที่เคยเสนอขอประเมิน*/
+  //ผลงานที่เคยเสนอขอประเมิน (ถ้ามี)
   const columnAssessments = ref<QTableProps["columns"]>([
     {
-      name: "date",
+      name: "year",
       align: "left",
-      label: "วันที่ได้รับ",
+      label: "ปี พ.ศ.",
       sortable: true,
-      field: "date",
+      field: "year",
       headerStyle: "font-size: 14px",
       style: "font-size: 14px",
-      format: (v) => date2Thai(v),
     },
     {
-      name: "point1Total",
+      name: "type",
       align: "left",
-      label: "ส่วนที่1 (น้ำหนัก)",
+      label: "ระดับตอนที่ยื่นขอ",
       sortable: true,
-      field: "point1Total",
+      field: "type",
       headerStyle: "font-size: 14px",
       style: "font-size: 14px",
-      sort: (a: string, b: string) =>
-        a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
     },
     {
-      name: "point1",
+      name: "subject",
       align: "left",
-      label: "ผลประเมินส่วนที่1 (คะแนน)",
+      label: "เรื่อง/ชื่อเรื่อง",
       sortable: true,
-      field: "point1",
+      field: "subject",
       headerStyle: "font-size: 14px",
       style: "font-size: 14px",
-      sort: (a: string, b: string) =>
-        a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
     },
     {
-      name: "point2Total",
+      name: "evaluationResult",
       align: "left",
-      label: "ส่วนที่2 (น้ำหนัก)",
+      label: "ผลการประเมิน (ผ่าน/ไม่ผ่าน)",
       sortable: true,
-      field: "point2Total",
+      field: "evaluationResult",
       headerStyle: "font-size: 14px",
       style: "font-size: 14px",
-      sort: (a: string, b: string) =>
-        a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-    },
-    {
-      name: "point2",
-      align: "left",
-      label: "ผลประเมินส่วนที่2 (คะแนน)",
-      sortable: true,
-      field: "point2",
-      headerStyle: "font-size: 14px",
-      style: "font-size: 14px",
-      sort: (a: string, b: string) =>
-        a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-    },
-    {
-      name: "pointSumTotal",
-      align: "left",
-      label: "ผลรวม (น้ำหนัก)",
-      sortable: true,
-      field: "pointSumTotal",
-      headerStyle: "font-size: 14px",
-      style: "font-size: 14px",
-      sort: (a: string, b: string) =>
-        a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-    },
-    {
-      name: "pointSum",
-      align: "left",
-      label: "ผลประเมินรวม (คะแนน)",
-      sortable: true,
-      field: "pointSum",
-      headerStyle: "font-size: 14px",
-      style: "font-size: 14px",
-      sort: (a: string, b: string) =>
-        a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
     },
+  ]);
+
+  //ประสบการณ์ในการปฏิบัติงาน
+  const columnExperience = ref<QTableProps["columns"]>([
     {
       name: "name",
       align: "left",
-      label: "ผลประเมิน",
+      label: "ชื่อผลงาน",
       sortable: true,
       field: "name",
-      format(val, row) {
-        return `${textPoint(row.pointSum)} ${textRangePoint(row.pointSum)}`;
-      },
       headerStyle: "font-size: 14px",
       style: "font-size: 14px",
-      sort: (a: string, b: string) =>
-        a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+    },
+    {
+      name: "detail",
+      align: "left",
+      label: "รายละเอียดผลงาน",
+      sortable: true,
+      field: "detail",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
     },
   ]);
 
@@ -452,6 +420,8 @@ export const useEvaluateDetailStore = defineStore("evaluateDetailStore", () => {
     columnSalaries,
     columnTraining,
     columnAssessments,
+    columnExperience,
+
     pdfSrcStore,
     urlDownloadFile,
     numOfPagesStore,