แบบประเมิน => API ผลสัมฤทธิ์ของงาน

src/modules/08_KPI/components/Tab/01_Assessment.vue

@@ -1,8 +1,7 @@
 <script setup lang="ts">
-import { ref, onMounted } from "vue";
+import { ref, onMounted, computed } from "vue";
 import { useQuasar } from "quasar";
 import { useRoute } from "vue-router";
-
 import config from "@/app.config";
 import http from "@/plugins/http";
 
@@ -23,8 +22,10 @@ const rows_01 = ref<any[]>();
 const rows_02 = ref<any[]>();
 const rows_03 = ref<any[]>();
 
-const total = ref<number>(0);
-const resultWork = ref<number>(0);
+const totalResults1 = ref<number>(0);
+const totalResults2 = ref<number>(0);
+const totalResults3 = ref<number>(0);
+// const resultWork = ref<number>(0);
 const resultEvaluation = ref<number>(0);
 
 function fetchListPlanned() {
@@ -33,7 +34,16 @@ function fetchListPlanned() {
     .get(config.API.kpiAchievement("planned") + `?id=${evaluationId.value}`)
     .then((res) => {
       const data = res.data.result;
-      rows_01.value = data;
+      const newRow = data.map((e: any) => ({
+        ...e,
+        evaluationResults: (e.point / 5) * e.weight,
+      }));
+      rows_01.value = newRow;
+      const result = newRow.reduce(
+        (sum: number, e: any) => sum + e.evaluationResults,
+        0
+      );
+      totalResults1.value = (result * 80) / 100;
     })
     .catch((err) => {
       messageError($q, err);
@@ -49,7 +59,16 @@ function fetchListRole() {
     .get(config.API.kpiAchievement("role") + `?id=${evaluationId.value}`)
     .then((res) => {
       const data = res.data.result;
-      rows_02.value = data;
+      const newRow = data.map((e: any) => ({
+        ...e,
+        evaluationResults: (e.point / 5) * e.weight,
+      }));
+      rows_02.value = newRow;
+      const result = newRow.reduce(
+        (sum: number, e: any) => sum + e.evaluationResults,
+        0
+      );
+      totalResults2.value = (result * 80) / 100;
     })
     .catch((err) => {
       messageError($q, err);
@@ -60,19 +79,36 @@ function fetchListRole() {
 }
 
 function fetchAssigned() {
-  const data = [
-    {
-      includingName: "name",
-      target: "เป่า",
-      point: "12",
-      weight: "12",
-      achievement: "12",
-      evaluationResults: "12",
-    },
-  ];
-  rows_03.value = data;
+  showLoader();
+  http
+    .get(config.API.kpiAchievement("special") + `?id=${evaluationId.value}`)
+    .then((res) => {
+      const data = res.data.result;
+      const newRow = data.map((e: any) => ({
+        ...e,
+        evaluationResults: (e.point / 5) * e.weight,
+      }));
+
+      rows_03.value = newRow;
+      const result = newRow.reduce(
+        (sum: number, e: any) => sum + e.evaluationResults,
+        0
+      );
+      totalResults3.value = (result * 80) / 100;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
 }
 
+const resultWork = computed(() => {
+  const total = totalResults1.value + totalResults2.value + totalResults3.value;
+  return (total * 80) / 100;
+});
+
 onMounted(() => {
   fetchListPlanned();
   fetchListRole();
@@ -97,18 +133,21 @@ onMounted(() => {
         :title="`1. งานตามแผนปฏิบัติราชการประจำปี`"
         :page="1"
         :fetchList="fetchListPlanned"
+        :total="totalResults1"
       />
       <Work
         v-model:data="rows_02"
         :title="`2. งานตามหน้าที่ความรับผิดชอบหลัก`"
         :page="2"
         :fetchList="fetchListRole"
+        :total="totalResults2"
       />
       <Work
         v-model:data="rows_03"
         :title="`3. งานที่ได้รับมอบหมายพิเศษ`"
         :page="3"
         :fetchList="fetchAssigned"
+        :total="totalResults3"
       />
       <div class="row text-body2 text-weight-bold">
         <!-- <div class="col-6 text-center row justify-center">
@@ -117,7 +156,7 @@ onMounted(() => {
         </div> -->
 
         <div class="col-12 text-center row justify-center">
-          <span>สรุปผลการประเมินผลสัมฤทธิ์ของงาน (คะแนนเต็ม 70 คะแนน)</span>
+          <span>สรุปผลการประเมินผลสัมฤทธิ์ของงาน (คะแนนเต็ม 80 คะแนน)</span>
           <div class="text-primary q-pl-md">{{ resultWork }}</div>
         </div>
       </div>