diff --git a/src/api/evaluate/api.evaluate.ts b/src/api/evaluate/api.evaluate.ts
index 28c004d..49e511a 100644
--- a/src/api/evaluate/api.evaluate.ts
+++ b/src/api/evaluate/api.evaluate.ts
@@ -38,4 +38,7 @@ export default {
     `${evaluation}/document/${val}/${id}`,
   loadFileDocument: (val: string, id: string, file: String) =>
     `${evaluation}/document/${val}/${id}/${file}`,
+
+
+  evaluationExpertise:`${evaluation}/expertise`
 };
diff --git a/src/modules/06_evaluate/components/ExpertPage.vue b/src/modules/06_evaluate/components/ExpertPage.vue
index d7b6c69..e8e3100 100644
--- a/src/modules/06_evaluate/components/ExpertPage.vue
+++ b/src/modules/06_evaluate/components/ExpertPage.vue
@@ -1,13 +1,52 @@
 <script setup lang="ts">
-import { ref, reactive } from "vue";
-import { useRouter } from "vue-router";
+import { ref, reactive,watch,onMounted } from "vue";
+import { useRouter, useRoute } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar } from "quasar";
 import type { FormRef } from "@/modules/06_evaluate/interface/evalute";
+import axios from "axios";
+import http from "@/plugins/http";
+import config from "@/app.config";
 
+import genReport from "@/plugins/genreport";
+
+const router = useRouter();
+const route = useRoute();
+
+const evaluateId = ref<string>(route.params.id as string);
+const profile = ref<any>();
 const $q = useQuasar();
 const mixin = useCounterMixin();
-const { dialogConfirm, messageError, showLoader, hideLoader } = mixin;
+const {
+  dialogConfirm,
+  messageError,
+  showLoader,
+  hideLoader,
+  date2Thai,
+  success,
+} = mixin;
+
+interface FormCommand {
+  commanderFullname: string;
+  commanderPosition: string;
+  commanderAboveFullname: string;
+  commanderAbovePosition: string;
+  author: string;
+  subject: string;
+  assignedPosition: string;
+}
+
+/** form ผู้เซ็นเอกสาร*/
+const formCommand = reactive<FormCommand>({
+  commanderFullname: "",
+  commanderPosition: "",
+  commanderAboveFullname: "",
+  commanderAbovePosition: "",
+  author: "",
+  subject: "",
+  assignedPosition: "",
+});
+
 const formData = reactive<any>({
   subject: "",
   author: "",
@@ -17,7 +56,20 @@ const formData = reactive<any>({
   commanderAbovePosition: "",
 });
 
-const router = useRouter();
+const downloadFile1 = ref<string>("");
+const downloadFile2 = ref<string>("");
+const downloadFile3 = ref<string>("");
+const downloadFile4 = ref<string>("");
+const downloadFile5 = ref<string>("");
+const downloadFile6 = ref<string>("");
+
+/** ตัวแปร file*/
+const fileEvaluation1 = ref<any>();
+const fileEvaluation2 = ref<any>();
+const fileEvaluation3 = ref<any>();
+const fileEvaluation4 = ref<any>();
+const fileEvaluation5 = ref<any>();
+const fileEvaluation6 = ref<any>();
 
 const subjectRef = ref<Object | null>(null);
 const authorRef = ref<Object | null>(null);
@@ -41,11 +93,17 @@ const files = [
     id: "file1",
     fileName: "แบบพิจารณาคุณสมบัติบุคคล",
     pathName: "1-แบบพิจารณาคุณสมบัติบุคคล",
+    tp: "EV1_005",
+    templateName: "template-1",
+    nameFile: "แบบพิจารณาคุณสมบัติบุคคล",
   },
   {
     id: "file2",
     fileName: "แบบแสดงรายละเอียดการเสนอผลงาน",
     pathName: "2-แบบแสดงรายละเอียดการเสนอผลงาน",
+    tp: "EV1_006",
+    templateName: "template-2",
+    nameFile: "แบบแสดงรายละเอียดการเสนอผลงาน",
   },
   {
     id: "file3",
@@ -53,21 +111,34 @@ const files = [
       "แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล (เอกสารแบบ ก)",
     pathName:
       "3-แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล (เอกสารแบบ ก)",
+    tp: "EV1_007",
+    templateName: "template-3",
+    nameFile:
+      "แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล (เอกสารแบบ ก)",
   },
   {
     id: "file4",
     fileName: "แบบประเมินคุณลักษณะบุคคล",
     pathName: "4-แบบประเมินคุณลักษณะบุคคล",
+    tp: "EV1_008",
+    templateName: "template-4",
+    nameFile: "แบบประเมินคุณลักษณะบุคคล",
   },
   {
     id: "file5",
     fileName: "แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)",
     pathName: "5-แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)",
+    tp: "EV1_009",
+    templateName: "template-5",
+    nameFile: "แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)",
   },
   {
     id: "file6",
     fileName: "ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)",
     pathName: "6-ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)",
+    tp: "EV1_010",
+    templateName: "template-6",
+    nameFile: "ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)",
   },
 ];
 
@@ -93,25 +164,19 @@ async function downloadFile(name: string) {
 
 function onSubmit() {
   dialogConfirm($q, () => {
-    console.log(formData);
-    // showLoader();
-    // http
-    //   .post(config.API.createOrganization, formData)
-    //   .then((res) => {
-    //     status.value = true;
-    //     store.typeOrganizational = "draft";
-    //     store.draftId = res.data.result.id;
-    //     success($q, "บันทึกข้อมูลสำเร็จ");
-    //     // props.fetchActive?.();
-    //   })
-    //   .catch((err) => {
-    //     messageError($q, err);
-    //   })
-    //   .finally(async () => {
-    //     modal.value = await false;
-    //     await close();
-    //     await hideLoader();
-    //   });
+    showLoader();
+    http
+      .post(config.API.evaluationExpertise, formData)
+      .then((res) => {
+        router.push(`/evaluate/detail/expertise/${res.data.result.id}`)
+      })
+      .catch((err) => {
+        messageError($q, err);
+      })
+      .finally(async () => {
+        await close();
+        await hideLoader();
+      });
   });
 }
 
@@ -132,12 +197,174 @@ function validateForm() {
   } else {
   }
 }
+
+/**
+ * funcion ดาวน์โหลดไฟล์
+ * @param tp templatname
+ * @param templateName
+ * @param fileName ชือ่ไฟล์
+ */
+async function onClickDowloadFile(
+  tp: string,
+  templateName: string,
+  fileName: string
+) {
+  showLoader();
+  let educations: any = [];
+  if (profile.value != null) {
+    profile.value.educations.map((e: any) => {
+      educations.push({
+        educationLevel: e.educationLevel ?? "",
+        finishYear:
+          e.finishDate == null
+            ? ""
+            : new Date(e.finishDate).getFullYear() + 543,
+        institute: e.institute ?? "",
+      });
+    });
+  }
+  let certificates: any = [];
+  if (profile.value != null) {
+    profile.value.certificates.map((e: any) => {
+      certificates.push({
+        certificateNo: e.certificateNo ?? "",
+        certificateType: e.certificateType ?? "",
+        issuer: e.issuer ?? "",
+      });
+    });
+  }
+  let salaries: any = [];
+  if (profile.value != null) {
+    profile.value.salaries.map((e: any) => {
+      salaries.push({
+        date: e.date == null ? "" : date2Thai(new Date(e.date)),
+        position: e.position ?? "",
+        amount: e.amount ?? "",
+      });
+    });
+  }
+  let trainings: any = [];
+  if (profile.value != null) {
+    profile.value.trainings.map((e: any) => {
+      trainings.push({
+        yearly: e.yearly ?? "",
+        startDate: e.startDate == null ? "" : date2Thai(new Date(e.startDate)),
+        endDate: e.endDate == null ? "" : date2Thai(new Date(e.endDate)),
+        name: e.name ?? "",
+        topic: e.topic ?? "",
+      });
+    });
+  }
+  const data = Object.assign(
+    { educations: educations },
+    { certificates: certificates },
+    { salaries: salaries },
+    { trainings: trainings },
+    { fullName: profile.value == null ? "" : profile.value.fullName },
+    { position: profile.value == null ? "" : profile.value.position },
+    { positionLevel: profile.value == null ? "" : profile.value.positionLevel },
+    { posNo: profile.value == null ? "" : profile.value.posNo },
+    { oc: profile.value == null ? "" : profile.value.oc },
+    {
+      birthDate:
+        profile.value == null ? "" : date2Thai(profile.value.birthDate),
+    },
+    { govAge: profile.value == null ? "" : profile.value.govAge },
+    {
+      positionLevelNew:
+        profile.value == null
+          ? ""
+          : profile.value.type == "EXPERT"
+          ? "ชำนาญการ"
+          : "ชำนาญการพิเศษ",
+    },
+    tp === "EV1_005" || tp === "EV1_007" ? { organizationName: "-" } : null,
+    tp === "EV1_007" ? { positionName: "-" } : null,
+    tp === "EV1_007" ? { positionLeaveName: "-" } : null
+  );
+  const body = {
+    template: tp,
+    reportName: templateName,
+    data: data,
+  };
+  await genReport(body, fileName); //สร้างไฟล์ต้นแบบ
+}
+
+/**
+ * function fetch ลิงก์อัปโหลดไฟล์
+ * @param volume เล่ม
+ * @param id  evaluate ID
+ * @param type ประเภทไฟล์
+ * @param file ไฟล์
+ */
+async function fetchPathUpload(
+  volume: string,
+  id: string | undefined,
+  type: string,
+  file: any
+) {
+  const body = {
+    fileList: {
+      fileName: type,
+      metadata: {
+        subject: formCommand.subject,
+        author: formCommand.author,
+      },
+    },
+  };
+
+  if (id && file) {
+    showLoader();
+    await http
+      .post(config.API.loadPathDocument(volume, id), body)
+      .then((res) => {
+        const foundKey: string | undefined = Object.keys(res.data).find(
+          (key) =>
+            res.data[key]?.fileName !== undefined &&
+            res.data[key]?.fileName !== ""
+        );
+        foundKey && uploadfile(res.data[foundKey]?.uploadUrl, file);
+      })
+      .catch((err) => {
+        messageError($q, err);
+      })
+      .finally(() => {
+        downloadFile(type);
+        hideLoader();
+      });
+  }
+}
+
+/**
+ *  functoin อัปโหลดไฟล์
+ * @param uploadUrl  link อัปโหลด
+ * @param file  ไฟล์
+ */
+async function uploadfile(uploadUrl: string, file: any) {
+  showLoader();
+  await axios
+    .put(uploadUrl, file, {
+      headers: {
+        "Content-Type": file.type,
+      },
+    })
+    .then(() => {
+      success($q, "อัปโหลไฟล์สำเร็จ");
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
 </script>
 
 <template>
-  <form @submit.prevent="validateForm">
+  <q-form @submit.prevent="validateForm">
     <div class="col-12 row justify-center">
-      <div class="col-xs-12 col-sm-12 col-md-11">
+      <div class="col-xs-12 col-sm-12 col-md-11 q-mb-sm">
         <div class="toptitle text-white col-12 row items-center">
           <q-btn
             icon="mdi-arrow-left"
@@ -154,175 +381,181 @@ function validateForm() {
       </div>
 
       <div class="col-xs-12 col-sm-12 col-md-11 row q-col-gutter-md">
-        <div class="col-12 row">
-          <q-card
-            bordered
-            class="col-12 row caedNone q-pa-md q-col-gutter-y-md"
-          >
-            <div class="col-12">
-              <q-card bordered class="cardSp1 col-12">
-                <div
-                  class="text-weight-medium bg-grey-1 col-12 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">
-                    <q-input
-                      ref="subjectRef"
-                      dense
-                      class="col-xs-12 col-sm-6"
-                      outlined
-                      label="ชื่อผลงาน"
-                      v-model="formData.subject"
-                      :rules="[(val) => !!val || `${'กรุณากรอกชื่อผลงาน'}`]"
-                      lazy-rules
-                      hide-bottom-space
-                    />
-                    <q-input
-                      ref="authorRef"
-                      class="col-xs-12 col-sm-6"
-                      dense
-                      outlined
-                      v-model="formData.author"
-                      label="เจ้าของผลงาน"
-                      :rules="[(val) => !!val || `${'กรุณากรอกเจ้าของผลงาน'}`]"
-                      lazy-rules
-                      hide-bottom-space
-                    />
+        <div class="col-12">
+          <q-card bordered>
+            <div class="col-12 row q-pa-md q-col-gutter-y-md">
+              <div class="col-12">
+                <q-card bordered class="col-12">
+                  <div
+                    class="text-weight-medium bg-grey-1 col-12 q-py-sm q-px-md"
+                  >
+                    ผลงาน
                   </div>
-                </div>
-              </q-card>
-            </div>
-
-            <!-- เลือกผู้เซ็นเอกสาร -->
-            <div class="col-12">
-              <q-card bordered class="cardSp1 col-12">
-                <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">
-                    <div class="col-xs-12 col-sm-12 row">
-                      <div class="text-weight-medium q-pt-xs q-pl-sm">
-                        ผู้บังคับบัญชาชั้นต้น
-                      </div>
-                      <div class="row col-12 q-col-gutter-sm q-pa-sm">
-                        <q-input
-                          ref="commanderFullnameRef"
-                          dense
-                          class="col-xs-12 col-sm-6"
-                          outlined
-                          label="ชื่อ-นามสกุล"
-                          v-model="formData.commanderFullname"
-                          :rules="[
-                            (val) => !!val || `${'กรุณากรอกชื่อ-นามสกุล'}`,
-                          ]"
-                          lazy-rules
-                          hide-bottom-space
-                        />
-                        <q-input
-                          ref="commanderPositionRef"
-                          class="col-xs-12 col-sm-6"
-                          dense
-                          outlined
-                          v-model="formData.commanderPosition"
-                          label="ตำแหน่ง"
-                          :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่ง'}`]"
-                          lazy-rules
-                          hide-bottom-space
-                        />
-                      </div>
+                  <div class="col-12"><q-separator /></div>
+                  <div class="col-12 q-pa-sm">
+                    <div class="row q-col-gutter-sm">
+                      <q-input
+                        ref="subjectRef"
+                        dense
+                        class="col-xs-12 col-sm-6"
+                        outlined
+                        label="ชื่อผลงาน"
+                        v-model="formData.subject"
+                        :rules="[(val) => !!val || `${'กรุณากรอกชื่อผลงาน'}`]"
+                        lazy-rules
+                        hide-bottom-space
+                      />
+                      <q-input
+                        ref="authorRef"
+                        class="col-xs-12 col-sm-6"
+                        dense
+                        outlined
+                        v-model="formData.author"
+                        label="เจ้าของผลงาน"
+                        :rules="[
+                          (val) => !!val || `${'กรุณากรอกเจ้าของผลงาน'}`,
+                        ]"
+                        lazy-rules
+                        hide-bottom-space
+                      />
                     </div>
                   </div>
-                  <div class="row q-col-gutter-sm col-12">
-                    <div class="col-xs-12 col-sm-12 row">
-                      <div class="text-weight-medium q-pl-sm q-pt-sm">
-                        ผู้บังคับบัญชาเหนือขึ้นไป 1 ระดับ
-                      </div>
-                      <div class="row col-12 q-col-gutter-md q-pa-sm">
-                        <q-input
-                          ref="commanderAboveFullnameRef"
-                          dense
-                          class="col-xs-12 col-sm-6"
-                          outlined
-                          v-model="formData.commanderAboveFullname"
-                          label="ชื่อ-นามสกุล"
-                          :rules="[
-                            (val) => !!val || `${'กรุณากรอกชื่อ-นามสกุล'}`,
-                          ]"
-                          lazy-rules
-                          hide-bottom-space
-                        />
-                        <q-input
-                          ref="commanderAbovePositionRef"
-                          class="col-xs-12 col-sm-6"
-                          dense
-                          outlined
-                          v-model="formData.commanderAbovePosition"
-                          label="ตำแหน่ง"
-                          :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่ง'}`]"
-                          lazy-rules
-                          hide-bottom-space
-                        />
-                      </div>
-                    </div>
+                </q-card>
+              </div>
+
+              <!-- เลือกผู้เซ็นเอกสาร -->
+              <div class="col-12">
+                <q-card bordered class="col-12">
+                  <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
+                    เลือกผู้เซ็นเอกสาร
                   </div>
-                </div>
-              </q-card>
-            </div>
-
-            <div class="col-12">
-              <q-card bordered class="cardSp1 col-12">
-                <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
-                  ดาวน์โหลดเอกสาร
-                </div>
-                <div class="col-12"><q-separator /></div>
-
-                <q-list
-                  v-for="file in files"
-                  :key="file.id"
-                  class="full-width"
-                  bordered
-                >
-                  <q-item clickable v-ripple>
-                    <q-item-section class="text-grey-9">{{
-                      file.fileName
-                    }}</q-item-section>
-                    <q-item-section avatar>
-                      <div class="row">
-                        <div>
-                          <q-btn
+                  <div class="col-12"><q-separator /></div>
+                  <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="text-weight-medium q-pt-xs q-pl-sm">
+                          ผู้บังคับบัญชาชั้นต้น
+                        </div>
+                        <div class="row col-12 q-col-gutter-sm q-pa-sm">
+                          <q-input
+                            ref="commanderFullnameRef"
                             dense
-                            flat
-                            round
-                            size="12px"
-                            color="blue"
-                            icon="mdi-download"
-                            @click="downloadFile(file.pathName)"
-                          >
-                            <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
-                          </q-btn>
+                            class="col-xs-12 col-sm-6"
+                            outlined
+                            label="ชื่อ-นามสกุล"
+                            v-model="formData.commanderFullname"
+                            :rules="[
+                              (val) => !!val || `${'กรุณากรอกชื่อ-นามสกุล'}`,
+                            ]"
+                            lazy-rules
+                            hide-bottom-space
+                          />
+                          <q-input
+                            ref="commanderPositionRef"
+                            class="col-xs-12 col-sm-6"
+                            dense
+                            outlined
+                            v-model="formData.commanderPosition"
+                            label="ตำแหน่ง"
+                            :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่ง'}`]"
+                            lazy-rules
+                            hide-bottom-space
+                          />
                         </div>
                       </div>
-                    </q-item-section>
-                  </q-item>
-                </q-list>
-              </q-card>
-              <div class="q-pt-sm q-gutter-sm" align="right">
-                <q-btn
-                  type="submit"
-                  unelevated
-                  label="บันทึกข้อมูล"
-                  color="public"
-                />
+                    </div>
+                    <div class="row q-col-gutter-sm col-12">
+                      <div class="col-xs-12 col-sm-12 row">
+                        <div class="text-weight-medium q-pl-sm q-pt-sm">
+                          ผู้บังคับบัญชาเหนือขึ้นไป 1 ระดับ
+                        </div>
+                        <div class="row col-12 q-col-gutter-md q-pa-sm">
+                          <q-input
+                            ref="commanderAboveFullnameRef"
+                            dense
+                            class="col-xs-12 col-sm-6"
+                            outlined
+                            v-model="formData.commanderAboveFullname"
+                            label="ชื่อ-นามสกุล"
+                            :rules="[
+                              (val) => !!val || `${'กรุณากรอกชื่อ-นามสกุล'}`,
+                            ]"
+                            lazy-rules
+                            hide-bottom-space
+                          />
+                          <q-input
+                            ref="commanderAbovePositionRef"
+                            class="col-xs-12 col-sm-6"
+                            dense
+                            outlined
+                            v-model="formData.commanderAbovePosition"
+                            label="ตำแหน่ง"
+                            :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่ง'}`]"
+                            lazy-rules
+                            hide-bottom-space
+                          />
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </q-card>
+              </div>
+
+              <div class="col-12">
+                <q-card bordered>
+                  <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
+                    ดาวน์โหลดเอกสาร
+                  </div>
+                  <div class="col-12"><q-separator /></div>
+
+                  <q-list
+                    v-for="file in files"
+                    :key="file.id"
+                    class="full-width"
+                    bordered
+                  >
+                    <q-item clickable v-ripple>
+                      <q-item-section class="text-grey-9">{{
+                        file.fileName
+                      }}</q-item-section>
+                      <q-item-section avatar>
+                        <div class="row">
+                          <div>
+                            <q-btn
+                              dense
+                              flat
+                              round
+                              size="12px"
+                              color="blue"
+                              icon="mdi-download"
+                              @click="
+                                onClickDowloadFile(
+                                  file.tp,
+                                  file.templateName,
+                                  file.nameFile
+                                )
+                              "
+                            >
+                              <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
+                            </q-btn>
+                          </div>
+                        </div>
+                      </q-item-section>
+                    </q-item>
+                  </q-list>
+                </q-card>
               </div>
             </div>
+            <q-separator />
+
+            <q-card-actions align="right">
+              <q-btn label="บันทึกข้อมูล" color="secondary" type="submit"
+                ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
+              >
+            </q-card-actions>
           </q-card>
         </div>
       </div>
     </div>
-  </form>
+  </q-form>
 </template>
diff --git a/src/modules/06_evaluate/components/ExpertPageDetail.vue b/src/modules/06_evaluate/components/ExpertPageDetail.vue
new file mode 100644
index 0000000..00d8cc3
--- /dev/null
+++ b/src/modules/06_evaluate/components/ExpertPageDetail.vue
@@ -0,0 +1,1120 @@
+<script setup lang="ts">
+import { ref, reactive, watch, onMounted } from "vue";
+import { useRouter, useRoute } from "vue-router";
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar } from "quasar";
+import type { FormRef } from "@/modules/06_evaluate/interface/evalute";
+import axios from "axios";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+import genReport from "@/plugins/genreport";
+
+const router = useRouter();
+const route = useRoute();
+
+const evaluateId = ref<string>(route.params.id as string);
+const profile = ref<any>();
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const {
+  dialogConfirm,
+  messageError,
+  showLoader,
+  hideLoader,
+  date2Thai,
+  success,
+} = mixin;
+
+interface FormCommand {
+  commanderFullname: string;
+  commanderPosition: string;
+  commanderAboveFullname: string;
+  commanderAbovePosition: string;
+  author: string;
+  subject: string;
+  assignedPosition: string;
+}
+
+/** form ผู้เซ็นเอกสาร*/
+const formCommand = reactive<FormCommand>({
+  commanderFullname: "",
+  commanderPosition: "",
+  commanderAboveFullname: "",
+  commanderAbovePosition: "",
+  author: "",
+  subject: "",
+  assignedPosition: "",
+});
+
+const formData = reactive<any>({
+  id: "",
+  subject: "",
+  author: "",
+  commanderFullname: "",
+  commanderPosition: "",
+  commanderAboveFullname: "",
+  commanderAbovePosition: "",
+});
+
+const downloadFile1 = ref<string>("");
+const downloadFile2 = ref<string>("");
+const downloadFile3 = ref<string>("");
+const downloadFile4 = ref<string>("");
+const downloadFile5 = ref<string>("");
+const downloadFile6 = ref<string>("");
+
+/** ตัวแปร file*/
+const fileEvaluation1 = ref<any>();
+const fileEvaluation2 = ref<any>();
+const fileEvaluation3 = ref<any>();
+const fileEvaluation4 = ref<any>();
+const fileEvaluation5 = ref<any>();
+const fileEvaluation6 = ref<any>();
+
+const fileEvaluation1Ref = ref<object | null>(null);
+const fileEvaluation2Ref = ref<object | null>(null);
+const fileEvaluation3Ref = ref<object | null>(null);
+const fileEvaluation4Ref = ref<object | null>(null);
+const fileEvaluation5Ref = ref<object | null>(null);
+const fileEvaluation6Ref = ref<object | null>(null);
+const performanceRef = ref<object | null>(null);
+const performanceOwnerRef = ref<object | null>(null);
+
+const subjectRef = ref<Object | null>(null);
+const authorRef = ref<Object | null>(null);
+const commanderFullnameRef = ref<Object | null>(null);
+const commanderPositionRef = ref<Object | null>(null);
+const commanderAboveFullnameRef = ref<Object | null>(null);
+const commanderAbovePositionRef = ref<Object | null>(null);
+
+/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
+const objectRef: FormRef = {
+  subject: subjectRef,
+  author: authorRef,
+  commanderFullname: commanderFullnameRef,
+  commanderPosition: commanderPositionRef,
+  commanderAboveFullname: commanderAboveFullnameRef,
+  commanderAbovePosition: commanderAbovePositionRef,
+};
+
+const files = [
+  {
+    id: "file1",
+    fileName: "แบบพิจารณาคุณสมบัติบุคคล",
+    pathName: "1-แบบพิจารณาคุณสมบัติบุคคล",
+    tp: "EV1_005",
+    templateName: "template-1",
+    nameFile: "แบบพิจารณาคุณสมบัติบุคคล",
+  },
+  {
+    id: "file2",
+    fileName: "แบบแสดงรายละเอียดการเสนอผลงาน",
+    pathName: "2-แบบแสดงรายละเอียดการเสนอผลงาน",
+    tp: "EV1_006",
+    templateName: "template-2",
+    nameFile: "แบบแสดงรายละเอียดการเสนอผลงาน",
+  },
+  {
+    id: "file3",
+    fileName:
+      "แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล (เอกสารแบบ ก)",
+    pathName:
+      "3-แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล (เอกสารแบบ ก)",
+    tp: "EV1_007",
+    templateName: "template-3",
+    nameFile:
+      "แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล (เอกสารแบบ ก)",
+  },
+  {
+    id: "file4",
+    fileName: "แบบประเมินคุณลักษณะบุคคล",
+    pathName: "4-แบบประเมินคุณลักษณะบุคคล",
+    tp: "EV1_008",
+    templateName: "template-4",
+    nameFile: "แบบประเมินคุณลักษณะบุคคล",
+  },
+  {
+    id: "file5",
+    fileName: "แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)",
+    pathName: "5-แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)",
+    tp: "EV1_009",
+    templateName: "template-5",
+    nameFile: "แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)",
+  },
+  {
+    id: "file6",
+    fileName: "ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)",
+    pathName: "6-ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)",
+    tp: "EV1_010",
+    templateName: "template-6",
+    nameFile: "ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)",
+  },
+];
+
+/**
+ * function ดาวน์โหลดไฟล์
+ * @param fileName ชื่อไฟล์
+ */
+ async function downloadFile(fileName: string) {
+  showLoader();
+  await http
+    .get(config.API.loadFileDocument("ประเมินเชี่ยวชาญ", evaluateId.value, fileName))
+    .then((res) => {
+      if (fileName === "1-แบบพิจารณาคุณสมบัติบุคคล") {
+        downloadFile1.value = res.data.downloadUrl;
+        // fileEvaluation1.value = res.data.upload;
+      } else if (fileName === "2-แบบแสดงรายละเอียดการเสนอผลงาน") {
+        downloadFile2.value = res.data.downloadUrl;
+        // fileEvaluation2.value = res.data.upload;
+      } else if (
+        fileName ===
+        "3-แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล (เอกสารแบบ ก)"
+      ) {
+        downloadFile3.value = res.data.downloadUrl;
+        // fileEvaluation3.value = res.data.upload;
+      } else if (fileName === "4-แบบประเมินคุณลักษณะบุคคล") {
+        downloadFile4.value = res.data.downloadUrl;
+        // fileEvaluation4.value = res.data.upload;
+      } else if (
+        fileName === "5-แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)"
+      ) {
+        downloadFile5.value = res.data.downloadUrl;
+        // fileEvaluation5.value = res.data.upload;
+      } else if (fileName === "6-ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)") {
+        downloadFile6.value = res.data.downloadUrl;
+        // fileEvaluation6.value = res.data.upload;
+      }
+    })
+    .finally(() => {
+      const ref = {
+        commanderFullnameRef: commanderFullnameRef.value,
+        commanderPositionRef: commanderPositionRef.value,
+        commanderAboveFullnameRef: commanderAboveFullnameRef.value,
+        commanderAbovePositionRef: commanderAbovePositionRef.value,
+        fileEvaluation1Ref: fileEvaluation1Ref.value,
+        fileEvaluation2Ref: fileEvaluation2Ref.value,
+        fileEvaluation3Ref: fileEvaluation3Ref.value,
+        fileEvaluation4Ref: fileEvaluation4Ref.value,
+        fileEvaluation5Ref: fileEvaluation5Ref.value,
+        fileEvaluation6Ref: fileEvaluation6Ref.value,
+        performance: performanceRef.value,
+        performanceOwner: performanceOwnerRef.value,
+        downloadFile: [
+          downloadFile1.value,
+          downloadFile2.value,
+          downloadFile3.value,
+          downloadFile4.value,
+          downloadFile5.value,
+          downloadFile6.value,
+        ],
+        statusUpload: false,
+      };
+
+      hideLoader();
+    });
+}
+
+
+function onSubmit() {
+  dialogConfirm($q, () => {
+    showLoader();
+    http
+      .post(config.API.evaluationExpertise, formData)
+      .then((res) => {
+        // props.fetchActive?.();
+      })
+      .catch((err) => {
+        messageError($q, err);
+      })
+      .finally(async () => {
+        await close();
+        await hideLoader();
+      });
+  });
+}
+
+/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
+function validateForm() {
+  const hasError = [];
+  for (const key in objectRef) {
+    if (Object.prototype.hasOwnProperty.call(objectRef, key)) {
+      const property = objectRef[key];
+      if (property.value && typeof property.value.validate === "function") {
+        const isValid = property.value.validate();
+        hasError.push(isValid);
+      }
+    }
+  }
+  if (hasError.every((result) => result === true)) {
+    onSubmit();
+  } else {
+  }
+}
+
+/**
+ * funcion ดาวน์โหลดไฟล์
+ * @param tp templatname
+ * @param templateName
+ * @param fileName ชือ่ไฟล์
+ */
+async function onClickDowloadFile(
+  tp: string,
+  templateName: string,
+  fileName: string
+) {
+  showLoader();
+  let educations: any = [];
+  if (profile.value != null) {
+    profile.value.educations.map((e: any) => {
+      educations.push({
+        educationLevel: e.educationLevel ?? "",
+        finishYear:
+          e.finishDate == null
+            ? ""
+            : new Date(e.finishDate).getFullYear() + 543,
+        institute: e.institute ?? "",
+      });
+    });
+  }
+  let certificates: any = [];
+  if (profile.value != null) {
+    profile.value.certificates.map((e: any) => {
+      certificates.push({
+        certificateNo: e.certificateNo ?? "",
+        certificateType: e.certificateType ?? "",
+        issuer: e.issuer ?? "",
+      });
+    });
+  }
+  let salaries: any = [];
+  if (profile.value != null) {
+    profile.value.salaries.map((e: any) => {
+      salaries.push({
+        date: e.date == null ? "" : date2Thai(new Date(e.date)),
+        position: e.position ?? "",
+        amount: e.amount ?? "",
+      });
+    });
+  }
+  let trainings: any = [];
+  if (profile.value != null) {
+    profile.value.trainings.map((e: any) => {
+      trainings.push({
+        yearly: e.yearly ?? "",
+        startDate: e.startDate == null ? "" : date2Thai(new Date(e.startDate)),
+        endDate: e.endDate == null ? "" : date2Thai(new Date(e.endDate)),
+        name: e.name ?? "",
+        topic: e.topic ?? "",
+      });
+    });
+  }
+  const data = Object.assign(
+    { educations: educations },
+    { certificates: certificates },
+    { salaries: salaries },
+    { trainings: trainings },
+    { fullName: profile.value == null ? "" : profile.value.fullName },
+    { position: profile.value == null ? "" : profile.value.position },
+    { positionLevel: profile.value == null ? "" : profile.value.positionLevel },
+    { posNo: profile.value == null ? "" : profile.value.posNo },
+    { oc: profile.value == null ? "" : profile.value.oc },
+    {
+      birthDate:
+        profile.value == null ? "" : date2Thai(profile.value.birthDate),
+    },
+    { govAge: profile.value == null ? "" : profile.value.govAge },
+    {
+      positionLevelNew:
+        profile.value == null
+          ? ""
+          : profile.value.type == "EXPERT"
+          ? "ชำนาญการ"
+          : "ชำนาญการพิเศษ",
+    },
+    tp === "EV1_005" || tp === "EV1_007" ? { organizationName: "-" } : null,
+    tp === "EV1_007" ? { positionName: "-" } : null,
+    tp === "EV1_007" ? { positionLeaveName: "-" } : null
+  );
+  const body = {
+    template: tp,
+    reportName: templateName,
+    data: data,
+  };
+  await genReport(body, fileName); //สร้างไฟล์ต้นแบบ
+}
+
+/**
+ * function fetch ลิงก์อัปโหลดไฟล์
+ * @param volume เล่ม
+ * @param id  evaluate ID
+ * @param type ประเภทไฟล์
+ * @param file ไฟล์
+ */
+async function fetchPathUpload(
+  volume: string,
+  id: string | undefined,
+  type: string,
+  file: any
+) {
+  const body = {
+    fileList: {
+      fileName: type,
+      metadata: {
+        subject: formCommand.subject,
+        author: formCommand.author,
+      },
+    },
+  };
+
+  if (id && file) {
+    showLoader();
+    await http
+      .post(config.API.loadPathDocument(volume, id), body)
+      .then((res) => {
+        const foundKey: string | undefined = Object.keys(res.data).find(
+          (key) =>
+            res.data[key]?.fileName !== undefined &&
+            res.data[key]?.fileName !== ""
+        );
+        foundKey && uploadfile(res.data[foundKey]?.uploadUrl, file);
+      })
+      .catch((err) => {
+        messageError($q, err);
+      })
+      .finally(() => {
+        downloadFile(type);
+        hideLoader();
+      });
+  }
+}
+
+/**
+ *  functoin อัปโหลดไฟล์
+ * @param uploadUrl  link อัปโหลด
+ * @param file  ไฟล์
+ */
+async function uploadfile(uploadUrl: string, file: any) {
+  showLoader();
+  await axios
+    .put(uploadUrl, file, {
+      headers: {
+        "Content-Type": file.type,
+      },
+    })
+    .then(() => {
+      success($q, "อัปโหลไฟล์สำเร็จ");
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+function getData() {
+  showLoader();
+  http
+    .get(config.API.evaluationExpertise + `/${evaluateId.value}`)
+    .then((res) => {
+      const data = res.data.result;
+      formData.id = data.id;
+      formData.commanderFullname = data.commanderFullname;
+      formData.commanderPosition = data.commanderPosition;
+      formData.commanderAboveFullname = data.commanderAboveFullname;
+      formData.commanderAbovePosition = data.commanderAbovePosition;
+      formData.author = data.author;
+      formData.subject = data.subject;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+onMounted(() => {
+  getData();
+  downloadFile("1-แบบพิจารณาคุณสมบัติบุคคล");
+  downloadFile("2-แบบแสดงรายละเอียดการเสนอผลงาน");
+  downloadFile("3-แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล (เอกสารแบบ ก)");
+  downloadFile("4-แบบประเมินคุณลักษณะบุคคล");
+  downloadFile("5-แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)");
+  downloadFile("6-ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)");
+});
+</script>
+
+<template>
+  <q-form @submit.prevent="validateForm">
+    <div class="col-12 row justify-center">
+      <div class="col-xs-12 col-sm-12 col-md-11 q-mb-sm">
+        <div class="toptitle text-white col-12 row items-center">
+          <q-btn
+            icon="mdi-arrow-left"
+            unelevated
+            round
+            dense
+            flat
+            color="primary"
+            class="q-mr-sm"
+            @click="router.push(`/evaluate`)"
+          />
+          <div>ประเมินเชี่ยวชาญ</div>
+        </div>
+      </div>
+
+      <div class="col-xs-12 col-sm-12 col-md-11 row q-col-gutter-md">
+        <div class="col-12">
+          <q-card bordered>
+            <div class="col-12 row q-pa-md q-col-gutter-y-md">
+              <div class="col-12">
+                <q-card bordered class="col-12">
+                  <div
+                    class="text-weight-medium bg-grey-1 col-12 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">
+                      <q-input
+                        ref="subjectRef"
+                        dense
+                        readonly
+                        class="col-xs-12 col-sm-6"
+                        outlined
+                        label="ชื่อผลงาน"
+                        v-model="formData.subject"
+                        :rules="[(val) => !!val || `${'กรุณากรอกชื่อผลงาน'}`]"
+                        lazy-rules
+                        hide-bottom-space
+                      />
+                      <q-input
+                        ref="authorRef"
+                        class="col-xs-12 col-sm-6"
+                        dense
+                        readonly
+                        outlined
+                        v-model="formData.author"
+                        label="เจ้าของผลงาน"
+                        :rules="[
+                          (val) => !!val || `${'กรุณากรอกเจ้าของผลงาน'}`,
+                        ]"
+                        lazy-rules
+                        hide-bottom-space
+                      />
+                    </div>
+                  </div>
+                </q-card>
+              </div>
+
+              <!-- เลือกผู้เซ็นเอกสาร -->
+              <div class="col-12">
+                <q-card bordered class="col-12">
+                  <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">
+                      <div class="col-xs-12 col-sm-12 row">
+                        <div class="text-weight-medium q-pt-xs q-pl-sm">
+                          ผู้บังคับบัญชาชั้นต้น
+                        </div>
+                        <div class="row col-12 q-col-gutter-sm q-pa-sm">
+                          <q-input
+                            ref="commanderFullnameRef"
+                            dense
+                            class="col-xs-12 col-sm-6"
+                            readonly
+                            outlined
+                            label="ชื่อ-นามสกุล"
+                            v-model="formData.commanderFullname"
+                            :rules="[
+                              (val) => !!val || `${'กรุณากรอกชื่อ-นามสกุล'}`,
+                            ]"
+                            lazy-rules
+                            hide-bottom-space
+                          />
+                          <q-input
+                            ref="commanderPositionRef"
+                            class="col-xs-12 col-sm-6"
+                            readonly
+                            dense
+                            outlined
+                            v-model="formData.commanderPosition"
+                            label="ตำแหน่ง"
+                            :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่ง'}`]"
+                            lazy-rules
+                            hide-bottom-space
+                          />
+                        </div>
+                      </div>
+                    </div>
+                    <div class="row q-col-gutter-sm col-12">
+                      <div class="col-xs-12 col-sm-12 row">
+                        <div class="text-weight-medium q-pl-sm q-pt-sm">
+                          ผู้บังคับบัญชาเหนือขึ้นไป 1 ระดับ
+                        </div>
+                        <div class="row col-12 q-col-gutter-md q-pa-sm">
+                          <q-input
+                            ref="commanderAboveFullnameRef"
+                            dense
+                            class="col-xs-12 col-sm-6"
+                            outlined
+                            readonly
+                            v-model="formData.commanderAboveFullname"
+                            label="ชื่อ-นามสกุล"
+                            :rules="[
+                              (val) => !!val || `${'กรุณากรอกชื่อ-นามสกุล'}`,
+                            ]"
+                            lazy-rules
+                            hide-bottom-space
+                          />
+                          <q-input
+                            ref="commanderAbovePositionRef"
+                            class="col-xs-12 col-sm-6"
+                            dense
+                            readonly
+                            outlined
+                            v-model="formData.commanderAbovePosition"
+                            label="ตำแหน่ง"
+                            :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่ง'}`]"
+                            lazy-rules
+                            hide-bottom-space
+                          />
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </q-card>
+              </div>
+              <div class="col-12">
+                <div class="row q-col-gutter-sm">
+                  <!-- แบบพิจารณาคุณสมบัติบุคคล -->
+                  <div class="col-6">
+                    <q-card bordered>
+                      <div
+                        class="text-weight-medium bg-grey-1 q-py-sm q-pl-md q-pr-sm col-12 row items-center"
+                      >
+                        <div>แบบพิจารณาคุณสมบัติบุคคล</div>
+                        <q-space />
+                        <div>
+                          <q-btn
+                            flat
+                            dense
+                            icon="download"
+                            color="indigo"
+                            @click="
+                              onClickDowloadFile(
+                                'EV1_005',
+                                'template-1',
+                                'แบบพิจารณาคุณสมบัติบุคคล'
+                              )
+                            "
+                          >
+                            <q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
+                          >
+                        </div>
+                        <div>
+                          <q-btn
+                            v-if="downloadFile1 != ''"
+                            :href="downloadFile1"
+                            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="fileEvaluation1Ref"
+                              v-model="fileEvaluation1"
+                              class="col-xs-12 col-sm-12"
+                              outlined
+                              dense
+                              lazy-rules
+                              hide-bottom-space
+                              accept=".pdf"
+                              :rules="
+                                downloadFile1 === ''
+                                  ? [(val) => !!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="
+                                    fetchPathUpload(
+                                      'ประเมินเชี่ยวชาญ',
+                                      evaluateId,
+                                      '1-แบบพิจารณาคุณสมบัติบุคคล',
+                                      fileEvaluation1
+                                    )
+                                  "
+                                  ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
+                                >
+                              </template>
+                            </q-file>
+                          </div>
+                        </div>
+                      </div>
+                    </q-card>
+                  </div>
+
+                  <!-- แบบแสดงรายละเอียดการเสนอผลงาน     -->
+                  <div class="col-6">
+                    <q-card bordered>
+                      <div
+                        class="text-weight-medium bg-grey-1 q-py-sm q-pl-md q-pr-sm col-12 row items-center"
+                      >
+                        <div>แบบแสดงรายละเอียดการเสนอผลงาน</div>
+                        <q-space />
+                        <div>
+                          <q-btn
+                            flat
+                            dense
+                            icon="download"
+                            color="indigo"
+                            @click="
+                              onClickDowloadFile(
+                                'EV1_006',
+                                'template-2',
+                                'แบบแสดงรายละเอียดการเสนอผลงาน'
+                              )
+                            "
+                          >
+                            <q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
+                          >
+                        </div>
+                        <div>
+                          <q-btn
+                            v-if="downloadFile2 != ''"
+                            :href="downloadFile2"
+                            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="fileEvaluation2Ref"
+                              v-model="fileEvaluation2"
+                              class="col-12"
+                              outlined
+                              dense
+                              lazy-rules
+                              accept=".pdf"
+                              hide-bottom-space
+                              :rules="
+                                downloadFile2 === ''
+                                  ? [(val) => !!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="
+                                    fetchPathUpload(
+                                      'ประเมินเชี่ยวชาญ',
+                                      evaluateId,
+                                      '2-แบบแสดงรายละเอียดการเสนอผลงาน',
+                                      fileEvaluation2
+                                    )
+                                  "
+                                  ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
+                                >
+                              </template>
+                            </q-file>
+                          </div>
+                        </div>
+                      </div>
+                    </q-card>
+                  </div>
+
+                  <!-- แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล (เอกสารแบบ ก) -->
+                  <div class="col-6">
+                    <q-card bordered>
+                      <div
+                        class="col-12 row text-weight-medium bg-grey-1 q-py-sm q-pl-md q-pr-sm no-wrap"
+                      >
+                        <div>
+                          แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล
+                          (เอกสารแบบ ก.)
+                        </div>
+                        <q-space />
+                        <div>
+                          <q-btn
+                            flat
+                            dense
+                            icon="download"
+                            color="indigo"
+                            @click="
+                              onClickDowloadFile(
+                                'EV1_007',
+                                'template-3',
+                                'แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล (เอกสารแบบ ก)'
+                              )
+                            "
+                          >
+                            <q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
+                          >
+                        </div>
+                        <div v-if="downloadFile3 != ''">
+                          <q-btn
+                            :href="downloadFile3"
+                            target="_blank"
+                            flat
+                            dense
+                            icon="visibility"
+                            class="q-ml-sm"
+                            color="blue"
+                          >
+                            <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">
+                          <q-file
+                            ref="fileEvaluation3Ref"
+                            v-model="fileEvaluation3"
+                            class="col-12"
+                            outlined
+                            dense
+                            lazy-rules
+                            hide-bottom-space
+                            accept=".pdf"
+                            :rules="
+                              downloadFile3 === ''
+                                ? [(val) => !!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="
+                                  fetchPathUpload(
+                                    'ประเมินเชี่ยวชาญ',
+                                    evaluateId,
+                                    '3-แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล (เอกสารแบบ ก)',
+                                    fileEvaluation3
+                                  )
+                                "
+                                ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
+                              >
+                            </template>
+                          </q-file>
+                        </div>
+                      </div>
+                    </q-card>
+                  </div>
+
+                  <!-- แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9) -->
+                  <div class="col-6">
+                    <q-card bordered>
+                      <div
+                        class="col-12 row text-weight-medium bg-grey-1 q-py-sm q-pl-md q-pr-sm no-wrap"
+                      >
+                        <div class="col-7">
+                          แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)
+                        </div>
+                        <q-space />
+                        <div>
+                          <q-btn
+                            flat
+                            dense
+                            icon="download"
+                            color="indigo"
+                            @click="
+                              onClickDowloadFile(
+                                'EV1_009',
+                                'template-5',
+                                'แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)'
+                              )
+                            "
+                            ><q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
+                          >
+                        </div>
+                        <div>
+                          <q-btn
+                            v-if="downloadFile5 != ''"
+                            :href="downloadFile5"
+                            target="_blank"
+                            flat
+                            dense
+                            icon="visibility"
+                            class="q-ml-sm"
+                            color="blue"
+                          >
+                            <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">
+                          <q-file
+                            ref="fileEvaluation5Ref"
+                            v-model="fileEvaluation5"
+                            class="col-12"
+                            outlined
+                            dense
+                            lazy-rules
+                            accept=".pdf"
+                            hide-bottom-space
+                            :rules="
+                              downloadFile5 === ''
+                                ? [(val) => !!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="
+                                  fetchPathUpload(
+                                    'ประเมินเชี่ยวชาญ',
+                                    evaluateId,
+                                    '5-แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)',
+                                    fileEvaluation5
+                                  )
+                                "
+                                ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
+                              >
+                            </template>
+                          </q-file>
+                        </div>
+                      </div>
+                    </q-card>
+                  </div>
+
+                  <!-- แบบประเมินคุณลักษณะบุคคล -->
+                  <div class="col-6">
+                    <q-card bordered>
+                      <div
+                        class="col-12 row text-weight-medium bg-grey-1 q-py-sm q-pl-md q-pr-sm items-center"
+                      >
+                        <div>แบบประเมินคุณลักษณะบุคคล</div>
+                        <q-space />
+                        <div>
+                          <q-btn
+                            flat
+                            dense
+                            icon="download"
+                            color="indigo"
+                            @click="
+                              onClickDowloadFile(
+                                'EV1_008',
+                                'template-4',
+                                'แบบประเมินคุณลักษณะบุคคล'
+                              )
+                            "
+                          >
+                            <q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
+                          >
+                        </div>
+                        <div>
+                          <q-btn
+                            v-if="downloadFile4 != ''"
+                            :href="downloadFile4"
+                            target="_blank"
+                            flat
+                            dense
+                            icon="visibility"
+                            class="q-ml-sm"
+                            color="blue"
+                          >
+                            <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">
+                          <q-file
+                            ref="fileEvaluation4Ref"
+                            v-model="fileEvaluation4"
+                            class="col-12"
+                            outlined
+                            dense
+                            lazy-rules
+                            hide-bottom-space
+                            accept=".pdf"
+                            :rules="
+                              downloadFile4 === ''
+                                ? [(val) => !!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="
+                                  fetchPathUpload(
+                                    'ประเมินเชี่ยวชาญ',
+                                    evaluateId,
+                                    '4-แบบประเมินคุณลักษณะบุคคล',
+                                    fileEvaluation4
+                                  )
+                                "
+                                ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
+                              >
+                            </template>
+                          </q-file>
+                        </div>
+                      </div>
+                    </q-card>
+                  </div>
+
+                  <!--ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11) -->
+                  <div class="col-6">
+                    <q-card bordered>
+                      <div
+                        class="col-12 row text-weight-medium bg-grey-1 q-py-sm q-pl-md q-pr-sm items-center"
+                      >
+                        <div>ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)</div>
+                        <q-space />
+                        <div>
+                          <q-btn
+                            flat
+                            dense
+                            icon="download"
+                            color="indigo"
+                            @click="
+                              onClickDowloadFile(
+                                'EV1_010',
+                                'template-6',
+                                'ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)'
+                              )
+                            "
+                          >
+                            <q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
+                          >
+                        </div>
+                        <div>
+                          <q-btn
+                            v-if="downloadFile6 != ''"
+                            :href="downloadFile6"
+                            target="_blank"
+                            flat
+                            dense
+                            icon="visibility"
+                            class="q-ml-sm"
+                            color="blue"
+                          >
+                            <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">
+                          <q-file
+                            ref="fileEvaluation6Ref"
+                            v-model="fileEvaluation6"
+                            class="col-12"
+                            outlined
+                            hide-bottom-space
+                            dense
+                            lazy-rules
+                            accept=".pdf"
+                            :rules="
+                              downloadFile6 === ''
+                                ? [(val) => !!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="
+                                  fetchPathUpload(
+                                    'ประเมินเชี่ยวชาญ',
+                                    evaluateId,
+                                    '6-ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)',
+                                    fileEvaluation6
+                                  )
+                                "
+                                ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
+                              >
+                            </template>
+                          </q-file>
+                        </div>
+                      </div>
+                    </q-card>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </q-card>
+        </div>
+      </div>
+    </div>
+  </q-form>
+</template>
diff --git a/src/modules/06_evaluate/components/TableListEvaluate.vue b/src/modules/06_evaluate/components/TableListEvaluate.vue
index 6b0f5ec..d134159 100644
--- a/src/modules/06_evaluate/components/TableListEvaluate.vue
+++ b/src/modules/06_evaluate/components/TableListEvaluate.vue
@@ -42,7 +42,7 @@ const props = defineProps({
 const emit = defineEmits(["update:pagination"]);
 
 /** ค้นหาคอลัม */
-const visibleColumns = ref<string[]>(["no", "type", "dateSend", "status"]);
+const visibleColumns = ref<string[]>(["no", "type_th", "dateSend", "status"]);
 const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -54,11 +54,11 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px; ",
   },
   {
-    name: "type",
+    name: "type_th",
     align: "left",
     label: "ระดับที่ยื่นขอ",
     sortable: true,
-    field: "type",
+    field: "type_th",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px; ",
   },
diff --git a/src/modules/06_evaluate/router.ts b/src/modules/06_evaluate/router.ts
index 6a1d5d7..eb5530f 100644
--- a/src/modules/06_evaluate/router.ts
+++ b/src/modules/06_evaluate/router.ts
@@ -3,6 +3,7 @@ const evaluateMain = () =>
 const evaluateStep = () =>
   import("@/modules/06_evaluate/components/EvaluateStepMain.vue");
 const expertPage = () => import('@/modules/06_evaluate/components/ExpertPage.vue')
+const expertPageDetail = () => import('@/modules/06_evaluate/components/ExpertPageDetail.vue')
 export default [
   {
     path: "/evaluate",
@@ -41,4 +42,13 @@ export default [
       Key: [7],
     },
   },
+  {
+    path: "/evaluate/detail/expertise/:id",
+    name: "evaluate-expert-detail",
+    component: expertPageDetail,
+    meta: {
+      Auth: true,
+      Key: [7],
+    },
+  },
 ];
diff --git a/src/modules/06_evaluate/store.ts b/src/modules/06_evaluate/store.ts
index 07a654a..7e96584 100644
--- a/src/modules/06_evaluate/store.ts
+++ b/src/modules/06_evaluate/store.ts
@@ -20,7 +20,8 @@ export const useEvaluateStore = defineStore("evaluateStore", () => {
     const list = data.map((e: any) => ({
       id: e.id,
       typeparam: e.type,
-      type: e.type === "EXPERT" ? "ชำนาญการ" : "ชำนาญการพิเศษ",
+      type: e.type,
+      type_th: e.type_th,
       dateSend: date2Thai(e.updatedAt),
       status: convertStatus(e.step),
       step: e.step,