From 20e8780d70189221a0e7b79b356bd49f68580a1c Mon Sep 17 00:00:00 2001
From: AnandaTon <125332905+anandaAiemvong@users.noreply.github.com>
Date: Tue, 22 Aug 2023 09:33:53 +0700
Subject: [PATCH] Currency input

---
 .../components/AppointMent/Detail.vue         | 197 ++++++++++++++----
 .../components/Receive/receiveDetail2.vue     |  13 +-
 .../components/Relocation/RelocationbyId.vue  |  27 +--
 .../components/Repatriate/RepatriatebyId.vue  | 184 +++++++++++++---
 .../components/Transfer/transferRegistry.vue  |  11 +-
 .../Discharged/dischargedRegistry.vue         |  11 +-
 .../components/DismissOrder/outRegistry.vue   |  14 +-
 .../components/resign/ResignByid.vue          |  12 +-
 8 files changed, 380 insertions(+), 89 deletions(-)

diff --git a/src/modules/05_placement/components/AppointMent/Detail.vue b/src/modules/05_placement/components/AppointMent/Detail.vue
index e95135d42..c369e1263 100644
--- a/src/modules/05_placement/components/AppointMent/Detail.vue
+++ b/src/modules/05_placement/components/AppointMent/Detail.vue
@@ -3,6 +3,7 @@ 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";
 
@@ -133,7 +134,16 @@ const getClass = (val: boolean) => {
 </script>
 <template>
   <div class="toptitle text-dark col-12 row items-center">
-    <q-btn icon="mdi-arrow-left" unelevated round dense flat color="primary" class="q-mr-sm" @click="router.go(-1)" />
+    <q-btn
+      icon="mdi-arrow-left"
+      unelevated
+      round
+      dense
+      flat
+      color="primary"
+      class="q-mr-sm"
+      @click="router.go(-1)"
+    />
     รายละเอียดการแต่งตั้ง-เลื่อน {{ title.fullname }}
   </div>
   <q-card bordered class="row col-12 text-dark">
@@ -142,8 +152,15 @@ const getClass = (val: boolean) => {
         {{ title.fullname }}
       </div>
       <q-space />
-      <q-btn outline color="blue" dense icon-right="mdi-open-in-new" class="q-px-sm" label="ดูข้อมูลทะเบียนประวัติ"
-        @click="router.push(`/registry/${profileId}`)" />
+      <q-btn
+        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">
@@ -190,12 +207,36 @@ const getClass = (val: boolean) => {
       </div>
       <q-space />
       <div class="q-gutter-sm" v-if="!edit">
-        <q-btn outline color="primary" dense icon-right="mdi-file-edit-outline" class="q-px-sm" label="แก้ไข"
-          style="width: 80px" @click="edit = !edit" />
+        <q-btn
+          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="บันทึก" style="width: 80px" @click="clickSave" />
-        <q-btn outline color="red" dense class="q-px-sm" label="ยกเลิก" style="width: 80px" @click="edit = !edit" />
+        <q-btn
+          outline
+          color="public"
+          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="edit = !edit"
+        />
       </div>
     </div>
     <div class="col-12"><q-separator /></div>
@@ -205,9 +246,19 @@ const getClass = (val: boolean) => {
           <div class="text-weight-bold text-grey">วุฒิการศึกษา</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" />
+          <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="row col-12 q-pa-md">
@@ -220,38 +271,83 @@ const getClass = (val: boolean) => {
             </div>
 
             <div class="col-12">
-              <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit" :borderless="!edit"
-                v-model="organizationPositionOld" :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่ง/สังกัด'}`]"
-                hide-bottom-space :label="`${'ตำแหน่ง/สังกัด'}`" type="textarea" />
+              <q-input
+                :class="getClass(edit)"
+                :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 items-center">
             <div class="col-12">
-              <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit" :borderless="!edit"
-                v-model="positionTypeOld" :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่งประเภท'}`]" hide-bottom-space
-                :label="`${'ตำแหน่งประเภท'}`" />
+              <q-input
+                :class="getClass(edit)"
+                :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 items-center">
             <div class="col-12">
-              <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit" :borderless="!edit"
-                v-model="positionLevelOld" :rules="[(val) => !!val || `${'กรุณากรอกระดับ'}`]" hide-bottom-space
-                :label="`${'ระดับ'}`" />
+              <q-input
+                :class="getClass(edit)"
+                :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 items-center">
             <div class="col-12">
-              <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit" :borderless="!edit"
-                v-model="posNo" :rules="[(val) => !!val || `${'กรุณากรอกเลขที่'}`]" hide-bottom-space
-                :label="`${'เลขที่'}`" />
+              <q-input
+                :class="getClass(edit)"
+                :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 items-center">
             <div class="col-12">
-              <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit" :borderless="!edit"
+              <!-- <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit" :borderless="!edit"
                 v-model="salary" :rules="[(val) => !!val || `${'กรุณากรอกเงินเดือน'}`]" hide-bottom-space
-                :label="`${'เงินเดือน'}`" type="number" />
+                :label="`${'เงินเดือน'}`" type="number" /> -->
+              <CurrencyInput
+                v-model="salary"
+                :edit="edit"
+                :options="{
+                  currency: 'THB',
+                }"
+                :label="`${'เงินเดือน'}`"
+              />
             </div>
           </div>
           <div class="col-12"><q-separator /></div>
@@ -273,22 +369,41 @@ const getClass = (val: boolean) => {
           </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'" autoApply
-                :enableTimePicker="false" week-start="0">
+              <datepicker
+                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
+                    :class="getClass(edit)"
+                    :outlined="edit"
+                    dense
+                    lazy-rules
+                    :borderless="!edit"
                     :model-value="date !== null ? date2Thai(date) : null"
-                    :rules="[(val) => !!val || `${'กรุณาเลือกตั้งแต่วัน'}`]" hide-bottom-space
-                    :label="`${'ดำรงตำแหน่งในระดับปัจจุบันเมื่อ'}`">
+                    :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
+                        name="event"
+                        class="cursor-pointer"
+                        :style="
+                          edit
+                            ? 'color: var(--q-primary)'
+                            : 'color: var(--q-grey)'
+                        "
+                      >
                       </q-icon>
                     </template>
                   </q-input>
@@ -297,9 +412,19 @@ const getClass = (val: boolean) => {
             </div>
           </div>
           <div class="col-12">
-            <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit" :borderless="!edit"
-              v-model="reason" :rules="[(val) => !!val || `${'กรุณากรอกหมายเหตุ '}`]" hide-bottom-space
-              :label="`${'หมายเหตุ '}`" type="textarea" />
+            <q-input
+              :class="getClass(edit)"
+              :outlined="edit"
+              dense
+              lazy-rules
+              :readonly="!edit"
+              :borderless="!edit"
+              v-model="reason"
+              :rules="[(val) => !!val || `${'กรุณากรอกหมายเหตุ '}`]"
+              hide-bottom-space
+              :label="`${'หมายเหตุ '}`"
+              type="textarea"
+            />
           </div>
         </div>
       </div>
diff --git a/src/modules/05_placement/components/Receive/receiveDetail2.vue b/src/modules/05_placement/components/Receive/receiveDetail2.vue
index 8f3b77a44..8af8374f6 100644
--- a/src/modules/05_placement/components/Receive/receiveDetail2.vue
+++ b/src/modules/05_placement/components/Receive/receiveDetail2.vue
@@ -533,7 +533,7 @@
               />
             </div>
             <div class="col-xs-6 col-sm-3">
-              <q-input
+              <!-- <q-input
                 :class="getClass(edit)"
                 :outlined="edit"
                 dense
@@ -545,6 +545,14 @@
                 hide-bottom-space
                 :label="`${'เงินเดือน'}`"
                 type="number"
+              /> -->
+              <CurrencyInput
+                v-model="salary"
+                :edit="edit"
+                :options="{
+                  currency: 'THB',
+                }"
+                :label="`${'เงินเดือน'}`"
               />
             </div>
             <div class="col-xs-12">
@@ -574,8 +582,7 @@ import { useQuasar } from "quasar";
 import { useRoute, useRouter } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
 import { useProfileDataStore } from "@/modules/08_registryEmployee/store";
-import CurruncyInput from "@/components/CurruncyInput.vue";
-
+import CurrencyInput from "@/components/CurruncyInput.vue";
 import type { QTableProps, QForm } from "quasar";
 import type { ResponseTitle } from "@/modules/05_placement/interface/response/Receive";
 import type { InformationOps } from "@/modules/04_registry/interface/index/Main";
diff --git a/src/modules/05_placement/components/Relocation/RelocationbyId.vue b/src/modules/05_placement/components/Relocation/RelocationbyId.vue
index 07bf9456e..db6d59657 100644
--- a/src/modules/05_placement/components/Relocation/RelocationbyId.vue
+++ b/src/modules/05_placement/components/Relocation/RelocationbyId.vue
@@ -7,7 +7,7 @@ import { useCounterMixin } from "@/stores/mixin";
 import http from "@/plugins/http";
 import config from "@/app.config";
 import keycloak from "@/plugins/keycloak";
-
+import CurrencyInput from "@/components/CurruncyInput.vue";
 import type { QTableProps, QForm } from "quasar";
 // import type {
 //   TypeFile,
@@ -422,18 +422,13 @@ onMounted(async () => {
           </div>
           <div class="col-xs-6 col-sm-3 row items-center">
             <div class="col-12">
-              <q-input
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
+              <CurrencyInput
                 v-model="amountOld"
-                :rules="[(val) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
-                hide-bottom-space
+                :edit="edit"
+                :options="{
+                  currency: 'THB',
+                }"
                 :label="`${'เงินเดือน'}`"
-                type="number"
               />
             </div>
           </div>
@@ -460,7 +455,7 @@ onMounted(async () => {
               เงินเดือนตำแหน่งและหน่วยงานที่รับย้าย
             </div>
             <div class="col-12">
-              <q-input
+              <!-- <q-input
                 :class="getClass(edit)"
                 :outlined="edit"
                 dense
@@ -472,6 +467,14 @@ onMounted(async () => {
                 hide-bottom-space
                 :label="`${'เงินเดือน'}`"
                 type="number"
+              /> -->
+              <CurrencyInput
+                v-model="amount"
+                :edit="edit"
+                :options="{
+                  currency: 'THB',
+                }"
+                :label="`${'เงินเดือน'}`"
               />
             </div>
           </div>
diff --git a/src/modules/05_placement/components/Repatriate/RepatriatebyId.vue b/src/modules/05_placement/components/Repatriate/RepatriatebyId.vue
index ece92154d..614b2a241 100644
--- a/src/modules/05_placement/components/Repatriate/RepatriatebyId.vue
+++ b/src/modules/05_placement/components/Repatriate/RepatriatebyId.vue
@@ -1,14 +1,30 @@
 <template>
   <div class="toptitle text-dark col-12 row items-center">
-    <q-btn icon="mdi-arrow-left" unelevated round dense flat color="primary" class="q-mr-sm" @click="router.go(-1)" />
+    <q-btn
+      icon="mdi-arrow-left"
+      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>
       <q-space />
-      <q-btn outline color="blue" dense icon-right="mdi-open-in-new" class="q-px-sm" label="ดูข้อมูลทะเบียนประวัติ"
-        @click="router.push(`/registry/${personId}`)" />
+      <q-btn
+        outline
+        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">
@@ -63,8 +79,24 @@
         /> -->
       </div>
       <div class="q-gutter-sm" v-else>
-        <q-btn outline color="public" 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" />
+        <q-btn
+          outline
+          color="public"
+          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>
@@ -78,64 +110,138 @@
               </div>
             </div>
             <div class="col-12">
-              <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit" :borderless="!edit"
-                v-model="organizationPositionOld" :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่ง/สังกัด'}`]"
-                hide-bottom-space :label="`${'ตำแหน่ง/สังกัด'}`" type="textarea" />
+              <q-input
+                :class="getClass(edit)"
+                :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 items-center">
             <div class="col-12">
-              <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit" :borderless="!edit"
-                v-model="positionTypeOld" :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่งประเภท'}`]" hide-bottom-space
-                :label="`${'ตำแหน่งประเภท'}`" />
+              <q-input
+                :class="getClass(edit)"
+                :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 items-center">
             <div class="col-12">
-              <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit" :borderless="!edit"
-                v-model="positionLevelOld" :rules="[(val) => !!val || `${'กรุณากรอกระดับ'}`]" hide-bottom-space
-                :label="`${'ระดับ'}`" />
+              <q-input
+                :class="getClass(edit)"
+                :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 items-center">
             <div class="col-12">
-              <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit" :borderless="!edit"
-                v-model="posNo" :rules="[(val) => !!val || `${'กรุณากรอกเลขที่'}`]" hide-bottom-space
-                :label="`${'เลขที่'}`" />
+              <q-input
+                :class="getClass(edit)"
+                :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 items-center">
             <div class="col-12">
-              <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit" :borderless="!edit"
+              <!-- <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit" :borderless="!edit"
                 v-model="salary" :rules="[(val) => !!val || `${'กรุณากรอกเงินเดือน'}`]" hide-bottom-space
-                :label="`${'เงินเดือน'}`" type="number" />
+                :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 items-center">
             <div class="col-12">
-              <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit" :borderless="!edit"
-                v-model="organization" :rules="[(val) => !!val || `${'กรุณากรอกโอนไปสังกัด'}`]" hide-bottom-space
-                :label="`${'โอนไปสังกัด'}`" />
+              <q-input
+                :class="getClass(edit)"
+                :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-6 row items-center">
             <div class="col-12">
-              <datepicker menu-class-name="modalfix" :readonly="!edit" v-model="date" :locale="'th'" autoApply
-                :enableTimePicker="false" week-start="0">
+              <datepicker
+                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
+                    :class="getClass(edit)"
+                    :outlined="edit"
+                    dense
+                    lazy-rules
+                    :borderless="!edit"
                     :model-value="date !== null ? date2Thai(date) : null"
-                    :rules="[(val) => !!val || `${'กรุณาเลือกตั้งแต่วัน'}`]" hide-bottom-space :label="`${'ตั้งแต่วัน'}`">
+                    :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
+                        name="event"
+                        class="cursor-pointer"
+                        :style="
+                          edit
+                            ? 'color: var(--q-primary)'
+                            : 'color: var(--q-grey)'
+                        "
+                      >
                       </q-icon>
                     </template>
                   </q-input>
@@ -144,9 +250,19 @@
             </div>
           </div>
           <div class="col-12">
-            <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit" :borderless="!edit"
-              v-model="reason" :rules="[(val) => !!val || `${'กรุณากรอกหมายเหตุ '}`]" hide-bottom-space
-              :label="`${'หมายเหตุ '}`" type="textarea" />
+            <q-input
+              :class="getClass(edit)"
+              :outlined="edit"
+              dense
+              lazy-rules
+              :readonly="!edit"
+              :borderless="!edit"
+              v-model="reason"
+              :rules="[(val) => !!val || `${'กรุณากรอกหมายเหตุ '}`]"
+              hide-bottom-space
+              :label="`${'หมายเหตุ '}`"
+              type="textarea"
+            />
           </div>
         </div>
       </div>
@@ -159,6 +275,8 @@ import { useQuasar } from "quasar";
 import { useRoute, useRouter } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
 
+import CurrencyInput from "@/components/CurruncyInput.vue";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
 import keycloak from "@/plugins/keycloak";
diff --git a/src/modules/05_placement/components/Transfer/transferRegistry.vue b/src/modules/05_placement/components/Transfer/transferRegistry.vue
index b58a81fd6..d4b3442be 100644
--- a/src/modules/05_placement/components/Transfer/transferRegistry.vue
+++ b/src/modules/05_placement/components/Transfer/transferRegistry.vue
@@ -263,7 +263,7 @@
           </div>
           <div class="col-xs-6 col-sm-3 row items-center">
             <div class="col-12">
-              <q-input
+              <!-- <q-input
                 :class="getClass(edit)"
                 :outlined="edit"
                 dense
@@ -275,6 +275,14 @@
                 hide-bottom-space
                 :label="`${'เงินเดือน'}`"
                 type="number"
+              /> -->
+              <CurrencyInput
+                v-model="salary"
+                :edit="edit"
+                :options="{
+                  currency: 'THB',
+                }"
+                :label="`${'เงินเดือน'}`"
               />
             </div>
           </div>
@@ -365,6 +373,7 @@ import { useQuasar } from "quasar";
 import { useRoute, useRouter } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
 
+import CurrencyInput from "@/components/CurruncyInput.vue";
 import http from "@/plugins/http";
 import config from "@/app.config";
 import keycloak from "@/plugins/keycloak";
diff --git a/src/modules/06_retirement/components/Discharged/dischargedRegistry.vue b/src/modules/06_retirement/components/Discharged/dischargedRegistry.vue
index 5c156480c..9942cdb89 100644
--- a/src/modules/06_retirement/components/Discharged/dischargedRegistry.vue
+++ b/src/modules/06_retirement/components/Discharged/dischargedRegistry.vue
@@ -181,7 +181,7 @@
           </div>
           <div class="col-xs-6 col-sm-3 row items-center">
             <div class="col-12">
-              <q-input
+              <!-- <q-input
                 :class="getClass(edit)"
                 :outlined="edit"
                 dense
@@ -193,6 +193,14 @@
                 hide-bottom-space
                 :label="`${'เงินเดือน'}`"
                 type="number"
+              /> -->
+              <CurrencyInput
+                v-model="salary"
+                :edit="edit"
+                :options="{
+                  currency: 'THB',
+                }"
+                :label="`${'เงินเดือน'}`"
               />
             </div>
           </div>
@@ -283,6 +291,7 @@ import { useQuasar } from "quasar";
 import { useRoute, useRouter } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
 
+import CurrencyInput from "@/components/CurruncyInput.vue";
 import http from "@/plugins/http";
 import config from "@/app.config";
 import keycloak from "@/plugins/keycloak";
diff --git a/src/modules/06_retirement/components/DismissOrder/outRegistry.vue b/src/modules/06_retirement/components/DismissOrder/outRegistry.vue
index 33535a08b..6b2adfb13 100644
--- a/src/modules/06_retirement/components/DismissOrder/outRegistry.vue
+++ b/src/modules/06_retirement/components/DismissOrder/outRegistry.vue
@@ -181,7 +181,7 @@
           </div>
           <div class="col-xs-6 col-sm-3 row items-center">
             <div class="col-12">
-              <q-input
+              <!-- <q-input
                 :class="getClass(edit)"
                 :outlined="edit"
                 dense
@@ -193,6 +193,15 @@
                 hide-bottom-space
                 :label="`${'เงินเดือน'}`"
                 type="number"
+              /> -->
+
+              <CurrencyInput
+                v-model="salary"
+                :edit="edit"
+                :options="{
+                  currency: 'THB',
+                }"
+                :label="`${'เงินเดือน'}`"
               />
             </div>
           </div>
@@ -283,6 +292,7 @@ import { useQuasar } from "quasar";
 import { useRoute, useRouter } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
 
+import CurrencyInput from "@/components/CurruncyInput.vue";
 import http from "@/plugins/http";
 import config from "@/app.config";
 import keycloak from "@/plugins/keycloak";
@@ -383,7 +393,7 @@ const getData = async () => {
     .get(config.API.outByid(dataId))
     .then((res: any) => {
       const data = res.data.result;
-      
+
       responseData.value.personId = data.profileId;
       responseData.value.createdAt = data.createdAt;
       responseData.value.date =
diff --git a/src/modules/06_retirement/components/resign/ResignByid.vue b/src/modules/06_retirement/components/resign/ResignByid.vue
index 3428c5fb5..421356a08 100644
--- a/src/modules/06_retirement/components/resign/ResignByid.vue
+++ b/src/modules/06_retirement/components/resign/ResignByid.vue
@@ -241,7 +241,7 @@
           </div>
           <div class="col-xs-6 col-sm-3 row items-center">
             <div class="col-12">
-              <q-input
+              <!-- <q-input
                 :class="getClass(edit)"
                 :outlined="edit"
                 dense
@@ -253,6 +253,15 @@
                 hide-bottom-space
                 :label="`${'เงินเดือน'}`"
                 type="number"
+              /> -->
+
+              <CurrencyInput
+                v-model="salary"
+                :edit="edit"
+                :options="{
+                  currency: 'THB',
+                }"
+                :label="`${'เงินเดือน'}`"
               />
             </div>
           </div>
@@ -463,6 +472,7 @@ import { ref, onMounted } from "vue";
 import { useCounterMixin } from "@/stores/mixin";
 import { useRetirementDataStore } from "@/modules/06_retirement/store";
 
+import CurrencyInput from "@/components/CurruncyInput.vue";
 import http from "@/plugins/http";
 import config from "@/app.config";