diff --git a/src/api/13_salary/api.salary.ts b/src/api/13_salary/api.salary.ts
index 7b484cfe0..726facee2 100644
--- a/src/api/13_salary/api.salary.ts
+++ b/src/api/13_salary/api.salary.ts
@@ -2,8 +2,8 @@ import env from "../index";
 const salary = `${env.API_URI}/salary`;
 const salaryRate = `${env.API_URI}/salary/rate`;
 const salaryPeriod = `${env.API_URI}/salary/period`;
-
 const salaryOrg = `${env.API_URI}/org/employee`;
+const salaryFormula = `${env.API_URI}/salary/formula`;
 
 export default {
   salaryChart: salary,
@@ -45,5 +45,8 @@ export default {
   salaryEmployeeRateListByid: (id: string) => `${salaryRate}/employee/${id}`,
 
   salaryEmployeePosType:()=>`${salaryOrg}/pos/type`,
-  salaryEmployeePositionType:(key:string)=>`${salaryOrg}/pos/position?keyword=${key}&type=positionType`
+  salaryFormula:()=>`${salaryFormula}`,
+  salaryFormulaById:(id:string)=>`${salaryFormula}/${id}`,
+  salaryEmployeePositionType:(key:string)=>`${salaryOrg}/pos/position?keyword=${key}&type=positionType`,
+  salaryEmployeeActive :()=>`${salary}/employee/active`
 };
diff --git a/src/modules/13_salary/components/salaryEmployeeChart/DialogFormCriteria.vue b/src/modules/13_salary/components/salaryEmployeeChart/DialogFormCriteria.vue
index c45d70b10..6d60ac6be 100644
--- a/src/modules/13_salary/components/salaryEmployeeChart/DialogFormCriteria.vue
+++ b/src/modules/13_salary/components/salaryEmployeeChart/DialogFormCriteria.vue
@@ -36,6 +36,7 @@ const props = defineProps({
     type: Object,
     defult: [],
   },
+  getDataMain: Function,
   // fetchData: {
   //   type: Function,
   //   required: true,
@@ -44,6 +45,7 @@ const props = defineProps({
 
 const posTypeOp = ref<DataOptions[]>([]);
 const posNameOp = ref<DataOptions[]>([]);
+const groupOldOp = ref<DataOptions[]>([]);
 const posLevelOp = ref<any[]>([]);
 const posNameListOp = ref<DataListOptions[]>([]);
 const formData = reactive<any>({
@@ -53,7 +55,7 @@ const formData = reactive<any>({
   posLevel: "", //ระดับชั้นงาน
   reson: "", //หมายเหตุ
   rateOldMin: "", //อัตราค่าจ้าง ขั้นต่ำสุด
-  groupOld: "", //อัตราค่าจ้าง กลุ่มบัญชีค่าจ้าง
+  groupOld: null, //อัตราค่าจ้าง กลุ่มบัญชีค่าจ้าง
   rateMaxOld: "", //อัตราค่าจ้าง ขั้นสูงสุดเดิม
   groupRateHigh: "", //อัตราค่าจ้างสูงกว่าฯ กลุ่มบัญชีค่าจ่าง
   rateHighMax: "", //อัตราค่าจ้างสูงกว่าฯ ขั้นสูงใหม่
@@ -86,7 +88,6 @@ function closeDialog() {
 }
 
 function clearFormData() {
-  console.log(3);
   isEdit.value = false;
   formData.posType = "";
   formData.posName = "";
@@ -116,35 +117,39 @@ function onClickSubmit() {
 }
 
 function onSubmit() {
-  dialogConfirm($q, () => {
-    showLoader();
+  dialogConfirm($q, async () => {
+    // showLoader();
     const body = {
-      posType: formData.posType,
-      posName: formData.posName,
-      posLevel: formData.posLevel,
-      reson: formData.reson,
-      rateOldMin:
+      posTypeId: formData.posType.id,
+      position: formData.posName,
+      posLevelId: formData.posLevel.id,
+      details: formData.reson,
+      salaryMin:
         typeof formData.rateOldMin === "string"
           ? Number(formData.rateOldMin.replace(/,/g, ""))
           : formData.rateOldMin,
-      groupOld: formData.groupOld,
-      rateMaxOld:
+      salaryEmployeeMinIds: formData.groupOld.map(
+        (group: DataOptions) => group.id
+      ),
+      salary:
         typeof formData.rateMaxOld === "string"
           ? Number(formData.rateMaxOld.replace(/,/g, ""))
           : formData.rateMaxOld,
-      groupRateHigh: formData.groupRateHigh,
-      rateHighMax:
+      salaryEmployeeId: formData.groupRateHigh,
+      salaryMax:
         typeof formData.rateHighMax === "string"
           ? Number(formData.rateHighMax.replace(/,/g, ""))
           : formData.rateHighMax,
     };
-    const url = !isEdit
-      ? config.API.salaryEmployeeRateList
-      : config.API.salaryEmployeeRateListByid(formData.id);
-    http[!isEdit ? "post" : "put"](url, body)
+
+    const url = !isEdit.value
+      ? config.API.salaryFormula()
+      : config.API.salaryFormulaById(formData.id);
+    await http[!isEdit.value ? "post" : "put"](url, body)
       .then((res) => {
         success($q, "บันทึกข้อมูลสำเร็จ");
         closeDialog();
+        props.getDataMain?.();
       })
       .catch((e) => {
         messageError($q, e);
@@ -176,7 +181,6 @@ function getPosType() {
   http
     .get(config.API.salaryEmployeePosType())
     .then((res) => {
-      console.log(res.data.result);
       const dataOp = res.data.result;
       posTypeOp.value = dataOp.map((item: any) => ({
         id: item.id,
@@ -197,15 +201,43 @@ function getPosName() {
   formData.posLevel = "";
   showLoader();
   http
-    .get(config.API.salaryEmployeePositionType(formData.posType))
+    .get(config.API.salaryEmployeePositionType(formData.posType.name))
     .then((res) => {
       const dataOp = res.data.result;
       posNameListOp.value = res.data.result;
-      posNameOp.value = dataOp.filter((item: DataListOptions) => item.posDictName).map((i:DataListOptions)=>({
-        id:i.id,
-        name:i.posDictName
+      posNameOp.value = [
+        ...new Map(
+          dataOp.map((i: DataListOptions) => [i.posDictName, i])
+        ).values(),
+      ].map((i: any) => ({
+        id: i.id,
+        name: i.posDictName,
       }));
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
 
+/** ดึงข้อมูล ตำแหน่ง */
+function getPosNameEdit() {
+  showLoader();
+  http
+    .get(config.API.salaryEmployeePositionType(formData.posType.name))
+    .then((res) => {
+      const dataOp = res.data.result;
+      posNameListOp.value = res.data.result;
+      posNameOp.value = [
+        ...new Map(
+          dataOp.map((i: DataListOptions) => [i.posDictName, i])
+        ).values(),
+      ].map((i: any) => ({
+        id: i.id,
+        name: i.posDictName,
+      }));
     })
     .catch((e) => {
       messageError($q, e);
@@ -219,34 +251,76 @@ function getPosLevel() {
   formData.posLevel = "";
   posLevelOp.value = posNameListOp.value
     .filter((item) => item.posDictName === formData.posName)
-    .map((i) => ({ id: i.id, name: i.posLevelName }));
+    .map((i) => ({ id: i.posLevelId, name: i.posLevelName }))
+    .sort((a, b) => a.name - b.name);
+  if (posLevelOp.value.length == 1) {
+    formData.posLevel = posLevelOp.value[0].id;
+  }
+}
+/** ดึงข้อมูล ระดับชั้นงาน */
+function getPosLevelEdit() {
+  console.log(1);
+  console.log(posNameListOp.value);
+
+  posLevelOp.value = posNameListOp.value
+    .filter((item) => item.posDictName === formData.posName)
+    .map((i) => ({ id: i.posLevelId, name: i.posLevelName }))
+    .sort((a, b) => a.name - b.name);
+  if (posLevelOp.value.length == 1) {
+    formData.posLevel = posLevelOp.value[0].id;
+  }
 }
 
+function getSalaryGroup() {
+  http
+    .get(config.API.salaryEmployeeActive())
+    .then((res) => {
+      const list = res.data.result;
+      const data = list.sort((a: any, b: any) => a.group - b.group);
+      groupOldOp.value = data.map((item: any) => ({
+        id: item.id,
+        name: item.name,
+      }));
+      console.log(groupOldOp.value);
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {});
+}
+
+function getDataEdit() {
+  http.get(config.API.salaryFormula() + `/${formData.id}`).then(async (res) => {
+    const data = res.data.result;
+    formData.posType = posTypeOp.value.find((a: any) => a.id == data.posTypeId);
+    formData.posName = data.position;
+    getPosNameEdit();
+    setTimeout(() => {
+      getPosLevelEdit();
+      formData.posLevel = posLevelOp.value.find(
+        (item: any) => item.id == data.posLevelId
+      );
+      formData.reson = data.details;
+      formData.rateOldMin = data.salaryMin;
+      formData.groupOld = groupOldOp.value.filter((b: any) =>
+        data.salaryEmployeeMinIds.includes(b.id)
+      );
+      formData.rateMaxOld = data.salary;
+      formData.groupRateHigh = data.salaryEmployeeId;
+      formData.rateHighMax = data.salaryMax;
+    }, 200);
+  });
+}
 watch(
   () => modal.value,
-  (check) => {
+  async (check) => {
     if (check) {
-      getPosType();
+      await getPosType();
+      await getSalaryGroup();
 
       if (isEdit.value) {
         formData.id = props.data?.id ? props.data.id : null;
-        formData.posType = props.data?.posType ? props.data.posType : null;
-        formData.posName = props.data?.posName ? props.data.posName : null;
-        formData.posLevel = props.data?.posLevel ? props.data.posLevel : null;
-        formData.reson = props.data?.reson ? props.data.reson : null;
-        formData.rateOldMin = props.data?.rateOldMin
-          ? props.data.rateOldMin
-          : null;
-        formData.groupOld = props.data?.groupOld ? props.data.groupOld : null;
-        formData.rateMaxOld = props.data?.rateMaxOld
-          ? props.data.rateMaxOld
-          : null;
-        formData.groupRateHigh = props.data?.groupRateHigh
-          ? props.data.groupRateHigh
-          : null;
-        formData.rateHighMax = props.data?.rateHighMax
-          ? props.data.rateHighMax
-          : null;
+        getDataEdit();
       }
     }
   }
@@ -275,14 +349,13 @@ watch(
                 :rules="[(val) => !!val || 'กรุณาเลือกกลุ่มงาน']"
                 :options="posTypeOp"
                 option-label="name"
-                option-value="name"
-                emit-value
+                option-value="id"
+                map-options
                 lazy-rules
                 hide-bottom-space
                 @update:model-value="getPosName()"
               />
             </div>
-
             <div class="col-4">
               <q-select
                 ref="posNameRef"
@@ -301,7 +374,6 @@ watch(
                 @update:model-value="getPosLevel()"
               />
             </div>
-
             <div class="col-4">
               <q-select
                 :readonly="formData.posName"
@@ -311,8 +383,8 @@ watch(
                 v-model="formData.posLevel"
                 :options="posLevelOp"
                 option-label="name"
-                option-value="name"
-                emit-value
+                option-value="id"
+                map-options
                 label="ระดับชั้นงาน"
                 :rules="[(val) => !!val || 'กรุณาเลือกระดับชั้นงาน']"
                 lazy-rules
@@ -351,15 +423,18 @@ watch(
                 ref="groupOldRef"
                 dense
                 outlined
+                multiple
                 v-model="formData.groupOld"
                 label="กลุ่มของผังบัญชีอัตราค่าจ้าง"
-                mask="###,###,###,###"
-                reverse-fill-mask
                 :rules="[
                   (val) =>
                     !!val ||
                     `${'กรุณาเลือกอัตราค่าจ้าง กลุ่มของผังบัญชีอัตราค่าจ้าง'}`,
                 ]"
+                :options="groupOldOp"
+                map-options
+                option-label="name"
+                option-value="id"
                 lazy-rules
                 hide-bottom-space
               />
@@ -391,12 +466,15 @@ watch(
                 outlined
                 v-model="formData.groupRateHigh"
                 label="กลุ่มบัญชีค่าจ้าง"
-                mask="###,###,###,###"
-                reverse-fill-mask
                 :rules="[
                   (val) => !!val || `${'กรุณากรอกเลือกกลุ่มบัญชีค่าจ้าง'}`,
                 ]"
                 lazy-rules
+                :options="groupOldOp"
+                map-options
+                option-label="name"
+                option-value="id"
+                emit-value
                 hide-bottom-space
               />
             </div>
diff --git a/src/modules/13_salary/components/salaryEmployeeChart/TabCriteria.vue b/src/modules/13_salary/components/salaryEmployeeChart/TabCriteria.vue
index 475b6a6d4..f89409cc2 100644
--- a/src/modules/13_salary/components/salaryEmployeeChart/TabCriteria.vue
+++ b/src/modules/13_salary/components/salaryEmployeeChart/TabCriteria.vue
@@ -1,6 +1,11 @@
 <script setup lang="ts">
-import { ref, reactive } from "vue";
+import { ref, reactive, onMounted, watch } from "vue";
 
+import type {
+  ListData,
+  ResponseData,
+} from "@/modules/13_salary/interface/index/EmployeeChart";
+import type { NewPagination } from "@/modules/13_salary/interface/index/Main";
 import DialogFormCriteria from "@/modules/13_salary/components/salaryEmployeeChart/DialogFormCriteria.vue";
 
 /** importType*/
@@ -9,7 +14,11 @@ import { useQuasar } from "quasar";
 
 /** importStore*/
 import { useCounterMixin } from "@/stores/mixin";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { br } from "@fullcalendar/core/internal-common";
 
+const maxPage = ref<number>(1);
 const $q = useQuasar();
 const {
   date2Thai,
@@ -127,21 +136,7 @@ const visibleColumns = ref<string[]>([
   "reson",
 ]);
 
-const rows = ref<any>([
-  {
-    id: "1",
-    posType: "ช่าง",
-    posName: "ผู้ช่วยช่างทั่วไป",
-    posLevel: "ช 1",
-    rateOldMin: 7690,
-    groupOld: "กลุ่มที่ 1",
-    rateMaxOld: 17880,
-    groupRateHigh: "กลุ่มที่ 1",
-    rateHighMax: 20000,
-    reson: "",
-    isActive: true,
-  },
-]);
+const rows = ref<ListData[]>([]);
 
 const formFilter = reactive({
   page: 1,
@@ -151,7 +146,7 @@ const formFilter = reactive({
 
 function filterFn() {
   formFilter.page = 1;
-  // fetchListData();
+  getData();
 }
 
 const pagination = ref({
@@ -162,27 +157,81 @@ const pagination = ref({
 const modalForm = ref<boolean>(false);
 const isStatusEdit = ref<boolean>(false);
 const dataRow = ref<any>({});
+
+function getData() {
+  showLoader();
+  http
+    .get(
+      config.API.salaryFormula() +
+        `/?page=${formFilter.page}&pageSize=${formFilter.pageSize}&keyword=${formFilter.keyword}`
+    )
+    .then((res) => {
+      console.log(res.data.result);
+      const data = res.data.result.data;
+      const total = res.data.result.total;
+      maxPage.value = Math.ceil(res.data.result.total / formFilter.pageSize);
+      rows.value = data.map((item: ResponseData) => ({
+        id: item.id,
+        posType: item.posType,
+        posName: item.position,
+        posLevel: item.posLevel,
+        rateOldMin: item.salaryMin,
+        groupOld: item.salaryEmployeeMin.sort((a,b)=>a -b),
+        rateMaxOld: item.salary,
+        groupRateHigh: item.group,
+        rateHighMax: item.salaryMax,
+        reson: item.details,
+      }));
+    })
+    .catch((e) => {
+      // messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
 function editPopup(params: any) {
   modalForm.value = true;
   isStatusEdit.value = true;
   console.log(params);
 
-  dataRow.value = params
+  dataRow.value = params;
+}
+
+function updatePage(val: number) {
+  formFilter.page = val;
+  getData();
+}
+
+function updatePageSize(newPagination: NewPagination) {
+  formFilter.page = 1;
+  formFilter.pageSize = newPagination.rowsPerPage;
 }
 
 function onClickDelete(id: string) {
   dialogRemove($q, () => {
-    // http
-    //   .delete(config.API.salaryEmployeeChartByid(id))
-    //   .then(() => {
-    //     fetchListChart();
-    //     success($q, "ลบข้อมูลสำเร็จ");
-    //   })
-    //   .catch((err) => {
-    //     messageError($q, err);
-    //   });
+    http
+      .delete(config.API.salaryFormula()+`/${id}`)
+      .then(() => {
+        getData();
+        success($q, "ลบข้อมูลสำเร็จ");
+      })
+      .catch((err) => {
+        messageError($q, err);
+      });
   });
 }
+watch(
+  () => formFilter.pageSize,
+  () => {
+    getData();
+  }
+);
+
+onMounted(() => {
+  getData();
+});
 </script>
 
 <template>
@@ -229,8 +278,9 @@ function onClickDelete(id: string) {
     :columns="columns"
     row-key="name"
     v-model:pagination="pagination"
-    :rows-per-page-options="[10, 20, 50, 100]"
+    :rows-per-page-options="[1, 20, 50, 100]"
     :visible-columns="visibleColumns"
+    @update:pagination="updatePageSize"
   >
     <template v-slot:header="props">
       <q-tr :props="props">
@@ -266,8 +316,17 @@ function onClickDelete(id: string) {
           >
             {{ col.value ? col.value.toLocaleString() : "-" }}
           </div>
+          <div v-else-if="col.name == 'groupOld'">
+          
+          <span v-for="item,index in col.value">
+
+          {{ item }}{{index+1 == col.value.length ?'':','}}
+          </span>
+          <!-- {{ col.value }} -->
+          </div>
           <div v-else>{{ col.value != "" ? col.value : "-" }}</div>
         </q-td>
+        
         <q-td>
           <q-btn
             flat
@@ -305,24 +364,26 @@ function onClickDelete(id: string) {
         </q-td>
       </q-tr>
     </template>
-    <!-- <template v-slot:pagination="scope">
+    <template v-slot:pagination="scope">
       <q-pagination
         v-model="formFilter.page"
         active-color="primary"
         color="dark"
-        :max="1"
+        :max="maxPage"
         :max-pages="5"
         size="sm"
         boundary-links
         direction-links
+        @update:model-value="updatePage"
       ></q-pagination>
-    </template> -->
+    </template>
   </d-table>
 
   <DialogFormCriteria
     v-model:modal="modalForm"
     v-model:isStatusEdit="isStatusEdit"
     :data="dataRow"
+    :get-data-Main="getData"
   />
 </template>
 
diff --git a/src/modules/13_salary/interface/index/EmployeeChart.ts b/src/modules/13_salary/interface/index/EmployeeChart.ts
index 9c00df8f8..4b1086d37 100644
--- a/src/modules/13_salary/interface/index/EmployeeChart.ts
+++ b/src/modules/13_salary/interface/index/EmployeeChart.ts
@@ -6,28 +6,53 @@ interface ObjectCharRef {
 }
 
 interface ObjectReteRef {
-  posType: object|null
-  posName: object|null
-  posLevel: object|null
-  rateOldMin: object|null
-  groupOld: object|null
-  rateMaxOld: object|null
-  groupRateHigh: object|null
-  rateHighMax: object|null
+  posType: object | null
+  posName: object | null
+  posLevel: object | null
+  rateOldMin: object | null
+  groupOld: object | null
+  rateMaxOld: object | null
+  groupRateHigh: object | null
+  rateHighMax: object | null
 
   [key: string]: any;
 }
 
 interface DataOptions {
-  id:string
-  name:string
+  id: string
+  name: string
 }
 interface DataListOptions {
-  id:string
-  posDictName:string
-  posTypeId:string
-  posTypeName:string
-  posLevelId:string
-  posLevelName:number
+  id: string
+  posDictName: string
+  posTypeId: string
+  posTypeName: string
+  posLevelId: string
+  posLevelName: number
 }
-export type { ObjectCharRef, ObjectReteRef,DataOptions,DataListOptions };
+
+interface ListData {
+  id: string
+  posType: string
+  posName: string
+  posLevel: string
+  rateOldMin: string
+  groupOld: Array<number>
+  rateMaxOld: string
+  groupRateHigh: string
+  rateHighMax: string
+  reson: string
+}
+interface ResponseData {
+  id: string
+  posLevel: string
+  position: string
+  posType: string
+  details: string
+  salaryMin: string
+  salary: string
+  salaryMax: string
+  group: string
+  salaryEmployeeMin: Array<number>
+}
+export type { ObjectCharRef, ObjectReteRef, DataOptions, DataListOptions, ListData,ResponseData };