เพิ่ม field ในระบบบรรจุ วุฒิการศึกษา พ้นราชการทหารเมื่อ ในส่วนรายละเอียด

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

@@ -71,6 +71,8 @@ const Otherdata = ref<OtherdataInterface>({
   lastname: "",
 });
 const avatar = ref<string>("");
+const educationOld = ref<string>("");
+const militaryDate = ref<Date | null>(null);
 
 //-----(fetch data by id)-----//
 const fecthOther = async () => {
@@ -106,6 +108,8 @@ const fecthOther = async () => {
       date.value =
         data.positionDate !== null ? new Date(data.positionDate) : null;
       reason.value = data.reason ?? "";
+      educationOld.value = data.educationOld ?? "-";
+      militaryDate.value = data.militaryDate ?? null;
     })
     .catch((e) => {
       messageError($q, e);
@@ -146,6 +150,8 @@ const saveOther = async () => {
     positionLevelOld: positionLevelOld.value,
     positionNumberOld: posNo.value,
     amountOld: Number(salary.value),
+    educationOld: educationOld.value,
+    militaryDate: militaryDate.value,
   };
   await http
     .put(config.API.otherByid(paramsId.toString()), data)
@@ -291,6 +297,27 @@ onMounted(async () => {
     <q-form ref="myForm">
       <div class="row col-12 q-pa-md">
         <div class="col-12 row bg-white q-col-gutter-md">
+          <div class="row col-12 q-pa-md">
+            <div class="col-12">
+              <div class="text-weight-bold">วุฒิการศึกษา</div>
+            </div>
+            <div class="col-12">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="educationOld"
+                :rules="[(val) => !!val || `${'กรุณากรอกวุฒิการศึกษา'}`]"
+                hide-bottom-space
+                :label="`${'วุฒิการศึกษา'}`"
+                type="text"
+              />
+            </div>
+          </div>
+
           <div class="col-xs-12 row items-center">
             <div class="col-12">
               <div class="text-weight-bold">ตำแหน่งและหน่วยงานเดิม</div>
@@ -416,6 +443,52 @@ onMounted(async () => {
               </datepicker>
             </div>
           </div>
+          <div class="col-xs-6 col-sm-6 row items-center">
+            <div class="col-12">
+              <datepicker
+                menu-class-name="modalfix"
+                :readonly="!edit"
+                v-model="militaryDate"
+                :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="
+                      militaryDate !== null ? date2Thai(militaryDate) : null
+                    "
+                    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-12">
             <q-input
               :class="getClass(edit)"

src/modules/05_placement/interface/response/OhterMain.ts

@@ -96,6 +96,7 @@ interface resApiData {
       positionDate: Date;
       avatar: string;
       commandType: string;
+      militaryDate: Date
     };
   };
 }