hrms-mgt/src/modules/14_KPI/components/Tab/05_File.vue

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

import { useCounterMixin } from "@/stores/mixin";

import http from "@/plugins/http";
import config from "@/app.config";
import { useRoute } from "vue-router";

const $q = useQuasar();
const route = useRoute();
const checkRoutePermisson = ref<boolean>(route.name == "KPIDetailPage");
const id = ref<string>(route.params.id ? route.params.id.toString() : "");
const {
  dialogConfirm,
  showLoader,
  hideLoader,
  success,
  messageError,
  dialogRemove,
} = useCounterMixin();
interface ArrayFileList {
  id: string;
  pathName: string;
  fileName: string;
}

const isReadonly = ref<boolean>(
  route.name === "KPIEditEvaluator" ? true : false
);

const documentFile = ref<any>(null);
const fileList = ref<ArrayFileList[]>([]);

/** ดึงข้อมูล */
async function getData() {
  showLoader();
  await http
    .get(config.API.file("ไฟล์เอกสาร", "KPI", id.value))
    .then((res) => {
      fileList.value = res.data;
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      hideLoader();
    });
}

/**
 * อัปโหลดไฟล์
 * @param uploadUrl  url
 * @param file ไฟล์
 */
async function uploadFileDoc(uploadUrl: string, file: any) {
  const Data = new FormData();
  Data.append("file", documentFile.value);
  await axios
    .put(uploadUrl, file, {
      headers: {
        "Content-Type": file.type,
      },
    })
    .then((res) => {
      success($q, "อัปโหลดไฟล์สำเร็จ");
      getData();
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      documentFile.value = null;
      hideLoader();
    });
}

/** ฟังชั่น อัปโหลดไฟล์ */
async 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("ไฟล์เอกสาร", "KPI", id.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.file("ไฟล์เอกสาร", "KPI", id.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.file("ไฟล์เอกสาร", "KPI", id.value) + `/${fileName}`)
      .catch((e) => {
        messageError($q, e);
      })
      .finally(() => {
        getData();

        setTimeout(() => {
          success($q, `ลบไฟล์สำเร็จ`);
          hideLoader();
        }, 500);
      });
  });
}

onMounted(() => {
  getData();
});
</script>

<template>
  <div class="q-pa-md">
    <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
            :readonly="checkRoutePermisson"
            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="primary"
                icon="mdi-upload"
                @click="clickUpload(documentFile)"
                ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
              >
            </template>
          </q-file>
        </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="!isReadonly && !checkRoutePermisson"
                  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>
  </div>
</template>