no message

src/modules/05_placement/components/Other/Detail.vue

@@ -73,6 +73,7 @@ const Otherdata = ref<OtherdataInterface>({
 const avatar = ref<string>("");
 const educationOld = ref<string>("");
 const militaryDate = ref<Date | null>(null);
+const leaveDate = ref<Date | null>(null);
 
 //-----(fetch data by id)-----//
 const fecthOther = async () => {
@@ -110,6 +111,7 @@ const fecthOther = async () => {
       reason.value = data.reason ?? "";
       educationOld.value = data.educationOld ?? "-";
       militaryDate.value = data.militaryDate ?? null;
+      leaveDate.value = data.leaveDate ?? null;
     })
     .catch((e) => {
       messageError($q, e);
@@ -152,6 +154,7 @@ const saveOther = async () => {
     amountOld: Number(salary.value),
     educationOld: educationOld.value,
     militaryDate: militaryDate.value,
+    leaveDate: leaveDate.value,
   };
   await http
     .put(config.API.otherByid(paramsId.toString()), data)
@@ -398,7 +401,7 @@ onMounted(async () => {
             </div>
           </div>
           <div class="col-12"><q-separator /></div>
-          <div class="col-xs-6 col-sm-6 row items-center">
+          <div class="col-xs-6 col-sm-4 row items-center">
             <div class="col-12">
               <datepicker
                 menu-class-name="modalfix"
@@ -443,7 +446,56 @@ onMounted(async () => {
               </datepicker>
             </div>
           </div>
-          <div class="col-xs-6 col-sm-6 row items-center">
+          <div class="col-xs-6 col-sm-4 row items-center">
+            <div class="col-12">
+              <datepicker
+                menu-class-name="modalfix"
+                :readonly="!edit"
+                v-model="leaveDate"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                week-start="0"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    :class="getClass(edit)"
+                    :outlined="edit"
+                    dense
+                    lazy-rules
+                    :readonly="!edit"
+                    :borderless="!edit"
+                    :model-value="
+                      leaveDate !== null ? date2Thai(leaveDate) : null
+                    "
+                    :rules="[
+                      (val) => !!val || `${'กรุณาเลือกวันออกจากราชการเมื่อ'}`,
+                    ]"
+                    hide-bottom-space
+                    :label="`${'ออกจากราชการเมื่อ'}`"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        :style="
+                          edit
+                            ? 'color: var(--q-primary)'
+                            : 'color: var(--q-grey)'
+                        "
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+          </div>
+          <div class="col-xs-6 col-sm-4 row items-center">
             <div class="col-12">
               <datepicker
                 menu-class-name="modalfix"