From 512f9840de8b1ce69e4534116c779ea59f96d271 Mon Sep 17 00:00:00 2001
From: waruneeauy <warunee.auy@gmail.com>
Date: Mon, 15 Dec 2025 13:21:08 +0700
Subject: [PATCH] fix currency

---
 src/components/CurruncyInput.vue              |  2 +-
 .../components/DialogEditSalary.vue           | 80 ++++++++++++-------
 .../components/Step/Dialog2_Salary.vue        | 47 ++++++++---
 3 files changed, 86 insertions(+), 43 deletions(-)

diff --git a/src/components/CurruncyInput.vue b/src/components/CurruncyInput.vue
index 9386d093e..e2b2f3ae0 100644
--- a/src/components/CurruncyInput.vue
+++ b/src/components/CurruncyInput.vue
@@ -44,7 +44,7 @@ const { inputRef, formattedValue, setValue } = useCurrencyInput({
   currency: "THB",
   currencyDisplay: "hidden" as any,
   hideCurrencySymbolOnFocus: true,
-  hideGroupingSeparatorOnFocus: true,
+  hideGroupingSeparatorOnFocus: false,
   hideNegligibleDecimalDigitsOnFocus: true,
   autoDecimalDigits: false,
   useGrouping: true,
diff --git a/src/modules/18_command/components/DialogEditSalary.vue b/src/modules/18_command/components/DialogEditSalary.vue
index 916451611..7c2a2b256 100644
--- a/src/modules/18_command/components/DialogEditSalary.vue
+++ b/src/modules/18_command/components/DialogEditSalary.vue
@@ -8,6 +8,7 @@ import { useRouter } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
 
 import DialogHeader from "@/components/DialogHeader.vue";
+import CurruncyInput from "@/components/CurruncyInput.vue";
 
 const $q = useQuasar();
 const router = useRouter();
@@ -372,55 +373,74 @@ watch(
                       :props="props"
                     >
                       <div v-if="col.name == 'amount'">
-                        <q-input
-                          :model-value="formatNumber(props.row.amount)"
-                          @update:model-value="(val:string) => props.row.amount = unformatNumber(val)"
-                          type="number"
+                        <CurruncyInput
+                          v-model="props.row.amount"
+                          :edit="true"
                           dense
-                          borderless
                           outlined
-                          :rules="[(val:string) => !!unformatNumber(val) || 'กรุณากรอกเงินเดือน']"
                           hide-bottom-space
+                          lazy-rules
+                          :rules="[
+                            (val:any) => !!val || 'กรุณากรอกเงินเดือน',
+                            (val:any) => {
+                              if (!val) return true;
+                              const numVal = typeof val === 'number' ? val : Number(String(val).replace(/,/g, ''));
+                              return numVal <= 10000000 || 'เงินเดือนต้องไม่เกิน 10,000,000 บาท';
+                            }
+                          ]"
                         />
                       </div>
                       <div v-else-if="col.name == 'amountSpecial'">
-                        <q-input
-                          :model-value="formatNumber(props.row.amountSpecial)"
-                          @update:model-value="(val:string) => props.row.amountSpecial = unformatNumber(val)"
-                          type="text"
+                        <CurruncyInput
+                          v-model="props.row.amountSpecial"
+                          :edit="true"
                           dense
-                          borderless
                           outlined
+                          hide-bottom-space
+                          lazy-rules
+                          :rules="[
+                            (val:any) => {
+                              if (!val) return true;
+                              const numVal = typeof val === 'number' ? val : Number(String(val).replace(/,/g, ''));
+                              return numVal <= 10000000 || 'เงินค่าตอบแทนพิเศษต้องไม่เกิน 10,000,000 บาท';
+                            }
+                          ]"
                         />
                         <!-- :rules="[(val:string) => !!val || 'กรุณากรอกเงินค่าตอบแทนพิเศษ']" -->
                       </div>
                       <div v-else-if="col.name == 'positionSalaryAmount'">
-                        <q-input
-                          :model-value="
-                            formatNumber(props.row.positionSalaryAmount)
-                          "
-                          @update:model-value="(val:string) => props.row.positionSalaryAmount = unformatNumber(val)"
-                          type="text"
+                        <CurruncyInput
+                          v-model="props.row.positionSalaryAmount"
+                          :edit="true"
                           dense
-                          borderless
                           outlined
+                          hide-bottom-space
+                          lazy-rules
+                          :rules="[
+                            (val:any) => {
+                              if (!val) return true;
+                              const numVal = typeof val === 'number' ? val : Number(String(val).replace(/,/g, ''));
+                              return numVal <= 10000000 || 'เงินประจำตำแหน่งต้องไม่เกิน 10,000,000 บาท';
+                            }
+                          ]"
                         />
                         <!-- :rules="[(val:string) => !!val || 'กรุณากรอกเงินประจำตำแหน่ง']" -->
                       </div>
                       <div v-else-if="col.name == 'mouthSalaryAmount'">
-                        <q-input
-                          :model-value="
-                            formatNumber(props.row.mouthSalaryAmount)
-                          "
-                          @update:model-value="
-                            (val:string) =>
-                              (props.row.mouthSalaryAmount =
-                                unformatNumber(val))
-                          "
-                          type="text"
+                        <CurruncyInput
+                          v-model="props.row.mouthSalaryAmount"
+                          :edit="true"
                           dense
-                          borderless
                           outlined
+                          hide-bottom-space
+                          lazy-rules
+                          :rules="[
+                            (val:any) => {
+                              if (!val) return true;
+                              const numVal = typeof val === 'number' ? val : Number(String(val).replace(/,/g, ''));
+                              return numVal <= 10000000 || 'เงินค่าตอบแทนรายเดือนต้องไม่เกิน 10,000,000 บาท';
+                            }
+                          ]"
                         />
                         <!-- :rules="[(val:string) => !!val || 'กรุณากรอกเงินค่าตอบแทนรายเดือน']" -->
                       </div>
@@ -429,6 +449,7 @@ watch(
                           v-model="props.row.remarkHorizontal"
                           type="textarea"
                           autorows
+                          hide-bottom-space
                           dense
                           borderless
                           outlined
@@ -440,6 +461,7 @@ watch(
                           v-model="props.row.remarkVertical"
                           type="textarea"
                           autorows
+                          hide-bottom-space
                           dense
                           borderless
                           outlined
diff --git a/src/modules/18_command/components/Step/Dialog2_Salary.vue b/src/modules/18_command/components/Step/Dialog2_Salary.vue
index 77a3efceb..68995a783 100644
--- a/src/modules/18_command/components/Step/Dialog2_Salary.vue
+++ b/src/modules/18_command/components/Step/Dialog2_Salary.vue
@@ -8,6 +8,7 @@ import { useCounterMixin } from "@/stores/mixin";
 import { useCommandMainStore } from "@/modules/18_command/store/Main";
 import { useCommandDetail } from "@/modules/18_command/store/DetailStore";
 import DialogHeader from "@/components/DialogHeader.vue";
+import CurruncyInput from "@/components/CurruncyInput.vue";
 
 const $q = useQuasar();
 const { showLoader, hideLoader, dialogConfirm, messageError, success } =
@@ -140,25 +141,30 @@ watch(
                 v-if="store.isShowSalary(type)"
                 class="col-xs-6 col-sm-6 col-md-6"
               >
-                <q-input
+                <CurruncyInput
                   dense
                   outlined
                   lazy-rules
                   hide-bottom-space
                   v-model="formData.amount"
                   :class="getClass(storeDetail.isSalary)"
-                  mask="###,###,###,###,###,###"
-                  reverse-fill-mask
                   :readonly="!storeDetail.isSalary"
                   :label="`${'เงินเดือน'}`"
-                  :rules="[(val: any) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
+                  :rules="[
+                    (val:any) => !!val || 'กรุณากรอกเงินเดือน',
+                    (val:any) => {
+                      if (!val) return true;
+                      const numVal = typeof val === 'number' ? val : Number(String(val).replace(/,/g, ''));
+                      return numVal <= 10000000 || 'เงินเดือนต้องไม่เกิน 10,000,000 บาท';
+                    }
+                  ]"
                 />
               </div>
               <div
                 v-if="store.isShowSalary(type)"
                 class="col-xs-6 col-sm-6 col-md-6"
               >
-                <q-input
+                <CurruncyInput
                   dense
                   outlined
                   lazy-rules
@@ -166,16 +172,21 @@ watch(
                   v-model="formData.amountSpecial"
                   :class="getClass(storeDetail.isSalary)"
                   :readonly="!storeDetail.isSalary"
-                  mask="###,###,###,###,###,###"
-                  reverse-fill-mask
                   :label="`${'เงินค่าตอบแทนพิเศษ'}`"
+                  :rules="[
+                    (val:any) => {
+                      if (!val) return true;
+                      const numVal = typeof val === 'number' ? val : Number(String(val).replace(/,/g, ''));
+                      return numVal <= 10000000 || 'เงินค่าตอบแทนพิเศษต้องไม่เกิน 10,000,000 บาท';
+                    }
+                  ]"
                 />
               </div>
               <div
                 v-if="store.isShowSalary(type)"
                 class="col-xs-6 col-sm-6 col-md-6"
               >
-                <q-input
+                <CurruncyInput
                   dense
                   outlined
                   lazy-rules
@@ -183,9 +194,14 @@ watch(
                   v-model="formData.positionSalaryAmount"
                   :class="getClass(storeDetail.isSalary)"
                   :readonly="!storeDetail.isSalary"
-                  mask="###,###,###,###,###,###"
-                  reverse-fill-mask
                   :label="`${'เงินประจำตำแหน่ง'}`"
+                  :rules="[
+                    (val:any) => {
+                      if (!val) return true;
+                      const numVal = typeof val === 'number' ? val : Number(String(val).replace(/,/g, ''));
+                      return numVal <= 10000000 || 'เงินประจำตำแหน่งต้องไม่เกิน 10,000,000 บาท';
+                    }
+                  ]"
                 />
               </div>
 
@@ -193,7 +209,7 @@ watch(
                 v-if="store.isShowSalary(type)"
                 class="col-xs-6 col-sm-6 col-md-6"
               >
-                <q-input
+                <CurruncyInput
                   dense
                   outlined
                   lazy-rules
@@ -201,9 +217,14 @@ watch(
                   v-model="formData.monthSalaryAmount"
                   :class="getClass(storeDetail.isSalary)"
                   :readonly="!storeDetail.isSalary"
-                  mask="###,###,###,###,###,###"
-                  reverse-fill-mask
                   :label="`${'เงินค่าตอบแทนรายเดือน'}`"
+                  :rules="[
+                    (val:any) => {
+                      if (!val) return true;
+                      const numVal = typeof val === 'number' ? val : Number(String(val).replace(/,/g, ''));
+                      return numVal <= 10000000 || 'เงินค่าตอบแทนรายเดือนต้องไม่เกิน 10,000,000 บาท';
+                    }
+                  ]"
                 />
               </div>
             </div>