พัฒนาบุคลากร: เพิ่มAPIอัพโหลดไฟล์+แก้target

src/modules/15_development/components/Record.vue

@@ -1,10 +1,25 @@
 <script setup lang="ts">
 import { ref, reactive, onMounted } from "vue";
+import { useRoute } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import axios from "axios";
 import type { QTableProps } from "quasar";
+import { useQuasar } from "quasar";
 const mixin = useCounterMixin();
-
-const { date2Thai } = mixin;
+const route = useRoute();
+const $q = useQuasar();
+const id = ref<string>(route.params.id ? route.params.id.toString() : "");
+const {
+  success,
+  messageError,
+  showLoader,
+  hideLoader,
+  dialogConfirm,
+  dialogRemove,
+  date2Thai,
+} = mixin;
 const columns = ref<QTableProps["columns"]>([
   {
     name: "idcard",
@@ -108,6 +123,7 @@ const columns = ref<QTableProps["columns"]>([
   },
 ]);
 
+const fileList = ref<File[]>([]);
 const visibleColumns = ref<string[]>([
   "idcard",
   "fullName",
@@ -119,7 +135,7 @@ const visibleColumns = ref<string[]>([
   "refCommandNo",
   "refCommandDate",
 ]);
-const files = ref<File[]>([]);
+const files = ref<any>([]);
 const pagination = ref({
   page: 1,
   rowsPerPage: 10,
@@ -153,6 +169,79 @@ const row = [
     refCommandDate: new Date(),
   },
 ];
+
+async function clickUpload(file: any) {
+  const fileName = { fileName: file.name };
+
+  dialogConfirm(
+    $q,
+    async () => {
+      const selectedFile = file;
+      const formdata = new FormData();
+      formdata.append("file", selectedFile);
+      await http
+        .post(config.API.file("พัฒนาบุคลาการ", "บันทึกผล", id.value), {
+          replace: false,
+          fileList: fileName,
+        })
+        .then(async (res) => {
+          const foundKey: string | undefined = Object.keys(res.data).find(
+            (key) =>
+              res.data[key]?.fileName !== undefined &&
+              res.data[key]?.fileName !== ""
+          );
+          foundKey && uploadFileDoc(res.data[foundKey]?.uploadUrl, files.value);
+        })
+        .catch((err) => {
+          messageError($q, err);
+        });
+    },
+    "ยืนยันการอัปโหลดไฟล์",
+    "ต้องการยืนยันการอัปโหลดไฟล์นี้หรือไม่ ?"
+  );
+}
+
+async function getData() {
+  showLoader();
+  await http
+    .get(config.API.file("พัฒนาบุคลาการ", "บันทึกผล", id.value))
+    .then((res) => {
+      fileList.value = res.data;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+async function uploadFileDoc(uploadUrl: string, file: any) {
+  const Data = new FormData();
+  Data.append("file", files.value);
+  showLoader();
+  await axios
+    .put(uploadUrl, file, {
+      headers: {
+        "Content-Type": file.type,
+      },
+    })
+    .then((res) => {
+      success($q, "อัปโหลดไฟล์สำเร็จ");
+      getData();
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+      files.value = null;
+    });
+}
+
+onMounted(() => {
+  // getData();
+});
 </script>
 
 <template>
@@ -160,18 +249,26 @@ const row = [
     <q-file
       v-model="files"
       dense
-      label="'อัปโหลดไฟล์"
+      label="อัปโหลดไฟล์"
       outlined
-      use-chips
       accept=".xlsx"
-      multiple
+      hide-bottom-space
+      clearable
       class="col-xs-12 col-sm-4"
     >
       <template v-slot:prepend>
         <q-icon name="attach_file" color="blue" />
       </template>
     </q-file>
-    <q-btn size="md" icon="mdi-upload" round flat color="blue">
+    <q-btn
+      v-if="files"
+      size="md"
+      icon="mdi-upload"
+      round
+      flat
+      color="blue"
+      @click="clickUpload(files)"
+    >
       <q-tooltip>อัปโหลดไฟล์</q-tooltip>
     </q-btn>
     <q-space />