From 23b48ea2556d8f68f4f8c6a8b64f95d56ac448e4 Mon Sep 17 00:00:00 2001
From: setthawutttty <trx.setthawut@gmail.com>
Date: Thu, 30 Jan 2025 16:03:58 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=20kpi?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/Tab/Topic/02_Competency.vue    | 73 +++++++++++++------
 1 file changed, 52 insertions(+), 21 deletions(-)

diff --git a/src/modules/08_KPI/components/Tab/Topic/02_Competency.vue b/src/modules/08_KPI/components/Tab/Topic/02_Competency.vue
index f6cca93..717d57e 100644
--- a/src/modules/08_KPI/components/Tab/Topic/02_Competency.vue
+++ b/src/modules/08_KPI/components/Tab/Topic/02_Competency.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, ref, computed } from "vue";
+import { onMounted, ref, computed, watch } from "vue";
 import { useRoute } from "vue-router";
 
 import http from "@/plugins/http";
@@ -131,9 +131,9 @@ const idList = ref<string>("");
 
 const isEditStep1 = computed(() => {
   return (
-    (store.dataEvaluation.evaluationStatus === "NEW" &&
-      store.rolePerson === "USER" &&
-      store.tabMain === "1")
+    store.dataEvaluation.evaluationStatus === "NEW" &&
+    store.rolePerson === "USER" &&
+    store.tabMain === "1"
   );
 });
 
@@ -292,27 +292,54 @@ function onLevel(num: number, list: any) {
   modalLevel.value = true;
 }
 
-onMounted(() => {
-  setTimeout(async () => {
-    competencyType.value = await (store.dataEvaluation.posTypeName ==
-      "อำนวยการ" || store.dataEvaluation.posTypeName == "บริหาร"
-      ? store.competencyType.filter(
-          (x: DataOptions) =>
-            x.id == "HEAD" ||
-            x.id == "EXECUTIVE" ||
-            x.id == "INSPECTOR" ||
-            x.id == "DIRECTOR"
-        )
-      : store.competencyType.filter(
-          (x: DataOptions) => x.id == "HEAD" || x.id == "GROUP"
-        ));
+watch(
+  () => store.dataEvaluation.posTypeName, // ตรวจจับค่า posTypeName
+  (newValue) => {
+    if (!newValue) return; // ถ้ายังไม่มีค่า ไม่ต้องทำอะไร
+
+    const competencyTypeList = [
+      {
+        id: "HEAD",
+        name: "สมรรถนะหลัก",
+      },
+      {
+        id: "GROUP",
+        name: "สมรรถนะประจำกลุ่มงาน",
+      },
+      {
+        id: "EXECUTIVE",
+        name: "สมรรถนะประจำผู้บริหารกรุงเทพมหานคร",
+      },
+      {
+        id: "DIRECTOR",
+        name: "สมรรถนะเฉพาะสำหรับตำแหน่ง ผอ.เขต ผช.ผอ.เขต และหัวหน้าฝ่ายในสังกัด สนง.เขต",
+      },
+      {
+        id: "INSPECTOR",
+        name: "สมรรถนะเฉพาะสำหรับตำแหน่งผู้ตรวจราชการ กทม. และผู้ตรวจราชการ",
+      },
+    ];
+
+    competencyType.value =
+      newValue === "อำนวยการ" || newValue === "บริหาร"
+        ? competencyTypeList.filter(
+            (x: DataOptions) =>
+              x.id === "HEAD" ||
+              x.id === "EXECUTIVE" ||
+              x.id === "INSPECTOR" ||
+              x.id === "DIRECTOR"
+          )
+        : competencyTypeList.filter(
+            (x: DataOptions) => x.id === "HEAD" || x.id === "GROUP"
+          );
 
     for (let index = 0; index < competencyType.value.length; index++) {
       const element = competencyType.value[index];
       getData(element.id);
     }
-  }, 1000);
-});
+  },
+  { immediate: true }
+);
 </script>
 
 <template>
@@ -463,7 +490,11 @@ onMounted(() => {
                     dense
                     @click="openPopupProgress(props.row.id)"
                   >
-                    <q-tooltip>{{store.tabMain == '3' ? `บันทึกเหตุการณ์/พฤติกรรม/เหตุผล` :'บันทึกเหตุการณ์/พฤติกรรม'}}</q-tooltip>
+                    <q-tooltip>{{
+                      store.tabMain == "3"
+                        ? `บันทึกเหตุการณ์/พฤติกรรม/เหตุผล`
+                        : "บันทึกเหตุการณ์/พฤติกรรม"
+                    }}</q-tooltip>
                   </q-btn>
                 </div>