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

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

@@ -6,12 +6,13 @@ import { useQuasar } from "quasar";
 import type {
   FormData,
   ArrayPerson,
+  ArrayFileList,
 } from "@/modules/11_discipline/interface/request/complaint";
 import { useCounterMixin } from "@/stores/mixin";
 
 const $q = useQuasar();
-const mixin = useCounterMixin()
+const mixin = useCounterMixin();
-const { dialogConfirm } = mixin
+const { dialogConfirm } = mixin;
 const router = useRouter();
 const route = useRoute();
 const id = ref<string>(route.params.id as string);
@@ -25,6 +26,14 @@ const personOj = reactive<ArrayPerson>({
   salary: "",
   organization: "",
 });
+
+const fileListOj = reactive<ArrayFileList>({
+  id: "",
+  file: "",
+  fileName: "",
+  fileType: "",
+});
+
 const data = reactive<FormData>({
   respondentType: "",
   office: "",
@@ -42,8 +51,9 @@ const data = reactive<FormData>({
   complaintStatus: "",
   organizationId: "",
   persons: [personOj],
-  personId:[],
+  personId: [],
-  respondentId:[]
+  respondentId: [],
+  fileList: [fileListOj],
 });
 
 /** ดึงค่าจาก api */
@@ -62,7 +72,7 @@ const fetchData = async () => {
   data.appellant = "สมศรี สุขใจ";
   data.documentFile = "";
   data.complaintStatus = "NEW";
-  data.persons = [
+  (data.persons = [
     {
       idcard: "1529900022223",
       name: "นางศิรินภา คงน้อย",
@@ -71,7 +81,39 @@ const fetchData = async () => {
       salary: "10000",
       organization: "สกจ.",
     },
-  ]
+  ]),
+    (data.fileList = [
+      {
+        id: "08dbeb08-1931-487d-8989-0725ce48031d",
+        file: "https://s3cluster.frappet.com/bma-ehr-fpt/edb095bf-8898-4ef8-ad60-daaf60991b8f?AWSAccessKeyId=frappet&Expires=1700657567&Signature=7Do0YexqpTJGA4DQPKzJ5YtvyJg%3D",
+        fileName: "ex_slip.jpeg.png14",
+        fileType: "image/png",
+      },
+      {
+        id: "08dbeb08-392b-41b8-8970-78934f317469",
+        file: "https://s3cluster.frappet.com/bma-ehr-fpt/5a32c821-46d6-4bbc-9824-b777f154702e?AWSAccessKeyId=frappet&Expires=1700657567&Signature=HlNAjybBNPqGAYJtHIefNRofz1E%3D",
+        fileName: "17058616.jpg",
+        fileType: "image/jpeg",
+      },
+      {
+        id: "08dbeb08-3e41-4500-8476-6bdd76f0b6c8",
+        file: "https://s3cluster.frappet.com/bma-ehr-fpt/1bf5ef61-05f3-4cb1-98a5-dd2698b49440?AWSAccessKeyId=frappet&Expires=1700657567&Signature=WAlAjPbX%2BUoO0zY7m1jDEb3ovvA%3D",
+        fileName: "17058616.jpg",
+        fileType: "image/jpeg",
+      },
+      {
+        id: "08dbeb08-428f-483b-8d50-718e947d012e",
+        file: "https://s3cluster.frappet.com/bma-ehr-fpt/d848952a-54af-4502-b235-1f01f441d86c?AWSAccessKeyId=frappet&Expires=1700657568&Signature=3L9QfaWLCHmZjeS2UttVM3se6W0%3D",
+        fileName: "HybGoQu8osQ49G7AzCOvYF4G.png",
+        fileType: "image/png",
+      },
+      {
+        id: "08dbeb08-8aa5-4264-87bf-1794be50f0c7",
+        file: "https://s3cluster.frappet.com/bma-ehr-fpt/ac55b1f8-54f6-43c4-9f85-c236d24e7d76?AWSAccessKeyId=frappet&Expires=1700657568&Signature=isN3RM3P4%2BP5lgK5%2F45h1U5pabI%3D",
+        fileName: "1300399ปปปป.jpg",
+        fileType: "image/jpeg",
+      },
+    ]);
 };
 
 /** ฟังชั่น แก้ไข */
@@ -81,33 +123,48 @@ async function onSubmit() {
 }
 
 /** ยืนยัน มีมูลส่งไปสืบสวน */
-function sentInvestigate(){
+function sentInvestigate() {
-  dialogConfirm($q,()=> confirmSentInvestigate(),'ยืนยันส่งไปสืบสวน','ต้องการยืนยันส่งไปสืบสวนใช่หรือไม่?')
+  dialogConfirm(
+    $q,
+    () => confirmSentInvestigate(),
+    "ยืนยันส่งไปสืบสวน",
+    "ต้องการยืนยันส่งไปสืบสวนใช่หรือไม่?"
+  );
 }
 
 /** ยืนยัน ยุติเรื่อง */
-function endInvestigate(){
+function endInvestigate() {
-  dialogConfirm($q,()=> confirmEndInvestigate(),'ยืนยันยุติเรื่อง','ต้องการยืนยันยุติเรื่องใช่หรือไม่?')
+  dialogConfirm(
+    $q,
+    () => confirmEndInvestigate(),
+    "ยืนยันยุติเรื่อง",
+    "ต้องการยืนยันยุติเรื่องใช่หรือไม่?"
+  );
 }
 
 /** ยืนยัน ยกเลิกการยุติเรื่อง */
-function cancelInvestigate(){
+function cancelInvestigate() {
-  dialogConfirm($q,()=> confirmCancelInvestigate(),'ยืนยันยกเลิกการยุติเรื่อง','ต้องการยืนยันยกเลิกการยุติเรื่องใช่หรือไม่?')
+  dialogConfirm(
+    $q,
+    () => confirmCancelInvestigate(),
+    "ยืนยันยกเลิกการยุติเรื่อง",
+    "ต้องการยืนยันยกเลิกการยุติเรื่องใช่หรือไม่?"
+  );
 }
 
 /** ฟังชั่น มีมูลส่งไปสืบสวน*/
-function confirmSentInvestigate(){
+function confirmSentInvestigate() {
-  console.log('sent')
+  console.log("sent");
 }
 
 /** ฟังชั่น ยุติเรื่อง*/
-function confirmEndInvestigate(){
+function confirmEndInvestigate() {
-  console.log('sent')
+  console.log("sent");
 }
 
 /** ฟังชั่น ยกเลิกการยุติเรื่อง*/
-function confirmCancelInvestigate(){
+function confirmCancelInvestigate() {
-  console.log('sent')
+  console.log("sent");
 }
 /** เรียกใช้งาน ฟังชั่น ตอนเริ่มโหลดหน้า */
 onMounted(() => {

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="เพิ่มรายชื่อผู้ถูกสอบสวน"

src/modules/11_discipline/interface/request/complaint.ts

@@ -17,6 +17,7 @@ interface FormData {
     personId: any
     organizationId:string|null
     respondentId:any
+    fileList:ArrayFileList[]
 }
 
 interface ArrayPerson {
@@ -27,6 +28,12 @@ interface ArrayPerson {
     salary: string,
     organization: string,
 }
+interface ArrayFileList {
+    id:string
+    file:string
+    fileName:string
+    fileType:string
+}
 interface MyObjectComplaintsRef {
     respondentType: object | null;
     office: object | null;
@@ -40,7 +47,6 @@ interface MyObjectComplaintsRef {
     dateNotification: object | null;
     complaintFrom: object | null;
     appellant: object | null;
-    documentFile: object | null;
     [key: string]: any;
 }
 
@@ -57,5 +63,6 @@ export type {
     FormData,
     MyObjectComplaintsRef,
     DataAddRequest,
-    ArrayPerson
+    ArrayPerson,
+    ArrayFileList
 }