diff --git a/src/modules/14_KPI/components/indicatorByPlan/DetailView.vue b/src/modules/14_KPI/components/indicatorByPlan/DetailView.vue
index f4115488a..9cb5a5ad9 100644
--- a/src/modules/14_KPI/components/indicatorByPlan/DetailView.vue
+++ b/src/modules/14_KPI/components/indicatorByPlan/DetailView.vue
@@ -26,10 +26,7 @@ async function fetchData() {
   showLoader();
   await http
     .get(config.API.kpiPlan)
-    .then(async (res) => {
-      console.log(res.data.result);
-      console.log("test");
-    })
+    .then(async (res) => {})
     .catch((err) => {
       messageError($q, err);
     })
diff --git a/src/modules/14_KPI/components/indicatorByPlan/IndicatorByPlan.vue b/src/modules/14_KPI/components/indicatorByPlan/IndicatorByPlan.vue
index c57279515..91968d13c 100644
--- a/src/modules/14_KPI/components/indicatorByPlan/IndicatorByPlan.vue
+++ b/src/modules/14_KPI/components/indicatorByPlan/IndicatorByPlan.vue
@@ -4,6 +4,7 @@ import { useCounterMixin } from "@/stores/mixin";
 import config from "@/app.config";
 import { QForm, useQuasar } from "quasar";
 import http from "@/plugins/http";
+import { useRoute } from "vue-router";
 import { usePositionEmp } from "@/modules/16_positionEmployee/store/organizational";
 const store = usePositionEmp();
 const mixin = useCounterMixin();
@@ -19,15 +20,35 @@ const {
 } = mixin;
 
 const planData = reactive<any>({
-  year: null,
+  year: 0, //ปีงบประมาณ
+  round: "", //รอบการประเมิน(เมษา->APR, ตุลา->OCT)
+  including: "", //รหัสตัวชี้วัด
+  includingName: "", //ชื่อตัวชี้วัด
+  target: "", //ค่าเป้าหมาย
+  unit: null, //หน่วยนับ
+  weight: null, //น้ำหนัก
+  achievement1: "", //ผลสำเร็จของงาน 1
+  achievement2: "", //ผลสำเร็จของงาน 2
+  achievement3: "", //ผลสำเร็จของงาน 3
+  achievement4: "", //ผลสำเร็จของงาน 4
+  achievement5: "", //ผลสำเร็จของงาน 5
+  meaning: "", //นิยามหรือความหมาย
+  formula: "", //สูตรคำนวณ
+  node: null, //ระดับหน่วยงาน
+  nodeId: "", //id หน่วยงาน
+  orgRevisionId: "", //RevisionId หน่วยงาน
+  strategy: null, //ระดับยุทธศาสตร์
+  strategyId: "", //id ยุทธศาสตร์
 });
 
 const filter = ref<string>("");
 const filterAgency = ref<string>("");
+const route = useRoute();
+const id = ref<string | string[]>(route.params.id);
 
 const roundOp = ref<any[]>([
-  { id: "APRIL", name: "เมษายน" },
-  { id: "OCTOBER", name: "ตุลาคม" },
+  { id: "APR", name: "เมษายน" },
+  { id: "OCT", name: "ตุลาคม" },
 ]);
 const notFound = ref<string>("ไม่พบข้อมูลที่ค้นหา");
 const noData = ref<string>("ไม่มีข้อมูล");
@@ -35,11 +56,13 @@ const expandedPlan = ref<Array<string | null>>([]);
 const expandedAgency = ref<Array<string | null>>([]);
 const nodeplan = ref<any>([]);
 const nodeAgency = ref<any>([]);
-const nodeId = ref<string>("");
+const editStatus = ref<boolean>(false);
 async function onSubmit() {
   dialogConfirm(
     $q,
-    async () => {},
+    async () => {
+      editStatus.value ? editData(id.value) : addData();
+    },
     "ยืนยันการบันทึกข้อมูล",
     "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
   );
@@ -97,19 +120,92 @@ async function fetchOrganizationActive() {
     });
 }
 
+async function fetchDataById(id: any) {
+  showLoader();
+  await http
+    .get(config.API.kpiPlanById(id))
+    .then(async (res) => {
+      const data = res.data.result;
+      // planData.value = data;
+      planData.year = data.year;
+      planData.round = data.round;
+      planData.including = data.including;
+      planData.includingName = data.includingName;
+      planData.target = data.target;
+      planData.unit = data.unit;
+      planData.weight = data.weight;
+      planData.achievement1 = data.achievement1;
+      planData.achievement2 = data.achievement2;
+      planData.achievement3 = data.achievement3;
+      planData.achievement4 = data.achievement4;
+      planData.achievement5 = data.achievement5;
+      planData.meaning = data.meaning;
+      planData.formula = data.formula;
+      planData.node = data.node;
+      planData.nodeId = data.nodeId;
+      planData.orgRevisionId = data.orgRevisionId;
+      planData.strategy = data.strategy;
+      planData.strategyId = data.strategyId;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
 function updateSelected(data: any) {
-  planData.strategyChildPlannedId = data.id;
-  planData.strategyChildPlannedNode = data.level;
+  planData.strategyId = data.id;
+  planData.strategy = data.level;
 }
 function updateSelectedAgency(data: any) {
-  planData.agencyId = data.orgTreeId;
-  planData.agencyLevel = data.orgLevel;
+  if (planData.node === data.orgLevel && planData.nodeId === data.orgTreeId) {
+    planData.node = null;
+    planData.nodeId = null;
+  } else {
+    planData.node = data.orgLevel;
+    planData.nodeId = data.orgTreeId;
+  }
+  planData.orgRevisionId = data.orgRevisionId;
+}
+
+async function addData() {
+  await http
+    .post(config.API.kpiPlan, planData)
+    .then(() => {
+      success($q, "บันทึกข้อมูลสำเร็จ");
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+async function editData(id: any) {
+  await http
+    .put(config.API.kpiPlanById(id), planData)
+    .then(() => {
+      success($q, "บันทึกข้อมูลสำเร็จ");
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
 }
 
 onMounted(async () => {
   //   fetchData();
   await fetchTree();
   await fetchOrganizationActive();
+  if (id.value !== undefined) {
+    editStatus.value = true;
+    fetchDataById(id.value);
+  }
   setTimeout(async () => {
     store.activeId && (await fetchDataTree(store.activeId));
   }, 200);
@@ -140,13 +236,19 @@ onMounted(async () => {
                 lazy-rules
                 outlined
                 class="inputgreen"
-                clearable
-                @clear="() => (planData.year = null)"
                 hide-bottom-space
                 :model-value="!!planData.year ? planData.year + 543 : null"
                 :label="`${'ปีงบประมาณ'}`"
                 @update:modelValue="planData.year = null"
               >
+                <template v-slot:prepend>
+                  <q-icon
+                    name="event"
+                    class="cursor-pointer"
+                    style="color: var(--q-primary)"
+                  >
+                  </q-icon>
+                </template>
               </q-input>
             </template>
           </datepicker>
@@ -174,7 +276,7 @@ onMounted(async () => {
         <div class="col-2">
           <q-input
             outlined
-            v-model="planData.Data1"
+            v-model="planData.including"
             label="รหัสตัวชี้วัด"
             bg-color="white"
             dense
@@ -186,7 +288,7 @@ onMounted(async () => {
         <div class="col-6">
           <q-input
             outlined
-            v-model="planData.Data2"
+            v-model="planData.includingName"
             label="ชื่อตัวชี้วัด"
             bg-color="white"
             dense
@@ -198,7 +300,7 @@ onMounted(async () => {
         <div class="col-3">
           <q-input
             outlined
-            v-model="planData.Data3"
+            v-model="planData.target"
             label="ค่าเป้าหมาย"
             bg-color="white"
             dense
@@ -210,9 +312,10 @@ onMounted(async () => {
         <div class="col-3">
           <q-input
             outlined
-            v-model="planData.Data4"
+            v-model="planData.unit"
             label="หน่วยนับ"
             bg-color="white"
+            type="number"
             dense
             class="inputgreen"
             :rules="[(val) => !!val || `${'กรุณากรอกหน่วยนับ'}`]"
@@ -222,8 +325,9 @@ onMounted(async () => {
         <div class="col-3">
           <q-input
             outlined
-            v-model="planData.Data5"
+            v-model="planData.weight"
             label="น้ำหนัก"
+            type="number"
             bg-color="white"
             dense
             class="inputgreen"
@@ -248,7 +352,7 @@ onMounted(async () => {
               <div class="col-8 q-pa-sm">
                 <q-input
                   outlined
-                  v-model="planData.point5"
+                  v-model="planData.achievement5"
                   label="กรอกผลสำเร็จของงาน"
                   bg-color="white"
                   dense
@@ -265,7 +369,7 @@ onMounted(async () => {
               <div class="col-8 q-pa-sm">
                 <q-input
                   outlined
-                  v-model="planData.point4"
+                  v-model="planData.achievement4"
                   label="กรอกผลสำเร็จของงาน"
                   bg-color="white"
                   dense
@@ -282,7 +386,7 @@ onMounted(async () => {
               <div class="col-8 q-pa-sm">
                 <q-input
                   outlined
-                  v-model="planData.point3"
+                  v-model="planData.achievement3"
                   label="กรอกผลสำเร็จของงาน"
                   bg-color="white"
                   dense
@@ -299,7 +403,7 @@ onMounted(async () => {
               <div class="col-8 q-pa-sm">
                 <q-input
                   outlined
-                  v-model="planData.point2"
+                  v-model="planData.achievement2"
                   label="กรอกผลสำเร็จของงาน"
                   bg-color="white"
                   dense
@@ -316,7 +420,7 @@ onMounted(async () => {
               <div class="col-8 q-pa-sm">
                 <q-input
                   outlined
-                  v-model="planData.point1"
+                  v-model="planData.achievement1"
                   label="กรอกผลสำเร็จของงาน"
                   bg-color="white"
                   dense
@@ -331,7 +435,7 @@ onMounted(async () => {
         <div class="col-12">
           <q-input
             outlined
-            v-model="planData.Data7"
+            v-model="planData.meaning"
             label="นิยามหรือความหมาย"
             type="textarea"
             bg-color="white"
@@ -344,7 +448,7 @@ onMounted(async () => {
         <div class="col-12">
           <q-input
             outlined
-            v-model="planData.Data8"
+            v-model="planData.formula"
             label="สูตรคำนวณ"
             bg-color="white"
             type="textarea"
@@ -386,12 +490,13 @@ onMounted(async () => {
                 :no-results-label="notFound"
                 :no-nodes-label="noData"
                 v-model:expanded="expandedAgency"
+                v-model:selected="planData.nodeId"
               >
                 <template v-slot:default-header="prop">
                   <q-item
                     clickable
                     @click.stop="updateSelectedAgency(prop.node)"
-                    :active="nodeId == prop.node.orgTreeId"
+                    :active="planData.nodeId == prop.node.orgTreeId"
                     active-class="my-list-link text-primary text-weight-medium"
                     class="row col-12 items-center text-dark q-py-xs q-pl-sm rounded-borders my-list"
                   >
@@ -448,12 +553,13 @@ onMounted(async () => {
                 :no-results-label="notFound"
                 :no-nodes-label="noData"
                 v-model:expanded="expandedPlan"
+                v-model:selected="planData.strategyId"
               >
                 <template v-slot:default-header="prop">
                   <q-item
                     clickable
                     @click.stop="updateSelected(prop.node)"
-                    :active="planData.strategyChildPlannedId == prop.node.id"
+                    :active="planData.strategyId == prop.node.id"
                     active-class="my-list-link text-primary text-weight-medium"
                     class="row col-12 items-center text-dark q-py-xs q-pl-sm rounded-borders my-list"
                   >
diff --git a/src/modules/14_KPI/views/indicatorByPlan.vue b/src/modules/14_KPI/views/indicatorByPlan.vue
index 11a853a8e..3e6dcb168 100644
--- a/src/modules/14_KPI/views/indicatorByPlan.vue
+++ b/src/modules/14_KPI/views/indicatorByPlan.vue
@@ -17,42 +17,28 @@ const { showLoader, hideLoader, dialogRemove, success, messageError } =
 const rows = ref<any>([]);
 const columns = ref<QTableProps["columns"]>([
   {
-    name: "indicatorNo",
-    align: "left",
-    label: "ลำดับตัวชี้วัด ",
-    sortable: true,
-    field: "indicatorNo",
-    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 node = ref<any>([]);
 const expanded = ref<any>([]);
-const filter = ref<string>("");
 const filterMain = ref<string>("");
-const visibleColumns = ref<string[]>([
-  "indicatorNo",
-  "indicatorPass",
-  "indicatorName",
-]);
+const visibleColumns = ref<string[]>(["including", "includingName"]);
 
 const orgOp = ref<any[]>([
   { id: "1", name: "กลุ่มงานช่วยนักบริหาร" },
@@ -60,43 +46,46 @@ const orgOp = ref<any[]>([
 ]);
 
 const roundOp = ref<any[]>([
-  { id: "1", name: "รอบเมษายน" },
-  { id: "2", name: "รอบตุลาคม" },
+  { id: "APR", name: "รอบเมษายน" },
+  { id: "OCT", name: "รอบตุลาคม" },
 ]);
 
 const formFilter = reactive({
   page: 1,
   pageSize: 10,
   org: "1",
-  round: "1",
+  round: "",
   keyword: "",
 });
+const totalList = ref<number>(1);
 
 const nodeData = reactive<any>({
-  node: null,
+  page: 1,
+  pageSize: 10,
+  round: "",
   nodeId: null,
+  node: null,
+  keyword: "",
 });
 
 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.kpiPlan +
+        `?page=${nodeData.page}&pageSize=${nodeData.pageSize}&round=${nodeData.round}&nodeId=${nodeData.nodeId}&node=${nodeData.node}&keyword=${nodeData.keyword}`
+    )
+    .then((res) => {
+      const data = res.data.result.data;
+      totalList.value = Math.ceil(res.data.result.total / nodeData.pageSize);
+      rows.value = data;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
 }
 
 function onClickAddOrView(status: boolean = false, id: string = "") {
@@ -112,6 +101,22 @@ function onClickDelete(id: number) {
   });
 }
 
+async function fetchData() {
+  showLoader();
+  await http
+    .get(config.API.kpiPlan)
+    .then(async (res) => {
+      const data = res.data.result.data;
+      rows.value = data;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
 function fetchActive() {
   showLoader();
   http
@@ -150,11 +155,34 @@ function updateSelectedTreeMain(data: any) {
     nodeData.node = data.orgLevel;
     nodeData.nodeId = data.orgTreeId;
   }
+  fetchListProjectNew();
+}
+
+function fetchListProjectNew() {
+  nodeData.page = 1;
+  fetchList();
+}
+
+async function deleteData(idData: string) {
+  dialogRemove($q, () =>
+    http
+      .delete(config.API.kpiPlanById(idData))
+      .then(() => {
+        fetchData();
+        success($q, "ลบข้อมูลสำเร็จ");
+      })
+      .catch((err) => {
+        messageError($q, err);
+      })
+      .finally(() => {
+        hideLoader();
+      })
+  );
 }
 
 onMounted(() => {
-  fetchList();
   fetchActive();
+  fetchData();
 });
 </script>
 
@@ -239,7 +267,7 @@ onMounted(() => {
             <q-select
               dense
               outlined
-              v-model="formFilter.round"
+              v-model="nodeData.round"
               :options="roundOp"
               label="รอบการประเมิน"
               option-label="name"
@@ -264,19 +292,19 @@ onMounted(() => {
             <q-input
               standout
               dense
-              v-model="formFilter.keyword"
+              v-model="nodeData.keyword"
               ref="filterRef"
               outlined
               debounce="300"
               placeholder="ค้นหา"
             >
               <template v-slot:append>
-                <q-icon v-if="formFilter.keyword == ''" name="search" />
+                <q-icon v-if="nodeData.keyword == ''" name="search" />
                 <q-icon
-                  v-if="formFilter.keyword !== ''"
+                  v-if="nodeData.keyword !== ''"
                   name="clear"
                   class="cursor-pointer"
-                  @click="formFilter.keyword = ''"
+                  @click="nodeData.keyword = ''"
                 />
               </template>
             </q-input>
@@ -305,6 +333,7 @@ onMounted(() => {
             :columns="columns"
             :rows="rows"
             row-key="subject"
+            :filter="nodeData.keyword"
             flat
             bordered
             dense
@@ -337,7 +366,7 @@ onMounted(() => {
                     round
                     icon="delete"
                     color="red"
-                    @click.stop.pervent="onClickDelete(props.rowIndex)"
+                    @click.stop.pervent="deleteData(props.row.id)"
                   >
                     <q-tooltip>ลบข้อมูล </q-tooltip>
                   </q-btn>