diff --git a/src/api/14_KPI/api.KPI.ts b/src/api/14_KPI/api.KPI.ts
index 2de431732..b6a5633a5 100644
--- a/src/api/14_KPI/api.KPI.ts
+++ b/src/api/14_KPI/api.KPI.ts
@@ -8,5 +8,9 @@ export default {
   /** รอบการประเมินผล*/
   kpiPeriod: `${kpiPeriod}`,
   kpiPeriodById: (id: string) => `${kpiPeriod}/${id}`,
-  kpiEvaluation
+  kpiEvaluation,
+
+
+  /** role */
+  kpiRoleMainList:`${KPI}/role`
 };
diff --git a/src/modules/14_KPI/components/indicatorByRole/DetailView.vue b/src/modules/14_KPI/components/indicatorByRole/DetailView.vue
index 60abbfbf3..94ad8bd6e 100644
--- a/src/modules/14_KPI/components/indicatorByRole/DetailView.vue
+++ b/src/modules/14_KPI/components/indicatorByRole/DetailView.vue
@@ -5,7 +5,6 @@ import { useRouter, useRoute } from "vue-router";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
-import DialogSelectAgency from "@/modules/15_development/components/DialogSelectAgency.vue";
 import { useCounterMixin } from "@/stores/mixin";
 
 import type { FormDataRole } from "@/modules/14_KPI/interface/request/Main";
@@ -124,37 +123,80 @@ function selectAgency() {
   modalDialogSelect.value = true;
 }
 
-function updateAgency(name: string) {
-  form.org = name;
-}
-
 /** บันทึกข้อมูล */
 function onSubmit() {
-  // const url = id.value ? config.API.???:config.API.???
+  showLoader();
+  const url = id.value
+    ? config.API.kpiRoleMainList + `/${id.value}`
+    : config.API.kpiRoleMainList;
+
+  const body = {
+    position: form.position, //ตำแหน่ง
+    year: form.year, //ปีงบประมาณ
+    round: form.round, //รอบการประเมิน(เมษา->APR, ตุลา->OCT)
+    including: form.including, //รหัสตัวชี้วัด
+    includingName: form.includingName, //ชื่อตัวชี้วัด
+    target: form.target, //ค่าเป้าหมาย
+    unit: form.unit, //หน่วยนับ
+    weight: form.weight, //น้ำหนัก
+    achievement1: formScore.score1, //ผลสำเร็จของงาน 1
+    achievement2: formScore.score2, //ผลสำเร็จของงาน 2
+    achievement3: formScore.score3, //ผลสำเร็จของงาน 3
+    achievement4: formScore.score4, //ผลสำเร็จของงาน 4
+    achievement5: formScore.score5, //ผลสำเร็จของงาน 5
+    meaning: form.meaning, //นิยามหรือความหมาย
+    formula: form.formula, //สูตรคำนวณ
+
+    node: form.node, //ระดับหน่วยงาน
+    nodeId: form.nodeId, //id หน่วยงาน
+    orgRevisionId: form.orgRevisionId, //RevisionId หน่วยงาน
+  };
+
+  http[id.value ? "put" : "post"](url, body)
+    .then((res) => {
+      success($q, "บันทึกสำเร็จ");
+      router.push(`/KPI-indicator-role`);
+    })
+    .finally(() => {
+      hideLoader();
+    });
 }
 
+//
+//
 function getDetail() {
-  // showLoader()
-  // http
-  // .get(config.API.???)
-  // .then((res)=>{
-  //   const data = res.data.result
-  //     form.position = data.position
-  //     form.year = data.year
-  //     form.round = data.round
-  //     form.org = data.org
-  //     form.including = data.including
-  //     form.includingName = data.includingName
-  //     form.target = data.target
-  //     form.unit = data.unit
-  //     form.weight = data.weight
-  //     form.meaning = data.meaning
-  //     form.formula = data.formula
-  // }).catch((e)=>{
-  //   messageError($q,e)
-  // }).finally(()=>{
-  //   hideLoader()
-  // })
+  showLoader();
+  http
+    .get(config.API.kpiRoleMainList + `/${id.value}`)
+    .then((res) => {
+      const data = res.data.result;
+      form.position = data.position;
+      form.year = data.year;
+      form.round = data.round;
+      form.including = data.including;
+      form.includingName = data.includingName;
+      form.target = data.target;
+      form.unit = data.unit;
+      form.weight = data.weight;
+      form.meaning = data.meaning;
+      form.formula = data.formula;
+
+      formScore.score1 = data.achievement1;
+      formScore.score2 = data.achievement2;
+      formScore.score3 = data.achievement3;
+      formScore.score4 = data.achievement4;
+      formScore.score5 = data.achievement5;
+
+      form.node = data.node;
+      form.nodeId = data.nodeId;
+      form.orgRevisionId = data.orgRevisionId;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
 }
 
 function fetchActive() {
@@ -195,7 +237,7 @@ function updateTicked(val: any) {
 }
 
 function updateSelected(data: any) {
-  console.log(data)
+  console.log(data);
   nodeId.value = data.orgTreeId;
   orgName.value = data.orgTreeName;
   form.node = data.orgLevel;
@@ -556,11 +598,6 @@ onMounted(() => {
       </q-card-actions>
     </q-form>
   </q-card>
-
-  <DialogSelectAgency
-    v-model:modal="modalDialogSelect"
-    @update:updateAgency="updateAgency"
-  />
 </template>
 
 <style scoped>
diff --git a/src/modules/14_KPI/interface/request/Main.ts b/src/modules/14_KPI/interface/request/Main.ts
index 4fd86ae77..9fdf100cd 100644
--- a/src/modules/14_KPI/interface/request/Main.ts
+++ b/src/modules/14_KPI/interface/request/Main.ts
@@ -40,4 +40,11 @@ interface FormDataRole {
   orgRevisionId: string | null;
 }
 
-export type { FormQueryRound, FormRound, FormCompetency, FormDataRole };
+interface NewPagination {
+  descending: boolean;
+  page: number;
+  rowsPerPage: number;
+  sortBy: string;
+}
+
+export type { FormQueryRound, FormRound, FormCompetency, FormDataRole,NewPagination };
diff --git a/src/modules/14_KPI/views/indicatorByRole.vue b/src/modules/14_KPI/views/indicatorByRole.vue
index 0b2bbffbf..6055ff2f9 100644
--- a/src/modules/14_KPI/views/indicatorByRole.vue
+++ b/src/modules/14_KPI/views/indicatorByRole.vue
@@ -1,52 +1,53 @@
 <script setup lang="ts">
-import { ref, reactive, onMounted } from "vue";
+import { ref, reactive, onMounted, watch } from "vue";
 import { useQuasar, type QTableProps } from "quasar";
 import { useRouter } from "vue-router";
 
 /** importStore*/
 import { useCounterMixin } from "@/stores/mixin";
-
+import http from "@/plugins/http";
+import config from "@/app.config";
+import type { NewPagination } from "@/modules/14_KPI/interface/request/Main";
 /** use*/
 const $q = useQuasar();
 const router = useRouter();
 const { showLoader, hideLoader, dialogRemove, success } = useCounterMixin();
 
+const maxPage = ref<number>(1);
+const totalList = ref<number>(1); //จำนวนข้อมูลรายการ
+
 /** หัวตาราง */
 const rows = ref<any>([]);
 const columns = ref<QTableProps["columns"]>([
   {
-    name: "indicatorNo",
+    name: "no",
     align: "left",
     label: "ลำดับตัวชี้วัด ",
     sortable: true,
-    field: "indicatorNo",
+    field: "no",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
   {
-    name: "indicatorPass",
+    name: "including",
     align: "left",
     label: "รหัสตัวชี้วัด",
     sortable: true,
-    field: "indicatorPass",
+    field: "including",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
   {
-    name: "indicatorName",
+    name: "includingName",
     align: "left",
     label: "ชื่อตัวชี้วัด",
     sortable: true,
-    field: "indicatorName",
+    field: "includingName",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
 ]);
-const visibleColumns = ref<string[]>([
-  "indicatorNo",
-  "indicatorPass",
-  "indicatorName",
-]);
+const visibleColumns = ref<string[]>(["no", "including", "includingName"]);
 
 const positionOp = ref<any[]>([
   { id: "1", name: "นักจัดการทั่วไป 1" },
@@ -65,27 +66,27 @@ const formFilter = reactive({
   round: "1",
   keyword: "",
 });
+const pagination = ref({
+  page: formFilter.page,
+  rowsPerPage: formFilter.pageSize,
+});
 
 function fetchList() {
   showLoader();
-  const data = [
-    {
-      id: "1",
-      indicatorNo: "1",
-      indicatorPass: "1กก",
-      indicatorName: "ตัวชี้วัด 1",
-    },
-    {
-      id: "2",
-      indicatorNo: "2",
-      indicatorPass: "2กก",
-      indicatorName: "ตัวชี้วัด 2",
-    },
-  ];
-  rows.value = data;
-  setTimeout(() => {
-    hideLoader();
-  }, 500);
+  http
+    .get(
+      config.API.kpiRoleMainList +
+        `?page=${formFilter.page}&pageSize=${formFilter.pageSize}`
+    )
+    .then((res) => {
+      console.log(res);
+      const data = res.data.result.data;
+      maxPage.value = Math.ceil(res.data.result.total / formFilter.pageSize);
+      rows.value = data;
+    })
+    .finally(() => {
+      hideLoader();
+    });
 }
 
 function onClickAddOrView(status: boolean = false, id: string = "") {
@@ -96,11 +97,34 @@ function onClickAddOrView(status: boolean = false, id: string = "") {
 
 function onClickDelete(id: number) {
   dialogRemove($q, () => {
-    rows.value.splice(id, 1);
-    success($q, "ลบข้อมูลสำเร็จ");
+    http
+    .delete(config.API.kpiRoleMainList+`/${id}`)
+    .then((res)=>{
+      success($q, "ลบข้อมูลสำเร็จ");
+      fetchList()
+    }).finally(()=>{
+      
+    })
   });
 }
 
+function updatePage(val: number) {
+  formFilter.page = val;
+  fetchList();
+}
+
+function updatePageSize(newPagination: NewPagination) {
+  formFilter.page = 1;
+  formFilter.pageSize = newPagination.rowsPerPage;
+}
+
+watch(
+  () => formFilter.pageSize,
+  () => {
+    fetchList();
+  }
+);
+
 onMounted(() => {
   fetchList();
 });
@@ -200,7 +224,22 @@ onMounted(() => {
         dense
         class="custom-header-table"
         :visible-columns="visibleColumns"
+        :rows-per-page-options="[10, 20, 50, 100]"
+        @update:pagination="updatePageSize"
       >
+        <template v-slot:pagination="scope">
+          <q-pagination
+            v-model="formFilter.page"
+            active-color="primary"
+            color="dark"
+            :max="maxPage"
+            :max-pages="5"
+            size="sm"
+            boundary-links
+            direction-links
+            @update:model-value="updatePage"
+          ></q-pagination>
+        </template>
         <template v-slot:header="props">
           <q-tr :props="props">
             <q-th v-for="col in props.cols" :key="col.name" :props="props">
@@ -217,7 +256,13 @@ onMounted(() => {
               :props="props"
               @click="onClickAddOrView(true, props.row.id)"
             >
-              <div class="table_ellipsis">
+              <div v-if="col.name === 'no'">
+                {{
+                  (formFilter.page - 1) * Number(pagination.rowsPerPage) + props.rowIndex + 1
+                }}
+              </div>
+
+              <div v-else class="table_ellipsis">
                 {{ col.value ? col.value : "-" }}
               </div>
             </q-td>
@@ -227,7 +272,7 @@ onMounted(() => {
                 round
                 icon="delete"
                 color="red"
-                @click.stop.pervent="onClickDelete(props.rowIndex)"
+                @click.stop.pervent="onClickDelete(props.row.id)"
               >
                 <q-tooltip>ลบข้อมูล </q-tooltip>
               </q-btn>