รายการขอรับประเมินผลการปฏิบัติราชการระดับบุคคล

src/modules/08_KPI/views/form.vue

@@ -1,18 +1,19 @@
 <script setup lang="ts">
 import { ref, onMounted, reactive } from "vue";
 import { useRoute, useRouter } from "vue-router";
-import TabMain from "@/modules/08_KPI/views/TabMain.vue";
 import http from "@/plugins/http";
 import config from "@/app.config";
+import TabMain from "@/modules/08_KPI/views/TabMain.vue";
+import { useQuasar } from "quasar";
 
 import { useCounterMixin } from "@/stores/mixin";
-import { useQuasar } from "quasar";
+import { useKpiDataStore } from "@/modules/08_KPI/store";
 
 import type { FormProfile } from "@/modules/08_KPI/interface/request/index";
 
 const route = useRoute();
-const id = route.params.id as string;
-
+const id = ref<string>(route.params.id as string);
+const store = useKpiDataStore();
 const $q = useQuasar();
 const mixin = useCounterMixin();
 const { showLoader, hideLoader, messageError } = mixin;
@@ -27,18 +28,38 @@ const formProfile = reactive<FormProfile>({
   level: "ชำนาญการพิเศษ",
   status: "จัดเตรียมข้อมูล",
   score: "100",
-  avartar:
-    "https://cdn.quasar.dev/img/boy-avatar.png",
+  avartar: "https://cdn.quasar.dev/img/boy-avatar.png",
 });
 
 const router = useRouter();
 
+function fetchEvaluation() {
+  showLoader();
+  http
+    .get(config.API.kpiEvaluation + `/${id.value}`)
+    .then((res) => {
+      const data = res.data.result;
+      store.dataEvaluation = data;
+      console.log(data);
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
 function getProfile() {
   showLoader();
   http
-    .get(config.API.profileBykeycloak())
+    .get(config.API.profilePosition())
     .then((res) => {
       const data = res.data.result;
+      store.dataProfile = data;
+      console.log(data);
+
+      formProfile.fullName = `${data.prefix}${data.firstName} ${data.lastName}`;
     })
     .catch((e) => {
       messageError($q, e);
@@ -52,6 +73,7 @@ function getProfile() {
 function onSave() {}
 
 onMounted(() => {
+  fetchEvaluation();
   getProfile();
 });
 </script>
@@ -77,18 +99,18 @@ onMounted(() => {
         >
       </div>
       <div class="col-12">
-        <q-card bordered flat class="relative-position"> 
+        <q-card bordered flat class="relative-position">
           <div
-              class="absolute"
-              style="left: 2%; top: 50%; transform: translateY(-50%)"
-            >
-              <q-avatar size="95px">
-                <q-img :src="formProfile.avartar" />
-              </q-avatar>
-            </div>
+            class="absolute"
+            style="left: 2%; top: 50%; transform: translateY(-50%)"
+          >
+            <q-avatar size="95px">
+              <q-img :src="formProfile.avartar" />
+            </q-avatar>
+          </div>
           <div class="row col-12">
             <div class="row items-center col-12 q-pa-sm">
-              <div class="col-12" style="padding-left: 12%;">
+              <div class="col-12" style="padding-left: 12%">
                 <div class="row col-12 items-center">
                   <span class="text-h6 text-weight-medium text-primary">{{
                     formProfile.fullName ? formProfile.fullName : "-"
@@ -119,10 +141,9 @@ onMounted(() => {
                 </div>
               </div>
             </div>
-           
 
             <div class="row items-center bg-toolbar col-12 q-pa-sm">
-              <div class="col-12 q-py-xs" style="padding-left: 12%;">
+              <div class="col-12 q-py-xs" style="padding-left: 12%">
                 <div class="row no-wrap">
                   <div class="col-2">
                     <div class="column">
@@ -178,8 +199,7 @@ onMounted(() => {
   </div>
 </template>
 <style>
-.bg-toolbar{
-  background-color: #F2FBFA;
+.bg-toolbar {
+  background-color: #f2fbfa;
 }
-
 </style>