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

src/api/exam/api.candidate.ts

@@ -21,6 +21,8 @@ export default {
     `${candidate}register/${examId}/${positionId}`,
   candidatePayment: (examId: string, positionId: string) =>
     `${candidate}payment-image/${examId}/${positionId}`,
+  candidateProfile: (examId: string, positionId: string) =>
+    `${candidate}profile-image/${examId}/${positionId}`,
   candidateStatus: (examId: string, positionId: string) =>
     `${candidate}status/${examId}/${positionId}`,
   candidateUpload: (examId: string, positionId: string) =>

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

@@ -109,7 +109,9 @@ const fetchStatus = async () => {
     .then((res) => {
       acceptTermOfUse.value = true
     })
-    .catch(() => {})
+    .catch(() => {
+      acceptTermOfUse.value = false
+    })
     .finally(() => {
       loader.value = false
     })

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

@@ -4,7 +4,7 @@
       <div class="text-bold text-subtitle1 q-pb-md">เลือกวีธีการชำระเงิน</div>
       <div class="row col-12 q-gutter-y-md q-mb-lg">
         <q-list bordered class="col-12 rounded-borders" v-if="bank.length > 0">
-          <q-item tag="label" v-ripple class="q-pa-md">
+          <q-item class="q-pa-md">
             <q-item-section avatar>
               <q-icon name="mdi-cash" color="positive" size="30px" />
             </q-item-section>
@@ -12,19 +12,13 @@
               <q-item-label class="text-weight-medium text-subtitle1 q-pl-sm"
                 >ชำระเงินค่าสมัครสอบผ่านสำนัก/หน่วยงาน</q-item-label
               >
-              <!-- <q-item-label caption class="gt-xs"
-                >อนุมัติหลังแจ้งการโอนภายใน 24 ชั่วโมง</q-item-label
-              > -->
             </q-item-section>
-            <!-- <q-item-section avatar class="gt-xs">
-              <q-avatar size="32px">
-                <q-img src="@/assets/krungthai.png" class="col-12" />
-              </q-avatar>
-            </q-item-section> -->
-            <!-- <q-item-section side>
-              <q-radio v-model="pay" val="teal" color="blue" />
-            </q-item-section> -->
           </q-item>
+          <q-card-actions v-if="status === 'rejectPayment'" class="q-pa-md text-left row bg-red-2">
+            <div class="col-12 text-red-12">
+              <li>{{ rejectMessage }}</li>
+            </div>
+          </q-card-actions>
           <q-separator />
           <q-slide-transition :duration="100" class="">
             <div class="q-pa-md bg-grey-1">
@@ -50,19 +44,6 @@
                         <q-separator class="q-my-md" />
                       </div>
                       <div class="col-12">
-                        <!-- <q-separator class="q-my-md" /> -->
-                        <!-- <div class="q-pb-sm">
-                          <span class="text-weight-medium">ชื่อบัญชี :</span>
-                          <span class="text-blue q-pl-sm">สำนักงานทรัพยากรบุคคล</span>
-                        </div>
-                        <div class="q-pb-sm">
-                          <span class="text-weight-medium">ธนาคารกรุงไทย :</span>
-                          <span class="text-blue q-pl-sm"> 387-3-94793-0</span>
-                        </div>
-                        <div class="q-pb-sm">
-                          <span class="text-weight-medium">รหัสใบสั่งซื้อ :</span>
-                          <span class="text-blue q-pl-sm">12837495985900</span>
-                        </div> -->
                         <div>
                           <span class="text-weight-medium">ยอดสุทธิ (บาท) :</span>
                           <span class="text-blue q-pl-sm text-bold">{{ fee }}</span>
@@ -75,8 +56,7 @@
                   </q-card>
                 </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" -->
                     <q-img
                       src="@/assets/ex_slip.jpeg"
                       fit="contain"
@@ -96,16 +76,6 @@
                       <div class="absolute-bottom text-center">หลักฐานชำระเงิน</div>
                     </q-img>
                   </label>
-                  <!-- <input
-                    id="file-upload"
-                    type="file"
-                    v-if="status == 'payment' || status == 'rejectPayment'"
-                    @update:model-value="
-                      (val) => {
-                        file = val[0]
-                      }
-                    "
-                  /> -->
                   <q-file
                     id="file-upload"
                     v-model="filePayment"
@@ -128,7 +98,7 @@
         </q-list>
 
         <q-list bordered class="col-12 rounded-borders" v-else>
-          <q-item tag="label" v-ripple class="q-pa-md">
+          <q-item class="q-pa-md">
             <q-avatar size="32px">
               <q-img src="@/assets/krungthai.png" class="col-12" />
             </q-avatar>
@@ -136,19 +106,13 @@
               <q-item-label class="text-weight-medium text-subtitle1 q-pl-sm"
                 >ชำระเงินค่าสมัครสอบผ่านธนาคารกรุงไทย</q-item-label
               >
-              <!-- <q-item-label caption class="gt-xs"
-                >อนุมัติหลังแจ้งการโอนภายใน 24 ชั่วโมง</q-item-label
-              > -->
             </q-item-section>
-            <!-- <q-item-section avatar class="gt-xs">
-              <q-avatar size="32px">
-                <q-img src="@/assets/krungthai.png" class="col-12" />
-              </q-avatar>
-            </q-item-section> -->
-            <!-- <q-item-section side>
-              <q-radio v-model="pay" val="orange" color="blue" />
-            </q-item-section> -->
           </q-item>
+          <q-card-actions v-if="status === 'rejectPayment'" class="q-pa-md text-left row bg-red-2">
+            <div class="col-12 text-red-12">
+              <li>{{ rejectMessage }}</li>
+            </div>
+          </q-card-actions>
           <q-separator />
           <q-slide-transition :duration="100">
             <div class="q-pa-md bg-grey-1">
@@ -284,7 +248,7 @@ const props = defineProps({
 const $q = useQuasar()
 const mixin = useCounterMixin() //เรียกฟังก์ชันกลาง
 const { success, modalError } = mixin
-const rejectMessage = ref<string>('กรุณาจ่ายเงินให้ครบตามจำนวน')
+const rejectMessage = ref<string>('')
 const img = ref<string>('')
 const fileData = ref<any>()
 const loader = ref<boolean>(false)
@@ -330,7 +294,8 @@ const fetchData = async () => {
     .get(config.API.candidatePayment(examId.value, positionId.value))
     .then((res) => {
       const data = res.data.result
-      img.value = data
+      img.value = data.paymentImg
+      rejectMessage.value = data.rejectDetail
     })
     .catch(() => {})
     .finally(async () => {

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

@@ -100,7 +100,7 @@
       </template>
     </q-uploader>
   </div>
-  <q-card bordered flat class="full-width q-my-md">
+  <q-card bordered flat class="full-width">
     <q-list separator>
       <q-item v-for="file in files" :key="file.id" class="q-my-xs">
         <q-item-section>
@@ -162,21 +162,7 @@ const uploader = ref<any>()
 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: 'เอกสารข้อมูลการเปลี่ยนชื่อ',
-  //     status: 'อัปโหลดเสร็จสิ้น',
-  //     sizeLabel: '176MB'
-  //   },
-  //   {
-  //     key: 2,
-  //     name: 'เอกสารข้อมูลการสมรส',
-  //     status: 'อัปโหลดเสร็จสิ้น',
-  //     sizeLabel: '89MB'
-  //   }
-])
 const emit = defineEmits(['update:loader'])
 
 onMounted(async () => {
@@ -187,14 +173,6 @@ const fileAdd = async (file: any) => {
   name.value = file[0].name
 }
 
-// const fileUpload = async (file: any) => {
-//   //   fileDataUpload.value = file[0]
-//   const blob = file.slice(0, file.size, file[0].type)
-//   const newFile = new File([blob], name.value, { type: file[0].type })
-//   fileDataUpload.value = newFile
-//   await uploadData()
-// }
-
 const getData = async () => {
   loader.value = true
   await http
@@ -230,8 +208,12 @@ const deleteData = async (id: string) => {
 
 const uploadData = async (file: any) => {
   loader.value = true
+  const blob = file.slice(0, file[0].size)
+  const newFile = new File(blob, name.value, {
+    type: file[0].type
+  })
   const formData = new FormData()
-  formData.append('', file[0])
+  formData.append('', newFile)
   await http
     .put(config.API.candidateUpload(examId.value, positionId.value), formData)
     .then((res) => {

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-file
-        <q-btn outline dense color="black" icon="mdi-content-save-outline" @click="savePic">
+        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,

src/modules/01_exam/views/ExamDetail.vue

@@ -23,6 +23,14 @@
       :icon="stepRaw >= 2 ? (stepRaw == 2 ? 'mdi-pencil' : 'mdi-check-bold') : 'mdi-account'"
     >
       <q-card bordered class="q-pa-lg">
+        <q-card-actions
+          v-if="status === 'rejectRegister'"
+          class="q-pa-md q-mb-md text-left row bg-red-2"
+        >
+          <div class="col-12 text-red-12">
+            <li>{{ rejectMessage }}</li>
+          </div>
+        </q-card-actions>
         <ExamForm :fetchStep="fetchStep" :status="status" />
       </q-card>
     </q-step>
@@ -85,6 +93,7 @@ const loader = ref<boolean>(false)
 const status = ref<string>('register')
 const modalConsend = ref<boolean>(false)
 const stepPayment = ref<boolean>(true)
+const rejectMessage = ref<string>('')
 
 onMounted(async () => {
   //   stepRaw.value = 3
@@ -143,36 +152,41 @@ const fetchStep = async () => {
     .get(config.API.candidateStatus(examId.value, positionId.value))
     .then((res) => {
       const data = res.data.result
-      status.value = data
+      rejectMessage.value = data.rejectDetail
-      if (data == 'register') {
+      status.value = data.status
+      if (status.value == 'register') {
         stepRaw.value = 2
         step.value = 2
-      } else if (data == 'checkRegister') {
+      } else if (status.value == 'checkRegister') {
         stepRaw.value = 3
         step.value = 3
-      } else if (data == 'payment') {
+      } else if (status.value == 'payment') {
         stepRaw.value = 3
         step.value = 3
-      } else if (data == 'rejectRegister') {
+      } else if (status.value == 'rejectRegister') {
         stepRaw.value = 2
         step.value = 2
-      } else if (data == 'checkPayment') {
+      } else if (status.value == 'checkPayment') {
         stepRaw.value = 4
         step.value = 4
-      } else if (data == 'rejectPayment') {
+      } else if (status.value == 'rejectPayment') {
         stepRaw.value = 3
         step.value = 3
-      } else if (data == 'checkSeat') {
+      } else if (status.value == 'checkSeat') {
         stepRaw.value = 4
         step.value = 4
-      } else if (data == 'checkPoint') {
+      } else if (status.value == 'checkPoint') {
         stepRaw.value = 4
         step.value = 4
-      } else if (data == 'done') {
+      } else if (status.value == 'done') {
         stepRaw.value = 4
         step.value = 4
       }
-      if (stepPayment.value == false && data != 'register' && data != 'rejectRegister') {
+      if (
+        stepPayment.value == false &&
+        status.value != 'register' &&
+        status.value != 'rejectRegister'
+      ) {
         stepRaw.value = 4
         step.value = 4
       }