Refactoring code module 03_recruiting

src/modules/03_recruiting/views/02_qualify/Payment.vue

@@ -1,3 +1,115 @@
+<script setup lang="ts">
+import { useRoute, useRouter } from "vue-router";
+import { onMounted, ref } from "vue";
+import { useQuasar } from "quasar";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
+
+const $q = useQuasar();
+const router = useRouter();
+const route = useRoute();
+const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
+const { success, messageError, showLoader, hideLoader } = mixin;
+
+const filePayment = ref<File[]>([]);
+const bank = ref<any>([]);
+const fee = ref<number>();
+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,
+  },
+});
+
+async function fetchData() {
+  showLoader();
+  await http
+    .get(config.API.candidatePayment(candidateId.value))
+    .then((res) => {
+      const data = res.data.result;
+      img.value = data;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+async function fetchPaymentExam() {
+  showLoader();
+  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 () => {
+      hideLoader();
+    });
+}
+
+async function confirm(status: boolean, reason: string) {
+  showLoader();
+  await http
+    .put(config.API.candidateCheckPayment(candidateId.value), {
+      status: status,
+      reason: reason,
+    })
+    .then((res) => {})
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      hideLoader();
+      success($q, "ตรวจสอบข้อมูลชำระเงินสำเร็จ");
+      router.push(`/qualify/manage/${examId.value}`);
+    });
+}
+
+function checkSave() {
+  if (approve.value == "1") {
+    confirm(true, "");
+  } else {
+    confirm(false, reason.value);
+  }
+}
+
+function openImg() {
+  window.open(img.value);
+}
+
+function modalCheck() {
+  modal.value = true;
+}
+
+function close() {
+  modal.value = false;
+}
+
+onMounted(async () => {
+  hideLoader();
+  await fetchPaymentExam();
+  await fetchData();
+});
+</script>
 <template>
   <div class="toptitle text-dark col-12 row items-center">
     <q-btn
@@ -271,113 +383,3 @@
     </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";
-
-const filePayment = ref<File[]>([]);
-const bank = ref<any>([]);
-const fee = ref<number>();
-const $q = useQuasar();
-const router = useRouter();
-const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
-const { success, messageError, showLoader, hideLoader } = 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 () => {
-  hideLoader();
-  await fetchPaymentExam();
-  await fetchData();
-});
-
-const fetchData = async () => {
-  showLoader();
-  await http
-    .get(config.API.candidatePayment(candidateId.value))
-    .then((res) => {
-      const data = res.data.result;
-      img.value = data;
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-};
-
-const fetchPaymentExam = async () => {
-  showLoader();
-  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 () => {
-      hideLoader();
-    });
-};
-
-const confirm = async (status: boolean, reason: string) => {
-  showLoader();
-  await http
-    .put(config.API.candidateCheckPayment(candidateId.value), {
-      status: status,
-      reason: reason,
-    })
-    .then((res) => {})
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      hideLoader();
-      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>