วันที่ใหม่

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

@@ -68,7 +68,19 @@
         <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="yearInput"
+                label="ปี ที่ยื่นขอพระราชทานเครื่องราชฯ"
+                mask="####"
+                dense
+                hide-bottom-space
+                :error="yearInputCheck"
+                error-message="กรุณากรอก ปี ที่ยื่นขอพระราชทานเครื่องราชฯ"
+              />
               <datepicker
+                v-else
                 menu-class-name="modalfix"
                 :readonly="!edit"
                 v-model="year"
@@ -116,7 +128,19 @@
               </datepicker>
             </div>
             <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                v-if="edit"
+                outlined
+                v-model="receiveDateInput"
+                label="วัน/เดือน/ปี ที่วันที่ได้รับ"
+                mask="##/##/####"
+                dense
+                hide-bottom-space
+                :error="receiveDateCheck"
+                error-message="กรุณากรอก วัน/เดือน/ปี ที่วันที่ได้รับ"
+              />
               <datepicker
+                v-else
                 menu-class-name="modalfix"
                 :readonly="!edit"
                 v-model="receiveDate"
@@ -137,7 +161,7 @@
                     dense
                     lazy-rules
                     :borderless="!edit"
-                    :model-value="date2Thai(receiveDate)"
+                    :model-value="date2Thai(receiveDate as Date)"
                     :rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่ได้รับ'}`]"
                     hide-bottom-space
                     :label="`${'วันที่ได้รับ'}`"
@@ -288,7 +312,16 @@
               <!-- :rules="[(val:string) => !!val || `${'กรุณากรอกหน้า'}`]" -->
             </div>
             <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                v-if="edit"
+                outlined
+                v-model="dateAnnounceInput"
+                label="วัน/เดือน/ปี ที่ออกใบอนุญาต"
+                mask="##/##/####"
+                dense
+              />
               <datepicker
+                v-else
                 menu-class-name="modalfix"
                 :readonly="!edit"
                 v-model="dateAnnounce"
@@ -309,7 +342,7 @@
                     dense
                     lazy-rules
                     :borderless="!edit"
-                    :model-value="dateAnnounce ? date2Thai(dateAnnounce as Date) : null"
+                    :model-value="date2Thai(dateAnnounce as Date)"
                     hide-bottom-space
                     :label="`${'วันที่ประกาศในราชกิจจาฯ'}`"
                   >
@@ -364,7 +397,16 @@
               </q-input>
             </div>
             <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                v-if="edit"
+                outlined
+                v-model="refCommandDateInput"
+                label="วัน/เดือน/ปี เอกสารอ้างอิง (ลงวันที่)"
+                mask="##/##/####"
+                dense
+              />
               <datepicker
+                v-else
                 menu-class-name="modalfix"
                 :readonly="!edit"
                 v-model="refCommandDate"
@@ -501,13 +543,29 @@ const props = defineProps({
   },
 });
 
+const dateAnnounceInput = ref<string>("");
+const refCommandDateInput = ref<string>("");
+const receiveDateInput = ref<string>("");
+const yearInput = ref<string>("");
+
+const receiveDateCheck = ref<boolean>(false);
+const yearInputCheck = ref<boolean>(false);
+
 const $q = useQuasar();
 const store = useProfileDataStore();
 const { profileData, changeProfileColumns } = store;
 
 const mixin = useCounterMixin();
-const { date2Thai, success, dateToISO, messageError, showLoader, hideLoader } =
-  mixin;
+const {
+  date2Thai,
+  success,
+  dateToISO,
+  messageError,
+  showLoader,
+  hideLoader,
+  convertDate,
+  convertDateDisplay,
+} = mixin;
 const route = useRoute();
 const id = ref<string>("");
 const insigniaId = ref<string>("");
@@ -525,7 +583,7 @@ const volumeNo = ref<string>();
 const volume = ref<string>();
 const section = ref<string>();
 const page = ref<string>();
-const receiveDate = ref<Date>(new Date());
+const receiveDate = ref<Date | string | null>(new Date());
 const dateAnnounce = ref<Date | null | string>(null);
 const refCommandNo = ref<string>();
 const refCommandDate = ref<Date | null | string>(new Date());
@@ -962,6 +1020,7 @@ const fetchData = async () => {
       .get(config.API.profileInsignId(profileId.value))
       .then((res) => {
         let data = res.data.result;
+        console.log(data);
         rows.value = [];
         data.map((e: any) => {
           rows.value.push({
@@ -1034,6 +1093,16 @@ const getData = () => {
   refCommandNo.value = row.refCommandNo;
   refCommandDate.value = row.refCommandDate;
   id.value = row.id;
+  yearInput.value = (Number(row.year) + 543).toLocaleString();
+  receiveDateInput.value = row.receiveDate
+    ? convertDateDisplay(row.receiveDate)
+    : "";
+  dateAnnounceInput.value = row.dateAnnounce
+    ? convertDateDisplay(row.dateAnnounce)
+    : "";
+  refCommandDateInput.value = row.refCommandDate
+    ? convertDateDisplay(row.refCommandDate)
+    : "";
 };
 
 /**
@@ -1074,10 +1143,14 @@ const clickAdd = async () => {
 const clickSave = async () => {
   myForm.value.validate().then(async (result: boolean) => {
     if (result) {
-      if (modalEdit.value) {
-        await editData();
+      if (receiveDateInput.value === "") {
+        receiveDateCheck.value = true;
       } else {
-        await saveData();
+        if (modalEdit.value) {
+          await editData();
+        } else {
+          await saveData();
+        }
       }
     }
   });
@@ -1101,7 +1174,7 @@ const saveData = async () => {
         volume: volume.value,
         section: section.value,
         page: page.value,
-        receiveDate: dateToISO(receiveDate.value),
+        receiveDate: dateToISO(receiveDate.value as Date),
         dateAnnounce: dateAnnounce.value
           ? dateToISO(dateAnnounce.value as Date)
           : null,
@@ -1141,7 +1214,7 @@ const editData = async () => {
       volume: volume.value,
       section: section.value,
       page: page.value,
-      receiveDate: dateToISO(receiveDate.value),
+      receiveDate: dateToISO(receiveDate.value as Date),
       dateAnnounce: dateAnnounce.value
         ? dateToISO(dateAnnounce.value as Date)
         : null,
@@ -1222,6 +1295,7 @@ const clickClose = async () => {
  * @param props ค่า props ใน row ที่เลือก
  */
 const selectData = async (props: DataProps) => {
+  console.log(props.row);
   modalEdit.value = true;
   modal.value = true;
   edit.value = false;
@@ -1237,12 +1311,21 @@ const selectData = async (props: DataProps) => {
   section.value = props.row.section;
   page.value = props.row.page;
   receiveDate.value = props.row.receiveDate;
-  dateAnnounce.value =
-    props.row.dateAnnounce == "-" ? null : props.row.dateAnnounce;
+  dateAnnounce.value = props.row.dateAnnounce;
   refCommandNo.value = props.row.refCommandNo;
   refCommandDate.value =
     props.row.refCommandDate == "-" ? null : props.row.refCommandDate;
   id.value = props.row.id;
+
+  console.log(dateAnnounce.value);
+  yearInput.value = (Number(props.row.year) + 543).toLocaleString();
+  receiveDateInput.value = convertDateDisplay(props.row.receiveDate);
+  dateAnnounceInput.value = props.row.dateAnnounce
+    ? convertDateDisplay(props.row.dateAnnounce as Date)
+    : "";
+  refCommandDateInput.value = props.row.refCommandDate
+    ? convertDateDisplay(props.row.refCommandDate as Date)
+    : "";
   await checkRowPage();
 };
 
@@ -1266,6 +1349,11 @@ const addData = () => {
   dateAnnounce.value = null;
   refCommandNo.value = "";
   refCommandDate.value = null;
+
+  receiveDateInput.value = "";
+  dateAnnounceInput.value = "";
+  refCommandDateInput.value = "";
+  yearInput.value = ''
 };
 
 /**
@@ -1364,6 +1452,53 @@ const getClass = (val: boolean) => {
   };
 };
 const resetFilter = () => {};
+
+watch(
+  () => dateAnnounceInput.value,
+  (value: string) => {
+    if (value.length === 10) {
+      const dateVal = convertDate(value);
+      dateAnnounce.value = dateVal.value;
+      console.log(dateAnnounce.value);
+    }
+  }
+);
+watch(
+  () => refCommandDateInput.value,
+  (value: string) => {
+    if (value.length === 10) {
+      const dateVal = convertDate(value);
+      refCommandDate.value = dateVal.value;
+    }
+  }
+);
+
+watch(
+  () => receiveDateInput.value,
+  (value: string) => {
+    if (value.length === 10) {
+      const dateVal = convertDate(value);
+      if (dateVal.isValid) {
+        receiveDateCheck.value = false;
+        receiveDate.value = dateVal.value;
+      } else {
+        receiveDateCheck.value = true;
+        receiveDateInput.value = "";
+      }
+    }
+  }
+);
+
+watch(
+  () => yearInput.value,
+  (value: string) => {
+    if (value.length === 4) {
+      const dateVal = Number(value) - 543;
+      yearInputCheck.value = false;
+      year.value = dateVal;
+    }
+  }
+);
 </script>
 <style lang="scss">
 .modalfix {