แสดงไฟล์หลักฐารชำระเงิน

src/modules/01_exam/components/ExamPayment.vue

@@ -9,7 +9,7 @@
               <q-icon name="mdi-cash" color="positive" size="30px" />
             </q-item-section>
             <q-item-section>
-              <q-item-label class="text-weight-medium text-subtitle1"
+              <q-item-label class="text-weight-medium text-subtitle1 q-pl-sm"
                 >ชำระเงินค่าสมัครสอบผ่านสำนัก/หน่วยงาน</q-item-label
               >
               <!-- <q-item-label caption class="gt-xs"
@@ -82,6 +82,16 @@
                       fit="contain"
                       style="min-height: 300px; max-height: 300px"
                       class="col-12 bg-white"
+                      v-if="img == ''"
+                    >
+                      <div class="absolute-bottom text-center">หลักฐานชำระเงิน</div>
+                    </q-img>
+                    <q-img
+                      :src="img"
+                      fit="contain"
+                      style="min-height: 300px; max-height: 300px"
+                      class="col-12 bg-white"
+                      v-else
                     >
                       <div class="absolute-bottom text-center">หลักฐานชำระเงิน</div>
                     </q-img>
@@ -119,14 +129,11 @@
 
         <q-list bordered class="col-12 rounded-borders" v-else>
           <q-item tag="label" v-ripple class="q-pa-md">
-            <!-- <q-item-section avatar>
-              <q-icon name="mdi-cash" color="positive" size="30px" />
-            </q-item-section> -->
             <q-avatar size="32px">
               <q-img src="@/assets/krungthai.png" class="col-12" />
             </q-avatar>
             <q-item-section>
-              <q-item-label class="text-weight-medium text-subtitle1"
+              <q-item-label class="text-weight-medium text-subtitle1 q-pl-sm"
                 >ชำระเงินค่าสมัครสอบผ่านธนาคารกรุงไทย</q-item-label
               >
               <!-- <q-item-label caption class="gt-xs"
@@ -189,13 +196,23 @@
                   </ul>
                 </div>
                 <div class="col-xs-12 col-sm-5">
-                  <label for="file-upload" class="col-12 row"
+                  <label for="file-upload" class="col-12 row">
-                    ><!-- :src="img" -->
+                    <!-- :src="img" -->
                     <q-img
                       src="@/assets/ex_slip.jpeg"
                       fit="contain"
                       style="min-height: 300px; max-height: 300px"
                       class="col-12 bg-white"
+                      v-if="img == ''"
+                    >
+                      <div class="absolute-bottom text-center">หลักฐานชำระเงิน</div>
+                    </q-img>
+                    <q-img
+                      :src="img"
+                      fit="contain"
+                      style="min-height: 300px; max-height: 300px"
+                      class="col-12 bg-white"
+                      v-else
                     >
                       <div class="absolute-bottom text-center">หลักฐานชำระเงิน</div>
                     </q-img>
@@ -268,7 +285,7 @@ const $q = useQuasar()
 const mixin = useCounterMixin() //เรียกฟังก์ชันกลาง
 const { success, modalError } = mixin
 const rejectMessage = ref<string>('กรุณาจ่ายเงินให้ครบตามจำนวน')
-const img = ref<string>('@/assets/krungthai.png')
+const img = ref<string>('')
 const fileData = ref<any>()
 const loader = ref<boolean>(false)
 const route = useRoute()
@@ -281,6 +298,7 @@ const fileDataUpload = ref<File>()
 
 onMounted(async () => {
   await fetchPaymentExam()
+  await fetchData()
 })
 
 const uploadImg = (file: any) => {
@@ -306,6 +324,20 @@ const fetchPaymentExam = async () => {
     })
 }
 
+const fetchData = async () => {
+  loader.value = true
+  await http
+    .get(config.API.candidatePayment(examId.value, positionId.value))
+    .then((res) => {
+      const data = res.data.result
+      img.value = data
+    })
+    .catch(() => {})
+    .finally(async () => {
+      loader.value = false
+    })
+}
+
 const clickPayment = async () => {
   if (filePayment.value.length > 0) {
     const blob = filePayment.value.slice(0, filePayment.value[0].size)

src/modules/01_exam/components/Form/Document.vue

@@ -30,7 +30,7 @@
       color="gray"
       type="file"
       flat
-      :factory="fileUpload"
+      :factory="uploadData"
       ref="uploader"
       class="full-width"
       text-color="dark"
@@ -119,7 +119,7 @@
               round
               color="blue"
               icon="mdi-download-outline"
-              @click="downloadData(file.id)"
+              @click="downloadData(file.detail)"
             >
               <q-tooltip>ดาวน์โหลด</q-tooltip>
             </q-btn>
@@ -147,7 +147,7 @@ import HeaderTop from '@/components/top.vue'
 import http from '@/plugins/http'
 import config from '@/app.config'
 import { useRoute } from 'vue-router'
-import type { uploadType } from '@/modules/01_exam/interface/index/Main'
+import type { UploadType } from '@/modules/01_exam/interface/index/Main'
 
 const props = defineProps({
   status: {
@@ -163,7 +163,7 @@ const loader = ref<boolean>(false)
 const edit = ref<boolean>(props.status == 'register' || props.status == 'rejectRegister')
 const name = ref<string>('')
 const fileDataUpload = ref<File>()
-const files = ref<uploadType[]>([
+const files = ref<UploadType[]>([
   //   {
   //     key: 1,
   //     name: 'เอกสารข้อมูลการเปลี่ยนชื่อ',
@@ -187,13 +187,13 @@ const fileAdd = async (file: any) => {
   name.value = file[0].name
 }
 
-const fileUpload = async (file: any) => {
+// const fileUpload = async (file: any) => {
-  //   fileDataUpload.value = file[0]
+//   //   fileDataUpload.value = file[0]
-  const blob = file.slice(0, file.size, file[0].type)
+//   const blob = file.slice(0, file.size, file[0].type)
-  const newFile = new File([blob], name.value, { type: file[0].type })
+//   const newFile = new File([blob], name.value, { type: file[0].type })
-  fileDataUpload.value = newFile
+//   fileDataUpload.value = newFile
-  await uploadData()
+//   await uploadData()
-}
+// }
 
 const getData = async () => {
   loader.value = true
@@ -228,10 +228,10 @@ const deleteData = async (id: string) => {
     })
 }
 
-const uploadData = async () => {
+const uploadData = async (file: any) => {
   loader.value = true
   const formData = new FormData()
-  formData.append('FileData', fileDataUpload.value)
+  formData.append('', file[0])
   await http
     .put(config.API.candidateUpload(examId.value, positionId.value), formData)
     .then((res) => {
@@ -248,16 +248,7 @@ const uploadData = async () => {
     })
 }
 
-const downloadData = async (id: string) => {
+const downloadData = async (path: string) => {
-  loader.value = true
+  window.open(path)
-  await http
-    .get(config.API.candidateDownload(id))
-    .then((res) => {
-      const data = res
-    })
-    .catch(() => {})
-    .finally(() => {
-      loader.value = false
-    })
 }
 </script>

src/modules/01_exam/interface/index/Main.ts

@@ -99,11 +99,12 @@ interface zipCodeOption {
   zipCode: string | null
 }
 
-interface uploadType {
+interface UploadType {
-  id: String
+  id: string
-  fileName: String
+  fileName: string
   fileSize: number
-  fileType: String
+  fileType: string
+  detail: string
 }
 
 interface ExamCard {
@@ -308,5 +309,5 @@ export type {
   zipCodeOption,
   Occupation,
   ExamCard,
-  uploadType
+  UploadType
 }