สอบแข่งขัน (วันที่ชำระเงิน)

src/modules/03_recruiting/views/01_compete/PeriodAdd.vue

@@ -1,6 +1,6 @@
 <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";
 
@@ -26,7 +26,10 @@ const name = ref<string>("");
 const note = ref<string>("");
 const editor = ref<string>("");
 const announcementExam = ref<boolean>(true);
-const fee = ref<number>(0);
+const fee = ref<number | string>(0);
+const isFeeNotZero = computed(() => {
+  return fee.value !== 0 && fee.value !== "0" && fee.value !== "";
+});
 const round = ref<number>(1);
 const yearly = ref<number>(new Date().getFullYear());
 const dateRegister = ref<[Date, Date] | null>(null); //วันที่สมัคร
@@ -225,7 +228,7 @@ function sendData() {
         : null,
     examDate: dateExam.value !== null ? dateToISO(dateExam.value) : null,
     detail: editor.value,
-    fee: fee.value,
+    fee: fee.value ? (fee.value as number) : (0 as number),
     id: "",
     name: name.value,
     note: note.value,
@@ -442,7 +445,7 @@ onMounted(async () => {
               lazy-rules
               dense
               :rules="[
-                (val) => val >= 0 || `${'กรุณากรอกค่าธรรมเนียมให้ถูกต้อง'}`,
+                (val:number) => val >= 0 ||  `${'กรุณากรอกค่าธรรมเนียมให้ถูกต้อง'}`,
               ]"
               input-class="text-right"
             ></q-input>
@@ -565,7 +568,10 @@ onMounted(async () => {
               </template>
             </datepicker>
           </div>
-          <div class="col-xs-12 col-sm-3 col-md-3" v-if="announcementExam">
+          <div
+            class="col-xs-12 col-sm-3 col-md-3"
+            v-if="announcementExam && isFeeNotZero"
+          >
             <datepicker
               menu-class-name="modalfix"
               v-model="datePayment"