อัปโหลด ลบ ไฟล์

src/modules/13_salary/components/SalaryLists/ProcessStep.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, defineProps } from "vue";
+import { ref, defineProps,onMounted } from "vue";
 import { useQuasar } from "quasar";
 
 import http from "@/plugins/http";
@@ -9,9 +9,13 @@ import { useSalaryListSDataStore } from "@/modules/13_salary/store/SalaryListsSt
 const store = useSalaryListSDataStore();
 import { useCounterMixin } from "@/stores/mixin";
 import axios from "axios";
+
+const modalRecommend = ref<boolean>(false);
+const titleRecommend = ref<string>("");
+const listFile = ref<any>([])
 const $q = useQuasar(); //ใช้ noti quasar
 const mixin = useCounterMixin();
-const { messageError, dialogConfirm, showLoader, hideLoader, success } = mixin;
+const { messageError, dialogConfirm, showLoader, hideLoader, success,dialogRemove } = mixin;
 const type = ref<string>("");
 const sendStep = ref<number>(1);
 const fileUpload = ref<any>(null);
@@ -53,7 +57,7 @@ async function uploadFile(event: any) {
               res.data[key]?.fileName !== undefined &&
               res.data[key]?.fileName !== ""
           );
-          foundKey && uploadfile(res.data[foundKey]?.uploadUrl, fileUpload);
+          foundKey && uploadfile(res.data[foundKey]?.uploadUrl, fileUpload.value);
         })
         .catch((err) => {
           messageError($q, err);
@@ -100,13 +104,14 @@ function getListFile() {
       )
     )
     .then((res) => {
-      console.log(res);
+      listFile.value = res.data
     })
     .catch((e) => {
       messageError($q, e);
     })
     .finally(() => {});
 }
+
 function saveReccommend(reason: string) {
   dialogConfirm(
     $q,
@@ -168,18 +173,71 @@ function sendToDirector(msg: string, type: string) {
   );
 }
 
-const modalRecommend = ref<boolean>(false);
-const titleRecommend = ref<string>("");
+function downloadFile(fileName: string) {
+  showLoader();
+  http
+    .get(
+      config.API.subFileByFileName(
+        "ระบบเงินเดือน",
+        "เลื่อนเงินเดือน",
+        props.periodId ? props.periodId : "",
+        props.rootId ? props.rootId : "",
+        fileName
+      )
+    )
+    .then((res) => {
+      const data = res.data.downloadUrl;
+      window.open(data, "_blank");
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      hideLoader();
+    });
+}
+
+function deleteFile(fileName: string) {
+  dialogRemove($q, () => {
+    showLoader();
+    http
+      .delete(
+        config.API.subFileByFileName(
+          "ระบบเงินเดือน",
+          "เลื่อนเงินเดือน",
+          props.periodId ? props.periodId : "",
+          props.rootId ? props.rootId : "",
+          fileName
+        )
+      )
+      .then(() => {
+        success($q, "ลบไฟล์สำเร็จ");
+        setTimeout(() => {
+          getListFile();
+          hideLoader();
+        }, 1000);
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(async () => {});
+  });
+}
+
 function sendAndRecommend(title: string, typeOrder: string) {
   modalRecommend.value = true;
   titleRecommend.value = title;
   type.value = typeOrder;
 }
+
+onMounted(()=>{
+  getListFile()
+})
 </script>
 
 <template>
   <div class="row col-12 q-pa-md">
-    <q-toolbar>
+    <q-toolbar class="q-pa-none">
       <q-file
         v-if="store.statusQuota == 'PENDING'"
         bg-color="white"
@@ -284,15 +342,48 @@ 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-6" v-if="listFile.length !== 0">
+      <q-card bordered 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-list bordered separator>
+          <q-item clickable v-ripple v-for="item in listFile">
+            <q-item-section>{{ item.fileName }}</q-item-section>
+            <q-item-section avatar>
+              <div class="row">
+                <div>
+                  <q-btn
+                    dense
+                    flat
+                    round
+                    size="12px"
+                    color="blue"
+                    icon="mdi-download-outline"
+                    @click="downloadFile(item.fileName)"
+                  >
+                    <q-tooltip>ดาวน์โหลดเอกสาร</q-tooltip>
+                  </q-btn>
+                </div>
+                <div>
+                  <q-btn
+                    dense
+                    flat
+                    round
+                    size="12px"
+                    color="red"
+                    icon="mdi-delete-outline"
+                    @click="deleteFile(item.fileName)"
+                    ><q-tooltip>ลบเอกสาร</q-tooltip></q-btn
+                  >
+                </div>
+              </div>
+            </q-item-section>
+          </q-item>
+        </q-list>
       </q-card>
     </div>
+
     <DialogPopupReason
       v-model:modal="modalRecommend"
       :title="titleRecommend"