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

<script setup lang="ts">
import { ref, onMounted } from "vue";
import http from "@/plugins/http";
import config from "@/app.config";
import { useCounterMixin } from "@/stores/mixin";
import { useQuasar } from "quasar";
import type { ArrayFileList } from "@/modules/04_registryNew/interface/index/document";
const $q = useQuasar;
const mixin = useCounterMixin();
const {
  dialogConfirm,
  showLoader,
  hideLoader,
  success,
  messageError,
  dialogRemove,
} = mixin;

const id = ref<string>("");
const documentFile = ref<any>(null);
const fileDocDataUpload = ref<File[]>([]);
const fileList = ref<ArrayFileList[]>([]);
/**
 * ฟังชั่นอัปโหลดไฟล์
 * @param documentFile ไฟล์ที่รับมา
 */
function fileUploadDoc(documentFile: any) {
  documentFile.forEach((file: any) => {
    fileDocDataUpload.value.push(file);
  });
}

function getData() {}
/**
 * ฟังก์ชั่นสำหรับอัพโหลดไฟล์เอกสารหลักฐาน
 */
function upLoadFileDoc() {
  const Data = new FormData();
  Data.append("file", documentFile.value);
  showLoader();
  http
    .put(config.API.complaintFileUpload(id.value), Data)
    .then((res) => {
      success($q, "อัพโหลดไฟล์สำเร็จ");
      getData();
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(async () => {
      hideLoader();
      documentFile.value = null;
    });
}

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

/**
 * ลบไฟล์
 * @param id id file
 */
function deleteFile(id: string) {
  dialogRemove($q, () => confirmDelete(id));
}

/**
 * ยืนยัน ลบ ไฟล์
 * @param id id file
 */
function confirmDelete(idOrder: string) {
  showLoader();
  http
    .delete(config.API.complaintFileDelete(id.value, idOrder))
    .then((res) => {
      success($q, `ลบไฟล์สำเร็จ`);
      getData();
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {});
}
</script>
<template>
  <div class="col-sm-12 col-md-3">
    <div flat class="q-pa-none">
      <div class="col-12 row q-col-gutter-md">
        <div class="row col-12">
          <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
                  for="inputFiles"
                  class="col-12"
                  outlined
                  dense
                  v-model="documentFile"
                  @added="fileUploadDoc"
                  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="upLoadFileDoc()"
                      ><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.pathName)"
                        ><q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
                      >
                      <q-btn
                        size="12px"
                        flat
                        round
                        dense
                        color="red"
                        class="q-ml-sm"
                        icon="mdi-delete-outline"
                        @click="deleteFile(data.id)"
                        ><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>
      </div>
    </div>
  </div>
</template>

<style scoped></style>