fix:bug fee

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

@@ -1,7 +1,7 @@
 <!-- page:จัดการรอบการสอบ สรรหา -->
 <script setup lang="ts">
 import type { QTableProps } from "quasar";
-import { onMounted, ref, watch } from "vue";
+import { onMounted, ref, watch, computed } from "vue";
 import { useQuasar, QForm } from "quasar";
 import { useRouter, useRoute } from "vue-router";
 
@@ -225,6 +225,10 @@ const columnsPosition = ref<QTableProps["columns"]>([
   },
 ]);
 
+const shouldShowPaymentFields = computed(() => {
+  return announcementExam.value && fee.value > 0;
+});
+
 /** ย้อนกลับไปหน้าหลัก */
 function clickBack() {
   router.push({ name: "qualifyPeriod" });
@@ -405,7 +409,7 @@ async function checkSave() {
     }
 
     // เช็คการเลือกวิธีการชำระเงิน
-    if (announcementExam.value && fee.value != 0) {
+    if (shouldShowPaymentFields.value && pay.value === "") {
       notifyWarring($q, "กรุณาเลือกวิธีการชำระเงิน");
       return;
     }
@@ -1174,7 +1178,7 @@ onMounted(async () => {
           </div>
           <div
             class="col-xs-12 col-sm-3 col-md-3"
-            v-if="announcementExam && fee != 0"
+            v-if="shouldShowPaymentFields"
           >
             <datepicker
               v-model="datePayment"
@@ -1480,11 +1484,14 @@ onMounted(async () => {
               </ProfileTable>
             </q-form>
           </div>
-          <div class="col-12" v-if="announcementExam && fee != 0">
+          <div class="col-12" v-if="shouldShowPaymentFields">
             <q-separator size="5px" color="grey-2" class="q-mt-lg" />
           </div>
 
-          <div class="col-12 q-mt-lg" v-if="announcementExam && fee != 0">
+          <div
+            class="col-12 q-mt-lg"
+            v-if="shouldShowPaymentFields"
+          >
             <div class="text-bold text-subtitle2 q-pb-md">
               เลือกวิธีการชำระเงิน
             </div>