hrms-mgt/src/modules/04_registryPerson/components/detail/Other/02_Document.vue

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useQuasar } from "quasar";
import axios from "axios";

import { checkPermission } from "@/utils/permissions";
import { useRoute } from "vue-router";
import http from "@/plugins/http";
import config from "@/app.config";
import { useCounterMixin } from "@/stores/mixin";

import type { ArrayFileList } from "@/modules/04_registryPerson/interface/index/document";

const $q = useQuasar();
const route = useRoute();
const mixin = useCounterMixin();
const {
  success,
  messageError,
  showLoader,
  hideLoader,
  dialogConfirm,
  dialogRemove,
} = mixin;

/**
 * props
 */
const isLeave = defineModel<boolean>("isLeave", {
  required: true,
});

const profileId = ref<string>(
  route.params.id ? route.params.id.toString() : ""
);
const documentFile = ref<any>(null);
const fileList = ref<ArrayFileList[]>([]); //รายการเอกสารหลักฐาน

/**
 * ฟังก์ชันดึงข้อมูลรายการเอกสารหลักฐาน
 */
async function getData() {
  showLoader();
  await http
    .get(
      config.API.file("ระบบทะเบียนประวัติ", "เอกสารหลักฐาน", profileId.value)
    )
    .then((res) => {
      fileList.value = res.data;
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      hideLoader();
    });
}

/**
 * ฟังก์ชั่นสร้าง Path สำหรับอัพโหลดไฟล์เอกสารหลักฐาน
 */
function clickUpload(file: any) {
  const fileName = { fileName: file.name };
  dialogConfirm(
    $q,
    async () => {
      showLoader();
      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);
        });
    },
    "ยืนยันการอัปโหลดไฟล์",
    "ต้องการยืนยันการอัปโหลดไฟล์นี้หรือไม่ ?"
  );
}

/**
 * ฟังก์ชั่นสำหรับอัพโหลดไฟล์เอกสารหลักฐาน
 */
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(async () => {
      await getData();
      success($q, "อัปโหลดไฟล์สำเร็จ");
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      hideLoader();
      documentFile.value = null;
    });
}

/**
 * ดาวน์โหลดลิงก์ไฟล์
 * @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(async () => {
        await setTimeout(async () => {
          await getData();
          await success($q, `ลบไฟล์สำเร็จ`);
        }, 1500);
      })
      .catch((e) => {
        messageError($q, e);
        hideLoader();
      });
  });
}

onMounted(() => {
  getData();
});
</script>
<template>
  <q-card bordered class="row col-12" 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>
    <div class="row col-12 q-col-gutter-y-sm q-pa-sm">
      <div class="col-12 row">
        <q-file
          v-if="isLeave == false && checkPermission($route)?.attrIsUpdate"
          for="inputFiles"
          class="col-12"
          outlined
          dense
          v-model="documentFile"
          label="ไฟล์เอกสารหลักฐาน"
          hide-bottom-space
          accept=".pdf,.xlsx,.docx,.png,.jpg"
          clearable
        >
          <template v-slot:prepend>
            <q-icon name="attach_file" color="primary" />
          </template>
          <template v-slot:after>
            <q-btn
              size="14px"
              v-if="documentFile"
              flat
              round
              dense
              color="add"
              icon="mdi-upload"
              @click="clickUpload(documentFile)"
              ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
            >
          </template>
        </q-file>

        <!-- <div class="col-1 self-center" v-if="formData.documentFile"></div> -->
      </div>

      <div v-if="fileList.length > 0" class="col-xs-12 row">
        <q-list class="full-width rounded-borders" bordered separator>
          <q-item
            clickable
            v-ripple
            v-for="data in fileList"
            :key="data.id"
            class="items-center"
          >
            <q-item-section>{{ data.fileName }}</q-item-section>
            <q-space />
            <div>
              <q-btn
                size="12px"
                flat
                round
                dense
                color="blue"
                icon="mdi-download"
                @click="downloadFile(data.fileName)"
                ><q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
              >
              <q-btn
                v-if="isLeave == false"
                size="12px"
                flat
                round
                dense
                color="red"
                class="q-ml-sm"
                icon="mdi-delete-outline"
                @click="deleteFile(data.fileName)"
                ><q-tooltip>ลบไฟล์</q-tooltip></q-btn
              >
            </div>
          </q-item>
        </q-list>
      </div>

      <div class="col-12" v-else>
        <q-card class="q-pa-md" bordered> ไม่มีรายการเอกสาร </q-card>
      </div>
    </div>
  </q-card>
</template>

<style scoped></style>