ปลด validate วันที่มีผล ถ้าไม่มีค่า เเสดง ว่าง

src/modules/13_salary/components/SalaryChart/DialogFormMain.vue

@@ -19,7 +19,7 @@ import Header from "@/components/DialogHeader.vue";
 
 import { useCounterMixin } from "@/stores/mixin";
 
-const isReadonly = ref<boolean>(false)
+const isReadonly = ref<boolean>(false);
 const $q = useQuasar();
 const {
   date2Thai,
@@ -64,17 +64,11 @@ const formData = reactive<FormData>({
 const salaryTypeRef = ref<Object | null>(null);
 const posTypeRef = ref<Object | null>(null);
 const posLevelRef = ref<Object | null>(null);
-const dateRef = ref<any>(null);
-const startDateRef = ref<any>();
-const endDateRef = ref<any>();
 
 const ObjectRef: ObjectSalaryRef = {
   salaryType: salaryTypeRef,
   posTypId: posTypeRef,
   posLevelId: posLevelRef,
-  date: dateRef,
-  startDate: startDateRef,
-  endDate: endDateRef,
 };
 
 const salaryTypeOption = ref<DataOption[]>([
@@ -145,7 +139,7 @@ async function fetchSalaryDetail(id: string) {
       formData.endDate = data.endDate;
       formData.details = data.details;
       formData.isSpecial = data.isSpecial;
-      isReadonly.value = data.isActive
+      isReadonly.value = data.isActive;
     })
     .catch((err) => {
       messageError($q, err);
@@ -208,7 +202,7 @@ function clearFormData() {
   formData.details = "";
   documentFile.value = null;
   itemsDocument.value = [];
-  isReadonly.value = false
+  isReadonly.value = false;
 }
 
 function onClickSubmit() {
@@ -256,37 +250,10 @@ function checkEndDate() {
   }
 }
 
-// watch(
-//   () => formData.date,
-//   () => {
-//     if (formData.date) {
-//       dateRef.value.resetValidation();
-//     }
-//   }
-// );
-
-// watch(
-//   () => formData.startDate,
-//   () => {
-//     if (formData.startDate) {
-//       startDateRef.value.resetValidation();
-//     }
-//   }
-// );
-
-// watch(
-//   () => formData.endDate,
-//   () => {
-//     if (formData.endDate) {
-//       endDateRef.value.resetValidation();
-//     }
-//   }
-// );
 </script>
 
 <template>
   <q-dialog v-model="modal" persistent>
-
     <q-card class="col-12" style="width: 80%">
       <form @submit.prevent.stop="onClickSubmit">
         <Header :tittle="title" :close="closeDialog" />
@@ -297,7 +264,7 @@ function checkEndDate() {
               <div class="row col-12 q-col-gutter-sm">
                 <div class="col-xs-12 col-md-3">
                   <q-select
-                  :readonly="isReadonly"
+                    :readonly="isReadonly"
                     ref="salaryTypeRef"
                     dense
                     hide-bottom-space
@@ -318,7 +285,7 @@ function checkEndDate() {
 
                 <div class="col-xs-12 col-md-3">
                   <q-select
-                  :readonly="isReadonly"
+                    :readonly="isReadonly"
                     ref="posTypeRef"
                     dense
                     hide-bottom-space
@@ -338,7 +305,7 @@ function checkEndDate() {
 
                 <div class="col-xs-12 col-md-3">
                   <q-select
-                  :readonly="isReadonly"
+                    :readonly="isReadonly"
                     ref="posLevelRef"
                     dense
                     hide-bottom-space
@@ -358,7 +325,7 @@ function checkEndDate() {
 
                 <div class="col-xs-12 col-md-1">
                   <q-checkbox
-                  :disable="isReadonly"
+                    :disable="isReadonly"
                     size="md"
                     v-model="formData.isSpecial"
                     label="ฉ"
@@ -395,8 +362,7 @@ function checkEndDate() {
                     </template>
                     <template #trigger>
                       <q-input
-                      :readonly="isReadonly"
+                        :readonly="isReadonly"
-                        ref="dateRef"
                         outlined
                         dense
                         hide-bottom-space
@@ -406,10 +372,6 @@ function checkEndDate() {
                             : null
                         "
                         label="ให้ไว้ ณ วันที่"
-                        :rules="[
-                          (val) =>
-                            !!val || `${'กรุณาเลือกวันที่ ให้ไว ณ วันที่'}`,
-                        ]"
                       >
                         <template v-slot:prepend>
                           <q-icon
@@ -426,7 +388,7 @@ function checkEndDate() {
 
                 <div class="col-xs-12 col-md-4">
                   <datepicker
-                  :readonly="isReadonly"
+                    :readonly="isReadonly"
                     menu-class-name="modalfix"
                     v-model="formData.startDate"
                     :locale="'th'"
@@ -444,8 +406,7 @@ function checkEndDate() {
                     </template>
                     <template #trigger>
                       <q-input
-                      :readonly="isReadonly"
+                        :readonly="isReadonly"
-                        ref="startDateRef"
                         outlined
                         dense
                         hide-bottom-space
@@ -455,10 +416,6 @@ function checkEndDate() {
                             : null
                         "
                         label="วันที่มีผลบังคับใช้"
-                        :rules="[
-                          (val) =>
-                            !!val || `${'กรุณาเลือกวันที่มีผลบังคับใช้'}`,
-                        ]"
                       >
                         <template v-slot:prepend>
                           <q-icon
@@ -475,7 +432,7 @@ function checkEndDate() {
 
                 <div class="col-xs-12 col-md-4">
                   <datepicker
-                  :readonly="isReadonly"
+                    :readonly="isReadonly"
                     menu-class-name="modalfix"
                     v-model="formData.endDate"
                     :locale="'th'"
@@ -493,21 +450,15 @@ function checkEndDate() {
                     </template>
                     <template #trigger>
                       <q-input
-                      :readonly="isReadonly"
+                        :readonly="isReadonly"
-                        ref="endDateRef"
                         outlined
                         dense
-                        hide-bottom-space
                         :model-value="
                           formData.endDate != null
                             ? date2Thai(formData.endDate)
                             : null
                         "
                         label="วันที่สิ้นสุดบังคับใช้"
-                        :rules="[
-                          (val) =>
-                            !!val || `${'กรุณาเลือกวันที่สิ้นสุดบังคับใช้'}`,
-                        ]"
                       >
                         <template v-slot:prepend>
                           <q-icon
@@ -524,7 +475,7 @@ function checkEndDate() {
 
                 <div class="col-12">
                   <q-input
-                  :readonly="isReadonly"
+                    :readonly="isReadonly"
                     v-model="formData.details"
                     outlined
                     dense

src/modules/13_salary/interface/index/Main.ts

@@ -26,9 +26,6 @@ interface ObjectSalaryRef {
   salaryType: object | null;
   posTypId: object | null;
   posLevelId: object | null;
-  date: object | null;
-  startDate: object | null;
-  endDate: object | null;
 
   [key: string]: any;
 }

src/modules/13_salary/views/salaryChart.vue

@@ -313,7 +313,7 @@ async function filterFn(page: number) {
                 }}
               </div>
               <div v-else-if="col.name === 'startDate'">
-                {{ col.value ? date2Thai(col.value) : "-" }}
+                {{ col.value ? date2Thai(col.value) : "" }}
               </div>
               <div v-else-if="col.name === 'posLevel'">
                 {{ props.row.isSpecial ? `${col.value} (ฉ)` : `${col.value}` }}