Merge branch 'develop' into devTee

2025-07-15 11:49:17 +07:00 · 2025-07-15 11:49:17 +07:00 · d5ef136e85
commit d5ef136e85
parent edad54a8f7 6db8040e90
12 changed files with 773 additions and 390 deletions
--- a/src/modules/01_masterdata/components/Indicators/indicatorByPlan/IndicatorByPlan.vue
+++ b/src/modules/01_masterdata/components/Indicators/indicatorByPlan/IndicatorByPlan.vue
@ -216,7 +216,7 @@ function onSubmit() {
          const res = await http[method](url, body);
          success($q, "บันทึกข้อมูลสำเร็จ");
          editStatus.value
-            ? fetchDataById(id.value)
+            ? await fetchDataById(id.value)
            : router.push(`/masterdata/indicator-plan/${res.data.result}`);
        } catch (e) {
          messageError($q, e);
--- a/src/modules/01_masterdata/components/competency/01ListCompetency.vue
+++ b/src/modules/01_masterdata/components/competency/01ListCompetency.vue
@ -9,6 +9,7 @@ import config from "@/app.config";
 import { useCounterMixin } from "@/stores/mixin";
 import { useKPIDataStore } from "@/modules/01_masterdata/stores/KPIStore";
 import { checkPermission } from "@/utils/permissions";
+import { updateCurrentPage } from "@/utils/function";

 import type {
  DataOption,
@ -23,10 +24,32 @@ const $q = useQuasar();
 const mixin = useCounterMixin();
 const { dialogRemove, messageError, showLoader, hideLoader, success } = mixin;

-const total = ref<number>();
 const store = useKPIDataStore();
 const router = useRouter();

+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "name",
+    align: "left",
+    label: "ชื่อสมรรถนะ",
+    sortable: true,
+    field: "name",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+const visibleColumns = ref<string[]>(["name"]);
+
+const rows = ref<ResDataCapacity[]>([]); // ข้อมูลสมรรถนะ
+const total = ref<number>(0); // จำนวนรายการทั้งหมด
+const totalList = ref<number>(1); // จำนวนหน้าทั้งหมด
+const formQuery = reactive<FormQueryCapacity>({
+  page: 1,
+  pageSize: 10,
+  keyword: "",
+}); // form query สำหรับการค้นหา
 const competencyTypeOp = ref<DataOption[]>([
  {
    id: "HEAD",
@ -48,31 +71,9 @@ const competencyTypeOp = ref<DataOption[]>([
    id: "INSPECTOR",
    name: "สมรรถนะเฉพาะสำหรับตำแหน่งผู้ตรวจราชการ กทม. และผู้ตรวจราชการ",
  },
-]);
-const columns = ref<QTableProps["columns"]>([
-  {
-    name: "name",
-    align: "left",
-    label: "ชื่อสมรรถนะ",
-    sortable: true,
-    field: "name",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-]);
-const visibleColumns = ref<string[]>(["name"]);
+]); // ประเภทสมรรถนะ

-const rows = ref<ResDataCapacity[]>([]);
-const formQuery = reactive<FormQueryCapacity>({
-  page: 1,
-  pageSize: 10,
-  keyword: "",
-});
-const totalList = ref<number>(1); //จำนวนข้อมูลรายการ
-
-/** ดึงข้อมูล */
+/** ฟังก์ชันดึงข้อมูลรายการสมรรถนะ */
 async function fetchList() {
  showLoader();
  await http
@ -96,20 +97,37 @@ async function fetchList() {
    });
 }

+/**
+ * ฟังก์ชันไปหน้าแก้ไขสมรรถนะ
+ * @param id รหัสสมรรถนะที่ต้องการแก้ไข
+ */
 async function onViewDetail(id: string) {
  router.push(`/masterdata/competency/${id}`);
 }

+/**
+ * ฟังก์ชันดูรายละเอียดสมรรถนะ
+ * @param id รหัสสมรรถนะที่ต้องการดูรายละเอียด
+ */
 async function onViewDetailPage(id: string) {
  router.push(`/masterdata/competency-detail/${id}`);
 }

+/**
+ * ฟังก์ชันลบข้อมูลสมรรถนะ
+ * @param id รหัสสมรรถนะที่ต้องการลบ
+ */
 function deleteData(id: string) {
  dialogRemove($q, async () => {
    showLoader();
    await http
      .delete(config.API.kpiCapacity + `/${id}`)
      .then(async () => {
+        formQuery.page = await updateCurrentPage(
+          formQuery.page,
+          totalList.value,
+          rows.value.length
+        );
        await fetchList();
        success($q, "ลบข้อมูลสำเร็จ");
      })
--- a/src/modules/01_masterdata/components/competency/02ListLinkPosition.vue
+++ b/src/modules/01_masterdata/components/competency/02ListLinkPosition.vue
@ -7,18 +7,24 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 import { checkPermission } from "@/utils/permissions";
 import { useCounterMixin } from "@/stores/mixin";
+import { updateCurrentPage } from "@/utils/function";

+import type { DataKPIGroup } from "@/modules/01_masterdata/interface/response/Main";
 import type { NewPagination } from "@/modules/14_KPI/interface/index/Main";

 import dialogHeader from "@/components/DialogHeader.vue";

-const total = ref<number>();
-const modal = ref<boolean>(false);
-const rows = ref<any[]>([]);
-const groupName = ref<string>("");
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const {
+  dialogRemove,
+  dialogConfirm,
+  showLoader,
+  hideLoader,
+  messageError,
+  success,
+} = mixin;

-const editStatus = ref<boolean>(false);
-const editId = ref<string>("");
 const columns = ref<QTableProps["columns"]>([
  {
    name: "nameGroupKPI",
@ -32,18 +38,6 @@ const columns = ref<QTableProps["columns"]>([
      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
 ]);
-
-const $q = useQuasar();
-const mixin = useCounterMixin();
-const {
-  dialogRemove,
-  dialogConfirm,
-  showLoader,
-  hideLoader,
-  messageError,
-  success,
-} = mixin;
-
 const visibleColumns = ref<string[]>(["nameGroupKPI"]);

 const formQuery = reactive({
@ -51,9 +45,15 @@ const formQuery = reactive({
  pageSize: 10,
  keyword: "",
 });
-const totalList = ref<number>(1); //จำนวนข้อมูลรายการ
+const totalList = ref<number>(1); //จำนวนหน้าทั้งหมด
+const total = ref<number>(0); // จำนวนรายการทั้งหมด
+const modal = ref<boolean>(false); // เปิด/ปิด dialog
+const rows = ref<DataKPIGroup[]>([]); // ข้อมูลกลุ่มงาน
+const groupName = ref<string>(""); // ชื่อกลุ่มงาน
+const editStatus = ref<boolean>(false); // สถานะการแก้ไข
+const editId = ref<string>(""); // รหัสกลุ่มงานที่ต้องการแก้ไข

-/** ดึงข้อมูล */
+/** ฟังก์ชันดึงข้อมูลกลุ่มงาน */
 async function fetchData() {
  showLoader();
  await http
@ -77,7 +77,7 @@ async function fetchData() {
    });
 }

-/** เพิ่มข้อมูล */
+/** ฟังก์ชันบันทึกการเพิ่มข้อมูลกลุ่มงาน */
 async function addData() {
  showLoader();
  await http
@ -96,7 +96,10 @@ async function addData() {
    });
 }

-/** save แก้ไขข้อมูล */
+/**
+ * ฟังก์ชันบันทึกการแก้ไขข้อมูลกลุ่มงาน
+ * @param id รหัสกลุ่มงานที่ต้องการแก้ไข
+ */
 async function editData(id: string) {
  showLoader();
  await http
@ -115,12 +118,20 @@ async function editData(id: string) {
    });
 }

-/** ลบข้อมูล */
+/**
+ * ฟังก์ชันลบข้อมูลกลุ่มงาน
+ * @param id รหัสกลุ่มงานที่ต้องการลบ
+ */
 async function deleteData(id: string) {
  showLoader();
  await http
    .delete(config.API.kpiGroupById(id))
    .then(async () => {
+      formQuery.page = await updateCurrentPage(
+        formQuery.page,
+        totalList.value,
+        rows.value.length
+      );
      await fetchData();
      success($q, "ลบข้อมูลสำเร็จ");
    })
@ -132,19 +143,23 @@ async function deleteData(id: string) {
    });
 }

-/** เปลี่ยนเป็นหน้าเพิ่มข้อมูล */
+/** ฟังก์ชันเปิด dialog เพิ่มข้อมูล */
 function onAdd() {
  modal.value = true;
 }

+/** ฟังก์ชันปิด dialog */
 function closeDialog() {
  modal.value = false;
  editStatus.value = false;
  groupName.value = "";
 }

-/** เปิด dialog แก้ไข */
-function onEdit(data: any) {
+/**
+ * ฟังก์ชันเปิด dialog แก้ไข
+ * @param data ข้อมูลกลุ่มงานที่ต้องการแก้ไข
+ */
+function onEdit(data: DataKPIGroup) {
  modal.value = true;
  editStatus.value = true;
  groupName.value = data.nameGroupKPI;
@ -165,18 +180,21 @@ async function onSubmit() {
 }

 /**
- * function updatePagination
+ * ฟังก์ชันอัปเดตข้อมูล Pagination
 * @param newPagination ข้อมูล Pagination ใหม่
 */
 function updatePagination(newPagination: NewPagination) {
  formQuery.page = 1;
  formQuery.pageSize = newPagination.rowsPerPage;
 }
+
+/** ฟังก์ชันดึงข้อมูลกลุ่มงานใหม่ */
 function fetchNewList() {
  formQuery.page = 1;
  fetchData();
 }

+/** ฟังก์ชันติดตามการเปลี่ยนแปลงจำนวนแถวต่อหน้า */
 watch(
  () => formQuery.pageSize,
  () => {
@ -184,7 +202,8 @@ watch(
  }
 );

-onMounted(async () => {
+/** lifecycle hook */
+onMounted(() => {
  fetchData();
 });
 </script>
--- a/src/modules/01_masterdata/components/competency/03ListLinkGroup.vue
+++ b/src/modules/01_masterdata/components/competency/03ListLinkGroup.vue
@ -3,13 +3,12 @@ import { ref, onMounted, reactive, watch } from "vue";
 import type { QTableProps } from "quasar";

 import { useQuasar } from "quasar";
-import { useRoute } from "vue-router";

 import http from "@/plugins/http";
 import config from "@/app.config";
 import { useCounterMixin } from "@/stores/mixin";
-
-import Header from "@/components/DialogHeader.vue";
+import { checkPermission } from "@/utils/permissions";
+import { updateCurrentPage } from "@/utils/function";

 import type {
  DataOption,
@ -17,26 +16,47 @@ import type {
  ListLinkGroup,
  Position,
 } from "@/modules/01_masterdata/interface/index/Main";
+import type {
+  DataKPIGroup,
+  DataKPIPosition,
+  DataKPICapacity,
+} from "@/modules/01_masterdata/interface/response/Main";

-import { checkPermission } from "@/utils/permissions";
+import Header from "@/components/DialogHeader.vue";

-const total = ref<number>();
-const id = ref<string>("");
-const modal = ref<boolean>(false);
-const rows = ref<ListLinkGroup[]>([]);
-const editStatus = ref<boolean>(false);
-const groupName = ref<Position | null>();
-const position = ref<string[]>();
-const competency = ref<Position[]>();
-const route = useRoute();
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const {
+  dialogRemove,
+  messageError,
+  showLoader,
+  hideLoader,
+  success,
+  dialogConfirm,
+} = mixin;

-const groupNameOp = ref<DataOption[]>([]);
-const groupNameOpMain = ref<DataOption[]>([]);
-const positionOp = ref<DataOption[]>([]);
-const positionMainOp = ref<DataOption[]>([]);
-const competencyOp = ref<DataOption[]>([]);
-const competencyOpMain = ref<DataOption[]>([]);
+const id = ref<string>(""); // รหัสกลุ่มงานที่ต้องการแก้ไข
+const modal = ref<boolean>(false); // เปิด/ปิด dialog
+const editStatus = ref<boolean>(false); // สถานะการแก้ไข
+const groupName = ref<Position | null>(); // กลุ่มงานที่เลือก
+const position = ref<string[]>([]); // ตำแหน่งที่เลือก
+const competency = ref<Position[]>([]); // สมรรถนะที่เลือก

+const groupNameOp = ref<DataOption[]>([]); // กลุ่มงาน
+const groupNameOpMain = ref<DataOption[]>([]); // กลุ่มงานหลัก
+const positionOp = ref<DataOption[]>([]); // ตำแหน่ง
+const positionMainOp = ref<DataOption[]>([]); // ตำแหน่งหลัก
+const competencyOp = ref<DataOption[]>([]); // สมรรถนะ
+const competencyOpMain = ref<DataOption[]>([]); // สมรรถนะหลัก
+
+const formQuery = reactive({
+  page: 1,
+  pageSize: 10,
+  keyword: "",
+});
+const totalList = ref<number>(1); // จำนวนหน้าทั้งหมด
+const total = ref<number>(0); // จำนวนรายการทั้งหมด
+const rows = ref<ListLinkGroup[]>([]); // ข้อมูลเชื่อมโยงกับกลุ่มงานและตำแหน่ง
 const columns = ref<QTableProps["columns"]>([
  {
    name: "groupName",
@ -72,28 +92,9 @@ const columns = ref<QTableProps["columns"]>([
      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
 ]);
-
-const $q = useQuasar();
-const mixin = useCounterMixin();
-const {
-  dialogRemove,
-  messageError,
-  showLoader,
-  hideLoader,
-  success,
-  dialogConfirm,
-} = mixin;
-
 const visibleColumns = ref<string[]>(["groupName", "positions", "capacitys"]);

-const formQuery = reactive({
-  page: 1,
-  pageSize: 10,
-  keyword: "",
-});
-const totalList = ref<number>(1); //จำนวนข้อมูลรายการ
-
-/** ดึงข้อมูล */
+/** ฟังก์ชันดึงข้อมูลรายการเชื่อมโยงกับกลุ่มงานและตำแหน่ง */
 async function getData() {
  showLoader();
  http
@ -109,19 +110,30 @@ async function getData() {
      totalList.value = Math.ceil(res.data.result.total / formQuery.pageSize);
      rows.value = data.data;
    })
+    .catch((err) => {
+      messageError($q, err);
+    })
    .finally(() => {
      hideLoader();
    });
 }

+/**
+ * ฟังก์ชันลบข้อมูลเชื่อมโยงกับกลุ่มงานและตำแหน่ง
+ * @param id รหัสรายการข้อมูลเชื่อมโยงกับกลุ่มงานและตำแหน่ง
+ */
 async function deleteData(id: string) {
  showLoader();
  await http
    .delete(config.API.kpiLink + `/${id}`)
    .then(async () => {
+      formQuery.page = await updateCurrentPage(
+        formQuery.page,
+        totalList.value,
+        rows.value.length
+      );
      await getData();
      success($q, "ลบข้อมูลสำเร็จ");
-      close();
    })
    .catch((err) => {
      messageError($q, err);
@ -131,23 +143,22 @@ async function deleteData(id: string) {
    });
 }

-/** ดึงข้อมูล */
+/** ฟังก์ชันดึงข้อมูลกลุ่มงาน */
 async function getListGroup() {
-  showLoader();
  await http
    .get(config.API.kpiGroup + `?pageSize=50`)
    .then(async (res) => {
      const dataOp = res.data.result.data;
      const uniqueNames = new Set();
      const filteredData = dataOp
-        .filter((item: any) => {
+        .filter((item: DataKPIGroup) => {
          if (!uniqueNames.has(item.id)) {
            uniqueNames.add(item.nameGroupKPI);
            return true;
          }
          return false;
        })
-        .map((item: any) => ({
+        .map((item: DataKPIGroup) => ({
          id: item.id,
          name: item.nameGroupKPI,
        }));
@ -156,29 +167,25 @@ async function getListGroup() {
    })
    .catch((err) => {
      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
    });
 }

-/** ดึงข้อมูล */
+/** ฟังก์ชันดึงข้อมูลสมรรถนะ */
 async function getCompetency() {
-  showLoader();
  await http
    .get(config.API.kpiCapacity + `?type=GROUP&pageSize=50`)
    .then(async (res) => {
      const dataOp = res.data.result.data;
      const uniqueNames = new Set();
      const filteredData = dataOp
-        .filter((item: any) => {
+        .filter((item: DataKPICapacity) => {
          if (!uniqueNames.has(item.id)) {
            uniqueNames.add(item.name);
            return true;
          }
          return false;
        })
-        .map((item: any) => ({
+        .map((item: DataKPICapacity) => ({
          id: item.id,
          name: item.name,
        }));
@ -187,33 +194,70 @@ async function getCompetency() {
    })
    .catch((err) => {
      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
    });
 }

-/** เปลี่ยนเป็นหน้าเพิ่มข้อมูล */
-function onAdd() {
-  getOptions();
-  getListGroup();
-  getCompetency();
-  modal.value = true;
+/** ฟังก์ชันดึงข้อมูลตำแหน่ง */
+async function getOptions() {
+  await http
+    .get(config.API.orgSalaryPosition)
+    .then((res) => {
+      const dataOp = res.data.result;
+      const uniqueNames = new Set();
+      const filteredData = dataOp
+        .filter((item: DataKPIPosition) => {
+          if (!uniqueNames.has(item.positionName)) {
+            uniqueNames.add(item.positionName);
+            return true;
+          }
+          return false;
+        })
+        .map((item: DataKPIPosition) => ({
+          id: item.positionName,
+          name: item.positionName,
+        }));
+
+      positionMainOp.value = filteredData;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    });
 }

-async function onEdit(data: any) {
-  id.value = data;
-  await getOptions();
-  await getListGroup();
-  await getCompetency();
-  await getDataEdit(id.value);
-  modal.value = true;
-  editStatus.value = true;
-}
-
-async function getDataEdit(id: string) {
+/** ฟังก์ชันเปิด dialog เพิ่มข้อมูล */
+async function onAdd() {
  showLoader();
-  http
+  try {
+    modal.value = true;
+    await Promise.all([getOptions(), getListGroup(), getCompetency()]);
+  } finally {
+    hideLoader();
+  }
+}
+
+/**
+ * ฟังก์ชันเปิด dialog แก้ไข
+ * @param rowId รหัสกลุ่มงานที่ต้องการแก้ไข
+ */
+async function onEdit(rowId: string) {
+  showLoader();
+  try {
+    id.value = rowId;
+    modal.value = true;
+    editStatus.value = true;
+    await Promise.all([getOptions(), getListGroup(), getCompetency()]);
+    await getDataEdit(id.value);
+  } finally {
+    hideLoader();
+  }
+}
+
+/**
+ * ฟังก์ชันดึงข้อมูลสำหรับแก้ไข
+ * @param id รหัสกลุ่มงานที่ต้องการแก้ไข
+ */
+async function getDataEdit(id: string) {
+  await http
    .get(config.API.kpiLink + `/edit/${id}`)
    .then((res) => {
      const data = res.data.result;
@ -221,17 +265,18 @@ async function getDataEdit(id: string) {
        id: data.groupId,
        name: data.groupName,
      };
-      position.value = data.positions.map((i: any) => i.name);
-      competency.value = data.capacitys.map((i: any) => ({
+      position.value = data.positions.map((i: Position) => i.name);
+      competency.value = data.capacitys.map((i: DataKPICapacity) => ({
        id: i.id,
        name: i.name,
      }));
    })
-    .finally(() => {
-      hideLoader();
+    .catch((err) => {
+      messageError($q, err);
    });
 }

+/** ฟังก์ชันบันทึกข้อมูล */
 function onSubmit() {
  const url = editStatus.value
    ? config.API.kpiLink + `/${id.value}`
@ -239,7 +284,7 @@ function onSubmit() {
  const body = {
    kpiGroupId: groupName.value?.id,
    positions: position.value,
-    kpiCapacityIds: competency.value?.map((i: any) => i.id),
+    kpiCapacityIds: competency.value?.map((i: Position) => i.id),
  };
  dialogConfirm($q, async () => {
    showLoader();
@ -267,82 +312,56 @@ function close() {
  competency.value = [];
 }

-async function getOptions() {
-  http.get(config.API.orgSalaryPosition).then((res) => {
-    const dataOp = res.data.result;
-    const uniqueNames = new Set();
-    const filteredData = dataOp
-      .filter((item: any) => {
-        if (!uniqueNames.has(item.positionName)) {
-          uniqueNames.add(item.positionName);
-          return true;
-        }
-        return false;
-      })
-      .map((item: any) => ({
-        id: item.positionName,
-        name: item.positionName,
-      }));
-
-    positionMainOp.value = filteredData;
-  });
-}
-
 /**
- * function ต้นหาข้อมูลของ Option
+ * ฟังก์ชันค้นหาข้อมูลของ Option
 * @param val ค่าที่ต้องการฟิลเตอร์
 * @param update  อัพเดทค่า
- * @param refData ดาต้าที่ต้องการฟิลเตอร์
+ * @param type ประเภทของ Option ที่ต้องการฟิลเตอร์
 */
-function filterOptionGroup(val: any, update: Function) {
-  update(() => {
-    groupNameOp.value = groupNameOpMain.value.filter(
-      (v: any) => v.name.indexOf(val) > -1
-    );
-  });
+function filterOptionSelect(val: string, update: Function, type: string) {
+  switch (type) {
+    case "group":
+      update(() => {
+        groupNameOp.value = groupNameOpMain.value.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "position":
+      update(() => {
+        positionOp.value = positionMainOp.value.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "competency":
+      update(() => {
+        competencyOp.value = competencyOpMain.value.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+
+    default:
+      break;
+  }
 }

 /**
- * function ต้นหาข้อมูลของ Option
- * @param val ค่าที่ต้องการฟิลเตอร์
- * @param update  อัพเดทค่า
- * @param refData ดาต้าที่ต้องการฟิลเตอร์
- */
-function filterOption(val: any, update: Function) {
-  update(() => {
-    positionOp.value = positionMainOp.value.filter(
-      (v: any) => v.name.indexOf(val) > -1
-    );
-  });
-}
-
-/**
- * function ต้นหาข้อมูลของ Option
- * @param val ค่าที่ต้องการฟิลเตอร์
- * @param update  อัพเดทค่า
- * @param refData ดาต้าที่ต้องการฟิลเตอร์
- */
-function filterOptionCompetency(val: any, update: Function) {
-  update(() => {
-    competencyOp.value = competencyOpMain.value.filter(
-      (v: any) => v.name.indexOf(val) > -1
-    );
-  });
-}
-
-/**
- * function updatePagination
+ * ฟังก์ชันอัปเดต Pagination
 * @param newPagination ข้อมูล Pagination ใหม่
 */
 function updatePagination(newPagination: NewPagination) {
  formQuery.page = 1;
  formQuery.pageSize = newPagination.rowsPerPage;
 }
+
+/** ฟังก์ชันดึงข้อมูลใหม่ */
 function fetchNewList() {
  formQuery.page = 1;
  getData();
 }

+/** ฟังก์ชันติดตามการเปลี่ยนแปลงจำนวนแถวต่อหน้า */
 watch(
  () => formQuery.pageSize,
  () => {
@ -350,7 +369,8 @@ watch(
  }
 );

-onMounted(async () => {
+/** lifecycle hook */
+onMounted(() => {
  getData();
 });
 </script>
@ -376,8 +396,7 @@ onMounted(async () => {
        label="ค้นหา"
        @keyup.enter="fetchNewList()"
      >
-        <template v-slot:append>
-          <q-icon name="search" /> </template
+        <template v-slot:append> <q-icon name="search" /> </template
      ></q-input>
      <q-select
        v-model="visibleColumns"
@ -407,7 +426,7 @@ onMounted(async () => {
    class="custom-header-table"
    :visible-columns="visibleColumns"
    :separator="'cell'"
-    :rows-per-page-options="[10, 25, 50, 100]"
+    :rows-per-page-options="[1, 10, 25, 50, 100]"
    @update:pagination="updatePagination"
  >
    <template v-slot:header="props">
@ -518,7 +537,7 @@ onMounted(async () => {
                use-input
                hide-selected
                fill-input
-                @filter="(inputValue:any,doneFn:Function) => filterOptionGroup(inputValue, doneFn) "
+                @filter="(inputValue:string,doneFn:Function) => filterOptionSelect(inputValue, doneFn,'group') "
                hide-bottom-space
                lazy-rules
                :rules="[(val:string) => !!val || `${'กรุณาเลือกกลุ่มงาน'}`,]"
@ -549,7 +568,7 @@ onMounted(async () => {
                hide-bottom-space
                lazy-rules
                use-input
-                @filter="(inputValue:any,doneFn:Function) => filterOption(inputValue, doneFn) "
+                @filter="(inputValue:string,doneFn:Function) => filterOptionSelect(inputValue, doneFn,'position') "
              >
                <template v-slot:no-option>
                  <q-item>
@ -576,7 +595,7 @@ onMounted(async () => {
                lazy-rules
                :options="competencyOp"
                use-input
-                @filter="(inputValue:any,doneFn:Function) => filterOptionCompetency(inputValue, doneFn) "
+                @filter="(inputValue:string,doneFn:Function) => filterOptionSelect(inputValue, doneFn,'competency') "
              >
                <template v-slot:no-option>
                  <q-item>
--- a/src/modules/01_masterdata/components/competency/04ListCriteria.vue
+++ b/src/modules/01_masterdata/components/competency/04ListCriteria.vue
@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, reactive, onMounted, watch } from "vue";
+import { ref, onMounted } from "vue";
 import { useCounterMixin } from "@/stores/mixin";

 import http from "@/plugins/http";
@ -9,12 +9,14 @@ import { useQuasar } from "quasar";
 import { checkPermission } from "@/utils/permissions";
 import { useRoute } from "vue-router";

+import type { DataKPIEvaluation } from "@/modules/01_masterdata/interface/response/Main";
+
 const $q = useQuasar();
 const route = useRoute();
 const { showLoader, hideLoader, success, dialogConfirm, messageError } =
  useCounterMixin();

-const dataLevel = ref<any>();
+const dataLevel = ref<DataKPIEvaluation[]>([]);
 const fieldLabels = {
  score5: "5",
  score4: "4",
@ -23,11 +25,28 @@ const fieldLabels = {
  score1: "1",
 };

+/** ฟังก์ชันดึงข้อมูลเกณฑ์การประเมิน */
+async function getData() {
+  showLoader();
+  await http
+    .get(config.API.kpiEvaluation + `/edit`)
+    .then((res) => {
+      dataLevel.value = res.data.result.data;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/** ฟังก์ชันบันทึกข้อมูลเกณฑ์การประเมิน */
 function onSubmit() {
  dialogConfirm($q, async () => {
    showLoader();
    const body = {
-      formScore: dataLevel.value.map((item: any) => {
+      formScore: dataLevel.value.map((item: DataKPIEvaluation) => {
        const { level, ...rest } = item;
        return rest;
      }),
@ -48,20 +67,6 @@ function onSubmit() {
  });
 }

-async function getData() {
-  showLoader();
-  http
-    .get(config.API.kpiEvaluation + `/edit`)
-    .then((res) => {
-      dataLevel.value = res.data.result.data;
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
 onMounted(() => {
  if (checkPermission(route)?.attrIsList) getData();
 });
--- a/src/modules/01_masterdata/components/competency/05ListDetail.vue
+++ b/src/modules/01_masterdata/components/competency/05ListDetail.vue
@ -18,36 +18,55 @@
          <div class="col-3 text-bold flex justify-center items-center">
            ประเภทสมรรถนะ
          </div>
-          <div class="col-5">
+          <div class="col-6">
            <div class="row text-bold flex justify-center">
              ประเภทและระดับตำแหน่ง
            </div>
            <div class="row">
-              <div class="col-3">
-                <div class="text-bold">ทั่วไป</div>
-                <div>ปฏิบัติงาน</div>
-                <div>ชำนาญงาน</div>
-                <div>อาวุโส</div>
+              <div class="col-4 column">
+                <div class="row text-bold flex justify-center">ทั่วไป</div>
+                <div class="row" style="flex-grow: 1">
+                  <div class="col-6">
+                    <div>ปฏิบัติงาน</div>
+                    <div>ชำนาญงาน</div>
+                    <div>อาวุโส</div>
+                  </div>
+                  <div class="col-6">
+                    <div>อาวุโส</div>
+                    <div>(ที่ดำรงตำแหน่งทางการบริหาร)</div>
+                  </div>
+                </div>
              </div>
-              <div class="col-3">
-                <div class="text-bold">วิชาการ</div>
-                <div>ปฏิบัติการ</div>
-                <div>ชำนาญการ</div>
-                <div>ชำนาญการพิเศษ</div>
-                <div>เชี่ยวชาญ</div>
-                <div>ทรงคุณวุฒิ</div>
+
+              <div class="col-4 column">
+                <div class="row text-bold flex justify-center">วิชาการ</div>
+                <div class="row" style="flex-grow: 1">
+                  <div class="col-6">
+                    <div>ปฏิบัติงาน</div>
+                    <div>ชำนาญงาน</div>
+                    <div>ชำนาญการพิเศษ</div>
+                    <div>เชี่ยวชาญ</div>
+                    <div>ทรงคุณวุฒิ</div>
+                  </div>
+                  <div class="col-6">
+                    <div>ปฏิบัติการ -<br />ทรงคุณวุฒิ</div>
+                    <div>(ที่ดำรงตำแหน่งทางการบริหาร)</div>
+                  </div>
+                </div>
              </div>
-              <div class="col-3">
+
+              <div class="col-2">
                <div class="text-bold">อำนวยการ</div>
                <div>ต้น สูง</div>
              </div>
-              <div class="col-3">
+              <div class="col-2">
                <div class="text-bold">บริหาร</div>
                <div>ต้น สูง</div>
              </div>
            </div>
          </div>
-          <div class="col-4 column">
+
+          <div class="col-3 column">
            <div class="row text-bold flex justify-center">ผู้ดำรงตำแหน่ง</div>
            <div class="row" style="flex-grow: 1">
              <div class="col-6">
@ -62,23 +81,29 @@
            <div class="text-bold">สมรรถนะหลัก</div>
            <div>(5 สมรรถนะ)</div>
          </div>
-          <div class="col-5 column">
+          <div class="col-6 column">
            <div class="row col-grow">
-              <div class="col-3 flex items-center justify-center">
+              <div class="col-2 flex items-center justify-center">
                <q-icon name="check" size="32px" />
              </div>
-              <div class="col-3 flex items-center justify-center">
+              <div class="col-2 flex items-center justify-center">
                <q-icon name="check" size="32px" />
              </div>
-              <div class="col-3 flex items-center justify-center">
+              <div class="col-2 flex items-center justify-center">
                <q-icon name="check" size="32px" />
              </div>
-              <div class="col-3 flex items-center justify-center">
+              <div class="col-2 flex items-center justify-center">
+                <q-icon name="check" size="32px" />
+              </div>
+              <div class="col-2 flex items-center justify-center">
+                <q-icon name="check" size="32px" />
+              </div>
+              <div class="col-2 flex items-center justify-center">
                <q-icon name="check" size="32px" />
              </div>
            </div>
          </div>
-          <div class="col-4 column">
+          <div class="col-3 column">
            <div class="row col-grow">
              <div class="col-6 flex items-center justify-center">
                <q-icon name="check" size="32px" />
@ -94,19 +119,22 @@
            <div class="text-bold">สมรรถนะประจำกลุ่มงาน</div>
            <div>(3 สมรรถนะ ตามกลุ่มงาน)</div>
          </div>
-          <div class="col-5 column">
+          <div class="col-6 column">
            <div class="row col-grow">
-              <div class="col-3 flex items-center justify-center">
+              <div class="col-2 flex items-center justify-center">
                <q-icon name="check" size="32px" />
              </div>
-              <div class="col-3 flex items-center justify-center">
+              <div class="col-2"></div>
+              <div class="col-2 flex items-center justify-center">
                <q-icon name="check" size="32px" />
              </div>
-              <div class="col-3"></div>
-              <div class="col-3"></div>
+              <div class="col-2"></div>
+              <div class="col-2"></div>
+
+              <div class="col-2"></div>
            </div>
          </div>
-          <div class="col-4 column">
+          <div class="col-3 column">
            <div class="row col-grow">
              <div class="col-6"></div>
              <div class="col-6"></div>
@ -118,19 +146,25 @@
            <div class="text-bold">สมรรถนะประจำผู้บริหารกรุงเทพมหานคร</div>
            <div>(7 สมรรถนะ)</div>
          </div>
-          <div class="col-5 column">
+          <div class="col-6 column">
            <div class="row col-grow">
-              <div class="col-3"></div>
-              <div class="col-3"></div>
-              <div class="col-3 flex items-center justify-center">
+              <div class="col-2"></div>
+              <div class="col-2 flex items-center justify-center">
                <q-icon name="check" size="32px" />
              </div>
-              <div class="col-3 flex items-center justify-center">
+              <div class="col-2"></div>
+              <div class="col-2 flex items-center justify-center">
+                <q-icon name="check" size="32px" />
+              </div>
+              <div class="col-2 flex items-center justify-center">
+                <q-icon name="check" size="32px" />
+              </div>
+              <div class="col-2 flex items-center justify-center">
                <q-icon name="check" size="32px" />
              </div>
            </div>
          </div>
-          <div class="col-4 column">
+          <div class="col-3 column">
            <div class="row col-grow">
              <div class="col-6"></div>
              <div class="col-6"></div>
@ -142,15 +176,17 @@
            <div class="text-bold">สมรรถนะเฉพาะสำหรับตำแหน่งผู้อำนวยการเขต</div>
            <div>(4 สมรรถนะ)</div>
          </div>
-          <div class="col-5 column">
+          <div class="col-6 column">
            <div class="row col-grow">
-              <div class="col-3"></div>
-              <div class="col-3"></div>
-              <div class="col-3"></div>
-              <div class="col-3"></div>
+              <div class="col-2"></div>
+              <div class="col-2"></div>
+              <div class="col-2"></div>
+              <div class="col-2"></div>
+              <div class="col-2"></div>
+              <div class="col-2"></div>
            </div>
          </div>
-          <div class="col-4 column">
+          <div class="col-3 column">
            <div class="row col-grow">
              <div class="col-6"></div>
              <div class="col-6 flex items-center justify-center">
@ -166,15 +202,17 @@
            </div>
            <div>(2 สมรรถนะ)</div>
          </div>
-          <div class="col-5 column">
+          <div class="col-6 column">
            <div class="row col-grow">
-              <div class="col-3"></div>
-              <div class="col-3"></div>
-              <div class="col-3"></div>
-              <div class="col-3"></div>
+              <div class="col-2"></div>
+              <div class="col-2"></div>
+              <div class="col-2"></div>
+              <div class="col-2"></div>
+              <div class="col-2"></div>
+              <div class="col-2"></div>
            </div>
          </div>
-          <div class="col-4 column">
+          <div class="col-3 column">
            <div class="row col-grow">
              <div class="col-6 flex items-center justify-center">
                <q-icon name="check" size="32px" />
@ -187,15 +225,17 @@
          <div class="col-3 q-pa-sm">
            <div class="text-bold flex justify-end">รวมสมรรถนะ</div>
          </div>
-          <div class="col-5 column">
+          <div class="col-6 column">
            <div class="row col-grow">
-              <div class="col-3 flex justify-center items-center">8</div>
-              <div class="col-3 flex justify-center items-center">8</div>
-              <div class="col-3 flex justify-center items-center">12</div>
-              <div class="col-3 flex justify-center items-center">12</div>
+              <div class="col-2 flex justify-center items-center">8</div>
+              <div class="col-2 flex justify-center items-center">12</div>
+              <div class="col-2 flex justify-center items-center">8</div>
+              <div class="col-2 flex justify-center items-center">12</div>
+              <div class="col-2 flex justify-center items-center">12</div>
+              <div class="col-2 flex justify-center items-center">12</div>
            </div>
          </div>
-          <div class="col-4 column">
+          <div class="col-3 column">
            <div class="row col-grow">
              <div class="col-6 flex justify-center items-center">7</div>
              <div class="col-6 flex justify-center items-center">9</div>
@ -205,7 +245,7 @@
      </div>
    </q-card>

-    <q-card flat bordered>
+    <q-card flat bordered class="q-mb-lg">
      <q-card-section>
        <div class="text-h6 text-bold">ระดับสมรรถนะ</div>
      </q-card-section>
@ -312,6 +352,203 @@
        </div>
      </div>
    </q-card>
+
+    <q-card flat bordered>
+      <q-card-section>
+        <div class="text-h6 text-bold">
+          องค์ประกอบการประเมิน และแนวทางการประเมินของผู้รับการประเมินแต่ละกลุ่ม
+        </div>
+      </q-card-section>
+
+      <q-separator inset />
+
+      <div style="border: 1px solid black">
+        <div class="row text-center" style="background-color: #e0e4f4">
+          <div class="col-3 text-bold flex justify-center items-center">
+            ผู้รับการประเมิน
+          </div>
+
+          <div class="col-9">
+            <div class="row text-bold flex justify-center">
+              องค์ประกอบการประเมิน
+            </div>
+            <div class="row">
+              <div class="col-6 text-bold">ผลสัมฤทธิ์ของงาน</div>
+
+              <div class="col-6">
+                <div class="row text-bold flex justify-center">
+                  พฤติกรรมการปฏิบัติราชการ
+                </div>
+                <div class="row">
+                  <div class="col-6">สมรรถนะ</div>
+                  <div class="col-6">การพัฒนา</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="row">
+          <div class="col-3 q-pa-sm">
+            <div class="text-bold">กลุ่มที่ 1</div>
+            <div>
+              ผู้ดำรงตำแหน่ง ดังนี้<br />
+              - ปลัดกรุงเทพมหานคร<br />
+              - รองปลัดกรุงเทพมหานคร<br />
+              - ผู้อำนวยการสำนัก<br />
+              - หัวหน้าสำนักงาน ก.ก.<br />
+              - หัวหน้าสำนักงานเลขานุการผู้ว่าราชการกรุงเทพมหานคร<br />
+              - เลขานุการสภากรุงเทพมหานคร<br />
+              - ผู้อำนวยการเขต<br />
+              - หัวหน้าส่วนราชการในสังกัดสำนักปลัดกรุงเทพมหานคร<br />
+            </div>
+          </div>
+          <div class="col-9 column">
+            <div class="row col-grow">
+              <div class="col-6 q-pa-sm">
+                น้ำหนักคะแนน
+                <div class="text-bold">ร้อยละ 80</div>
+                - มิติที่ 1 ภารกิจตามนโยบายและยุทธศาสตร์ของ กทม.<br />
+                - มิติที่ 2 วาระเร่งด่วนที่ได้รับมอบหมายพิเศษ (ถ้ามี)<br />
+              </div>
+              <div class="col-3 q-pa-sm">
+                น้ำหนักคะแนน
+                <div class="text-bold">ร้อยละ 20</div>
+                - สมรรถนะหลัก<br />
+                - สมรรถนะประจำผู้บริหารกรุงเทพมหานคร<br />
+              </div>
+              <div class="col-3 q-pa-sm"></div>
+            </div>
+          </div>
+        </div>
+
+        <div class="row">
+          <div class="col-3 q-pa-sm">
+            <div class="text-bold">กลุ่มที่ 2</div>
+            <div>
+              ผู้ดำรงตำแหน่ง ดังนี้<br />
+
+              <div class="flex items-start">
+                <div class="q-mr-md" style="min-width: 120px">ประเภทบริหาร</div>
+                <div>ระดับต้น - สูง</div>
+              </div>
+
+              <div class="flex items-start">
+                <div class="q-mr-md" style="min-width: 120px">
+                  ประเภทอำนวยการ
+                </div>
+                <div>ระดับต้น - สูง</div>
+              </div>
+
+              <div class="flex items-start">
+                <div class="q-mr-md" style="min-width: 120px">
+                  ประเภทวิชาการ
+                </div>
+                <div class="col">
+                  <div>ระดับปฏิบัติการ - ทรงคุณวุฒิ</div>
+                  <div class="underlined">ที่ดำรงตำแหน่งทางการบริหาร*</div>
+                </div>
+              </div>
+
+              <div class="flex items-start">
+                <div class="q-mr-md" style="min-width: 120px">ประเภททั่วไป</div>
+                <div class="col">
+                  <div>ระดับอาวุโส</div>
+                  <div class="underlined">ที่ดำรงตำแหน่งทางการบริหาร*</div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="col-9 column">
+            <div class="row col-grow">
+              <div class="col-6 q-pa-sm">
+                น้ำหนักคะแนน
+                <div class="text-bold">ร้อยละ 80</div>
+                - งานตามแผนปฏิบัติราชการประจำปี<br />
+                - งานตามหน้าที่ความรับผิดชอบหลัก<br />
+                - งานอื่นๆ ที่ได้รับมอบหมาย<br />
+              </div>
+              <div class="col-3 q-pa-sm">
+                น้ำหนักคะแนน
+                <div class="text-bold">ร้อยละ 20</div>
+                - สมรรถนะหลัก<br />
+                - สมรรถนะประจำผู้บริหารกรุงเทพมหานคร<br />
+              </div>
+              <div class="col-3 q-pa-sm"></div>
+            </div>
+          </div>
+        </div>
+
+        <div class="row">
+          <div class="col-3 q-pa-sm">
+            <div class="text-bold">กลุ่มที่ 3</div>
+            <div>
+              ผู้ดำรงตำแหน่ง ดังนี้<br />
+
+              <div class="flex items-start">
+                <div class="q-mr-md" style="min-width: 120px">
+                  ประเภทวิชาการ
+                </div>
+                <div>ระดับปฏิบัติการ - ทรงคุณวุฒิ</div>
+              </div>
+
+              <div class="flex items-start">
+                <div class="q-mr-md" style="min-width: 120px">ประเภททั่วไป</div>
+                <div>ระดับปฏิบัติงาน - อาวุโส</div>
+              </div>
+            </div>
+          </div>
+          <div class="col-9 column">
+            <div class="row col-grow">
+              <div class="col-6 q-pa-sm">
+                น้ำหนักคะแนน
+                <div class="text-bold">ร้อยละ 70</div>
+                - งานตามแผนปฏิบัติราชการประจำปี<br />
+                - งานตามหน้าที่ความรับผิดชอบหลัก<br />
+                - งานอื่นๆ ที่ได้รับมอบหมาย<br />
+              </div>
+              <div class="col-3 q-pa-sm">
+                น้ำหนักคะแนน
+                <div class="text-bold">ร้อยละ 20</div>
+                - สมรรถนะหลัก<br />
+                - สมรรถนะประจำกลุ่มงาน<br />
+              </div>
+              <div class="col-3 q-pa-sm">
+                น้ำหนักคะแนน
+                <div class="text-bold">ร้อยละ 10</div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="row">
+          <div class="col-3 q-pa-sm">
+            <div class="text-bold">กลุ่มทดลองปฏิบัติราชการ</div>
+            <div>ทุกตำแหน่ง</div>
+          </div>
+          <div class="col-9 column">
+            <div class="row col-grow">
+              <div class="col-6 q-pa-sm">
+                น้ำหนักคะแนน
+                <div class="text-bold">ร้อยละ 50</div>
+                - งานตามแผนปฏิบัติราชการประจำปี<br />
+                - งานตามหน้าที่ความรับผิดชอบหลัก<br />
+                - งานอื่นๆ ที่ได้รับมอบหมาย<br />
+              </div>
+              <div class="col-3 q-pa-sm">
+                น้ำหนักคะแนน
+                <div class="text-bold">ร้อยละ 40</div>
+                - สมรรถนะหลัก<br />
+                - สมรรถนะประจำกลุ่มงาน<br />
+              </div>
+              <div class="col-3 q-pa-sm">
+                น้ำหนักคะแนน
+                <div class="text-bold">ร้อยละ 10</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </q-card>
  </div>
 </template>

@ -325,4 +562,8 @@
    border-right: 1px solid black;
  }
 }
+
+.underlined {
+  text-decoration: underline;
+}
 </style>
--- a/src/modules/01_masterdata/components/competency/Forms/Main.vue
+++ b/src/modules/01_masterdata/components/competency/Forms/Main.vue
@ -73,6 +73,7 @@ function onClickAddLevels() {
 /** บันทึกข้อมูล */
 function onSubmit() {
  dialogConfirm($q, async () => {
+    showLoader();
    const formBody = {
      type: store.competencyTypeVal,
      name: formData.competencyName,
--- a/src/modules/01_masterdata/interface/index/Main.ts
+++ b/src/modules/01_masterdata/interface/index/Main.ts
@ -37,6 +37,7 @@ interface IndicatorType {
 }

 interface OrgTreeNode {
+  orgTreeDnaId: string;
  orgTreeId: string;
  orgRootId: string;
  orgLevel: number;
@ -107,7 +108,7 @@ interface CompetencySumary {
  value: string;
  label: string;
  color: string;
-  total?:string
+  total?: string;
 }

 interface Position {
@ -130,10 +131,18 @@ interface ListLinkGroup {
  capacitys: Capacity[];
 }

-interface SizeType{
-  width:number
-  height:number
+interface SizeType {
+  width: number;
+  height: number;
 }
+
+interface FormDataNodeData {
+  round: string;
+  nodeId: string | null;
+  node: number | null;
+  keyword: string;
+}
+
 export type {
  Pagination,
  DataOption,
@ -149,5 +158,6 @@ export type {
  ListLinkGroup,
  Position,
  CompetencySumary,
-  SizeType
+  SizeType,
+  FormDataNodeData
 };
--- a/src/modules/01_masterdata/interface/response/Main.ts
+++ b/src/modules/01_masterdata/interface/response/Main.ts
@ -58,4 +58,57 @@ interface ResAssignment {
  };
 }

-export type { ResRound, ResDataCapacity, ResEvaluator, ResAssignment };
+interface DataKPIGroup {
+  createdAt: string;
+  createdFullName: string;
+  createdUserId: string;
+  id: string;
+  lastUpdateFullName: string;
+  lastUpdateUserId: string;
+  lastUpdatedAt: string;
+  nameGroupKPI: string;
+}
+
+interface DataKPIPosition {
+  createdAt: string;
+  id: string;
+  isSpecial: boolean;
+  lastUpdateFullName: string;
+  lastUpdatedAt: string;
+  posExecutiveId: string;
+  posExecutiveName: string;
+  posLevelId: string;
+  posLevelName: string;
+  posTypeId: string;
+  posTypeName: string;
+  positionArea: string;
+  positionExecutiveField: string;
+  positionField: string;
+  positionIsSelected: boolean;
+  positionName: string;
+}
+
+interface DataKPICapacity {
+  capacityDetails: capacityDetails[];
+  description: string;
+  id: string;
+  name: string;
+  type: string;
+}
+
+interface DataKPIEvaluation {
+  description: string;
+  id: string;
+  level: number;
+}
+
+export type {
+  ResRound,
+  ResDataCapacity,
+  ResEvaluator,
+  ResAssignment,
+  DataKPIGroup,
+  DataKPIPosition,
+  DataKPICapacity,
+  DataKPIEvaluation
+};
--- a/src/modules/01_masterdata/views/Strategic.vue
+++ b/src/modules/01_masterdata/views/Strategic.vue
@ -36,9 +36,9 @@ const levelnode = ref<number>(0);
 const titleDialog = ref<string>("");

 /** ดึงข้อมูล ในรูปแบบ tree */
-function fetchDataTree() {
+async function fetchDataTree() {
  showLoader();
-  http
+  await http
    .get(config.API.devStrategy + `/edit/strategic`)
    .then((res) => {
      const data: DataStrategic[] = res.data.result;
@ -129,6 +129,7 @@ function closeDialog() {
 /** บันทึกข้อมูล */
 function onSubmit() {
  dialogConfirm($q, async () => {
+    showLoader();
    const formData = {
      idnode: levelnode.value === 0 ? "0" : nodeId.value,
      levelnode: levelnode.value,
@ -137,18 +138,21 @@ function onSubmit() {
    try {
      const method = isStatusEdit.value ? "patch" : "post";
      await http[method](config.API.devStrategy, formData);
-      fetchDataTree();
+      await fetchDataTree();
      success($q, "บันทึกข้อมูลสำเร็จ");
+      closeDialog();
    } catch (err) {
      messageError($q, err);
    } finally {
      hideLoader();
-      closeDialog();
    }
  });
 }

-/** ลบข้อมูลตาม id */
+/**
+ * ฟังก์ชันลบข้อมูลยุทธศาสตร์
+ * @param data ข้อมูลยุทธศาสตร์ที่ต้องการลบ
+ */
 function onDelete(data: DataStrategic) {
  dialogRemove($q, () => {
    showLoader();
@ -158,8 +162,8 @@ function onDelete(data: DataStrategic) {
    };
    http
      .delete(config.API.devStrategy, { data: formData })
-      .then(() => {
-        fetchDataTree();
+      .then(async () => {
+        await fetchDataTree();
        success($q, "ลบข้อมูลสำเร็จ");
      })
      .catch((err) => {
@ -252,84 +256,83 @@ onMounted(() => {
              icon="mdi-dots-vertical"
              round
            >
-              <q-menu
-                >
+              <q-menu>
                <q-list dense style="min-width: 100px">
-              <q-item
-                v-if="
-                  prop.node.level !== 4 &&
-                  checkPermission($route)?.attrIsCreate
-                "
-                clickable
-                v-close-popup
-                @click.stop="onClickAction('ADD', prop.node)"
-              >
-                <q-item-section avatar style="min-width: 20px">
-                  <q-icon size="17px" :color="'primary'" :name="'add'" />
-                </q-item-section>
+                  <q-item
+                    v-if="
+                      prop.node.level !== 4 &&
+                      checkPermission($route)?.attrIsCreate
+                    "
+                    clickable
+                    v-close-popup
+                    @click.stop="onClickAction('ADD', prop.node)"
+                  >
+                    <q-item-section avatar style="min-width: 20px">
+                      <q-icon size="17px" :color="'primary'" :name="'add'" />
+                    </q-item-section>

-                <q-item-section v-if="prop.node.level === 1">
-                  {{ `เพิ่มยุทธศาสตร์ 1` }}
-                </q-item-section>
-                <q-item-section v-if="prop.node.level === 2">
-                  {{ `เพิ่มยุทธศาสตร์ย่อย` }}
-                </q-item-section>
-                <q-item-section v-if="prop.node.level === 3">
-                  {{ `เพิ่มกลยุทธ์ที่/เป้าประสงค์` }}
-                </q-item-section>
-              </q-item>
-              <q-item
-                v-if="
-                  checkPermission($route)?.attrIsUpdate &&
-                  checkPermission($route)?.attrIsGet
-                "
-                clickable
-                v-close-popup
-                @click.stop="onClickAction('EDIT', prop.node)"
-              >
-                <q-item-section avatar style="min-width: 20px">
-                  <q-icon size="17px" :color="'edit'" :name="'edit'" />
-                </q-item-section>
-                <q-item-section v-if="prop.node.level === 1">
-                  {{ `แก้ไขยุทธศาสตร์/แผน` }}
-                </q-item-section>
-                <q-item-section v-if="prop.node.level === 2">
-                  {{ `แก้ไขยุทธศาสตร์ 1` }}
-                </q-item-section>
-                <q-item-section v-if="prop.node.level === 3">
-                  {{ `แก้ไขยุทธศาสตร์ย่อย` }}
-                </q-item-section>
-                <q-item-section v-if="prop.node.level === 4">
-                  {{ `แก้ไขกลยุทธ์ที่/เป้าประสงค์` }}
-                </q-item-section>
-              </q-item>
-              <q-item
-                v-if="prop.node.children.length !== 0"
-                clickable
-                v-close-popup
-                @click="
-                  (modalSort = true),
-                    (idSort = prop.node.id),
-                    (dataSort = prop.node.children)
-                "
-              >
-                <q-item-section avatar style="min-width: 20px">
-                  <q-icon size="17px" :color="'blue'" :name="'mdi-sort'" />
-                </q-item-section>
-                <q-item-section> จัดลำดับข้อมูล </q-item-section>
-              </q-item>
-              <q-item
-                v-if="checkPermission($route)?.attrIsDelete"
-                clickable
-                v-close-popup
-                @click.stop="onClickAction('DEL', prop.node)"
-              >
-                <q-item-section avatar style="min-width: 20px">
-                  <q-icon size="17px" :color="'red'" :name="'delete'" />
-                </q-item-section>
-                <q-item-section> ลบข้อมูล </q-item-section>
-              </q-item>
-            </q-list>
+                    <q-item-section v-if="prop.node.level === 1">
+                      {{ `เพิ่มยุทธศาสตร์ 1` }}
+                    </q-item-section>
+                    <q-item-section v-if="prop.node.level === 2">
+                      {{ `เพิ่มยุทธศาสตร์ย่อย` }}
+                    </q-item-section>
+                    <q-item-section v-if="prop.node.level === 3">
+                      {{ `เพิ่มกลยุทธ์ที่/เป้าประสงค์` }}
+                    </q-item-section>
+                  </q-item>
+                  <q-item
+                    v-if="
+                      checkPermission($route)?.attrIsUpdate &&
+                      checkPermission($route)?.attrIsGet
+                    "
+                    clickable
+                    v-close-popup
+                    @click.stop="onClickAction('EDIT', prop.node)"
+                  >
+                    <q-item-section avatar style="min-width: 20px">
+                      <q-icon size="17px" :color="'edit'" :name="'edit'" />
+                    </q-item-section>
+                    <q-item-section v-if="prop.node.level === 1">
+                      {{ `แก้ไขยุทธศาสตร์/แผน` }}
+                    </q-item-section>
+                    <q-item-section v-if="prop.node.level === 2">
+                      {{ `แก้ไขยุทธศาสตร์ 1` }}
+                    </q-item-section>
+                    <q-item-section v-if="prop.node.level === 3">
+                      {{ `แก้ไขยุทธศาสตร์ย่อย` }}
+                    </q-item-section>
+                    <q-item-section v-if="prop.node.level === 4">
+                      {{ `แก้ไขกลยุทธ์ที่/เป้าประสงค์` }}
+                    </q-item-section>
+                  </q-item>
+                  <q-item
+                    v-if="prop.node.children.length !== 0"
+                    clickable
+                    v-close-popup
+                    @click="
+                      (modalSort = true),
+                        (idSort = prop.node.id),
+                        (dataSort = prop.node.children)
+                    "
+                  >
+                    <q-item-section avatar style="min-width: 20px">
+                      <q-icon size="17px" :color="'blue'" :name="'mdi-sort'" />
+                    </q-item-section>
+                    <q-item-section> จัดลำดับข้อมูล </q-item-section>
+                  </q-item>
+                  <q-item
+                    v-if="checkPermission($route)?.attrIsDelete"
+                    clickable
+                    v-close-popup
+                    @click.stop="onClickAction('DEL', prop.node)"
+                  >
+                    <q-item-section avatar style="min-width: 20px">
+                      <q-icon size="17px" :color="'red'" :name="'delete'" />
+                    </q-item-section>
+                    <q-item-section> ลบข้อมูล </q-item-section>
+                  </q-item>
+                </q-list>
              </q-menu>
            </q-btn>
          </q-item>
--- a/src/modules/01_masterdata/views/indicatorByPlan.vue
+++ b/src/modules/01_masterdata/views/indicatorByPlan.vue
@ -8,12 +8,15 @@ import config from "@/app.config";
 import { useCounterMixin } from "@/stores/mixin";
 import { checkPermission } from "@/utils/permissions";
 import { useStructureTree } from "@/stores/structureTree";
+import { updateCurrentPage } from "@/utils/function";

 import type {
  DataOption,
  IndicatorType,
  OrgTreeNode,
  DataHistory,
+  FormDataNodeData,
+  NewPagination,
 } from "@/modules/01_masterdata/interface/index/Main";

 import DialogHistory from "@/modules/01_masterdata/components/Indicators/DialogHistory.vue";
@ -32,12 +35,6 @@ const isAll = ref<boolean>(false);

 const total = ref<number>(0);
 const totalList = ref<number>(1);
-const pagination = ref({
-  sortBy: "createdAt",
-  descending: true,
-  page: 1,
-  rowsPerPage: 10,
-});

 /** หัวตาราง */
 const rows = ref<IndicatorType[]>([]);
@ -61,10 +58,17 @@ const columns = ref<QTableProps["columns"]>([
    style: "font-size: 14px",
  },
 ]);
-const node = ref<OrgTreeNode[]>([]);
-const expanded = ref<any>([]);
-const filterMain = ref<string>("");
 const visibleColumns = ref<string[]>(["including", "includingName"]);
+const pagination = ref({
+  sortBy: "createdAt",
+  descending: true,
+  page: 1,
+  rowsPerPage: 10,
+});
+
+const node = ref<OrgTreeNode[]>([]);
+const expanded = ref<string[]>([]);
+const filterMain = ref<string>("");

 const roundOp = ref<DataOption[]>([
  { id: "", name: "ทั้งหมด" },
@ -73,18 +77,18 @@ const roundOp = ref<DataOption[]>([
 ]);

 const year = ref<number | null>(new Date().getFullYear());
-const nodeData = reactive<any>({
+const nodeData = reactive<FormDataNodeData>({
  round: "",
  nodeId: null,
  node: null,
  keyword: "",
 });

-/** ดึงข้อมูล */
-function fetchList() {
+/** ฟังชั่นดึงข้อมูลรายการตัวชี้วัดตามแผน */
+async function fetchList() {
  if (nodeData.nodeId) {
    showLoader();
-    http
+    await http
      .post(config.API.kpiPlan + `/search-edit`, {
        isAll: isAll.value,
        keyword: nodeData.keyword.trim(),
@ -123,6 +127,10 @@ function onClickAddOrView(status: boolean = false, id: string = "") {
    : router.push("/masterdata/indicator-plan/add");
 }

+/**
+ * ฟังชั่นดูรายละเอียดรายการตัวชี้วัด
+ * @param id id รายการตัวชี้วัดที่ต้องการดู
+ */
 function onClickView(id: string = "") {
  router.push(`/masterdata/indicator-plan/view/${id}`);
 }
@ -133,24 +141,33 @@ async function fetchTree() {
 }

 /** เรียกข้อมูลตาม row โครงสร้าง*/
-function updateSelectedTreeMain(data: any) {
+function updateSelectedTreeMain(data: OrgTreeNode) {
  if (nodeData.node === data.orgLevel && nodeData.nodeId === data.orgTreeId) {
    nodeData.node = null;
    nodeData.nodeId = null;
  } else {
-    nodeData.node = data.orgLevel;
-    nodeData.nodeId = data.orgTreeDnaId;
+    nodeData.node = data.orgLevel ?? null;
+    nodeData.nodeId = data.orgTreeDnaId ?? null;
  }
  getSearch();
 }

-/** delete */
+/**
+ * ฟังชั่นลบข้อมูล
+ * @param idData id ของข้อมูลที่ต้องการลบ
+ */
 async function deleteData(idData: string) {
-  dialogRemove($q, () =>
-    http
+  dialogRemove($q, async () => {
+    showLoader();
+    await http
      .delete(config.API.kpiPlanById(idData))
-      .then(() => {
-        fetchList();
+      .then(async () => {
+        pagination.value.page = await updateCurrentPage(
+          pagination.value.page,
+          totalList.value,
+          rows.value.length
+        );
+        await fetchList();
        success($q, "ลบข้อมูลสำเร็จ");
      })
      .catch((err) => {
@ -158,19 +175,13 @@ async function deleteData(idData: string) {
      })
      .finally(() => {
        hideLoader();
-      })
-  );
-}
-
-/** clear input filter */
-function clearFilter() {
-  nodeData.keyword = "";
-  getSearch();
+      });
+  });
 }

 /**
- * เปิด dialog history
- * @param id
+ * ฟังชั่นเปิด dialog history
+ * @param id id รายการตัวชี้วัดที่ต้องการดูประวัติ
 */
 function onClickHistory(id: string) {
  showLoader();
@ -189,7 +200,7 @@ function onClickHistory(id: string) {
    });
 }

-function updatePagination(newPagination: any) {
+function updatePagination(newPagination: NewPagination) {
  pagination.value.page = 1;
  pagination.value.rowsPerPage = newPagination.rowsPerPage;
 }
@ -230,6 +241,7 @@ onMounted(() => {
                <q-icon name="search" color="grey-5" />
              </template>
            </q-input>
+
            <q-tree
              class="tree-container"
              dense
--- a/src/modules/09_leave/components/05_Leave/Dialog/DialogAddCommander.vue
+++ b/src/modules/09_leave/components/05_Leave/Dialog/DialogAddCommander.vue
@ -159,14 +159,16 @@ function onSubmit() {
          ),
          body
        )
-        .then((res) => {
+        .then(async () => {
+          await props.fetchDetailLeave?.(pageId.value);
          closeDialog();
          success($q, "บันทึกสำเร็จ");
-          props.fetchDetailLeave?.(pageId.value);
        })
        .catch((e) => {
-          hideLoader();
          messageError($q, e);
+        })
+        .finally(() => {
+          hideLoader();
        });
    });
  } else {