ปรับการกรอกวันที่ การลา , ,ปฏิบัติราชการพิเศษ ,วันที่ไม่ได้รับเงินเดือน ,อื่นๆ

src/modules/04_registry/components/Work.vue

@@ -64,7 +64,20 @@
         <q-card-section class="q-p-sm">
           <div class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs">
             <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                v-if="edit"
+                outlined
+                v-model="inputDateStart"
+                label="วันที่เริ่มต้น"
+                mask="##/##/####"
+                dense
+                :error="dayCheckedStart"
+                error-message="กรุณากรอกวัน/เดือน/ปี เริ่มต้น"
+                :rules="[(val) => !!val || `${'กรุณาเลือกวันที่เริ่มต้น'}`]"
+              />
+
               <datepicker
+                v-else
                 menu-class-name="modalfix"
                 :readonly="!edit"
                 v-model="dateStart"
@@ -107,7 +120,19 @@
               </datepicker>
             </div>
             <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                v-if="edit"
+                outlined
+                v-model="inputDateEnd"
+                label="วันที่สิ้นสุด"
+                mask="##/##/####"
+                dense
+                :error="dayCheckedEnd"
+                error-message="กรุณากรอกวัน/เดือน/ปี สิ้นสุด"
+                :rules="[(val) => !!val || `${'กรุณาเลือกวันที่สิ้นสุด'}`]"
+              />
               <datepicker
+                v-else
                 menu-class-name="modalfix"
                 v-model="dateEnd"
                 :locale="'th'"
@@ -205,7 +230,17 @@
               </q-input>
             </div>
             <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                v-if="edit"
+                outlined
+                v-model="inputRefCommandDate"
+                :label="`${'เอกสารอ้างอิง (ลงวันที่)'}`"
+                mask="##/##/####"
+                dense
+              />
+
               <datepicker
+                v-else
                 menu-class-name="modalfix"
                 :readonly="!edit"
                 v-model="refCommandDate"
@@ -252,9 +287,7 @@
                       />
                     </template>
                   </q-input>
-                  
                 </template>
-                
               </datepicker>
             </div>
           </div>
@@ -311,6 +344,7 @@
 <script setup lang="ts">
 import { onMounted, ref, watch } from "vue";
 import { useRoute } from "vue-router";
+import moment from "moment";
 import { useProfileDataStore } from "@/modules/04_registry/store";
 import { useCounterMixin } from "@/stores/mixin";
 
@@ -340,8 +374,16 @@ const store = useProfileDataStore();
 const { profileData, changeProfileColumns } = store;
 
 const mixin = useCounterMixin();
-const { date2Thai, success, dateToISO, messageError, showLoader, hideLoader } =
-  mixin;
+const {
+  convertDateDisplay,
+  convertDate,
+  date2Thai,
+  success,
+  dateToISO,
+  messageError,
+  showLoader,
+  hideLoader,
+} = mixin;
 const route = useRoute();
 const id = ref<string>("");
 const dateStart = ref<Date>(new Date());
@@ -371,6 +413,61 @@ const profileId = ref<string>(
 const rows = ref<RequestItemsObject[]>([]);
 const filter = ref<string>(""); //search data table
 const visibleColumns = ref<String[]>([]);
+
+console.log(dateStart.value);
+const inputDateStart = ref<string>(convertDateDisplay(dateStart.value));
+const inputDateEnd = ref<string>(convertDateDisplay(dateEnd.value));
+const inputRefCommandDate = ref<string>("");
+
+const dayCheckedStart = ref<boolean>(false);
+const dayCheckedEnd = ref<boolean>(false);
+/** ตรวจเวลา */
+watch(
+  () => inputDateStart.value,
+  (value: string) => {
+    if (value.length === 10) {
+      const dateVal = convertDate(value);
+      if (dateVal.isValid) {
+        dayCheckedStart.value = false;
+        dateStart.value = new Date(dateVal.value);
+      } else {
+        dayCheckedStart.value = true;
+        inputDateStart.value = "";
+      }
+    }
+  }
+);
+watch(
+  () => inputRefCommandDate.value,
+  (value: string) => {
+    if (value.length === 10) {
+      const dateVal = convertDate(value);
+      if (dateVal.isValid) {
+        dayCheckedEnd.value = false;
+        refCommandDate.value = new Date(dateVal.value);
+      } else {
+        dayCheckedEnd.value = true;
+        inputRefCommandDate.value = "";
+      }
+    }
+  }
+);
+watch(
+  () => inputDateEnd.value,
+  (value: string) => {
+    if (value.length === 10) {
+      const dateVal = convertDate(value);
+      if (dateVal.isValid) {
+        dayCheckedEnd.value = false;
+        dateEnd.value = new Date(dateVal.value);
+      } else {
+        dayCheckedEnd.value = true;
+        inputDateEnd.value = "";
+      }
+    }
+  }
+);
+
 profileData.work.columns.length == 0
   ? (visibleColumns.value = [
       "dateStart",
@@ -804,6 +901,12 @@ const selectData = async (props: DataProps) => {
   refCommandNo.value = props.row.refCommandNo;
   refCommandDate.value = props.row.refCommandDate;
   id.value = props.row.id;
+
+  inputDateStart.value = convertDateDisplay(dateStart.value);
+  inputDateEnd.value = convertDateDisplay(dateEnd.value);
+  inputRefCommandDate.value = refCommandDate.value
+    ? convertDateDisplay(refCommandDate.value)
+    : "";
   await checkRowPage();
 };
 
@@ -820,6 +923,10 @@ const addData = () => {
   reference.value = "";
   refCommandNo.value = "";
   refCommandDate.value = null;
+
+  inputDateStart.value = convertDateDisplay(dateStart.value);
+  inputDateEnd.value = convertDateDisplay(dateEnd.value);
+  inputRefCommandDate.value = "";
 };
 
 /**