ตัวอย่างอัพไฟล์

src/modules/11_discipline/components/UploadFile.vue

@@ -0,0 +1,149 @@
+<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() {
+  //   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">
+            <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>