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

<script setup lang="ts">
import { ref, watch } from "vue";
import type { FileLists } from "@/modules/11_discipline/interface/index/Main";

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",
  },
});

/**
 * อัปโหลดหลักฐานสนับสนุนข้อกล่าวหา
 */
function uploadFile() {
  console.log("test");

  //   const Data = new FormData();
  //   Data.append("file", file.value);
  //   showLoader();
  //   http
  //     .put(config.API.complaintFileUpload(props.id), Data)
  //     .then((res) => {
  //       console.log(res);
  //       success($q, "บันทึกข้อมูลสำเร็จ");
  //     })
  //     .catch((e) => {
  //       messageError($q, e);
  //     })
  //     .finally(async () => {
  //       hideLoader();
  //     });
}
function removeFile(id: string) {
  console.log(id);
}
</script>

<template>
  <q-card flat class="q-pa-md q-mt-sm">
    <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">
            {{ title }}
          </div>
          <div class="col-12"><q-separator /></div>
          <div class="col-xs-12 q-pa-sm row">
            <q-file
              class="col-11 q-mt-sm"
              outlined
              dense
              ref="fileRef"
              for="#files"
              v-model="file"
              :label="label"
              hide-bottom-space
              lazy-rules
              accept=".pdf,.xlsx,.doc"
            >
              <template v-slot:prepend>
                <q-icon name="attach_file" />
              </template>
            </q-file>
            <div class="col-1 self-center">
              <q-btn
                size="14px"
                flat
                round
                dense
                color="add"
                class="q-ml-sm q-mt-sm"
                icon="mdi-upload"
                @click="uploadFile()"
                ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
              >
            </div>
          </div>

          <div class="col-xs-12 q-pa-sm row" v-if="props.files">
            <q-list
              v-if="props.files.length > 0"
              bordered
              separator
              class="full-width"
            >
              <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
                        size="12px"
                        color="blue"
                        icon="mdi-download-outline"
                        @href="f.pathName"
                      >
                        <q-tooltip>ดาวน์โหลดเอกสาร</q-tooltip>
                      </q-btn>
                    </div>
                    <div>
                      <q-btn
                        dense
                        flat
                        round
                        size="12px"
                        color="red"
                        icon="mdi-delete-outline"
                        @click="removeFile(f.id)"
                        ><q-tooltip>ลบเอกสาร</q-tooltip></q-btn
                      >
                    </div>
                  </div>
                </q-item-section>
              </q-item>
            </q-list>
          </div>
        </q-card>
      </div>
    </div>
  </q-card>
</template>