diff --git a/src/modules/13_salary/components/SalaryLists/ProcessStep.vue b/src/modules/13_salary/components/SalaryLists/ProcessStep.vue
index edf63dd54..7484edc27 100644
--- a/src/modules/13_salary/components/SalaryLists/ProcessStep.vue
+++ b/src/modules/13_salary/components/SalaryLists/ProcessStep.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref,defineProps } from "vue";
+import { ref, defineProps } from "vue";
 import { useQuasar } from "quasar";
 
 import http from "@/plugins/http";
@@ -8,25 +8,25 @@ import DialogPopupReason from "@/components/Dialogs/PopupReason.vue"; //หม
 import { useSalaryListSDataStore } from "@/modules/13_salary/store/SalaryListsStore";
 const store = useSalaryListSDataStore();
 import { useCounterMixin } from "@/stores/mixin";
-
+import axios from "axios";
 const $q = useQuasar(); //ใช้ noti quasar
 const mixin = useCounterMixin();
 const { messageError, dialogConfirm, showLoader, hideLoader, success } = mixin;
-const type = ref<string>('')
+const type = ref<string>("");
 const sendStep = ref<number>(1);
 const fileUpload = ref<any>(null);
 const document = ref<string>("");
 const props = defineProps({
-  rootId:String,
-  periodId:String,
-  getData:Function
-})
+  rootId: String,
+  periodId: String,
+  getData: Function,
+});
 /**
  * function อัปโหลดไฟล์เจ้าหน้าที่
  * @param event file
  */
 async function uploadFile(event: any) {
-  const fileName = event.name
+  const fileName = { fileName: event.name };
 
   dialogConfirm(
     $q,
@@ -47,15 +47,13 @@ async function uploadFile(event: any) {
             fileList: fileName,
           }
         )
-        .then(async () => {
-          // await fecthInsigniaByOc(
-          //   round.value,
-          //   DataStore.agency,
-          //   "officer",
-          //   tab.value
-          // );
-          // success($q, "อัปโหลดไฟล์สำเร็จ");
-          // fileUpload.value = null;
+        .then(async (res) => {
+          const foundKey: string | undefined = Object.keys(res.data).find(
+            (key) =>
+              res.data[key]?.fileName !== undefined &&
+              res.data[key]?.fileName !== ""
+          );
+          foundKey && uploadfile(res.data[foundKey]?.uploadUrl, fileUpload);
         })
         .catch((err) => {
           messageError($q, err);
@@ -66,22 +64,74 @@ async function uploadFile(event: any) {
   );
 }
 
-function saveReccommend(reason:string) {
+/**
+ *  functoin อัปโหลดไฟล์
+ * @param uploadUrl  link อัปโหลด
+ * @param file  ไฟล์
+ */
+async function uploadfile(uploadUrl: string, file: any) {
+  showLoader();
+  await axios
+    .put(uploadUrl, file, {
+      headers: {
+        "Content-Type": file.type,
+      },
+    })
+    .then(() => {
+      getListFile();
+      success($q, "อัปโหลไฟล์สำเร็จ");
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+function getListFile() {
+  http
+    .get(
+      config.API.subFile(
+        "ระบบเงินเดือน",
+        "เลื่อนเงินเดือน",
+        props.periodId ? props.periodId : "",
+        props.rootId ? props.rootId : ""
+      )
+    )
+    .then((res) => {
+      console.log(res);
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {});
+}
+function saveReccommend(reason: string) {
   dialogConfirm(
     $q,
     async () => {
-      showLoader()
+      showLoader();
       http
-      .put(config.API.salaryPeriodStatusComment(type.value, props.periodId ? props.periodId:'', props.rootId ? props.rootId:''),{
-        titleRecommend:reason
-      })
-      .then((res)=>{
-        props.getData?.()
-      }).catch((e)=>{
-        messageError($q,e)
-      }).finally(()=>{
-        hideLoader()
-      })
+        .put(
+          config.API.salaryPeriodStatusComment(
+            type.value,
+            props.periodId ? props.periodId : "",
+            props.rootId ? props.rootId : ""
+          ),
+          {
+            titleRecommend: reason,
+          }
+        )
+        .then((res) => {
+          props.getData?.();
+        })
+        .catch((e) => {
+          messageError($q, e);
+        })
+        .finally(() => {
+          hideLoader();
+        });
       sendStep.value = sendStep.value + 1;
       modalRecommend.value = false;
     },
@@ -90,20 +140,28 @@ function saveReccommend(reason:string) {
   );
 }
 
-function sendToDirector(msg: string,type:string) {
+function sendToDirector(msg: string, type: string) {
   dialogConfirm(
     $q,
     async () => {
-      showLoader()
+      showLoader();
       http
-      .get(config.API.salaryPeriodStatus(type, props.periodId ? props.periodId:'', props.rootId ? props.rootId:''))
-      .then((res)=>{
-        props.getData?.()
-      }).catch((e)=>{
-        messageError($q,e)
-      }).finally(()=>{
-        hideLoader()
-      })
+        .get(
+          config.API.salaryPeriodStatus(
+            type,
+            props.periodId ? props.periodId : "",
+            props.rootId ? props.rootId : ""
+          )
+        )
+        .then((res) => {
+          props.getData?.();
+        })
+        .catch((e) => {
+          messageError($q, e);
+        })
+        .finally(() => {
+          hideLoader();
+        });
     },
     "ยืนยันการ" + msg,
     "ต้องการยืนยันการ" + msg + "หรือไม่?"
@@ -112,10 +170,10 @@ function sendToDirector(msg: string,type:string) {
 
 const modalRecommend = ref<boolean>(false);
 const titleRecommend = ref<string>("");
-function sendAndRecommend(title: string,typeOrder:string) {
+function sendAndRecommend(title: string, typeOrder: string) {
   modalRecommend.value = true;
   titleRecommend.value = title;
-  type.value = typeOrder
+  type.value = typeOrder;
 }
 </script>
 
@@ -169,7 +227,7 @@ function sendAndRecommend(title: string,typeOrder:string) {
           unelevated
           color="public"
           label="ส่งเอกสารให้ ผอ. ตรวจสอบ"
-          @click="sendToDirector('ส่งเอกสารให้ ผอ. ตรวจสอบ','officer')"
+          @click="sendToDirector('ส่งเอกสารให้ ผอ. ตรวจสอบ', 'officer')"
         />
 
         <!-- ผอ. หน่วยงานทำการยืนยันและส่งให้ สกจ. -->
@@ -178,16 +236,16 @@ function sendAndRecommend(title: string,typeOrder:string) {
           unelevated
           color="public"
           label="ยืนยันและส่งเอกสารให้ สกจ."
-          @click="sendToDirector('ยืนยันและส่งเอกสารให้ สกจ.','head')"
+          @click="sendToDirector('ยืนยันและส่งเอกสารให้ สกจ.', 'head')"
         />
-        
+
         <!-- สกจ. ตรวจสอบเอกสารและข้อมูลรายการเงินเดือนที่แต่ละหน่วยงานส่งมา ไม่มีปรับโควต้า -->
         <q-btn
           v-if="store.statusQuota == 'WAITOWNER1'"
           unelevated
           color="green"
           label="ยืนยันการตรวจสอบ"
-          @click="sendToDirector('ยืนยันการตรวจสอบ','owner')"
+          @click="sendToDirector('ยืนยันการตรวจสอบ', 'owner')"
         />
 
         <!-- สกจ. ตรวจสอบเอกสารและข้อมูลรายการเงินเดือนที่แต่ละหน่วยงานส่งมา มีปรับโควต้า -->
@@ -197,7 +255,7 @@ function sendAndRecommend(title: string,typeOrder:string) {
           unelevated
           color="warning"
           label="ส่งคำแนะนำให้ ผอ. ตรวจสอบ"
-          @click="sendAndRecommend('ส่งคำแนะนำให้ ผอ. ตรวจสอบ','owner')"
+          @click="sendAndRecommend('ส่งคำแนะนำให้ ผอ. ตรวจสอบ', 'owner')"
         />
 
         <!-- ผอ.หน่วยงานส่งคำแนะนำให้การเจ้าหน้าที่หน่วยงาน -->
@@ -206,7 +264,9 @@ function sendAndRecommend(title: string,typeOrder:string) {
           unelevated
           color="public"
           label="ส่งคำแนะนำให้การเจ้าหน้าที่หน่วยงาน"
-          @click="sendAndRecommend('ส่งคำแนะนำให้การเจ้าหน้าที่หน่วยงาน','head')"
+          @click="
+            sendAndRecommend('ส่งคำแนะนำให้การเจ้าหน้าที่หน่วยงาน', 'head')
+          "
         />
 
         <q-btn
@@ -224,7 +284,15 @@ function sendAndRecommend(title: string,typeOrder:string) {
         />
       </div>
     </q-toolbar>
-
+    <div class="col-12">
+      asdasd
+      <q-card bordered class="row" style="border: 1px solid #d6dee1">
+        <div class="col-12 text-weight-medium bg-grey-1 q-py-sm q-px-md">
+          รายการเอกสาร
+        </div>
+        <div class="col-12"><q-separator /></div>
+      </q-card>
+    </div>
     <DialogPopupReason
       v-model:modal="modalRecommend"
       :title="titleRecommend"