updated competency

src/modules/08_KPI/components/Tab/Dialog/04_Dialog.vue

@@ -2,17 +2,19 @@
 import { ref, reactive, onMounted, watch } from "vue";
 import DialogHeader from "@/components/DialogHeader.vue";
 import type { DataOptions } from "@/modules/08_KPI/interface/index/Main";
+import { useKpiDataStore } from "@/modules/08_KPI/store";
 
 import { useCounterMixin } from "@/stores/mixin";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
+const store = useKpiDataStore();
+
 const { showLoader, hideLoader } = useCounterMixin();
 const modal = defineModel<boolean>("modal", { required: true });
 const competencyType = defineModel<string>("competencyType", {
   required: true,
 });
-const numpage = defineModel<number>("numpage", { required: true });
 const splitterModel = ref<number>(30);
 const search = ref<string>("");
 
@@ -52,35 +54,14 @@ const fieldLabels = {
   score5: "5",
 };
 
-const competencyTypeOp = ref<DataOptions[]>([
-  {
-    id: "HEAD",
-    name: "สมรรถนะหลัก",
-  },
-  {
-    id: "GROUP",
-    name: "สมรรถนะประจำกลุ่มงาน",
-  },
-  {
-    id: "EXECUTIVE",
-    name: "สมรรถนะประจำผู้บริหารกรุงเทพมหานคร",
-  },
-  {
-    id: "DIRECTOR",
-    name: "สมรรถนะเฉพาะสำหรับตำแหน่ง ผอ.เขต ผช.ผอ.เขต และหัวหน้าฝ่ายในสังกัด สนง.เขต",
-  },
-  {
-    id: "INSPECTOR",
-    name: "สมรรถนะเฉพาะสำหรับตำแหน่งผู้ตรวจราชการ กทม. และผู้ตรวจราชการ",
-  },
-]);
+const competencyTypeOp = ref<DataOptions[]>(store.competencyType);
 
 function clickList(index: number, data: any) {
   listCheck.value = index;
 
-  formDetail.type = data.type
-  formDetail.name = data.name
-  formDetail.definition = data.description
+  formDetail.type = data.type;
+  formDetail.name = data.name;
+  formDetail.definition = data.description;
   formScore.score1 = data.capacityDetails[0].description;
   formScore.score2 = data.capacityDetails[1].description;
   formScore.score3 = data.capacityDetails[2].description;
@@ -140,23 +121,6 @@ function filterTxt(val: any) {
   console.log(listTarget.value.length);
 }
 
-function statusTothai(val: string) {
-  switch (val) {
-    case "HEAD":
-      return "สมรรถนะหลัก";
-    case "GROUP":
-      return "สมรรถนะประจำกลุ่มงาน";
-    case "EXECUTIVE":
-      return "สมรรถนะประจำผู้บริหารกรุงเทพมหานคร";
-    case "DIRECTOR":
-      return "สมรรถนะเฉพาะสำหรับตำแหน่ง ผอ.เขต ผช.ผอ.เขต และหัวหน้าฝ่ายในสังกัด สนง.เขต";
-    case "INSPECTOR":
-      return "สมรรถนะเฉพาะสำหรับตำแหน่งผู้ตรวจราชการ กทม. และผู้ตรวจราชการ";
-    default:
-      return "-";
-  }
-}
-
 watch(
   () => modal.value,
   () => {
@@ -283,9 +247,18 @@ watch(
                           }}
                         </div>
                         <div class="col-8">
-                          <span v-if="field == 'type'">{{ formDetail[field] ? statusTothai(formDetail[field]) : "-" }}</span>
-                          <span v-else-if="field == 'definition'" v-html="formDetail[field]"></span>
-                          <span v-else>{{ formDetail[field] ? formDetail[field] : "-" }}</span>
+                          <span v-if="field == 'type'">{{
+                            formDetail[field]
+                              ? store.convertCompetencyType(formDetail[field])
+                              : "-"
+                          }}</span>
+                          <span
+                            v-else-if="field == 'definition'"
+                            v-html="formDetail[field]"
+                          ></span>
+                          <span v-else>{{
+                            formDetail[field] ? formDetail[field] : "-"
+                          }}</span>
                         </div>
                       </div>
                     </div>