แสดงรูปหลักฐานชำระ

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

@@ -86,11 +86,31 @@
                       <div class="absolute-bottom text-center">หลักฐานชำระเงิน</div>
                     </q-img>
                   </label>
-                  <input
+                  <!-- <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"
+                    dense
+                    label="อัพโหลดหลักฐานชำระเงิน"
+                    outlined
+                    use-chips
+                    multiple
+                    class="q-pl-sm"
+                    v-if="status == 'payment' || status == 'rejectPayment'"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon name="attach_file" />
+                    </template>
+                  </q-file>
                 </div>
               </div>
             </div>
@@ -106,7 +126,9 @@
               <q-item-label class="text-weight-medium text-subtitle1"
                 >โอนเงินผ่านทางเครื่อง ATM / เคาน์เตอร์ธนาคาร</q-item-label
               >
-              <q-item-label caption class="gt-xs">อนุมัติทันทีหลังชำระ</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">
@@ -120,46 +142,88 @@
           <q-separator />
           <q-slide-transition :duration="100">
             <div class="q-pa-md bg-grey-1">
-              <q-card bordered class="q-pa-md">
+              <div class="row q-col-gutter-sm">
-                <div class="q-pb-sm">
+                <div class="col-xs-12 col-sm-7">
-                  <span class="text-weight-medium">รหัสใบสั่งซื้อ :</span>
+                  <q-card bordered class="q-pa-md">
-                  <span class="text-blue q-pl-sm">12837495985900</span>
+                    <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">200.00</span>
+                    </div>
+                    <q-btn
+                      color="blue"
+                      icon="print"
+                      class="q-px-md q-mt-md"
+                      outline
+                      dense
+                      label="พิมพ์ใบแจ้งการชำระเงิน"
+                    />
+                  </q-card>
+                  <div class="q-pt-md q-pb-xs text-bold">ธนาคารกรุงไทย</div>
+                  <div class="q-pb-md">สอดบัตร ATM กดรหัสและเลือกรายการ</div>
+                  <ul class="q-gutter-y-sm">
+                    <li>ขั้นที่ 1 บริการอื่นๆ</li>
+                    <li>ขั้นที่ 2 ชำระค่าบริการ</li>
+                    <li>ขั้นที่ 3 ระบุรหัสบริษัท</li>
+                    <li>
+                      ขั้นที่ 4 เลือกบัญชีผู้ชำระเงิน คือ บัญชีของตัวท่านว่าเป็นบัญชีออมทรัพย์ หรือ
+                      กระแสรายวัน
+                    </li>
+                    <li>
+                      ขั้นที่ 5 ใส่รหัสบริษัทฯ คือ
+                      <span class="text-blue text-bold">2111</span> และ ใส่ Ref No.1
+                      ขั้นด้วยเครื่องหมายจุด ( . ) แล้วตามด้วย Ref No.2 (ดูใน "ใบแจ้งการชำระเงิน")
+                    </li>
+                    <li>
+                      ยกตัวอย่างเช่น ถ้า Ref No.1 คือ 012345 และ Ref No.2 คือ 308833ต้องใส่ เป็น
+                      012345.308833
+                    </li>
+                    <li>ขั้นที่ 6 ใส่จำนวนเงินที่ชำระรวมหน่วยสตางค์</li>
+                    <li>ขั้นที่ 7 ตรวจสอบรายการ</li>
+                  </ul>
                 </div>
-                <div>
+                <div class="col-xs-12 col-sm-5">
-                  <span class="text-weight-medium">ยอดสุทธิ (บาท) :</span>
+                  <label for="file-upload" class="col-12 row"
-                  <span class="text-blue q-pl-sm text-bold">200.00</span>
+                    ><!-- :src="img" -->
+                    <q-img
+                      src="@/assets/ex_slip.jpeg"
+                      fit="contain"
+                      style="min-height: 300px; max-height: 300px"
+                      class="col-12 bg-white"
+                    >
+                      <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"
+                    dense
+                    label="อัพโหลดหลักฐานชำระเงิน"
+                    outlined
+                    use-chips
+                    multiple
+                    class="q-pl-sm"
+                    v-if="status == 'payment' || status == 'rejectPayment'"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon name="attach_file" />
+                    </template>
+                  </q-file>
                 </div>
-                <q-btn
+              </div>
-                  color="blue"
-                  icon="print"
-                  class="q-px-md q-mt-md"
-                  outline
-                  dense
-                  label="พิมพ์ใบแจ้งการชำระเงิน"
-                />
-              </q-card>
-              <div class="q-pt-md q-pb-xs text-bold">ธนาคารกรุงไทย</div>
-              <div class="q-pb-md">สอดบัตร ATM กดรหัสและเลือกรายการ</div>
-              <ul class="q-gutter-y-sm">
-                <li>ขั้นที่ 1 บริการอื่นๆ</li>
-                <li>ขั้นที่ 2 ชำระค่าบริการ</li>
-                <li>ขั้นที่ 3 ระบุรหัสบริษัท</li>
-                <li>
-                  ขั้นที่ 4 เลือกบัญชีผู้ชำระเงิน คือ บัญชีของตัวท่านว่าเป็นบัญชีออมทรัพย์ หรือ
-                  กระแสรายวัน
-                </li>
-                <li>
-                  ขั้นที่ 5 ใส่รหัสบริษัทฯ คือ <span class="text-blue text-bold">2111</span> และ ใส่
-                  Ref No.1 ขั้นด้วยเครื่องหมายจุด ( . ) แล้วตามด้วย Ref No.2 (ดูใน
-                  "ใบแจ้งการชำระเงิน")
-                </li>
-                <li>
-                  ยกตัวอย่างเช่น ถ้า Ref No.1 คือ 012345 และ Ref No.2 คือ 308833ต้องใส่ เป็น
-                  012345.308833
-                </li>
-                <li>ขั้นที่ 6 ใส่จำนวนเงินที่ชำระรวมหน่วยสตางค์</li>
-                <li>ขั้นที่ 7 ตรวจสอบรายการ</li>
-              </ul>
             </div>
           </q-slide-transition>
         </q-list>
@@ -207,6 +271,8 @@ const route = useRoute()
 const examId = ref<string>(route.params.id.toString())
 const positionId = ref<string>(route.params.positionId.toString())
 const bank = ref<any>([])
+const filePayment = ref<File[]>([])
+const fileDataUpload = ref<File>()
 
 onMounted(async () => {
   await fetchPaymentExam()
@@ -236,17 +302,29 @@ const fetchPaymentExam = async () => {
 }
 
 const clickPayment = async () => {
-  loader.value = true
+  if (filePayment.value.length > 0) {
-  await http
+    const blob = filePayment.value.slice(0, filePayment.value[0].size)
-    .put(config.API.candidatePayment(examId.value, positionId.value))
+    const newFile = new File(blob, filePayment.value[0].name, {
-    .then(() => {
+      type: filePayment.value[0].type
-      success($q, 'ส่งหลักฐานชำระเงินสำเร็จ')
-    })
-    .catch(() => {})
-    .finally(async () => {
-      loader.value = false
-      props.fetchStep()
     })
+    fileDataUpload.value = newFile
+    const formData = new FormData()
+    formData.append('', fileDataUpload.value)
+    loader.value = true
+    await http
+      .put(config.API.candidatePayment(examId.value, positionId.value), formData)
+      .then(() => {
+        success($q, 'ส่งหลักฐานชำระเงินสำเร็จ')
+      })
+      .catch(() => {})
+      .finally(async () => {
+        loader.value = false
+        props.fetchStep()
+        filePayment.value = []
+      })
+  } else {
+    modalError($q, 'ไม่สามารถอัพโหลดไฟล์ได้', 'กรุณาเลือกไฟล์ที่ต้องการอัพโหลด')
+  }
 }
 
 const getClass = (val: string) => {
@@ -279,6 +357,8 @@ const message = (val: string) => {
       return 'ตรวจสอบเเล้ว'
     case 'done':
       return 'ตรวจสอบเเล้ว'
+    case 'waiver':
+      return 'สละสิทธิ์สอบ'
     default:
       return 'รออัปโหลดหลักฐานชำระเงิน'
   }

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

@@ -29,6 +29,7 @@
       :name="3"
       title="ชำระค่าธรรมเนียม"
       :icon="stepRaw >= 3 ? (stepRaw == 3 ? 'mdi-pencil' : 'mdi-check-bold') : 'mdi-receipt'"
+      v-if="stepPayment"
     >
       <q-card bordered class="q-pa-lg">
         <ExamPayment :fetchStep="fetchStep" :status="status" />
@@ -80,6 +81,7 @@ const positionId = ref<string>(route.params.positionId.toString())
 const loader = ref<boolean>(false)
 const status = ref<string>('register')
 const modalConsend = ref<boolean>(false)
+const stepPayment = ref<boolean>(true)
 
 onMounted(async () => {
   //   stepRaw.value = 3
@@ -96,6 +98,14 @@ const candidateCheck = async () => {
       const data = res.data.result
       store.consend = data.consend
       const positionExam = data.positionExam
+      stepPayment.value = data.bank
+      //   console.log('qwe')
+      //   console.log(positionId.value != '00000000-0000-0000-0000-000000000000')
+      //   console.log(positionId.value)
+      //   console.log(positionExam)
+      //   console.log(positionExam.id)
+      //   console.log(data.status != 'register')
+      //   console.log(data.status != 'rejectRegister')
       if (
         positionId.value != '00000000-0000-0000-0000-000000000000' &&
         positionExam.id != positionId.value &&
@@ -134,8 +144,8 @@ const fetchStep = async () => {
         stepRaw.value = 2
         step.value = 2
       } else if (data == 'checkRegister') {
-        stepRaw.value = 3
+        stepRaw.value = 2
-        step.value = 3
+        step.value = 2
       } else if (data == 'payment') {
         stepRaw.value = 3
         step.value = 3

src/stores/mixin.ts

@@ -384,6 +384,8 @@ export const useCounterMixin = defineStore('mixin', () => {
         return 'รอเจ้าหน้าที่สรุปคะแนนสอบ'
       case 'done':
         return 'สอบคัดเลือกสำเร็จ'
+      case 'waiver':
+        return 'สละสิทธิ์สอบ'
       default:
         return '-'
     }

src/views/MainLayout.vue

@@ -106,7 +106,7 @@ const fetchStatus = async () => {
           </div>
         </q-toolbar-title>
         <q-space />
-        <q-badge outline color="blue" class="q-mr-md text-bold">
+        <q-badge flat color="blue" class="q-mr-md text-bold">
           {{ statusCandidate(status) }}
         </q-badge>
         <q-btn