UI ทะเบียนประวัติ Part 1

src/modules/04_registryPerson/components/detail/GovernmentInformation/04_PerformSpecialWork.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { ref, reactive, onMounted } from "vue";
 import { useQuasar, type QTableProps } from "quasar";
+import axios from "axios";
 
 import { useRoute } from "vue-router";
 import { checkPermission } from "@/utils/permissions";
@@ -32,7 +33,8 @@ const profileId = ref<string>(
   route.params.id ? route.params.id.toString() : ""
 );
 const empType = ref<string>(pathRegistryEmp(route.name?.toString() ?? ""));
-
+const fileUpload = ref<File>();
+const uploadUrl = ref<string>("");
 /** props*/
 const isLeave = defineModel<boolean>("isLeave", {
   required: true,
@@ -177,6 +179,7 @@ function closeDialog() {
   dutyData.reference = "";
   dutyData.refCommandNo = "";
   dutyData.refCommandDate = null;
+  fileUpload.value = undefined;
 }
 
 /** fetch ข้อมูลรายการพิเศษ*/
@@ -211,7 +214,10 @@ function addData() {
   };
   http
     .post(config.API.profileNewDuty(empType.value), body)
-    .then(async () => {
+    .then(async (res) => {
+      if (fileUpload.value && res.data.result) {
+        await uploadProfile(res.data.result);
+      }
       await fetchData(profileId.value);
       await success($q, "บันทึกข้อมูลสำเร็จ");
       closeDialog();
@@ -232,7 +238,10 @@ function editData(idData: string) {
       ...dutyData,
       profileId: undefined,
     })
-    .then(async () => {
+    .then(async (res) => {
+      if (fileUpload.value && res.data.result) {
+        await uploadProfile(res.data.result);
+      }
       await fetchData(profileId.value);
       await success($q, "บันทึกข้อมูลสำเร็จ");
       closeDialog();
@@ -245,6 +254,85 @@ function editData(idData: string) {
     });
 }
 
+/**
+ * ฟังก์ชันส้ราง Path อัปโหลดไฟล์
+ * @param id
+ */
+async function uploadProfile(id: string) {
+  await http
+    .post(
+      config.API.subFile(
+        "ทะเบียนประวัติ",
+        "ประกาศเกียรติคุณ",
+        profileId.value,
+        id
+      ),
+      {
+        replace: true,
+        fileList: [
+          {
+            fileName: "เอกสารหลักฐาน",
+          },
+        ],
+      }
+    )
+    .then(async (res) => {
+      uploadUrl.value = res.data["เอกสารหลักฐาน"].uploadUrl;
+      await uploadFileURL(uploadUrl.value, fileUpload.value);
+    })
+    .catch((err) => {
+      messageError($q, err);
+    });
+}
+
+/**
+ * ฟังก์ชันอัปโหลดำไฟล์
+ * @param uploadUrl Path อัปโหลดไฟล์
+ * @param file ไฟล์เอกสาร
+ */
+async function uploadFileURL(uploadUrl: string, file: any) {
+  await axios
+    .put(uploadUrl, file, {
+      headers: {
+        "Content-Type": file.type,
+      },
+    })
+    .then(() => {
+      fileUpload.value = undefined;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    });
+}
+
+/**
+ * ฟังก์ชันโหลไฟลเอกสารหลักฐาน
+ * @param id รายการที่ต้องการโหลด
+ */
+async function onDownloadFile(id: string) {
+  showLoader();
+  await http
+    .get(
+      config.API.subFileByFileName(
+        "ทะเบียนประวัติ",
+        "ประกาศเกียรติคุณ",
+        profileId.value,
+        id,
+        "เอกสารหลักฐาน"
+      )
+    )
+    .then(async (res) => {
+      const data = res.data.downloadUrl;
+      window.open(data, "_blank");
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
 /** ยืนยันการบันทึกข้อมูล*/
 function onSubmit() {
   dialogConfirm(
@@ -364,6 +452,7 @@ onMounted(() => {
         <q-th v-for="col in props.cols" :key="col.name" :props="props">
           <span class="text-weight-medium">{{ col.label }}</span>
         </q-th>
+        <q-th auto-width />
       </q-tr>
     </template>
     <template v-slot:body="props" v-if="mode === 'table'">
@@ -397,6 +486,19 @@ onMounted(() => {
             {{ col.value ? col.value : "-" }}
           </div>
         </q-td>
+        <q-td auto-width>
+          <q-btn
+            v-if="props.row.isUpload == true"
+            color="green"
+            flat
+            dense
+            round
+            icon="mdi-file-document-outline"
+            @click="onDownloadFile(props.row.id)"
+          >
+            <q-tooltip>ดาวน์โหลด</q-tooltip>
+          </q-btn>
+        </q-td>
       </q-tr>
     </template>
     <template v-slot:item="props" v-else>
@@ -651,6 +753,83 @@ onMounted(() => {
                 </template>
               </datepicker>
             </div>
+            <div class="col-xs-12 col-sm-12 col-md-12">
+              <div class="row">
+                <q-uploader
+                  color="gray"
+                  type="file"
+                  flat
+                  ref="uploader"
+                  class="full-width"
+                  text-color="white"
+                  :max-size="10000000"
+                  accept=".pdf"
+                  bordered
+                  label="[ไฟล์ pdf ขนาดไม่เกิน 10MB]"
+                  @added="(v:any) => (fileUpload = v[0])"
+                >
+                  <template v-slot:header="scope">
+                    <div class="row no-wrap items-center q-pa-sm q-gutter-xs">
+                      <q-btn
+                        v-if="scope.queuedFiles.length > 0"
+                        icon="clear_all"
+                        @click="scope.removeQueuedFiles"
+                        round
+                        dense
+                        flat
+                      >
+                        <q-tooltip>ลบทั้งหมด</q-tooltip>
+                      </q-btn>
+                      <q-btn
+                        v-if="scope.uploadedFiles.length > 0"
+                        icon="done_all"
+                        @click="scope.removeUploadedFiles"
+                        round
+                        dense
+                        flat
+                      >
+                        <q-tooltip>ลบไฟล์ที่อัปโหลด</q-tooltip>
+                      </q-btn>
+                      <q-spinner
+                        v-if="scope.isUploading"
+                        class="q-uploader__spinner"
+                      />
+                      <div class="col">
+                        <div class="q-uploader__title">
+                          {{ "[ไฟล์ .pdf ขนาดไม่เกิน 10MB]" }}
+                        </div>
+                        <div class="q-uploader__subtitle">
+                          {{ scope.uploadSizeLabel }} /
+                          {{ scope.uploadProgressLabel }}
+                        </div>
+                      </div>
+                      <q-btn
+                        v-if="scope.canAddFiles"
+                        type="a"
+                        icon="add_box"
+                        @click="scope.pickFiles"
+                        round
+                        dense
+                        flat
+                      >
+                        <q-uploader-add-trigger />
+                        <q-tooltip>เลือกไฟล์</q-tooltip>
+                      </q-btn>
+                      <q-btn
+                        v-if="scope.isUploading"
+                        icon="clear"
+                        @click="scope.abort"
+                        round
+                        dense
+                        flat
+                      >
+                        <q-tooltip>ยกเลิกการอัปโหลด</q-tooltip>
+                      </q-btn>
+                    </div>
+                  </template>
+                </q-uploader>
+              </div>
+            </div>
           </div>
         </q-card-section>
         <q-separator />