diff --git a/src/api/reports/api.report.ts b/src/api/reports/api.report.ts
index 6b00ebe13..6230ed1ae 100644
--- a/src/api/reports/api.report.ts
+++ b/src/api/reports/api.report.ts
@@ -4,6 +4,7 @@
 import env from "../index";
 const reportOrder = `${env.API_REPORT2_URI}/report/order`;
 const reportRetire = `${env.API_REPORT2_URI}/report/retire`;
+const reportProbation = `${env.API_REPORT2_URI}/report/probation`;
 
 export default {
   reportOrderCover: (fileType: string, id: string, commandCode: string) =>
@@ -17,4 +18,14 @@ export default {
     `${reportOrder}/${format}/cover/${fileType}/${id}`,
   fileAttachment: (format: string, fileType: string, id: string) =>
     `${reportOrder}/${format}/attachment/${fileType}/${id}`,
+
+
+    //ระบบทดลองงาน
+    reportAssign:(type:string, id:string) => `${reportProbation}/13/${type}/${id}`,
+    reportEvaluate:(type:string, id:string) => `${reportProbation}/14/${type}/${id}`,
+    reportEvaluateRecord1:(type:string, id:string) => `${reportProbation}/15/${type}/${id}`,
+    reportEvaluateRecord2:(type:string, id:string) => `${reportProbation}/16/${type}/${id}`,
+    reportEvaluateChairman:(type:string, id:string) => `${reportProbation}/17/${type}/${id}`,
+    reportEvaluateResult:(type:string, id:string) => `${reportProbation}/18/${type}/${id}`,
+    reportSurvey:(type:string, id:string) => `${reportProbation}/19/${type}/${id}`
 };
diff --git a/src/modules/05_placement/components/probation/FormAssign.vue b/src/modules/05_placement/components/probation/FormAssign.vue
index cd171aa8c..f18e1b69c 100644
--- a/src/modules/05_placement/components/probation/FormAssign.vue
+++ b/src/modules/05_placement/components/probation/FormAssign.vue
@@ -25,18 +25,16 @@ const dataEdit = async (id: string) => {
       // console.log("success put==>",res)
       // console.log("save")
     })
-    .catch((e) => { })
+    .catch((e) => {})
     .finally(async () => {
-      status.value = false
-      getAssign()
+      status.value = false;
+      getAssign();
       hideLoader();
     });
-
-
-}
+};
 const saveEdit = (id: string) => {
-  dialogConfirm($q, () => dataEdit(id))
-}
+  dialogConfirm($q, () => dataEdit(id));
+};
 const edit = () => {
   status.value = true;
   // console.log(status.value);
@@ -56,7 +54,7 @@ const {
   hideLoader,
   dialogConfirm,
   dialogMessageNotify,
-  modalWarning
+  modalWarning,
 } = mixin;
 const filterData = (options: any[], excludedGroups: any[]) => {
   return options.filter(
@@ -371,7 +369,7 @@ const postDateTime = async () => {
       const result = res.data;
       date_finish.value = result.finish_date;
     })
-    .catch((e) => { })
+    .catch((e) => {})
     .finally(async () => {
       hideLoader();
     });
@@ -431,17 +429,26 @@ const putDataEdit = (id: string) => {
     {
       personal_id: caretaker1.value.personal_id,
       role: "mentor",
-      dated: date2.value instanceof Date ? dateToISO(date2.value) : dateToISO(new Date(date2.value)),
+      dated:
+        date2.value instanceof Date
+          ? dateToISO(date2.value)
+          : dateToISO(new Date(date2.value)),
     },
     {
       personal_id: caretaker2.value.personal_id,
       role: "mentor",
-      dated: date3.value instanceof Date ? dateToISO(date3.value) : dateToISO(new Date(date3.value)),
+      dated:
+        date3.value instanceof Date
+          ? dateToISO(date3.value)
+          : dateToISO(new Date(date3.value)),
     },
     {
       personal_id: commander.value.personal_id,
       role: "commander",
-      dated: date4.value instanceof Date ? dateToISO(date4.value) : dateToISO(new Date(date4.value)),
+      dated:
+        date4.value instanceof Date
+          ? dateToISO(date4.value)
+          : dateToISO(new Date(date4.value)),
     },
     {
       personal_id: chairman.value.personal_id,
@@ -475,7 +482,8 @@ const putDataEdit = (id: string) => {
     assign_outputs: Productivity_assign.filter((item) => item !== null),
     // commander: commander.value,
     assign_director: assign_director,
-    experimenter_dated: date1.value instanceof Date ? dateToISO(date1.value) : new Date(),
+    experimenter_dated:
+      date1.value instanceof Date ? dateToISO(date1.value) : new Date(),
     // date_2: date2.value instanceof Date ? dateToISO(date2.value) : new Date(),
     // date_3: date3.value instanceof Date ? dateToISO(date3.value) : new Date(),
     // date_4: date4.value instanceof Date ? dateToISO(date4.value) : new Date(),
@@ -545,12 +553,18 @@ const putData = (id: string) => {
     {
       personal_id: caretaker1.value.id,
       role: "mentor",
-      dated: date2.value instanceof Date ? dateToISO(date2.value) : dateToISO(new Date(date2.value)),
+      dated:
+        date2.value instanceof Date
+          ? dateToISO(date2.value)
+          : dateToISO(new Date(date2.value)),
     },
     {
       personal_id: commander.value.id,
       role: "commander",
-      dated: date4.value instanceof Date ? dateToISO(date4.value) : dateToISO(new Date(date4.value)),
+      dated:
+        date4.value instanceof Date
+          ? dateToISO(date4.value)
+          : dateToISO(new Date(date4.value)),
     },
     {
       personal_id: chairman.value.id,
@@ -561,7 +575,10 @@ const putData = (id: string) => {
     assign_director.push({
       personal_id: caretaker2.value.id,
       role: "mentor",
-      dated: date3.value instanceof Date ? dateToISO(date3.value) : dateToISO(new Date(date3.value)),
+      dated:
+        date3.value instanceof Date
+          ? dateToISO(date3.value)
+          : dateToISO(new Date(date3.value)),
     });
   }
   const data = {
@@ -620,7 +637,7 @@ const DataSave = async (id: string) => {
         .then((res) => {
           router.push(`/probation/detail/${id}`);
         })
-        .catch((e) => { })
+        .catch((e) => {})
         .finally(() => {
           hideLoader();
         });
@@ -730,6 +747,32 @@ const getAssign = async () => {
     // );
   });
 };
+const downloadFile = (response: any, filename: string) => {
+  const link = document.createElement("a");
+  var fileName = filename;
+  link.href = window.URL.createObjectURL(new Blob([response.data]));
+  link.setAttribute("download", fileName);
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+};
+
+const clickdownloadFile = async (type: string) => {
+  showLoader();
+  await http
+    .get(config.API.reportAssign(type, assignId.value), {
+      responseType: "blob",
+    })
+    .then((res) => {
+      downloadFile(res,`แบบมอบหมายงานการทดลองปฏิบัติหน้าที่ราชการ-${fullname.value}.${type}`);
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
 onMounted(async () => {
   getAssign();
   await getUser();
@@ -759,26 +802,53 @@ watch(knowledge.value, () => {
   <q-form ref="myForm">
     <div class="q-pa-sm">
       <div class="toptitle text-dark col-12 row items-center">
-        <q-btn icon="mdi-arrow-left" unelevated round dense flat color="primary" class="q-mr-sm" @click="router.go(-1)"
-          v-if="routeName == 'probationWorkAdd'" />
+        <q-btn
+          icon="mdi-arrow-left"
+          unelevated
+          round
+          dense
+          flat
+          color="primary"
+          class="q-mr-sm"
+          @click="router.go(-1)"
+          v-if="routeName == 'probationWorkAdd'"
+        />
         <div v-if="routeName == 'probationWorkAdd'">
           เพิ่มแบบมอบหมายงานการทดลองปฏิบัติหน้าที่ราชการ
         </div>
         <div v-else class="col-12 row q-gutter-md">
-          <div>
-            แบบมอบหมายงานการทดลองปฏิบัติหน้าที่ราชการ
-          </div>
+          <div>แบบมอบหมายงานการทดลองปฏิบัติหน้าที่ราชการ</div>
+
           <!-- <q-space /> -->
-          <q-btn v-if="!status" size="12px" flat dense icon="mdi-download" color="primary">
+          <q-btn
+            v-if="!status"
+            size="12px"
+            flat
+            dense
+            icon="mdi-download"
+            color="primary"
+          >
             <q-tooltip>ดาวน์โหลด</q-tooltip>
             <q-menu>
               <q-list style="min-width: 150px">
-                <q-item clickable v-close-popup>
-                  <q-item-section avatar><q-icon color="red" name="mdi-file-pdf" /></q-item-section>
+                <q-item
+                  clickable
+                  v-close-popup
+                  @click="clickdownloadFile('pdf')"
+                >
+                  <q-item-section avatar
+                    ><q-icon color="red" name="mdi-file-pdf"
+                  /></q-item-section>
                   <q-item-section>ไฟล์ .PDF</q-item-section>
                 </q-item>
-                <q-item clickable v-close-popup>
-                  <q-item-section avatar><q-icon color="blue" name="mdi-file-word" /></q-item-section>
+                <q-item
+                  clickable
+                  v-close-popup
+                  @click="clickdownloadFile('docx')"
+                >
+                  <q-item-section avatar
+                    ><q-icon color="blue" name="mdi-file-word"
+                  /></q-item-section>
                   <q-item-section>ไฟล์ .docx</q-item-section>
                 </q-item>
               </q-list>
@@ -786,16 +856,37 @@ watch(knowledge.value, () => {
           </q-btn>
 
           <div v-if="!status">
-            <q-btn dense flat round color="primary" @click="edit()" icon="mdi-pencil-outline">
+            <q-btn
+              dense
+              flat
+              round
+              color="primary"
+              @click="edit()"
+              icon="mdi-pencil-outline"
+            >
               <q-tooltip>แก้ไขข้อมูล</q-tooltip>
             </q-btn>
           </div>
           <div v-else>
-            <q-btn dense flat round color="red" @click="cancel()" icon="mdi-undo">
+            <q-btn
+              dense
+              flat
+              round
+              color="red"
+              @click="cancel()"
+              icon="mdi-undo"
+            >
               <q-tooltip>ยกเลิก</q-tooltip>
             </q-btn>
-            <q-btn dense flat class="q-ml-md" round color="public" @click="saveEdit(assignId)"
-              icon="mdi-content-save-outline">
+            <q-btn
+              dense
+              flat
+              class="q-ml-md"
+              round
+              color="public"
+              @click="saveEdit(assignId)"
+              icon="mdi-content-save-outline"
+            >
               <q-tooltip>บันทึกข้อมูล</q-tooltip>
             </q-btn>
           </div>
@@ -811,12 +902,28 @@ watch(knowledge.value, () => {
               </div>
               <div class="col-12 row q-col-gutter-md">
                 <div class="col-xs-12 col-sm-6">
-                  <q-input :rules="[(val) => !!val || 'กรุณากรอกชื่อ']" hide-bottom-space :readonly="status != true" dense
-                    borderless :outlined="status == true" v-model="fullname" label="ชื่อ-สกุล" />
+                  <q-input
+                    :rules="[(val) => !!val || 'กรุณากรอกชื่อ']"
+                    hide-bottom-space
+                    :readonly="status != true"
+                    dense
+                    borderless
+                    :outlined="status == true"
+                    v-model="fullname"
+                    label="ชื่อ-สกุล"
+                  />
                 </div>
                 <div class="col-xs-12 col-sm-6">
-                  <q-input :rules="[(val) => !!val || 'กรุณากรอกตำเเหน่ง']" hide-bottom-space :readonly="status != true"
-                    dense borderless :outlined="status == true" v-model="position" label="ตำแหน่ง" />
+                  <q-input
+                    :rules="[(val) => !!val || 'กรุณากรอกตำเเหน่ง']"
+                    hide-bottom-space
+                    :readonly="status != true"
+                    dense
+                    borderless
+                    :outlined="status == true"
+                    v-model="position"
+                    label="ตำแหน่ง"
+                  />
                 </div>
                 <div class="col-12 row">
                   <div class="col-12 text-top0 items-center">
@@ -824,14 +931,32 @@ watch(knowledge.value, () => {
                   </div>
                   <div class="col-12 row q-col-gutter-md">
                     <div class="col-xs-12 col-sm-4">
-                      <q-select :rules="[(val) => !!val || 'กรุณาเลือกระยะเวลา']" hide-bottom-space :options="monthOp"
-                        class="col-xs-12 col-sm-6" :readonly="status != true" dense borderless option-label="label"
-                        option-value="value" :outlined="status == true" v-model="monthSelect"
-                        :label="`ระยะเวลากี่เดือน`" />
+                      <q-select
+                        :rules="[(val) => !!val || 'กรุณาเลือกระยะเวลา']"
+                        hide-bottom-space
+                        :options="monthOp"
+                        class="col-xs-12 col-sm-6"
+                        :readonly="status != true"
+                        dense
+                        borderless
+                        option-label="label"
+                        option-value="value"
+                        :outlined="status == true"
+                        v-model="monthSelect"
+                        :label="`ระยะเวลากี่เดือน`"
+                      />
                     </div>
                     <div class="col-xs-12 col-sm-4">
-                      <datepicker menu-class-name="modalfix" v-model="date_start" :locale="'th'" autoApply borderless
-                        :enableTimePicker="false" week-start="0" :readonly="status != true">
+                      <datepicker
+                        menu-class-name="modalfix"
+                        v-model="date_start"
+                        :locale="'th'"
+                        autoApply
+                        borderless
+                        :enableTimePicker="false"
+                        week-start="0"
+                        :readonly="status != true"
+                      >
                         <template #year="{ year }">
                           {{ year + 543 }}
                         </template>
@@ -839,17 +964,38 @@ watch(knowledge.value, () => {
                           {{ parseInt(value + 543) }}
                         </template>
                         <template #trigger>
-                          <q-input dense borderless :readonly="status != true" :outlined="status == true"
-                            :rules="[(val) => !!val || 'กรุณาเลือกวันที่']" hide-bottom-space
-                            class="full-width datepicker" :model-value="date_start != null ? date2Thai(date_start) : undefined
-                              " :label="`${'ตั้งเเต่วันที่'}`" clearable @clear="clearDateExam">
+                          <q-input
+                            dense
+                            borderless
+                            :readonly="status != true"
+                            :outlined="status == true"
+                            :rules="[(val) => !!val || 'กรุณาเลือกวันที่']"
+                            hide-bottom-space
+                            class="full-width datepicker"
+                            :model-value="
+                              date_start != null
+                                ? date2Thai(date_start)
+                                : undefined
+                            "
+                            :label="`${'ตั้งเเต่วันที่'}`"
+                            clearable
+                            @clear="clearDateExam"
+                          >
                           </q-input>
                         </template>
                       </datepicker>
                     </div>
                     <div class="col-xs-12 col-sm-4">
-                      <datepicker menu-class-name="modalfix" v-model="date_finish" :locale="'th'" autoApply borderless
-                        :readonly="isDatePicker2Readonly || status != true" :enableTimePicker="false" week-start="0">
+                      <datepicker
+                        menu-class-name="modalfix"
+                        v-model="date_finish"
+                        :locale="'th'"
+                        autoApply
+                        borderless
+                        :readonly="isDatePicker2Readonly || status != true"
+                        :enableTimePicker="false"
+                        week-start="0"
+                      >
                         <template #year="{ year }">
                           {{ year + 543 }}
                         </template>
@@ -857,11 +1003,22 @@ watch(knowledge.value, () => {
                           {{ parseInt(value + 543) }}
                         </template>
                         <template #trigger>
-                          <q-input hide-bottom-space dense borderless :outlined="status == true" readonly
-                            class="full-width datepicker" :model-value="date_finish != null
-                              ? date2Thai(date_finish)
-                              : undefined
-                              " :label="`${'ถึงวันที่'}`" clearable @clear="clearDateExam2">
+                          <q-input
+                            hide-bottom-space
+                            dense
+                            borderless
+                            :outlined="status == true"
+                            readonly
+                            class="full-width datepicker"
+                            :model-value="
+                              date_finish != null
+                                ? date2Thai(date_finish)
+                                : undefined
+                            "
+                            :label="`${'ถึงวันที่'}`"
+                            clearable
+                            @clear="clearDateExam2"
+                          >
                           </q-input>
                         </template>
                       </datepicker>
@@ -880,22 +1037,64 @@ watch(knowledge.value, () => {
               </div>
 
               <div v-if="status == true" class="col-12 row q-col-gutter-md">
-                <q-select :rules="[(val) => !!val || 'กรุณาเลือกผู้ดูเเล']" option-value="id"
-                  :options="filtermantor(OPcaretaker, [caretaker2])" class="col-xs-12 col-sm-6" :readonly="status != true"
-                  dense hide-bottom-space borderless :outlined="status == true" v-model="caretaker1"
-                  :label="`ผู้ดูแลคนที่ 1`" option-label="name" />
-                <q-select clearable :options="filtermantor(OPcaretaker, [caretaker1])" option-value="id"
-                  option-label="name" hide-bottom-space class="col-xs-12 col-sm-6" :readonly="status != true" dense
-                  borderless :outlined="status == true" v-model="caretaker2" :label="`ผู้ดูแลคนที่ 2`" />
+                <q-select
+                  :rules="[(val) => !!val || 'กรุณาเลือกผู้ดูเเล']"
+                  option-value="id"
+                  :options="filtermantor(OPcaretaker, [caretaker2])"
+                  class="col-xs-12 col-sm-6"
+                  :readonly="status != true"
+                  dense
+                  hide-bottom-space
+                  borderless
+                  :outlined="status == true"
+                  v-model="caretaker1"
+                  :label="`ผู้ดูแลคนที่ 1`"
+                  option-label="name"
+                />
+                <q-select
+                  clearable
+                  :options="filtermantor(OPcaretaker, [caretaker1])"
+                  option-value="id"
+                  option-label="name"
+                  hide-bottom-space
+                  class="col-xs-12 col-sm-6"
+                  :readonly="status != true"
+                  dense
+                  borderless
+                  :outlined="status == true"
+                  v-model="caretaker2"
+                  :label="`ผู้ดูแลคนที่ 2`"
+                />
               </div>
               <div v-else class="col-12 row q-col-gutter-md">
-                <q-select :rules="[(val) => !!val || 'กรุณาเลือกผู้ดูเเล']" option-value="id"
-                  :options="filtermantor(OPcaretaker, [caretaker2])" class="col-xs-12 col-sm-6" :readonly="status != true"
-                  dense hide-bottom-space borderless :outlined="status == true" v-model="caretaker1"
-                  :label="`ผู้ดูแลคนที่ 1`" option-label="name" />
-                <q-select clearable :options="filtermantor(OPcaretaker, [caretaker1])" option-value="id"
-                  option-label="name" hide-bottom-space class="col-xs-12 col-sm-6" :readonly="status != true" dense
-                  borderless :outlined="status == true" v-model="caretaker2" :label="`ผู้ดูแลคนที่ 2`" />
+                <q-select
+                  :rules="[(val) => !!val || 'กรุณาเลือกผู้ดูเเล']"
+                  option-value="id"
+                  :options="filtermantor(OPcaretaker, [caretaker2])"
+                  class="col-xs-12 col-sm-6"
+                  :readonly="status != true"
+                  dense
+                  hide-bottom-space
+                  borderless
+                  :outlined="status == true"
+                  v-model="caretaker1"
+                  :label="`ผู้ดูแลคนที่ 1`"
+                  option-label="name"
+                />
+                <q-select
+                  clearable
+                  :options="filtermantor(OPcaretaker, [caretaker1])"
+                  option-value="id"
+                  option-label="name"
+                  hide-bottom-space
+                  class="col-xs-12 col-sm-6"
+                  :readonly="status != true"
+                  dense
+                  borderless
+                  :outlined="status == true"
+                  v-model="caretaker2"
+                  :label="`ผู้ดูแลคนที่ 2`"
+                />
               </div>
             </div>
             <div class="col-12">
@@ -910,29 +1109,71 @@ watch(knowledge.value, () => {
               <div class="col-12 text-top2 row items-center">
                 <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
                 3.1 ชื่องาน / ภารกิจงานที่มอบหมาย (ควรมีมากกว่า 1 ภารกิจงาน)
-                <q-btn v-if="status == true" round color="primary" dense icon="mdi-plus" flat class="q-ml-sm"
-                  @click="addActivity" />
+                <q-btn
+                  v-if="status == true"
+                  round
+                  color="primary"
+                  dense
+                  icon="mdi-plus"
+                  flat
+                  class="q-ml-sm"
+                  @click="addActivity"
+                />
               </div>
               <div class="col-12 row q-gutter-sm">
-                <q-card v-for="(item, index) in activityArray" :key="index" flat bordered
-                  class="col-12 q-pa-sm bg-grey-1">
+                <q-card
+                  v-for="(item, index) in activityArray"
+                  :key="index"
+                  flat
+                  bordered
+                  class="col-12 q-pa-sm bg-grey-1"
+                >
                   <div class="col-12 row q-col-gutter-sm">
                     <div class="col-xs-12 col-sm-6">
-                      <q-input :rules="index < 2 ? [(val) => !!val || 'กรุณากรอกข้อมูล'] : []
-                        " hide-bottom-space :readonly="status != true" dense borderless :outlined="status == true"
-                        class="bg-white" type="textarea" v-model="activity_desc[index]"
-                        label="กิจกรรมของงาน/ขั้นตอนการปฏิบัติงาน(ไม่เกิน10บรรทัด )" />
+                      <q-input
+                        :rules="
+                          index < 2 ? [(val) => !!val || 'กรุณากรอกข้อมูล'] : []
+                        "
+                        hide-bottom-space
+                        :readonly="status != true"
+                        dense
+                        borderless
+                        :outlined="status == true"
+                        class="bg-white"
+                        type="textarea"
+                        v-model="activity_desc[index]"
+                        label="กิจกรรมของงาน/ขั้นตอนการปฏิบัติงาน(ไม่เกิน10บรรทัด )"
+                      />
                     </div>
                     <div class="col-xs-12 col-sm-5">
-                      <q-input :rules="index < 2 ? [(val) => !!val || 'กรุณากรอกข้อมูล'] : []
-                        " hide-bottom-space :readonly="status != true" dense borderless :outlined="status == true"
-                        class="bg-white" type="textarea" v-model="goal_desc[index]"
-                        label="เป้าหมายในการปฏิบัติงาน(ไม่เกิน10บรรทัด )" />
+                      <q-input
+                        :rules="
+                          index < 2 ? [(val) => !!val || 'กรุณากรอกข้อมูล'] : []
+                        "
+                        hide-bottom-space
+                        :readonly="status != true"
+                        dense
+                        borderless
+                        :outlined="status == true"
+                        class="bg-white"
+                        type="textarea"
+                        v-model="goal_desc[index]"
+                        label="เป้าหมายในการปฏิบัติงาน(ไม่เกิน10บรรทัด )"
+                      />
                     </div>
                     <!-- delete -->
-                    <div v-if="index > 1" class="col-xs-12 col-sm-1 flex justify-center items-center">
-                      <q-btn flat round color="red" icon="mdi-trash-can-outline" @click="deleteactivity(index)"
-                        v-if="status == true" />
+                    <div
+                      v-if="index > 1"
+                      class="col-xs-12 col-sm-1 flex justify-center items-center"
+                    >
+                      <q-btn
+                        flat
+                        round
+                        color="red"
+                        icon="mdi-trash-can-outline"
+                        @click="deleteactivity(index)"
+                        v-if="status == true"
+                      />
                     </div>
                   </div>
                 </q-card>
@@ -949,21 +1190,59 @@ watch(knowledge.value, () => {
                   <div class="col-12 row">
                     <div class="col-12 text-top2 row items-center">
                       ความรู้ความสามารถในการปฏิบัติงาน
-                      <q-btn v-if="status == true" round color="primary" dense icon="mdi-plus" flat class="q-ml-sm"
-                        @click="addKnowledge" />
+                      <q-btn
+                        v-if="status == true"
+                        round
+                        color="primary"
+                        dense
+                        icon="mdi-plus"
+                        flat
+                        class="q-ml-sm"
+                        @click="addKnowledge"
+                      />
                     </div>
-                    <div v-for="(item, index) in knowledgeArray" :key="index" class="col-12 row q-col-gutter-sm">
+                    <div
+                      v-for="(item, index) in knowledgeArray"
+                      :key="index"
+                      class="col-12 row q-col-gutter-sm"
+                    >
                       <div class="col-11 q-my-xs">
-                        <q-select :option-label="(item) => `${item.title}-${item.description}`
-                          " option-value="id" map-options
-                          :rules="index < 3 ? [(val) => !!val || 'กรุณาเลือกความสามารถ'] : []" hide-bottom-space
-                          :options="OPknowledge" class="bg-white" :readonly="status != true" dense borderless
-                          :outlined="status == true" v-model="knowledge[index]" :label="`ความรู้ความสามารถในการปฏิบัติงาน ${index + 1
-                            }`" />
+                        <q-select
+                          :option-label="
+                            (item) => `${item.title}-${item.description}`
+                          "
+                          option-value="id"
+                          map-options
+                          :rules="
+                            index < 3
+                              ? [(val) => !!val || 'กรุณาเลือกความสามารถ']
+                              : []
+                          "
+                          hide-bottom-space
+                          :options="OPknowledge"
+                          class="bg-white"
+                          :readonly="status != true"
+                          dense
+                          borderless
+                          :outlined="status == true"
+                          v-model="knowledge[index]"
+                          :label="`ความรู้ความสามารถในการปฏิบัติงาน ${
+                            index + 1
+                          }`"
+                        />
                       </div>
-                      <div v-if="index > 2" class="col-xs-12 col-sm-1 flex justify-center items-center">
-                        <q-btn v-if="status == true" flat round color="red" icon="mdi-trash-can-outline"
-                          @click="deleteknowledge(index)" />
+                      <div
+                        v-if="index > 2"
+                        class="col-xs-12 col-sm-1 flex justify-center items-center"
+                      >
+                        <q-btn
+                          v-if="status == true"
+                          flat
+                          round
+                          color="red"
+                          icon="mdi-trash-can-outline"
+                          @click="deleteknowledge(index)"
+                        />
                       </div>
                     </div>
                   </div>
@@ -981,13 +1260,28 @@ watch(knowledge.value, () => {
                       class="q-ml-sm"
                     /> -->
                     </div>
-                    <q-card flat bordered class="col-12 q-pa-md" style="max-height: 500px; overflow-y: scroll">
+                    <q-card
+                      flat
+                      bordered
+                      class="col-12 q-pa-md"
+                      style="max-height: 500px; overflow-y: scroll"
+                    >
                       <div class="example-row-column-width">
                         <div class="bg-grey-3 q-py-xs">
-                          <div class="row" v-for="(item, index) in checkRule" :key="item.id">
+                          <div
+                            class="row"
+                            v-for="(item, index) in checkRule"
+                            :key="item.id"
+                          >
                             <div v-if="index === 0" class="col-1 text-center">
-                              <q-checkbox :true-value="1" :false-value="0" v-if="item.status_select === 1"
-                                v-model="item.checked" dense :disable="status != true" />
+                              <q-checkbox
+                                :true-value="1"
+                                :false-value="0"
+                                v-if="item.status_select === 1"
+                                v-model="item.checked"
+                                dense
+                                :disable="status != true"
+                              />
                             </div>
                             <div v-if="index === 0" class="col-11">
                               {{ item.description }}
@@ -995,7 +1289,10 @@ watch(knowledge.value, () => {
                           </div>
                         </div>
                         <div v-for="(item, index) in checkRule" :key="item.id">
-                          <div v-if="index === 1" class="row bg-grey-2 q-py-xs borderCheck">
+                          <div
+                            v-if="index === 1"
+                            class="row bg-grey-2 q-py-xs borderCheck"
+                          >
                             <div class="col-1"></div>
                             <div class="col-10">
                               {{ item.description }}
@@ -1003,16 +1300,27 @@ watch(knowledge.value, () => {
                           </div>
                         </div>
                         <div v-for="(item, index) in checkRule" :key="item.id">
-                          <div v-if="index === 2" class="row bg-grey-2 q-py-xs borderCheck">
+                          <div
+                            v-if="index === 2"
+                            class="row bg-grey-2 q-py-xs borderCheck"
+                          >
                             <div class="col-1"></div>
                             <div class="col-10 q-pl-md">
                               {{ item.description }}
                             </div>
                           </div>
-                          <div v-else-if="index > 2 && index < 9" class="row borderCheck border_y q-py-xs">
+                          <div
+                            v-else-if="index > 2 && index < 9"
+                            class="row borderCheck border_y q-py-xs"
+                          >
                             <div class="col-1 text-center">
-                              <q-checkbox :true-value="1" :false-value="0" v-model="item.checked" dense
-                                :disable="status != true" />
+                              <q-checkbox
+                                :true-value="1"
+                                :false-value="0"
+                                v-model="item.checked"
+                                dense
+                                :disable="status != true"
+                              />
                             </div>
                             <div class="col-9 q-pl-xl">
                               {{ item.description }}
@@ -1020,16 +1328,27 @@ watch(knowledge.value, () => {
                           </div>
                         </div>
                         <div v-for="(item, index) in checkRule" :key="item.id">
-                          <div v-if="index === 9" class="row bg-grey-2 q-py-xs borderCheck">
+                          <div
+                            v-if="index === 9"
+                            class="row bg-grey-2 q-py-xs borderCheck"
+                          >
                             <div class="col-1"></div>
                             <div class="col-10 q-pl-md">
                               {{ item.description }}
                             </div>
                           </div>
-                          <div v-else-if="index > 9 && index < 16" class="row borderCheck border_y q-py-xs">
+                          <div
+                            v-else-if="index > 9 && index < 16"
+                            class="row borderCheck border_y q-py-xs"
+                          >
                             <div class="col-1 text-center">
-                              <q-checkbox :true-value="1" :false-value="0" v-model="item.checked" dense
-                                :disable="status != true" />
+                              <q-checkbox
+                                :true-value="1"
+                                :false-value="0"
+                                v-model="item.checked"
+                                dense
+                                :disable="status != true"
+                              />
                             </div>
                             <div class="col-9 q-pl-xl">
                               {{ item.description }}
@@ -1037,16 +1356,27 @@ watch(knowledge.value, () => {
                           </div>
                         </div>
                         <div v-for="(item, index) in checkRule" :key="item.id">
-                          <div v-if="index === 16" class="row bg-grey-2 q-py-xs borderCheck">
+                          <div
+                            v-if="index === 16"
+                            class="row bg-grey-2 q-py-xs borderCheck"
+                          >
                             <div class="col-1"></div>
                             <div class="col-10 q-pl-md">
                               {{ item.description }}
                             </div>
                           </div>
-                          <div v-else-if="index > 16 && index < 19" class="row borderCheck border_y q-py-xs">
+                          <div
+                            v-else-if="index > 16 && index < 19"
+                            class="row borderCheck border_y q-py-xs"
+                          >
                             <div class="col-1 text-center">
-                              <q-checkbox :true-value="1" :false-value="0" v-model="item.checked" dense
-                                :disable="status != true" />
+                              <q-checkbox
+                                :true-value="1"
+                                :false-value="0"
+                                v-model="item.checked"
+                                dense
+                                :disable="status != true"
+                              />
                             </div>
                             <div class="col-9 q-pl-xl">
                               {{ item.description }}
@@ -1054,16 +1384,27 @@ watch(knowledge.value, () => {
                           </div>
                         </div>
                         <div v-for="(item, index) in checkRule" :key="item.id">
-                          <div v-if="index === 19" class="row bg-grey-2 q-py-xs borderCheck">
+                          <div
+                            v-if="index === 19"
+                            class="row bg-grey-2 q-py-xs borderCheck"
+                          >
                             <div class="col-1"></div>
                             <div class="col-10 q-pl-md">
                               {{ item.description }}
                             </div>
                           </div>
-                          <div v-else-if="index > 19 && index < 30" class="row borderCheck border_y q-py-xs">
+                          <div
+                            v-else-if="index > 19 && index < 30"
+                            class="row borderCheck border_y q-py-xs"
+                          >
                             <div class="col-1 text-center">
-                              <q-checkbox :true-value="1" :false-value="0" v-model="item.checked" dense
-                                :disable="status != true" />
+                              <q-checkbox
+                                :true-value="1"
+                                :false-value="0"
+                                v-model="item.checked"
+                                dense
+                                :disable="status != true"
+                              />
                             </div>
                             <div class="col-9 q-pl-xl">
                               {{ item.description }}
@@ -1099,8 +1440,15 @@ watch(knowledge.value, () => {
                     </div>
                     <div class="col-12 row q-col-gutter-md">
                       <div class="col-12">
-                        <q-input class="bg-white" :readonly="status != true" dense borderless :outlined="status == true"
-                          v-model="OtherLaw" type="textarea" />
+                        <q-input
+                          class="bg-white"
+                          :readonly="status != true"
+                          dense
+                          borderless
+                          :outlined="status == true"
+                          v-model="OtherLaw"
+                          type="textarea"
+                        />
                       </div>
                     </div>
                   </div>
@@ -1108,60 +1456,121 @@ watch(knowledge.value, () => {
                     <div class="col-12 text-top2">ทักษะ</div>
                     <div class="col-12 row q-col-gutter-sm">
                       <div class="col-xs-12 col-sm-6">
-                        <q-select :option-label="(item) =>
-                          `${item.title} - ${item.level_description}`
-                          " option-value="id" hide-bottom-space
-                          :rules="[(val) => !!val || 'กรุณาเลือกความรู้ความสามารถ',]" :options="OPcomputer"
-                          class="bg-white" :readonly="status != true" dense borderless map-options
-                          :outlined="status == true" v-model="skill" label="ด้านที่ 1">
+                        <q-select
+                          :option-label="
+                            (item) =>
+                              `${item.title} - ${item.level_description}`
+                          "
+                          option-value="id"
+                          hide-bottom-space
+                          :rules="[
+                            (val) => !!val || 'กรุณาเลือกความรู้ความสามารถ',
+                          ]"
+                          :options="OPcomputer"
+                          class="bg-white"
+                          :readonly="status != true"
+                          dense
+                          borderless
+                          map-options
+                          :outlined="status == true"
+                          v-model="skill"
+                          label="ด้านที่ 1"
+                        >
                           <template v-slot:selected-item="scope">
                             <div class="ellipsis-2-lines">
                               {{ scope.opt.title }} -
                               {{ scope.opt.level_description }}
                             </div>
-                          </template></q-select>
+                          </template></q-select
+                        >
                       </div>
                       <div class="col-xs-12 col-sm-6">
-                        <q-select ellipsis-2-lines :option-label="(item) =>
-                          `${item.title} - ${item.level_description}`
-                          " option-value="id" map-options hide-bottom-space
-                          :rules="[(val) => !!val || 'กรุณาเลือกความรู้ความสามารถ',]" :options="OPenglish"
-                          class="bg-white" :readonly="status != true" dense borderless :outlined="status == true"
-                          v-model="skill2" label="ด้านที่ 2">
+                        <q-select
+                          ellipsis-2-lines
+                          :option-label="
+                            (item) =>
+                              `${item.title} - ${item.level_description}`
+                          "
+                          option-value="id"
+                          map-options
+                          hide-bottom-space
+                          :rules="[
+                            (val) => !!val || 'กรุณาเลือกความรู้ความสามารถ',
+                          ]"
+                          :options="OPenglish"
+                          class="bg-white"
+                          :readonly="status != true"
+                          dense
+                          borderless
+                          :outlined="status == true"
+                          v-model="skill2"
+                          label="ด้านที่ 2"
+                        >
                           <template v-slot:selected-item="scope">
                             <div class="ellipsis-2-lines">
                               {{ scope.opt.title }} -
                               {{ scope.opt.level_description }}
                             </div>
-                          </template></q-select>
+                          </template></q-select
+                        >
                       </div>
                       <div class="col-xs-12 col-sm-6">
-                        <q-select :option-label="(item) =>
-                          `${item.title} - ${item.level_description}`
-                          " option-value="id" hide-bottom-space
-                          :rules="[(val) => !!val || 'กรุณาเลือกความรู้ความสามารถ',]" :options="OPinfomation"
-                          class="bg-white" :readonly="status != true" dense map-options borderless
-                          :outlined="status == true" v-model="skill3" label="ด้านที่ 3">
+                        <q-select
+                          :option-label="
+                            (item) =>
+                              `${item.title} - ${item.level_description}`
+                          "
+                          option-value="id"
+                          hide-bottom-space
+                          :rules="[
+                            (val) => !!val || 'กรุณาเลือกความรู้ความสามารถ',
+                          ]"
+                          :options="OPinfomation"
+                          class="bg-white"
+                          :readonly="status != true"
+                          dense
+                          map-options
+                          borderless
+                          :outlined="status == true"
+                          v-model="skill3"
+                          label="ด้านที่ 3"
+                        >
                           <template v-slot:selected-item="scope">
                             <div class="ellipsis-2-lines">
                               {{ scope.opt.title }} -
                               {{ scope.opt.level_description }}
                             </div>
-                          </template></q-select>
+                          </template></q-select
+                        >
                       </div>
                       <div class="col-xs-12 col-sm-6">
-                        <q-select :option-label="(item) =>
-                          `${item.title} - ${item.level_description}`
-                          " option-value="id" hide-bottom-space
-                          :rules="[(val) => !!val || 'กรุณาเลือกความรู้ความสามารถ',]" :options="OPresourse"
-                          class="bg-white" :readonly="status != true" dense map-options borderless
-                          :outlined="status == true" v-model="skill4" label="ด้านที่ 4">
+                        <q-select
+                          :option-label="
+                            (item) =>
+                              `${item.title} - ${item.level_description}`
+                          "
+                          option-value="id"
+                          hide-bottom-space
+                          :rules="[
+                            (val) => !!val || 'กรุณาเลือกความรู้ความสามารถ',
+                          ]"
+                          :options="OPresourse"
+                          class="bg-white"
+                          :readonly="status != true"
+                          dense
+                          map-options
+                          borderless
+                          :outlined="status == true"
+                          v-model="skill4"
+                          label="ด้านที่ 4"
+                        >
                           <template v-slot:selected-item="scope">
                             <div class="ellipsis-2-lines">
                               {{ scope.opt.title }} -
                               {{ scope.opt.level_description }}
                             </div>
-                          </template></q-select>
+                          </template></q-select
+                        >
                       </div>
                     </div>
                   </div>
@@ -1180,69 +1589,145 @@ watch(knowledge.value, () => {
                     <div class="col-12 text-top2">สมรรถนะหลัก</div>
                     <div class="col-12 row q-col-gutter-sm">
                       <div class="col-xs-12 col-sm-6">
-                        <q-select :option-label="(item) => `${item.title} - ${item.description}`
-                          " option-value="id" hide-bottom-space :rules="[(val) => !!val || 'กรุณาเลือกสมรรถนะ']"
-                          :options="filterMain(OPmain, [main2, main3, main4, main5])
-                            " class="bg-white" :readonly="status != true" dense borderless map-options
-                          :outlined="status == true" v-model="main" label="ตัวที่ 1">
+                        <q-select
+                          :option-label="
+                            (item) => `${item.title} - ${item.description}`
+                          "
+                          option-value="id"
+                          hide-bottom-space
+                          :rules="[(val) => !!val || 'กรุณาเลือกสมรรถนะ']"
+                          :options="
+                            filterMain(OPmain, [main2, main3, main4, main5])
+                          "
+                          class="bg-white"
+                          :readonly="status != true"
+                          dense
+                          borderless
+                          map-options
+                          :outlined="status == true"
+                          v-model="main"
+                          label="ตัวที่ 1"
+                        >
                           <template v-slot:selected-item="scope">
                             <div class="ellipsis-2-lines">
                               {{ scope.opt.title }} -
                               {{ scope.opt.description }}
                             </div>
-                          </template></q-select>
+                          </template></q-select
+                        >
                       </div>
                       <div class="col-xs-12 col-sm-6">
-                        <q-select :option-label="(item) => `${item.title} - ${item.description}`
-                          " option-value="id" hide-bottom-space :rules="[(val) => !!val || 'กรุณาเลือกสมรรถนะ']"
-                          :options="filterMain(OPmain, [main, main3, main4, main5])
-                            " class="bg-white" :readonly="status != true" dense borderless map-options
-                          :outlined="status == true" v-model="main2" label="ตัวที่ 2">
+                        <q-select
+                          :option-label="
+                            (item) => `${item.title} - ${item.description}`
+                          "
+                          option-value="id"
+                          hide-bottom-space
+                          :rules="[(val) => !!val || 'กรุณาเลือกสมรรถนะ']"
+                          :options="
+                            filterMain(OPmain, [main, main3, main4, main5])
+                          "
+                          class="bg-white"
+                          :readonly="status != true"
+                          dense
+                          borderless
+                          map-options
+                          :outlined="status == true"
+                          v-model="main2"
+                          label="ตัวที่ 2"
+                        >
                           <template v-slot:selected-item="scope">
                             <div class="ellipsis-2-lines">
                               {{ scope.opt.title }} -
                               {{ scope.opt.description }}
                             </div>
-                          </template></q-select>
+                          </template></q-select
+                        >
                       </div>
                       <div class="col-xs-12 col-sm-6">
-                        <q-select :option-label="(item) => `${item.title} - ${item.description}`
-                          " option-value="id" hide-bottom-space :rules="[(val) => !!val || 'กรุณาเลือกสมรรถนะ']"
-                          :options="filterMain(OPmain, [main, main2, main4, main5])
-                            " class="bg-white" :readonly="status != true" dense map-options borderless
-                          :outlined="status == true" v-model="main3" label="ตัวที่ 3">
+                        <q-select
+                          :option-label="
+                            (item) => `${item.title} - ${item.description}`
+                          "
+                          option-value="id"
+                          hide-bottom-space
+                          :rules="[(val) => !!val || 'กรุณาเลือกสมรรถนะ']"
+                          :options="
+                            filterMain(OPmain, [main, main2, main4, main5])
+                          "
+                          class="bg-white"
+                          :readonly="status != true"
+                          dense
+                          map-options
+                          borderless
+                          :outlined="status == true"
+                          v-model="main3"
+                          label="ตัวที่ 3"
+                        >
                           <template v-slot:selected-item="scope">
                             <div class="ellipsis-2-lines">
                               {{ scope.opt.title }} -
                               {{ scope.opt.description }}
                             </div>
-                          </template></q-select>
+                          </template></q-select
+                        >
                       </div>
                       <div class="col-xs-12 col-sm-6">
-                        <q-select :option-label="(item) => `${item.title} - ${item.description}`
-                          " option-value="id" hide-bottom-space :rules="[(val) => !!val || 'กรุณาเลือกสมรรถนะ']"
-                          :options="filterMain(OPmain, [main, main2, main3, main5])
-                            " class="bg-white" :readonly="status != true" dense borderless map-options
-                          :outlined="status == true" v-model="main4" label="ตัวที่ 4">
+                        <q-select
+                          :option-label="
+                            (item) => `${item.title} - ${item.description}`
+                          "
+                          option-value="id"
+                          hide-bottom-space
+                          :rules="[(val) => !!val || 'กรุณาเลือกสมรรถนะ']"
+                          :options="
+                            filterMain(OPmain, [main, main2, main3, main5])
+                          "
+                          class="bg-white"
+                          :readonly="status != true"
+                          dense
+                          borderless
+                          map-options
+                          :outlined="status == true"
+                          v-model="main4"
+                          label="ตัวที่ 4"
+                        >
                           <template v-slot:selected-item="scope">
                             <div class="ellipsis-2-lines">
                               {{ scope.opt.title }} -
                               {{ scope.opt.description }}
                             </div>
-                          </template></q-select>
+                          </template></q-select
+                        >
                       </div>
 
                       <div class="col-xs-12 col-sm-6">
-                        <q-select hide-bottom-space :rules="[(val) => !!val || 'กรุณาเลือกสมรรถนะ']" :options="filterMain(OPmain, [main, main2, main3, main4])
-                          " :option-label="(item) => `${item.title} - ${item.description}`" option-value="id"
-                          class="bg-white" :readonly="status != true" dense map-options borderless
-                          :outlined="status == true" v-model="main5" label="ตัวที่ 5">
+                        <q-select
+                          hide-bottom-space
+                          :rules="[(val) => !!val || 'กรุณาเลือกสมรรถนะ']"
+                          :options="
+                            filterMain(OPmain, [main, main2, main3, main4])
+                          "
+                          :option-label="
+                            (item) => `${item.title} - ${item.description}`
+                          "
+                          option-value="id"
+                          class="bg-white"
+                          :readonly="status != true"
+                          dense
+                          map-options
+                          borderless
+                          :outlined="status == true"
+                          v-model="main5"
+                          label="ตัวที่ 5"
+                        >
                           <template v-slot:selected-item="scope">
                             <div class="ellipsis-2-lines">
                               {{ scope.opt.title }} -
                               {{ scope.opt.description }}
                             </div>
-                          </template></q-select>
+                          </template></q-select
+                        >
                       </div>
                     </div>
                   </div>
@@ -1250,43 +1735,88 @@ watch(knowledge.value, () => {
                     <div class="col-12 text-top2">สมรรถนะประจํากลุ่มงาน</div>
                     <div class="col-12 row q-col-gutter-sm">
                       <div class="col-xs-12 col-sm-6">
-                        <q-select :option-label="(item) => `${item.title} - ${item.description}`
-                          " option-value="id" hide-bottom-space
-                          :rules="[(val) => !!val || 'กรุณาเลือกสมรรถนะประจํากลุ่มงาน',]"
-                          :options="filterData(OPgroup, [group2, group3])" class="bg-white" :readonly="status != true"
-                          dense borderless map-options :outlined="status == true" v-model="group" label="ตัวที่ 1">
+                        <q-select
+                          :option-label="
+                            (item) => `${item.title} - ${item.description}`
+                          "
+                          option-value="id"
+                          hide-bottom-space
+                          :rules="[
+                            (val) => !!val || 'กรุณาเลือกสมรรถนะประจํากลุ่มงาน',
+                          ]"
+                          :options="filterData(OPgroup, [group2, group3])"
+                          class="bg-white"
+                          :readonly="status != true"
+                          dense
+                          borderless
+                          map-options
+                          :outlined="status == true"
+                          v-model="group"
+                          label="ตัวที่ 1"
+                        >
                           <template v-slot:selected-item="scope">
                             <div class="ellipsis-2-lines">
                               {{ scope.opt.title }} -
                               {{ scope.opt.description }}
                             </div>
-                          </template></q-select>
+                          </template></q-select
+                        >
                       </div>
                       <div class="col-xs-12 col-sm-6">
-                        <q-select :option-label="(item) => `${item.title} - ${item.description}`
-                          " option-value="id" hide-bottom-space
-                          :rules="[(val) => !!val || 'กรุณาเลือกสมรรถนะประจํากลุ่มงาน',]"
-                          :options="filterData(OPgroup, [group, group3])" class="bg-white" :readonly="status != true"
-                          dense borderless map-options :outlined="status == true" v-model="group2" label="ตัวที่ 2">
+                        <q-select
+                          :option-label="
+                            (item) => `${item.title} - ${item.description}`
+                          "
+                          option-value="id"
+                          hide-bottom-space
+                          :rules="[
+                            (val) => !!val || 'กรุณาเลือกสมรรถนะประจํากลุ่มงาน',
+                          ]"
+                          :options="filterData(OPgroup, [group, group3])"
+                          class="bg-white"
+                          :readonly="status != true"
+                          dense
+                          borderless
+                          map-options
+                          :outlined="status == true"
+                          v-model="group2"
+                          label="ตัวที่ 2"
+                        >
                           <template v-slot:selected-item="scope">
                             <div class="ellipsis-2-lines">
                               {{ scope.opt.title }} -
                               {{ scope.opt.description }}
                             </div>
-                          </template></q-select>
+                          </template></q-select
+                        >
                       </div>
                       <div class="col-xs-12 col-sm-6">
-                        <q-select :option-label="(item) => `${item.title} - ${item.description}`
-                          " option-value="id" map-options hide-bottom-space
-                          :rules="[(val) => !!val || 'กรุณาเลือกสมรรถนะประจํากลุ่มงาน',]"
-                          :options="filterData(OPgroup, [group, group2])" class="bg-white" :readonly="status != true"
-                          dense borderless :outlined="status == true" v-model="group3" label="ตัวที่ 3">
+                        <q-select
+                          :option-label="
+                            (item) => `${item.title} - ${item.description}`
+                          "
+                          option-value="id"
+                          map-options
+                          hide-bottom-space
+                          :rules="[
+                            (val) => !!val || 'กรุณาเลือกสมรรถนะประจํากลุ่มงาน',
+                          ]"
+                          :options="filterData(OPgroup, [group, group2])"
+                          class="bg-white"
+                          :readonly="status != true"
+                          dense
+                          borderless
+                          :outlined="status == true"
+                          v-model="group3"
+                          label="ตัวที่ 3"
+                        >
                           <template v-slot:selected-item="scope">
                             <div class="ellipsis-2-lines">
                               {{ scope.opt.title }} -
                               {{ scope.opt.description }}
                             </div>
-                          </template></q-select>
+                          </template></q-select
+                        >
                       </div>
                     </div>
                   </div>
@@ -1297,9 +1827,12 @@ watch(knowledge.value, () => {
             <div class="col-12 row">
               <div class="col-12 text-top2 row items-center">
                 <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-                3.4 พฤติกรรมที่จําเป็นสําหรับการปฏิบัติงาน<span class="text-weight-regular q-pl-sm">
+                3.4 พฤติกรรมที่จําเป็นสําหรับการปฏิบัติงาน<span
+                  class="text-weight-regular q-pl-sm"
+                >
                   ( ได้แก่ ความประพฤติ ความมีคุณธรรมจริยธรรม การรักษาวินัย
-                  )</span>
+                  )</span
+                >
               </div>
               <q-card bordered flat class="col-12 row q-pa-md bg-grey-1">
                 <div class="row col-12 q-gutter-lg">
@@ -1373,7 +1906,13 @@ watch(knowledge.value, () => {
               </div>
               <div class="col-12 row q-col-gutter-md">
                 <div class="col-12">
-                  <q-input :readonly="status != true" dense borderless :outlined="status == true" v-model="Other" />
+                  <q-input
+                    :readonly="status != true"
+                    dense
+                    borderless
+                    :outlined="status == true"
+                    v-model="Other"
+                  />
                 </div>
               </div>
             </div>
@@ -1381,28 +1920,70 @@ watch(knowledge.value, () => {
               <div class="col-12 text-top2 row items-center">
                 <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
                 3.6 ผลผลิตของงานที่คาดหวังและตัวชี้วัดความสําเร็จของงาน
-                <q-btn v-if="status == true" round color="primary" dense icon="mdi-plus" flat class="q-ml-sm"
-                  @click="addProductivity" />
+                <q-btn
+                  v-if="status == true"
+                  round
+                  color="primary"
+                  dense
+                  icon="mdi-plus"
+                  flat
+                  class="q-ml-sm"
+                  @click="addProductivity"
+                />
               </div>
               <div class="col-12 row q-gutter-md">
-                <q-card v-for="(item, index) in ProductivityArray" :key="index" flat bordered
-                  class="col-12 q-pa-sm bg-grey-1">
+                <q-card
+                  v-for="(item, index) in ProductivityArray"
+                  :key="index"
+                  flat
+                  bordered
+                  class="col-12 q-pa-sm bg-grey-1"
+                >
                   <div class="col-12 row q-col-gutter-sm">
                     <div class="col-xs-12 col-sm-6">
-                      <q-input hide-bottom-space :rules="index < 1 ? [(val) => !!val || 'กรุณากรอกข้อมูล'] : []
-                        " class="bg-white" type="textarea" :readonly="status != true" dense borderless
-                        :outlined="status == true" v-model="output_desc[index]"
-                        label="ผลผลิตของงานที่คาดหวัง (ไม่เกิน 10 บรรทัด)" />
+                      <q-input
+                        hide-bottom-space
+                        :rules="
+                          index < 1 ? [(val) => !!val || 'กรุณากรอกข้อมูล'] : []
+                        "
+                        class="bg-white"
+                        type="textarea"
+                        :readonly="status != true"
+                        dense
+                        borderless
+                        :outlined="status == true"
+                        v-model="output_desc[index]"
+                        label="ผลผลิตของงานที่คาดหวัง (ไม่เกิน 10 บรรทัด)"
+                      />
                     </div>
                     <div class="col-xs-12 col-sm-5">
-                      <q-input :rules="index < 1 ? [(val) => !!val || 'กรุณากรอกข้อมูล'] : []
-                        " hide-bottom-space class="bg-white" type="textarea" :readonly="status != true" dense
-                        borderless :outlined="status == true" v-model="indicator_desc[index]"
-                        label="ตัวชี้วัดความสําเร็จของงาน (ไม่เกิน 10 บรรทัด)" />
+                      <q-input
+                        :rules="
+                          index < 1 ? [(val) => !!val || 'กรุณากรอกข้อมูล'] : []
+                        "
+                        hide-bottom-space
+                        class="bg-white"
+                        type="textarea"
+                        :readonly="status != true"
+                        dense
+                        borderless
+                        :outlined="status == true"
+                        v-model="indicator_desc[index]"
+                        label="ตัวชี้วัดความสําเร็จของงาน (ไม่เกิน 10 บรรทัด)"
+                      />
                     </div>
-                    <div v-if="index > 0" class="col-xs-12 col-sm-1 flex justify-center items-center">
-                      <q-btn flat v-if="status == true" round color="red" icon="mdi-trash-can-outline"
-                        @click="deleteProductivitys(index)" />
+                    <div
+                      v-if="index > 0"
+                      class="col-xs-12 col-sm-1 flex justify-center items-center"
+                    >
+                      <q-btn
+                        flat
+                        v-if="status == true"
+                        round
+                        color="red"
+                        icon="mdi-trash-can-outline"
+                        @click="deleteProductivitys(index)"
+                      />
                     </div>
                   </div>
                 </q-card>
@@ -1471,8 +2052,14 @@ watch(knowledge.value, () => {
                       <li>ความสำเร็จของงานที่ได้รับมอบหมาย</li>
                       <li>
                         อื่นๆ (ถ้ามี)
-                        <q-input :readonly="status != true" dense borderless :outlined="status == true" v-model="Other5"
-                          label="กรอกอื่นๆ" />
+                        <q-input
+                          :readonly="status != true"
+                          dense
+                          borderless
+                          :outlined="status == true"
+                          v-model="Other5"
+                          label="กรอกอื่นๆ"
+                        />
                       </li>
                     </div>
                   </div>
@@ -1555,16 +2142,36 @@ watch(knowledge.value, () => {
               </div>
               <div class="col-12 row q-col-gutter-md">
                 <div class="col-xs-12 col-sm-4">
-                  <q-input :readonly="status != true" dense borderless :outlined="status == true" v-model="fullname"
-                    label="ชื่อ-สกุล" />
+                  <q-input
+                    :readonly="status != true"
+                    dense
+                    borderless
+                    :outlined="status == true"
+                    v-model="fullname"
+                    label="ชื่อ-สกุล"
+                  />
                 </div>
                 <div class="col-xs-12 col-sm-4">
-                  <q-input :readonly="status != true" dense borderless :outlined="status == true" v-model="position"
-                    label="ตำแหน่ง" />
+                  <q-input
+                    :readonly="status != true"
+                    dense
+                    borderless
+                    :outlined="status == true"
+                    v-model="position"
+                    label="ตำแหน่ง"
+                  />
                 </div>
                 <div class="col-xs-12 col-sm-4">
-                  <datepicker menu-class-name="modalfix" v-model="date1" :locale="'th'" autoApply
-                    :readonly="status != true" borderless :enableTimePicker="false" week-start="0">
+                  <datepicker
+                    menu-class-name="modalfix"
+                    v-model="date1"
+                    :locale="'th'"
+                    autoApply
+                    :readonly="status != true"
+                    borderless
+                    :enableTimePicker="false"
+                    week-start="0"
+                  >
                     <template #year="{ year }">
                       {{ year + 543 }}
                     </template>
@@ -1572,12 +2179,23 @@ watch(knowledge.value, () => {
                       {{ parseInt(value + 543) }}
                     </template>
                     <template #trigger>
-                      <q-input hide-bottom-space :rules="[(val) => !!val || 'กรุณาเลือกวันที่']"
-                        :readonly="status != true" dense borderless :outlined="status == true"
-                        class="full-width datepicker" :model-value="date1 != null ? date2Thai(date1) : null"
-                        label="ลงวันที่">
+                      <q-input
+                        hide-bottom-space
+                        :rules="[(val) => !!val || 'กรุณาเลือกวันที่']"
+                        :readonly="status != true"
+                        dense
+                        borderless
+                        :outlined="status == true"
+                        class="full-width datepicker"
+                        :model-value="date1 != null ? date2Thai(date1) : null"
+                        label="ลงวันที่"
+                      >
                         <template v-slot:prepend>
-                          <q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
+                          <q-icon
+                            name="event"
+                            class="cursor-pointer"
+                            style="color: var(--q-primary)"
+                          >
                           </q-icon>
                         </template>
                       </q-input>
@@ -1592,15 +2210,43 @@ watch(knowledge.value, () => {
                 ผู้ดูแลการทดลองปฏิบัติหน้าที่ราชการ
               </div>
               <div class="col-12 row q-col-gutter-md">
-                <q-select v-if="status == true" :options="filtermantor(OPcaretaker, [caretaker2])" option-value="id"
-                  option-label="name" class="col-xs-12 col-sm-8" :readonly="status != true" dense borderless
-                  :outlined="status == true" v-model="caretaker1" label="ผู้ดูแลคนที่ 1" />
-                <q-select v-else :options="filtermantor(OPcaretaker, [caretaker2])" option-value="id" option-label="name"
-                  class="col-xs-12 col-sm-8" :readonly="status != true" dense borderless :outlined="status == true"
-                  v-model="caretaker1" label="ผู้ดูแลคนที่ 1" />
+                <q-select
+                  v-if="status == true"
+                  :options="filtermantor(OPcaretaker, [caretaker2])"
+                  option-value="id"
+                  option-label="name"
+                  class="col-xs-12 col-sm-8"
+                  :readonly="status != true"
+                  dense
+                  borderless
+                  :outlined="status == true"
+                  v-model="caretaker1"
+                  label="ผู้ดูแลคนที่ 1"
+                />
+                <q-select
+                  v-else
+                  :options="filtermantor(OPcaretaker, [caretaker2])"
+                  option-value="id"
+                  option-label="name"
+                  class="col-xs-12 col-sm-8"
+                  :readonly="status != true"
+                  dense
+                  borderless
+                  :outlined="status == true"
+                  v-model="caretaker1"
+                  label="ผู้ดูแลคนที่ 1"
+                />
                 <div class="col-xs-12 col-sm-4">
-                  <datepicker menu-class-name="modalfix" v-model="date2" :locale="'th'" autoApply borderless
-                    :enableTimePicker="false" :readonly="status != true" week-start="0">
+                  <datepicker
+                    menu-class-name="modalfix"
+                    v-model="date2"
+                    :locale="'th'"
+                    autoApply
+                    borderless
+                    :enableTimePicker="false"
+                    :readonly="status != true"
+                    week-start="0"
+                  >
                     <template #year="{ year }">
                       {{ year + 543 }}
                     </template>
@@ -1608,27 +2254,68 @@ watch(knowledge.value, () => {
                       {{ parseInt(value + 543) }}
                     </template>
                     <template #trigger>
-                      <q-input hide-bottom-space :rules="[(val) => !!val || 'กรุณาเลือกวันที่']"
-                        :readonly="status != true" dense borderless :outlined="status == true"
-                        class="full-width datepicker" :model-value="date2 != null ? date2Thai(date2) : null"
-                        label="ลงวันที่">
+                      <q-input
+                        hide-bottom-space
+                        :rules="[(val) => !!val || 'กรุณาเลือกวันที่']"
+                        :readonly="status != true"
+                        dense
+                        borderless
+                        :outlined="status == true"
+                        class="full-width datepicker"
+                        :model-value="date2 != null ? date2Thai(date2) : null"
+                        label="ลงวันที่"
+                      >
                         <template v-slot:prepend>
-                          <q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
+                          <q-icon
+                            name="event"
+                            class="cursor-pointer"
+                            style="color: var(--q-primary)"
+                          >
                           </q-icon>
                         </template>
                       </q-input>
                     </template>
                   </datepicker>
                 </div>
-                <q-select clearable v-if="status == true" :options="filtermantor(OPcaretaker, [caretaker1])"
-                  option-value="id" option-label="name" class="col-xs-12 col-sm-8" :readonly="status != true" dense
-                  borderless :outlined="status == true" v-model="caretaker2" label="ผู้ดูแลคนที่ 2" />
-                <q-select clearable v-else :options="filtermantor(OPcaretaker, [caretaker1])" option-value="id"
-                  option-label="name" class="col-xs-12 col-sm-8" :readonly="status != true" dense borderless
-                  :outlined="status == true" v-model="caretaker2" label="ผู้ดูแลคนที่ 2" />
+                <q-select
+                  clearable
+                  v-if="status == true"
+                  :options="filtermantor(OPcaretaker, [caretaker1])"
+                  option-value="id"
+                  option-label="name"
+                  class="col-xs-12 col-sm-8"
+                  :readonly="status != true"
+                  dense
+                  borderless
+                  :outlined="status == true"
+                  v-model="caretaker2"
+                  label="ผู้ดูแลคนที่ 2"
+                />
+                <q-select
+                  clearable
+                  v-else
+                  :options="filtermantor(OPcaretaker, [caretaker1])"
+                  option-value="id"
+                  option-label="name"
+                  class="col-xs-12 col-sm-8"
+                  :readonly="status != true"
+                  dense
+                  borderless
+                  :outlined="status == true"
+                  v-model="caretaker2"
+                  label="ผู้ดูแลคนที่ 2"
+                />
                 <div class="col-xs-12 col-sm-4">
-                  <datepicker menu-class-name="modalfix" v-model="date3" :locale="'th'" autoApply borderless
-                    :enableTimePicker="false" week-start="0" :readonly="status != true | !caretaker2">
+                  <datepicker
+                    menu-class-name="modalfix"
+                    v-model="date3"
+                    :locale="'th'"
+                    autoApply
+                    borderless
+                    :enableTimePicker="false"
+                    week-start="0"
+                    :readonly="(status != true) | !caretaker2"
+                  >
                     <template #year="{ year }">
                       {{ year + 543 }}
                     </template>
@@ -1636,11 +2323,24 @@ watch(knowledge.value, () => {
                       {{ parseInt(value + 543) }}
                     </template>
                     <template #trigger>
-                      <q-input hide-bottom-space :disable="!caretaker2" :readonly="status != true" dense s borderless
-                        :outlined="status == true" class="full-width datepicker"
-                        :model-value="date3 != null ? date2Thai(date3) : null" label="ลงวันที่">
+                      <q-input
+                        hide-bottom-space
+                        :disable="!caretaker2"
+                        :readonly="status != true"
+                        dense
+                        s
+                        borderless
+                        :outlined="status == true"
+                        class="full-width datepicker"
+                        :model-value="date3 != null ? date2Thai(date3) : null"
+                        label="ลงวันที่"
+                      >
                         <template v-slot:prepend>
-                          <q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
+                          <q-icon
+                            name="event"
+                            class="cursor-pointer"
+                            style="color: var(--q-primary)"
+                          >
                           </q-icon>
                         </template>
                       </q-input>
@@ -1655,15 +2355,43 @@ watch(knowledge.value, () => {
                 ผู้บังคับบัญชาผู้มอบหมายงาน
               </div>
               <div class="col-12 row q-col-gutter-md">
-                <q-select v-if="status == true" :options="OPcommander" option-value="id" option-label="name"
-                  class="col-xs-12 col-sm-8" :readonly="status != true" dense borderless :outlined="status == true"
-                  v-model="commander" label="ผู้บังคับบัญชา" />
-                <q-select v-else :options="OPcommander" option-value="id" option-label="name" class="col-xs-12 col-sm-8"
-                  :readonly="status != true" dense borderless :outlined="status == true" v-model="commander"
-                  label="ผู้บังคับบัญชา" />
+                <q-select
+                  v-if="status == true"
+                  :options="OPcommander"
+                  option-value="id"
+                  option-label="name"
+                  class="col-xs-12 col-sm-8"
+                  :readonly="status != true"
+                  dense
+                  borderless
+                  :outlined="status == true"
+                  v-model="commander"
+                  label="ผู้บังคับบัญชา"
+                />
+                <q-select
+                  v-else
+                  :options="OPcommander"
+                  option-value="id"
+                  option-label="name"
+                  class="col-xs-12 col-sm-8"
+                  :readonly="status != true"
+                  dense
+                  borderless
+                  :outlined="status == true"
+                  v-model="commander"
+                  label="ผู้บังคับบัญชา"
+                />
                 <div class="col-xs-12 col-sm-4">
-                  <datepicker menu-class-name="modalfix" v-model="date4" :locale="'th'" autoApply borderless
-                    :readonly="status != true" :enableTimePicker="false" week-start="0">
+                  <datepicker
+                    menu-class-name="modalfix"
+                    v-model="date4"
+                    :locale="'th'"
+                    autoApply
+                    borderless
+                    :readonly="status != true"
+                    :enableTimePicker="false"
+                    week-start="0"
+                  >
                     <template #year="{ year }">
                       {{ year + 543 }}
                     </template>
@@ -1671,12 +2399,23 @@ watch(knowledge.value, () => {
                       {{ parseInt(value + 543) }}
                     </template>
                     <template #trigger>
-                      <q-input hide-bottom-space :rules="[(val) => !!val || 'กรุณาเลือกวันที่']"
-                        :readonly="status != true" dense borderless :outlined="status == true"
-                        class="full-width datepicker" :model-value="date4 != null ? date2Thai(date4) : null"
-                        label="ลงวันที่">
+                      <q-input
+                        hide-bottom-space
+                        :rules="[(val) => !!val || 'กรุณาเลือกวันที่']"
+                        :readonly="status != true"
+                        dense
+                        borderless
+                        :outlined="status == true"
+                        class="full-width datepicker"
+                        :model-value="date4 != null ? date2Thai(date4) : null"
+                        label="ลงวันที่"
+                      >
                         <template v-slot:prepend>
-                          <q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
+                          <q-icon
+                            name="event"
+                            class="cursor-pointer"
+                            style="color: var(--q-primary)"
+                          >
                           </q-icon>
                         </template>
                       </q-input>
@@ -1691,19 +2430,47 @@ watch(knowledge.value, () => {
                 ประธานกรรมการ
               </div>
               <div class="col-12 row q-col-gutter-md">
-                <q-select v-if="status == true" :options="OPchairman" option-value="id" option-label="name"
-                  class="col-xs-12 col-sm-8" :readonly="status != true" dense borderless :outlined="status == true"
-                  v-model="chairman" label="ประธานกรรมการ" />
-                <q-select v-else :options="OPchairman" option-value="id" option-label="name" class="col-xs-12 col-sm-8"
-                  :readonly="status != true" dense borderless :outlined="status == true" v-model="chairman"
-                  label="ประธานกรรมการ" />
+                <q-select
+                  v-if="status == true"
+                  :options="OPchairman"
+                  option-value="id"
+                  option-label="name"
+                  class="col-xs-12 col-sm-8"
+                  :readonly="status != true"
+                  dense
+                  borderless
+                  :outlined="status == true"
+                  v-model="chairman"
+                  label="ประธานกรรมการ"
+                />
+                <q-select
+                  v-else
+                  :options="OPchairman"
+                  option-value="id"
+                  option-label="name"
+                  class="col-xs-12 col-sm-8"
+                  :readonly="status != true"
+                  dense
+                  borderless
+                  :outlined="status == true"
+                  v-model="chairman"
+                  label="ประธานกรรมการ"
+                />
               </div>
             </div>
           </div>
         </div>
         <q-separator v-show="routeName == 'probationWorkAdd'" />
-        <div v-show="routeName == 'probationWorkAdd'" class="flex justify-end q-pa-sm q-gutter-sm">
-          <q-btn unelevated label="บันทึก" color="public" @click="saveData(personalId)" />
+        <div
+          v-show="routeName == 'probationWorkAdd'"
+          class="flex justify-end q-pa-sm q-gutter-sm"
+        >
+          <q-btn
+            unelevated
+            label="บันทึก"
+            color="public"
+            @click="saveData(personalId)"
+          />
         </div>
       </div>
     </div>
diff --git a/src/modules/05_placement/components/probation/FormEvaluation/FormReport.vue b/src/modules/05_placement/components/probation/FormEvaluation/FormReport.vue
index b2b27ba48..6718c86ad 100644
--- a/src/modules/05_placement/components/probation/FormEvaluation/FormReport.vue
+++ b/src/modules/05_placement/components/probation/FormEvaluation/FormReport.vue
@@ -77,13 +77,14 @@ const reson = ref<string>("");
 const chairman_dated = ref<string>("");
 const director1_dated = ref<any>("");
 const director2_dated = ref<any>("");
-
+const fullname = ref<string>("")
 const fecthResult = async (id: string) => {
   await http
     .get(config.API.createformReport(id))
     .then((res: any) => {
       let data = res.data.data.evaluate;
       console.log(data);
+      fullname.value = res.data.data.profile.name;
       date_start.value = data.date_start;
       date_finish.value = data.date_finish;
       develop.value = Number(data.develop_complete);
@@ -124,7 +125,32 @@ const savaForm = async () => {
     }
   });
 };
+const downloadFile = (response: any, filename: string) => {
+  const link = document.createElement("a");
+  var fileName = filename;
+  link.href = window.URL.createObjectURL(new Blob([response.data]));
+  link.setAttribute("download", fileName);
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+};
 
+const clickdownloadFile = async (type: string) => {
+  showLoader();
+  await http
+    .get(config.API.reportEvaluateResult(type, assignId.value), {
+      responseType: "blob",
+    })
+    .then((res) => {
+      downloadFile(res,`แบบรายงานการประเมินฯ_${fullname.value}.${type}`);
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
 const postData = async () => {
   const data = await {
     start_date: date_start.value,
@@ -153,6 +179,7 @@ const postData = async () => {
 
 <template>
   <div class="row col-12">
+    
     <div class="toptitle text-dark col-12 row items-center q-gutter-md">
       <div>แบบรายงานการประเมินฯ</div>
       <!-- <q-space /> -->
@@ -160,11 +187,11 @@ const postData = async () => {
         <q-tooltip>ดาวน์โหลด</q-tooltip>
         <q-menu>
           <q-list style="min-width: 150px">
-            <q-item clickable v-close-popup>
+            <q-item clickable v-close-popup @click="clickdownloadFile('pdf')">
               <q-item-section avatar><q-icon color="red" name="mdi-file-pdf" /></q-item-section>
               <q-item-section>ไฟล์ .PDF</q-item-section>
             </q-item>
-            <q-item clickable v-close-popup>
+            <q-item clickable v-close-popup @click="clickdownloadFile('docx')">
               <q-item-section avatar><q-icon color="blue" name="mdi-file-word" /></q-item-section>
               <q-item-section>ไฟล์ .docx</q-item-section>
             </q-item>
diff --git a/src/modules/05_placement/components/probation/FormEvaluation/FormSaveResult.vue b/src/modules/05_placement/components/probation/FormEvaluation/FormSaveResult.vue
index 08e81998e..7e2506f56 100644
--- a/src/modules/05_placement/components/probation/FormEvaluation/FormSaveResult.vue
+++ b/src/modules/05_placement/components/probation/FormEvaluation/FormSaveResult.vue
@@ -61,6 +61,7 @@ onMounted(async () => {
   if (props.tab && props.action == "edit") {
     evaluate_no.value = Number(props.tab.charAt(4));
     dataArr.value = await props.data;
+
     fecthFormdata();
   }
 });
@@ -69,6 +70,7 @@ watch(props, async () => {
   if (props.tab && props.action == "edit") {
     evaluate_no.value = Number(props.tab.charAt(4));
     dataArr.value = await props.data;
+    console.log(dataArr.value)
     fecthFormdata();
     // console.log("props===>", props.data);
   }
diff --git a/src/modules/05_placement/components/probation/FormEvaluation/Header.vue b/src/modules/05_placement/components/probation/FormEvaluation/Header.vue
index f9ffa5883..2c0037218 100644
--- a/src/modules/05_placement/components/probation/FormEvaluation/Header.vue
+++ b/src/modules/05_placement/components/probation/FormEvaluation/Header.vue
@@ -6,6 +6,12 @@ const route = useRoute();
 
 const tabHead = ref<string>("save1");
 const props = defineProps({
+  FileDownload:{
+    type:Function,
+    default() {
+      return "Default function";
+    },
+  },
   loop: {
     type: Number,
   },
@@ -22,6 +28,9 @@ const props = defineProps({
     },
   },
 });
+const downloadFile = (type:string) =>{
+  props.FileDownload(type)
+}
 
 watch(tabHead, () => {
   props.changeTab(tabHead.value);
@@ -58,13 +67,13 @@ const nextPage = () => {
                 <q-tooltip>ดาวน์โหลด</q-tooltip>
                 <q-menu>
                   <q-list style="min-width: 150px">
-                    <q-item clickable v-close-popup>
+                    <q-item clickable v-close-popup @click="downloadFile('pdf')">
                       <q-item-section avatar
                         ><q-icon color="red" name="mdi-file-pdf"
                       /></q-item-section>
                       <q-item-section>ไฟล์ .PDF</q-item-section>
                     </q-item>
-                    <q-item clickable v-close-popup>
+                    <q-item clickable v-close-popup @click="downloadFile('docx')">
                       <q-item-section avatar
                         ><q-icon color="blue" name="mdi-file-word"
                       /></q-item-section>
diff --git a/src/modules/05_placement/components/probation/FormEvaluation/Template2.vue b/src/modules/05_placement/components/probation/FormEvaluation/Template2.vue
index 2368b0050..2665f4fea 100644
--- a/src/modules/05_placement/components/probation/FormEvaluation/Template2.vue
+++ b/src/modules/05_placement/components/probation/FormEvaluation/Template2.vue
@@ -6,8 +6,18 @@ import { useQuasar } from "quasar";
 import { useRoute, useRouter } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
 
-const Header = defineAsyncComponent(() => import("@/modules/05_placement/components/probation/FormEvaluation/Header.vue"));
-const FormEvaluate = defineAsyncComponent(() => import("@/modules/05_placement/components/probation/FormEvaluation/FormEvaluate.vue"));
+const Header = defineAsyncComponent(
+  () =>
+    import(
+      "@/modules/05_placement/components/probation/FormEvaluation/Header.vue"
+    )
+);
+const FormEvaluate = defineAsyncComponent(
+  () =>
+    import(
+      "@/modules/05_placement/components/probation/FormEvaluation/FormEvaluate.vue"
+    )
+);
 
 const router = useRouter();
 const route = useRoute();
@@ -16,7 +26,7 @@ const $q = useQuasar();
 const { showLoader, hideLoader, messageError, success } = mixin;
 const assignId = ref<string>(route.params.form.toString());
 const personalId = ref<string>(route.params.personalId.toString());
-
+const fullname = ref<string>("")
 const tab = ref<string>("save1");
 const tabs = ref<any>([]);
 const dataArrayNumber = ref<number>(1);
@@ -37,8 +47,10 @@ const fecthAssign = async (id: string) => {
     .get(config.API.createformCommader(id))
     .then((res: any) => {
       evaluate.value = res.data.data.evaluate;
+      fullname.value = res.data.data.person.name;
       tabs.value = evaluate.value;
       dataArrayNumber.value = 1;
+      console.log(fullname.value);
     })
     .catch((e: any) => {
       // console.log(e);
@@ -48,6 +60,33 @@ const fecthAssign = async (id: string) => {
       hideLoader();
     });
 };
+const downloadFile = (response: any, filename: string) => {
+  const link = document.createElement("a");
+  var fileName = filename;
+  link.href = window.URL.createObjectURL(new Blob([response.data]));
+  link.setAttribute("download", fileName);
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+};
+
+const FileDownload = async (type: string) => {
+  let numTab = evaluate.value.find((e: any) => e.no === dataArrayNumber.value);
+  showLoader();
+  await http
+    .get(config.API.reportEvaluate(type, numTab.id), {
+      responseType: "blob",
+    })
+    .then(async (res) => {
+      downloadFile(res, `แบบประเมินผล(ผู้บังคับบัญชา)_${fullname.value}_ครั้งที่${numTab.no}.${type}`);
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
 const addData = () => {
   router.push(
     `/probation/detail/addevalua/${personalId.value}/${assignId.value}`
@@ -56,10 +95,20 @@ const addData = () => {
 </script>
 
 <template>
-  <Header v-if="tabs.length > 0" :change-tab="changeTab" :loop="tabs.length" :add-data="addData" />
+  <Header
+    v-if="tabs.length > 0"
+    :change-tab="changeTab"
+    :loop="tabs.length"
+    :add-data="addData"
+    :FileDownload="FileDownload"
+  />
 
   <q-page-container v-if="tabs.length > 0">
-    <FormEvaluate :tab="tab" :data="evaluate.find((x: any) => x.no === dataArrayNumber)" action="edit" />
+    <FormEvaluate
+      :tab="tab"
+      :data="evaluate.find((x: any) => x.no === dataArrayNumber)"
+      action="edit"
+    />
   </q-page-container>
 
   <div v-else class="q-gutter-md">
diff --git a/src/modules/05_placement/components/probation/FormEvaluation/Template2Format2.vue b/src/modules/05_placement/components/probation/FormEvaluation/Template2Format2.vue
index 2e5169b7b..ad921ce68 100644
--- a/src/modules/05_placement/components/probation/FormEvaluation/Template2Format2.vue
+++ b/src/modules/05_placement/components/probation/FormEvaluation/Template2Format2.vue
@@ -17,6 +17,7 @@ const { showLoader, hideLoader, messageError, success } = mixin;
 const assignId = ref<string>(route.params.form.toString());
 const personalId = ref<string>(route.params.personalId.toString());
 
+const fullname = ref<string>("")
 const tab = ref<string>("save1");
 const tabs = ref<any>([]);
 const dataArrayNumber = ref<number>(1);
@@ -32,6 +33,7 @@ const fecthAssign = async (id: string) => {
     .get(config.API.createformChairman(id))
     .then((res: any) => {
       evaluate.value = res.data.data.evaluate;
+      fullname.value = res.data.data.person.name;
       tabs.value = evaluate.value;
       dataArrayNumber.value = 1;
     })
@@ -42,6 +44,33 @@ const fecthAssign = async (id: string) => {
       hideLoader();
     });
 };
+const downloadFile = (response: any, filename: string) => {
+  const link = document.createElement("a");
+  var fileName = filename;
+  link.href = window.URL.createObjectURL(new Blob([response.data]));
+  link.setAttribute("download", fileName);
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+};
+
+const FileDownload = async (type: string) => {
+  let numTab = evaluate.value.find((e: any) => e.no === dataArrayNumber.value);
+  showLoader();
+  await http
+    .get(config.API.reportEvaluateChairman(type, numTab.id), {
+      responseType: "blob",
+    })
+    .then(async (res) => {
+      downloadFile(res, `แบบประเมินผล(คณะกรรมการ)_${fullname.value}_ครั้งที่${numTab.no}.${type}`);
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
 const addData = () => {
   router.push(
     `/probation/detail/addevaluascore/${personalId.value}/${assignId.value}`
@@ -55,7 +84,7 @@ const changeTab = (tabVal: string) => {
 </script>
 
 <template>
-  <Header v-if="tabs.length > 0" :change-tab="changeTab" :loop="tabs.length" :add-data="addData" />
+  <Header v-if="tabs.length > 0" :change-tab="changeTab" :loop="tabs.length" :add-data="addData" :FileDownload="FileDownload"/>
 
   <q-page-container v-if="tabs.length > 0">
     <FormEvaluateScore :tab="tab" :data="evaluate.find((x: any) => x.no === dataArrayNumber)" action="edit" />