hrms-mgt/src/modules/11_discipline/components/UploadFile.vue

<script setup lang="ts">
import { ref, watch } from "vue";
import http from "@/plugins/http";
import config from "@/app.config";
import { useQuasar } from "quasar";

import type { FileLists } from "@/modules/11_discipline/interface/index/Main";

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

const $q = useQuasar();

const mixin = useCounterMixin();
const { showLoader, hideLoader, success, messageError, dialogRemove ,downloadRenameFileByLink} = mixin;

const fileRef = ref<Object | null>(null);
const file = ref<any>();

/** รับ props มาจากหน้าหลัก */
const props = defineProps({
  id: {
    type: String,
    required: true,
  },
  title: {
    type: String,
    default: "อัปโหลด",
  },
  label: {
    type: String,
    default: "ไฟล์เอกสาร",
  },
  files: {
    type: Array as () => FileLists[],
    default: [],
  },
  uploadType: {
    type: String,
    required: true,
    default: "support",
  },
  type: {
    type: String,
    required: true,
  },
  fetchData: {
    type: Function,
    default: () => "",
  },
  returnCount: {
    type: Function,
    default: () => "",
  },
  isReadonly: {
    type: Boolean,
  },
});

/**
 * อัปโหลดหลักฐานสนับสนุนข้อกล่าวหา
 */
async function uploadFile() {
  if (props.type === "relevant") {
    props.returnCount(2);
  } else if (props.type === "summaryEvidence") {
    props.returnCount(3);
  } else if (props.type === "recordAccuser") {
    props.returnCount(4);
  } else if (props.type === "witnesses") {
    props.returnCount(5);
  } else if (props.type === "other") {
    props.returnCount(6);
  }
  const Data = new FormData();
  Data.append("file", file.value);
  showLoader();
  await http
    .put(config.API.disciplineDoc(props.type, props.id), Data)
    .then(() => {
      file.value = null;
      props.fetchData();
      success($q, "บันทึกข้อมูลสำเร็จ");
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(async () => {
      hideLoader();
    });
}

/**
 * pop up ลบไฟล์
 * @param id id ของไฟล์ที่จะลบ
 */
function popupRemove(id: string) {
  dialogRemove($q, () => removeFile(id));
}

/**
 * ฟังชั่นลบไฟล์
 * @param id id ของไฟล์ 
 */
async function removeFile(id: string) {
  showLoader();
  await http
    .delete(config.API.disciplineByIdDoc(props.type, props.id, id))
    .then(() => {
      success($q, "ลบไฟล์สำเร็จ");
      props.fetchData();
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(async () => {
      hideLoader();
    });
}

/**
 * เปิดลิงค์ไฟล์
 * @param link รับมาเป็น https ลิงค์
 */
function downloadFile(link: string) {
  window.open(link, "_blank");
}
</script>

<template>
  <div>
    <q-card bordered style="border: 1px solid #d6dee1">
      <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
        {{ title }}
      </div>
      <div class="col-12"><q-separator /></div>
      <div class="row col-12 q-col-gutter-y-sm q-pa-sm">
        <div v-if="!isReadonly" class="col-12">
            <q-file
              outlined
              dense
              ref="fileRef"
              for="#files"
              v-model="file"
              :label="label"
              hide-bottom-space
              lazy-rules
              accept=".pdf,.xlsx,.docx,.png,.jpg"
            >
              <template v-slot:prepend>
                <q-icon name="attach_file" />
              </template>
              <template v-slot:after>
                <q-btn
                  v-if="file"
                  size="14px"
                  flat
                  round
                  dense
                  color="add"
                  icon="mdi-upload"
                  @click="uploadFile()"
                  ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
                >
              </template>
            </q-file>
        </div>

      <div v-if="props.files.length > 0" class="col-xs-12 row">
        <q-list
          bordered
          separator
          class="full-width rounded-borders"
        >
          <q-item 
            v-for="(f, index) in props.files"
            :key="index"
            clickable 
            v-ripple>
            <q-item-section>{{ f.fileName }}</q-item-section>
            <q-item-section avatar>
              <div class="row">
                <div>
                  <q-btn
                    dense
                    flat
                    round
                    color="blue"
                    icon="mdi-download"
                    @click="downloadRenameFileByLink(f.pathName,f.fileName)"
                  >
                    <q-tooltip>ดาวน์โหลดเอกสาร</q-tooltip>
                  </q-btn>
                </div>
                <div>
                  <q-btn
                    v-if="!isReadonly"
                    dense
                    flat
                    round
                    color="red"
                    icon="mdi-delete"
                    @click="popupRemove(f.id)"
                    ><q-tooltip>ลบเอกสาร</q-tooltip></q-btn
                  >
                </div>
              </div>
            </q-item-section>
          </q-item>
        </q-list>
      </div>
   

      <div class="col-12" v-if="props.files.length == 0">
        <q-card class="q-py-sm q-px-md" bordered> ไม่มีรายการเอกสาร </q-card>
      </div> 
    </div>
    </q-card>
  </div>
</template>