Refactor Codeเพิ่มเติมจากเดิม

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

@@ -1,4 +1,4 @@
-<script setup lang="ts">
+divdivdiv<script setup lang="ts">
 import { onMounted, ref } from "vue";
 import { useQuasar } from "quasar";
 import { useRoute, useRouter } from "vue-router";
@@ -131,16 +131,8 @@ onMounted(async () => {
 </script>
 <template>
   <div class="toptitle text-dark col-12 row items-center">
-    <q-btn
+    <q-btn icon="mdi-arrow-left" unelevated round dense flat color="primary" 
-      icon="mdi-arrow-left"
+      class="q-mr-sm" @click="router.push(`/appoint-promote`)" />
-      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">
@@ -149,15 +141,8 @@ onMounted(async () => {
         {{ title.fullname }}
       </div>
       <q-space />
-      <q-btn
+      <q-btn outline color="blue" dense icon-right="mdi-open-in-new" class="q-px-sm"
-        outline
+        label="ดูข้อมูลทะเบียนประวัติ" @click="router.push(`/registry/${profileId}`)" />
-        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">
@@ -202,36 +187,14 @@ onMounted(async () => {
       <q-space />
       <div v-if="status !== 'DONE' && status !== 'REPORT'">
         <div class="q-gutter-sm" v-if="!edit">
-          <q-btn
+          <q-btn outline color="primary" dense icon-right="mdi-file-edit-outline" 
-            outline
+          class="q-px-sm" label="แก้ไข" style="width: 80px" @click="edit = !edit" />
-            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
+          <q-btn outline color="public" dense class="q-px-sm" label="บันทึก"
-            outline
+            style="width: 80px" @click="clickSave" />
-            color="public"
+          <q-btn outline color="red" dense class="q-px-sm" label="ยกเลิก" style="width: 80px"
-            dense
+            @click="edit = !edit" />
-            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="edit = !edit"
-          />
         </div>
       </div>
     </div>
@@ -242,19 +205,9 @@ onMounted(async () => {
           <div class="text-weight-bold text-grey">วุฒิการศึกษา</div>
         </div>
         <div class="col-12">
-          <q-input
+          <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit" 
-            :class="getClass(edit)"
+          :borderless="!edit" v-model="educationOld" :rules="[(val) => !!val || `${'กรุณากรอกวุฒิการศึกษา'}`]" hide-bottom-space
-            :outlined="edit"
+          :label="`${'วุฒิการศึกษา'}`" type="text" />
-            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">
@@ -267,119 +220,56 @@ onMounted(async () => {
             </div>
 
             <div class="col-12">
-              <q-input
+              <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit"
-                :class="getClass(edit)"
+                :borderless="!edit" v-model="organizationPositionOld" :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่ง/สังกัด'}`]"
-                :outlined="edit"
+                hide-bottom-space :label="`${'ตำแหน่ง/สังกัด'}`" type="textarea" />
-                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
+              <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit"
-                :class="getClass(edit)"
+                :borderless="!edit" v-model="positionTypeOld" :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่งประเภท'}`]"
-                :outlined="edit"
+                hide-bottom-space :label="`${'ตำแหน่งประเภท'}`" />
-                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
+              <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit"
-                :class="getClass(edit)"
+                :borderless="!edit" v-model="positionLevelOld" :rules="[(val) => !!val || `${'กรุณากรอกระดับ'}`]"
-                :outlined="edit"
+                hide-bottom-space :label="`${'ระดับ'}`" />
-                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
+              <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit"
-                :class="getClass(edit)"
+                :borderless="!edit" v-model="posNo" :rules="[(val) => !!val || `${'กรุณากรอกเลขที่'}`]"
-                :outlined="edit"
+                hide-bottom-space :label="`${'เลขที่'}`" />
-                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
+              <CurrencyInput v-model="salary" label="เงินเดือน" :edit="edit" 
-                v-model="salary"
+                :rules="[(val:number) => !!val || `${'กรุณากรอกเงินเดือน'}`]" />
-                label="เงินเดือน"
-                :edit="edit"
-                :rules="[(val:number) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
-              />
             </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
+              <datepicker menu-class-name="modalfix" :readonly="!edit" v-model="date" :locale="'th'"
-                menu-class-name="modalfix"
+                autoApply :enableTimePicker="false" week-start="0" >
-                :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
+                  <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :borderless="!edit"
-                    :class="getClass(edit)"
+                    :readonly="!edit" :model-value="date !== null ? date2Thai(date) : null" 
-                    :outlined="edit"
-                    dense
-                    lazy-rules
-                    :borderless="!edit"
-                    :readonly="!edit"
-                    :model-value="date !== null ? date2Thai(date) : null"
                     :rules="[(val) => !!val || `${'กรุณาเลือกตั้งแต่วัน'}`]"
-                    hide-bottom-space
+                    hide-bottom-space :label="`${'ดำรงตำแหน่งในระดับปัจจุบันเมื่อ'}`" >
-                    :label="`${'ดำรงตำแหน่งในระดับปัจจุบันเมื่อ'}`"
-                  >
                     <template v-slot:prepend>
-                      <q-icon
+                      <q-icon name="event" class="cursor-pointer"
-                        name="event"
+                        :style="edit? 'color: var(--q-primary)': 'color: var(--q-grey)' ">
-                        class="cursor-pointer"
-                        :style="
-                          edit
-                            ? 'color: var(--q-primary)'
-                            : 'color: var(--q-grey)'
-                        "
-                      >
                       </q-icon>
                     </template>
                   </q-input>
@@ -388,19 +278,9 @@ onMounted(async () => {
             </div>
           </div>
           <div class="col-12">
-            <q-input
+            <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit"
-              :class="getClass(edit)"
+              :borderless="!edit" v-model="reason" :rules="[(val) => !!val || `${'กรุณากรอกหมายเหตุ '}`]"
-              :outlined="edit"
+              hide-bottom-space :label="`${'หมายเหตุ '}`" type="textarea" />
-              dense
-              lazy-rules
-              :readonly="!edit"
-              :borderless="!edit"
-              v-model="reason"
-              :rules="[(val) => !!val || `${'กรุณากรอกหมายเหตุ '}`]"
-              hide-bottom-space
-              :label="`${'หมายเหตุ '}`"
-              type="textarea"
-            />
           </div>
         </div>
       </div>

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

@@ -163,16 +163,8 @@ onMounted(async () => {
 </script>
 <template>
   <div class="toptitle text-dark col-12 row items-center">
-    <q-btn
+    <q-btn icon="mdi-arrow-left" unelevated round dense flat 
-      icon="mdi-arrow-left"
+    color="primary" class="q-mr-sm" @click="router.push(`/other`)" />
-      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">
@@ -181,15 +173,8 @@ onMounted(async () => {
         {{ responseData.fullname }}
       </div>
       <q-space />
-      <q-btn
+      <q-btn outline color="blue" dense icon-right="mdi-open-in-new" class="q-px-sm" 
-        outline
+      label="ดูข้อมูลทะเบียนประวัติ" @click="router.push(`/registry/${responseData.profileId}`)" />
-        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">
@@ -238,36 +223,14 @@ onMounted(async () => {
         "
       >
         <div class="q-gutter-sm" v-if="!edit">
-          <q-btn
+          <q-btn outline color="primary" dense icon-right="mdi-file-edit-outline"
-            outline
+            class="q-px-sm" label="แก้ไข" style="width: 80px" @click="edit = !edit" />
-            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
+          <q-btn outline color="public" dense class="q-px-sm" label="บันทึก"
-            outline
+            style="width: 80px" @click="clickEdit" />
-            color="public"
+          <q-btn outline color="red" dense class="q-px-sm" label="ยกเลิก"
-            dense
+            style="width: 80px" @click="(edit = !edit), fecthOther()" />
-            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="(edit = !edit), fecthOther()"
-          />
         </div>
       </div>
     </div>
@@ -282,118 +245,55 @@ onMounted(async () => {
               </div>
             </div>
             <div class="col-12">
-              <q-input
+              <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit"
-                :class="getClass(edit)"
+                :borderless="!edit" v-model="organizationPositionOld" :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่ง/สังกัด'}`]"
-                :outlined="edit"
+                hide-bottom-space :label="`${'ตำแหน่ง/สังกัด'}`" type="textarea" />
-                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
+              <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit"
-                :class="getClass(edit)"
+                :borderless="!edit" v-model="positionTypeOld" :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่งประเภท'}`]"
-                :outlined="edit"
+                hide-bottom-space :label="`${'ตำแหน่งประเภท'}`" />
-                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
+              <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit"
-                :class="getClass(edit)"
+                :borderless="!edit" v-model="positionLevelOld" :rules="[(val) => !!val || `${'กรุณากรอกระดับ'}`]"
-                :outlined="edit"
+                hide-bottom-space :label="`${'ระดับ'}`" />
-                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
+              <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit"
-                :class="getClass(edit)"
+                :borderless="!edit" v-model="posNo" :rules="[(val) => !!val || `${'กรุณากรอกเลขที่'}`]"
-                :outlined="edit"
+                hide-bottom-space :label="`${'เลขที่'}`" />
-                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
+              <CurruncyInput v-model="salary" label="เงินเดือน" :edit="edit"
-                v-model="salary"
+                :rules="[(val:number) => !!val || `${'กรุณากรอกเงินเดือน'}`]" />
-                label="เงินเดือน"
-                :edit="edit"
-                :rules="[(val:number) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
-              />
             </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
+              <datepicker menu-class-name="modalfix" :readonly="!edit" v-model="date" :locale="'th'"
-                menu-class-name="modalfix"
+                autoApply :enableTimePicker="false" week-start="0" >
-                :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
+                  <q-input  :class="getClass(edit)" :outlined="edit" dense  lazy-rules  :readonly="!edit"
-                    :class="getClass(edit)"
+                    :borderless="!edit" :model-value="date !== null ? date2Thai(date) : null"
-                    :outlined="edit"
+                    :rules="[(val) => !!val || `${'กรุณาเลือกตั้งแต่วัน'}`]"  hide-bottom-space
-                    dense
+                    :label="`${'ตั้งแต่วัน'}`" >
-                    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
+                      <q-icon name="event" class="cursor-pointer"
-                        name="event"
+                        :style=" edit ? 'color: var(--q-primary)' : 'color: var(--q-grey)' " >
-                        class="cursor-pointer"
-                        :style="
-                          edit
-                            ? 'color: var(--q-primary)'
-                            : 'color: var(--q-grey)'
-                        "
-                      >
                       </q-icon>
                     </template>
                   </q-input>
@@ -402,19 +302,9 @@ onMounted(async () => {
             </div>
           </div>
           <div class="col-12">
-            <q-input
+            <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit"
-              :class="getClass(edit)"
+              :borderless="!edit" v-model="reason" :rules="[(val) => !!val || `${'กรุณากรอกหมายเหตุ '}`]"
-              :outlined="edit"
+              hide-bottom-space :label="`${'หมายเหตุ '}`" type="textarea" />
-              dense
-              lazy-rules
-              :readonly="!edit"
-              :borderless="!edit"
-              v-model="reason"
-              :rules="[(val) => !!val || `${'กรุณากรอกหมายเหตุ '}`]"
-              hide-bottom-space
-              :label="`${'หมายเหตุ '}`"
-              type="textarea"
-            />
           </div>
         </div>
       </div>

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

@@ -1,4 +1,4 @@
-<script setup lang="ts">
+div<script setup lang="ts">
 import { onMounted, ref } from "vue";
 import { useQuasar } from "quasar";
 import { useRoute, useRouter } from "vue-router";
@@ -8,9 +8,8 @@ import CurrencyInput from "@/components/CurruncyInput.vue";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
-import keycloak from "@/plugins/keycloak";
 
-import type { QTableProps, QForm } from "quasar";
+import type {  QForm } from "quasar";
 
 const $q = useQuasar();
 const route = useRoute();
@@ -20,7 +19,6 @@ const edit = ref<boolean>(false);
 const dataId = route.params.id as string;
 const {
   date2Thai,
-  dialogMessage,
   messageError,
   showLoader,
   hideLoader,
@@ -44,7 +42,7 @@ const organization = ref<string>("");
 const reason = ref<string>("");
 const status = ref<string>("");
 const date = ref<Date | null>(null);
-const salary = ref<string>("");
+const salary = ref<number>(0);
 const positionTypeOld = ref<string>("");
 const positionLevelOld = ref<string>("");
 const positionNumberOld = ref<string>("");
@@ -128,8 +126,6 @@ const saveData = async () => {
   await http
     .put(config.API.repatriationMainEdit(dataId), body)
     .then((res: any) => {
-      //   const data = res.data.result;
-      //   console.log(data);
       success($q, "แก้ไขข้อมูลเพื่อลงบัญชีแนบท้ายสำเร็จ");
       edit.value = false;
     })
@@ -149,31 +145,18 @@ onMounted(async () => {
 
 <template>
   <div class="toptitle text-dark col-12 row items-center">
-    <q-btn
+    <q-btn icon="mdi-arrow-left" unelevated round dense flat 
-      icon="mdi-arrow-left"
+      color="primary" class="q-mr-sm" @click="router.push(`/repatriate`)" />
-      unelevated
-      round
-      dense
-      flat
-      color="primary"
-      class="q-mr-sm"
-      @click="router.go(-1)"
-    />
     รายละเอียดการส่งตัวกลับ {{ 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>
+      <div class="q-pl-sm text-weight-bold text-subtitle2">
+        {{ fullname }}
+      </div>
       <q-space />
-      <q-btn
+      <q-btn outline color="blue" dense icon-right="mdi-open-in-new" class="q-px-sm" 
-        outline
+        label="ดูข้อมูลทะเบียนประวัติ" @click="router.push(`/registry/${personId}`)" />
-        color="blue"
-        dense
-        icon-right="mdi-open-in-new"
-        class="q-px-sm"
-        label="ดูข้อมูลทะเบียนประวัติ"
-        @click="router.push(`/registry/${personId}`)"
-      />
     </div>
     <div class="col-12"><q-separator /></div>
     <div class="row col-12 q-pa-md">
@@ -217,37 +200,14 @@ onMounted(async () => {
       </div>
       <q-space />
       <div class="q-gutter-sm" v-if="!edit">
-        <q-btn
+        <q-btn outline color="primary" dense icon-right="mdi-file-edit-outline" 
-          outline
+          class="q-px-sm" label="แก้ไข" style="width: 80px" @click="edit = !edit" 
-          color="primary"
+          v-if="!(status == 'REPORT' || status == 'DONE')"/>
-          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
+        <q-btn outline color="public" dense class="q-px-sm" label="บันทึก" 
-          outline
+          style="width: 80px" @click="conditionSave" />
-          color="public"
+        <q-btn outline color="red" dense class="q-px-sm" label="ยกเลิก" 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>
@@ -261,141 +221,62 @@ onMounted(async () => {
               </div>
             </div>
             <div class="col-12">
-              <q-input
+              <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit" :borderless="!edit"
-                :class="getClass(edit)"
+                v-model="organizationPositionOld" :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่ง/สังกัด'}`]" 
-                :outlined="edit"
+                hide-bottom-space :label="`${'ตำแหน่ง/สังกัด'}`" type="textarea" />
-                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
+              <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit" :borderless="!edit"
-                :class="getClass(edit)"
+                v-model="positionTypeOld" :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่งประเภท'}`]" hide-bottom-space 
-                :outlined="edit"
+                :label="`${'ตำแหน่งประเภท'}`" />
-                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
+              <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit" :borderless="!edit"
-                :class="getClass(edit)"
+                v-model="positionLevelOld" :rules="[(val) => !!val || `${'กรุณากรอกระดับ'}`]" hide-bottom-space
-                :outlined="edit"
+                :label="`${'ระดับ'}`" />
-                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
+              <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit" :borderless="!edit"
-                :class="getClass(edit)"
+                v-model="posNo" :rules="[(val) => !!val || `${'กรุณากรอกเลขที่'}`]" hide-bottom-space
-                :outlined="edit"
+                :label="`${'เลขที่'}`" />
-                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">
-              <!-- <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit" :borderless="!edit"
+              <CurrencyInput v-model="salary" :edit="edit" :options="{ currency: 'THB', }" :label="`${'เงินเดือน'}`" />
-                v-model="salary" :rules="[(val) => !!val || `${'กรุณากรอกเงินเดือน'}`]" hide-bottom-space
-                :label="`${'เงินเดือน'}`" type="number" /> -->
-              <CurrencyInput
-                v-model="salary"
-                :edit="edit"
-                :options="{
-                  currency: 'THB',
-                }"
-                :label="`${'เงินเดือน'}`"
-              />
             </div>
           </div>
           <div class="col-12"><q-separator /></div>
           <div class="col-xs-6 col-sm-6 row ">
             <div class="col-12">
-              <q-input
+              <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit" :borderless="!edit"
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
                 v-model="organization"
-                :rules="[
+                :rules="[ (val) => !!val || `${'กรุณากรอกหน่วยงานที่ให้ช่วยราชการ'}`, ]" hide-bottom-space
-                  (val) => !!val || `${'กรุณากรอกหน่วยงานที่ให้ช่วยราชการ'}`,
+                :label="`${'หน่วยงานที่ให้ช่วยราชการ'}`" />
-                ]"
-                hide-bottom-space
-                :label="`${'หน่วยงานที่ให้ช่วยราชการ'}`"
-              />
             </div>
           </div>
           <div class="col-xs-6 col-sm-6 row ">
             <div class="col-12">
-              <datepicker
+              <datepicker menu-class-name="modalfix" :readonly="!edit" v-model="date" :locale="'th'" 
-                menu-class-name="modalfix"
+                autoApply :enableTimePicker="false" week-start="0" >
-                :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
+                  <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit"
-                    :class="getClass(edit)"
+                    :borderless="!edit" :model-value="date !== null ? date2Thai(date) : null"
-                    :outlined="edit"
+                    :rules="[(val) => !!val || `${'กรุณาเลือกตั้งแต่วัน'}`]" hide-bottom-space
-                    dense
+                    :label="`${'ตั้งแต่วัน'}`" >
-                    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
+                      <q-icon name="event" class="cursor-pointer" :style="
-                        name="event"
+                          edit ? 'color: var(--q-primary)' : 'color: var(--q-grey)'" >
-                        class="cursor-pointer"
-                        :style="
-                          edit
-                            ? 'color: var(--q-primary)'
-                            : 'color: var(--q-grey)'
-                        "
-                      >
                       </q-icon>
                     </template>
                   </q-input>
@@ -404,19 +285,9 @@ onMounted(async () => {
             </div>
           </div>
           <div class="col-12">
-            <q-input
+            <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit" :borderless="!edit"
-              :class="getClass(edit)"
+              v-model="reason" :rules="[(val) => !!val || `${'กรุณากรอกหมายเหตุ '}`]" hide-bottom-space
-              :outlined="edit"
+              :label="`${'หมายเหตุ '}`" type="textarea" />
-              dense
-              lazy-rules
-              :readonly="!edit"
-              :borderless="!edit"
-              v-model="reason"
-              :rules="[(val) => !!val || `${'กรุณากรอกหมายเหตุ '}`]"
-              hide-bottom-space
-              :label="`${'หมายเหตุ '}`"
-              type="textarea"
-            />
           </div>
         </div>
       </div>