diff --git a/src/api/reports/api.report.ts b/src/api/reports/api.report.ts
index efd6111d6..7ebb240cd 100644
--- a/src/api/reports/api.report.ts
+++ b/src/api/reports/api.report.ts
@@ -5,6 +5,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`;
+const reportResign = `${env.API_REPORT2_URI}/report/resign/33`;
 
 export default {
   reportOrderCover: (fileType: string, id: string, commandCode: string) =>
@@ -13,6 +14,8 @@ export default {
     `${reportOrder}/${commandCode}/attachment/${fileType}/${id}`,
   reportRetireList: (fileType: string, id: string) =>
     `${reportRetire}/${fileType}/${id}`,
+    reportResignList: (fileType: string, id: string) =>
+    `${reportResign}/${fileType}/${id}`,
 
   fileCover: (format: string, fileType: string, id: string) =>
     `${reportOrder}/${format}/cover/${fileType}/${id}`,
diff --git a/src/modules/06_retirement/components/resign/ResignByid.vue b/src/modules/06_retirement/components/resign/ResignByid.vue
index 97525abd7..ea0655496 100644
--- a/src/modules/06_retirement/components/resign/ResignByid.vue
+++ b/src/modules/06_retirement/components/resign/ResignByid.vue
@@ -167,7 +167,7 @@
               {{ props.row.fileName }}
             </q-td>
             <q-td key="btnMicrosoft" :props="props">
-              <q-btn type="a" target="_blank" :href="props.row.pathName" flat dense round color="red" icon="picture_as_pdf">
+              <q-btn type="a" target="_blank" :href="props.row.pathName" flat dense round color="red" icon="picture_as_pdf" >
                 <q-tooltip>ไฟล์ PDF</q-tooltip>
               </q-btn>
             </q-td>
@@ -176,6 +176,41 @@
       </d-table>
     </div>
   </q-card>
+
+  <q-card bordered class="row col-12 text-dark q-mt-sm">
+    <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
+      <div class="q-pl-sm text-weight-bold text-dark">แบบฟอร์มหนังสือขอลาออกจากราชการ</div>
+    </div>
+    <div class="col-12"><q-separator /></div>
+    <div class="col-12">
+      <d-table
+        :rows="rowsFileDownload"
+        :columns="columns"
+        row-key="fileName"
+        hide-header
+        hide-bottom
+      >
+        <template v-slot:body="props">
+          <q-tr :props="props" class="cursor-pointer">
+            <q-td key="no" :props="props">
+              {{ props.rowIndex + 1 }}
+            </q-td>
+            <q-td key="fileName" :props="props">
+              {{ props.row.fileName }}
+            </q-td>
+            <q-td key="btnMicrosoft" :props="props">
+              <q-btn flat dense round color="red" icon="picture_as_pdf" @click="downloadAttachment('pdf',id)">
+                <q-tooltip>ดาวน์โหลด</q-tooltip>
+              </q-btn>
+              <q-btn flat dense round color="blue" icon="mdi-file-word" @click="downloadAttachment('docx',id)">
+                <q-tooltip>ไฟล์ WORD</q-tooltip>
+              </q-btn>
+            </q-td>
+          </q-tr>
+        </template>
+      </d-table>
+    </div>
+  </q-card>
   <q-card bordered class="row col-12 text-dark q-mt-sm">
     <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
       <div class="q-pl-sm text-weight-bold text-dark">
@@ -738,6 +773,10 @@ const columns = ref<QTableProps["columns"]>([
   },
 ]);
 
+const rowsFileDownload = ref<TypeFile[]>([
+  {fileName: "หนังสือลาออกจากราขการ",
+  pathName: ""}]);
+
 const closeModal = () => (modal.value = false);
 const openModal = () => (modal.value = true);
 
@@ -745,6 +784,9 @@ const openModal = () => (modal.value = true);
 // const modalPassNot = ref<boolean>(false);
 onMounted(() => {
   fetchData(id.value);
+  // fetchAttachment('pdf',id.value)
+  // fetchAttachment('docx',id.value)
+  // downloadAttachment('pdf',id.value)
 });
 
 const diffDate = () => {
@@ -801,6 +843,65 @@ const fetchData = async (id: string) => {
     });
 };
 
+const fetchAttachment = async (type:string , id: string) => {
+  showLoader();
+  await http
+    .get(config.API.reportResignList(type, id))
+    .then((res: any) => {
+      const data = res.data.result;
+      //   console.log(data);
+      let list: TypeFile[] = [];
+      if (data.docs.length > 0) {
+        data.docs.map((doc: TypeFile) => {
+          list.push({
+            pathName: doc.pathName ?? "",
+            fileName: doc.fileName ?? "",
+          });
+          console.log(doc.fileName);
+          
+        });
+      }
+      rowsFileDownload.value = list;
+    })
+    .catch((e) => {
+      console.log(e);
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+
+const downloadAttachment = async (type:string , id: string) => {
+  showLoader();
+  await http
+    .get(config.API.reportResignList(type, id), {
+      responseType: "blob",
+    })
+    .then(async (res) => {
+      const data = res.data.result;
+        console.log(data);
+      let list: TypeFile[] = [];
+      downloadFile(res, `หนังสือลาออกจากราขการ.${type}`);
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      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 popUp = (action: "pass" | "passNot") => {
   reasonReign.value = "";
   dateBreak.value = null;