ทะเบียนประวัติ: เอกสารหลักฐาน (upload delete download)

src/modules/04_registryNew/components/detail/Other/02_Document.vue

@@ -1,91 +1,171 @@
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
+import { useRoute } from "vue-router";
 import http from "@/plugins/http";
 import config from "@/app.config";
+import axios from "axios";
 import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar } from "quasar";
 import type { ArrayFileList } from "@/modules/04_registryNew/interface/index/document";
-const $q = useQuasar;
+const $q = useQuasar();
+const route = useRoute();
 const mixin = useCounterMixin();
 const {
-  dialogConfirm,
-  showLoader,
-  hideLoader,
   success,
   messageError,
+  showLoader,
+  hideLoader,
+  dialogConfirm,
   dialogRemove,
 } = mixin;
 
-const id = ref<string>("");
 const documentFile = ref<any>(null);
-const fileDocDataUpload = ref<File[]>([]);
 const fileList = ref<ArrayFileList[]>([]);
-/**
+const profileId = ref<string>(
- * ฟังชั่นอัปโหลดไฟล์
+  route.params.id ? route.params.id.toString() : ""
- * @param documentFile ไฟล์ที่รับมา
+);
- */
-function fileUploadDoc(documentFile: any) {
-  documentFile.forEach((file: any) => {
-    fileDocDataUpload.value.push(file);
-  });
-}
 
-function getData() {}
+async function getData() {
-/**
+  await http
- * ฟังก์ชั่นสำหรับอัพโหลดไฟล์เอกสารหลักฐาน
+    .get(
- */
+      config.API.file("ระบบทะเบียนประวัติ", "เอกสารหลักฐาน", profileId.value)
-function upLoadFileDoc() {
+    )
-  const Data = new FormData();
-  Data.append("file", documentFile.value);
-  showLoader();
-  http
-    .put(config.API.complaintFileUpload(id.value), Data)
     .then((res) => {
-      success($q, "อัพโหลดไฟล์สำเร็จ");
+      fileList.value = res.data;
-      getData();
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      hideLoader();
-      documentFile.value = null;
-    });
-}
-
-/**
- * เปิดลิงค์ไฟล์
- * @param link รับมาเป็น https ลิงค์
- */
-function downloadFile(link: string) {
-  window.open(link, "_blank");
-}
-
-/**
- * ลบไฟล์
- * @param id id file
- */
-function deleteFile(id: string) {
-  dialogRemove($q, () => confirmDelete(id));
-}
-
-/**
- * ยืนยัน ลบ ไฟล์
- * @param id id file
- */
-function confirmDelete(idOrder: string) {
-  showLoader();
-  http
-    .delete(config.API.complaintFileDelete(id.value, idOrder))
-    .then((res) => {
-      success($q, `ลบไฟล์สำเร็จ`);
-      getData();
     })
     .catch((e) => {
       messageError($q, e);
     })
     .finally(() => {});
 }
+
+/**
+ * ฟังก์ชั่นสำหรับอัพโหลดไฟล์เอกสารหลักฐาน
+ */
+async function uploadFileDoc(uploadUrl: string, file: any) {
+  const Data = new FormData();
+  Data.append("file", documentFile.value);
+  showLoader();
+  await axios
+    .put(uploadUrl, file, {
+      headers: {
+        "Content-Type": file.type,
+      },
+    })
+    .then((res) => {
+      success($q, "อัปโหลดไฟล์สำเร็จ");
+      getData();
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+      documentFile.value = null;
+    });
+}
+
+async function clickUpload(file: any) {
+  const fileName = { fileName: file.name };
+
+  dialogConfirm(
+    $q,
+    async () => {
+      const selectedFile = file;
+      const formdata = new FormData();
+      formdata.append("file", selectedFile);
+      await http
+        .post(
+          config.API.file(
+            "ระบบทะเบียนประวัติ",
+            "เอกสารหลักฐาน",
+            profileId.value
+          ),
+          {
+            replace: false,
+            fileList: fileName,
+          }
+        )
+        .then(async (res) => {
+          const foundKey: string | undefined = Object.keys(res.data).find(
+            (key) =>
+              res.data[key]?.fileName !== undefined &&
+              res.data[key]?.fileName !== ""
+          );
+          foundKey &&
+            uploadFileDoc(res.data[foundKey]?.uploadUrl, documentFile.value);
+        })
+        .catch((err) => {
+          messageError($q, err);
+        });
+    },
+    "ยืนยันการอัปโหลดไฟล์",
+    "ต้องการยืนยันการอัปโหลดไฟล์นี้หรือไม่ ?"
+  );
+}
+
+/**
+ * ดาวน์โหลดลิงค์ไฟล์
+ * @param fileName file name
+ */
+function downloadFile(fileName: string) {
+  showLoader();
+  http
+    .get(
+      config.API.fileByFile(
+        "ระบบทะเบียนประวัติ",
+        "เอกสารหลักฐาน",
+        profileId.value,
+        fileName
+      )
+    )
+    .then((res) => {
+      const data = res.data.downloadUrl;
+      window.open(data, "_blank");
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      hideLoader();
+    });
+}
+
+/**
+ * ลบไฟล์
+ * @param fileName file name
+ */
+function deleteFile(fileName: string) {
+  dialogRemove($q, async () => {
+    showLoader();
+    http
+      .delete(
+        config.API.fileByFile(
+          "ระบบทะเบียนประวัติ",
+          "เอกสารหลักฐาน",
+          profileId.value,
+          fileName
+        )
+      )
+      .then((res) => {
+        success($q, `ลบไฟล์สำเร็จ`);
+        setTimeout(() => {
+          getData();
+          hideLoader();
+        }, 1000);
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  });
+}
+
+onMounted(() => {
+  getData();
+});
 </script>
 <template>
   <div class="col-sm-12 col-md-3">
@@ -105,7 +185,6 @@ function confirmDelete(idOrder: string) {
                   outlined
                   dense
                   v-model="documentFile"
-                  @added="fileUploadDoc"
                   label="ไฟล์เอกสารหลักฐาน"
                   hide-bottom-space
                   accept=".pdf,.xlsx,.docx,.png,.jpg"
@@ -123,7 +202,7 @@ function confirmDelete(idOrder: string) {
                       dense
                       color="add"
                       icon="mdi-upload"
-                      @click="upLoadFileDoc()"
+                      @click="clickUpload(documentFile)"
                       ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
                     >
                   </template>
@@ -151,7 +230,7 @@ function confirmDelete(idOrder: string) {
                         dense
                         color="blue"
                         icon="mdi-download"
-                        @click="downloadFile(data.pathName)"
+                        @click="downloadFile(data.fileName)"
                         ><q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
                       >
                       <q-btn
@@ -162,7 +241,7 @@ function confirmDelete(idOrder: string) {
                         color="red"
                         class="q-ml-sm"
                         icon="mdi-delete-outline"
-                        @click="deleteFile(data.id)"
+                        @click="deleteFile(data.fileName)"
                         ><q-tooltip>ลบไฟล์</q-tooltip></q-btn
                       >
                     </div>