hrms-mgt/src/modules/03_recruiting/views/02_qualify/Payment.vue

<template>
  <div class="toptitle text-dark col-12 row items-center">
    <q-btn
      icon="mdi-arrow-left"
      unelevated
      round
      dense
      flat
      color="primary"
      class="q-mr-sm"
      @click="router.go(-1)"
    />
    ตรวจสอบการชำระเงิน
  </div>
  <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>
        <div class="row">
          <q-item-label class="text-weight-medium text-subtitle1 q-pl-sm"
            >ชำระเงินค่าสมัครสอบผ่านสำนัก/หน่วยงาน</q-item-label
          >
          <q-space />
          <q-btn color="primary" icon="check" @click="modalCheck"
            >ตรวจสอบข้อมูล
          </q-btn>
        </div>
      </q-item-section>
    </q-item>
    <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>
                    <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-card>
                  </div>
                </div>
              </div>
            </q-card>
          </div>
          <div class="col-xs-12 col-sm-5">
            <label 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 == ''"
              >
              </q-img>
              <q-img
                :src="img"
                fit="contain"
                style="min-height: 300px; max-height: 300px"
                class="col-12 bg-white"
                @click="openImg"
                v-else
              >
              </q-img>
            </label>
          </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>
        <div class="row">
          <q-item-label class="text-weight-medium text-subtitle1 q-pl-sm">
            ชำระเงินค่าสมัครสอบผ่านธนาคารกรุงไทย</q-item-label
          >
          <q-space />
          <q-btn color="primary" icon="check" @click="modalCheck"
            >ตรวจสอบข้อมูล
          </q-btn>
        </div>
      </q-item-section>
    </q-item>
    <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-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 == ''"
              >
              </q-img>
              <q-img
                :src="img"
                fit="contain"
                style="min-height: 300px; max-height: 300px"
                class="col-12 bg-white"
                v-else
                @click="openImg"
              >
              </q-img>
            </label>
            <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>
    </q-slide-transition>
  </q-list>

  <q-dialog :model-value="modal" persistent>
    <q-card style="min-width: 700px">
      <q-form ref="myForm">
        <div class="row items-center q-pa-sm">
          <div class="row">
            <div class="text-bold">ตรวจสอบการชำระเงิน</div>
          </div>
          <q-space />
          <q-btn
            icon="close"
            unelevated
            round
            dense
            style="color: #ff8080; background-color: #ffdede"
            size="12px"
            @click="close"
          />
        </div>
        <q-separator />
        <div class="q-pa-sm">
          <div class="col-12 row q-pa-md">
            <q-radio
              v-model="approve"
              checked-icon="task_alt"
              unchecked-icon="panorama_fish_eye"
              val="1"
              label="ผ่านการตรวจสอบคุณสมบัติ"
              dense
              class="col-12"
              @update:modelValue="reason = ''"
            />
            <q-radio
              v-model="approve"
              checked-icon="task_alt"
              unchecked-icon="panorama_fish_eye"
              val="2"
              label="ไม่ผ่านการตรวจสอบคุณสมบัติ(ผู้สมัครแก้ข้อมูลสมัคร)"
              dense
              class="col-12"
            />
            <q-input
              class="col-12"
              outlined
              v-model="reason"
              dense
              lazy-rules
              autofocus
              hide-bottom-space
              v-if="approve == '2'"
              type="textarea"
            ></q-input>
          </div>
        </div>
        <q-separator />
        <q-card-actions align="right" class="bg-white text-teal">
          <q-btn
            flat
            round
            color="public"
            @click="checkSave"
            icon="mdi-content-save-outline"
          >
            <q-tooltip>บันทึกตรวจสอบ</q-tooltip>
          </q-btn>
        </q-card-actions>
      </q-form>
    </q-card>
  </q-dialog>
</template>
<script setup lang="ts">
import { useRoute, useRouter } from "vue-router";
import { onMounted, ref } from "vue";
import { useQuasar } from "quasar";
import { useCounterMixin } from "@/stores/mixin";
import http from "@/plugins/http";
import config from "@/app.config";
import { useDataStore } from "@/stores/data";

const dataStore = useDataStore();
const { loaderPage } = dataStore;
const filePayment = ref<File[]>([]);
const bank = ref<any>([]);
const fee = ref<number>();
const $q = useQuasar();
const router = useRouter();
const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
const { success, messageError } = mixin;
const route = useRoute();
const examId = ref<string>(route.params.examId.toString());
const candidateId = ref<string>(route.params.candidateId.toString());
const modal = ref<boolean>(false);
const approve = ref<string>("1");
const reason = ref<string>("");
const img = ref<string>("");
const props = defineProps({
  fetchStep: {
    type: Function,
    default: () => console.log("not function"),
  },
  status: {
    type: String,
    required: true,
  },
});

onMounted(async () => {
  loaderPage(false);
  await fetchPaymentExam();
  await fetchData();
});

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

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(async () => {
      loaderPage(false);
    });
};

const confirm = async (status: boolean, reason: string) => {
  loaderPage(true);
  await http
    .put(config.API.candidateCheckPayment(candidateId.value), {
      status: status,
      reason: reason,
    })
    .then((res) => {})
    .catch((e) => {
      messageError($q, e);
    })
    .finally(async () => {
      loaderPage(false);
      success($q, "ตรวจสอบข้อมูลชำระเงินสำเร็จ");
      router.push(`/qualify/manage/${examId.value}`);
    });
};

const checkSave = () => {
  if (approve.value == "1") {
    confirm(true, "");
  } else {
    confirm(false, reason.value);
  }
};

const openImg = () => {
  window.open(img.value);
};

const modalCheck = () => {
  modal.value = true;
};

const close = () => {
  modal.value = false;
};
</script>