hrms-recruit/src/modules/01_exam/components/ExamPayment.vue

<template>
  <div class="col-12">
    <div class="row q-px-sm">
      <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 class="q-pa-md">
            <q-item-section avatar>
              <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-pl-sm"
                >ชำระเงินค่าสมัครสอบผ่านสำนัก/หน่วยงาน</q-item-label
              >
            </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">
              <div class="row q-col-gutter-sm">
                <div class="col-xs-12 col-sm-7">
                  <q-card bordered class="items-start q-pa-md row q-mb-sm" style="height: 300px">
                    <div class="row col-12">
                      <div class="col-12" v-for="item in bank" :key="item.id">
                        <div class="row q-pl-md col-12">
                          <div class="q-pb-xs col-4">
                            <span class="text-weight-medium">ธนาคาร :</span>
                            <span class="text-blue q-pl-xs">{{ item.bankName }}</span>
                          </div>
                          <div class="q-pb-xs col-4">
                            <span class="text-weight-medium">ชื่อบัญชี :</span>
                            <span class="text-blue q-pl-xs">{{ item.accountName }}</span>
                          </div>
                          <div class="q-pb-xs col-4">
                            <span class="text-weight-medium">เลขบัญชี :</span>
                            <span class="text-blue q-pl-xs"> {{ item.accountNumber }}</span>
                          </div>
                        </div>
                        <q-separator class="q-my-md" />
                      </div>
                      <div class="col-12">
                        <div>
                          <span class="text-weight-medium">ยอดสุทธิ (บาท) :</span>
                          <span class="text-blue q-pl-sm text-bold">{{ fee }}</span>
                        </div>
                      </div>
                      <div class="col-12 text-grey-6 q-mt-xl">
                        ** ถ้าต้องการเเก้ไขหลักฐานการโอนเงิน กรุณาอัปโหลดซ้ำ
                      </div>
                    </div>
                  </q-card>
                </div>
                <div class="col-xs-12 col-sm-5">
                  <label for="file-upload" class="col-12 row">
                    <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>
                  </label>
                  <input
                    id="file-upload"
                    type="file"
                    v-if="status == 'payment' || status == 'rejectPayment'"
                    accept="image/*"
                    @change="uploadImage"
                  />
                </div>
              </div>
            </div>
          </q-slide-transition>
        </q-list>

        <q-list bordered class="col-12 rounded-borders" v-else>
          <q-item class="q-pa-md">
            <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-pl-sm"
                >ชำระเงินค่าสมัครสอบผ่านธนาคารกรุงไทย</q-item-label
              >
            </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">
              <div class="row q-col-gutter-sm">
                <div class="col-xs-12 col-sm-7">
                  <q-card bordered class="q-pa-md">
                    <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>
                    </div>
                    <q-btn
                      color="blue"
                      icon="print"
                      class="q-px-md q-mt-md"
                      outline
                      dense
                      label="พิมพ์ใบแจ้งการชำระเงิน"
                      @click="downloadBillPayment"
                    />
                  </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 class="col-xs-12 col-sm-5">
                  <label for="file-upload" class="col-12 row">
                    <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>
                  </label>
                  <input
                    id="file-upload"
                    type="file"
                    v-if="status == 'payment' || status == 'rejectPayment'"
                    accept="image/*"
                    @change="uploadImage"
                  />
                </div>
              </div>
            </div>
          </q-slide-transition>
        </q-list>
      </div>
    </div>
  </div>
  <div class="row col-12 justify-center">
    <q-btn
      icon="mdi-check"
      color="primary"
      style="width: 200px"
      label="แจ้งการชำระเงิน"
      @click="clickPayment"
      v-if="status == 'payment' || status == 'rejectPayment'"
    />
  </div>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { useQuasar } from 'quasar'
import { useCounterMixin } from '@/stores/mixin'
import { useDataStore } from '@/stores/data'
import http from '@/plugins/http'
import config from '@/app.config'
import { useRoute } from 'vue-router'
import genReport from '@/plugins/genreport'

const props = defineProps({
  fetchStep: {
    type: Function,
    default: () => console.log('not function')
  },
  status: {
    type: String,
    required: true
  }
})

const $q = useQuasar()
const mixin = useCounterMixin() //เรียกฟังก์ชันกลาง
const { success, modalError, messageError } = mixin
const dataStore = useDataStore()
const { loaderPage } = dataStore
const rejectMessage = ref<string>('')
const img = ref<string>('')
const route = useRoute()
const examId = ref<string>(route.params.id.toString())
const positionId = ref<string>(route.params.positionId.toString())
const bank = ref<any>([])
const fee = ref<number>()
const filePayment = ref<File[]>([])
const candidateId = ref<string>('')

onMounted(async () => {
  await fetchPaymentExam()
  await fetchData()
})

const fetchPaymentExam = async () => {
  loaderPage(true)
  await http
    .get(config.API.periodExamPayment(examId.value))
    .then((res) => {
      const data = res.data.result
      bank.value = data.bankExam
      fee.value = data.fee
    })
    .catch((e) => {
      messageError($q, e)
    })
    .finally(() => {
      loaderPage(false)
    })
}

const fetchData = async () => {
  loaderPage(true)
  await http
    .get(config.API.candidatePayment(examId.value, positionId.value))
    .then((res) => {
      const data = res.data.result
      img.value = data.paymentImg
      rejectMessage.value = data.rejectDetail
      candidateId.value = data.candidateId
    })
    .catch((e) => {
      messageError($q, e)
    })
    .finally(() => {
      loaderPage(false)
    })
}

const clickPayment = async () => {
  //   if (img.value != null || img.value != '') {
  //     const formData = new FormData()
  //     formData.append('', filePayment.value[0])
  loaderPage(true)
  await http
    .post(config.API.candidatePayment(examId.value, positionId.value))
    .then(() => {
      success($q, 'ส่งหลักฐานชำระเงินสำเร็จ')
    })
    .catch((e) => {
      messageError($q, e)
    })
    .finally(async () => {
      filePayment.value = []
      await props.fetchStep()
    })
  //   } else {
  //     modalError($q, 'ไม่สามารถยืนยันการชำระเงินได้', 'กรุณาอัปโหลดเอกสารหลักฐานชำระเงิน')
  //   }
}

const uploadImage = async (file: any) => {
  let input = file.target.files
  if (input.length > 0) {
    const formData = new FormData()
    formData.append('', input[0])
    loaderPage(true)
    await http
      .put(config.API.candidatePayment(examId.value, positionId.value), formData)
      .then(() => {
        success($q, 'อัปโหลดหลักฐานชำระเงินสำเร็จ')
      })
      .catch((e) => {
        messageError($q, e)
      })
      .finally(async () => {
        await props.fetchStep()
        await fetchData()
        file = []
      })
  } else {
    // modalError($q, 'ไม่สามารถอัพโหลดไฟล์ได้', 'กรุณาเลือกไฟล์ที่ต้องการอัพโหลด')
  }
}

const downloadBillPayment = async () => {
  loaderPage(true)
  await http
    .get(config.API.candidatePaymentExport(candidateId.value))
    .then(async (res) => {
      const data = res.data.result
      await genReport(data, `พิมพ์ใบแจ้งการชำระเงิน`, 'pdf')
    })
    .catch((e) => {
      messageError($q, e)
    })
    .finally(() => {
      loaderPage(false)
    })
}
</script>

<style lang="scss" scoped>
.q-img {
  margin: 0 auto;
}
</style>