เอกสาร/ผลงาน => ปรับ การ upload file

src/api/api.development.ts

@@ -1,9 +1,15 @@
 import env from "./index";
 
 const development = `${env.API_URI}/development`;
+const urlFile = `${env.API_URI}/salary`;
 
 export default {
   // portfolio
   portfolio: `${development}/portfolio`,
   portfolioId: (id: string) => `${development}/portfolio/${id}`,
+
+  file: (name: string, group: string, id: string) =>
+    `${urlFile}/file/${name}/${group}/${id}`,
+  fileByFile: (name: string, group: string, id: string, fileName: string) =>
+    `${urlFile}/file/${name}/${group}/${id}/${fileName}`,
 };

src/modules/13_portfolio/views/Add.vue

@@ -5,6 +5,7 @@ import { useRouter, 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 { QForm } from "quasar";
 
 const router = useRouter();
@@ -20,8 +21,8 @@ const files = ref<any>();
 const name = ref("");
 const detail = ref("");
 const id = ref<string>("");
-const nameFile = ref<string>("");
 const routeName = router.currentRoute.value.name;
+const fileList = ref<any[]>([]);
 
 /**
  * เรียกฟังก์ชันทั้งหมดตอนเรียกใช้ไฟล์นี้
@@ -49,20 +50,13 @@ const saveData = async () => {
  */
 const createTransfer = async () => {
   showLoader();
-  // const formData = new FormData();
-  // formData.append("name", name.value);
-  // formData.append("detail", detail.value);
-  // formData.append("file", files.value);
   await http
     .post(config.API.portfolio, { name: name.value, detail: detail.value })
-    .then((res: any) => {
+    .then(async (res) => {
-      success($q, "บันทึกข้อมูลสำเร็จ");
+      uploadFiles(res.data.result);
-      router.push(`/portfolio`);
     })
-    .catch((e: any) => {
+    .catch((e) => {
       messageError($q, e);
-    })
-    .finally(() => {
       hideLoader();
     });
 };
@@ -77,34 +71,111 @@ const fecthData = async (id: string) => {
     .get(config.API.portfolioId(id))
     .then((res: any) => {
       let data = res.data.result;
-      name.value = data.organization;
+      name.value = data.name;
-      detail.value = data.reason;
+      detail.value = data.detail;
-      files.value = data.docs;
+      fetchFile();
     })
     .catch((e: any) => {
       messageError($q, e);
-    })
-    .finally(() => {
       hideLoader();
     });
 };
 
 /**
- * ฟังก์ชั่นดาว์โหลดอัปโหลดไฟล์
+ * function อัปโหลดไฟล์
+ * @param id ผลงาน
  */
-const fileDocDataUpload = ref<File[]>([]);
+function uploadFiles(id: string) {
-const filesNull = () => {
+  showLoader();
-  files.value = null;
+  http
-};
+    .post(config.API.file("รายการเอกสาร", "เอกสารผลงาน", id), {
-//อัปโหลดไฟล์
+      replace: true,
-const fileUploadDoc = async (file: any) => {
+      fileList: [
-  fileDocDataUpload.value.push(file);
+        {
-  nameFile.value = file[0].name;
+          fileName: files.value.name,
-  files.value = file;
+        },
-};
+      ],
+    })
+    .then(async (res) => {
+      console.log(res);
+      const foundKey: string | undefined = Object.keys(res.data).find(
+        (key) =>
+          res.data[key]?.fileName !== undefined &&
+          res.data[key]?.fileName !== ""
+      );
+      foundKey && uploadFileURL(res.data[foundKey]?.uploadUrl);
+    })
+    .catch((err) => {
+      messageError($q, err);
+      hideLoader();
+    });
+}
 
-function fileOpen(url: string) {
+/**
-  window.open(url, "_blank");
+ * function บันทึกไฟล์
+ * @param uploadUrl บันทึกไฟล์
+ */
+function uploadFileURL(uploadUrl: string) {
+  const Data = new FormData();
+  Data.append("file", files.value);
+  showLoader();
+  axios
+    .put(uploadUrl, files.value, {
+      headers: {
+        "Content-Type": files.value.type,
+      },
+    })
+    .then(() => {
+      success($q, "บันทึกข้อมูลสำเร็จ");
+      router.push(`/portfolio`);
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+      files.value = null;
+    });
+}
+
+/**
+ *function fetch รายการเอกสาร
+ */
+function fetchFile() {
+  showLoader();
+  http
+    .get(config.API.file("รายการเอกสาร", "เอกสารผลงาน", id.value))
+    .then((res) => {
+      fileList.value = res.data;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/**
+ * ฟังก์ชั่นดาว์โหลดอัปโหลดไฟล์
+ * @param fileName ชื่อไฟล์
+ */
+function fileOpen(fileName: string) {
+  showLoader();
+  http
+    .get(
+      config.API.fileByFile("รายการเอกสาร", "เอกสารผลงาน", id.value, fileName)
+    )
+    .then((res) => {
+      const data = res.data.downloadUrl;
+      window.open(data, "_blank");
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      hideLoader();
+    });
 }
 </script>
 
@@ -189,7 +260,7 @@ function fileOpen(url: string) {
                     </div>
                     <q-separator />
                     <q-list separator>
-                      <q-item v-for="file in files" :key="file.key">
+                      <q-item v-for="file in fileList" :key="file.key">
                         <q-item-section>
                           {{ file.fileName }}
                         </q-item-section>
@@ -199,7 +270,7 @@ function fileOpen(url: string) {
                             round
                             flat
                             icon="mdi-download"
-                            @click="fileOpen(file.pathName)"
+                            @click="fileOpen(file.fileName)"
                           ></q-btn>
                         </q-item-section>
                       </q-item>

src/modules/13_portfolio/views/Main.vue

@@ -11,7 +11,14 @@ const currentPage = ref<number>(1);
 const router = useRouter();
 const $q = useQuasar();
 const mixin = useCounterMixin();
-const { date2Thai, messageError, showLoader, hideLoader } = mixin;
+const {
+  date2Thai,
+  messageError,
+  showLoader,
+  hideLoader,
+  dialogRemove,
+  success,
+} = mixin;
 
 const pagination = ref({
   sortBy: "desc",
@@ -91,6 +98,22 @@ const clickAdd = async () => {
 const clickBack = () => {
   router.push(`/`);
 };
+
+function onDelete(id: string) {
+  dialogRemove($q, () => {
+    showLoader();
+    http
+      .delete(config.API.portfolioId(id))
+      .then((res) => {
+        success($q, "ลบข้อมูลสำเร็จ");
+        fecthList();
+      })
+      .catch((err) => {
+        messageError($q, err);
+        hideLoader();
+      });
+  });
+}
 </script>
 
 <template>
@@ -204,6 +227,7 @@ const clickBack = () => {
                   >
                     <span class="text-weight-medium">{{ col.label }}</span>
                   </q-th>
+                  <q-th auto-width />
                 </q-tr>
               </template>
               <template v-slot:body="props">
@@ -217,20 +241,26 @@ const clickBack = () => {
                     <div v-if="col.name == 'no'">
                       {{ props.rowIndex + 1 }}
                     </div>
-                    <div>
+                    <div v-else class="table_ellipsis2">
                       {{ col.value }}
                     </div>
                   </q-td>
+                  <q-td>
+                    <q-btn
+                      dense
+                      flat
+                      round
+                      color="red"
+                      icon="delete"
+                      @click.pervent="onDelete(props.row.id)"
+                    />
+                  </q-td>
                 </q-tr>
               </template>
               <template #item="props">
                 <div class="q-pa-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
-                  <q-card
+                  <q-card bordered flat>
-                    bordered
+                    <q-list @click="router.push(`/portfolio/` + props.row.id)">
-                    flat
-                    @click="router.push(`/portfolio/` + props.row.id)"
-                  >
-                    <q-list>
                       <q-item
                         v-for="col in props.cols.filter((col:any) => col.name !== 'desc')"
                         :key="col.name"
@@ -248,6 +278,18 @@ const clickBack = () => {
                         </q-item-section>
                       </q-item>
                     </q-list>
+                    <q-separator />
+
+                    <q-card-actions vertical align="center">
+                      <q-btn
+                        dense
+                        flat
+                        round
+                        color="red"
+                        icon="delete"
+                        @click.pervent="onDelete(props.row.id)"
+                      />
+                    </q-card-actions>
                   </q-card>
                 </div>
               </template>

src/style/quasar-variables.sass

@@ -89,5 +89,28 @@ input.input-alert
     text-overflow: ellipsis
     width: 200px
 
-.q-card__actions .q-btn--rectangle 
+.q-card__actions .q-btn--rectangle
-    padding: 0 14px !important
+    padding: 0 14px !important
+
+.table_ellipsis
+    max-width: 200px
+    white-space: nowrap
+    overflow: hidden
+    text-overflow: ellipsis
+
+.table_ellipsis:hover
+    word-wrap: break-word
+    overflow: visible
+    white-space: normal
+
+.table_ellipsis2
+    max-width: 25vw
+    white-space: nowrap
+    overflow: hidden
+    text-overflow: ellipsis
+
+.table_ellipsis2:hover
+    word-wrap: break-word
+    overflow: visible
+    white-space: normal
+    transition: width 2s