ปรับ text และ validate บรรจุ

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

@@ -1,11 +1,15 @@
-divdivdiv<script setup lang="ts">
+divdivdiv
+<script setup lang="ts">
 import { onMounted, ref } from "vue";
 import { useQuasar } from "quasar";
 import { useRoute, useRouter } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
 import CurrencyInput from "@/components/CurruncyInput.vue";
 import type { ResponseTitle } from "@/modules/05_placement/interface/response/Receive";
-import type { appointmentData,ResponseData } from "@/modules/05_placement/interface/response/AppointMent";
+import type {
+  appointmentData,
+  ResponseData,
+} from "@/modules/05_placement/interface/response/AppointMent";
 import type { QForm } from "quasar";
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -16,10 +20,10 @@ const router = useRouter();
 const mixin = useCounterMixin();
 
 const appointment = ref<appointmentData>({
-citizenId:"",
+  citizenId: "",
-prefixId:"",
+  prefixId: "",
-firstname:"",
+  firstname: "",
-lastname:""
+  lastname: "",
 });
 const myForm = ref<QForm | null>(null);
 const edit = ref<boolean>(false);
@@ -52,7 +56,6 @@ const title = ref<ResponseTitle>({
   positionTypeOld: "",
 });
 
-
 //เรียกข้อมูลตาม id
 const fecthappointmentByid = async () => {
   showLoader();
@@ -62,12 +65,14 @@ const fecthappointmentByid = async () => {
       const data = res.data.result;
       appointment.value = data;
       profileId.value = data.profileId;
-      title.value.fullname = `${data.prefix}${data.firstname ?? "-"} ${data.lastname ?? "-"}`;
+      title.value.fullname = `${data.prefix}${data.firstname ?? "-"} ${
+        data.lastname ?? "-"
+      }`;
       title.value.organizationPositionOld = data.organizationPositionOld ?? "-";
       title.value.positionLevelOld = data.positionLevelOld ?? "-";
       title.value.positionTypeOld = data.positionTypeOld ?? "-";
       (status.value = data.status),
-      educationOld.value = data.educationOld ?? "-";
+        (educationOld.value = data.educationOld ?? "-");
       organizationPositionOld.value = data.organizationPositionOld;
       positionTypeOld.value = data.positionTypeOld;
       positionLevelOld.value = data.positionLevelOld;
@@ -131,10 +136,10 @@ const putAppointment = async () => {
     });
 };
 const cancel = () => {
-  edit.value = false
+  edit.value = false;
-  fecthappointmentByid()
+  fecthappointmentByid();
-  myForm.value?.resetValidation()
+  myForm.value?.resetValidation();
-}
+};
 const getClass = (val: boolean) => {
   return {
     "full-width inputgreen cursor-pointer": val,
@@ -148,8 +153,16 @@ onMounted(async () => {
 </script>
 <template>
   <div class="toptitle text-dark col-12 row items-center">
-    <q-btn icon="mdi-arrow-left" unelevated round dense flat color="primary" 
+    <q-btn
-      class="q-mr-sm" @click="router.push(`/appoint-promote`)" />
+      icon="mdi-arrow-left"
+      unelevated
+      round
+      dense
+      flat
+      color="primary"
+      class="q-mr-sm"
+      @click="router.push(`/appoint-promote`)"
+    />
     รายละเอียดการแต่งตั้ง-เลื่อน {{ title.fullname }}
   </div>
   <q-card bordered class="row col-12 text-dark">
@@ -158,8 +171,15 @@ onMounted(async () => {
         {{ title.fullname }}
       </div>
       <q-space />
-      <q-btn outline color="blue" dense icon-right="mdi-open-in-new" class="q-px-sm"
+      <q-btn
-        label="ดูข้อมูลทะเบียนประวัติ" @click="router.push(`/registry/${profileId}`)" />
+        outline
+        color="blue"
+        dense
+        icon-right="mdi-open-in-new"
+        class="q-px-sm"
+        label="ดูข้อมูลทะเบียนประวัติ"
+        @click="router.push(`/registry/${profileId}`)"
+      />
     </div>
     <div class="col-12"><q-separator /></div>
     <div class="row col-12 q-pa-md">
@@ -204,14 +224,36 @@ onMounted(async () => {
       <q-space />
       <div v-if="status !== 'DONE' && status !== 'REPORT'">
         <div class="q-gutter-sm" v-if="!edit">
-          <q-btn outline color="primary" dense icon-right="mdi-file-edit-outline" 
+          <q-btn
-          class="q-px-sm" label="แก้ไข" style="width: 80px" @click="edit = !edit" />
+            outline
+            color="primary"
+            dense
+            icon-right="mdi-file-edit-outline"
+            class="q-px-sm"
+            label="แก้ไข"
+            style="width: 80px"
+            @click="edit = !edit"
+          />
         </div>
         <div class="q-gutter-sm" v-else>
-          <q-btn outline color="public" dense class="q-px-sm" label="บันทึก"
+          <q-btn
-            style="width: 80px" @click="clickSave" />
+            outline
-          <q-btn outline color="red" dense class="q-px-sm" label="ยกเลิก" style="width: 80px"
+            color="public"
-            @click="cancel()" />
+            dense
+            class="q-px-sm"
+            label="บันทึก"
+            style="width: 80px"
+            @click="clickSave"
+          />
+          <q-btn
+            outline
+            color="red"
+            dense
+            class="q-px-sm"
+            label="ยกเลิก"
+            style="width: 80px"
+            @click="cancel()"
+          />
         </div>
       </div>
     </div>
@@ -219,74 +261,146 @@ onMounted(async () => {
     <q-form ref="myForm">
       <div class="row col-12 q-pa-md">
         <div class="col-12">
-          <div class="text-weight-bold text-grey">วุฒิการศึกษา</div>
+          <div class="text-weight-bold">วุฒิการศึกษา</div>
         </div>
         <div class="col-12">
-          <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit" 
+          <q-input
-          :borderless="!edit" v-model="educationOld" :rules="[(val) => !!val || `${'กรุณากรอกวุฒิการศึกษา'}`]" hide-bottom-space
+            :class="getClass(edit)"
-          :label="`${'วุฒิการศึกษา'}`" type="text" />
+            :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="row col-12 q-pa-md">
         <div class="col-12 row bg-white q-col-gutter-md">
           <div class="col-xs-12 row q-pa-md items-center">
             <div class="col-12">
-              <div class="text-weight-bold text-grey">
+              <div class="text-weight-bold">ตำแหน่งและหน่วยงานเดิม</div>
-                ตำแหน่งและหน่วยงานเดิม
-              </div>
             </div>
 
             <div class="col-12">
-              <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit"
+              <q-input
-                :borderless="!edit" v-model="organizationPositionOld" :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่ง/สังกัด'}`]"
+                :class="getClass(edit)"
-                hide-bottom-space :label="`${'ตำแหน่ง/สังกัด'}`" type="textarea" />
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="organizationPositionOld"
+                :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่ง/สังกัด'}`]"
+                hide-bottom-space
+                :label="`${'ตำแหน่ง/สังกัด'}`"
+                type="textarea"
+              />
             </div>
           </div>
 
           <div class="col-xs-6 col-sm-3 row">
             <div class="col-12">
-              <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit"
+              <q-input
-                :borderless="!edit" v-model="positionTypeOld" :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่งประเภท'}`]"
+                :class="getClass(edit)"
-                hide-bottom-space :label="`${'ตำแหน่งประเภท'}`" />
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="positionTypeOld"
+                :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่งประเภท'}`]"
+                hide-bottom-space
+                :label="`${'ตำแหน่งประเภท'}`"
+              />
             </div>
           </div>
           <div class="col-xs-6 col-sm-3 row">
             <div class="col-12">
-              <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit"
+              <q-input
-                :borderless="!edit" v-model="positionLevelOld" :rules="[(val) => !!val || `${'กรุณากรอกระดับ'}`]"
+                :class="getClass(edit)"
-                hide-bottom-space :label="`${'ระดับ'}`" />
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="positionLevelOld"
+                :rules="[(val) => !!val || `${'กรุณากรอกระดับ'}`]"
+                hide-bottom-space
+                :label="`${'ระดับ'}`"
+              />
             </div>
           </div>
           <div class="col-xs-6 col-sm-3 row">
             <div class="col-12">
-              <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit"
+              <q-input
-                :borderless="!edit" v-model="posNo" :rules="[(val) => !!val || `${'กรุณากรอกเลขที่'}`]"
+                :class="getClass(edit)"
-                hide-bottom-space :label="`${'เลขที่'}`" />
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="posNo"
+                :rules="[(val) => !!val || `${'กรุณากรอกเลขที่'}`]"
+                hide-bottom-space
+                :label="`${'เลขที่'}`"
+              />
             </div>
           </div>
           <div class="col-xs-6 col-sm-3 row">
             <div class="col-12">
-              <CurrencyInput v-model="salary" label="เงินเดือน" :edit="edit" 
+              <CurrencyInput
-                :rules="[(val:number) => !!val || `${'กรุณากรอกเงินเดือน'}`]" />
+                v-model="salary"
+                label="เงินเดือน"
+                :edit="edit"
+                :rules="[(val:number) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
+                lazy-rules
+              />
             </div>
           </div>
           <div class="col-12"><q-separator /></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="date" :locale="'th'"
+              <datepicker
-                autoApply :enableTimePicker="false" week-start="0" >
+                menu-class-name="modalfix"
+                :readonly="!edit"
+                v-model="date"
+                :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 :borderless="!edit"
+                  <q-input
-                    :readonly="!edit" :model-value="date !== null ? date2Thai(date) : null" 
+                    :class="getClass(edit)"
+                    :outlined="edit"
+                    dense
+                    lazy-rules
+                    :borderless="!edit"
+                    :readonly="!edit"
+                    :model-value="date !== null ? date2Thai(date) : null"
                     :rules="[(val) => !!val || `${'กรุณาเลือกตั้งแต่วัน'}`]"
-                    hide-bottom-space :label="`${'ดำรงตำแหน่งในระดับปัจจุบันเมื่อ'}`" >
+                    hide-bottom-space
+                    :label="`${'ดำรงตำแหน่งในระดับปัจจุบันเมื่อ'}`"
+                  >
                     <template v-slot:prepend>
-                      <q-icon name="event" class="cursor-pointer"
+                      <q-icon
-                        :style="edit? 'color: var(--q-primary)': 'color: var(--q-grey)' ">
+                        name="event"
+                        class="cursor-pointer"
+                        :style="
+                          edit
+                            ? 'color: var(--q-primary)'
+                            : 'color: var(--q-grey)'
+                        "
+                      >
                       </q-icon>
                     </template>
                   </q-input>
@@ -295,9 +409,19 @@ onMounted(async () => {
             </div>
           </div>
           <div class="col-12">
-            <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit"
+            <q-input
-              :borderless="!edit" v-model="reason" :rules="[(val) => !!val || `${'กรุณากรอกหมายเหตุ '}`]"
+              :class="getClass(edit)"
-              hide-bottom-space :label="`${'หมายเหตุ '}`" type="textarea" />
+              :outlined="edit"
+              dense
+              lazy-rules
+              :readonly="!edit"
+              :borderless="!edit"
+              v-model="reason"
+             
+              hide-bottom-space
+              :label="`${'หมายเหตุ '}`"
+              type="textarea"
+            />
           </div>
         </div>
       </div>

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

@@ -6,7 +6,10 @@ import { useCounterMixin } from "@/stores/mixin";
 
 import type { ResponseTitle } from "@/modules/05_placement/interface/response/Receive";
 import type { ResponseDataDetail } from "@/modules/05_placement/interface/response/Transfer";
-import type { OtherdataInterface,resApiData } from "@/modules/05_placement/interface/response/OhterMain";
+import type {
+  OtherdataInterface,
+  resApiData,
+} from "@/modules/05_placement/interface/response/OhterMain";
 import type { QForm } from "quasar";
 
 import http from "@/plugins/http";
@@ -76,7 +79,7 @@ const fecthOther = async () => {
     .get(config.API.otherByid(paramsId.toString()))
     .then((res: resApiData) => {
       const data = res.data.result;
-      Otherdata.value = data
+      Otherdata.value = data;
       avatar.value = data.avatar ?? "";
       title.value.fullname = `${data.firstname ?? "-"} ${data.lastname ?? "-"}`;
       title.value.organizationPositionOld = data.organizationPositionOld ?? "-";
@@ -85,19 +88,23 @@ const fecthOther = async () => {
       responseData.value.profileId = data.profileId;
       responseData.value.createdAt = data.createdAt;
       responseData.value.id = data.id ?? "";
-      responseData.value.organizationPositionOld = data.organizationPositionOld ?? "";
+      responseData.value.organizationPositionOld =
+        data.organizationPositionOld ?? "";
       responseData.value.positionLevelOld = data.positionLevelOld ?? "";
       responseData.value.positionNumberOld = data.positionNumberOld ?? "";
       responseData.value.positionTypeOld = data.positionTypeOld ?? "";
       responseData.value.reason = data.reason ?? "";
       responseData.value.status = data.status ?? "";
-      responseData.value.fullname = `${data.prefix ?? "-"}${data.firstname ?? "-"} ${data.lastname ?? "-"}`;
+      responseData.value.fullname = `${data.prefix ?? "-"}${
+        data.firstname ?? "-"
+      } ${data.lastname ?? "-"}`;
       organizationPositionOld.value = data.organizationPositionOld ?? "";
       positionTypeOld.value = data.positionTypeOld ?? "";
       positionLevelOld.value = data.positionLevelOld ?? "";
       posNo.value = data.positionNumberOld ?? "";
       salary.value = data.amountOld ?? "";
-      date.value = data.positionDate !== null ? new Date(data.positionDate) : null;
+      date.value =
+        data.positionDate !== null ? new Date(data.positionDate) : null;
       reason.value = data.reason ?? "";
     })
     .catch((e) => {
@@ -124,7 +131,7 @@ const clickEdit = async () => {
     });
   }
 };
- 
+
 //-----(update)-----//
 const saveOther = async () => {
   let data = {
@@ -155,7 +162,7 @@ const saveOther = async () => {
 const cancel = () => {
   edit.value = false;
   fecthOther();
-  myForm.value?.resetValidation()
+  myForm.value?.resetValidation();
 };
 const getClass = (val: boolean) => {
   return {
@@ -172,8 +179,16 @@ onMounted(async () => {
 </script>
 <template>
   <div class="toptitle text-dark col-12 row items-center">
-    <q-btn icon="mdi-arrow-left" unelevated round dense flat 
+    <q-btn
-    color="primary" class="q-mr-sm" @click="router.push(`/other`)" />
+      icon="mdi-arrow-left"
+      unelevated
+      round
+      dense
+      flat
+      color="primary"
+      class="q-mr-sm"
+      @click="router.push(`/other`)"
+    />
     รายละเอียดรายการอื่นๆ {{ responseData.fullname }}
   </div>
   <q-card bordered class="row col-12 text-dark">
@@ -182,8 +197,15 @@ onMounted(async () => {
         {{ responseData.fullname }}
       </div>
       <q-space />
-      <q-btn outline color="blue" dense icon-right="mdi-open-in-new" class="q-px-sm" 
+      <q-btn
-      label="ดูข้อมูลทะเบียนประวัติ" @click="router.push(`/registry/${responseData.profileId}`)" />
+        outline
+        color="blue"
+        dense
+        icon-right="mdi-open-in-new"
+        class="q-px-sm"
+        label="ดูข้อมูลทะเบียนประวัติ"
+        @click="router.push(`/registry/${responseData.profileId}`)"
+      />
     </div>
     <div class="col-12"><q-separator /></div>
     <div class="row col-12 q-pa-md">
@@ -232,14 +254,36 @@ onMounted(async () => {
         "
       >
         <div class="q-gutter-sm" v-if="!edit">
-          <q-btn outline color="primary" dense icon-right="mdi-file-edit-outline"
+          <q-btn
-            class="q-px-sm" label="แก้ไข" style="width: 80px" @click="edit = !edit" />
+            outline
+            color="primary"
+            dense
+            icon-right="mdi-file-edit-outline"
+            class="q-px-sm"
+            label="แก้ไข"
+            style="width: 80px"
+            @click="edit = !edit"
+          />
         </div>
         <div class="q-gutter-sm" v-else>
-          <q-btn outline color="public" dense class="q-px-sm" label="บันทึก"
+          <q-btn
-            style="width: 80px" @click="clickEdit" />
+            outline
-          <q-btn outline color="red" dense class="q-px-sm" label="ยกเลิก"
+            color="public"
-            style="width: 80px" @click="cancel()" />
+            dense
+            class="q-px-sm"
+            label="บันทึก"
+            style="width: 80px"
+            @click="clickEdit"
+          />
+          <q-btn
+            outline
+            color="red"
+            dense
+            class="q-px-sm"
+            label="ยกเลิก"
+            style="width: 80px"
+            @click="cancel()"
+          />
         </div>
       </div>
     </div>
@@ -249,60 +293,122 @@ onMounted(async () => {
         <div class="col-12 row bg-white q-col-gutter-md">
           <div class="col-xs-12 row items-center">
             <div class="col-12">
-              <div class="text-weight-bold text-grey">
+              <div class="text-weight-bold">ตำแหน่งและหน่วยงานเดิม</div>
-                ตำแหน่งและหน่วยงานเดิม
-              </div>
             </div>
             <div class="col-12">
-              <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit"
+              <q-input
-                :borderless="!edit" v-model="organizationPositionOld" :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่ง/สังกัด'}`]"
+                :class="getClass(edit)"
-                hide-bottom-space :label="`${'ตำแหน่ง/สังกัด'}`" type="textarea" />
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="organizationPositionOld"
+                :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่ง/สังกัด'}`]"
+                hide-bottom-space
+                :label="`${'ตำแหน่ง/สังกัด'}`"
+                type="textarea"
+              />
             </div>
           </div>
           <div class="col-xs-6 col-sm-3 row">
             <div class="col-12">
-              <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit"
+              <q-input
-                :borderless="!edit" v-model="positionTypeOld" :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่งประเภท'}`]"
+                :class="getClass(edit)"
-                hide-bottom-space :label="`${'ตำแหน่งประเภท'}`" />
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="positionTypeOld"
+                :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่งประเภท'}`]"
+                hide-bottom-space
+                :label="`${'ตำแหน่งประเภท'}`"
+              />
             </div>
           </div>
           <div class="col-xs-6 col-sm-3 row">
             <div class="col-12">
-              <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit"
+              <q-input
-                :borderless="!edit" v-model="positionLevelOld" :rules="[(val) => !!val || `${'กรุณากรอกระดับ'}`]"
+                :class="getClass(edit)"
-                hide-bottom-space :label="`${'ระดับ'}`" />
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="positionLevelOld"
+                :rules="[(val) => !!val || `${'กรุณากรอกระดับ'}`]"
+                hide-bottom-space
+                :label="`${'ระดับ'}`"
+              />
             </div>
           </div>
           <div class="col-xs-6 col-sm-3 row">
             <div class="col-12">
-              <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit"
+              <q-input
-                :borderless="!edit" v-model="posNo" :rules="[(val) => !!val || `${'กรุณากรอกเลขที่'}`]"
+                :class="getClass(edit)"
-                hide-bottom-space :label="`${'เลขที่'}`" />
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="posNo"
+                :rules="[(val) => !!val || `${'กรุณากรอกเลขที่'}`]"
+                hide-bottom-space
+                :label="`${'เลขที่'}`"
+              />
             </div>
           </div>
           <div class="col-xs-6 col-sm-3 row">
             <div class="col-12">
-              <CurruncyInput v-model="salary" label="เงินเดือน" :edit="edit"
+              <CurruncyInput
-                :rules="[(val:number) => !!val || `${'กรุณากรอกเงินเดือน'}`]" />
+                v-model="salary"
+                label="เงินเดือน"
+                :edit="edit"
+                :rules="[(val:number) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
+                lazy-rules
+              />
             </div>
           </div>
           <div class="col-12"><q-separator /></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="date" :locale="'th'"
+              <datepicker
-                autoApply :enableTimePicker="false" week-start="0" >
+                menu-class-name="modalfix"
+                :readonly="!edit"
+                v-model="date"
+                :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"
+                  <q-input
-                    :borderless="!edit" :model-value="date !== null ? date2Thai(date) : null"
+                    :class="getClass(edit)"
-                    :rules="[(val) => !!val || `${'กรุณาเลือกตั้งแต่วัน'}`]"  hide-bottom-space
+                    :outlined="edit"
-                    :label="`${'ตั้งแต่วัน'}`" >
+                    dense
+                    lazy-rules
+                    :readonly="!edit"
+                    :borderless="!edit"
+                    :model-value="date !== null ? date2Thai(date) : null"
+                    :rules="[(val) => !!val || `${'กรุณาเลือกตั้งแต่วัน'}`]"
+                    hide-bottom-space
+                    :label="`${'ตั้งแต่วัน'}`"
+                  >
                     <template v-slot:prepend>
-                      <q-icon name="event" class="cursor-pointer"
+                      <q-icon
-                        :style=" edit ? 'color: var(--q-primary)' : 'color: var(--q-grey)' " >
+                        name="event"
+                        class="cursor-pointer"
+                        :style="
+                          edit
+                            ? 'color: var(--q-primary)'
+                            : 'color: var(--q-grey)'
+                        "
+                      >
                       </q-icon>
                     </template>
                   </q-input>
@@ -311,9 +417,18 @@ onMounted(async () => {
             </div>
           </div>
           <div class="col-12">
-            <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit"
+            <q-input
-              :borderless="!edit" v-model="reason" :rules="[(val) => !!val || `${'กรุณากรอกหมายเหตุ '}`]"
+              :class="getClass(edit)"
-              hide-bottom-space :label="`${'หมายเหตุ '}`" type="textarea" />
+              :outlined="edit"
+              dense
+              lazy-rules
+              :readonly="!edit"
+              :borderless="!edit"
+              v-model="reason"
+              hide-bottom-space
+              :label="`${'หมายเหตุ '}`"
+              type="textarea"
+            />
           </div>
         </div>
       </div>

src/modules/05_placement/components/Receive/receiveDetail2.vue

@@ -901,7 +901,7 @@ onMounted(async () => {
               />
             </div>
             <div class="col-xs-12">
-              <div class="text-weight-bold text-grey">
+              <div class="text-weight-bold">
                 ตำแหน่งและหน่วยงานเดิม
               </div>
             </div>
@@ -986,6 +986,8 @@ onMounted(async () => {
                   currency: 'THB',
                 }"
                 :label="`${'เงินเดือน'}`"
+                :rules="[(val:number) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
+                lazy-rules
               />
             </div>
             <div class="col-xs-12">
@@ -997,7 +999,6 @@ onMounted(async () => {
                 :readonly="!edit"
                 :borderless="!edit"
                 v-model="reason"
-                :rules="[(val) => !!val || `${'กรุณากรอกหมายเหตุ '}`]"
                 hide-bottom-space
                 :label="`${'หมายเหตุ '}`"
                 type="textarea"

src/modules/05_placement/components/Repatriate/RepatriatebyId.vue

@@ -257,9 +257,7 @@ onMounted(async () => {
         <div class="col-12 row bg-white q-col-gutter-md">
           <div class="col-xs-12 row items-center">
             <div class="col-12">
-              <div class="text-weight-bold text-grey">
+              <div class="text-weight-bold">ตำแหน่งและหน่วยงานเดิม</div>
-                ตำแหน่งและหน่วยงานเดิม
-              </div>
             </div>
             <div class="col-12">
               <q-input
@@ -332,6 +330,7 @@ onMounted(async () => {
                 :edit="edit"
                 :options="{ currency: 'THB' }"
                 :label="`${'เงินเดือน'}`"
+                :rules="[(val:number) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
               />
             </div>
           </div>
@@ -459,7 +458,6 @@ onMounted(async () => {
               :readonly="!edit"
               :borderless="!edit"
               v-model="reason"
-              :rules="[(val) => !!val || `${'กรุณากรอกหมายเหตุ '}`]"
               hide-bottom-space
               :label="`${'หมายเหตุ '}`"
               type="textarea"

src/modules/05_placement/components/Transfer/transferRegistry.vue

@@ -13,7 +13,7 @@ import type { QTableProps, QForm } from "quasar";
 import type {
   TypeFile,
   ResponseDataDetail,
-  rowFile
+  rowFile,
 } from "@/modules/05_placement/interface/response/Transfer";
 
 const $q = useQuasar();
@@ -275,10 +275,10 @@ const saveData = async () => {
     });
 };
 const cancel = () => {
-  edit.value = false
+  edit.value = false;
-  getData()
+  getData();
-  myForm.value?.resetValidation()
+  myForm.value?.resetValidation();
-}
+};
 const getClass = (val: boolean) => {
   return {
     "full-width inputgreen cursor-pointer": val,
@@ -537,9 +537,7 @@ onMounted(async () => {
           <div class="row bg-white q-col-gutter-y-md">
             <div class="col-xs-12 row items-center">
               <div class="col-12">
-                <div class="text-weight-bold text-grey">
+                <div class="text-weight-bold">ตำแหน่งและหน่วยงานเดิม</div>
-                  ตำแหน่งและหน่วยงานเดิม
-                </div>
               </div>
               <div class="col-12">
                 <q-input
@@ -609,6 +607,8 @@ onMounted(async () => {
                       currency: 'THB',
                     }"
                     :label="`${'เงินเดือน'}`"
+                    :rules="[(val:number) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
+                    lazy-rules
                   />
                 </div>
               </div>
@@ -687,7 +687,6 @@ onMounted(async () => {
                 :readonly="!edit"
                 :borderless="!edit"
                 v-model="reason"
-                :rules="[(val) => !!val || `${'กรุณากรอกหมายเหตุ '}`]"
                 hide-bottom-space
                 :label="`${'หมายเหตุ '}`"
                 type="textarea"

src/modules/05_placement/components/helpgovernment/governmentDetail.vue

@@ -23,7 +23,6 @@ const {
   success,
 } = mixin;
 
-
 const myForm = ref<QForm | null>(null);
 const fullname = ref<string>("");
 const id = ref<string>("");
@@ -75,8 +74,7 @@ const getData = async () => {
       positionNumberOld.value = data.positionNumberOld;
       organizationPositionOld.value = data.organizationPositionOld;
     })
-    .catch((e) => {
+    .catch((e) => {})
-    })
     .finally(() => {
       hideLoader();
     });
@@ -106,7 +104,7 @@ const conditionSave = async () => {
 const cancelBtn = () => {
   edit.value = !edit;
   getData();
-  myForm.value?.resetValidation()
+  myForm.value?.resetValidation();
 };
 const saveData = async () => {
   const body = {
@@ -143,16 +141,31 @@ onMounted(async () => {
 
 <template>
   <div class="toptitle text-dark col-12 row items-center">
-    <q-btn icon="mdi-arrow-left" unelevated round dense flat color="primary"
+    <q-btn
-      class="q-mr-sm" @click="router.push(`/help-government`)" />
+      icon="mdi-arrow-left"
+      unelevated
+      round
+      dense
+      flat
+      color="primary"
+      class="q-mr-sm"
+      @click="router.push(`/help-government`)"
+    />
     รายละเอียดการช่วยราชการ {{ fullname }}
   </div>
   <q-card bordered class="row col-12 text-dark">
     <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
       <div class="q-pl-sm text-weight-bold text-subtitle2">{{ fullname }}</div>
       <q-space />
-      <q-btn outline color="blue" dense icon-right="mdi-open-in-new" class="q-px-sm" 
+      <q-btn
-      label="ดูข้อมูลทะเบียนประวัติ" @click="router.push(`/registry/${profileId}`)" />
+        outline
+        color="blue"
+        dense
+        icon-right="mdi-open-in-new"
+        class="q-px-sm"
+        label="ดูข้อมูลทะเบียนประวัติ"
+        @click="router.push(`/registry/${profileId}`)"
+      />
     </div>
     <div class="col-12"><q-separator /></div>
     <div class="row col-12 q-pa-md">
@@ -196,15 +209,37 @@ onMounted(async () => {
       </div>
       <q-space />
       <div class="q-gutter-sm" v-if="!edit">
-        <q-btn outline color="primary" dense icon-right="mdi-file-edit-outline" 
+        <q-btn
-          class="q-px-sm" label="แก้ไข" style="width: 80px" @click="edit = !edit"
+          outline
-          v-if="!(status == 'REPORT' || status == 'DONE')" />
+          color="primary"
+          dense
+          icon-right="mdi-file-edit-outline"
+          class="q-px-sm"
+          label="แก้ไข"
+          style="width: 80px"
+          @click="edit = !edit"
+          v-if="!(status == 'REPORT' || status == 'DONE')"
+        />
       </div>
       <div class="q-gutter-sm" v-else>
-        <q-btn outline color="public" dense class="q-px-sm" label="บันทึก" style="width: 80px"
+        <q-btn
-          @click="conditionSave" />
+          outline
-        <q-btn outline color="red" dense class="q-px-sm" label="ยกเลิก"
+          color="public"
-          style="width: 80px" @click="cancelBtn" />
+          dense
+          class="q-px-sm"
+          label="บันทึก"
+          style="width: 80px"
+          @click="conditionSave"
+        />
+        <q-btn
+          outline
+          color="red"
+          dense
+          class="q-px-sm"
+          label="ยกเลิก"
+          style="width: 80px"
+          @click="cancelBtn"
+        />
       </div>
     </div>
     <div class="col-12"><q-separator /></div>
@@ -213,40 +248,81 @@ onMounted(async () => {
         <div class="col-12 row bg-white q-col-gutter-md">
           <div class="col-xs-12 row items-center">
             <div class="col-12">
-              <div class="text-weight-bold text-grey">
+              <div class="text-weight-bold">ตำแหน่งและหน่วยงานเดิม</div>
-                ตำแหน่งและหน่วยงานเดิม
-              </div>
             </div>
             <div class="col-12">
-              <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit" 
+              <q-input
-              :borderless="!edit" v-model="organizationPositionOld" :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่ง/สังกัด'}`]"
+                :class="getClass(edit)"
-              hide-bottom-space :label="`${'ตำแหน่ง'}`" type="textarea" />
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="organizationPositionOld"
+                :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่ง/สังกัด'}`]"
+                hide-bottom-space
+                :label="`${'ตำแหน่ง'}`"
+                type="textarea"
+              />
             </div>
           </div>
           <div class="col-12"><q-separator /></div>
-          <div class="col-xs-6 col-sm-4 row ">
+          <div class="col-xs-6 col-sm-4 row">
             <div class="col-12">
-              <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit"
+              <q-input
-                :borderless="!edit" v-model="organization" :rules="[(val) => !!val || `${'กรุณากรอกโอนไปสังกัด'}`]" hide-bottom-space
+                :class="getClass(edit)"
-                :label="`${'หน่วยงานที่ให้ช่วยราชการ'}`" />
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="organization"
+                :rules="[(val) => !!val || `${'กรุณากรอกโอนไปสังกัด'}`]"
+                hide-bottom-space
+                :label="`${'หน่วยงานที่ให้ช่วยราชการ'}`"
+              />
             </div>
           </div>
-          <div class="col-xs-6 col-sm-4 row ">
+          <div class="col-xs-6 col-sm-4 row">
             <div class="col-12">
-              <datepicker menu-class-name="modalfix" :readonly="!edit" v-model="dateStart" :locale="'th'"
+              <datepicker
-                autoApply :enableTimePicker="false" week-start="0" >
+                menu-class-name="modalfix"
+                :readonly="!edit"
+                v-model="dateStart"
+                :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 :readonly="!edit"
+                  <q-input
-                    lazy-rules :borderless="!edit" :rules="[(val) => !!val || `${'กรุณาเลือกตั้งแต่วัน'}`]"
+                    :class="getClass(edit)"
-                    :model-value=" dateStart !== null ? date2Thai(dateStart) : null "
+                    :outlined="edit"
-                    hide-bottom-space :label="`${'ตั้งแต่วัน'}`" >
+                    dense
+                    :readonly="!edit"
+                    lazy-rules
+                    :borderless="!edit"
+                    :rules="[(val) => !!val || `${'กรุณาเลือกตั้งแต่วัน'}`]"
+                    :model-value="
+                      dateStart !== null ? date2Thai(dateStart) : null
+                    "
+                    hide-bottom-space
+                    :label="`${'ตั้งแต่วัน'}`"
+                  >
                     <template v-slot:prepend>
-                      <q-icon name="event" class="cursor-pointer"
+                      <q-icon
-                        :style=" edit ? 'color: var(--q-primary)' : 'color: var(--q-grey)' " >
+                        name="event"
+                        class="cursor-pointer"
+                        :style="
+                          edit
+                            ? 'color: var(--q-primary)'
+                            : 'color: var(--q-grey)'
+                        "
+                      >
                       </q-icon>
                     </template>
                   </q-input>
@@ -254,21 +330,43 @@ onMounted(async () => {
               </datepicker>
             </div>
           </div>
-          <div class="col-xs-6 col-sm-4 row ">
+          <div class="col-xs-6 col-sm-4 row">
             <div class="col-12">
-              <datepicker menu-class-name="modalfix" :readonly="!edit" v-model="dateEnd" :locale="'th'"
+              <datepicker
-                autoApply :enableTimePicker="false" week-start="0" >
+                menu-class-name="modalfix"
+                :readonly="!edit"
+                v-model="dateEnd"
+                :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 :readonly="!edit" :class="getClass(edit)" :outlined="edit" dense
+                  <q-input
-                    lazy-rules :borderless="!edit" :model-value="dateEnd !== null ? date2Thai(dateEnd) : null" 
+                    :readonly="!edit"
-                    :rules="[(val) => !!val || `${'กรุณาเลือกตั้งแต่วัน'}`]" hide-bottom-space :label="`${'ถึงวันที่'}`" >
+                    :class="getClass(edit)"
+                    :outlined="edit"
+                    dense
+                    lazy-rules
+                    :borderless="!edit"
+                    :model-value="dateEnd !== null ? date2Thai(dateEnd) : null"
+                    :rules="[(val) => !!val || `${'กรุณาเลือกตั้งแต่วัน'}`]"
+                    hide-bottom-space
+                    :label="`${'ถึงวันที่'}`"
+                  >
                     <template v-slot:prepend>
-                      <q-icon name="event" class="cursor-pointer"
+                      <q-icon
-                        :style=" edit ? 'color: var(--q-primary)' : 'color: var(--q-grey)' "
+                        name="event"
+                        class="cursor-pointer"
+                        :style="
+                          edit
+                            ? 'color: var(--q-primary)'
+                            : 'color: var(--q-grey)'
+                        "
                       >
                       </q-icon>
                     </template>
@@ -278,9 +376,18 @@ onMounted(async () => {
             </div>
           </div>
           <div class="col-12">
-            <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit" 
+            <q-input
-              :borderless="!edit" v-model="reason" :rules="[(val) => !!val || `${'กรุณากรอกหมายเหตุ '}`]"
+              :class="getClass(edit)"
-              hide-bottom-space :label="`${'หมายเหตุ '}`" type="textarea" />
+              :outlined="edit"
+              dense
+              lazy-rules
+              :readonly="!edit"
+              :borderless="!edit"
+              v-model="reason"
+              hide-bottom-space
+              :label="`${'หมายเหตุ '}`"
+              type="textarea"
+            />
           </div>
         </div>
       </div>