From 1adbf574a623aa180766876c99772b397626b413 Mon Sep 17 00:00:00 2001
From: AnandaTon <ananda@frappet.com>
Date: Mon, 4 Sep 2023 17:46:16 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=E0=B9=84=E0=B8=82?=
 =?UTF-8?q?=E0=B8=81=E0=B8=B2=E0=B8=A3=E0=B9=81=E0=B8=AA=E0=B8=94=E0=B8=87?=
 =?UTF-8?q?=E0=B9=80=E0=B8=84=E0=B8=A3=E0=B8=B7=E0=B9=88=E0=B8=AD=E0=B8=87?=
 =?UTF-8?q?=E0=B8=AB=E0=B8=A1=E0=B8=B2=E0=B8=A2=20"=20,=20"=20=E0=B9=83?=
 =?UTF-8?q?=E0=B8=99=E0=B8=88=E0=B8=B3=E0=B8=99=E0=B8=A7=E0=B8=99=E0=B9=80?=
 =?UTF-8?q?=E0=B8=87=E0=B8=B4=E0=B8=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/information/Salary.vue         |  13 +-
 src/modules/04_registry/components/Salary.vue | 561 ++++++++++++++----
 .../views/SalaryEmployee.vue                  |  20 +-
 3 files changed, 463 insertions(+), 131 deletions(-)

diff --git a/src/components/information/Salary.vue b/src/components/information/Salary.vue
index 4db908a90..619957561 100644
--- a/src/components/information/Salary.vue
+++ b/src/components/information/Salary.vue
@@ -349,7 +349,15 @@
                       />
                     </div>
                     <div class="col-xs-4 col-sm-4 col-md-4">
-                      <q-input
+                      <CurrencyInput
+                        v-model="amount"
+                        :edit="edit"
+                        :options="{
+                          currency: 'THB',
+                        }"
+                        :label="`${'เงินเดือน'}`"
+                      />
+                      <!-- <q-input
                         :class="getClass(edit)"
                         :outlined="edit"
                         dense
@@ -362,7 +370,7 @@
                         @update:modelValue="clickEditRow"
                         type="number"
                         hide-bottom-space
-                      />
+                      /> -->
                     </div>
                     <div class="col-xs-4 col-sm-4 col-md-4">
                       <q-input
@@ -570,6 +578,7 @@ import HistoryTable from "@/components/TableHistory.vue";
 import http from "@/plugins/http";
 import config from "@/app.config";
 import type { QTableProps } from "quasar";
+import CurrencyInput from "@/components/CurruncyInput.vue";
 
 const props = defineProps({
   statusEdit: {
diff --git a/src/modules/04_registry/components/Salary.vue b/src/modules/04_registry/components/Salary.vue
index db986686d..e1c337205 100644
--- a/src/modules/04_registry/components/Salary.vue
+++ b/src/modules/04_registry/components/Salary.vue
@@ -2,27 +2,55 @@
 <template>
   <q-card flat bordered class="col-12 q-px-lg q-py-md">
     <q-form ref="myForm">
-      <ProfileTable :rows="rows" :columns="columns" :filter="filter" :visible-columns="visibleColumns"
-        v-model:inputfilter="filter" v-model:inputvisible="visibleColumns" :add="clickAdd" name="ตำแหน่ง/เงินเดือน"
-        icon="mdi-cash" :statusEdit="statusEdit">
+      <ProfileTable
+        :rows="rows"
+        :columns="columns"
+        :filter="filter"
+        :visible-columns="visibleColumns"
+        v-model:inputfilter="filter"
+        v-model:inputvisible="visibleColumns"
+        :add="clickAdd"
+        name="ตำแหน่ง/เงินเดือน"
+        icon="mdi-cash"
+        :statusEdit="statusEdit"
+      >
         <template #columns="props">
           <q-tr :props="props">
-            <q-td v-for="col in props.cols" :key="col.name" :props="props" @click="selectData(props)"
-              class="cursor-pointer">
+            <q-td
+              v-for="col in props.cols"
+              :key="col.name"
+              :props="props"
+              @click="selectData(props)"
+              class="cursor-pointer"
+            >
               <div v-if="col.name == 'date'" class="table_ellipsis">
                 {{ date2Thai(col.value) }}
               </div>
-              <div v-else-if="props.row.salaryStatus !== 'DEATH' && (
-                  col.name == 'positionSalaryAmount' ||
-                  col.name == 'mouthSalaryAmount' ||
-                  col.name == 'amount')
-                " class="table_ellipsis">
+              <div
+                v-else-if="
+                  props.row.salaryStatus !== 'DEATH' &&
+                  (col.name == 'positionSalaryAmount' ||
+                    col.name == 'mouthSalaryAmount' ||
+                    col.name == 'amount')
+                "
+                class="table_ellipsis"
+              >
                 {{ col.value == null ? "" : col.value.toLocaleString("en-US") }}
               </div>
-              <div v-else-if="props.row.salaryStatus === 'DEATH' && col.name == 'position'" class="table_ellipsis">
+              <div
+                v-else-if="
+                  props.row.salaryStatus === 'DEATH' && col.name == 'position'
+                "
+                class="table_ellipsis"
+              >
                 ถึงแก่กรรม
               </div>
-              <div v-else-if="props.row.salaryStatus === 'DEATH' && col.name !== 'salaryRef'" class="table_ellipsis">
+              <div
+                v-else-if="
+                  props.row.salaryStatus === 'DEATH' && col.name !== 'salaryRef'
+                "
+                class="table_ellipsis"
+              >
                 -
               </div>
               <div v-else class="table_ellipsis">
@@ -30,7 +58,15 @@
               </div>
             </q-td>
             <q-td auto-width>
-              <q-btn color="info" flat dense round size="14px" icon="mdi-history" @click="clickHistory(props.row)" />
+              <q-btn
+                color="info"
+                flat
+                dense
+                round
+                size="14px"
+                icon="mdi-history"
+                @click="clickHistory(props.row)"
+              />
             </q-td>
           </q-tr>
         </template>
@@ -48,19 +84,46 @@
             <div class="col-xs-12 col-sm-5 row">
               <q-card flat bordered class="fit q-pa-sm">
                 <q-scroll-area visible style="height: 70vh">
-                  <q-input outlined dense v-model="search" placeholder="ค้นหา" class="q-mb-sm">
+                  <q-input
+                    outlined
+                    dense
+                    v-model="search"
+                    placeholder="ค้นหา"
+                    class="q-mb-sm"
+                  >
                     <template v-slot:append>
                       <q-icon name="mdi-magnify" />
                     </template>
                   </q-input>
-                  <q-tree v-if="edit" :nodes="nodesTree" dense node-key="id" v-model:selected="selected"
-                    v-model:expanded="expanded" no-selection-unset selected-color="primary" @update:selected="onSelected"
-                    default-expand-all />
-                  <q-tree v-else :nodes="nodesTree" dense node-key="id" v-model:expanded="expanded" no-selection-unset
-                    selected-color="primary" @update:selected="onSelected" default-expand-all>
+                  <q-tree
+                    v-if="edit"
+                    :nodes="nodesTree"
+                    dense
+                    node-key="id"
+                    v-model:selected="selected"
+                    v-model:expanded="expanded"
+                    no-selection-unset
+                    selected-color="primary"
+                    @update:selected="onSelected"
+                    default-expand-all
+                  />
+                  <q-tree
+                    v-else
+                    :nodes="nodesTree"
+                    dense
+                    node-key="id"
+                    v-model:expanded="expanded"
+                    no-selection-unset
+                    selected-color="primary"
+                    @update:selected="onSelected"
+                    default-expand-all
+                  >
                     <template v-slot:default-header="prop">
                       <div class="row items-center">
-                        <div class="text-primary" v-if="selected == prop.node.id">
+                        <div
+                          class="text-primary"
+                          v-if="selected == prop.node.id"
+                        >
                           {{ prop.node.label }}
                         </div>
                         <div v-else>
@@ -78,24 +141,46 @@
                   <div class="row col-12 q-col-gutter-xs">
                     <div class="col-xs-12 col-sm-12 col-md-12"></div>
                     <div class="col-xs-6 col-sm-6 col-md-6">
-                      <datepicker menu-class-name="modalfix" :readonly="!edit" v-model="date" :locale="'th'" autoApply
-                        :enableTimePicker="false" @update:modelValue="clickEditRow" week-start="0">
+                      <datepicker
+                        menu-class-name="modalfix"
+                        :readonly="!edit"
+                        v-model="date"
+                        :locale="'th'"
+                        autoApply
+                        :enableTimePicker="false"
+                        @update:modelValue="clickEditRow"
+                        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"
-                            :model-value="date2Thai(date)" :rules="[
+                          <q-input
+                            :class="getClass(edit)"
+                            :outlined="edit"
+                            dense
+                            lazy-rules
+                            :borderless="!edit"
+                            :model-value="date2Thai(date)"
+                            :rules="[
                               (val: string) =>
                                 !!val ||
                                 `${'กรุณาเลือกวัน เดือน ปี'}`,
-                            ]" :label="`${'วัน เดือน ปี'}`" hide-bottom-space>
+                            ]"
+                            :label="`${'วัน เดือน ปี'}`"
+                            hide-bottom-space
+                          >
                             <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>
@@ -103,96 +188,274 @@
                       </datepicker>
                     </div>
                     <div class="col-xs-6 col-sm-6 col-md-6">
-                      <selector :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit"
-                        :borderless="!edit" v-model="posNoId" :rules="[
+                      <selector
+                        :class="getClass(edit)"
+                        :outlined="edit"
+                        dense
+                        lazy-rules
+                        :readonly="!edit"
+                        :borderless="!edit"
+                        v-model="posNoId"
+                        :rules="[
                           (val: string) => !!val || `${'กรุณาเลือกตำแหน่งเลขที่'}`,
-                        ]" :label="`${'ตำแหน่งเลขที่'}`" @update:modelValue="clickEditRow" emit-value map-options
-                        option-label="name" :options="posNoOptions" option-value="id" hide-bottom-space use-input
-                        input-debounce="0" @filter="(inputValue: any,
+                        ]"
+                        :label="`${'ตำแหน่งเลขที่'}`"
+                        @update:modelValue="clickEditRow"
+                        emit-value
+                        map-options
+                        option-label="name"
+                        :options="posNoOptions"
+                        option-value="id"
+                        hide-bottom-space
+                        use-input
+                        input-debounce="0"
+                        @filter="(inputValue: any,
                           doneFn: Function) => filterSelector(inputValue, doneFn, '1'
-                          )" />
+                          )"
+                      />
                     </div>
                     <div class="col-xs-6 col-sm-6 col-md-6">
-                      <selector :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit"
-                        :borderless="!edit" v-model="positionId"
-                        :rules="[(val: string) => !!val || `${'กรุณาเลือกตำแหน่ง'}`]" :label="`${'ตำแหน่ง'}`"
-                        @update:modelValue="clickEditRow" emit-value map-options option-label="name"
-                        :options="positionOptions" option-value="id" hide-bottom-space use-input input-debounce="0"
+                      <selector
+                        :class="getClass(edit)"
+                        :outlined="edit"
+                        dense
+                        lazy-rules
+                        :readonly="!edit"
+                        :borderless="!edit"
+                        v-model="positionId"
+                        :rules="[(val: string) => !!val || `${'กรุณาเลือกตำแหน่ง'}`]"
+                        :label="`${'ตำแหน่ง'}`"
+                        @update:modelValue="clickEditRow"
+                        emit-value
+                        map-options
+                        option-label="name"
+                        :options="positionOptions"
+                        option-value="id"
+                        hide-bottom-space
+                        use-input
+                        input-debounce="0"
                         @filter="(inputValue: any,
                           doneFn: Function) => filterSelector(inputValue, doneFn, '2'
-                          )" />
+                          )"
+                      />
                     </div>
                     <div class="col-xs-6 col-sm-6 col-md-6">
                       <!-- :rules="[(val:string) => !!val || `${'กรุณาเลือกด้าน/สาขา'}`]" -->
-                      <selector :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit"
-                        :borderless="!edit" v-model="positionPathSideId" :label="`${'ด้าน/สาขา'}`"
-                        @update:modelValue="clickEditRow" emit-value map-options option-label="name"
-                        :options="positionSideOptions" option-value="id" hide-bottom-space use-input input-debounce="0"
+                      <selector
+                        :class="getClass(edit)"
+                        :outlined="edit"
+                        dense
+                        lazy-rules
+                        :readonly="!edit"
+                        :borderless="!edit"
+                        v-model="positionPathSideId"
+                        :label="`${'ด้าน/สาขา'}`"
+                        @update:modelValue="clickEditRow"
+                        emit-value
+                        map-options
+                        option-label="name"
+                        :options="positionSideOptions"
+                        option-value="id"
+                        hide-bottom-space
+                        use-input
+                        input-debounce="0"
                         @filter="(inputValue: any,
                           doneFn: Function) => filterSelector(inputValue, doneFn, '3'
-                          )" />
+                          )"
+                      />
                     </div>
                     <div class="col-xs-6 col-sm-6 col-md-6">
-                      <selector :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit"
-                        :borderless="!edit" v-model="positionTypeId" :rules="[
+                      <selector
+                        :class="getClass(edit)"
+                        :outlined="edit"
+                        dense
+                        lazy-rules
+                        :readonly="!edit"
+                        :borderless="!edit"
+                        v-model="positionTypeId"
+                        :rules="[
                           (val: string) => !!val || `${'กรุณาเลือกตำแหน่งประเภท'}`,
-                        ]" :label="`${'ตำแหน่งประเภท'}`" @update:modelValue="clickEditRow" emit-value map-options
-                        option-label="name" :options="positionTypeOptions" option-value="id" hide-bottom-space use-input
-                        input-debounce="0" @filter="(inputValue: any,
+                        ]"
+                        :label="`${'ตำแหน่งประเภท'}`"
+                        @update:modelValue="clickEditRow"
+                        emit-value
+                        map-options
+                        option-label="name"
+                        :options="positionTypeOptions"
+                        option-value="id"
+                        hide-bottom-space
+                        use-input
+                        input-debounce="0"
+                        @filter="(inputValue: any,
                           doneFn: Function) => filterSelector(inputValue, doneFn, '4'
-                          )" />
+                          )"
+                      />
                     </div>
                     <div class="col-xs-6 col-sm-6 col-md-6">
-                      <selector :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit"
-                        :borderless="!edit" v-model="positionLineId"
-                        :rules="[(val: string) => !!val || `${'กรุณาเลือกสายงาน'}`]" :label="`${'สายงาน'}`"
-                        @update:modelValue="clickEditRow" emit-value map-options option-label="name"
-                        :options="positionLineOptions" option-value="id" hide-bottom-space use-input input-debounce="0"
+                      <selector
+                        :class="getClass(edit)"
+                        :outlined="edit"
+                        dense
+                        lazy-rules
+                        :readonly="!edit"
+                        :borderless="!edit"
+                        v-model="positionLineId"
+                        :rules="[(val: string) => !!val || `${'กรุณาเลือกสายงาน'}`]"
+                        :label="`${'สายงาน'}`"
+                        @update:modelValue="clickEditRow"
+                        emit-value
+                        map-options
+                        option-label="name"
+                        :options="positionLineOptions"
+                        option-value="id"
+                        hide-bottom-space
+                        use-input
+                        input-debounce="0"
                         @filter="(inputValue: any,
                           doneFn: Function) => filterSelector(inputValue, doneFn, '5'
-                          )" />
+                          )"
+                      />
                     </div>
                     <div class="col-xs-6 col-sm-6 col-md-6">
-                      <selector :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit"
-                        :borderless="!edit" v-model="positionLevelId"
-                        :rules="[(val: string) => !!val || `${'กรุณาเลือกระดับ'}`]" :label="`${'ระดับ'}`"
-                        @update:modelValue="clickEditRow" emit-value map-options option-label="name"
-                        :options="positionLevelOptions" option-value="id" hide-bottom-space use-input input-debounce="0"
+                      <selector
+                        :class="getClass(edit)"
+                        :outlined="edit"
+                        dense
+                        lazy-rules
+                        :readonly="!edit"
+                        :borderless="!edit"
+                        v-model="positionLevelId"
+                        :rules="[(val: string) => !!val || `${'กรุณาเลือกระดับ'}`]"
+                        :label="`${'ระดับ'}`"
+                        @update:modelValue="clickEditRow"
+                        emit-value
+                        map-options
+                        option-label="name"
+                        :options="positionLevelOptions"
+                        option-value="id"
+                        hide-bottom-space
+                        use-input
+                        input-debounce="0"
                         @filter="(inputValue: any,
                           doneFn: Function) => filterSelector(inputValue, doneFn, '6'
-                          )" />
+                          )"
+                      />
                     </div>
                     <div class="col-xs-6 col-sm-6 col-md-6">
-                      <selector :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit"
-                        :borderless="!edit" v-model="positionExecutiveId" :label="`${'ตำแหน่งทางการบริหาร'}`"
-                        @update:modelValue="clickEditRow" emit-value map-options option-label="name"
-                        :options="positionExecutiveOptions" option-value="id" hide-bottom-space use-input
-                        input-debounce="0" @filter="(inputValue: any,
+                      <selector
+                        :class="getClass(edit)"
+                        :outlined="edit"
+                        dense
+                        lazy-rules
+                        :readonly="!edit"
+                        :borderless="!edit"
+                        v-model="positionExecutiveId"
+                        :label="`${'ตำแหน่งทางการบริหาร'}`"
+                        @update:modelValue="clickEditRow"
+                        emit-value
+                        map-options
+                        option-label="name"
+                        :options="positionExecutiveOptions"
+                        option-value="id"
+                        hide-bottom-space
+                        use-input
+                        input-debounce="0"
+                        @filter="(inputValue: any,
                           doneFn: Function) => filterSelector(inputValue, doneFn, '7'
-                          )" />
+                          )"
+                      />
                     </div>
                     <div class="col-xs-4 col-sm-4 col-md-4">
-                      <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit"
-                        :borderless="!edit" v-model="amount" :rules="[(val: string) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
-                        :label="`${'เงินเดือน'}`" @update:modelValue="clickEditRow" type="number" hide-bottom-space />
+                      <!-- <q-input
+                        :class="getClass(edit)"
+                        :outlined="edit"
+                        dense
+                        lazy-rules
+                        :readonly="!edit"
+                        :borderless="!edit"
+                        v-model="amount"
+                        :rules="[(val: string) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
+                        :label="`${'เงินเดือน'}`"
+                        @update:modelValue="clickEditRow"
+                        type="number"
+                        hide-bottom-space
+                      /> -->
+                      <CurrencyInput
+                        v-model="amount"
+                        :edit="edit"
+                        :options="{
+                          currency: 'THB',
+                        }"
+                        :rules="[(val: string) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
+                        :label="`${'เงินเดือน'}`"
+                      />
                     </div>
                     <div class="col-xs-4 col-sm-4 col-md-4">
-                      <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit"
-                        :borderless="!edit" v-model="positionSalaryAmount" :label="`${'เงินประจำตำแหน่ง'}`"
-                        @update:modelValue="clickEditRow" type="number" hide-bottom-space />
+                      <CurrencyInput
+                        v-model="positionSalaryAmount"
+                        :edit="edit"
+                        :options="{
+                          currency: 'THB',
+                        }"
+                        :label="`${'เงินประจำตำแหน่ง'}`"
+                      />
+                      <!-- <q-input
+                        :class="getClass(edit)"
+                        :outlined="edit"
+                        dense
+                        lazy-rules
+                        :readonly="!edit"
+                        :borderless="!edit"
+                        v-model="positionSalaryAmount"
+                        :label="`${'เงินประจำตำแหน่ง'}`"
+                        @update:modelValue="clickEditRow"
+                        type="number"
+                        hide-bottom-space
+                      /> -->
                     </div>
                     <div class="col-xs-4 col-sm-4 col-md-4">
-                      <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit"
-                        :borderless="!edit" v-model="mouthSalaryAmount" :label="`${'เงินค่าตอบแทนรายเดือน'}`"
-                        @update:modelValue="clickEditRow" type="number" hide-bottom-space />
+                      <!-- <q-input
+                        :class="getClass(edit)"
+                        :outlined="edit"
+                        dense
+                        lazy-rules
+                        :readonly="!edit"
+                        :borderless="!edit"
+                        v-model="mouthSalaryAmount"
+                        :label="`${'เงินค่าตอบแทนรายเดือน'}`"
+                        @update:modelValue="clickEditRow"
+                        type="number"
+                        hide-bottom-space
+                      /> -->
+                      <CurrencyInput
+                        v-model="mouthSalaryAmount"
+                        :edit="edit"
+                        :options="{
+                          currency: 'THB',
+                        }"
+                        :label="`${'เงินค่าตอบแทนรายเดือน'}`"
+                      />
                     </div>
                     <div class="col-xs-6 col-sm-6 col-md-6">
-                      <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit"
-                        :borderless="!edit" v-model="refCommandNo" hide-bottom-space :label="`${'เลขที่คำสั่ง'}`"
+                      <q-input
+                        :class="getClass(edit)"
+                        :outlined="edit"
+                        dense
+                        lazy-rules
+                        :readonly="!edit"
+                        :borderless="!edit"
+                        v-model="refCommandNo"
+                        hide-bottom-space
+                        :label="`${'เลขที่คำสั่ง'}`"
                         :rules="[(val: string) => !!val || `${'กรุณากรอกเลขที่คำสั่ง'}`]"
-                        @update:modelValue="clickEditRow">
+                        @update:modelValue="clickEditRow"
+                      >
                         <template v-slot:append>
-                          <q-icon name="mdi-file" class="cursor-pointer" @click="resetFilter" />
+                          <q-icon
+                            name="mdi-file"
+                            class="cursor-pointer"
+                            @click="resetFilter"
+                          />
                         </template>
                       </q-input>
                     </div>
@@ -230,17 +493,41 @@
                     </div> -->
 
                     <div class="row col-xs-12 col-sm-12 col-md-12">
-                      <selector :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit"
-                        :borderless="!edit" v-model="refSelected" :label="`${'ต้นแบบ (template) เอกสารอ้างอิง'}`"
-                        @update:modelValue="clickEditRowRef" option-label="name" :options="refOptions" option-value="id"
-                        hide-bottom-space use-input input-debounce="0" @filter="(inputValue: any,
+                      <selector
+                        :class="getClass(edit)"
+                        :outlined="edit"
+                        dense
+                        lazy-rules
+                        :readonly="!edit"
+                        :borderless="!edit"
+                        v-model="refSelected"
+                        :label="`${'ต้นแบบ (template) เอกสารอ้างอิง'}`"
+                        @update:modelValue="clickEditRowRef"
+                        option-label="name"
+                        :options="refOptions"
+                        option-value="id"
+                        hide-bottom-space
+                        use-input
+                        input-debounce="0"
+                        @filter="(inputValue: any,
                           doneFn: Function) => filterSelector(inputValue, doneFn, '8'
-                          )" />
+                          )"
+                      />
                     </div>
                     <div class="col-xs-12 col-sm-12 col-md-12">
-                      <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit"
-                        :borderless="!edit" v-model="salaryRef" :label="`${'เอกสารอ้างอิง'}`"
-                        @update:modelValue="clickEditRow" type="textarea" hide-bottom-space />
+                      <q-input
+                        :class="getClass(edit)"
+                        :outlined="edit"
+                        dense
+                        lazy-rules
+                        :readonly="!edit"
+                        :borderless="!edit"
+                        v-model="salaryRef"
+                        :label="`${'เอกสารอ้างอิง'}`"
+                        @update:modelValue="clickEditRow"
+                        type="textarea"
+                        hide-bottom-space
+                      />
                     </div>
                   </div>
                 </q-scroll-area>
@@ -249,25 +536,49 @@
           </div>
         </q-card-section>
         <q-separator />
-        <DialogFooter :cancel="clickCancel" :edit="clickEdit" :save="clickSave" :validate="validateData"
-          :clickNext="clickNext" :clickPrevious="clickPrevious" :clickDelete="clickDelete" v-model:editvisible="edit"
-          v-model:next="next" v-model:previous="previous" v-model:modalEdit="modalEdit" />
+        <DialogFooter
+          :cancel="clickCancel"
+          :edit="clickEdit"
+          :save="clickSave"
+          :validate="validateData"
+          :clickNext="clickNext"
+          :clickPrevious="clickPrevious"
+          :clickDelete="clickDelete"
+          v-model:editvisible="edit"
+          v-model:next="next"
+          v-model:previous="previous"
+          v-model:modalEdit="modalEdit"
+        />
       </q-form>
     </q-card>
   </q-dialog>
-  <HistoryTable :rows="rowsHistory" :columns="columnsHistory" :filter="filterHistory"
-    :visible-columns="visibleColumnsHistory" v-model:modal="modalHistory" v-model:inputfilter="filterHistory"
-    v-model:inputvisible="visibleColumnsHistory" v-model:tittle="tittleHistory">
+  <HistoryTable
+    :rows="rowsHistory"
+    :columns="columnsHistory"
+    :filter="filterHistory"
+    :visible-columns="visibleColumnsHistory"
+    v-model:modal="modalHistory"
+    v-model:inputfilter="filterHistory"
+    v-model:inputvisible="visibleColumnsHistory"
+    v-model:tittle="tittleHistory"
+  >
     <template #columns="props">
       <q-tr :props="props">
         <q-td v-for="col in props.cols" :key="col.name" :props="props">
-          <div v-if="col.name == 'date' || col.name == 'createdAt'" class="table_ellipsis">
+          <div
+            v-if="col.name == 'date' || col.name == 'createdAt'"
+            class="table_ellipsis"
+          >
             {{ date2Thai(col.value) }}
           </div>
-          <div v-else-if="col.name == 'positionSalaryAmount' ||
-            col.name == 'mouthSalaryAmount' ||
-            col.name == 'amount'
-            " class="table_ellipsis">
+          <div
+            v-else-if="
+              col.name == 'positionSalaryAmount' ||
+              col.name == 'mouthSalaryAmount' ||
+              col.name == 'amount'
+            "
+            class="table_ellipsis"
+          >
             {{ col.value == null ? "" : col.value.toLocaleString("en-US") }}
           </div>
           <div v-else class="table_ellipsis">
@@ -284,6 +595,7 @@ import { useRoute } from "vue-router";
 import { useProfileDataStore } from "@/modules/04_registry/store";
 import { useCounterMixin } from "@/stores/mixin";
 
+import CurrencyInput from "@/components/CurruncyInput.vue";
 import ProfileTable from "@/modules/04_registry/components/Table.vue";
 import DialogHeader from "@/modules/04_registry/components/DialogHeader.vue";
 import DialogFooter from "@/modules/04_registry/components/DialogFooter.vue";
@@ -319,9 +631,10 @@ const { date2Thai, success, dateToISO, messageError, showLoader, hideLoader } =
 const route = useRoute();
 const id = ref<string>("");
 const date = ref<Date>(new Date());
-const amount = ref<number | null>(null);
-const positionSalaryAmount = ref<number | null>(null);
-const mouthSalaryAmount = ref<number | null>(null);
+const amount = ref<number>(0);
+// const salary = ref<number | null>(null);
+const positionSalaryAmount = ref<number>(0);
+const mouthSalaryAmount = ref<number>(0);
 const ocId = ref<string>();
 const positionId = ref<string>();
 const positionLineId = ref<string>();
@@ -648,23 +961,23 @@ const filter = ref<string>(""); //search data table
 const visibleColumns = ref<String[]>([]);
 profileData.salary.columns.length == 0
   ? (visibleColumns.value = [
-    "date",
-    "amount",
-    "positionSalaryAmount",
-    "mouthSalaryAmount",
-    "oc",
-    "position",
-    "posNo",
-    "positionLine",
-    "positionPathSide",
-    "positionType",
-    "positionLevel",
-    "positionExecutive",
-    "positionExecutiveSide",
-    "salaryClass",
-    "salaryRef",
-    "refCommandNo",
-  ])
+      "date",
+      "amount",
+      "positionSalaryAmount",
+      "mouthSalaryAmount",
+      "oc",
+      "position",
+      "posNo",
+      "positionLine",
+      "positionPathSide",
+      "positionType",
+      "positionLevel",
+      "positionExecutive",
+      "positionExecutiveSide",
+      "salaryClass",
+      "salaryRef",
+      "refCommandNo",
+    ])
   : (visibleColumns.value = profileData.salary.columns);
 const columns = ref<QTableProps["columns"]>([
   {
@@ -1238,7 +1551,7 @@ const fetchPosition = async () => {
       positionLevelOptions.value = optionPositionLevels;
       positionLevelOptionsFilter.value = optionPositionLevels;
     })
-    .catch((e: any) => { })
+    .catch((e: any) => {})
     .finally(() => {
       hideLoader();
     });
@@ -1794,7 +2107,7 @@ const getClass = (val: boolean) => {
     "full-width cursor-pointer": !val,
   };
 };
-const resetFilter = () => { };
+const resetFilter = () => {};
 </script>
 <style lang="scss">
 .modalfix {
diff --git a/src/modules/08_registryEmployee/views/SalaryEmployee.vue b/src/modules/08_registryEmployee/views/SalaryEmployee.vue
index 4fa6ccf9d..5c4a7d51e 100644
--- a/src/modules/08_registryEmployee/views/SalaryEmployee.vue
+++ b/src/modules/08_registryEmployee/views/SalaryEmployee.vue
@@ -335,7 +335,7 @@
                       />
                     </div> -->
                     <div class="col-xs-6 col-sm-6 col-md-6">
-                      <q-input
+                      <!-- <q-input
                         :class="getClass(edit)"
                         :outlined="edit"
                         dense
@@ -348,6 +348,15 @@
                         @update:modelValue="clickEditRow"
                         type="number"
                         hide-bottom-space
+                      /> -->
+                      <CurrencyInput
+                        v-model="amount"
+                        :edit="edit"
+                        :rules="[(val:string) => !!val || `${'กรุณากรอกค่าจ้าง'}`]"
+                        :options="{
+                          currency: 'THB',
+                        }"
+                        :label="`${'ค่าจ้าง'}`"
                       />
                     </div>
                     <div class="col-xs-6 col-sm-6 col-md-6">
@@ -570,6 +579,7 @@ import { useRoute } from "vue-router";
 import { useProfileDataStore } from "@/modules/04_registry/store";
 import { useCounterMixin } from "@/stores/mixin";
 
+import CurrencyInput from "@/components/CurruncyInput.vue";
 import ProfileTable from "@/modules/04_registry/components/Table.vue";
 import DialogHeader from "@/modules/04_registry/components/DialogHeader.vue";
 import DialogFooter from "@/modules/04_registry/components/DialogFooter.vue";
@@ -608,7 +618,7 @@ const {
   dialogMessage,
   showLoader,
   hideLoader,
-  dialogConfirm
+  dialogConfirm,
 } = mixin;
 const route = useRoute();
 const id = ref<string>("");
@@ -1694,9 +1704,9 @@ const templateDetail = async () => {
 /**
  * กดบันทึกใน dialog
  */
-const clickSave = () =>{
-  dialogConfirm($q,() => SaveData())
-}
+const clickSave = () => {
+  dialogConfirm($q, () => SaveData());
+};
 const SaveData = async () => {
   await myForm.value.validate().then(async (result: boolean) => {
     if (result) {