hrms-user/src/modules/10_registry/05_Other/03_FileOther.vue

<script setup lang="ts">
import { ref, onMounted, watch } from "vue";
import { useCounterMixin } from "@/stores/mixin";
import { useQuasar } from "quasar";

import http from "@/plugins/http";
import config from "@/app.config";
import { useRegistryInFormationStore } from "@/modules/10_registry/store/registry";

import type { FileFormType } from "@/modules/10_registry/interface/index/Main";

const $q = useQuasar();
const store = useRegistryInFormationStore();
const { showLoader, hideLoader, messageError } = useCounterMixin();

const isLoading = ref<boolean>(false);
const fileList = ref<FileFormType[]>([]);

/** ฟังก์ชันดึงข้อมูลไฟล์ */
async function getData() {
  if (!store.citizenId) return;
  isLoading.value = true;
  await http
    .get(
      config.API.fileByFileUser(
        "ระบบทะเบียนประวัติ",
        "เอกสารหลักฐานเพิ่มเติม",
        store.citizenId,
      ),
    )
    .then((res) => {
      const data = res.data;
      fileList.value = data;
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      isLoading.value = false;
    });
}

/**
 * ดาวน์โหลดลิงค์ไฟล์
 * @param fileName file name
 */
async function downloadFile(fileName: string) {
  showLoader();
  await http
    .get(
      config.API.fileByFile(
        "ระบบทะเบียนประวัติ",
        "เอกสารหลักฐานเพิ่มเติม",
        store.citizenId,
        fileName,
      ),
    )
    .then(async (res) => {
      const downloadUrl = res.data.downloadUrl;
      const response = await fetch(downloadUrl);
      const blob = await response.blob();
      const url = URL.createObjectURL(blob);
      const link = document.createElement("a");
      link.href = url;
      link.download = fileName;
      document.body.appendChild(link);
      link.click();
      setTimeout(() => {
        document.body.removeChild(link);
        URL.revokeObjectURL(url);
      }, 100);
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      hideLoader();
    });
}

onMounted(() => {
  getData();
});

watch(
  () => store.citizenId,
  (newVal) => {
    if (newVal) {
      getData();
    }
  },
);
</script>

<template>
  <div class="col-12">
    <q-toolbar class="q-px-none q-mt-md">
      <span class="text-blue-6 text-weight-bold text-body1">เอกสาร ก.พ.7 </span>
    </q-toolbar>
    <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">
        ไฟล์เอกสาร ก.พ.7
      </div>
      <div class="col-12"><q-separator /></div>
      <div v-if="isLoading" class="col-12 q-pa-sm">
        <q-skeleton type="QSlider" />
      </div>

      <div v-else class="row col-12 q-col-gutter-y-sm q-pa-sm">
        <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
                >
              </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>
  </div>
</template>

<style scoped>
.absolute_button {
  position: absolute;
  right: 5px;
  top: -20px;
}

.fix_top {
  justify-content: start !important;
}
</style>