From f52a0bd2c57c212545edd5360d5aa9c056f782a9 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Thu, 8 Feb 2024 14:48:49 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B9=80=E0=B8=87=E0=B8=B4=E0=B8=99=E0=B9=80?=
 =?UTF-8?q?=E0=B8=94=E0=B8=B7=E0=B8=AD=E0=B8=99=20=E0=B8=97=E0=B8=B0?=
 =?UTF-8?q?=E0=B9=80=E0=B8=9A=E0=B8=B5=E0=B8=A2=E0=B8=99=E0=B8=9B=E0=B8=A3?=
 =?UTF-8?q?=E0=B8=B0=E0=B8=A7=E0=B8=B1=E0=B8=95=E0=B8=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../04_registry/components/DialogFooter.vue   |   15 +
 .../04_registry/components/Profile.vue        |   14 +-
 src/modules/04_registry/components/Salary.vue | 1130 ++++++-----------
 src/modules/04_registry/components/Table.vue  |    2 +
 .../04_registry/interface/index/Main.ts       |   27 +
 src/modules/04_registry/stores/salary.ts      |  212 ++++
 6 files changed, 647 insertions(+), 753 deletions(-)
 create mode 100644 src/modules/04_registry/stores/salary.ts

diff --git a/src/modules/04_registry/components/DialogFooter.vue b/src/modules/04_registry/components/DialogFooter.vue
index c7b6623b4..9bd3f9279 100644
--- a/src/modules/04_registry/components/DialogFooter.vue
+++ b/src/modules/04_registry/components/DialogFooter.vue
@@ -19,6 +19,17 @@
       :color="!next ? 'grey-7' : 'public'"
     />
     <q-space />
+    <q-btn
+      v-if="modalEdit == true"
+      flat
+      round
+      color="blue"
+      @click="props.coppy"
+      icon="content_copy"
+    >
+      <q-tooltip>คัดลอกข้อมูล</q-tooltip></q-btn
+    >
+
     <q-btn
       v-if="modalEdit == true"
       flat
@@ -100,6 +111,10 @@ const props = defineProps({
     type: Function,
     default: () => console.log("not function"),
   },
+  coppy: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
 });
 const emit = defineEmits([
   "update:editvisible",
diff --git a/src/modules/04_registry/components/Profile.vue b/src/modules/04_registry/components/Profile.vue
index d63efc27e..610fd01c6 100644
--- a/src/modules/04_registry/components/Profile.vue
+++ b/src/modules/04_registry/components/Profile.vue
@@ -796,13 +796,13 @@ import TrainVue from "@/modules/04_registry/components/Train.vue";
 import InsigniaVue from "@/modules/04_registry/components/Insignia.vue";
 import CoinedVue from "@/modules/04_registry/components/Coin.vue";
 import AssessmentVue from "@/modules/04_registry/components/Assessment.vue";
-// import SalaryVue from "@/modules/04_registry/components/Salary.vue";
-// import SalaryEmployeeVue from "@/modules/04_registry/components/SalaryEmployee.vue";
-// import SalaryEmployeeTempVue from "@/modules/04_registry/components/SalaryEmployeeTemp.vue";
+import SalaryVue from "@/modules/04_registry/components/Salary.vue";
+import SalaryEmployeeVue from "@/modules/04_registry/components/SalaryEmployee.vue";
+import SalaryEmployeeTempVue from "@/modules/04_registry/components/SalaryEmployeeTemp.vue";
 
-import SalaryVue from "@/modules/04_registry/components/salaryNew/Salary.vue";
-import SalaryEmployeeVue from "@/modules/04_registry/components/salaryNew/SalaryEmployee.vue";
-import SalaryEmployeeTempVue from "@/modules/04_registry/components/salaryNew/SalaryEmployeeTemp.vue";
+// import SalaryVue from "@/modules/04_registry/components/salaryNew/Salary.vue";
+// import SalaryEmployeeVue from "@/modules/04_registry/components/salaryNew/SalaryEmployee.vue";
+// import SalaryEmployeeTempVue from "@/modules/04_registry/components/salaryNew/SalaryEmployeeTemp.vue";
 
 import DisciplineVue from "@/modules/04_registry/components/Discipline.vue";
 import LeaveVue from "@/modules/04_registry/components/Leave.vue";
@@ -941,7 +941,7 @@ onMounted(async () => {
       "registryverify"
     );
   }
-  console.log(roleKeyregistry.value, roleRegistryverify.value);
+
   await changeTab("information");
   await fetchData();
   await checIsVerified();
diff --git a/src/modules/04_registry/components/Salary.vue b/src/modules/04_registry/components/Salary.vue
index 264cac96a..ee95a94aa 100644
--- a/src/modules/04_registry/components/Salary.vue
+++ b/src/modules/04_registry/components/Salary.vue
@@ -16,6 +16,34 @@
       >
         <template #columns="props">
           <q-tr :props="props">
+            <q-td auto-width>
+              <q-btn
+                dense
+                size="12px"
+                flat
+                round
+                :color="props.rowIndex + 1 == 1 ? 'grey' : 'green'"
+                :disable="props.rowIndex + 1 == 1"
+                @click="onClicksortPos(props)"
+                icon="mdi-arrow-up-bold"
+              >
+                <!-- <q-tooltip>เลื่อนลำดับขึ้น</q-tooltip> -->
+              </q-btn>
+            </q-td>
+            <q-td auto-width>
+              <q-btn
+                dense
+                size="12px"
+                flat
+                round
+                :color="rows.length == props.rowIndex + 1 ? 'grey' : 'red'"
+                :disable="rows.length == props.rowIndex + 1"
+                @click="onClicksortPos(props, false)"
+                icon="mdi-arrow-down-bold"
+              >
+                <!-- <q-tooltip>เลื่อนลำดับลง</q-tooltip> -->
+              </q-btn>
+            </q-td>
             <q-td
               v-for="col in props.cols"
               :key="col.name"
@@ -83,103 +111,15 @@
         <q-separator />
         <q-card-section class="q-pa-sm bg-grey-1">
           <div class="row col-12 q-col-gutter-sm">
-            <!-- <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"
-                  >
-                    <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
-                  >
-                    <template v-slot:default-header="prop">
-                      <div class="row items-center">
-                        <div
-                          class="text-primary"
-                          v-if="selected == prop.node.id"
-                        >
-                          {{ prop.node.label }}
-                        </div>
-                        <div v-else>
-                          {{ prop.node.label }}
-                        </div>
-                      </div>
-                    </template>
-                  </q-tree>
-                </q-scroll-area>
-              </q-card>
-            </div> -->
             <div class="col-xs-12 col-sm-12">
               <q-card flat bordered class="fit q-pa-sm">
                 <q-scroll-area visible style="height: 70vh">
                   <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">
-                      <q-input
-                        :class="getClass(edit)"
-                        :outlined="edit"
-                        dense
-                        lazy-rules
-                        :readonly="!edit"
-                        :borderless="!edit"
-                        v-model="orgName"
-                        hide-bottom-space
-                        :label="`${'หน่วยงาน'}`"
-                        :rules="[(val: string) => !!val || `${'กรุณากรอกหน่วยงาน'}`]"
-                        @update:modelValue="clickEditRow"
-                      >
-                      </q-input>
-                    </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="agencyName"
-                        hide-bottom-space
-                        :label="`${'ส่วนราชการ'}`"
-                        :rules="[(val: string) => !!val || `${'กรุณากรอกส่วนราชการ'}`]"
-                        @update:modelValue="clickEditRow"
-                      >
-                      </q-input>
-                    </div>
-
                     <div class="col-xs-6 col-sm-6 col-md-6">
                       <datepicker
                         menu-class-name="modalfix"
                         :readonly="!edit"
-                        v-model="date"
+                        v-model="formDataSalary.date"
                         :locale="'th'"
                         autoApply
                         :enableTimePicker="false"
@@ -192,12 +132,13 @@
                         }}</template>
                         <template #trigger>
                           <q-input
+                            ref="dateRef"
                             :class="getClass(edit)"
                             :outlined="edit"
                             dense
                             lazy-rules
                             :borderless="!edit"
-                            :model-value="date2Thai(date)"
+                            :model-value="date2Thai(formDataSalary.date)"
                             :rules="[
                               (val: string) =>
                                 !!val ||
@@ -222,280 +163,124 @@
                         </template>
                       </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="[
-                          (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,
-                          doneFn: Function) => filterSelector(inputValue, doneFn, '1'
-                          )"
-                      /> -->
                       <q-input
+                        ref="posNoRef"
                         :class="getClass(edit)"
                         :outlined="edit"
                         dense
                         lazy-rules
                         :readonly="!edit"
                         :borderless="!edit"
-                        v-model="posNo"
+                        v-model="formDataSalary.posNo"
                         hide-bottom-space
-                        :label="`${'เลขที่คำสั่ง'}`"
-                        :rules="[(val: string) => !!val || `${'กรุณากรอกเลขที่คำสั่ง'}`]"
+                        :label="`${'เลขที่ตำแหน่ง'}`"
+                        :rules="[(val: string) => !!val || `${'กรุณากรอกเลขที่ตำแหน่ง'}`]"
                         @update:modelValue="clickEditRow"
                       >
                       </q-input>
                     </div>
-                    <div class="col-xs-6 col-sm-6 col-md-6">
-                      <selector
+
+                    <div class="row col-xs-12 col-sm-12 col-md-12">
+                      <q-select
+                        ref="templatePosRef"
                         :class="getClass(edit)"
                         :outlined="edit"
                         dense
                         lazy-rules
                         :readonly="!edit"
                         :borderless="!edit"
-                        v-model="positionName"
-                        :rules="[(val: string) => !!val || `${'กรุณาเลือกตำแหน่ง'}`]"
+                        v-model="formDataSalary.templatePos"
+                        :label="`${'ต้นแบบ (template) ตำแหน่ง'}`"
+                        @update:modelValue="updatePos"
+                        option-label="name"
+                        :options="opPos"
+                        option-value="name"
+                        hide-bottom-space
+                        emit-value
+                        use-input
+                        input-debounce="0"
+                        @filter="(inputValue: any,
+                          doneFn: Function) => filterSelector(inputValue, doneFn, 'pos'
+                          )"
+                      />
+                    </div>
+
+                    <div class="col-xs-12 col-sm-12 col-md-12">
+                      <q-input
+                        ref="positionRef"
+                        :class="getClass(edit)"
+                        :outlined="edit"
+                        dense
+                        lazy-rules
+                        :readonly="!edit"
+                        :borderless="!edit"
+                        v-model="formDataSalary.position"
                         :label="`${'ตำแหน่ง'}`"
                         @update:modelValue="clickEditRow"
-                        emit-value
-                        map-options
-                        option-label="name"
-                        :options="positionOptions"
-                        option-value="id"
+                        type="textarea"
                         hide-bottom-space
-                        use-input
-                        input-debounce="0"
-                        @filter="(inputValue: any,
-                          doneFn: Function) => filterSelector(inputValue, doneFn, '2'
-                          )"
+                        :rules="[(val: string) => !!val || `${'กรุณากรอกตำแหน่ง'}`]"
                       />
                     </div>
+
                     <div class="col-xs-6 col-sm-6 col-md-6">
-                      <!-- :rules="[(val:string) => !!val || `${'กรุณาเลือกด้าน/สาขา'}`]" -->
-                      <selector
+                      <q-select
+                        ref="typePositionRef"
                         :class="getClass(edit)"
                         :outlined="edit"
                         dense
                         lazy-rules
                         :readonly="!edit"
                         :borderless="!edit"
-                        v-model="positionLineName"
-                        :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-4 col-sm-4 col-md-4">
-                      <selector
-                        :class="getClass(edit)"
-                        :outlined="edit"
-                        dense
-                        lazy-rules
-                        :readonly="!edit"
-                        :borderless="!edit"
-                        v-model="positionTypeId"
-                        :rules="[
-                          (val: string) => !!val || `${'กรุณาเลือกตำแหน่งประเภท'}`,
-                        ]"
+                        v-model="formDataSalary.typePosition"
                         :label="`${'ตำแหน่งประเภท'}`"
-                        @update:modelValue="updateSelectType"
                         emit-value
                         map-options
                         option-label="name"
-                        :options="positionTypeOptions"
-                        option-value="id"
+                        :options="opType"
+                        option-value="name"
                         hide-bottom-space
                         use-input
-                        :display-value="
-                          positionTypeOptions.find(
-                            (x) => x.id == positionTypeId
-                          )
-                            ? positionTypeOptions.find(
-                                (x) => x.id == positionTypeId
-                              )?.name
-                            : null
-                        "
                         input-debounce="0"
                         @filter="(inputValue: any,
-                          doneFn: Function) => filterSelector(inputValue, doneFn, '4'
+                          doneFn: Function) => filterSelector(inputValue, doneFn, 'typepos'
                           )"
                       />
                     </div>
-                    <div class="col-xs-4 col-sm-4 col-md-4">
-                      <selector
+
+                    <div class="col-xs-6 col-sm-6 col-md-6">
+                      <q-select
+                        ref="levelPositionRef"
                         :class="getClass(edit)"
                         :outlined="edit"
                         dense
                         lazy-rules
                         :readonly="!edit"
                         :borderless="!edit"
-                        v-model="positionLevelId"
+                        v-model="formDataSalary.levelPosition"
                         :rules="[(val: string) => !!val || `${'กรุณาเลือกระดับ'}`]"
                         :label="`${'ระดับ'}`"
                         @update:modelValue="clickEditRow"
                         emit-value
                         map-options
                         option-label="name"
-                        :options="positionLevelOptions"
-                        option-value="id"
+                        :options="opLevel"
+                        option-value="name"
                         hide-bottom-space
                         use-input
                         input-debounce="0"
-                        :display-value="
-                          positionLevelOptions.find(
-                            (x) => x.id == positionLevelId
-                          )
-                            ? positionLevelOptions.find(
-                                (x) => x.id == positionLevelId
-                              )?.name
-                            : null
-                        "
                         @filter="(inputValue: any,
-                          doneFn: Function) => filterSelector(inputValue, doneFn, '6'
+                          doneFn: Function) => filterSelector(inputValue, doneFn, 'levelpos'
                           )"
                       />
                     </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="cLevel"
-                        hide-bottom-space
-                        :label="`${'ระดับซี'}`"
-                        @update:modelValue="clickEditRow"
-                      >
-                      </q-input>
-                    </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="positionPathSideName"
-                        hide-bottom-space
-                        :label="`${'ด้าน/สาขา'}`"
-                        :rules="[(val: string) => !!val || `${'กรุณากรอกด้าน/สาขา'}`]"
-                        @update:modelValue="clickEditRow"
-                      >
-                      </q-input>
 
-                      <!-- <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">
-                      <q-input
-                        :class="getClass(edit)"
-                        :outlined="edit"
-                        dense
-                        lazy-rules
-                        :readonly="!edit"
-                        :borderless="!edit"
-                        v-model="positionExecutiveName"
-                        hide-bottom-space
-                        :label="`${'ตำแหน่งทางการบริหาร'}`"
-                        :rules="[(val: string) => !!val || `${'กรุณากรอกตำแหน่งทางการบริหาร'}`]"
-                        @update:modelValue="clickEditRow"
-                      >
-                      </q-input>
-
-                      <!-- <selector
-                        :class="getClass(edit)"
-                        :outlined="edit"
-                        dense
-                        lazy-rules
-                        :readonly="!edit"
-                        :borderless="!edit"
-                        v-model="positionExecutiveName"
-                        :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
-                      /> -->
+                    <div class="col-xs-6 col-sm- col-md-6">
                       <CurrencyInput
                         lazy-rules
-                        v-model="amount"
+                        v-model="formDataSalary.salary"
                         :edit="edit"
                         :options="{
                           currency: 'THB',
@@ -503,149 +288,60 @@
                         :label="`${'เงินเดือน'}`"
                         :rules="[(val: number) => !!val  || `${'กรุณากรอกเงินเดือน'}`]"
                       />
-                      <!-- :rules="[(val: string) => !!val || `${'กรุณากรอกเงินเดือน'}`]" -->
-                    </div>
-                    <div class="col-xs-4 col-sm-4 col-md-4">
-                      <CurrencyInput
-                        lazy-rules
-                        v-model="positionSalaryAmount"
-                        :edit="edit"
-                        :options="{
-                          currency: 'THB',
-                        }"
-                        :label="`${'เงินประจำตำแหน่ง'}`"
-                      />
-                      <!-- :rules="[(val: number) => !!val  || `${'กรุณากรอกเงินประจำตำแหน่ง'}`]" -->
-                      <!-- <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
-                      /> -->
-                      <CurrencyInput
-                        lazy-rules
-                        v-model="mouthSalaryAmount"
-                        :edit="edit"
-                        :options="{
-                          currency: 'THB',
-                        }"
-                        :label="`${'เงินค่าตอบแทนรายเดือน'}`"
-                      />
-                      <!-- :rules="[(val: number) => !!val  || `${'กรุณากรอกเงินค่าตอบแทนรายเดือน'}`]" -->
                     </div>
+
                     <div class="col-xs-6 col-sm-6 col-md-6">
-                      <q-input
-                        :class="getClass(edit)"
-                        :outlined="edit"
-                        dense
+                      <CurrencyInput
                         lazy-rules
-                        :readonly="!edit"
-                        :borderless="!edit"
-                        v-model="refCommandNo"
-                        hide-bottom-space
-                        :label="`${'เลขที่คำสั่ง'}`"
-                        @update:modelValue="clickEditRow"
-                      >
-                        <!-- :rules="[(val: string) => !!val || `${'กรุณากรอกเลขที่คำสั่ง'}`]" -->
-                        <template v-slot:append>
-                          <q-icon
-                            name="mdi-file"
-                            class="cursor-pointer"
-                            @click="resetFilter"
-                          />
-                        </template>
-                      </q-input>
+                        v-model="formDataSalary.salaryPos"
+                        :edit="edit"
+                        :options="{
+                          currency: 'THB',
+                        }"
+                        :label="`${'เงินประจำตำแหน่ง'}`"
+                      />
                     </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="salaryClass"
-                        :rules="[
-                          (val:string) =>
-                            !!val || `${'กรุณากรอกตำแหน่ง (รายละเอียด)'}`,
-                        ]"
-                        :label="`${'ตำแหน่ง (รายละเอียด)'}`"
-                        @update:modelValue="clickEditRow"
-                        hide-bottom-space
-                        autogrow
-                      >
-                        <template v-slot:append>
-                          <q-btn
-                            color="info"
-                            flat
-                            dense
-                            round
-                            size="14px"
-                            icon="mdi-plus"
-                            @click="templateDetail"
-                            :disable="!edit"
-                          />
-                        </template>
-                      </q-input>
-                    </div> -->
 
                     <div class="row col-xs-12 col-sm-12 col-md-12">
-                      <selector
+                      <q-select
+                        ref="templateDocRef"
                         :class="getClass(edit)"
                         :outlined="edit"
                         dense
                         lazy-rules
                         :readonly="!edit"
                         :borderless="!edit"
-                        v-model="refSelected"
+                        v-model="formDataSalary.templateDoc"
                         :label="`${'ต้นแบบ (template) เอกสารอ้างอิง'}`"
                         @update:modelValue="clickEditRowRef"
                         option-label="name"
-                        :options="refOptions"
-                        option-value="id"
+                        :options="opDoc"
+                        option-value="name"
+                        emit-value
                         hide-bottom-space
                         use-input
                         input-debounce="0"
                         @filter="(inputValue: any,
-                          doneFn: Function) => filterSelector(inputValue, doneFn, '8'
+                          doneFn: Function) => filterSelector(inputValue, doneFn, 'doc'
                           )"
                       />
                     </div>
+
                     <div class="col-xs-12 col-sm-12 col-md-12">
                       <q-input
+                        ref="docRef"
                         :class="getClass(edit)"
                         :outlined="edit"
                         dense
                         lazy-rules
                         :readonly="!edit"
                         :borderless="!edit"
-                        v-model="salaryRef"
+                        v-model="formDataSalary.doc"
                         :label="`${'เอกสารอ้างอิง'}`"
                         @update:modelValue="clickEditRow"
                         type="textarea"
                         hide-bottom-space
+                        :rules="[(val: number) => !!val  || `${'กรุณากรอกเอกสารอ้างอิง'}`]"
                       />
                     </div>
                   </div>
@@ -667,11 +363,12 @@
           v-model:next="next"
           v-model:previous="previous"
           v-model:modalEdit="modalEdit"
+          :coppy="coppyForm"
         />
       </q-form>
     </q-card>
   </q-dialog>
-  
+
   <HistoryTable
     :rows="rowsHistory"
     :columns="columnsHistory"
@@ -710,7 +407,7 @@
   </HistoryTable>
 </template>
 <script setup lang="ts">
-import { onMounted, ref, watch } from "vue";
+import { onMounted, ref, watch, reactive } from "vue";
 import { useRoute } from "vue-router";
 import { useProfileDataStore } from "@/modules/04_registry/store";
 import { useCounterMixin } from "@/stores/mixin";
@@ -730,12 +427,16 @@ import type {
   treeTab,
   OptionType,
   OptionLevel,
+  FormSalaryNew,
+  FormSalaryNewRef,
 } from "@/modules/04_registry/interface/index/Main";
 import HistoryTable from "@/components/TableHistory.vue";
 import http from "@/plugins/http";
 import config from "@/app.config";
 import type { QTableProps } from "quasar";
 
+import { useSalaryDataStore } from "@/modules/04_registry/stores/salary";
+
 const props = defineProps({
   statusEdit: {
     type: Boolean,
@@ -745,6 +446,7 @@ const props = defineProps({
 
 const $q = useQuasar();
 const store = useProfileDataStore();
+const optionStore = useSalaryDataStore();
 const { profileData, changeProfileColumns } = store;
 
 const mixin = useCounterMixin();
@@ -1517,6 +1219,46 @@ const visibleColumnsHistory = ref<String[]>([
   "createdAt",
 ]);
 
+/****************************************** FormDataNew **********************************************/
+const formDataSalary = reactive<FormSalaryNew>({
+  date: new Date(),
+  posNo: "",
+  templatePos: "",
+  position: "",
+  typePosition: "",
+  levelPosition: "",
+  salary: 0,
+  salaryPos: 0,
+  templateDoc: "",
+  doc: "",
+});
+
+const opPos = ref<any>([]);
+const opType = ref<any>([]);
+const opLevel = ref<any>([]);
+const opDoc = ref<any>([]);
+
+/** formRef */
+const dateRef = ref<object | null>(null);
+const posNoRef = ref<object | null>(null);
+const templatePosRef = ref<object | null>(null);
+const positionRef = ref<object | null>(null);
+const levelPositionRef = ref<object | null>(null);
+const salaryNewRef = ref<object | null>(null);
+const templateDocRef = ref<object | null>(null);
+const docRef = ref<object | null>(null);
+
+const formDataSalaryRef: FormSalaryNewRef = {
+  date: dateRef,
+  posNo: posNoRef,
+  templatePos: templatePosRef,
+  position: positionRef,
+  levelPosition: levelPositionRef,
+  salary: salaryNewRef,
+  templateDoc: templateDocRef,
+  doc: docRef,
+};
+
 watch(visibleColumns, async (count: String[], prevCount: String[]) => {
   await changeProfileColumns("salary", count);
 });
@@ -1587,117 +1329,40 @@ const filterSelector = (val: any, update: Function, filtername: string) => {
         );
       });
       break;
+    case "pos":
+      update(() => {
+        opPos.value = optionStore.optionPos.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "typepos":
+      update(() => {
+        opType.value = optionStore.optiontype.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "levelpos":
+      update(() => {
+        opLevel.value = optionStore.optipnLevel.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "doc":
+      update(() => {
+        opDoc.value = optionStore.optionDoc.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
 
     default:
       break;
   }
 };
 
-// const nodeTree = async () => {
-//   showLoader();
-//   await http
-//     .get(config.API.profileOrganizRoot)
-//     .then((res: any) => {
-//       const data = res.data.result;
-//       nodesTree.value = data;
-//       if (data.length > 0) {
-//         expanded.value = [data[0].id];
-//       }
-//     })
-//     .catch((e) => {
-//       messageError($q, e);
-//     })
-//     .finally(() => {
-//       store.isLoad++;
-//     });
-// };
-
-/**
- * get รายการ ตำแหน่ง
- */
-// const fetchPosition = async () => {
-//   showLoader();
-//   await http
-//     .get(config.API.position)
-//     .then((res) => {
-//       const data = res.data.result;
-//       let optionpositionpaths: DataOption[] = [];
-//       data.positionPaths.map((r: any) => {
-//         optionpositionpaths.push({
-//           id: r.id.toString(),
-//           name: r.name.toString(),
-//         });
-//       });
-//       positionOptions.value = optionpositionpaths;
-//       positionOptionsFilter.value = optionpositionpaths;
-
-//       let optionPositionPathSides: DataOption[] = [];
-//       data.positionPathSides.map((r: any) => {
-//         optionPositionPathSides.push({
-//           id: r.id.toString(),
-//           name: r.name.toString(),
-//         });
-//       });
-//       positionSideOptions.value = optionPositionPathSides;
-//       positionSideOptionsFilter.value = optionPositionPathSides;
-
-//       let optionPositionTypes: DataOption[] = [];
-//       data.positionTypes.map((r: any) => {
-//         optionPositionTypes.push({
-//           id: r.id.toString(),
-//           name: r.name.toString(),
-//         });
-//       });
-//       positionTypeOptions.value = optionPositionTypes;
-//       positionTypeOptionsFilter.value = optionPositionTypes;
-
-//       let optionPositionLines: DataOption[] = [];
-//       data.positionLines.map((r: any) => {
-//         optionPositionLines.push({
-//           id: r.id.toString(),
-//           name: r.name.toString(),
-//         });
-//       });
-//       positionLineOptions.value = optionPositionLines;
-//       positionLineOptionsFilter.value = optionPositionLines;
-
-//       let optionPositionExecutives: DataOption[] = [];
-//       data.positionExecutives.map((r: any) => {
-//         optionPositionExecutives.push({
-//           id: r.id.toString(),
-//           name: r.name.toString(),
-//         });
-//       });
-//       positionExecutiveOptions.value = optionPositionExecutives;
-//       positionExecutiveOptionsFilter.value = optionPositionExecutives;
-
-//       let optionPositionExecutiveSides: DataOption[] = [];
-//       data.positionExecutiveSides.map((r: any) => {
-//         optionPositionExecutiveSides.push({
-//           id: r.id.toString(),
-//           name: r.name.toString(),
-//         });
-//       });
-//       positionExecutiveSideOptions.value = optionPositionExecutiveSides;
-//       positionExecutiveSideOptionsFilter.value = optionPositionExecutiveSides;
-
-//       let optionPositionLevels: DataOption[] = [];
-//       data.positionLevels.map((r: any) => {
-//         optionPositionLevels.push({
-//           id: r.id.toString(),
-//           name: r.name.toString(),
-//         });
-//       });
-//       positionLevelOptions.value = optionPositionLevels;
-//       positionLevelOptionsFilter.value = optionPositionLevels;
-//     })
-//     .catch((e: any) => {})
-//     .finally(() => {
-//       // hideLoader();
-//       store.isLoad++;
-//     });
-// };
-
 const fetchData = async () => {
   if (profileId.value) {
     showLoader();
@@ -1710,45 +1375,45 @@ const fetchData = async () => {
           rows.value.push({
             id: e.id,
             date: new Date(e.date),
-            amount: e.amount,
-            positionSalaryAmount: e.positionSalaryAmount,
-            mouthSalaryAmount: e.mouthSalaryAmount,
+            amount: e.amount ?? "-",
+            positionSalaryAmount: e.positionSalaryAmount ?? "-",
+            mouthSalaryAmount: e.mouthSalaryAmount ?? "-",
             oc: e.oc,
             ocId: e.ocId,
-            position: e.position,
-            positionName: e.positionName,
+            position: e.position ?? "-",
+            positionName: e.positionName ?? "-",
             positionId:
               e.positionId !== "00000000-0000-0000-0000-000000000000"
                 ? e.positionId
                 : "",
-            posNo: e.posNo,
+            posNo: e.posNo ?? "-",
             posNoId:
               e.posNoId !== "00000000-0000-0000-0000-000000000000"
                 ? e.posNoId
                 : "",
-            positionLine: e.positionLine,
-            positionLineName: e.positionLineName,
-            positionLineId: e.positionLineId,
-            positionPathSide: e.positionPathSide,
-            positionPathSideId: e.positionPathSideId,
-            positionPathSideName: e.positionPathSideName,
-            positionType: e.positionType,
-            positionTypeId: e.positionTypeId,
-            positionLevelId: e.positionLevelId,
-            positionLevel: e.positionLevel,
-            positionExecutive: e.positionExecutive,
-            positionExecutiveId: e.positionExecutiveId,
-            positionExecutiveName: e.positionExecutiveName,
-            positionExecutiveSide: e.positionExecutiveSide,
-            positionExecutiveSideId: e.positionExecutiveSideId,
-            salaryClass: e.salaryClass,
-            salaryRef: e.salaryRef,
-            salaryStatus: e.salaryStatus,
-            refCommandNo: e.refCommandNo,
-            createdFullName: e.createdFullName,
-            orgName: e.orgName,
-            agencyName: e.agencyName,
-            cLevel: e.cLevel,
+            positionLine: e.positionLine ?? "-",
+            positionLineName: e.positionLineName ?? "-",
+            positionLineId: e.positionLineId ?? "-",
+            positionPathSide: e.positionPathSide ?? "-",
+            positionPathSideId: e.positionPathSideId ?? "-",
+            positionPathSideName: e.positionPathSideName ?? "-",
+            positionType: e.positionType ?? "-",
+            positionTypeId: e.positionTypeId ?? "-",
+            positionLevelId: e.positionLevelId ?? "-",
+            positionLevel: e.positionLevel ?? "-",
+            positionExecutive: e.positionExecutive ?? "-",
+            positionExecutiveId: e.positionExecutiveId ?? "-",
+            positionExecutiveName: e.positionExecutiveName ?? "-",
+            positionExecutiveSide: e.positionExecutiveSide ?? "-",
+            positionExecutiveSideId: e.positionExecutiveSideId ?? "-",
+            salaryClass: e.salaryClass ?? "-",
+            salaryRef: e.salaryRef ?? "-",
+            salaryStatus: e.salaryStatus ?? "-",
+            refCommandNo: e.refCommandNo ?? "-",
+            createdFullName: e.createdFullName ?? "-",
+            orgName: e.orgName ?? "-",
+            agencyName: e.agencyName ?? "-",
+            cLevel: e.cLevel ?? "-",
             createdAt: new Date(e.createdAt),
           });
         });
@@ -1762,49 +1427,6 @@ const fetchData = async () => {
   }
 };
 
-// const onSelected = async (id: string) => {
-//   await fetchPositionNumber(id);
-// };
-
-// const fetchOrganization = async (id: string) => {
-//   if (selected.value != "") {
-//     showLoader();
-//     await http
-//       .get(config.API.organizationName(id))
-//       .then((res) => {
-//         let data = res.data.result;
-//         ocId.value = data;
-//       })
-//       .catch((e) => {
-//         messageError($q, e);
-//       })
-//       .finally(() => {
-//         hideLoader();
-//       });
-//   }
-// };
-
-// const fetchPositionNumber = async (id: string) => {
-//   showLoader();
-//   await http
-//     .get(config.API.getPositionNumberIdByOcId(id))
-//     .then((res) => {
-//       const data = res.data.result;
-//       let option: DataOption[] = [];
-//       data.map((r: DataOption) => {
-//         option.push({ id: r.id.toString(), name: r.name.toString() });
-//       });
-//       posNoOptions.value = option;
-//       posNoOptionsFilter.value = option;
-//     })
-//     .catch((e) => {
-//       messageError($q, e);
-//     })
-//     .finally(() => {
-//       hideLoader();
-//     });
-// };
-
 /**
  * กดดูข้อมูลก่อนหน้า
  */
@@ -1830,25 +1452,37 @@ const clickNext = async () => {
  */
 const getData = async () => {
   const row = rows.value[rowIndex.value];
-  date.value = row.date;
-  amount.value = row.amount;
-  positionSalaryAmount.value = row.positionSalaryAmount;
-  mouthSalaryAmount.value = row.mouthSalaryAmount;
-  // await onSelected(row.ocId);
-  selected.value = row.ocId;
-  positionName.value = row.positionName;
-  posNoId.value = row.posNoId;
-  posNo.value = row.posNo;
-  positionLineName.value = row.positionLineName;
-  positionPathSideName.value = row.positionPathSideName;
-  positionTypeId.value = row.positionTypeId;
-  positionLevelId.value = row.positionLevelId;
-  positionExecutiveName.value = row.positionExecutiveName;
-  positionExecutiveSideId.value = row.positionExecutiveSideId;
-  salaryClass.value = row.salaryClass;
-  salaryRef.value = row.salaryRef;
-  refCommandNo.value = row.refCommandNo;
+  // date.value = row.date;
+  // amount.value = row.amount;
+  // positionSalaryAmount.value = row.positionSalaryAmount;
+  // mouthSalaryAmount.value = row.mouthSalaryAmount;
+  // // await onSelected(row.ocId);
+  // selected.value = row.ocId;
+  // positionName.value = row.positionName;
+  // posNoId.value = row.posNoId;
+  // posNo.value = row.posNo;
+  // positionLineName.value = row.positionLineName;
+  // positionPathSideName.value = row.positionPathSideName;
+  // positionTypeId.value = row.positionTypeId;
+  // positionLevelId.value = row.positionLevelId;
+  // positionExecutiveName.value = row.positionExecutiveName;
+  // positionExecutiveSideId.value = row.positionExecutiveSideId;
+  // salaryClass.value = row.salaryClass;
+  // salaryRef.value = row.salaryRef;
+  // refCommandNo.value = row.refCommandNo;
   id.value = row.id;
+
+  formDataSalary.date = row.date;
+  formDataSalary.posNo = row.posNo ?? "-";
+  formDataSalary.templatePos = "";
+  formDataSalary.position = "";
+  formDataSalary.typePosition = row.positionType ?? "-";
+  formDataSalary.levelPosition = row.positionLevel ?? "-";
+  formDataSalary.salary = row.amount ?? 0;
+  formDataSalary.salaryPos = row.positionSalaryAmount ?? 0;
+  formDataSalary.templateDoc = "";
+  formDataSalary.doc = "";
+
   // await fetchPositionNumber(row.ocId);
 };
 
@@ -1884,81 +1518,10 @@ const clickAdd = async () => {
   await addData();
 };
 
-/**
- * gen ตำแหน่ง (รายละเอียด)
- */
-// const templateDetail = async () => {
-//   await fetchOrganization(selected.value);
-//   salaryClass.value = "";
-//   if (ocId.value != "") {
-//     salaryClass.value = salaryClass.value + `สังกัด${ocId.value} `;
-//   }
-
-//   const positionF = positionOptions.value.filter(
-//     (r: DataOption) => r.id == positionId.value
-//   );
-//   if (positionF.length > 0) {
-//     salaryClass.value = salaryClass.value + `ตำแหน่ง${positionF[0].name} `;
-//   }
-
-//   //   const posNoF = posNoOptions.value.filter(
-//   //     (r: DataOption) => r.id == posNoId.value
-//   //   );
-//   //   if (posNoF.length > 0) {
-//   //     salaryClass.value = salaryClass.value + `ตำแหน่งเลขที่${posNoF[0].name} `;
-//   //   }
-
-//   const positionLineF = positionLineOptions.value.filter(
-//     (r: DataOption) => r.id == positionLineId.value
-//   );
-//   if (positionLineF.length > 0) {
-//     salaryClass.value = salaryClass.value + `สายงาน${positionLineF[0].name} `;
-//   }
-
-//   const positionPathSideF = positionSideOptions.value.filter(
-//     (r: DataOption) => r.id == positionPathSideId.value
-//   );
-//   if (positionPathSideF.length > 0) {
-//     salaryClass.value =
-//       salaryClass.value + `ด้าน/สาขา${positionPathSideF[0].name} `;
-//   }
-
-//   const positionTypeF = positionTypeOptions.value.filter(
-//     (r: DataOption) => r.id == positionTypeId.value
-//   );
-//   if (positionTypeF.length > 0) {
-//     salaryClass.value =
-//       salaryClass.value + `ตำแหน่งประเภท${positionTypeF[0].name} `;
-//   }
-
-//   const positionLevelF = positionLevelOptions.value.filter(
-//     (r: DataOption) => r.id == positionLevelId.value
-//   );
-//   if (positionLevelF.length > 0) {
-//     salaryClass.value = salaryClass.value + `ระดับ${positionLevelF[0].name} `;
-//   }
-
-//   const positionExecutiveF = positionExecutiveOptions.value.filter(
-//     (r: DataOption) => r.id == positionExecutiveId.value
-//   );
-//   if (positionExecutiveF.length > 0) {
-//     salaryClass.value =
-//       salaryClass.value + `ตำแหน่งทางการบริหาร${positionExecutiveF[0].name} `;
-//   }
-// };
-
 /**
  * กดบันทึกใน dialog
  */
 const clickSave = async () => {
-  // if (amount.value == 0) {
-  //   amount.value = null;
-  // } else if (positionSalaryAmount.value == 0) {
-  //   positionSalaryAmount.value = null;
-  // } else if (mouthSalaryAmount.value == 0) {
-  //   mouthSalaryAmount.value = null;
-  // }
-
   myForm.value.validate().then(async (result: boolean) => {
     if (result) {
       if (modalEdit.value) {
@@ -1992,28 +1555,16 @@ const saveData = async () => {
     showLoader();
     await http
       .post(config.API.profileSalaryId(profileId.value), {
-        date: dateToISO(date.value),
-        amount: amount.value,
-        positionSalaryAmount: positionSalaryAmount.value,
-        mouthSalaryAmount: mouthSalaryAmount.value,
-        // ocId: selected.value,
-        orgName: orgName.value,
-        agencyName: agencyName.value,
-        cLevel: cLevel.value,
-        positionName: positionName.value,
-        // posNoId: posNoId.value,
-        posNo: posNo.value,
-        positionLineName: positionLineName.value,
-        positionPathSideName: positionPathSideName.value,
-        positionTypeId: positionTypeId.value,
-        positionLevelId: positionLevelId.value,
-        positionExecutiveName: positionExecutiveName.value,
-        // positionExecutiveSideId: positionExecutiveSideId.value,
-        // salaryClass: salaryClass.value,
-        salaryRef: salaryRef.value,
-        refCommandNo: refCommandNo.value,
+        date: dateToISO(formDataSalary.date),
+        posNo: formDataSalary.posNo,
+        positionName: formDataSalary.position,
+        positionTypeName: formDataSalary.typePosition,
+        positionLevelName: formDataSalary.levelPosition,
+        amount: formDataSalary.salary,
+        positionSalaryAmount: formDataSalary.salaryPos,
+        salaryRef: formDataSalary.doc,
       })
-      .then((res) => {
+      .then(() => {
         success($q, "บันทึกข้อมูลสำเร็จ");
         modal.value = false;
       })
@@ -2033,26 +1584,14 @@ const editData = async () => {
   showLoader();
   await http
     .put(config.API.profileSalaryId(id.value), {
-      date: dateToISO(date.value),
-      amount: amount.value,
-      positionSalaryAmount: positionSalaryAmount.value,
-      mouthSalaryAmount: mouthSalaryAmount.value,
-      ocId: selected.value,
-      positionName: positionName.value,
-      // posNoId: posNoId.value,
-      posNo: posNo.value,
-      positionLineName: positionLineName.value,
-      positionPathSideName: positionPathSideName.value,
-      positionTypeId: positionTypeId.value,
-      positionLevelId: positionLevelId.value,
-      positionExecutiveName: positionExecutiveName.value,
-      // positionExecutiveSideId: positionExecutiveSideId.value,
-      // salaryClass: salaryClass.value,
-      salaryRef: salaryRef.value,
-      refCommandNo: refCommandNo.value,
-      orgName: orgName.value,
-      agencyName: agencyName.value,
-      cLevel: cLevel.value,
+      date: dateToISO(formDataSalary.date),
+      posNo: formDataSalary.posNo,
+      positionName: formDataSalary.position,
+      positionTypeName: formDataSalary.typePosition,
+      positionLevelName: formDataSalary.levelPosition,
+      amount: formDataSalary.salary,
+      positionSalaryAmount: formDataSalary.salaryPos,
+      salaryRef: formDataSalary.doc,
     })
     .then((res) => {
       success($q, "บันทึกข้อมูลสำเร็จ");
@@ -2130,28 +1669,42 @@ const selectData = async (props: DataProps) => {
   edit.value = false;
   rawItem.value = props.row;
   rowIndex.value = props.rowIndex;
-  date.value = props.row.date;
-  amount.value = props.row.amount;
-  positionSalaryAmount.value = props.row.positionSalaryAmount;
-  mouthSalaryAmount.value = props.row.mouthSalaryAmount;
-  //   await onSelected(props.row.ocId);
-  selected.value = props.row.ocId;
-  positionName.value = props.row.positionName;
-  posNoId.value = props.row.posNoId;
-  posNo.value = props.row.posNo;
-  positionLineName.value = props.row.positionLineName;
-  positionPathSideName.value = props.row.positionPathSideName;
-  positionTypeId.value = props.row.positionTypeId;
-  positionLevelId.value = props.row.positionLevelId;
-  positionExecutiveName.value = props.row.positionExecutiveName;
-  positionExecutiveSideId.value = props.row.positionExecutiveSideId;
-  salaryClass.value = props.row.salaryClass;
-  salaryRef.value = props.row.salaryRef;
-  refCommandNo.value = props.row.refCommandNo;
   id.value = props.row.id;
-  orgName.value = props.row.orgName;
-  agencyName.value = props.row.agencyName;
-  cLevel.value = props.row.cLevel;
+
+  console.log(props.row);
+
+  // date.value = props.row.date;
+  // amount.value = props.row.amount;
+  // positionSalaryAmount.value = props.row.positionSalaryAmount;
+  // mouthSalaryAmount.value = props.row.mouthSalaryAmount;
+  //   await onSelected(props.row.ocId);
+  // selected.value = props.row.ocId;
+  // positionName.value = props.row.positionName;
+  // posNoId.value = props.row.posNoId;
+  // posNo.value = props.row.posNo;
+  // positionLineName.value = props.row.positionLineName;
+  // positionPathSideName.value = props.row.positionPathSideName;
+  // positionTypeId.value = props.row.positionTypeId;
+  // positionLevelId.value = props.row.positionLevelId;
+  // positionExecutiveName.value = props.row.positionExecutiveName;
+  // positionExecutiveSideId.value = props.row.positionExecutiveSideId;
+  // salaryClass.value = props.row.salaryClass;
+  // salaryRef.value = props.row.salaryRef;
+  // refCommandNo.value = props.row.refCommandNo;
+  // orgName.value = props.row.orgName;
+  // agencyName.value = props.row.agencyName;
+  // cLevel.value = props.row.cLevel;
+
+  formDataSalary.date = props.row.date;
+  formDataSalary.posNo = props.row.posNo ?? "-";
+  formDataSalary.templatePos = "";
+  formDataSalary.position = props.row.positionName ?? "-";
+  formDataSalary.typePosition = props.row.positionType ?? "-";
+  formDataSalary.levelPosition = props.row.positionLevel ?? "-";
+  formDataSalary.salary = props.row.amount ?? 0;
+  formDataSalary.salaryPos = props.row.positionSalaryAmount ?? 0;
+  formDataSalary.templateDoc = "";
+  formDataSalary.doc = props.row.salaryRef ?? "-";
   await checkRowPage();
 };
 
@@ -2187,6 +1740,17 @@ const addData = () => {
   refSelected.value = null;
   salaryRef.value = "";
   refCommandNo.value = "";
+
+  formDataSalary.date = new Date();
+  formDataSalary.posNo = "";
+  formDataSalary.templatePos = "";
+  formDataSalary.position = "";
+  formDataSalary.typePosition = "";
+  formDataSalary.levelPosition = "";
+  formDataSalary.salary = 0;
+  formDataSalary.salaryPos = 0;
+  formDataSalary.templateDoc = "";
+  formDataSalary.doc = "";
 };
 
 /**
@@ -2239,9 +1803,10 @@ function updateSelectType(val: string) {
 /**
  * เช็คว่ามีการแก้ไขข้อมูล
  */
-const clickEditRowRef = () => {
+const clickEditRowRef = (val: string) => {
   editRow.value = true;
-  salaryRef.value = refSelected.value?.name;
+  // salaryRef.value = refSelected.value?.name;
+  formDataSalary.doc = val;
 };
 
 /**
@@ -2310,12 +1875,27 @@ const clickHistory = async (row: RequestItemsObject) => {
  * validate input ใน dialog
  */
 const validateData = async () => {
+  // await myForm.value.validate().then((result: boolean) => {
+  //   if (result == false) {
+  //     checkValidate.value = false;
+  //   }
+  // });
+
+  const hasError = [];
   checkValidate.value = true;
-  await myForm.value.validate().then((result: boolean) => {
-    if (result == false) {
-      checkValidate.value = false;
+  for (const key in formDataSalaryRef) {
+    if (Object.prototype.hasOwnProperty.call(formDataSalaryRef, key)) {
+      const property = formDataSalaryRef[key];
+      if (property.value && typeof property.value.validate === "function") {
+        const isValid = property.value.validate();
+        hasError.push(isValid);
+      }
     }
-  });
+  }
+  if (hasError.every((result) => result === true)) {
+    formDataSalary.salary === 0 ? (formDataSalary.salary = undefined) : null;
+    checkValidate.value = false;
+  }
 };
 
 /**
@@ -2334,7 +1914,6 @@ function getPosition() {
   http
     .get(config.API.orgSalaryPosition)
     .then((res) => {
-      console.log(res);
       const dataOp = res.data.result;
       const dataLineOp = res.data.result;
 
@@ -2444,6 +2023,65 @@ watch(
     }
   }
 );
+
+/**
+ *  function จัดตำแหน่งเงินเดือน
+ * @param value ข้อมูล row
+ * @param up สถานะขึ้นลง
+ */
+async function onClicksortPos(value: any, up: boolean = true) {
+  if (up) {
+    await swapUp(value.row.personalId);
+  } else {
+    await swapDown(value.row.personalId);
+  }
+}
+
+/** ปรับรายการเงินเดือนขึ้น */
+async function swapUp(id: string) {
+  // await http
+  //   .put(config.API.swapUpOrder(id))
+  //   .catch((e) => {
+  //     messageError($q, e);
+  //   })
+  //   .finally(async () => {
+  //     hideLoader();
+  //   });
+}
+/** ปรับรายการเงินเดือนชื่อลง */
+async function swapDown(id: string) {
+  // await http
+  //   .put(config.API.swapDownOrder(id))
+  //   .catch((e) => {
+  //     messageError($q, e);
+  //   })
+  //   .finally(async () => {
+  //     hideLoader();
+  //   });
+}
+
+function updatePos(val: string) {
+  editRow.value = true;
+  formDataSalary.position = val;
+}
+
+function coppyForm() {
+  selected.value = "";
+  modalEdit.value = false;
+  modal.value = true;
+  edit.value = true;
+
+  formDataSalary.date = formDataSalary.date;
+  formDataSalary.posNo = formDataSalary.posNo;
+  formDataSalary.templatePos = formDataSalary.templatePos;
+  formDataSalary.position = formDataSalary.position;
+  formDataSalary.typePosition = formDataSalary.typePosition;
+  formDataSalary.levelPosition = formDataSalary.levelPosition;
+  formDataSalary.salary = formDataSalary.salary;
+  formDataSalary.salaryPos = formDataSalary.salaryPos;
+  formDataSalary.templateDoc = formDataSalary.templateDoc;
+  formDataSalary.doc = formDataSalary.doc;
+}
 </script>
 <style lang="scss">
 .modalfix {
diff --git a/src/modules/04_registry/components/Table.vue b/src/modules/04_registry/components/Table.vue
index 264c22d02..8dcc7a4d7 100644
--- a/src/modules/04_registry/components/Table.vue
+++ b/src/modules/04_registry/components/Table.vue
@@ -69,6 +69,8 @@
   >
     <template v-slot:header="props">
       <q-tr :props="props">
+        <q-th auto-width v-if="name === 'ตำแหน่ง/เงินเดือน'" />
+        <q-th auto-width v-if="name === 'ตำแหน่ง/เงินเดือน'" />
         <q-th v-for="col in props.cols" :key="col.name" :props="props">
           <span class="text-weight-medium">{{ col.label }}</span>
         </q-th>
diff --git a/src/modules/04_registry/interface/index/Main.ts b/src/modules/04_registry/interface/index/Main.ts
index c7518f784..0eaa8516e 100644
--- a/src/modules/04_registry/interface/index/Main.ts
+++ b/src/modules/04_registry/interface/index/Main.ts
@@ -78,7 +78,34 @@ interface OptionLevel {
   posLevelName: string;
 }
 
+interface FormSalaryNew {
+  date: Date;
+  posNo: string;
+  templatePos: string;
+  position: string;
+  typePosition: string;
+  levelPosition: string;
+  salary: number | undefined;
+  salaryPos: number | undefined;
+  templateDoc: string;
+  doc: string;
+}
+
+interface FormSalaryNewRef {
+  date: object | null;
+  posNo: object | null;
+  templatePos: object | null;
+  position: object | null;
+  levelPosition: object | null;
+  salary: object | null;
+  templateDoc: object | null;
+  doc: object | null;
+  [key: string]: any;
+}
+
 export type {
+  FormSalaryNew,
+  FormSalaryNewRef,
   Pagination,
   DataOption,
   DataOptionInsignia,
diff --git a/src/modules/04_registry/stores/salary.ts b/src/modules/04_registry/stores/salary.ts
new file mode 100644
index 000000000..446e43f9f
--- /dev/null
+++ b/src/modules/04_registry/stores/salary.ts
@@ -0,0 +1,212 @@
+import { ref, computed } from "vue";
+import { defineStore } from "pinia";
+
+export const useSalaryDataStore = defineStore("salary", () => {
+  const optionPos = ref<any>([
+    {
+      id: 1,
+      name: "เลื่อนเงินเดือน",
+    },
+    {
+      id: 2,
+      name: "เลื่อนเงินเดือน (ดีเด่น)",
+    },
+    {
+      id: 3,
+      name: "เลื่อนเงินเดือน (เพิ่มเติม)",
+    },
+
+    {
+      id: 4,
+      name: "ปรับเงินเดือน",
+    },
+
+    {
+      id: 5,
+      name: "ปรับเงินเดือนเพิ่มเติมตามคุณวุฒิการศึกษา",
+    },
+    {
+      id: 6,
+      name: "ปรับเงินเดือนเพิ่มเติมตามคุณวุฒิการศึกษา (เพิ่มเติม)",
+    },
+    {
+      id: 7,
+      name: "เลื่อนเงินเดือนและให้ข้าราชการ กทม. สามัญได้รับเงินเดือนสูงกว่าขั้นสูงของตำแหน่งที่ได้รับแต่งตั้ง",
+    },
+    {
+      id: 8,
+      name: "เลื่อนเงินเดือนกรณีพิเศษให้แก่ผู้ปฏิบัติงานด้านยาเสพติด",
+    },
+    {
+      id: 9,
+      name: "{ประเภทตำแหน่ง} {ชื่อตำแหน่ง} สำนัก{ชื่อสำนัก}",
+    },
+    {
+      id: 10,
+      name: "แต่งตั้งข้าราชการ {ประเภทตำแหน่ง} {ชื่อตำแหน่ง} สำนัก{ชื่อสำนัก}",
+    },
+    {
+      id: 11,
+      name: "แก้ไขคำสั่ง {หน่วยงาน/สำนัก} ที่ {เลขที่}/{ปีงบประมาณ} ลว. {วันที่ลงนาม}",
+    },
+
+    {
+      id: 12,
+      name: "โปรดเกล้าฯ {ชื่อตำแหน่ง} สำนัก{ชื่อสำนัก}",
+    },
+
+    {
+      id: 13,
+      name: "ช่วยราชการที่{หน่วยงานและรายละเอียดต่างๆ}",
+    },
+
+    {
+      id: 14,
+      name: "ปฏิบัติหน้าที่ในตำแหน่ง{ชื่อตำแหน่ง} สำนัก{ชื่อสำนัก}",
+    },
+
+    {
+      id: 15,
+      name: "รักษาการในตำแหน่ง{ชื่อตำแหน่ง} สำนัก{ชื่อสำนัก}",
+    },
+    {
+      id: 16,
+      name: "พ้นจากการทดลองปฏิบัติหน้าที่ราชการ",
+    },
+
+    {
+      id: 17,
+      name: "งดเลื่อนขั้นเงินเดือน",
+    },
+    {
+      id: 18,
+      name: "แก้ไขคำสั่งเลื่อนขั้นเงินเดือน {หน่วยงาน/สำนัก} ที่ {เลขที่}/{ปีงบประมาณ} ลว. {วันที่ลงนาม}",
+    },
+    {
+      id: 19,
+      name: "ยกเลิกคำสั่งเลื่อนขั้นเงินเดือน {หน่วยงาน/สำนัก} ที่ {เลขที่}/{ปีงบประมาณ} ลว. {วันที่ลงนาม}",
+    },
+    {
+      id: 20,
+      name: "กลับไปปฏิบัติงานทางต้นสังกัดเดิม",
+    },
+    {
+      id: 21,
+      name: "โปรดเกล้าฯ แตงตั้งให้ดำรงตำแหน่ง{รายละเอียดของตำแหน่งและหน่วยงาน}",
+    },
+  ]);
+
+  const optionDoc = ref<any>([
+    {
+      id: 1,
+      name: "บรรจุและแต่งตั้งผู้สอบแข่งขันได้ คำสั่ง {หน่วยงาน/สำนัก} ที่ {เลขที่}/{ปีงบประมาณ} ลว. {วันที่ลงนาม}",
+    },
+    {
+      id: 2,
+      name: "ปรับเงินเดือนตาม{รายละเอียดของบัญชี เช่นชื่อ ฉบับที่ ปี พ.ศ.}",
+    },
+    {
+      id: 3,
+      name: "เลื่อนเงินเดือนตามคำสั่ง {หน่วยงาน/สำนัก} ที่ {เลขที่}/{ปีงบประมาณ} ลว. {วันที่ลงนาม}",
+    },
+
+    {
+      id: 4,
+      name: "เลื่อนเงินขั้นเดือน คำสั่ง {หน่วยงาน/สำนัก} ที่ {เลขที่}/{ปีงบประมาณ} ลว. {วันที่ลงนาม}",
+    },
+
+    {
+      id: 5,
+      name: "เลื่อนเงินขั้นเดือน (1 ขั้น) คำสั่ง {หน่วยงาน/สำนัก} ที่ {เลขที่}/{ปีงบประมาณ} ลว. {วันที่ลงนาม}",
+    },
+    {
+      id: 6,
+      name: "เลื่อนเงินขั้นเดือน (1.5 ขั้น) คำสั่ง {หน่วยงาน/สำนัก} ที่ {เลขที่}/{ปีงบประมาณ} ลว. {วันที่ลงนาม}",
+    },
+    {
+      id: 7,
+      name: "แต่งตั้งตามคำสั่ง {หน่วยงาน/สำนัก} ที่ {เลขที่}/{ปีงบประมาณ} ลว. {วันที่ลงนาม}",
+    },
+    {
+      id: 8,
+      name: "คำสั่ง {หน่วยงาน/สำนัก} ที่ {เลขที่}/{ปีงบประมาณ} ลว. {วันที่ลงนาม}",
+    },
+    {
+      id: 9,
+      name: "ปรับเงินเดือนตาม{รายละเอียดข้อมูล}",
+    },
+    {
+      id: 10,
+      name: "แก้ไขคำสั่ง {หน่วยงาน/สำนัก} ที่ {เลขที่}/{ปีงบประมาณ} ลว. {วันที่ลงนาม} ตามคำสั่ง {หน่วยงาน/สำนัก} ที่ {เลขที่}/{ปีงบประมาณ} ลว. {วันที่ลงนาม}",
+    },
+    {
+      id: 11,
+      name: "เลื่อนระดับและแต่งตั้งคำสั่ง{หน่วยงาน/สำนัก} ที่ {เลขที่}/{ปีงบประมาณ} ลว. {วันที่ลงนาม}",
+    },
+
+    {
+      id: 12,
+      name: "แต่งตั้งดำรงตำแหน่ง{ชื่อตำแหน่ง} คำสั่ง{หน่วยงาน/สำนัก} ที่ {เลขที่}/{ปีงบประมาณ} ลว. {วันที่ลงนาม}",
+    },
+
+    {
+      id: 13,
+      name: "แต่งตั้งคำสั่ง{หน่วยงาน/สำนัก} ที่ {เลขที่}/{ปีงบประมาณ} ลว. {วันที่ลงนาม}",
+    },
+
+    {
+      id: 14,
+      name: "เลื่อนและแต่งตั้งโดยการสอบคัดเลือก คำสั่ง{หน่วยงาน/สำนัก} ที่ {เลขที่}/{ปีงบประมาณ} ลว. {วันที่ลงนาม}",
+    },
+
+    {
+      id: 15,
+      name: "แต่งตั้งข้าราชการให้ดำรงตำแหน่งของ{รายละเอียดของตำแหน่งและหน่วยงาน} คำสั่ง{หน่วยงาน/สำนัก} ที่ {เลขที่}/{ปีงบประมาณ} ลว. {วันที่ลงนาม}",
+    },
+    {
+      id: 16,
+      name: "ย้ายตามคำสั่ง{หน่วยงาน/สำนัก} ที่ {เลขที่}/{ปีงบประมาณ} ลว. {วันที่ลงนาม}",
+    },
+
+    {
+      id: 17,
+      name: "แต่งตั้งข้าราชการให้ดำรงตำแหน่งตามคำสั่ง{หน่วยงาน/สำนัก} ที่ {เลขที่}/{ปีงบประมาณ} ลว. {วันที่ลงนาม}",
+    },
+  ]);
+
+  const optiontype = ref<any>([
+    { id: 1, name: "ทั่วไป" },
+    { id: 2, name: "วิชาการ" },
+    { id: 3, name: "อำนวยการ" },
+    { id: 4, name: "บริหาร" },
+  ]);
+
+  const optipnLevel = ref<any>([
+    { id: 1, name: "1" },
+    { id: 2, name: "2" },
+    { id: 3, name: "3" },
+    { id: 4, name: "4" },
+    { id: 5, name: "5" },
+    { id: 6, name: "6" },
+    { id: 7, name: "7" },
+    { id: 8, name: "8" },
+    { id: 9, name: "9" },
+    { id: 10, name: "10" },
+    { id: 11, name: "11" },
+    { id: 12, name: "ปฏิบัติงาน" },
+    { id: 13, name: "ชำนาญงาน" },
+    { id: 14, name: "อาวุโส" },
+    { id: 15, name: "ทักษะพิเศษ" },
+    { id: 16, name: "ปฏิบัติการ" },
+    { id: 17, name: "ชำนาญการ" },
+    { id: 18, name: "ชำนาญการพิเศษ" },
+    { id: 19, name: "เชี่ยวชาญ" },
+    { id: 20, name: "ทรงคุณวุฒิ" },
+    { id: 21, name: "อำนวยการต้น" },
+    { id: 22, name: "อำนวยการสูง" },
+    { id: 23, name: "บริหารต้น" },
+    { id: 24, name: "บริหารสูง" },
+  ]);
+
+  return { optionPos, optionDoc, optiontype, optipnLevel };
+});