fix:registry

src/modules/04_registryPerson/components/detail/Employee/01_DataEmployee.vue

@@ -8,13 +8,11 @@ import config from "@/app.config";
 
 import type { QTableColumn } from "quasar";
 import type { FormEmployee } from "@/modules/04_registryPerson/interface/request/Employee";
-import type {
+import type { ResEmployee } from "@/modules/04_registryPerson/interface/response/Employee";
-  EmployeeHistory,
-  ResEmployee,
-} from "@/modules/04_registryPerson/interface/response/Employee";
 
 import DialogHeader from "@/components/DialogHeader.vue";
 import DialogHistory from "@/modules/04_registryPerson/components/detail/DialogHistory.vue";
+import CurruncyInput from "@/components/CurruncyInput.vue";
 
 import { useCounterMixin } from "@/stores/mixin";
 
@@ -27,7 +25,6 @@ const {
   date2Thai,
   messageError,
   dialogConfirm,
-  onSearchDataTable,
 } = useCounterMixin();
 
 const profileId = ref<string>(
@@ -60,11 +57,11 @@ const formData = reactive<FormEmployee>({
   positionEmployeePositionId: "",
   employeeOc: "",
   employeeTypeIndividual: "",
-  employeeWage: "",
+  employeeWage: undefined,
-  employeeMoneyIncrease: "",
+  employeeMoneyIncrease: undefined,
-  employeeMoneyAllowance: "",
+  employeeMoneyAllowance: undefined,
-  employeeMoneyEmployee: "",
+  employeeMoneyEmployee: undefined,
-  employeeMoneyEmployer: "",
+  employeeMoneyEmployer: undefined,
 });
 
 /** function fetch ข้อมูลลูกจ้างชั่วคราว*/
@@ -101,11 +98,15 @@ function onClickEdit() {
   formData.positionEmployeePositionId = dataEmployee.positionEmployeePositionId;
   formData.employeeOc = dataEmployee.employeeOc;
   formData.employeeTypeIndividual = dataEmployee.employeeTypeIndividual;
-  formData.employeeWage = dataEmployee.employeeWage;
+  formData.employeeWage = Number(dataEmployee.employeeWage) || undefined;
-  formData.employeeMoneyIncrease = dataEmployee.employeeMoneyIncrease;
+  formData.employeeMoneyIncrease =
-  formData.employeeMoneyAllowance = dataEmployee.employeeMoneyAllowance;
+    Number(dataEmployee.employeeMoneyIncrease) || undefined;
-  formData.employeeMoneyEmployee = dataEmployee.employeeMoneyEmployee;
+  formData.employeeMoneyAllowance =
-  formData.employeeMoneyEmployer = dataEmployee.employeeMoneyEmployer;
+    Number(dataEmployee.employeeMoneyAllowance) || undefined;
+  formData.employeeMoneyEmployee =
+    Number(dataEmployee.employeeMoneyEmployee) || undefined;
+  formData.employeeMoneyEmployer =
+    Number(dataEmployee.employeeMoneyEmployer) || undefined;
 }
 
 /** function ปิด Dialog แก้ไขมูลลูกจ้างชั่วคราว*/
@@ -116,11 +117,11 @@ function onCloseDialog() {
   formData.positionEmployeePositionId = "";
   formData.employeeOc = "";
   formData.employeeTypeIndividual = "";
-  formData.employeeWage = "";
+  formData.employeeWage = undefined;
-  formData.employeeMoneyIncrease = "";
+  formData.employeeMoneyIncrease = undefined;
-  formData.employeeMoneyAllowance = "";
+  formData.employeeMoneyAllowance = undefined;
-  formData.employeeMoneyEmployee = "";
+  formData.employeeMoneyEmployee = undefined;
-  formData.employeeMoneyEmployer = "";
+  formData.employeeMoneyEmployer = undefined;
 }
 
 /** function บันทึกแก้ไขมูลลูกจ้างชั่วคราว*/
@@ -128,7 +129,15 @@ function onSubmit() {
   dialogConfirm($q, () => {
     showLoader();
     http
-      .put(config.API.informationEmployee(profileId.value), formData)
+      .put(config.API.informationEmployee(profileId.value), {
+        ...formData,
+        employeeWage: formData.employeeWage?.toString() || "",
+        employeeMoneyIncrease: formData.employeeMoneyIncrease?.toString() || "",
+        employeeMoneyAllowance:
+          formData.employeeMoneyAllowance?.toString() || "",
+        employeeMoneyEmployee: formData.employeeMoneyEmployee?.toString() || "",
+        employeeMoneyEmployer: formData.employeeMoneyEmployer?.toString() || "",
+      })
       .then(async () => {
         await fetchData();
         await success($q, "บันทึกข้อมูลสำเร็จ");
@@ -533,7 +542,8 @@ onMounted(() => {
               <!-- :rules="[(val: string) => !!val || `${'กรุณากรอกประเภทบุคคล'}`]" -->
             </div>
             <div class="col-xs-12 col-sm-6 col-md-6">
-              <q-input
+              <CurruncyInput
+                :edit="true"
                 dense
                 outlined
                 lazy-rules
@@ -541,14 +551,18 @@ onMounted(() => {
                 v-model="formData.employeeWage"
                 class="inputgreen"
                 label="ค่าจ้าง"
-                mask="###,###,###,###"
+                :rules="[(val:number) => {
-                reverse-fill-mask
+                              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 class="col-xs-12 col-sm-6 col-md-6">
-              <q-input
+              <CurruncyInput
+                :edit="true"
                 dense
                 outlined
                 lazy-rules
@@ -556,13 +570,17 @@ onMounted(() => {
                 v-model="formData.employeeMoneyIncrease"
                 class="inputgreen"
                 label="เงินเพิ่มการครองชีพชั่วคราว"
-                mask="###,###,###,###"
+                :rules="[(val:number) => {
-                reverse-fill-mask
+                              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 class="col-xs-12 col-sm-6 col-md-6">
-              <q-input
+              <CurruncyInput
+                :edit="true"
                 dense
                 outlined
                 lazy-rules
@@ -570,13 +588,17 @@ onMounted(() => {
                 v-model="formData.employeeMoneyAllowance"
                 class="inputgreen"
                 label="เงินช่วยเหลือการครองชีพชั่วคราว"
-                mask="###,###,###,###"
+                :rules="[(val:number) => {
-                reverse-fill-mask
+                              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 class="col-xs-12 col-sm-6 col-md-6">
-              <q-input
+              <CurruncyInput
+                :edit="true"
                 dense
                 outlined
                 lazy-rules
@@ -584,13 +606,17 @@ onMounted(() => {
                 v-model="formData.employeeMoneyEmployee"
                 class="inputgreen"
                 label="เงินสมทบประกันสังคม(ลูกจ้าง)"
-                mask="###,###,###,###"
+                :rules="[(val:number) => {
-                reverse-fill-mask
+                              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 class="col-xs-12 col-sm-6 col-md-6">
-              <q-input
+              <CurruncyInput
+                :edit="true"
                 dense
                 outlined
                 lazy-rules
@@ -598,8 +624,11 @@ onMounted(() => {
                 v-model="formData.employeeMoneyEmployer"
                 class="inputgreen"
                 label="เงินสมทบประกันสังคม(นายจ้าง)"
-                mask="###,###,###,###"
+                :rules="[(val:number) => {
-                reverse-fill-mask
+                              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>

src/modules/04_registryPerson/components/detail/GovernmentInformation/07_Position.vue

@@ -27,6 +27,7 @@ import type { DataCardPos } from "@/modules/04_registryPerson/interface/index/go
 import DialogHeader from "@/components/DialogHeader.vue";
 import DialogHistory from "@/modules/04_registryPerson/components/detail/DialogHistory.vue";
 import DialogPreviewCommand from "@/modules/18_command/components/DialogPreviewCommand.vue";
+import CurruncyInput from "@/components/CurruncyInput.vue";
 
 const $q = useQuasar();
 const route = useRoute();
@@ -370,8 +371,8 @@ const formData = reactive<FormPostition>({
   positionExecutive: "", //ตำแหน่งทางการบริหาร
   positionExecutiveField: "", //ด้านทางการบริหาร
   positionArea: "", //ด้าน/สาขา
-  amount: null, //เงินเดือน
+  amount: undefined, //เงินเดือน
-  amountSpecial: null, //เงินค่าตอบแทนพิเศษ
+  amountSpecial: undefined, //เงินค่าตอบแทนพิเศษ
   orgRoot: "", //หน่วยงาน
   orgChild1: "", //ส่วนราชการระดับ 1
   orgChild2: "", //ส่วนราชการระดับ 2
@@ -685,8 +686,8 @@ async function onClickOpenDialog(
     ? data.positionExecutiveField
     : "";
   formData.positionArea = statusEdit ? data.positionArea : "";
-  formData.amount = statusEdit ? data.amount : null;
+  formData.amount = statusEdit ? data.amount : undefined;
-  formData.amountSpecial = statusEdit ? data.amountSpecial : null;
+  formData.amountSpecial = statusEdit ? data.amountSpecial : undefined;
   formData.orgRoot = statusEdit ? data.orgRoot : "";
   formData.orgChild1 = statusEdit ? data.orgChild1 : "";
   formData.orgChild2 = statusEdit ? data.orgChild2 : "";
@@ -1468,31 +1469,43 @@ onMounted(async () => {
 
             <div class="col-xs-6 col-sm-6 col-md-4">
               <!-- :rules="[(val:string) => !!val || `${'กรุณากรอกเงินเดือน'}`]" -->
-              <q-input
+              <CurruncyInput
                 :class="classInput(true)"
+                :edit="true"
                 ref="salaryRef"
                 dense
                 outlined
                 v-model="formData.amount"
                 :label="empType == '' ? 'เงินเดือน' : 'ค่าจ้าง'"
-                mask="###,###,###,###"
-                reverse-fill-mask
                 lazy-rules
                 hide-bottom-space
+                :rules="[ 
+                            (val:number) => {
+                              if (!val) return true;
+                              const numVal = typeof val === 'number' ? val : Number(String(val).replace(/,/g, ''));
+                              return numVal <= 10000000 || ` ${empType == '' ? 'เงินเดือน' : 'ค่าจ้าง'} ต้องไม่เกิน 10,000,000 บาท`;
+                            }
+                          ]"
               />
             </div>
 
             <div class="col-xs-6 col-sm-6 col-md-4">
-              <q-input
+              <CurruncyInput
                 :class="classInput(true)"
+                :edit="true"
                 ref="amountSpecialRef"
                 dense
                 outlined
                 v-model="formData.amountSpecial"
                 label="เงินค่าตอบแทนพิเศษ"
-                mask="###,###,###,###"
-                reverse-fill-mask
                 hide-bottom-space
+                :rules="[ 
+                            (val:number) => {
+                              if (!val) return true;
+                              const numVal = typeof val === 'number' ? val : Number(String(val).replace(/,/g, ''));
+                              return numVal <= 10000000 || 'เงินค่าตอบแทนพิเศษต้องไม่เกิน 10,000,000 บาท';
+                            }
+                          ]"
               />
             </div>
 

src/modules/04_registryPerson/components/detail/Salary/01_PositionSalary.vue

@@ -26,6 +26,7 @@ import type { ResListSalary } from "@/modules/04_registryPerson/interface/respon
 import DialogHeader from "@/components/DialogHeader.vue";
 import DialogHistory from "@/modules/04_registryPerson/components/detail/DialogHistory.vue";
 import DialogPreviewCommand from "@/modules/18_command/components/DialogPreviewCommand.vue";
+import CurruncyInput from "@/components/CurruncyInput.vue";
 
 const { findOrgName } = useCounterMixin();
 const $q = useQuasar();
@@ -423,10 +424,10 @@ const formData = reactive<FormSalary>({
   positionExecutive: "", //ตำแหน่งทางการบริหาร
   positionExecutiveField: "", //ด้านทางการบริหาร
   positionArea: "", //ด้าน/สาขา
-  amount: null, //เงินเดือน
+  amount: undefined, //เงินเดือน
-  amountSpecial: null, //เงินค่าตอบแทนพิเศษ
+  amountSpecial: undefined, //เงินค่าตอบแทนพิเศษ
-  positionSalaryAmount: null, //เงินประจำตำแหน่ง
+  positionSalaryAmount: undefined, //เงินประจำตำแหน่ง
-  mouthSalaryAmount: null, //เงินค่าตอบแทนรายเดือน
+  mouthSalaryAmount: undefined, //เงินค่าตอบแทนรายเดือน
   orgRoot: "", //หน่วยงาน
   orgChild1: "", //ส่วนราชการระดับ 1
   orgChild2: "", //ส่วนราชการระดับ 2
@@ -666,10 +667,12 @@ async function onClickOpenDialog(
     ? data.positionExecutiveField
     : "";
   formData.positionArea = statusEdit ? data.positionArea : "";
-  formData.amount = statusEdit ? data.amount : null;
+  formData.amount = statusEdit ? data.amount : undefined;
-  formData.amountSpecial = statusEdit ? data.amountSpecial : null;
+  formData.amountSpecial = statusEdit ? data.amountSpecial : undefined;
-  formData.positionSalaryAmount = statusEdit ? data.positionSalaryAmount : null;
+  formData.positionSalaryAmount = statusEdit
-  formData.mouthSalaryAmount = statusEdit ? data.mouthSalaryAmount : null;
+    ? data.positionSalaryAmount
+    : undefined;
+  formData.mouthSalaryAmount = statusEdit ? data.mouthSalaryAmount : undefined;
   formData.orgRoot = statusEdit ? data.orgRoot : "";
   formData.orgChild1 = statusEdit ? data.orgChild1 : "";
   formData.orgChild2 = statusEdit ? data.orgChild2 : "";
@@ -1433,60 +1436,75 @@ onMounted(async () => {
             <div class="col-12">
               <div class="row q-col-gutter-sm">
                 <div class="col-xs-6 col-sm-6 col-md-4">
-                  <q-input
+                  <CurruncyInput
                     :class="classInput(true)"
+                    :edit="true"
                     ref="salaryRef"
                     dense
                     outlined
                     v-model="formData.amount"
                     :label="empType == '' ? 'เงินเดือน' : 'ค่าจ้าง'"
-                    mask="###,###,###,###"
+                    :rules="[(val:string) => !!val || `กรุณากรอก${empType == '' ? 'เงินเดือน' : 'ค่าจ้าง'}`, (val:number) => {
-                    reverse-fill-mask
+                              if (!val) return true;
-                    :rules="[(val:string) => !!val || `กรุณากรอก${empType == '' ? 'เงินเดือน' : 'ค่าจ้าง'}`]"
+                              const numVal = typeof val === 'number' ? val : Number(String(val).replace(/,/g, ''));
+                              return numVal <= 10000000 || ` ${empType == '' ? 'เงินเดือน' : 'ค่าจ้าง'} ต้องไม่เกิน 10,000,000 บาท`;
+                            }]"
                     lazy-rules
                     hide-bottom-space
                   />
                 </div>
 
                 <div class="col-xs-6 col-sm-6 col-md-4">
-                  <q-input
+                  <CurruncyInput
                     :class="classInput(true)"
+                    :edit="true"
                     ref="amountSpecialRef"
                     dense
                     outlined
                     v-model="formData.amountSpecial"
                     label="เงินค่าตอบแทนพิเศษ"
-                    mask="###,###,###,###"
-                    reverse-fill-mask
                     hide-bottom-space
+                    :rules="[(val:number) => {
+                              if (!val) return true;
+                              const numVal = typeof val === 'number' ? val : Number(String(val).replace(/,/g, ''));
+                              return numVal <= 10000000 || 'เงินค่าตอบแทนพิเศษต้องไม่เกิน 10,000,000 บาท';
+                            }]"
                   />
                 </div>
 
                 <div class="col-xs-6 col-sm-6 col-md-4">
-                  <q-input
+                  <CurruncyInput
                     :class="classInput(true)"
+                    :edit="true"
                     dense
                     outlined
                     v-model="formData.positionSalaryAmount"
                     label="เงินประจำตำแหน่ง"
-                    mask="###,###,###,###"
-                    reverse-fill-mask
                     lazy-rules
                     hide-bottom-space
+                    :rules="[(val:number) => {
+                              if (!val) return true;
+                              const numVal = typeof val === 'number' ? val : Number(String(val).replace(/,/g, ''));
+                              return numVal <= 10000000 || 'เงินประจำตำแหน่งต้องไม่เกิน 10,000,000 บาท';
+                            }]"
                   />
                 </div>
 
                 <div class="col-xs-6 col-sm-6 col-md-4">
-                  <q-input
+                  <CurruncyInput
                     :class="classInput(true)"
+                    :edit="true"
                     dense
                     outlined
                     v-model="formData.mouthSalaryAmount"
                     label="เงินค่าตอบแทนรายเดือน"
-                    mask="###,###,###,###"
-                    reverse-fill-mask
                     lazy-rules
                     hide-bottom-space
+                    :rules="[(val:number) => {
+                              if (!val) return true;
+                              const numVal = typeof val === 'number' ? val : Number(String(val).replace(/,/g, ''));
+                              return numVal <= 10000000 || 'เงินค่าตอบแทนรายเดือนต้องไม่เกิน 10,000,000 บาท';
+                            }]"
                   />
                 </div>
               </div>

src/modules/04_registryPerson/interface/index/government.ts

@@ -75,8 +75,8 @@ interface FormPostition {
   positionExecutiveField?: string; //ด้านทางการบริหาร
   positionArea?: string; //ด้าน/สาขา
   positionCee: string; //ระดับซี
-  amount: number | null; //เงินเดือน
+  amount: number | undefined; //เงินเดือน
-  amountSpecial: number | null; //เงินค่าตอบแทนพิเศษ
+  amountSpecial: number | undefined; //เงินค่าตอบแทนพิเศษ
   orgRoot: string; //หน่วยงาน
   orgChild1: string; //ส่วนราชการระดับ 1
   orgChild2: string; //ส่วนราชการระดับ 2

src/modules/04_registryPerson/interface/request/Edit.ts

@@ -22,10 +22,10 @@ interface FormDataSalary {
   positionPathSide: string; //ด้าน/สาขา
   positionExecutive: string; //ตำแหน่งทางการบริหาร
   positionExecutiveField: string; //ด้านทางการบริหาร
-  amount: number | null; //เงินเดือน
+  amount: number | undefined; //เงินเดือน
-  amountSpecial: number | null; //เงินค่าตอบแทนพิเศษ
+  amountSpecial: number | undefined; //เงินค่าตอบแทนพิเศษ
-  positionSalaryAmount: number | null; //เงินประจำตำแหน่ง
+  positionSalaryAmount: number | undefined; //เงินประจำตำแหน่ง
-  mouthSalaryAmount: number | null; //เงินค่าตอบแทนรายเดือน
+  mouthSalaryAmount: number | undefined; //เงินค่าตอบแทนรายเดือน
   orgRoot: string; //หน่วยงาน
   orgChild1: string; //ส่วนราชการระดับ 1
   orgChild2: string; //ส่วนราชการระดับ 2

src/modules/04_registryPerson/interface/request/Employee.ts

@@ -4,11 +4,11 @@ interface FormEmployee {
   positionEmployeePositionId: string;
   employeeOc: string;
   employeeTypeIndividual: string;
-  employeeWage: string;
+  employeeWage: number | undefined;
-  employeeMoneyIncrease: string;
+  employeeMoneyIncrease: number | undefined;
-  employeeMoneyAllowance: string;
+  employeeMoneyAllowance: number | undefined;
-  employeeMoneyEmployee: string;
+  employeeMoneyEmployee: number | undefined;
-  employeeMoneyEmployer: string;
+  employeeMoneyEmployer: number | undefined;
 }
 
 interface FormEmployment {

src/modules/04_registryPerson/interface/request/Salary.ts

@@ -15,10 +15,10 @@ interface FormSalary {
   positionExecutive: string; //ตำแหน่งทางการบริหาร
   positionExecutiveField?: string; //ด้านทางการบริหาร
   positionArea?: string; //ด้าน/สาขา
-  amount: number | null; //เงินเดือน
+  amount: number | undefined; //เงินเดือน
-  amountSpecial: number | null; //เงินค่าตอบแทนพิเศษ
+  amountSpecial: number | undefined; //เงินค่าตอบแทนพิเศษ
-  positionSalaryAmount: number | null; //เงินประจำตำแหน่ง
+  positionSalaryAmount: number | undefined; //เงินประจำตำแหน่ง
-  mouthSalaryAmount: number | null; //เงินค่าตอบแทนรายเดือน
+  mouthSalaryAmount: number | undefined; //เงินค่าตอบแทนรายเดือน
   orgRoot: string; //หน่วยงาน
   orgChild1: string; //ส่วนราชการระดับ 1
   orgChild2: string; //ส่วนราชการระดับ 2

src/modules/04_registryPerson/views/edit/components/DialogForm.vue

@@ -62,10 +62,10 @@ const formData = reactive<FormDataSalary>({
   positionPathSide: "", //ด้าน/สาขา
   positionExecutive: "", //ตำแหน่งทางการบริหาร
   positionExecutiveField: "", //ด้านทางการบริหาร
-  amount: null, //เงินเดือน
+  amount: undefined, //เงินเดือน
-  amountSpecial: null, //เงินค่าตอบแทนพิเศษ
+  amountSpecial: undefined, //เงินค่าตอบแทนพิเศษ
-  positionSalaryAmount: null, //เงินประจำตำแหน่ง
+  positionSalaryAmount: undefined, //เงินประจำตำแหน่ง
-  mouthSalaryAmount: null, //เงินค่าตอบแทนรายเดือน
+  mouthSalaryAmount: undefined, //เงินค่าตอบแทนรายเดือน
   orgRoot: "", //หน่วยงาน
   orgChild1: "", //ส่วนราชการระดับ 1
   orgChild2: "", //ส่วนราชการระดับ 2
@@ -91,10 +91,10 @@ const formReadonly = reactive<FormDataSalary>({
   positionPathSide: "", //ด้าน/สาขา
   positionExecutive: "", //ตำแหน่งทางการบริหาร
   positionExecutiveField: "", //ด้านทางการบริหาร
-  amount: null, //เงินเดือน
+  amount: undefined, //เงินเดือน
-  amountSpecial: null, //เงินค่าตอบแทนพิเศษ
+  amountSpecial: undefined, //เงินค่าตอบแทนพิเศษ
-  positionSalaryAmount: null, //เงินประจำตำแหน่ง
+  positionSalaryAmount: undefined, //เงินประจำตำแหน่ง
-  mouthSalaryAmount: null, //เงินค่าตอบแทนรายเดือน
+  mouthSalaryAmount: undefined, //เงินค่าตอบแทนรายเดือน
   orgRoot: "", //หน่วยงาน
   orgChild1: "", //ส่วนราชการระดับ 1
   orgChild2: "", //ส่วนราชการระดับ 2
@@ -377,10 +377,10 @@ function onClickCloseDialog() {
   formData.positionPathSide = "";
   formData.positionExecutive = "";
   formData.positionExecutiveField = "";
-  formData.amount = null;
+  formData.amount = undefined;
-  formData.amountSpecial = null;
+  formData.amountSpecial = undefined;
-  formData.positionSalaryAmount = null;
+  formData.positionSalaryAmount = undefined;
-  formData.mouthSalaryAmount = null;
+  formData.mouthSalaryAmount = undefined;
   formData.orgRoot = "";
   formData.orgChild1 = "";
   formData.orgChild2 = "";
@@ -405,9 +405,9 @@ function onClickCloseDialog() {
   formReadonly.positionPathSide = "";
   formReadonly.positionExecutive = "";
   formReadonly.positionExecutiveField = "";
-  formReadonly.amount = null;
+  formReadonly.amount = undefined;
-  formReadonly.positionSalaryAmount = null;
+  formReadonly.positionSalaryAmount = undefined;
-  formReadonly.mouthSalaryAmount = null;
+  formReadonly.mouthSalaryAmount = undefined;
   formReadonly.orgRoot = "";
   formReadonly.orgChild1 = "";
   formReadonly.orgChild2 = "";

src/modules/04_registryPerson/views/edit/components/FormPosition.vue

@@ -5,6 +5,8 @@ import { useEditPosDataStore } from "@/modules/04_registryPerson/stores/Edit";
 import type { DataOption } from "@/modules/04_registryPerson/interface/index/Main";
 import type { FormDataSalary } from "@/modules/04_registryPerson/interface/request/Edit";
 
+import CurruncyInput from "@/components/CurruncyInput.vue";
+
 const { date2Thai } = useCounterMixin();
 const store = useEditPosDataStore();
 
@@ -597,7 +599,7 @@ function classInput(val: boolean) {
     <div class="col-12">
       <div class="row q-col-gutter-sm">
         <div class="col-xs-6 col-sm-6 col-md-4">
-          <q-input
+          <CurruncyInput
             :class="classInput(isReadonly)"
             :readonly="isReadonly"
             ref="salaryRef"
@@ -605,15 +607,20 @@ function classInput(val: boolean) {
             outlined
             v-model="formData.amount"
             label="เงินเดือน"
-            mask="###,###,###,###"
-            reverse-fill-mask
             lazy-rules
             hide-bottom-space
+            :rules="[ 
+                            (val:number) => {
+                              if (!val) return true;
+                              const numVal = typeof val === 'number' ? val : Number(String(val).replace(/,/g, ''));
+                              return numVal <= 10000000 || 'เงินเดือนต้องไม่เกิน 10,000,000 บาท';
+                            }
+                          ]"
           />
         </div>
 
         <div class="col-xs-6 col-sm-6 col-md-4">
-          <q-input
+          <CurruncyInput
             :class="classInput(isReadonly)"
             :readonly="isReadonly"
             ref="amountSpecialRef"
@@ -621,39 +628,54 @@ function classInput(val: boolean) {
             outlined
             v-model="formData.amountSpecial"
             label="เงินค่าตอบแทนพิเศษ"
-            mask="###,###,###,###"
-            reverse-fill-mask
             hide-bottom-space
+            :rules="[ 
+                            (val:number) => {
+                              if (!val) return true;
+                              const numVal = typeof val === 'number' ? val : Number(String(val).replace(/,/g, ''));
+                              return numVal <= 10000000 || 'เงินค่าตอบแทนพิเศษต้องไม่เกิน 10,000,000 บาท';
+                            }
+                          ]"
           />
         </div>
 
         <div class="col-xs-6 col-sm-6 col-md-4">
-          <q-input
+          <CurruncyInput
             :class="classInput(isReadonly)"
             :readonly="isReadonly"
             dense
             outlined
             v-model="formData.positionSalaryAmount"
             label="เงินประจำตำแหน่ง"
-            mask="###,###,###,###"
-            reverse-fill-mask
-            lazy-rules
             hide-bottom-space
+            lazy-rules
+            :rules="[ 
+                            (val:number) => {
+                              if (!val) return true;
+                              const numVal = typeof val === 'number' ? val : Number(String(val).replace(/,/g, ''));
+                              return numVal <= 10000000 || 'เงินประจำตำแหน่งต้องไม่เกิน 10,000,000 บาท';
+                            }
+                          ]"
           />
         </div>
 
         <div class="col-xs-6 col-sm-6 col-md-4">
-          <q-input
+          <CurruncyInput
             :class="classInput(isReadonly)"
             :readonly="isReadonly"
             dense
             outlined
             v-model="formData.mouthSalaryAmount"
             label="เงินค่าตอบแทนรายเดือน"
-            mask="###,###,###,###"
-            reverse-fill-mask
             lazy-rules
             hide-bottom-space
+            :rules="[ 
+                            (val:number) => {
+                              if (!val) return true;
+                              const numVal = typeof val === 'number' ? val : Number(String(val).replace(/,/g, ''));
+                              return numVal <= 10000000 || 'เงินค่าตอบแทนรายเดือนต้องไม่เกิน 10,000,000 บาท';
+                            }
+                          ]"
           />
         </div>
       </div>

src/modules/04_registryPerson/views/edit/components/Table.vue

@@ -20,6 +20,7 @@ import type {
 
 import DialogForm from "@/modules/04_registryPerson/views/edit/components/DialogForm.vue";
 import DialogSort from "@/modules/04_registryPerson/views/edit/components/DialogSort.vue";
+import CurruncyInput from "@/components/CurruncyInput.vue";
 
 const $q = useQuasar();
 const route = useRoute();
@@ -47,6 +48,10 @@ const statusCheckEdit = defineModel<string>("statusCheckEdit", {
   required: true,
 });
 
+const amountRef = ref<any>(null);
+const amountSpecialRef = ref<any>(null);
+const currencyPopupRef = ref<any>(null);
+
 //Table
 const isLoad = ref<boolean>(true);
 const rowIndex = ref<number>(0);
@@ -341,7 +346,6 @@ function onEditData(index: number) {
   rowIndex.value = index;
   modal.value = true;
   isAddPosition.value = index === -1; // ถ้า index เป็น -1 แสดงว่าเป็นการเพิ่มข้อมูลใหม่
-  console.log(`isAddPosition: ${isAddPosition.value}`);
 }
 
 /**
@@ -559,6 +563,14 @@ function onShow(data: DataPosition, colName: string) {
  * @param close
  */
 async function onSave(val: any, id: string, close?: () => void) {
+  // ตรวจสอบ validation ถ้า amountRef มีค่าและมี validate method
+  if (amountRef.value && typeof amountRef.value.validate === "function") {
+    const isValid = amountRef.value.validate();
+    if (isValid === false) {
+      return; // หยุดการบันทึกถ้า validation ไม่ผ่าน
+    }
+  }
+
   if (isUpdateData.value) {
     showLoader();
     const isCol = (key: string) => colNameMain.value === key;
@@ -746,6 +758,97 @@ function onUpdateData() {
   isUpdateData.value = true;
 }
 
+/**
+ * ฟังก์ชันตรวจสอบ validation และบันทึกข้อมูลสำหรับทุกประเภท
+ */
+async function validateAndSave(
+  val: any,
+  id: string,
+  close?: () => void,
+  fieldType: "amount" | "currency" | "normal" = "normal"
+) {
+  let isValid = true;
+
+  // ตรวจสอบ validation สำหรับ amount fields
+  if (fieldType === "amount") {
+    // Validate เงินเดือน
+    if (formData.amount !== null && formData.amount !== undefined) {
+      const amountNum =
+        typeof formData.amount === "number"
+          ? formData.amount
+          : Number(String(formData.amount).replace(/,/g, ""));
+      if (amountNum > 10000000) {
+        isValid = false;
+      }
+    }
+
+    // Validate เงินค่าตอบแทนพิเศษ
+    if (
+      isValid &&
+      formData.amountSpecial !== null &&
+      formData.amountSpecial !== undefined
+    ) {
+      const amountSpecialNum =
+        typeof formData.amountSpecial === "number"
+          ? formData.amountSpecial
+          : Number(String(formData.amountSpecial).replace(/,/g, ""));
+      if (amountSpecialNum > 10000000) {
+        isValid = false;
+      }
+    }
+
+    // Force validate refs ถ้ามี
+    if (
+      isValid &&
+      amountRef.value &&
+      typeof amountRef.value.validate === "function"
+    ) {
+      const amountValid = amountRef.value.validate();
+      isValid = isValid && amountValid !== false;
+    }
+
+    if (
+      isValid &&
+      amountSpecialRef.value &&
+      typeof amountSpecialRef.value.validate === "function"
+    ) {
+      const amountSpecialValid = amountSpecialRef.value.validate();
+      isValid = isValid && amountSpecialValid !== false;
+    }
+  }
+
+  // ตรวจสอบ validation สำหรับ currency fields อื่นๆ
+  else if (fieldType === "currency") {
+    // Validate ค่าโดยตรงก่อน
+    if (val !== null && val !== undefined) {
+      const numVal =
+        typeof val === "number" ? val : Number(String(val).replace(/,/g, ""));
+      if (numVal > 10000000) {
+        isValid = false;
+      }
+    }
+
+    // Force validate ref ถ้ามี
+    if (
+      isValid &&
+      currencyPopupRef.value &&
+      typeof currencyPopupRef.value.validate === "function"
+    ) {
+      const currencyValid = currencyPopupRef.value.validate();
+      isValid = isValid && currencyValid !== false;
+    }
+  }
+
+  // บันทึกข้อมูลถ้า validation ผ่าน
+  if (isValid) {
+    await onSave(val, id, close);
+    return true;
+  } else {
+    // หยุดการบันทึกถ้า validation ไม่ผ่าน (rules จะแสดง error message เอง)
+    return false;
+  }
+}
+
 onMounted(async () => {
   await Promise.all([fetchData(), fetchType()]);
 });
@@ -946,7 +1049,11 @@ onMounted(async () => {
                   label-set="บันทึก"
                   label-cancel="ยกเลิก"
                   @before-show="onShow(props.row, col.name)"
-                  :persistent="col.name === 'commandNo'"
+                  :persistent="
+                    col.name === 'commandNo' || col.name === 'amount'
+                  "
+                  :buttons="false"
+                  @save="null"
                 >
                   <div class="q-mb-xs">
                     {{ `แก้ไข${col.label}` }}
@@ -999,27 +1106,65 @@ onMounted(async () => {
                   </div>
 
                   <div class="q-gutter-sm" v-if="col.name === 'amount'">
-                    <q-input
+                    <CurruncyInput
+                      ref="amountRef"
+                      :edit="true"
                       dense
                       outlined
                       v-model="formData.amount"
                       label="เงินเดือน"
-                      mask="###,###,###,###"
-                      reverse-fill-mask
                       lazy-rules
                       hide-bottom-space
                       @update:model-value="onUpdateData"
+                      :rules="[ 
+                            (val:number) => {
+                              if (!val) return true;
+                              const numVal = typeof val === 'number' ? val : Number(String(val).replace(/,/g, ''));
+                              return numVal <= 10000000 || 'เงินเดือนต้องไม่เกิน 10,000,000 บาท';
+                            }
+                          ]"
                     />
-                    <q-input
+                    <CurruncyInput
+                      ref="amountSpecialRef"
+                      :edit="true"
                       dense
                       outlined
                       v-model="formData.amountSpecial"
                       label="เงินค่าตอบแทนพิเศษ"
-                      mask="###,###,###,###"
-                      reverse-fill-mask
                       hide-bottom-space
+                      lazy-rules
                       @update:model-value="onUpdateData"
+                      :rules="[ 
+                            (val:number) => {
+                              if (!val) return true;
+                              const numVal = typeof val === 'number' ? val : Number(String(val).replace(/,/g, ''));
+                              return numVal <= 10000000 || 'เงินค่าตอบแทนพิเศษต้องไม่เกิน 10,000,000 บาท';
+                            }
+                          ]"
                     />
+
+                    <!-- Custom buttons สำหรับ amount -->
+                    <div class="row justify-around q-pt-sm">
+                      <q-btn
+                        flat
+                        color="primary"
+                        label="ยกเลิก"
+                        @click="scope.cancel"
+                      />
+                      <q-btn
+                        flat
+                        color="primary"
+                        label="บันทึก"
+                        @click="
+                          validateAndSave(
+                            formData,
+                            props.row.id,
+                            scope.cancel,
+                            'amount'
+                          )
+                        "
+                      />
+                    </div>
                   </div>
 
                   <div class="q-gutter-sm" v-else-if="col.name === 'posNo'">
@@ -1165,7 +1310,11 @@ onMounted(async () => {
                     </q-select>
                   </div>
 
-                  <div class="row justify-around q-pt-sm">
+                  <!-- Default buttons สำหรับ fields อื่นๆ (ไม่ใช่ amount และ positionLevel) -->
+                  <div
+                    v-if="col.name !== 'amount' && col.name !== 'positionLevel'"
+                    class="row justify-around q-pt-sm"
+                  >
                     <q-btn
                       flat
                       color="primary"
@@ -1177,7 +1326,40 @@ onMounted(async () => {
                       flat
                       color="primary"
                       label="บันทึก"
-                      @click="onSave(formData, props.row.id, scope.cancel)"
+                      @click="
+                        validateAndSave(
+                          formData,
+                          props.row.id,
+                          scope.cancel,
+                          'normal'
+                        )
+                      "
+                    />
+                  </div>
+
+                  <!-- Custom buttons สำหรับ positionLevel -->
+                  <div
+                    v-if="col.name === 'positionLevel'"
+                    class="row justify-around q-pt-sm"
+                  >
+                    <q-btn
+                      flat
+                      color="primary"
+                      label="ยกเลิก"
+                      @click="scope.cancel"
+                    />
+                    <q-btn
+                      flat
+                      color="primary"
+                      label="บันทึก"
+                      @click="
+                        validateAndSave(
+                          formData,
+                          props.row.id,
+                          scope.cancel,
+                          'normal'
+                        )
+                      "
                     />
                   </div>
                 </q-popup-edit>
@@ -1205,6 +1387,8 @@ onMounted(async () => {
                   label-set="บันทึก"
                   label-cancel="ยกเลิก"
                   @before-show="onShow(props.row, col.name)"
+                  :buttons="false"
+                  @save="null"
                 >
                   <div class="q-mb-xs">
                     {{ `แก้ไข${col.label}` }}
@@ -1276,7 +1460,14 @@ onMounted(async () => {
                       flat
                       color="primary"
                       label="บันทึก"
-                      @click="onSave(formData, props.row.id, scope.cancel)"
+                      @click="
+                        validateAndSave(
+                          formData,
+                          props.row.id,
+                          scope.cancel,
+                          'normal'
+                        )
+                      "
                     />
                   </div>
                 </q-popup-edit>
@@ -1293,13 +1484,37 @@ onMounted(async () => {
                   v-slot="scope"
                   :persistent="
                     col.name === 'commandDateAffect' ||
-                    col.name === 'commandDateSign'
+                    col.name === 'commandDateSign' ||
+                    col.name === 'mouthSalaryAmount' ||
+                    col.name === 'positionSalaryAmount'
                   "
                   v-model="props.row[col.name]"
-                  buttons
+                  :buttons="
+                    col.name !== 'mouthSalaryAmount' &&
+                    col.name !== 'positionSalaryAmount' &&
+                    col.name !== 'commandDateAffect' &&
+                    col.name !== 'commandDateSign' &&
+                    col.name !== 'positionName' &&
+                    col.name !== 'positionExecutive' &&
+                    col.name !== 'positionExecutiveField' &&
+                    col.name !== 'remark' &&
+                    col.name !== 'positionType'
+                  "
                   label-set="บันทึก"
                   label-cancel="ยกเลิก"
-                  @save="onSave"
+                  @save="
+                    col.name === 'mouthSalaryAmount' ||
+                    col.name === 'positionSalaryAmount' ||
+                    col.name === 'commandDateAffect' ||
+                    col.name === 'commandDateSign' ||
+                    col.name === 'positionName' ||
+                    col.name === 'positionExecutive' ||
+                    col.name === 'positionExecutiveField' ||
+                    col.name === 'remark' ||
+                    col.name === 'positionType'
+                      ? null
+                      : onSave
+                  "
                   @before-show="onShow(props.row, col.name)"
                 >
                   <div class="q-mb-xs">
@@ -1360,19 +1575,26 @@ onMounted(async () => {
                     @update:model-value="onUpdateData"
                   />
 
-                  <q-input
+                  <CurruncyInput
                     v-else-if="
                       col.name === 'mouthSalaryAmount' ||
                       col.name === 'positionSalaryAmount'
                     "
+                    :ref="`currencyRef_${col.name}`"
+                    :edit="true"
                     dense
                     outlined
                     v-model="scope.value"
-                    mask="###,###,###,###"
-                    reverse-fill-mask
                     lazy-rules
                     hide-bottom-space
                     @update:model-value="onUpdateData"
+                    :rules="[ 
+                            (val:number) => {
+                              if (!val) return true;
+                              const numVal = typeof val === 'number' ? val : Number(String(val).replace(/,/g, ''));
+                              return numVal <= 10000000 || `${col.label}ต้องไม่เกิน 10,000,000 บาท`;
+                            }
+                          ]"
                   />
 
                   <q-select
@@ -1409,6 +1631,77 @@ onMounted(async () => {
                       </q-item>
                     </template>
                   </q-select>
+
+                  <!-- Custom buttons สำหรับ persistent fields -->
+                  <div
+                    v-if="
+                      col.name === 'mouthSalaryAmount' ||
+                      col.name === 'positionSalaryAmount' ||
+                      col.name === 'commandDateAffect' ||
+                      col.name === 'commandDateSign'
+                    "
+                    class="row justify-around q-pt-sm"
+                  >
+                    <q-btn
+                      flat
+                      color="primary"
+                      label="ยกเลิก"
+                      @click="scope.cancel"
+                    />
+                    <q-btn
+                      flat
+                      color="primary"
+                      label="บันทึก"
+                      @click="
+                        col.name === 'mouthSalaryAmount' ||
+                        col.name === 'positionSalaryAmount'
+                          ? validateAndSave(
+                              scope.value,
+                              props.row.id,
+                              scope.cancel,
+                              'currency'
+                            )
+                          : validateAndSave(
+                              scope.value,
+                              props.row.id,
+                              scope.cancel,
+                              'normal'
+                            )
+                      "
+                    />
+                  </div>
+
+                  <!-- Default buttons สำหรับ fields อื่นๆ ที่ไม่ใช่ persistent -->
+                  <div
+                    v-else-if="
+                      col.name === 'positionName' ||
+                      col.name === 'positionExecutive' ||
+                      col.name === 'positionExecutiveField' ||
+                      col.name === 'remark' ||
+                      col.name === 'positionType'
+                    "
+                    class="row justify-around q-pt-sm"
+                  >
+                    <q-btn
+                      flat
+                      color="primary"
+                      label="ยกเลิก"
+                      @click="scope.cancel"
+                    />
+                    <q-btn
+                      flat
+                      color="primary"
+                      label="บันทึก"
+                      @click="
+                        validateAndSave(
+                          scope.value,
+                          props.row.id,
+                          scope.cancel,
+                          'normal'
+                        )
+                      "
+                    />
+                  </div>
                 </q-popup-edit>
               </div>
             </q-td>