From 96b24dbb311e30440753857586fc049ec52677e8 Mon Sep 17 00:00:00 2001
From: "STW_TTTY\\stwtt" <trx.setthawut@gmail.com>
Date: Tue, 23 Apr 2024 11:13:03 +0700
Subject: [PATCH 1/9] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=20=E0=B8=A3?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=A2=E0=B8=81=E0=B8=B2=E0=B8=A3=E0=B8=95=E0=B8=B1?=
 =?UTF-8?q?=E0=B8=A7=E0=B8=8A=E0=B8=B5=E0=B9=89=E0=B8=A7=E0=B8=B1=E0=B8=94?=
 =?UTF-8?q?=E0=B8=95=E0=B8=B2=E0=B8=A1=E0=B8=95=E0=B8=B3=E0=B9=81=E0=B8=AB?=
 =?UTF-8?q?=E0=B8=99=E0=B9=88=E0=B8=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/indicatorByRole/DetailView.vue | 74 +++++++++++--------
 src/modules/14_KPI/views/indicatorByRole.vue  | 13 +++-
 2 files changed, 52 insertions(+), 35 deletions(-)

diff --git a/src/modules/14_KPI/components/indicatorByRole/DetailView.vue b/src/modules/14_KPI/components/indicatorByRole/DetailView.vue
index 3e1bc03e7..121445d77 100644
--- a/src/modules/14_KPI/components/indicatorByRole/DetailView.vue
+++ b/src/modules/14_KPI/components/indicatorByRole/DetailView.vue
@@ -14,6 +14,7 @@ const $q = useQuasar();
 const route = useRoute();
 const router = useRouter();
 
+const heightSize = ref<string>("224");
 const filter = ref<string>("");
 const node = ref<any>([]);
 const expanded = ref<any>([]);
@@ -32,6 +33,7 @@ const {
   success,
   date2Thai,
   calculateDurationYmd,
+  dialogMessageNotify,
 } = useCounterMixin();
 const title = ref<string>(route.params.id ? "แก้ไข" : "เพิ่ม");
 
@@ -119,7 +121,7 @@ function selectAgency() {
 
 /** บันทึกข้อมูล */
 function onSubmit() {
-  showLoader();
+
   const url = id.value
     ? config.API.kpiRoleMainList + `/${id.value}`
     : config.API.kpiRoleMainList;
@@ -145,14 +147,19 @@ function onSubmit() {
     orgRevisionId: form.orgRevisionId, //RevisionId หน่วยงาน
   };
 
-  http[id.value ? "put" : "post"](url, body)
-    .then((res) => {
-      success($q, "บันทึกสำเร็จ");
-      router.push(`/KPI-indicator-role`);
-    })
-    .finally(() => {
-      hideLoader();
-    });
+  if (form.nodeId == null) {
+    dialogMessageNotify($q, "กรุณาเลือกหน่วยงาน/ส่วนราชการ");
+  } else {
+    showLoader();
+    http[id.value ? "put" : "post"](url, body)
+      .then((res) => {
+        success($q, "บันทึกสำเร็จ");
+        router.push(`/KPI-indicator-role`);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  }
 }
 
 //
@@ -164,8 +171,8 @@ function getDetail() {
     .then((res) => {
       const data = res.data.result;
       form.position = data.position;
-      form.year = data.year == null ? 0:data.year;
-      form.round = data.round;
+      form.year = data.year == null ? 0 : data.year;
+      form.round = data.kpiPeriodId;
       form.including = data.including;
       form.includingName = data.includingName;
       form.target = data.target;
@@ -223,14 +230,11 @@ async function fetchTree(id: string) {
 }
 
 function updateTicked(val: any) {
-  console.log(expanded.value);
-
   ticked.value = [];
   ticked.value.push(val[val.length - 1]);
 }
 
 function updateSelected(data: any) {
-  console.log(data);
   nodeId.value = data.orgTreeId;
   orgName.value = data.orgTreeName;
   form.node = data.orgLevel;
@@ -241,24 +245,19 @@ function updateSelected(data: any) {
 function getRound() {
   showLoader();
   http
-    .get(
-      config.API.kpiPeriod +
-        `?year=${form.year}`
-    )
+    .get(config.API.kpiPeriod + `?year=${form.year}`)
     .then((res) => {
       const data = res.data.result.data;
       roundOp.value = data.map((item: any) => ({
         id: item.id,
         name: statusTothai(item.durationKPI),
-      }))
-      console.log(roundOp.value)
+      }));
     })
     .finally(() => {
-      hideLoader()
+      hideLoader();
     });
 }
 
-
 function statusTothai(val: string) {
   switch (val) {
     case "SPECIAL":
@@ -272,12 +271,19 @@ function statusTothai(val: string) {
   }
 }
 
+function onResize(size: any) {
+  heightSize.value = `${size.height - 99}`;
+}
+
+function setModel(val: string) {
+  form.position = val;
+}
+
 onMounted(() => {
   fetchActive();
   getOptions();
-  getRound()
+  getRound();
   if (id.value !== "") {
-    console.log("edit");
     getDetail();
   }
 });
@@ -302,11 +308,13 @@ onMounted(() => {
           <div class="col-8">
             <q-select
               dense
-              v-model="form.position"
+              :model-value="form.position"
               label="ตำแหน่งในสายงาน"
               outlined
               emit-value
               map-options
+              fill-input
+              hide-selected
               lazy-rules
               :rules="[(val:string) => !!val || `${'กรุณาเลือกตำแหน่งในสายงาน'}`,]"
               hide-bottom-space
@@ -315,6 +323,7 @@ onMounted(() => {
               class="inputgreen"
               :options="positionOp"
               use-input
+              @input-value="setModel"
               @filter="(inputValue:any,doneFn:Function) => filterOption(inputValue, doneFn) "
             >
               <template v-slot:no-option>
@@ -334,7 +343,7 @@ onMounted(() => {
               autoApply
               year-picker
               :enableTimePicker="false"
-              @update:model-value="form.round = '',getRound()"
+              @update:model-value="(form.round = ''), getRound()"
             >
               <template #year="{ year }">{{ year + 543 }}</template>
               <template #year-overlay-value="{ value }">{{
@@ -351,7 +360,6 @@ onMounted(() => {
                     form.year === 0 ? null : Number(form.year) + 543
                   "
                   :label="`${'ปีงบประมาณ'}`"
-
                 >
                   <template v-slot:prepend>
                     <q-icon
@@ -443,8 +451,8 @@ onMounted(() => {
               hide-bottom-space
             />
           </div>
-          <div class="col-4" style="height: 340px">
-            <q-card flat bordered>
+          <div class="col-4">
+            <q-card flat bordered class="full-height">
               <q-card-section class="bg-grey-3 q-pa-sm">
                 <div class="text-dark text-body2 text-weight-medium">
                   หน่วยงาน/ส่วนราชการ
@@ -468,7 +476,10 @@ onMounted(() => {
                     <q-icon v-else name="search" color="grey-5" />
                   </template>
                 </q-input>
-                <q-scroll-area visible style="height: 223px; margin-top: 5px">
+                <q-scroll-area
+                  visible
+                  :style="{ height: `${heightSize}px`, marginTop: '5px' }"
+                >
                   <q-tree
                     dense
                     :nodes="node"
@@ -511,8 +522,9 @@ onMounted(() => {
               </q-card-section>
             </q-card>
           </div>
-          <div class="col-8" style="height: 340px">
+          <div class="col-8">
             <q-card flat bordered>
+              <q-resize-observer @resize="onResize" />
               <q-card-section class="bg-grey-3 q-pa-sm">
                 <div class="row text-dark text-body2 text-weight-medium">
                   <div class="text-center col-4">ระดับคะแนน</div>
diff --git a/src/modules/14_KPI/views/indicatorByRole.vue b/src/modules/14_KPI/views/indicatorByRole.vue
index f60a0aa7d..e6ffecb70 100644
--- a/src/modules/14_KPI/views/indicatorByRole.vue
+++ b/src/modules/14_KPI/views/indicatorByRole.vue
@@ -74,10 +74,9 @@ function fetchList() {
   http
     .get(
       config.API.kpiRoleMainList +
-        `?page=${formFilter.page}&pageSize=${formFilter.pageSize}&kpiPeriodId=${formFilter.round}&position=${formFilter.position}&year=2024`
+        `?page=${formFilter.page}&pageSize=${formFilter.pageSize}&kpiPeriodId=${formFilter.round}&position=${formFilter.position}`
     )
     .then((res) => {
-      console.log(res);
       const data = res.data.result.data;
       maxPage.value = Math.ceil(res.data.result.total / formFilter.pageSize);
       rows.value = data;
@@ -172,7 +171,6 @@ function getRound() {
         id: item.id,
         name: statusTothai(item.durationKPI),
       }))
-      console.log(roundOp.value)
     })
     .finally(() => {
       hideLoader()
@@ -192,6 +190,10 @@ function statusTothai(val: string) {
   }
 }
 
+function setModel(val:string){
+  formFilter.position = val
+}
+
 onMounted(async () => {
   await getOptions();
   await getRound();
@@ -208,17 +210,20 @@ onMounted(async () => {
       <div class="row q-gutter-sm">
         <q-select
           dense
-          v-model="formFilter.position"
+          :model-value="formFilter.position"
           label="ตำแหน่ง"
           outlined
           emit-value
           map-options
+          fill-input
+          hide-selected
           hide-bottom-space
           option-label="name"
           option-value="id"
           class="inputgreen"
           :options="positionOp"
           use-input
+          @input-value="setModel"
           @filter="(inputValue:any,doneFn:Function) => filterOption(inputValue, doneFn) "
           @update:model-value="fetchList"
         >

From 87e006415c09da723753787d984fc4486c4f9a8e Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Tue, 23 Apr 2024 11:31:13 +0700
Subject: [PATCH 2/9] =?UTF-8?q?=E0=B8=A3=E0=B8=B2=E0=B8=A2=E0=B8=81?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=A3=E0=B8=95=E0=B8=B1=E0=B8=A7=E0=B8=8A=E0=B8=B5?=
 =?UTF-8?q?=E0=B9=89=E0=B8=A7=E0=B8=B1=E0=B8=94=E0=B8=95=E0=B8=B2=E0=B8=A1?=
 =?UTF-8?q?=E0=B9=81=E0=B8=9C=E0=B8=99=E0=B8=AF=20=3D>=20=E0=B9=81?=
 =?UTF-8?q?=E0=B8=81=E0=B9=89=E0=B9=84=E0=B8=82=E0=B8=95=E0=B8=B1=E0=B8=A7?=
 =?UTF-8?q?=E0=B8=8A=E0=B8=B5=E0=B9=89=E0=B8=A7=E0=B8=B1=E0=B8=94=E0=B8=95?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=A1=E0=B9=81=E0=B8=9C=E0=B8=99=E0=B8=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/indicatorByPlan/DetailView.vue |  39 +-
 .../indicatorByPlan/IndicatorByPlan.vue       | 397 +++++++++---------
 2 files changed, 192 insertions(+), 244 deletions(-)

diff --git a/src/modules/14_KPI/components/indicatorByPlan/DetailView.vue b/src/modules/14_KPI/components/indicatorByPlan/DetailView.vue
index 9cb5a5ad9..2bb6444c8 100644
--- a/src/modules/14_KPI/components/indicatorByPlan/DetailView.vue
+++ b/src/modules/14_KPI/components/indicatorByPlan/DetailView.vue
@@ -1,43 +1,14 @@
 <script setup lang="ts">
-import { ref, reactive, onMounted } from "vue";
-import { useQuasar } from "quasar";
-import { useRouter, useRoute } from "vue-router";
-import http from "@/plugins/http";
-import config from "@/app.config";
+import { ref } from "vue";
+
+import { useRouter, useRoute } from "vue-router";
 
-import { useCounterMixin } from "@/stores/mixin";
 import IndicatorByPlan from "@/modules/14_KPI/components/indicatorByPlan/IndicatorByPlan.vue";
 
-const $q = useQuasar();
 const router = useRouter();
 const route = useRoute();
-const {
-  dialogConfirm,
-  showLoader,
-  hideLoader,
-  messageError,
-  success,
-  date2Thai,
-  calculateDurationYmd,
-} = useCounterMixin();
+
 const title = ref<string>(route.params.id ? "แก้ไข" : "เพิ่ม");
-
-async function fetchData() {
-  showLoader();
-  await http
-    .get(config.API.kpiPlan)
-    .then(async (res) => {})
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
-onMounted(async () => {
-  await fetchData();
-});
 </script>
 <template>
   <div class="toptitle text-dark col-12 row items-center">
@@ -48,7 +19,7 @@ onMounted(async () => {
       class="q-mr-sm"
       icon="mdi-arrow-left"
       color="primary"
-      @click="router.go(-1)"
+      @click="router.push(`/KPI-indicator-plan`)"
     />
     {{ `${title}ตัวชี้วัดตามแผนฯ` }}
   </div>
diff --git a/src/modules/14_KPI/components/indicatorByPlan/IndicatorByPlan.vue b/src/modules/14_KPI/components/indicatorByPlan/IndicatorByPlan.vue
index 75d971a54..590dbfdd6 100644
--- a/src/modules/14_KPI/components/indicatorByPlan/IndicatorByPlan.vue
+++ b/src/modules/14_KPI/components/indicatorByPlan/IndicatorByPlan.vue
@@ -1,25 +1,29 @@
 <script setup lang="ts">
 import { ref, reactive, onMounted } from "vue";
-import { useCounterMixin } from "@/stores/mixin";
-import config from "@/app.config";
 import { QForm, useQuasar } from "quasar";
+import { useRoute, useRouter } from "vue-router";
+import config from "@/app.config";
 import http from "@/plugins/http";
-import { useRoute } from "vue-router";
+
+/** importType*/
+import type { DataOption } from "@/modules/14_KPI/interface/index/Main";
+
+/** importStore*/
 import { usePositionEmp } from "@/modules/16_positionEmployee/store/organizational";
+import { useCounterMixin } from "@/stores/mixin";
+
+/**use*/
+const $q = useQuasar();
+const route = useRoute();
+const router = useRouter();
 const store = usePositionEmp();
 const mixin = useCounterMixin();
-const $q = useQuasar();
-const {
-  dialogRemove,
-  dialogConfirm,
-  showLoader,
-  hideLoader,
-  messageError,
-  success,
-  date2Thai,
-} = mixin;
+const { dialogConfirm, showLoader, hideLoader, messageError, success } = mixin;
 
-const planData = reactive<any>({
+const id = ref<string>(route.params.id ? route.params.id.toLocaleString() : "");
+
+/**form ตัวชี้วัดตามแผนฯ*/
+const planData = reactive({
   kpiPeriodId: "", //รอบการประเมิน(เมษา->APR, ตุลา->OCT)
   including: "", //รหัสตัวชี้วัด
   includingName: "", //ชื่อตัวชี้วัด
@@ -34,40 +38,27 @@ const planData = reactive<any>({
   meaning: "", //นิยามหรือความหมาย
   formula: "", //สูตรคำนวณ
   node: null, //ระดับหน่วยงาน
-  nodeId: "", //id หน่วยงาน
+  nodeId: null, //id หน่วยงาน
   orgRevisionId: "", //RevisionId หน่วยงาน
   strategy: null, //ระดับยุทธศาสตร์
   strategyId: "", //id ยุทธศาสตร์
 });
 
-const filter = ref<string>("");
-const filterAgency = ref<string>("");
-const route = useRoute();
-const id = ref<string>(route.params.id ? route.params.id.toLocaleString() : "");
-const year = ref<number>(0);
+const year = ref<number>(0); // ปีงยประมาณ
+const roundOp = ref<DataOption[]>([]);
 
-const roundOp = ref<any[]>([]);
-const notFound = ref<string>("ไม่พบข้อมูลที่ค้นหา");
-const noData = ref<string>("ไม่มีข้อมูล");
-const expandedPlan = ref<Array<string | null>>([]);
-const expandedAgency = ref<Array<string | null>>([]);
 const nodeplan = ref<any>([]);
 const nodeAgency = ref<any>([]);
-const editStatus = ref<boolean>(false);
-async function onSubmit() {
-  dialogConfirm(
-    $q,
-    async () => {
-      editStatus.value ? editData(id.value) : addData();
-    },
-    "ยืนยันการบันทึกข้อมูล",
-    "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
-  );
-}
+const filter = ref<string>("");
+const filterAgency = ref<string>("");
+const expandedPlan = ref<string[]>([]);
+const expandedAgency = ref<string[]>([]);
 
+const editStatus = ref<boolean>(false);
 const inputRef = ref<any>(null);
+
+/** functiopn fetch รอบการประเมิน*/
 function fetchRoundOption(isId: number | null = null) {
-  showLoader();
   http
     .get(
       config.API.kpiPeriod +
@@ -93,14 +84,29 @@ function fetchRoundOption(isId: number | null = null) {
     })
     .catch((err) => {
       messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
     });
 }
 
-function fetchTree() {
-  showLoader();
+/** function fetch หาโครงสร้างที่ใช้งาน*/
+function fetchOrganizationActive() {
+  http
+    .get(config.API.activeOrganization)
+    .then((res) => {
+      const data = res.data.result;
+      if (data) {
+        store.fetchDataActive(data);
+
+        store.activeId && fetchTreeAgency(store.activeId);
+        fetchTreeStrategy();
+      }
+    })
+    .catch((err) => {
+      messageError($q, err);
+    });
+}
+
+/** function fetchTree ยุทธศาสตร์ / แผน*/
+function fetchTreeStrategy() {
   http
     .get(config.API.devStrategy)
     .then((res) => {
@@ -109,15 +115,12 @@ function fetchTree() {
     })
     .catch((err) => {
       messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
     });
 }
 
-async function fetchDataTree(id: string) {
-  showLoader();
-  await http
+/** functioon fetchcTree หน่วยงาน/ส่วนราชการ*/
+function fetchTreeAgency(id: string) {
+  http
     .get(config.API.orgByid(id.toString()))
     .then(async (res) => {
       const data = res.data.result;
@@ -142,39 +145,17 @@ async function fetchDataTree(id: string) {
     })
     .catch((err) => {
       messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
     });
 }
 
-async function fetchOrganizationActive() {
+/** function fetch ข้อมูลตัวชี้วัด*/
+function fetchDataById(id: string) {
   showLoader();
-  await http
-    .get(config.API.activeOrganization)
+  http
+    .get(config.API.kpiPlanById(id))
     .then((res) => {
-      const data = res.data.result;
-      if (data) {
-        store.fetchDataActive(data);
-      }
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
-async function fetchDataById(id: any) {
-  showLoader();
-  await http
-    .get(config.API.kpiPlanById(id))
-    .then(async (res) => {
       const data = res.data.result;
       year.value = data.year;
-      // planData.value = data;
-      // planData.year = data.year;
       planData.kpiPeriodId = data.kpiPeriodId;
       planData.including = data.including;
       planData.includingName = data.includingName;
@@ -193,7 +174,6 @@ async function fetchDataById(id: any) {
       planData.orgRevisionId = data.orgRevisionId;
       planData.strategy = data.strategy;
       planData.strategyId = data.strategyId;
-      console.log(data);
 
       fetchRoundOption();
     })
@@ -201,15 +181,19 @@ async function fetchDataById(id: any) {
       messageError($q, err);
     })
     .finally(() => {
-      hideLoader();
+      setTimeout(() => {
+        hideLoader();
+      }, 1000);
     });
 }
 
+/** funtion เลือกหรืออัปดเดท ยุทธศาสตร์ / แผน*/
 function updateSelected(data: any) {
   planData.strategyId = data.id;
   planData.strategy = data.level;
 }
 
+/** funtion เลือกหรืออัปดเดท หน่วยงาน/ส่วนราชการ*/
 function updateSelectedAgency(data: any, isUpdate: boolean = false) {
   if (
     planData.node === data.orgLevel &&
@@ -218,42 +202,39 @@ function updateSelectedAgency(data: any, isUpdate: boolean = false) {
   ) {
     planData.node = null;
     planData.nodeId = null;
-    console.log("1");
   } else {
     planData.node = data.orgLevel;
     planData.nodeId = data.orgTreeId;
-    console.log("2");
   }
   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: string) {
-  await http
-    .put(config.API.kpiPlanById(id), planData)
-    .then(() => {
-      success($q, "บันทึกข้อมูลสำเร็จ");
-      fetchDataById(id);
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
+/**function ยืนยันการบันทึกข้อมูล */
+function onSubmit() {
+  dialogConfirm(
+    $q,
+    async () => {
+      showLoader();
+      // editStatus.value ? editData(id.value) : addData();
+      try {
+        const url = editStatus.value
+          ? config.API.kpiPlanById(id.value)
+          : config.API.kpiPlan;
+        const method = editStatus.value ? "put" : "post";
+        const res = await http[method](url, planData);
+        success($q, "บันทึกข้อมูลสำเร็จ");
+        editStatus.value
+          ? fetchDataById(id.value)
+          : router.push(`/KPI-indicator-plan/${res.data.result}`);
+      } catch (e) {
+        messageError($q, e);
+      } finally {
+        hideLoader();
+      }
+    },
+    "ยืนยันการบันทึกข้อมูล",
+    "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
+  );
 }
 
 /**
@@ -276,18 +257,12 @@ async function searchAndReplace(orgTreeData: any, treeId: string | null) {
   }
 }
 
-onMounted(async () => {
-  //   fetchData();
-
-  await fetchOrganizationActive();
+onMounted(() => {
+  fetchOrganizationActive();
   if (id.value) {
     editStatus.value = true;
     fetchDataById(id.value);
   }
-  setTimeout(async () => {
-    store.activeId && (await fetchDataTree(store.activeId));
-    await fetchTree();
-  }, 200);
 });
 </script>
 
@@ -377,7 +352,7 @@ onMounted(async () => {
             hide-bottom-space
           />
         </div>
-        <div class="col-3">
+        <div class="col-4">
           <q-input
             outlined
             v-model="planData.target"
@@ -389,7 +364,7 @@ onMounted(async () => {
             hide-bottom-space
           />
         </div>
-        <div class="col-3">
+        <div class="col-4">
           <q-input
             outlined
             v-model="planData.unit"
@@ -402,7 +377,7 @@ onMounted(async () => {
             hide-bottom-space
           />
         </div>
-        <div class="col-3">
+        <div class="col-4">
           <q-input
             outlined
             v-model="planData.weight"
@@ -417,99 +392,101 @@ onMounted(async () => {
         </div>
         <div class="col-12 row">
           <div class="col-6">
-            <q-card bordered>
-              <q-card-actions class="bg-grey-3 row">
+            <q-card flat bordered>
+              <q-card bordered>
+                <q-card-actions class="bg-grey-3 row">
+                  <div class="col-4 flex justify-center items-center">
+                    <div>ระดับคะแนน</div>
+                  </div>
+                  <div class="col-8 q-px-xl">ผลสำเร็จของงาน</div>
+                </q-card-actions>
+              </q-card>
+              <div class="row">
                 <div class="col-4 flex justify-center items-center">
-                  <div>ระดับคะแนน</div>
+                  <div>5</div>
                 </div>
-                <div class="col-8 q-px-xl">ผลสำเร็จของงาน</div>
-              </q-card-actions>
+                <div class="col-8 q-pa-sm">
+                  <q-input
+                    outlined
+                    v-model="planData.achievement5"
+                    label="กรอกผลสำเร็จของงาน"
+                    bg-color="white"
+                    dense
+                    class="inputgreen"
+                    :rules="[(val) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`]"
+                    hide-bottom-space
+                  />
+                </div>
+              </div>
+              <div class="row">
+                <div class="col-4 flex justify-center items-center">
+                  <div>4</div>
+                </div>
+                <div class="col-8 q-pa-sm">
+                  <q-input
+                    outlined
+                    v-model="planData.achievement4"
+                    label="กรอกผลสำเร็จของงาน"
+                    bg-color="white"
+                    dense
+                    class="inputgreen"
+                    :rules="[(val) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`]"
+                    hide-bottom-space
+                  />
+                </div>
+              </div>
+              <div class="row">
+                <div class="col-4 flex justify-center items-center">
+                  <div>3</div>
+                </div>
+                <div class="col-8 q-pa-sm">
+                  <q-input
+                    outlined
+                    v-model="planData.achievement3"
+                    label="กรอกผลสำเร็จของงาน"
+                    bg-color="white"
+                    dense
+                    class="inputgreen"
+                    :rules="[(val) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`]"
+                    hide-bottom-space
+                  />
+                </div>
+              </div>
+              <div class="row">
+                <div class="col-4 flex justify-center items-center">
+                  <div>2</div>
+                </div>
+                <div class="col-8 q-pa-sm">
+                  <q-input
+                    outlined
+                    v-model="planData.achievement2"
+                    label="กรอกผลสำเร็จของงาน"
+                    bg-color="white"
+                    dense
+                    class="inputgreen"
+                    :rules="[(val) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`]"
+                    hide-bottom-space
+                  />
+                </div>
+              </div>
+              <div class="row">
+                <div class="col-4 flex justify-center items-center">
+                  <div>1</div>
+                </div>
+                <div class="col-8 q-pa-sm">
+                  <q-input
+                    outlined
+                    v-model="planData.achievement1"
+                    label="กรอกผลสำเร็จของงาน"
+                    bg-color="white"
+                    dense
+                    class="inputgreen"
+                    :rules="[(val) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`]"
+                    hide-bottom-space
+                  />
+                </div>
+              </div>
             </q-card>
-            <div class="row">
-              <div class="col-4 flex justify-center items-center">
-                <div>5</div>
-              </div>
-              <div class="col-8 q-pa-sm">
-                <q-input
-                  outlined
-                  v-model="planData.achievement5"
-                  label="กรอกผลสำเร็จของงาน"
-                  bg-color="white"
-                  dense
-                  class="inputgreen"
-                  :rules="[(val) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`]"
-                  hide-bottom-space
-                />
-              </div>
-            </div>
-            <div class="row">
-              <div class="col-4 flex justify-center items-center">
-                <div>4</div>
-              </div>
-              <div class="col-8 q-pa-sm">
-                <q-input
-                  outlined
-                  v-model="planData.achievement4"
-                  label="กรอกผลสำเร็จของงาน"
-                  bg-color="white"
-                  dense
-                  class="inputgreen"
-                  :rules="[(val) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`]"
-                  hide-bottom-space
-                />
-              </div>
-            </div>
-            <div class="row">
-              <div class="col-4 flex justify-center items-center">
-                <div>3</div>
-              </div>
-              <div class="col-8 q-pa-sm">
-                <q-input
-                  outlined
-                  v-model="planData.achievement3"
-                  label="กรอกผลสำเร็จของงาน"
-                  bg-color="white"
-                  dense
-                  class="inputgreen"
-                  :rules="[(val) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`]"
-                  hide-bottom-space
-                />
-              </div>
-            </div>
-            <div class="row">
-              <div class="col-4 flex justify-center items-center">
-                <div>2</div>
-              </div>
-              <div class="col-8 q-pa-sm">
-                <q-input
-                  outlined
-                  v-model="planData.achievement2"
-                  label="กรอกผลสำเร็จของงาน"
-                  bg-color="white"
-                  dense
-                  class="inputgreen"
-                  :rules="[(val) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`]"
-                  hide-bottom-space
-                />
-              </div>
-            </div>
-            <div class="row">
-              <div class="col-4 flex justify-center items-center">
-                <div>1</div>
-              </div>
-              <div class="col-8 q-pa-sm">
-                <q-input
-                  outlined
-                  v-model="planData.achievement1"
-                  label="กรอกผลสำเร็จของงาน"
-                  bg-color="white"
-                  dense
-                  class="inputgreen"
-                  :rules="[(val) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`]"
-                  hide-bottom-space
-                />
-              </div>
-            </div>
           </div>
         </div>
         <div class="col-12">
@@ -567,8 +544,8 @@ onMounted(async () => {
                 label-key="labelName"
                 selected-color="primary"
                 :filter="filterAgency"
-                :no-results-label="notFound"
-                :no-nodes-label="noData"
+                no-results-label="ไม่พบข้อมูลที่ค้นหา"
+                no-nodes-label="ไม่มีข้อมูล"
                 v-model:expanded="expandedAgency"
                 v-model:selected="planData.nodeId"
               >
@@ -630,8 +607,8 @@ onMounted(async () => {
                 node-key="id"
                 label-key="id"
                 :filter="filter"
-                :no-results-label="notFound"
-                :no-nodes-label="noData"
+                no-results-label="ไม่พบข้อมูลที่ค้นหา"
+                no-nodes-label="ไม่มีข้อมูล"
                 v-model:expanded="expandedPlan"
                 v-model:selected="planData.strategyId"
               >

From 21e569efb45d52be97bfa2825ec295c3bbb85ab7 Mon Sep 17 00:00:00 2001
From: waruneeauy <warunee.auy@gmail.com>
Date: Tue, 23 Apr 2024 12:11:40 +0700
Subject: [PATCH 3/9] updated

---
 src/modules/14_KPI/views/indicatorByRole.vue | 43 +++++++++++---------
 1 file changed, 24 insertions(+), 19 deletions(-)

diff --git a/src/modules/14_KPI/views/indicatorByRole.vue b/src/modules/14_KPI/views/indicatorByRole.vue
index e6ffecb70..3cb9cf60c 100644
--- a/src/modules/14_KPI/views/indicatorByRole.vue
+++ b/src/modules/14_KPI/views/indicatorByRole.vue
@@ -170,10 +170,10 @@ function getRound() {
       roundOp.value = data.map((item: any) => ({
         id: item.id,
         name: statusTothai(item.durationKPI),
-      }))
+      }));
     })
     .finally(() => {
-      hideLoader()
+      hideLoader();
     });
 }
 
@@ -190,8 +190,8 @@ function statusTothai(val: string) {
   }
 }
 
-function setModel(val:string){
-  formFilter.position = val
+function setModel(val: string) {
+  formFilter.position = val;
 }
 
 onMounted(async () => {
@@ -256,13 +256,19 @@ onMounted(async () => {
           map-options
         /> -->
         <datepicker
+          style="width: 120px"
           menu-class-name="modalfix"
           v-model="formFilter.year"
           :locale="'th'"
           autoApply
           year-picker
           :enableTimePicker="false"
-          @update:model-value="(formFilter.page = 1),formFilter.round = '',getRound(),fetchList()"
+          @update:model-value="
+            (formFilter.page = 1),
+              (formFilter.round = ''),
+              getRound(),
+              fetchList()
+          "
         >
           <template #year="{ year }">{{ year + 543 }}</template>
           <template #year-overlay-value="{ value }">{{
@@ -301,6 +307,7 @@ onMounted(async () => {
             </q-input>
           </template>
         </datepicker>
+
         <q-select
           dense
           outlined
@@ -311,23 +318,21 @@ onMounted(async () => {
           option-value="id"
           emit-value
           map-options
-          
           @update:model-value="fetchList"
-          style="width: 200px;"
+          style="width: 160px"
         />
       </div>
-      <q-toolbar-title>
-        <q-btn
-          flat
-          round
-          dense
-          icon="add"
-          color="primary"
-          @click="onClickAddOrView()"
-        >
-          <q-tooltip>เพิ่ม</q-tooltip>
-        </q-btn>
-      </q-toolbar-title>
+
+      <q-btn
+        flat
+        round
+        dense
+        icon="add"
+        color="primary"
+        @click="onClickAddOrView()"
+      >
+        <q-tooltip>เพิ่ม</q-tooltip>
+      </q-btn>
 
       <q-space />
       <div class="row q-gutter-sm">

From fa663dd4424ae13610ce4e72059cebd2908e4752 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Tue, 23 Apr 2024 13:40:54 +0700
Subject: [PATCH 4/9] =?UTF-8?q?=E0=B8=A2=E0=B8=B8=E0=B8=97=E0=B8=98?=
 =?UTF-8?q?=E0=B8=A8=E0=B8=B2=E0=B8=AA=E0=B8=95=E0=B8=A3=E0=B9=8C=20=3D>?=
 =?UTF-8?q?=20=E0=B9=80=E0=B8=9E=E0=B8=B4=E0=B9=88=E0=B8=A1=20scroll?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../15_development/views/Strategic.vue        | 179 ++++++++++--------
 1 file changed, 95 insertions(+), 84 deletions(-)

diff --git a/src/modules/15_development/views/Strategic.vue b/src/modules/15_development/views/Strategic.vue
index 2d81f48fe..7a7325863 100644
--- a/src/modules/15_development/views/Strategic.vue
+++ b/src/modules/15_development/views/Strategic.vue
@@ -209,94 +209,100 @@ onMounted(() => {
         </q-input>
       </q-toolbar>
     </div>
-    <q-tree
-      class="q-pa-sm q-gutter-sm"
-      dense
-      :nodes="nodes"
-      node-key="id"
-      label-key="id"
-      :filter="filter"
-      no-results-label="ไม่พบข้อมูลที่ค้นหา"
-      no-nodes-label="ไม่มีข้อมูล"
-      v-model:expanded="expanded"
-    >
-      <template v-slot:default-header="prop">
-        <q-item
-          clickable
-          @click.stop
-          :active="nodeId == prop.node.name"
-          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"
-        >
-          <div>
-            <div class="text-weight-medium">
-              {{ prop.node.name }}
-            </div>
-          </div>
-          <q-btn
-            flat
-            dense
-            icon="mdi-dots-vertical"
-            class="q-ml-xs"
-            color="grey-13"
-            size="12px"
-            round
+    <div class="bg-white tree-container q-pa-xs">
+      <q-tree
+        class="q-pa-sm q-gutter-sm"
+        dense
+        :nodes="nodes"
+        node-key="id"
+        label-key="id"
+        :filter="filter"
+        no-results-label="ไม่พบข้อมูลที่ค้นหา"
+        no-nodes-label="ไม่มีข้อมูล"
+        v-model:expanded="expanded"
+      >
+        <template v-slot:default-header="prop">
+          <q-item
+            clickable
+            @click.stop
+            :active="nodeId == prop.node.name"
+            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"
           >
-            <q-menu>
-              <q-list
-                dense
-                v-for="(item, index) in prop.node.level !== 4
-                  ? ListMenu
-                  : ListMenu.slice(1, 4)"
-                :key="index"
-                style="min-width: 100px"
-              >
-                <q-item
-                  clickable
-                  v-close-popup
-                  @click.stop="onClickAction(item.value, prop.node)"
+            <div>
+              <div class="text-weight-medium">
+                {{ prop.node.name }}
+              </div>
+            </div>
+            <q-btn
+              flat
+              dense
+              icon="mdi-dots-vertical"
+              class="q-ml-xs"
+              color="grey-13"
+              size="12px"
+              round
+            >
+              <q-menu>
+                <q-list
+                  dense
+                  v-for="(item, index) in prop.node.level !== 4
+                    ? ListMenu
+                    : ListMenu.slice(1, 4)"
+                  :key="index"
+                  style="min-width: 100px"
                 >
-                  <q-item-section avatar style="min-width: 20px">
-                    <q-icon size="17px" :color="item.color" :name="item.icon" />
-                  </q-item-section>
+                  <q-item
+                    clickable
+                    v-close-popup
+                    @click.stop="onClickAction(item.value, prop.node)"
+                  >
+                    <q-item-section avatar style="min-width: 20px">
+                      <q-icon
+                        size="17px"
+                        :color="item.color"
+                        :name="item.icon"
+                      />
+                    </q-item-section>
 
-                  <div v-if="item.value === 'ADD'">
-                    <q-item-section v-if="prop.node.level === 1">
-                      {{ `${item.label}ยุทธศาสตร์ที่` }}
-                    </q-item-section>
-                    <q-item-section v-if="prop.node.level === 2">
-                      {{ `${item.label}ยุทธศาสตร์ย่อย` }}
-                    </q-item-section>
-                    <q-item-section v-if="prop.node.level === 3">
-                      {{ `${item.label}กลยุทธ์ที่/เป้าประสงค์` }}
-                    </q-item-section>
-                  </div>
+                    <div v-if="item.value === 'ADD'">
+                      <q-item-section v-if="prop.node.level === 1">
+                        {{ `${item.label}ยุทธศาสตร์ที่ 1` }}
+                      </q-item-section>
+                      <q-item-section v-if="prop.node.level === 2">
+                        {{ `${item.label}ยุทธศาสตร์ย่อย` }}
+                      </q-item-section>
+                      <q-item-section v-if="prop.node.level === 3">
+                        {{ `${item.label}กลยุทธ์ที่/เป้าประสงค์` }}
+                      </q-item-section>
+                    </div>
 
-                  <div v-else-if="item.value === 'EDIT'">
-                    <q-item-section v-if="prop.node.level === 1">
-                      {{ `${item.label}ยุทธศาสตร์/แผน` }}
-                    </q-item-section>
-                    <q-item-section v-if="prop.node.level === 2">
-                      {{ `${item.label}ยุทธศาสตร์ที่` }}
-                    </q-item-section>
-                    <q-item-section v-if="prop.node.level === 3">
-                      {{ `${item.label}ยุทธศาสตร์ย่อย` }}
-                    </q-item-section>
-                    <q-item-section v-if="prop.node.level === 4">
-                      {{ `${item.label}กลยุทธ์ที่/เป้าประสงค์` }}
-                    </q-item-section>
-                  </div>
+                    <div v-else-if="item.value === 'EDIT'">
+                      <q-item-section v-if="prop.node.level === 1">
+                        {{ `${item.label}ยุทธศาสตร์/แผน` }}
+                      </q-item-section>
+                      <q-item-section v-if="prop.node.level === 2">
+                        {{ `${item.label}ยุทธศาสตร์ที่` }}
+                      </q-item-section>
+                      <q-item-section v-if="prop.node.level === 3">
+                        {{ `${item.label}ยุทธศาสตร์ย่อย` }}
+                      </q-item-section>
+                      <q-item-section v-if="prop.node.level === 4">
+                        {{ `${item.label}กลยุทธ์ที่/เป้าประสงค์` }}
+                      </q-item-section>
+                    </div>
 
-                  <div v-else>
-                    <q-item-section>{{ item.label }}</q-item-section>
-                  </div>
-                </q-item>
-              </q-list>
-            </q-menu>
-          </q-btn>
-        </q-item>
-      </template>
-    </q-tree>
+                    <div v-else>
+                      <q-item-section>{{ item.label }}</q-item-section>
+                    </div>
+                  </q-item>
+                </q-list>
+              </q-menu>
+            </q-btn>
+          </q-item>
+        </template>
+      </q-tree>
+    </div>
   </q-card>
 
   <q-dialog v-model="modalDialog" persistent>
@@ -349,4 +355,9 @@ onMounted(() => {
   </q-dialog>
 </template>
 
-<style scoped></style>
+<style lang="scss" scoped>
+.tree-container {
+  overflow: auto;
+  height: 75vh;
+}
+</style>

From b9d43329cfcdcacb2d1d1ba73db55ad53d9d1310 Mon Sep 17 00:00:00 2001
From: waruneeauy <warunee.auy@gmail.com>
Date: Tue, 23 Apr 2024 14:50:20 +0700
Subject: [PATCH 5/9] fix bug

---
 src/modules/14_KPI/components/competency/Forms/Main.vue | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/modules/14_KPI/components/competency/Forms/Main.vue b/src/modules/14_KPI/components/competency/Forms/Main.vue
index 88db3c360..465b99e14 100644
--- a/src/modules/14_KPI/components/competency/Forms/Main.vue
+++ b/src/modules/14_KPI/components/competency/Forms/Main.vue
@@ -57,12 +57,13 @@ function onClickAddLevels() {
   const levelName = formData.levels.length + 1;
   const data = {
     level:
-      store.competencyType === "HEAD" || store.competencyType === "GROUP"
-        ? (formData.levels[formData.levels.length].level = levelName.toString())
+      (store.competencyType === "HEAD" || store.competencyType === "GROUP") &&
+      levelName <= 6
+        ? levelName.toString()
         : "",
     description: "",
   };
-  formData.levels.push(data);
+  levelName <= 6 && formData.levels.push(data);
 }
 
 function onSubmit() {

From 7eb364b152aecbf6b12416e57be5120889bdb19d Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Tue, 23 Apr 2024 16:21:59 +0700
Subject: [PATCH 6/9] =?UTF-8?q?=E0=B8=AA=E0=B8=A1=E0=B8=A3=E0=B8=A3?=
 =?UTF-8?q?=E0=B8=96=E0=B8=99=E0=B8=B0=20=3D>=20Bug=20paging=20=E0=B8=81?=
 =?UTF-8?q?=E0=B8=A5=E0=B8=B8=E0=B9=88=E0=B8=A1=E0=B8=87=E0=B8=B2=E0=B8=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../competency/01ListCompetency.vue           |  1 +
 .../competency/02ListLinkPosition.vue         | 76 +++++++++++++++++--
 .../components/competency/03ListLinkGroup.vue | 34 +++------
 3 files changed, 80 insertions(+), 31 deletions(-)

diff --git a/src/modules/14_KPI/components/competency/01ListCompetency.vue b/src/modules/14_KPI/components/competency/01ListCompetency.vue
index f0dd94301..57db8c08e 100644
--- a/src/modules/14_KPI/components/competency/01ListCompetency.vue
+++ b/src/modules/14_KPI/components/competency/01ListCompetency.vue
@@ -185,6 +185,7 @@ onMounted(() => {
     bordered
     :paging="true"
     dense
+    :rows-per-page-options="[10, 25, 50, 100]"
     class="custom-header-table"
     :visible-columns="visibleColumns"
   >
diff --git a/src/modules/14_KPI/components/competency/02ListLinkPosition.vue b/src/modules/14_KPI/components/competency/02ListLinkPosition.vue
index 9deefd0b0..dd6050cc0 100644
--- a/src/modules/14_KPI/components/competency/02ListLinkPosition.vue
+++ b/src/modules/14_KPI/components/competency/02ListLinkPosition.vue
@@ -1,11 +1,14 @@
 <script setup lang="ts">
-import { ref, onMounted } from "vue";
+import { ref, onMounted, reactive, watch } from "vue";
 import type { QTableProps } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar } from "quasar";
 
 import dialogHeader from "@/components/DialogHeader.vue";
-import type { DataOption } from "@/modules/14_KPI/interface/index/Main";
+import type {
+  DataOption,
+  NewPagination,
+} from "@/modules/14_KPI/interface/index/Main";
 import type { ResponseObject } from "@/modules/14_KPI/interface/response/KpiGroup";
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -66,13 +69,25 @@ const filterKeyword = ref<string>("");
 
 const visibleColumns = ref<string[]>(["nameGroupKPI"]);
 
+const formQuery = reactive({
+  page: 1,
+  pageSize: 10,
+  keyword: "",
+});
+const totalList = ref<number>(1); //จำนวนข้อมูลรายการ
+
 /** ดึงข้อมูล */
 async function fetchData() {
   showLoader();
   await http
-    .get(config.API.kpiGroup)
+    .get(
+      config.API.kpiGroup +
+        `?page=${formQuery.page}&pageSize=${formQuery.pageSize}&keyword=${formQuery.keyword}`
+    )
     .then(async (res) => {
-      rows.value = res.data.result.data;
+      const data = res.data.result;
+      totalList.value = Math.ceil(res.data.result.total / formQuery.pageSize);
+      rows.value = data.data;
     })
     .catch((err) => {
       messageError($q, err);
@@ -161,6 +176,26 @@ async function onSubmit() {
   );
 }
 
+/**
+ * function updatePagination
+ * @param newPagination ข้อมูล Pagination ใหม่
+ */
+function updatePagination(newPagination: NewPagination) {
+  formQuery.page = 1;
+  formQuery.pageSize = newPagination.rowsPerPage;
+}
+function fetchNewList() {
+  formQuery.page = 1;
+  fetchData();
+}
+
+watch(
+  () => formQuery.pageSize,
+  () => {
+    fetchNewList();
+  }
+);
+
 onMounted(async () => {
   fetchData();
 });
@@ -173,7 +208,22 @@ onMounted(async () => {
     </q-btn>
     <q-space />
     <div class="row q-gutter-sm">
-      <q-input outlined dense v-model="filterKeyword" label="ค้นหา"></q-input>
+      <q-input
+        outlined
+        dense
+        v-model="formQuery.keyword"
+        label="ค้นหา"
+        @keyup.enter="fetchNewList()"
+      >
+        <template v-slot:append>
+          <q-icon v-if="formQuery.keyword == ''" name="search" />
+          <q-icon
+            v-if="formQuery.keyword !== ''"
+            name="clear"
+            class="cursor-pointer"
+            @click="(formQuery.keyword = ''), fetchNewList()"
+          /> </template
+      ></q-input>
       <q-select
         v-model="visibleColumns"
         multiple
@@ -195,14 +245,15 @@ onMounted(async () => {
     ref="table"
     :columns="columns"
     :rows="rows"
-    :filter="filterKeyword"
     row-key="id"
     flat
     bordered
     :paging="true"
     dense
     class="custom-header-table"
+    :rows-per-page-options="[10, 25, 50, 100]"
     :visible-columns="visibleColumns"
+    @update:pagination="updatePagination"
   >
     <template v-slot:header="props">
       <q-tr :props="props">
@@ -249,6 +300,19 @@ onMounted(async () => {
         </q-td>
       </q-tr>
     </template>
+    <template v-slot:pagination="scope">
+      <q-pagination
+        v-model="formQuery.page"
+        active-color="primary"
+        color="dark"
+        :max="Number(totalList)"
+        size="sm"
+        boundary-links
+        direction-links
+        :max-pages="5"
+        @update:model-value="fetchData"
+      ></q-pagination>
+    </template>
   </d-table>
 
   <q-dialog v-model="modal" persistent>
diff --git a/src/modules/14_KPI/components/competency/03ListLinkGroup.vue b/src/modules/14_KPI/components/competency/03ListLinkGroup.vue
index 822de30e7..749498430 100644
--- a/src/modules/14_KPI/components/competency/03ListLinkGroup.vue
+++ b/src/modules/14_KPI/components/competency/03ListLinkGroup.vue
@@ -174,7 +174,7 @@ function onAdd() {
   modal.value = true;
 }
 
- async function onEdit(data: any) {
+async function onEdit(data: any) {
   id.value = data;
   await getOptions();
   await getListGroup();
@@ -191,11 +191,11 @@ function getDataEdit(id: string) {
     .then((res) => {
       const data = res.data.result;
       groupName.value = {
-        id:data.groupId,
-        name:data.groupName
-      }
-      position.value = data.positions.map((i:any) => i.name);
-      competency.value = data.capacitys.map((i:any) => i.id);
+        id: data.groupId,
+        name: data.groupName,
+      };
+      position.value = data.positions.map((i: any) => i.name);
+      competency.value = data.capacitys.map((i: any) => i.id);
     })
     .finally(() => {
       hideLoader();
@@ -213,7 +213,7 @@ function onSubmit() {
   };
   dialogConfirm($q, () => {
     http[editStatus.value ? "put" : "post"](url, body)
-      .then((res) => {
+      .then(() => {
         success($q, "บันทึกสำเร็จ");
         close();
         getData();
@@ -272,18 +272,6 @@ onMounted(async () => {
 
 <template>
   <q-toolbar style="padding: 0">
-    <!-- <q-select
-      v-model="competencyType"
-      outlined
-      label="ประเภทสมรรถนะ"
-      dense
-      option-label="name"
-      option-value="id"
-      :options="competencyTypeOp"
-      style="min-width: 200px"
-      emit-value
-      map-options
-    /> -->
     <q-btn flat round color="primary" icon="add" @click="onAdd()">
       <q-tooltip> เพิ่มข้อมูล </q-tooltip>
     </q-btn>
@@ -321,6 +309,7 @@ onMounted(async () => {
     class="custom-header-table"
     :visible-columns="visibleColumns"
     :separator="'cell'"
+    :rows-per-page-options="[10, 25, 50, 100]"
   >
     <template v-slot:header="props">
       <q-tr :props="props">
@@ -332,12 +321,7 @@ onMounted(async () => {
     </template>
     <template v-slot:body="props">
       <q-tr :props="props" class="cursor-pointer">
-        <q-td
-          v-for="col in props.cols"
-          :key="col.id"
-          class="vertical-top"
-          
-        >
+        <q-td v-for="col in props.cols" :key="col.id" class="vertical-top">
           <div v-if="col.name == 'positions'">
             <div v-if="col.value.length !== 0">
               <div v-for="(pos, index) in col.value" :key="pos.id">

From c0c120100310be423c25a0648541dd869da563c6 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Tue, 23 Apr 2024 16:33:48 +0700
Subject: [PATCH 7/9] =?UTF-8?q?=E0=B8=AA=E0=B8=A1=E0=B8=A3=E0=B8=A3?=
 =?UTF-8?q?=E0=B8=96=E0=B8=99=E0=B8=B0=20=3D>=20=20Bug=20paging=20=20tab?=
 =?UTF-8?q?=20=E0=B8=81=E0=B8=A5=E0=B8=B8=E0=B9=88=E0=B8=A1=E0=B9=81?=
 =?UTF-8?q?=E0=B8=A5=E0=B8=B0=E0=B8=95=E0=B8=B3=E0=B9=81=E0=B8=AB=E0=B8=99?=
 =?UTF-8?q?=E0=B9=88=E0=B8=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../competency/02ListLinkPosition.vue         |  1 -
 .../components/competency/03ListLinkGroup.vue | 78 ++++++++++++++++---
 2 files changed, 69 insertions(+), 10 deletions(-)

diff --git a/src/modules/14_KPI/components/competency/02ListLinkPosition.vue b/src/modules/14_KPI/components/competency/02ListLinkPosition.vue
index dd6050cc0..201d2c309 100644
--- a/src/modules/14_KPI/components/competency/02ListLinkPosition.vue
+++ b/src/modules/14_KPI/components/competency/02ListLinkPosition.vue
@@ -65,7 +65,6 @@ const {
   messageError,
   success,
 } = mixin;
-const filterKeyword = ref<string>("");
 
 const visibleColumns = ref<string[]>(["nameGroupKPI"]);
 
diff --git a/src/modules/14_KPI/components/competency/03ListLinkGroup.vue b/src/modules/14_KPI/components/competency/03ListLinkGroup.vue
index 749498430..35a681e92 100644
--- a/src/modules/14_KPI/components/competency/03ListLinkGroup.vue
+++ b/src/modules/14_KPI/components/competency/03ListLinkGroup.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted } from "vue";
+import { ref, onMounted, reactive, watch } from "vue";
 import type { QTableProps } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar } from "quasar";
@@ -7,14 +7,16 @@ import { useRouter } from "vue-router";
 
 import Header from "@/components/DialogHeader.vue";
 
-import type { DataOption } from "@/modules/14_KPI/interface/index/Main";
+import type {
+  DataOption,
+  NewPagination,
+} from "@/modules/14_KPI/interface/index/Main";
 import type { ListGroup } from "@/modules/14_KPI/interface/request/Main";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
 const id = ref<string>("");
 const modal = ref<boolean>(false);
-const router = useRouter();
 const rows = ref<any>([]);
 const editStatus = ref<boolean>(false);
 const groupName = ref<any>();
@@ -96,14 +98,25 @@ const filterKeyword = ref<string>("");
 
 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
-    .get(config.API.kpiLink)
+    .get(
+      config.API.kpiLink +
+        `?page=${formQuery.page}&pageSize=${formQuery.pageSize}&keyword=${formQuery.keyword}`
+    )
     .then((res) => {
-      const data = res.data.result.data;
-      rows.value = data;
+      const data = res.data.result;
+      totalList.value = Math.ceil(res.data.result.total / formQuery.pageSize);
+      rows.value = data.data;
     })
     .finally(() => {
       hideLoader();
@@ -265,6 +278,26 @@ function filterOption(val: any, update: Function) {
   });
 }
 
+/**
+ * function updatePagination
+ * @param newPagination ข้อมูล Pagination ใหม่
+ */
+function updatePagination(newPagination: NewPagination) {
+  formQuery.page = 1;
+  formQuery.pageSize = newPagination.rowsPerPage;
+}
+function fetchNewList() {
+  formQuery.page = 1;
+  getData();
+}
+
+watch(
+  () => formQuery.pageSize,
+  () => {
+    fetchNewList();
+  }
+);
+
 onMounted(async () => {
   getData();
 });
@@ -277,7 +310,22 @@ onMounted(async () => {
     </q-btn>
     <q-space />
     <div class="row q-gutter-sm">
-      <q-input outlined dense v-model="filterKeyword" label="ค้นหา"></q-input>
+      <q-input
+        outlined
+        dense
+        v-model="formQuery.keyword"
+        label="ค้นหา"
+        @keyup.enter="fetchNewList()"
+      >
+        <template v-slot:append>
+          <q-icon v-if="formQuery.keyword == ''" name="search" />
+          <q-icon
+            v-if="formQuery.keyword !== ''"
+            name="clear"
+            class="cursor-pointer"
+            @click="(formQuery.keyword = ''), fetchNewList()"
+          /> </template
+      ></q-input>
       <q-select
         v-model="visibleColumns"
         multiple
@@ -300,16 +348,15 @@ onMounted(async () => {
     ref="table"
     :columns="columns"
     :rows="rows"
-    :filter="filterKeyword"
     row-key="id"
     flat
     bordered
-    :paging="true"
     dense
     class="custom-header-table"
     :visible-columns="visibleColumns"
     :separator="'cell'"
     :rows-per-page-options="[10, 25, 50, 100]"
+    @update:pagination="updatePagination"
   >
     <template v-slot:header="props">
       <q-tr :props="props">
@@ -374,6 +421,19 @@ onMounted(async () => {
         </q-td>
       </q-tr>
     </template>
+    <template v-slot:pagination="scope">
+      <q-pagination
+        v-model="formQuery.page"
+        active-color="primary"
+        color="dark"
+        :max="Number(totalList)"
+        size="sm"
+        boundary-links
+        direction-links
+        :max-pages="5"
+        @update:model-value="getData"
+      ></q-pagination>
+    </template>
   </d-table>
 
   <q-dialog v-model="modal" persistent>

From d4b436fb9d7c9a3b7534459b9b455c9e4b51e732 Mon Sep 17 00:00:00 2001
From: "STW_TTTY\\stwtt" <trx.setthawut@gmail.com>
Date: Tue, 23 Apr 2024 17:42:34 +0700
Subject: [PATCH 8/9] =?UTF-8?q?=E0=B8=9F=E0=B8=B4=E0=B8=A5=E0=B9=80?=
 =?UTF-8?q?=E0=B8=95=E0=B8=AD=E0=B8=A3=E0=B9=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/competency/03ListLinkGroup.vue | 122 +++++++++++++-----
 1 file changed, 88 insertions(+), 34 deletions(-)

diff --git a/src/modules/14_KPI/components/competency/03ListLinkGroup.vue b/src/modules/14_KPI/components/competency/03ListLinkGroup.vue
index 35a681e92..53ae2353d 100644
--- a/src/modules/14_KPI/components/competency/03ListLinkGroup.vue
+++ b/src/modules/14_KPI/components/competency/03ListLinkGroup.vue
@@ -23,28 +23,12 @@ const groupName = ref<any>();
 const position = ref<any>(null);
 const competency = ref<any>(null);
 
-const groupNameOp = ref<DataOption[]>([
-  {
-    id: "ID1",
-    name: "กลุ่ม 1",
-  },
-  {
-    id: "ID2",
-    name: "กลุ่ม 2",
-  },
-]);
+const groupNameOp = ref<DataOption[]>([]);
+const groupNameOpMain = ref<DataOption[]>([]);
 const positionOp = ref<DataOption[]>([]);
 const positionMainOp = ref<DataOption[]>([]);
-const competencyOp = ref<DataOption[]>([
-  {
-    id: "ID1",
-    name: "สมรรถนะ 1",
-  },
-  {
-    id: "ID2",
-    name: "สมรรถนะ 2",
-  },
-]);
+const competencyOp = ref<DataOption[]>([]);
+const competencyOpMain = ref<DataOption[]>([]);
 
 const columns = ref<QTableProps["columns"]>([
   {
@@ -143,13 +127,24 @@ async function deleteData(id: string) {
 async function getListGroup() {
   showLoader();
   await http
-    .get(config.API.kpiGroup)
+    .get(config.API.kpiGroup+`?pageSize=50`)
     .then(async (res) => {
-      const data = res.data.result.data;
-      groupNameOp.value = data.map((item: ListGroup) => ({
-        id: item.id,
-        name: item.nameGroupKPI,
-      }));
+      const dataOp = res.data.result.data;
+      const uniqueNames = new Set();
+      const filteredData = dataOp
+        .filter((item: any) => {
+          if (!uniqueNames.has(item.id)) {
+            uniqueNames.add(item.nameGroupKPI);
+            return true;
+          }
+          return false;
+        })
+        .map((item: any) => ({
+          id: item.id,
+          name: item.nameGroupKPI,
+        }));
+
+      groupNameOpMain.value = filteredData;
     })
     .catch((err) => {
       messageError($q, err);
@@ -163,13 +158,24 @@ async function getListGroup() {
 async function getCompetency() {
   showLoader();
   await http
-    .get(config.API.kpiCapacity + `?type=GROUP`)
+    .get(config.API.kpiCapacity + `?type=GROUP&pageSize=50`)
     .then(async (res) => {
-      const data = res.data.result.data;
-      competencyOp.value = data.map((item: any) => ({
-        id: item.id,
-        name: item.name,
-      }));
+      const dataOp = res.data.result.data;
+      const uniqueNames = new Set();
+      const filteredData = dataOp
+        .filter((item: any) => {
+          if (!uniqueNames.has(item.id)) {
+            uniqueNames.add(item.name);
+            return true;
+          }
+          return false;
+        })
+        .map((item: any) => ({
+          id: item.id,
+          name: item.name,
+        }));
+
+      competencyOpMain.value = filteredData;
     })
     .catch((err) => {
       messageError($q, err);
@@ -264,6 +270,20 @@ function getOptions() {
   });
 }
 
+/**
+ * function ต้นหาข้อมูลของ Option
+ * @param val ค่าที่ต้องการฟิลเตอร์
+ * @param update  อัพเดทค่า
+ * @param refData ดาต้าที่ต้องการฟิลเตอร์
+ */
+function filterOptionGroup(val: any, update: Function) {
+  update(() => {
+    groupNameOp.value = groupNameOpMain.value.filter(
+      (v: any) => v.name.indexOf(val) > -1
+    );
+  });
+}
+
 /**
  * function ต้นหาข้อมูลของ Option
  * @param val ค่าที่ต้องการฟิลเตอร์
@@ -278,6 +298,20 @@ function filterOption(val: any, update: Function) {
   });
 }
 
+/**
+ * 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
  * @param newPagination ข้อมูล Pagination ใหม่
@@ -459,7 +493,17 @@ onMounted(async () => {
                 option-label="name"
                 option-value="id"
                 :options="groupNameOp"
-              />
+                use-input
+                @filter="(inputValue:any,doneFn:Function) => filterOptionGroup(inputValue, doneFn) "
+                >
+                <template v-slot:no-option>
+                  <q-item>
+                    <q-item-section class="text-grey">
+                      ไม่มีข้อมูล
+                    </q-item-section>
+                  </q-item>
+                </template></q-select
+              >
             </div>
             <div class="col-4">
               <q-select
@@ -499,7 +543,17 @@ onMounted(async () => {
                 option-label="name"
                 option-value="id"
                 :options="competencyOp"
-              />
+                use-input
+                @filter="(inputValue:any,doneFn:Function) => filterOptionCompetency(inputValue, doneFn) "
+              >
+                <template v-slot:no-option>
+                  <q-item>
+                    <q-item-section class="text-grey">
+                      ไม่มีข้อมูล
+                    </q-item-section>
+                  </q-item>
+                </template></q-select
+              >
             </div>
           </div>
         </q-card-section>

From 0e9ed9362d82f55737fde6d4e0c49e1ba1787748 Mon Sep 17 00:00:00 2001
From: "STW_TTTY\\stwtt" <trx.setthawut@gmail.com>
Date: Tue, 23 Apr 2024 17:50:58 +0700
Subject: [PATCH 9/9] validate

---
 .../14_KPI/components/competency/03ListLinkGroup.vue     | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/src/modules/14_KPI/components/competency/03ListLinkGroup.vue b/src/modules/14_KPI/components/competency/03ListLinkGroup.vue
index 53ae2353d..d7a927f31 100644
--- a/src/modules/14_KPI/components/competency/03ListLinkGroup.vue
+++ b/src/modules/14_KPI/components/competency/03ListLinkGroup.vue
@@ -495,6 +495,9 @@ onMounted(async () => {
                 :options="groupNameOp"
                 use-input
                 @filter="(inputValue:any,doneFn:Function) => filterOptionGroup(inputValue, doneFn) "
+                hide-bottom-space
+                lazy-rules
+                :rules="[(val:string) => !!val || `${'กรุณาเลือกกลุ่มงาน'}`,]"
                 >
                 <template v-slot:no-option>
                   <q-item>
@@ -518,6 +521,9 @@ onMounted(async () => {
                 option-label="name"
                 option-value="name"
                 :options="positionOp"
+                :rules="[(val:string) => !!val || `${'กรุณาเลือกตำแหน่ง'}`,]"
+                hide-bottom-space
+                lazy-rules
                 use-input
                 @filter="(inputValue:any,doneFn:Function) => filterOption(inputValue, doneFn) "
               >
@@ -542,6 +548,9 @@ onMounted(async () => {
                 map-options
                 option-label="name"
                 option-value="id"
+                :rules="[(val:string) => !!val || `${'กรุณาเลือกสมรรถนะประจำกลุ่ม'}`,]"
+                hide-bottom-space
+                lazy-rules
                 :options="competencyOp"
                 use-input
                 @filter="(inputValue:any,doneFn:Function) => filterOptionCompetency(inputValue, doneFn) "