ผูก API ในส่วนของ KPI สมรรถนะ

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

@@ -5,15 +5,40 @@ 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";
+import { useQuasar } from "quasar";
+import { useRoute } from "vue-router";
 
+import type { FormCapacityList } from "@/modules/08_KPI/interface/request/index";
+
+const route = useRoute();
+const idParam = ref<string>(route.params.id as string);
+
+const props = defineProps({
+  dataCapacity: {
+    type: Object as () => FormCapacityList,
+    required: true,
+  },
+  getDataList: Function,
+});
+
+const $q = useQuasar();
 const store = useKpiDataStore();
 const expectedLevel = ref<any>();
 
 const weight = ref<number | null>(null);
-const { showLoader, hideLoader } = useCounterMixin();
+const {
+  showLoader,
+  hideLoader,
+  dialogConfirm,
+  messageError,
+  dialogMessageNotify,
+  success,
+} = useCounterMixin();
 const modal = defineModel<boolean>("modal", { required: true });
+const idProps = defineModel<string | null>("id", { required: true });
 const competencyType = defineModel<string>("competencyType", {
   required: true,
 });
@@ -24,7 +49,7 @@ const define = ref<string>("");
 const formula = ref<string>("");
 const type = ref<string>("");
 
-const listCheck = ref<number | null>();
+const listCheck = ref<string>();
 const listTarget = ref<any>([]);
 const listTargetMain = ref<any>([]);
 
@@ -36,6 +61,7 @@ const expectedLevelOp = ref<DataOptions[]>([
   { id: "5", name: "5" },
 ]);
 const formDetail = reactive<any>({
+  id: "",
   type: "สมรรถนะหลัก",
   name: "สมรรถนะ 1",
   definition: "",
@@ -65,9 +91,15 @@ const fieldLabels = {
 
 const competencyTypeOp = ref<DataOptions[]>(store.competencyType);
 
-function clickList(index: number, data: any) {
-  listCheck.value = index;
+function clickList(index: string, data: any) {
+  formScore.score1 = "";
+  formScore.score2 = "";
+  formScore.score3 = "";
+  formScore.score4 = "";
+  formScore.score5 = "";
+  listCheck.value = index as string;
 
+  formDetail.id = data.id;
   formDetail.type = data.type;
   formDetail.name = data.name;
   formDetail.definition = data.description;
@@ -83,19 +115,20 @@ function closeDialog() {
   modal.value = false;
   type.value = "";
   search.value = "";
-  listCheck.value = null;
+  listCheck.value = "";
   formScore.score1 = "";
   formScore.score2 = "";
   formScore.score3 = "";
   formScore.score4 = "";
   formScore.score5 = "";
+  formDetail.id = "";
   formDetail.type = "";
   formDetail.name = "";
   formDetail.definition = "";
   formDetail.criteria = "";
-
-  weight.value = null
-  expectedLevel.value = null
+  idProps.value = null;
+  weight.value = null;
+  expectedLevel.value = null;
 }
 
 /** เรียกใช้ class */
@@ -103,7 +136,38 @@ function getclass() {
   return "inputgreen";
 }
 
-function onSubmit() {}
+function onSubmit() {
+  if (formDetail.id == "") {
+    dialogMessageNotify($q, "กรุณาเลือกสมรรถนะ");
+  } else {
+    dialogConfirm($q, () => {
+      const url = idProps.value
+        ? config.API.kpiUserCapacity + `/${idProps.value}`
+        : config.API.kpiUserCapacity;
+      const body = {
+        kpiUserEvaluationId: idParam.value,
+        kpiCapacityId: formDetail.id,
+        level: expectedLevel.value.toString(),
+        weight: weight.value,
+        point: 0,
+        summary: 0,
+      };
+      showLoader();
+      http[idProps.value ? `put` : `post`](url, body)
+        .then((res) => {
+          success($q, "บันทึกข้อมูลสำเร็จ");
+          closeDialog();
+          props.getDataList?.();
+        })
+        .catch((e) => {
+          messageError($q, e);
+        })
+        .finally(() => {
+          hideLoader();
+        });
+    });
+  }
+}
 
 function getData() {
   showLoader();
@@ -111,7 +175,6 @@ function getData() {
     .get(config.API.KpiCapacity + `?type=${type.value}`)
     .then((res) => {
       const data = res.data.result.data;
-      console.log(data);
       listTarget.value = data;
       listTargetMain.value = data;
       formScore.score1 = data.capacityDetails[0].description;
@@ -126,27 +189,56 @@ function getData() {
 }
 
 function filterTxt(val: any) {
-  console.log(val);
   listTarget.value = listTargetMain.value.filter(
     (v: any) => v.name.indexOf(val) > -1
   );
-  console.log(listTarget.value.length);
 }
 
+function getDataById() {
+  http
+    .get(config.API.kpiUserCapacity + `/${idProps.value}`)
+    .then((res) => {
+      const list = listTargetMain.value;
+      const data = res.data.result;
+      const target = list.find((item: any) => item.name == data.name);
+      listCheck.value = data.name as string;
+      formDetail.name = data.name;
+
+      weight.value = data.weight;
+      expectedLevel.value = data.level;
+
+      formDetail.id = target.id;
+      formDetail.type = target.type;
+      formDetail.name = target.name;
+      formDetail.definition = target.description;
+      formScore.score1 = target.capacityDetails[0].description;
+      formScore.score2 = target.capacityDetails[1].description;
+      formScore.score3 = target.capacityDetails[2].description;
+      formScore.score4 = target.capacityDetails[3].description;
+      formScore.score5 = target.capacityDetails[4].description;
+    })
+    .catch((e) => {})
+    .finally(() => {});
+}
 watch(
   () => modal.value,
   () => {
     if (modal.value == true) {
       type.value = competencyType.value;
-      if(type.value == 'HEAD'){
-        expectedLevel.value = store.defaultCompetencyCoreLevel
-      }
-      else if(type.value == 'GROUP'){
-        expectedLevel.value = store.defaultCompetencyGroupLevel
-      }else{
-        expectedLevel.value = null
-      }
       getData();
+      if (idProps.value) {
+        setTimeout(() => {
+          getDataById();
+        }, 100);
+      } else {
+        if (type.value == "HEAD") {
+          expectedLevel.value = store.defaultCompetencyCoreLevel;
+        } else if (type.value == "GROUP") {
+          expectedLevel.value = store.defaultCompetencyGroupLevel;
+        } else {
+          expectedLevel.value = null;
+        }
+      }
     }
   }
 );
@@ -215,12 +307,12 @@ watch(
                         <q-list separator dense>
                           <q-item
                             v-for="(item, index) in listTarget"
-                            :key="index"
+                            :key="item.name"
                             clickable
                             v-ripple
-                            :active="listCheck === index"
+                            :active="listCheck === item.name"
                             active-class="my-menu-link"
-                            @click="clickList(index, item)"
+                            @click="clickList(item.name, item)"
                           >
                             <q-item-section class="q-pa-none">
                               <div