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

src/modules/11_discipline/components/3_InvestigateDisciplinary/Form.vue

@@ -7,11 +7,13 @@ import { useInvestigateDisStore } from "@/modules/11_discipline/store/Investigat
 
 import Dialogbody from "@/modules/11_discipline/components/3_InvestigateDisciplinary/Dialogbody.vue";
 import Table from "@/modules/11_discipline/components/3_InvestigateDisciplinary/DirectorTable.vue";
+import UploadFile from "@/modules/11_discipline/components/UploadFile.vue";
 
 import type {
   FormData,
   disciplinaryRef,
 } from "@/modules/11_discipline/interface/request/disciplinary";
+import type { FileLists } from "../../interface/index/Main";
 
 const investigateDis = useInvestigateDisStore();
 const { fecthDirector } = investigateDis;
@@ -264,9 +266,13 @@ onMounted(async () => {
   ]);
   await hideLoader();
 });
+
+const files = ref<FileLists[]>([{ id: "1", fileName: "test", pathName: "xxx" }]);
 </script>
 <template>
   <div class="col-xs-12 col-sm-12 col-md-11">
+    <UploadFile title="อัปโหลดเอกสาร" label="เลือกเอกสาร" :files="files" id="xx"/>
+
     <form @submit.prevent="validateForm">
       <div class="col-12">
         <q-card>
@@ -785,7 +791,7 @@ onMounted(async () => {
                     dense
                     ref="filesRecordAccuserRef"
                     for="#filesRecordAccuser"
-                    v-model="formData.filesRecordAccuser"
+                    v-model="filesRecordAccuser"
                     @added="fileUploadDoc"
                     label="ไฟล์เอกสารบันทึกถ้อยคำของผู้กล่าวหา"
                     hide-bottom-space

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>

src/modules/11_discipline/interface/index/Main.ts

@@ -9,18 +9,18 @@ interface DataNumberOption {
 }
 
 interface InvestigatefactsDataRowType {
-  id:string,
+  id: string;
   subject: string;
   interrogated: string;
-  complaintOffenseDetails: string,
-  investigationDetail: string,
-  dateInvestigate: string,
-  statusResult: string,
-  status: string
+  complaintOffenseDetails: string;
+  investigationDetail: string;
+  dateInvestigate: string;
+  statusResult: string;
+  status: string;
 }
 
 interface investigateDisDataRowType {
-  id:string
+  id: string;
   subject: string;
   interrogated: string;
   fault: string | undefined;
@@ -40,10 +40,17 @@ interface directorType {
   role: string;
 }
 
+interface FileLists {
+  id: string; //id เอกสาร
+  fileName: string; //ชื่่อเอกสาร
+  pathName: string; //link file
+}
+
 export type {
   DataOption,
   InvestigatefactsDataRowType,
   investigateDisDataRowType,
   directorType,
-  DataNumberOption
+  DataNumberOption,
+  FileLists,
 };