ปรับ UI หน้ารายละเอียดเรื่องร้องเรียน

src/modules/11_discipline/components/1_Complaint/Form.vue

@@ -10,6 +10,7 @@ import type {
   MyObjectComplaintsRef,
   DataAddRequest,
   ArrayPerson,
+  ArrayFileList
 } from "@/modules/11_discipline/interface/request/complaint";
 
 /** importStroe*/
@@ -25,7 +26,7 @@ const fileDocDataUpload = ref<File[]>([]);
 /** เรียกใช้ store */
 const mixin = useCounterMixin();
 const complainstStore = useComplainstDataStore();
-const { date2Thai, dialogConfirm } = mixin;
+const { date2Thai, dialogConfirm,dialogRemove,success } = mixin;
 const { selectComplainantTpye, filterSelector } = complainstStore; // function จาก store complainstStore
 
 /** validateForm */
@@ -42,7 +43,6 @@ const levelConsiderationRef = ref<Object | null>(null);
 const dateNotificationRef = ref<Object | null>(null);
 const complaintFromRef = ref<Object | null>(null);
 const appellantRef = ref<Object | null>(null);
-const documentFileRef = ref<Object | null>(null);
 
 /** รับ props มาจากหน้าหลัก */
 const props = defineProps({
@@ -66,6 +66,13 @@ const personOj = reactive<ArrayPerson>({
   organization: "",
 });
 
+const fileListOj = reactive<ArrayFileList>({
+  id:"",
+  file:"",
+  fileName:"",
+  fileType:""
+});
+
 const formData = reactive<FormData>({
   respondentType: "",
   office: "",
@@ -85,6 +92,7 @@ const formData = reactive<FormData>({
   personId: [],
   organizationId: null,
   respondentId: [],
+  fileList:[fileListOj]
 });
 
 /** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
@@ -101,7 +109,6 @@ const objectComplaintsRef: MyObjectComplaintsRef = {
   dateNotification: dateNotificationRef,
   complaintFrom: complaintFromRef,
   appellant: appellantRef,
-  documentFile: documentFileRef,
 };
 
 /** options ทั้งหมด*/
@@ -341,13 +348,27 @@ async function addPerson() {
   toggleModal();
 }
 
+/**
+ * เปิดลิงค์ไฟล์
+ * @param link รับมาเป็น https ลิงค์ 
+ */
+function downloadFile(link:string){
+  window.open(link, '_blank');
+}
+
+function deleteFile(id:string){
+  dialogRemove($q,() => confirmDelete(id))
+}
+
+function confirmDelete(id:string){
+  success($q, `ลบไฟล์สำเร็จ #id:${id}`);
+}
 /**
  * เช็คข้อมูลจาก props
  * เมื่อมีข้อมูล
  * เก็บข้อมูลลง formData
  */
 watch(props.data, async () => {
-  console.log(props.data.persons);
   formData.respondentType = props.data.respondentType;
   formData.office = props.data.office;
   formData.consideredAgency = props.data.consideredAgency;
@@ -363,6 +384,7 @@ watch(props.data, async () => {
   formData.documentFile = props.data.documentFile;
   formData.complaintStatus = props.data.complaintStatus;
   complainstStore.fetchComplainstAdd(props.data.persons);
+  formData.fileList = props.data.fileList;
 });
 
 /**
@@ -856,32 +878,6 @@ onMounted(() => {
                 rows="5"
               />
             </div>
-
-            <div class="col-12" id="documentFile">
-              <q-file
-                for="inputFiles"
-                ref="documentFileRef"
-                outlined
-                dense
-                class="fit"
-                :readonly="
-                  formData.complaintStatus !== 'NEW' &&
-                  formData.complaintStatus !== ''
-                "
-                v-model="formData.documentFile"
-                @added="fileUploadDoc"
-                label="ไฟล์เอกสารหลักฐาน"
-                hide-bottom-space
-                lazy-rules
-                accept=".pdf,.xlsx,.doc"
-                clearable
-                :rules="[(val) => !!val || `${'กรุณาเพิ่มไฟล์เอกสารหลักฐาน'}`]"
-              >
-                <template v-slot:prepend>
-                  <q-icon name="attach_file" />
-                </template>
-              </q-file>
-            </div>
           </div>
         </div>
         <q-separator />
@@ -906,6 +902,80 @@ onMounted(() => {
     </q-card>
   </div>
 
+  <div class="col-12 q-mt-sm">
+    <q-card flat bordered>
+      <div class="row q-ma-sm q-col-gutter-x-sm">
+        <div class="col-11" id="documentFile">
+          <q-file
+            for="inputFiles"
+            outlined
+            dense
+            class="fit"
+            :readonly="
+              formData.complaintStatus !== 'NEW' &&
+              formData.complaintStatus !== ''
+            "
+            v-model="formData.documentFile"
+            @added="fileUploadDoc"
+            label="ไฟล์เอกสารหลักฐาน"
+            hide-bottom-space
+            lazy-rules
+            accept=".pdf,.xlsx,.doc"
+            clearable
+          >
+            <template v-slot:prepend>
+              <q-icon name="attach_file" />
+            </template>
+          </q-file>
+        </div>
+        <div class="col-1 self-center" v-if="formData.documentFile">
+          <q-btn
+            size="14px"
+            flat
+            round
+            dense
+            color="add"
+            class="q-ml-sm"
+            icon="mdi-upload"
+            ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
+          >
+        </div>
+      </div>
+
+      <div class="q-pa-md">
+    <q-list bordered separator v-for="data in formData.fileList" :key="data.id">
+      <q-item clickable v-ripple class="items-center">
+        <q-item-section>{{ data.fileName }}</q-item-section>
+        <q-space/>
+        <q-btn
+            size="12px"
+            flat
+            round
+            dense
+            color="blue"
+            class="q-ml-sm"
+            icon="mdi-download"
+            @click="downloadFile(data.file)"
+            ><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
+          >
+      </q-item>
+
+    </q-list>
+  </div>
+    </q-card>
+  </div>
+
   <DialogAddPersonal
     :modal="modal"
     btn-title="เพิ่มรายชื่อผู้ถูกสอบสวน"