ต่อ api ปฏิเสธจ่ายเงิน

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

@@ -311,17 +311,38 @@
     <div class="row col-xs-12 col-sm-3 col-md-2 justify-center">
       <div class="containerimage row justify-center col-xs-6 col-sm-10 col-md-12">
         <label for="file-upload" class="col-12 row">
-          <q-img src="@/assets/avatar_user.jpg" class="col-12">
+          <q-img v-if="img == ''" src="@/assets/avatar_user.jpg" class="col-12">
+            <div class="overlay" v-if="status == 'register' || status == 'rejectRegister'">
+              <q-icon name="mdi-camera" />
+              <br />อัปเดต
+            </div>
+          </q-img>
+          <q-img v-else :src="img" class="col-12">
             <div class="overlay" v-if="status == 'register' || status == 'rejectRegister'">
               <q-icon name="mdi-camera" />
               <br />อัปเดต
             </div>
           </q-img>
         </label>
-        <input id="file-upload" type="file" />
+        <!-- <input id="file-upload" type="file" /> -->
       </div>
-      <div class="col-12 text-center" v-if="disabledPic">
-        <q-btn outline dense color="black" icon="mdi-content-save-outline" @click="savePic">
+      <q-file
+        id="file-upload"
+        v-model="fileProfile"
+        dense
+        label="รูป"
+        outlined
+        use-chips
+        multiple
+        class="q-pl-sm"
+        v-if="status == 'register' || status == 'rejectRegister'"
+      >
+        <template v-slot:prepend>
+          <q-icon name="attach_file" />
+        </template>
+      </q-file>
+      <div class="col-12 text-center" v-if="status == 'register' || status == 'rejectRegister'">
+        <q-btn outline dense color="black" icon="mdi-content-save-outline" @click="clickProfile">
           <q-tooltip content-class="bg-grey-2 text-black">บันทึกรูป</q-tooltip>
         </q-btn>
       </div>
@@ -352,6 +373,7 @@ import { defaultInformation, changeData } from '@/modules/01_exam/interface/inde
 import HeaderTop from '@/components/top.vue'
 import { useRoute } from 'vue-router'
 import keycloak from '@/plugins/keycloak'
+import { useQuasar } from 'quasar'
 
 const props = defineProps({
   prefixOptions: {
@@ -376,8 +398,9 @@ const props = defineProps({
   }
 })
 
+const $q = useQuasar()
 const mixin = useCounterMixin()
-const { date2Thai, calAge } = mixin
+const { date2Thai, calAge, modalError, success } = mixin
 const districtOptions = ref<DataOption[]>([])
 const route = useRoute()
 const examId = ref<string>(route.params.id.toString())
@@ -387,6 +410,9 @@ const myform = ref<any>({})
 const disabledPic = ref<boolean>(false)
 const fileData = ref<File | null>()
 const loader = ref<boolean>(false)
+const img = ref<string>('')
+const fileProfile = ref<File[]>([])
+const fileDataUpload = ref<File>()
 
 const emit = defineEmits(['update:form'])
 
@@ -400,6 +426,7 @@ watch(defaultInformation, async (count: Information, prevCount: Information) =>
 
 onMounted(async () => {
   await fetchData()
+  await fetchImgData()
   if (defaultInformation.value.provinceId != null)
     await fetchDistrict(defaultInformation.value.provinceId)
 })
@@ -440,6 +467,47 @@ const fetchData = async () => {
     })
 }
 
+const fetchImgData = async () => {
+  loader.value = true
+  await http
+    .get(config.API.candidateProfile(examId.value, positionId.value))
+    .then((res) => {
+      const data = res.data.result
+      img.value = data
+    })
+    .catch(() => {})
+    .finally(async () => {
+      loader.value = false
+    })
+}
+
+const clickProfile = async () => {
+  if (fileProfile.value.length > 0) {
+    const blob = fileProfile.value.slice(0, fileProfile.value[0].size)
+    const newFile = new File(blob, fileProfile.value[0].name, {
+      type: fileProfile.value[0].type
+    })
+    fileDataUpload.value = newFile
+    const formData = new FormData()
+    formData.append('', fileDataUpload.value)
+    loader.value = true
+    await http
+      .put(config.API.candidateProfile(examId.value, positionId.value), formData)
+      .then(() => {
+        success($q, 'ส่งหลักฐานชำระเงินสำเร็จ')
+      })
+      .catch(() => {})
+      .finally(async () => {
+        loader.value = false
+        await fetchData()
+        await fetchImgData()
+        fileProfile.value = []
+      })
+  } else {
+    modalError($q, 'ไม่สามารถอัพโหลดไฟล์ได้', 'กรุณาเลือกไฟล์ที่ต้องการอัพโหลด')
+  }
+}
+
 const selectProvince = (val: string) => {
   defaultInformation.value.districtId = ''
   myform.value.resetValidation()
@@ -468,10 +536,6 @@ const savePic = () => {
   disabledPic.value = false
 }
 
-const pickFile = () => {
-  disabledPic.value = true
-}
-
 const getClass = (val: boolean) => {
   return {
     'full-width inputgreen cursor-pointer': val,