diff --git a/src/api/13_salary/api.salary.ts b/src/api/13_salary/api.salary.ts
index 857f9c5f2..e135fca2b 100644
--- a/src/api/13_salary/api.salary.ts
+++ b/src/api/13_salary/api.salary.ts
@@ -1,6 +1,18 @@
 import env from "../index";
-const evaluateIndividual = `${env.API_URI}/evaluate-individual`;
+const salary = `${env.API_URI}/salary`;
+const salaryRate = `${env.API_URI}/salary/rate`;
 
 export default {
-  evaluateIndividual,
+  salaryChart: salary,
+  salaryChartCopy: `${salary}/copy`,
+  salaryChartFile: (id: string) => `${salary}/file/${id}`,
+  salaryChartDelFile: (id: string, fileName: string) =>
+    `${salary}/file/${id}/${fileName}`,
+  salaryChartByid: (id: string) => `${salary}/${id}`,
+  salaryPosType: `${salary}/pos/type`,
+  salaryPosLevel: `${salary}/pos/level`,
+
+  /** รายการอัตราเงินเดือน*/
+  salaryRateList: salaryRate,
+  salaryRateListByid: (id: string) => `${salaryRate}/${id}`,
 };
diff --git a/src/modules/13_salary/components/SalaryChart/DialogFormMain.vue b/src/modules/13_salary/components/SalaryChart/DialogFormMain.vue
index 3fa0fd9df..46dba945d 100644
--- a/src/modules/13_salary/components/SalaryChart/DialogFormMain.vue
+++ b/src/modules/13_salary/components/SalaryChart/DialogFormMain.vue
@@ -1,11 +1,18 @@
 <script setup lang="ts">
 import { computed, ref, reactive, watch } from "vue";
 import { useQuasar } from "quasar";
+import axios from "axios";
+import http from "@/plugins/http";
+import config from "@/app.config";
 
 import type {
   DataOption,
   ObjectSalaryRef,
 } from "@/modules/13_salary/interface/index/Main";
+import type {
+  SalaryPosType,
+  SalaryPosLevel,
+} from "@/modules/13_salary/interface/response/Main";
 
 import Header from "@/components/DialogHeader.vue";
 
@@ -19,6 +26,7 @@ const {
   hideLoader,
   messageError,
   success,
+  dialogRemove,
 } = useCounterMixin();
 
 const modal = defineModel<boolean>("modal", { required: true });
@@ -31,17 +39,22 @@ const props = defineProps({
     type: Object,
     defult: [],
   },
+  fetchData: {
+    type: Function,
+    defult: () => {},
+  },
 });
 
+const salaryId = ref<string>("");
 const formData = reactive({
   salaryType: "", //*ประเภทผัง (OFFICER->"ข้าราชการกรุงเทพมหานครสามัญ",EMPLOYEE->"ลูกจ้างประจำกรุงเทพมหานคร")
-  posType: "", //*ประเภทของตำแหน่ง
-  posLevel: "", //*ระดับของตำแหน่ง
+  posTypeId: "", //*ประเภทของตำแหน่ง
+  posLevelId: "", //*ระดับของตำแหน่ง
   isActive: false, //*สถานะการใช้งาน
   date: null, //ให้ไว้ ณ วันที่
   startDate: null, //วันที่มีผลบังคับใช้
   endDate: null, //วันที่สิ้นสุดบังคับใช้
-  detail: "", //คำอธิบาย
+  details: "", //คำอธิบาย
 });
 
 /** ตัวแปร ref สำหรับแสดง validate */
@@ -54,8 +67,8 @@ const endDateRef = ref<Object | null>(null);
 
 const ObjectRef: ObjectSalaryRef = {
   salaryType: salaryTypeRef,
-  posTyp: posTypeRef,
-  posLevel: posLevelRef,
+  posTypId: posTypeRef,
+  posLevelId: posLevelRef,
   date: dateRef,
   startDate: startDateRef,
   endDate: endDateRef,
@@ -66,6 +79,9 @@ const salaryTypeOption = ref<DataOption[]>([
   { id: "EMPLOYEE", name: "ลูกจ้างประจำกรุงเทพมหานคร" },
 ]);
 
+const salaryPosTypeOption = ref<DataOption[]>([]);
+const salaryPosLevelOption = ref<DataOption[]>([]);
+
 const documentFile = ref<any>(null);
 const itemsDocument = ref<any>([]);
 
@@ -80,20 +96,88 @@ const title = computed(() => {
   return name;
 });
 
+async function fetchPosType() {
+  await http
+    .get(config.API.salaryPosType)
+    .then((res) => {
+      const listOption = res.data.result.map((e: SalaryPosType) => ({
+        id: e.id,
+        name: e.posTypeName,
+      }));
+      salaryPosTypeOption.value = listOption;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    });
+}
+
+async function fetchPosLevel() {
+  await http
+    .get(config.API.salaryPosLevel)
+    .then((res) => {
+      const listOption = res.data.result.map((e: SalaryPosLevel) => ({
+        id: e.id,
+        name: e.posLevelName,
+      }));
+      salaryPosLevelOption.value = listOption;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    });
+}
+
+async function fetchSalaryDetail(id: string) {
+  showLoader();
+  await http
+    .get(config.API.salaryChartByid(id))
+    .then((res) => {
+      const data = res.data.result;
+      console.log(data);
+      formData.salaryType = data.salaryType;
+      formData.posTypeId = data.posTypeId;
+      formData.posLevelId = data.posLevelId;
+      formData.isActive = data.isActive;
+      formData.date = data.date;
+      formData.startDate = data.startDate;
+      formData.endDate = data.endDate;
+      formData.details = data.details;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+async function fetchDocumentFile(id: string) {
+  await http
+    .get(config.API.salaryChartFile(id))
+    .then((res) => {
+      const list = res.data.map((e: any) => ({ name: e.fileName }));
+      itemsDocument.value = list;
+    })
+    .catch((err) => {});
+}
+
 watch(
   () => modal.value,
-  () => {
-    if (modal.value && props.typeAction === "edit") {
-      if (props.data) {
-        formData.salaryType = props.data.salaryType;
-        formData.posType = props.data.posType;
-        formData.posLevel = props.data.posLevel;
-        formData.isActive = props.data.isActive;
-        formData.date = props.data.date;
-        formData.startDate = props.data.startDate;
-        formData.endDate = props.data.endDate;
-        formData.detail = props.data.detail;
-        fetchDocumentFile(props.data.id);
+  async () => {
+    if (modal.value) {
+      if (salaryPosTypeOption.value.length === 0) {
+        await fetchPosType();
+      }
+      if (salaryPosLevelOption.value.length === 0) {
+        await fetchPosLevel();
+      }
+
+      if (props.typeAction === "edit") {
+        await showLoader();
+        if (props.data) {
+          salaryId.value = props.data.id;
+          await fetchDocumentFile(props.data.id);
+          await fetchSalaryDetail(props.data.id);
+        }
       }
     }
   }
@@ -106,17 +190,16 @@ function closeDialog() {
 
 function clearFormData() {
   formData.salaryType = "";
-  formData.posType = "";
-  formData.posLevel = "";
+  formData.posTypeId = "";
+  formData.posLevelId = "";
   formData.isActive = false;
   formData.date = null;
   formData.startDate = null;
   formData.endDate = null;
-  formData.detail = "";
+  formData.details = "";
   documentFile.value = null;
+  itemsDocument.value = [];
 }
-function fetchDocumentFile(id: string) {}
-function uploadDocumentFile() {}
 
 function onClickSubmit() {
   const hasError = [];
@@ -135,13 +218,95 @@ function onClickSubmit() {
 }
 
 function createSalary() {
-  dialogConfirm($q, () => {
-    if (props.typeAction === "add") {
-      success($q, "add");
-    } else {
-      success($q, "edit");
+  dialogConfirm($q, async () => {
+    showLoader();
+    try {
+      const url =
+        props.typeAction === "add"
+          ? config.API.salaryChart
+          : config.API.salaryChartByid(salaryId.value);
+      await http[props.typeAction === "add" ? "post" : "put"](url, formData);
+      success($q, "บันทีกข้อมูลสำเร็จ");
+      props.fetchData?.();
+    } catch (err) {
+      messageError($q, err);
+    } finally {
+      hideLoader();
+      closeDialog();
     }
-    closeDialog();
+  });
+}
+
+async function uploadDocumentFile() {
+  const fileName = documentFile.value.name.replace(/\.(xlsx|docx|pdf)$/, "");
+  showLoader();
+  const formData = new FormData();
+  formData.append("file", documentFile.value);
+  const body = {
+    replace: false,
+    fileList: {
+      fileName: fileName,
+    },
+  };
+  await http
+    .post(config.API.salaryChartFile(salaryId.value), body)
+    .then((res) => {
+      console.log(res);
+      const foundKey: any = Object.keys(res.data).find(
+        (key) =>
+          res.data[key]?.fileName !== undefined &&
+          res.data[key]?.fileName !== ""
+      );
+      const link = res.data[foundKey]?.uploadUrl;
+      fileUpLoad(link);
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+/**
+ * function อัปโหลดไฟล์
+ * @param url link อัปโหลด
+ */
+function fileUpLoad(url: string) {
+  axios
+    .put(url, documentFile.value, {
+      headers: { "Content-Type": documentFile.value?.type },
+      onUploadProgress: (e) => console.log(e),
+    })
+    .then(() => {
+      success($q, "อัปโหลดไฟล์สำเร็จ");
+      documentFile.value = null;
+      fetchDocumentFile(salaryId.value);
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {});
+}
+
+function onClickDeleteFile(fileName: string) {
+  dialogRemove($q, async () => {
+    showLoader();
+    await http
+      .delete(config.API.salaryChartDelFile(salaryId.value, fileName))
+      .then((res) => {
+        setTimeout(() => {
+          fetchDocumentFile(salaryId.value);
+          success($q, "ลบไฟล์สำเร็จ");
+        }, 1000);
+      })
+      .catch((err) => {
+        messageError($q, err);
+      })
+      .finally(() => {
+        setTimeout(() => {
+          hideLoader();
+        }, 1000);
+      });
   });
 }
 
@@ -153,6 +318,50 @@ function checkEndDate() {
     }
   }
 }
+
+async function onClickDonwload(fileName: string) {
+  showLoader();
+  await http
+    .get(config.API.salaryChartDelFile(salaryId.value, fileName))
+    .then((res) => {
+      const data = res.data;
+      downloadFile(data.downloadUrl, data.fileType, fileName);
+    })
+    .catch((err) => {
+      messageError($q, err);
+      hideLoader();
+    });
+}
+
+/**
+ * function เรียกไฟล์ PDF
+ * @param url  link PDF
+ * @param type  ประเภทไฟล์
+ * @param fileName  ชือไฟล์
+ */
+async function downloadFile(url: string, type: string, fileName: string) {
+  await axios
+    .get(url, {
+      method: "GET",
+      responseType: "blob",
+      headers: {
+        "Content-Type": "application/json",
+        Accept: type, // ถ้ามีการระบุเมื่ออัปโหลด
+      },
+    })
+    .then(async (res) => {
+      const a = document.createElement("a");
+      a.href = window.URL.createObjectURL(res.data);
+      a.download = fileName;
+      a.click();
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
 </script>
 
 <template>
@@ -192,8 +401,8 @@ function checkEndDate() {
                 option-value="id"
                 emit-value
                 map-options
-                v-model="formData.posType"
-                :options="salaryTypeOption"
+                v-model="formData.posTypeId"
+                :options="salaryPosTypeOption"
                 label="ประเภทตำแหน่ง/กลุ่ม"
                 :rules="[(val) => !!val || 'กรุณาเลือกประเภทตำแหน่ง/กลุ่ม']"
                 lazy-rules
@@ -210,8 +419,8 @@ function checkEndDate() {
                 option-value="id"
                 emit-value
                 map-options
-                v-model="formData.posLevel"
-                :options="salaryTypeOption"
+                v-model="formData.posLevelId"
+                :options="salaryPosLevelOption"
                 label="ระดับ"
                 :rules="[(val) => !!val || 'กรุณาเลือกระดับ']"
                 lazy-rules
@@ -369,7 +578,7 @@ function checkEndDate() {
 
             <div class="col-12">
               <q-input
-                v-model="formData.detail"
+                v-model="formData.details"
                 outlined
                 dense
                 type="textarea"
@@ -425,7 +634,7 @@ function checkEndDate() {
                       clickable
                       v-ripple
                     >
-                      <q-item-section>{{ file.fileName }}</q-item-section>
+                      <q-item-section>{{ file.name }}</q-item-section>
                       <q-item-section avatar>
                         <div class="row">
                           <div>
@@ -436,6 +645,7 @@ function checkEndDate() {
                               size="12px"
                               color="blue"
                               icon="mdi-download-outline"
+                              @click="onClickDonwload(file.name)"
                             >
                               <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
                             </q-btn>
@@ -448,6 +658,7 @@ function checkEndDate() {
                               size="12px"
                               color="red"
                               icon="mdi-delete-outline"
+                              @click="onClickDeleteFile(file.name)"
                               ><q-tooltip>ลบไฟล์</q-tooltip></q-btn
                             >
                           </div>
diff --git a/src/modules/13_salary/components/SalaryChart/DialogFormRate.vue b/src/modules/13_salary/components/SalaryChart/DialogFormRate.vue
index 3a6314200..596c5c798 100644
--- a/src/modules/13_salary/components/SalaryChart/DialogFormRate.vue
+++ b/src/modules/13_salary/components/SalaryChart/DialogFormRate.vue
@@ -1,6 +1,9 @@
 <script setup lang="ts">
 import { computed, ref, reactive, watch } from "vue";
 import { useQuasar } from "quasar";
+import { useRoute } from "vue-router";
+import http from "@/plugins/http";
+import config from "@/app.config";
 
 import type { ObjectSalaryRateRef } from "@/modules/13_salary/interface/index/Main";
 
@@ -9,6 +12,7 @@ import Header from "@/components/DialogHeader.vue";
 import { useCounterMixin } from "@/stores/mixin";
 
 const $q = useQuasar();
+const route = useRoute();
 const {
   date2Thai,
   dialogConfirm,
@@ -18,6 +22,8 @@ const {
   success,
 } = useCounterMixin();
 
+const salaryId = ref<string>(route.params.id.toString());
+
 const modal = defineModel<boolean>("modal", { required: true });
 const props = defineProps({
   typeAction: {
@@ -77,7 +83,6 @@ function closeDialog() {
 }
 
 function onClickSubmit() {
-  //   console.log(Number(formData.salary.replace(/,/g, "")));
   const hasError = [];
   for (const key in ObjectRef) {
     if (Object.prototype.hasOwnProperty.call(ObjectRef, key)) {
@@ -94,22 +99,46 @@ function onClickSubmit() {
 }
 
 function createSalaryRate() {
-  dialogConfirm($q, () => {
+  dialogConfirm($q, async () => {
+    showLoader();
+    const body: any = {
+      salary: Number(formData.salary.replace(/,/g, "")), //*เงินเดือนฐาน
+      salaryHalf: Number(formData.salaryHalf.replace(/,/g, "")), //0.5 ขั้น
+      salaryHalfSpecial: Number(formData.salaryHalfSpecial.replace(/,/g, "")), //0.5 ขั้น(เงินพิเศษ)
+      salaryFull: Number(formData.salaryFull.replace(/,/g, "")), //1 ขั้น
+      salaryFullSpecial: Number(formData.salaryFullSpecial.replace(/,/g, "")), //1 ขั้น(เงินพิเศษ)
+      salaryFullHalf: Number(formData.salaryFullHalf.replace(/,/g, "")), //1.formData5 ขั้น
+      salaryFullHalfSpecial: Number(
+        formData.salaryFullHalfSpecial.replace(/,/g, "")
+      ), //1.5 ขั้น(เงินพิเศษ)
+      isNext: formData.isNext, //*ทะลุขั้น
+    };
     if (props.typeAction === "add") {
-      success($q, "add");
-    } else {
-      success($q, "edit");
+      body.salaryId = salaryId.value;
+    }
+    try {
+      const url =
+        props.typeAction === "add"
+          ? config.API.salaryRateList
+          : config.API.salaryRateListByid(salaryId.value);
+      await http[props.typeAction === "add" ? "post" : "put"](url, body);
+      success($q, "บันทีกข้อมูลสำเร็จ");
+      // props.fetchData?.();
+    } catch (err) {
+      messageError($q, err);
+    } finally {
+      hideLoader();
+      closeDialog();
     }
-    closeDialog();
   });
 }
 
 watch(
   () => modal.value,
   () => {
+    console.log(salaryId.value);
     if (modal.value && props.typeAction === "edit") {
       if (props.data) {
-        console.log(props.data);
         const data = props.data;
 
         // formData.salaryId = data.id;
@@ -151,7 +180,7 @@ watch(
               />
             </div>
             <div class="col-6 row items-center">
-              <q-checkbox dense v-model="formData.isNext" label="ทำลุขั้น" />
+              <q-checkbox dense v-model="formData.isNext" label="ทะลุขั้น" />
             </div>
             <div class="col-6">
               <q-input
diff --git a/src/modules/13_salary/interface/index/Main.ts b/src/modules/13_salary/interface/index/Main.ts
index a716aa852..925340fe2 100644
--- a/src/modules/13_salary/interface/index/Main.ts
+++ b/src/modules/13_salary/interface/index/Main.ts
@@ -18,8 +18,8 @@ interface ItemsMenu {
 }
 interface ObjectSalaryRef {
   salaryType: object | null;
-  posTyp: object | null;
-  posLevel: object | null;
+  posTypId: object | null;
+  posLevelId: object | null;
   date: object | null;
   startDate: object | null;
   endDate: object | null;
diff --git a/src/modules/13_salary/interface/response/Main.ts b/src/modules/13_salary/interface/response/Main.ts
index dd83d7ac2..64ff0437c 100644
--- a/src/modules/13_salary/interface/response/Main.ts
+++ b/src/modules/13_salary/interface/response/Main.ts
@@ -26,4 +26,17 @@ interface SalaryRate {
   isNext: boolean;
 }
 
-export type { Salary, SalaryRate };
+interface SalaryPosType {
+  id: string;
+  posTypeName: string;
+  posTypeRank: string;
+}
+
+interface SalaryPosLevel {
+  id: string;
+  posLevelAuthority: string;
+  posLevelName: string;
+  posLevelRank: number;
+}
+
+export type { Salary, SalaryRate, SalaryPosType, SalaryPosLevel };
diff --git a/src/modules/13_salary/views/salaryChart.vue b/src/modules/13_salary/views/salaryChart.vue
index 581ad1b38..0e9219c18 100644
--- a/src/modules/13_salary/views/salaryChart.vue
+++ b/src/modules/13_salary/views/salaryChart.vue
@@ -2,6 +2,8 @@
 import { ref, onMounted, reactive, watch } from "vue";
 import { useQuasar } from "quasar";
 import { useRouter } from "vue-router";
+import http from "@/plugins/http";
+import config from "@/app.config";
 
 /** importType*/
 import type { QTableProps } from "quasar";
@@ -20,7 +22,14 @@ import { useCounterMixin } from "@/stores/mixin";
 /** use*/
 const $q = useQuasar();
 const router = useRouter();
-const { date2Thai, dialogRemove } = useCounterMixin();
+const {
+  date2Thai,
+  dialogRemove,
+  messageError,
+  showLoader,
+  hideLoader,
+  success,
+} = useCounterMixin();
 
 /** modalDialog*/
 const modalDialogFormMain = ref<boolean>(false);
@@ -99,7 +108,7 @@ const itemMenu = ref<ItemsMenu[]>([
     label: "คัดลอก",
     icon: "content_copy",
     color: "blue-6",
-    type: "coppy",
+    type: "copy",
   },
   {
     label: "ลบ",
@@ -112,10 +121,10 @@ const itemMenu = ref<ItemsMenu[]>([
 /** queryString*/
 const formQuery = reactive<FormQuerySalary>({
   page: 1, //*หน้า
-  pageSize: 10, //*จำนวนแถวต่อหน้า
+  pageSize: 2, //*จำนวนแถวต่อหน้า
   keyword: "", //keyword ค้นหา
 });
-const totalRow = ref<number>(1);
+const maxPage = ref<number>(1);
 
 /**
  * function updatePagination
@@ -127,32 +136,26 @@ function updatePagination(newPagination: NewPagination) {
 }
 
 async function fetchListSalaly() {
-  const data = [
-    {
-      id: "1",
-      salaryType: "OFFICER", //ประเภทผัง (OFFICER->"ข้าราชการกรุงเทพมหานครสามัญ",EMPLOYEE->"ลูกจ้างประจำกรุงเทพมหานคร")
-      posType: "ทั่วไป", //ระดับของตำแหน่ง
-      posLevel: "ชำนาญการ", //ประเภทของตำแหน่ง
-      isActive: true, //สถานะการใช้งาน
-      date: new Date(), //ให้ไว้ ณ วันที่
-      startDate: new Date(), //วันที่มีผลบังคับใช้
-      endDate: new Date(), //วันที่สิ้นสุดบังคับใช้
-      detail: "", //คำอธิบาย
-    },
-    {
-      id: "2",
-      salaryType: "EMPLOYEE", //ประเภทผัง (OFFICER->"ข้าราชการกรุงเทพมหานครสามัญ",EMPLOYEE->"ลูกจ้างประจำกรุงเทพมหานคร")
-      posType: "ทั่วไป", //ระดับของตำแหน่ง
-      posLevel: "ชำนาญการ", //ประเภทของตำแหน่ง
-      isActive: false, //สถานะการใช้งาน
-      date: new Date(), //ให้ไว้ ณ วันที่
-      startDate: new Date(), //วันที่มีผลบังคับใช้
-      endDate: new Date(), //วันที่สิ้นสุดบังคับใช้
-      detail: "", //คำอธิบาย
-    },
-  ];
-
-  rows.value = data;
+  showLoader();
+  const page = await formQuery.page.toString();
+  const pageSize = await formQuery.pageSize.toString();
+  const keyword = await formQuery.keyword.toString();
+  await http
+    .get(
+      config.API.salaryChart +
+        `?page=${page}&pageSize=${pageSize}&keyword=${keyword}`
+    )
+    .then((res) => {
+      maxPage.value = Math.ceil(res.data.result.total / formQuery.pageSize);
+      const data = res.data.result.data;
+      rows.value = data;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
 }
 
 const typeAction = ref<string>("");
@@ -169,19 +172,47 @@ async function onClickSalaryRate(id: string) {
   router.push(`/salary/rate/${id}`);
 }
 
-async function onClickCoppy() {}
+async function onClickCoppy(id: string) {
+  await http
+    .post(config.API.salaryChartCopy, { id: id })
+    .then(() => {
+      success($q, "คัดลอกข้อมูลสำเร็จ");
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      fetchListSalaly();
+    });
+}
 
-async function onClickDelete() {
-  dialogRemove($q, () => {});
+async function onClickDelete(id: string) {
+  dialogRemove($q, async () => {
+    await http
+      .delete(config.API.salaryChartByid(id))
+      .then(() => {
+        success($q, "ลบข้อมูลสำเร็จ");
+      })
+      .catch((err) => {
+        messageError($q, err);
+      })
+      .finally(() => {
+        fetchListSalaly();
+      });
+  });
 }
 
 onMounted(async () => {
   await fetchListSalaly();
 });
 
-watch([() => formQuery.page, () => formQuery.pageSize], () => {
-  console.log(formQuery.page, formQuery.pageSize);
+watch([() => formQuery.page, () => formQuery.pageSize], async () => {
+  await fetchListSalaly();
 });
+
+async function filterFn(page: number) {
+  page !== 1 ? (formQuery.page = 1) : await fetchListSalaly();
+}
 </script>
 
 <template>
@@ -205,6 +236,7 @@ watch([() => formQuery.page, () => formQuery.pageSize], () => {
         outlined
         v-model="formQuery.keyword"
         placeholder="ค้นหา"
+        @keydown.enter.prevent="filterFn(formQuery.page)"
       >
         <template v-slot:append>
           <q-icon name="search" />
@@ -238,7 +270,7 @@ watch([() => formQuery.page, () => formQuery.pageSize], () => {
         bordered
         :paging="true"
         dense
-        :rows-per-page-options="[10, 25, 50, 100]"
+        :rows-per-page-options="[2, 10, 25, 50, 100]"
         @update:pagination="updatePagination"
         :visible-columns="visibleColumns"
       >
@@ -295,10 +327,10 @@ watch([() => formQuery.page, () => formQuery.pageSize], () => {
                           ? onClickSalary('edit', props.row)
                           : item.type === 'salaryRate'
                           ? onClickSalaryRate(props.row.id)
-                          : item.type === 'coppy'
-                          ? onClickCoppy()
+                          : item.type === 'copy'
+                          ? onClickCoppy(props.row.id)
                           : item.type === 'delete'
-                          ? onClickDelete()
+                          ? onClickDelete(props.row.id)
                           : null
                       "
                     >
@@ -324,7 +356,7 @@ watch([() => formQuery.page, () => formQuery.pageSize], () => {
             v-model="formQuery.page"
             active-color="primary"
             color="dark"
-            :max="totalRow"
+            :max="maxPage"
             size="sm"
             boundary-links
             direction-links
@@ -338,6 +370,7 @@ watch([() => formQuery.page, () => formQuery.pageSize], () => {
     v-model:modal="modalDialogFormMain"
     :typeAction="typeAction"
     :data="dataRow"
+    :fetchData="fetchListSalaly"
   />
 </template>
 
diff --git a/src/modules/13_salary/views/salaryRate.vue b/src/modules/13_salary/views/salaryRate.vue
index f3ce20a34..806f2e96b 100644
--- a/src/modules/13_salary/views/salaryRate.vue
+++ b/src/modules/13_salary/views/salaryRate.vue
@@ -1,7 +1,9 @@
 <script setup lang="ts">
 import { ref, onMounted, reactive, watch } from "vue";
 import { useQuasar } from "quasar";
-import { useRouter } from "vue-router";
+import { useRouter, useRoute } from "vue-router";
+import http from "@/plugins/http";
+import config from "@/app.config";
 
 /** importType*/
 import type { QTableProps } from "quasar";
@@ -21,7 +23,17 @@ import { useCounterMixin } from "@/stores/mixin";
 /** use*/
 const $q = useQuasar();
 const router = useRouter();
-const { date2Thai, dialogRemove, success } = useCounterMixin();
+const route = useRoute();
+const {
+  date2Thai,
+  dialogRemove,
+  success,
+  messageError,
+  showLoader,
+  hideLoader,
+} = useCounterMixin();
+
+const salaryId = ref<string>(route.params.id.toString());
 
 /** modalDialog*/
 const modalDialogFormRate = ref<boolean>(false);
@@ -95,49 +107,67 @@ const itemMenu = ref<ItemsMenu[]>([
 /** queryString*/
 const formQuery = reactive<FormQuerySalary>({
   page: 1, //*หน้า
-  pageSize: 10, //*จำนวนแถวต่อหน้า
+  pageSize: 100, //*จำนวนแถวต่อหน้า
   keyword: "", //keyword ค้นหา
 });
 const totalRow = ref<number>(1);
 
-function fetchListSalalyRate() {
-  const data = [
-    {
-      id: "0bc687ad-4273-4aa1-8d8a-65f45e743644",
-      salary: 100,
-      salaryHalf: 100,
-      salaryHalfSpecial: 100,
-      salaryFull: 100,
-      salaryFullSpecial: 100,
-      salaryFullHalf: 100,
-      salaryFullHalfSpecial: 100,
-      isNext: false,
-    },
-    {
-      id: "0bc687ad-4273-4aa1-8d8a-65f45e743666",
-      salary: 200,
-      salaryHalf: 200,
-      salaryHalfSpecial: 200,
-      salaryFull: 200,
-      salaryFullSpecial: 200,
-      salaryFullHalf: 200,
-      salaryFullHalfSpecial: 200,
-      isNext: false,
-    },
-    {
-      id: "0bc687ad-4273-4aa1-8d8a-65f45e743677",
-      salary: 300,
-      salaryHalf: 300,
-      salaryHalfSpecial: 300,
-      salaryFull: 300,
-      salaryFullSpecial: 300,
-      salaryFullHalf: 300,
-      salaryFullHalfSpecial: 300,
-      isNext: false,
-    },
-  ];
+async function fetchListSalalyRate() {
+  showLoader();
+  const page = await formQuery.page.toString();
+  const pageSize = await formQuery.pageSize.toString();
+  const keyword = await formQuery.keyword.toString();
+  await http
+    .get(
+      config.API.salaryRateListByid(salaryId.value) +
+        `?page=${page}&pageSize=${pageSize}&keyword=${keyword}`
+    )
+    .then((res) => {
+      console.log(res);
+    })
+    .catch((err) => {
+      // messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+  // const data = [
+  //   {
+  //     id: "0bc687ad-4273-4aa1-8d8a-65f45e743644",
+  //     salary: 100,
+  //     salaryHalf: 100,
+  //     salaryHalfSpecial: 100,
+  //     salaryFull: 100,
+  //     salaryFullSpecial: 100,
+  //     salaryFullHalf: 100,
+  //     salaryFullHalfSpecial: 100,
+  //     isNext: false,
+  //   },
+  //   {
+  //     id: "0bc687ad-4273-4aa1-8d8a-65f45e743666",
+  //     salary: 200,
+  //     salaryHalf: 200,
+  //     salaryHalfSpecial: 200,
+  //     salaryFull: 200,
+  //     salaryFullSpecial: 200,
+  //     salaryFullHalf: 200,
+  //     salaryFullHalfSpecial: 200,
+  //     isNext: false,
+  //   },
+  //   {
+  //     id: "0bc687ad-4273-4aa1-8d8a-65f45e743677",
+  //     salary: 300,
+  //     salaryHalf: 300,
+  //     salaryHalfSpecial: 300,
+  //     salaryFull: 300,
+  //     salaryFullSpecial: 300,
+  //     salaryFullHalf: 300,
+  //     salaryFullHalfSpecial: 300,
+  //     isNext: false,
+  //   },
+  // ];
 
-  rows.value = data;
+  // rows.value = data;
 }
 
 /**
@@ -145,8 +175,8 @@ function fetchListSalalyRate() {
  * @param newPagination ข้อมูล Pagination ใหม่
  */
 function updatePagination(newPagination: NewPagination) {
-  formQuery.page = 1;
-  formQuery.pageSize = newPagination.rowsPerPage;
+  // formQuery.page = 1;
+  // formQuery.pageSize = newPagination.rowsPerPage;
 }
 
 const typeAction = ref<string>("");
@@ -168,6 +198,10 @@ function onClickDelete() {
 onMounted(async () => {
   await fetchListSalalyRate();
 });
+
+watch([() => formQuery.page, () => formQuery.pageSize], async () => {
+  await fetchListSalalyRate();
+});
 </script>
 
 <template>