hrms-edm/Services/client/src/modules/01_user/components/FileDownload.vue

<script setup lang="ts">
import axios from 'axios'
import { storeToRefs } from 'pinia'

import type { EhrFile } from '@/stores/tree-data'
import { useFileInfoStore } from '@/stores/file-info-data'

import FileIcon from '@/components/FileIcon.vue'

const { isFilePreview, fileInfo } = storeToRefs(useFileInfoStore())
const { getType, getFormatDate, getSize, getFileNameFormat } = useFileInfoStore()

async function downloadSubmit(path: any) {
  const [cabinet, drawer, folder, file] = path.split('/')
  const formatPath = `/cabinet/${cabinet}/drawer/${drawer}/folder/${folder}/file/${file}`

  console.log(formatPath)

  const res = await axios.get<EhrFile & { download: string }>(
    `${import.meta.env.VITE_API_ENDPOINT}${formatPath}`
  )
  console.log(res.data.download)
  await axios
    .get(res.data.download, {
      method: 'GET',
      responseType: 'blob',
      headers: {
        'Content-Type': 'application/json',
        Accept: res.data.fileType,
      },
    })
    .then((r) => {
      const a = document.createElement('a')
      a.href = window.URL.createObjectURL(r.data)
      a.download = res.data.fileName
      a.click()
    })
}
</script>

<template>
  <div class="bg-white rounded-borders shadow-5 relative">
    <div class="bg-white q-pa-md">
      <div class="row items-center justify-between">
        <span class="text-h6">
          <q-btn
            flat
            dense
            class="q-mr-sm q-px-sm"
            @click="() => (isFilePreview = false)"
          >
            <q-icon
              class="pointer"
              name="arrow_back"
              size="1em"
              color="primary"
            />
          </q-btn>
          {{ getFileNameFormat(fileInfo?.fileName) }}</span
        >
      </div>
      <div class="row">
        <div class="q-pa-sm">
          <div class="col">
            <div class="box border-radius-inherit">
              <q-card flat>
                <q-card-section class="column justify-center relative q-px-xl">
                  <file-icon
                    size="preview"
                    :fileMimeType="fileInfo?.fileType"
                  />
                  <span class="text-center q-pt-md text-h6">{{
                    getFileNameFormat(fileInfo?.fileName)
                  }}</span>
                </q-card-section>
              </q-card>
            </div>
          </div>
          <div class="column q-py-md">
            <q-btn
              color="primary"
              label="ดาวน์โหลด"
              icon="mdi-download"
              class="q-py-sm"
              @click="() => downloadSubmit(fileInfo?.pathname)"
            />
          </div>
        </div>

        <div class="col q-px-lg q-gutter-md">
          <div class="row">
            <div class="col-2">
              <span>ชื่อไฟล์</span>
            </div>
            <div class="col-grow">
              <span class="text-grey">{{ fileInfo?.fileName }}</span>
            </div>
          </div>
          <q-separator />
          <div class="row">
            <div class="col-2">
              <span>ชื่อเรื่อง</span>
            </div>
            <div class="col-grow">
              <span class="text-grey">{{ fileInfo?.title }}</span>
            </div>
          </div>
          <q-separator />
          <div class="row">
            <div class="col-2">
              <span>รายละเอียด</span>
            </div>
            <div class="col-grow">
              <span class="text-grey">{{ fileInfo?.description }}</span>
            </div>
          </div>
          <q-separator />
          <div class="row">
            <div class="col-2">
              <span>กลุ่ม/หมวดหมู่</span>
            </div>
            <div class="col-grow">
              <span
                class="text-grey"
                v-for="category in fileInfo?.category"
                :key="category"
                >{{ category }}</span
              >
            </div>
          </div>
          <q-separator />
          <div class="row">
            <div class="col-2">
              <span>คำสำคัญ</span>
            </div>
            <div class="col-grow">
              <span
                class="text-grey"
                v-for="keyword in fileInfo?.keyword"
                :key="keyword"
                >{{ keyword }}</span
              >
            </div>
          </div>
          <q-separator />
          <div class="row">
            <div class="col-2">
              <span>ขนาดไฟล์</span>
            </div>
            <div class="col-grow">
              <span class="text-grey">{{ getSize(fileInfo?.fileSize) }}</span>
            </div>
          </div>
          <q-separator />
          <div class="row">
            <div class="col-2">
              <span>ประเภทไฟล์</span>
            </div>
            <div class="col-grow">
              <span class="text-grey">{{ getType(fileInfo?.fileType) }}</span>
            </div>
          </div>
          <q-separator />
          <div class="row">
            <div class="col-2">
              <span>วันที่อัปโหลด</span>
            </div>
            <div class="col-grow">
              <span class="text-grey">{{
                getFormatDate(fileInfo?.createdAt)
              }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.box {
  border: 2px solid #f1f2f4;
  border-radius: 8px;
}
</style>