From ee0233a27ec14e3beb1087a0bb0765af0f00d6b4 Mon Sep 17 00:00:00 2001
From: AnandaTon <ananda@frappet.com>
Date: Fri, 22 Dec 2023 17:37:36 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=95=E0=B9=88=E0=B8=AD=20api=20download=20?=
 =?UTF-8?q?=E0=B8=81=E0=B8=B2=E0=B8=A3=E0=B8=9B=E0=B8=A3=E0=B8=B0=E0=B8=8A?=
 =?UTF-8?q?=E0=B8=B8=E0=B8=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/12_evaluatePersonal/api.evaluate.ts   |  12 +-
 .../components/Meeting/Form.vue               | 197 ++++++++++--------
 .../interface/index/meeting.ts                |  18 +-
 3 files changed, 137 insertions(+), 90 deletions(-)

diff --git a/src/api/12_evaluatePersonal/api.evaluate.ts b/src/api/12_evaluatePersonal/api.evaluate.ts
index b7feed1e7..c3970dd3c 100644
--- a/src/api/12_evaluatePersonal/api.evaluate.ts
+++ b/src/api/12_evaluatePersonal/api.evaluate.ts
@@ -1,7 +1,7 @@
 import env from "../index";
 const evaluateDirectorMain = `${env.API_URI}/evaluation/director`;
 const evaluation = `${env.API_URI}/evaluation`;
-const evaluationFile = `${env.API_URI}/evaluation/document`
+const evaluationFile = `${env.API_URI}/evaluation/document`;
 export default {
   evaluateDirectorMain: () => `${evaluateDirectorMain}`,
   evaluateDirectorById: (id: string) => `${evaluateDirectorMain}/${id}`,
@@ -10,7 +10,13 @@ export default {
     `${evaluation}?page=${page}&pageSize=${pageSize}&keyword=${keyword}`,
   meeting: () => `${evaluation}/meeting`,
   meetingById: (id: string) => `${evaluation}/meeting/${id}`,
+  meetingFilebyId: (volume: string, id: string) =>
+    `${evaluation}/document/${volume}/${id}`,
+  meetingFileDowloadbyId: (volume: string, id: string, file: string) =>
+    `${evaluation}/document/${volume}/${id}/${file}`,
 
-  evaluationFilebyId:(volume:string,id:string,file:string) => `${evaluationFile}/${volume}/${id}/${file}`,
-  evaluationFileListbyId:(volume:string,id:string) => `${evaluationFile}/${volume}/${id}`
+  evaluationFilebyId: (volume: string, id: string, file: string) =>
+    `${evaluationFile}/${volume}/${id}/${file}`,
+  evaluationFileListbyId: (volume: string, id: string) =>
+    `${evaluationFile}/${volume}/${id}`,
 };
diff --git a/src/modules/12_evaluatePersonal/components/Meeting/Form.vue b/src/modules/12_evaluatePersonal/components/Meeting/Form.vue
index f2f98247b..44caa93bc 100644
--- a/src/modules/12_evaluatePersonal/components/Meeting/Form.vue
+++ b/src/modules/12_evaluatePersonal/components/Meeting/Form.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
-import { ref, reactive, watch } from "vue";
+import { ref, reactive, watch, onMounted } from "vue";
 import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar } from "quasar";
+import { useRoute } from "vue-router";
 import type {
   FormData,
   FormRef,
@@ -9,7 +10,8 @@ import type {
 } from "@/modules/12_evaluatePersonal/interface/index/meeting";
 import http from "@/plugins/http";
 import config from "@/app.config";
-
+const route = useRoute();
+const id = ref<string>(route.params.id as string);
 const $q = useQuasar();
 const mixin = useCounterMixin();
 const {
@@ -42,10 +44,11 @@ const emit = defineEmits(["formDataReturn"]);
  */
 //
 const idCard = ref<string>("");
-
+const file = ref<any>();
 const fileOj = reactive<FileOj[]>([]);
 
 const formData = reactive<FormData>({
+  id: "",
   rounded: "",
   dateMeeting: "",
   dateMeetingStart: null,
@@ -53,7 +56,7 @@ const formData = reactive<FormData>({
   consider: "",
   period: "",
   title: "",
-  file: fileOj,
+  // file: fileOj,
 });
 
 /**
@@ -63,6 +66,7 @@ const formData = reactive<FormData>({
  */
 watch(props.data, async () => {
   // console.log("data==>", props.data)
+  formData.id = props.data.id;
   formData.rounded = props.data.rounded;
   formData.dateMeetingStart = props.data.dateMeetingStart;
   formData.dateMeetingEnd = props.data.dateMeetingEnd;
@@ -71,45 +75,6 @@ watch(props.data, async () => {
   formData.title = props.data.title;
 });
 
-// /**
-//  * เพิ่มบุคลากร
-//  */
-// function addEmployee() {
-//   if (idCard.value.length === 13) {
-//     console.log("idCard===>", idCard.value);
-//     showLoader();
-//     http
-//       .post(config.API.profileSearchPersonal(), {
-//         fieldName: "idcard",
-//         keyword: idCard.value,
-//       })
-//       .then((res) => {
-//         const dataApi = res.data.result;
-//         if (dataApi.length > 0) {
-//           const dataList = dataApi[0];
-//           formData.rounded = dataList.rounded;
-//           formData.dateMeeting = dataList.dateMeeting;
-//           formData.consider = dataList.consider;
-//           formData.period = dataList.period;
-//         } else {
-//           dialogMessageNotify($q, "ไม่มีข้อมูลบุคคลากรที่ต้องการค้นหา");
-//         }
-//       })
-//       .catch((e) => {
-//         messageError($q, e);
-//       })
-//       .finally(async () => {
-//         hideLoader();
-//       });
-//   }
-//   if (idCard.value.length !== 13) {
-//     hideLoader();
-//     dialogMessageNotify($q, "กรุณากรอกเลขบัตรประชาชนให้ครบ 13 หลัก");
-//   } else {
-//     console.log("nodata");
-//   }
-// }
-
 /**
  * ตรวจสอบข้อมูลก่อนส่งไปยัง api
  */
@@ -146,29 +111,85 @@ function onValidate() {
   }
 }
 
-function uploadFile() {
-  // const Data = new FormData();
-  // Data.append("file", formData.file);
-  // showLoader();
-  // http
-  //   .put(config.API.appealUpLoadFile(formData.id), Data)
-  //   .then((res) => {
-  //     console.log(res);
-  //     success($q, "อัปโหลดไฟล์สำเร็จ");
-  //     props.getData();
-  //     // router.push(`/discipline/complaints`);
-  //   })
-  //   .catch((e) => {
-  //     messageError($q, e);
-  //   })
-  //   .finally(async () => {
-  //     hideLoader();
-  //     formData.file = null;
-  //   });
-}
+const fileData = ref<any>([]);
+/**
+ * ดึงค่าจาก api
+ */
+const fetchDataFile = async () => {
+  if (id.value != undefined) {
+    showLoader();
+    await http
+      .get(config.API.meetingFilebyId("การประชุม", id.value))
+      .then((res) => {
+        // const dataFile = res.data.result;
+        const dataFile = res.data;
+        fileData.value = dataFile;
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  }
+};
 
-function downloadFile(link: string) {
-  window.open(link, "_blank");
+/**
+ * function download
+ */
+const fileDataDownload = ref<any>([]);
+const fetchDataFileDownload = async (pathName: string) => {
+  console.log(fileData.value[0].fileName);
+  if (id.value !== undefined) {
+    showLoader();
+    console.log(fileData.value[0].fileName);
+    await http
+      .get(config.API.meetingFileDowloadbyId("การประชุม", id.value, pathName))
+      .then((res) => {
+        const dataFile = res.data;
+        fileDataDownload.value = dataFile;
+        window.open(fileDataDownload.value.downloadUrl);
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  }
+};
+
+/**
+ * addFiles
+ */
+function uploadFile() {
+  fetchDataFile();
+  if (file) {
+    const fileList = [
+      {
+        fileName: file.value.name,
+        metadata: {
+          tag: "value",
+        },
+      },
+    ];
+    const requestBody = {
+      replace: false,
+      fileList: fileList,
+    };
+    showLoader();
+    http
+      .post(config.API.meetingFilebyId("การประชุม", id.value), requestBody)
+      .then((res) => {})
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(async () => {
+        hideLoader();
+        file.value = null;
+        setTimeout(() => fetchDataFile(), 500);
+      });
+  }
 }
 
 function deleteFile(id: string) {
@@ -179,19 +200,19 @@ function deleteFile(id: string) {
  * ยืนยัน ลบ ไฟล์
  * @param id id file
  */
-function confirmDelete(id: string) {
-  // showLoader();
-  // http
-  //   .delete(config.API.appealDeleteFile(formData.id, id))
-  //   .then((res) => {
-  //     success($q, `ลบไฟล์สำเร็จ`);
-  //   })
-  //   .catch((e) => {
-  //     messageError($q, e);
-  //   })
-  //   .finally(() => {
-  //     props.getData();
-  //   });
+function confirmDelete(fileName: string) {
+  showLoader();
+  http
+    .delete(config.API.meetingFileDowloadbyId("การประชุม", id.value, fileName))
+    .then((res) => {
+      success($q, `ลบไฟล์สำเร็จ`);
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      setTimeout(() => fetchDataFile(), 1000);
+    });
 }
 
 //checkDate
@@ -211,6 +232,12 @@ function inputEdit(val: boolean) {
     "full-width cursor-pointer inputgreen": !val,
   };
 }
+
+/**Hook */
+onMounted(() => {
+  setTimeout(() => fetchDataFile(), 500);
+  // fetchDataFileDownload();
+});
 </script>
 <template>
   <form @submit.prevent.stop="onValidate">
@@ -354,7 +381,7 @@ function inputEdit(val: boolean) {
                 class="col-11"
                 outlined
                 dense
-                v-model="formData.file"
+                v-model="file"
                 @added="uploadFile"
                 label="ไฟล์เอกสารหลักฐาน"
                 hide-bottom-space
@@ -369,22 +396,22 @@ function inputEdit(val: boolean) {
 
               <div class="col-1 self-center text-center">
                 <q-btn
-                  v-if="formData.file && isReadonly"
                   size="14px"
                   flat
                   round
                   dense
                   color="add"
                   icon="mdi-upload"
+                  v-if="file"
                   @click="uploadFile"
                   ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
                 >
               </div>
             </div>
-
-            <div v-if="formData.file.length > 0" class="col-12 q-pa-sm row">
+            <div class="col-12 q-pa-sm row" v-if="fileData.length > 0">
+              <!-- v-if="file.length > 0" v-else -->
               <q-list
-                v-for="data in formData.file"
+                v-for="data in fileData"
                 :key="data.id"
                 class="full-width"
                 bordered
@@ -400,7 +427,7 @@ function inputEdit(val: boolean) {
                     dense
                     color="blue"
                     icon="mdi-download"
-                    @click="downloadFile(data.pathName)"
+                    @click="fetchDataFileDownload(data.fileName)"
                     ><q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
                   >
                   <q-btn
@@ -411,7 +438,7 @@ function inputEdit(val: boolean) {
                     color="red"
                     class="q-ml-sm"
                     icon="mdi-delete-outline"
-                    @click="deleteFile(data.id)"
+                    @click="deleteFile(data.fileName)"
                     ><q-tooltip>ลบไฟล์</q-tooltip></q-btn
                   >
                 </q-item>
diff --git a/src/modules/12_evaluatePersonal/interface/index/meeting.ts b/src/modules/12_evaluatePersonal/interface/index/meeting.ts
index 50f66db71..4cfa89353 100644
--- a/src/modules/12_evaluatePersonal/interface/index/meeting.ts
+++ b/src/modules/12_evaluatePersonal/interface/index/meeting.ts
@@ -13,7 +13,14 @@ interface MainList {
   date: string;
 }
 
+interface ArrayFileList {
+  id: string;
+  pathName: string;
+  fileName: string;
+}
+
 interface FormData {
+  id: string;
   rounded: string;
   dateMeeting: string;
   dateMeetingStart: Date | null;
@@ -21,7 +28,7 @@ interface FormData {
   consider: string;
   period: string;
   title: string;
-  file: FileOj[];
+  // file: FileOj[];
 }
 
 interface FileOj {
@@ -38,4 +45,11 @@ interface FormRef {
   period: object | null;
   [key: string]: any;
 }
-export type { DataResponseList, MainList, FormData, FormRef, FileOj };
+export type {
+  DataResponseList,
+  MainList,
+  FormData,
+  FormRef,
+  FileOj,
+  ArrayFileList,
+};