From a050534d1ab9b1eea6b69a492c9f7d383620bf88 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Wed, 24 Apr 2024 15:00:53 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B9=81=E0=B8=9A=E0=B8=9A=E0=B8=9B=E0=B8=A3?=
 =?UTF-8?q?=E0=B8=B0=E0=B9=80=E0=B8=A1=E0=B8=B4=E0=B8=99=20=3D>=20API=20?=
 =?UTF-8?q?=20=E0=B8=9C=E0=B8=A5=E0=B8=AA=E0=B8=B1=E0=B8=A1=E0=B8=A4?=
 =?UTF-8?q?=E0=B8=97=E0=B8=98=E0=B8=B4=E0=B9=8C=E0=B8=82=E0=B8=AD=E0=B8=87?=
 =?UTF-8?q?=E0=B8=87=E0=B8=B2=E0=B8=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/KPI/api.kpis.ts                       |   3 +-
 .../08_KPI/components/Tab/01_Assessment.vue   |  75 +++++++++---
 .../Tab/Dialog/03_FormIndicatorSpecial.vue    | 112 ++++++++++++++----
 .../Tab/DialogEvaluate/01_Indicator.vue       |  36 +++++-
 .../components/Tab/Topic/01_Indicator.vue     |  71 ++++++++---
 src/modules/08_KPI/interface/request/index.ts |  25 ++--
 6 files changed, 245 insertions(+), 77 deletions(-)

diff --git a/src/api/KPI/api.kpis.ts b/src/api/KPI/api.kpis.ts
index cbc3145..2f81b29 100644
--- a/src/api/KPI/api.kpis.ts
+++ b/src/api/KPI/api.kpis.ts
@@ -19,11 +19,12 @@ export default {
   file: KpiFile,
 
   kpiAchievement: (type: string) => `${kpiAchievement}/${type}`,
+  kpiAchievementPoint: (type: string) => `${kpiAchievement}/${type}/point`,
 
   /** ผลสัมฤทธิ์ของงาน*/
 
   fileByFile: (name: string, group: string, id: string, fileName: string) =>
     `${url}/file/${name}/${group}/${id}/${fileName}`,
 
-  kpiUserCapacity:`${KpiUser}/capacity`
+  kpiUserCapacity: `${KpiUser}/capacity`,
 };
diff --git a/src/modules/08_KPI/components/Tab/01_Assessment.vue b/src/modules/08_KPI/components/Tab/01_Assessment.vue
index 752c98d..09af504 100644
--- a/src/modules/08_KPI/components/Tab/01_Assessment.vue
+++ b/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>
diff --git a/src/modules/08_KPI/components/Tab/Dialog/03_FormIndicatorSpecial.vue b/src/modules/08_KPI/components/Tab/Dialog/03_FormIndicatorSpecial.vue
index 9883de6..9d103c4 100644
--- a/src/modules/08_KPI/components/Tab/Dialog/03_FormIndicatorSpecial.vue
+++ b/src/modules/08_KPI/components/Tab/Dialog/03_FormIndicatorSpecial.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, reactive } from "vue";
+import { ref, reactive, watch } from "vue";
 import { useQuasar } from "quasar";
 import config from "@/app.config";
 import http from "@/plugins/http";
@@ -8,8 +8,12 @@ import type { FormDataAssigned } from "@/modules/08_KPI/interface/request/index"
 
 import DialogHeader from "@/components/DialogHeader.vue";
 
+import { useKpiDataStore } from "@/modules/08_KPI/store";
 import { useCounterMixin } from "@/stores/mixin";
+
 const $q = useQuasar();
+const store = useKpiDataStore();
+
 const {
   showLoader,
   hideLoader,
@@ -27,54 +31,98 @@ const kpiUserPlannedId = defineModel<string>("kpiUserPlannedId", {
 
 const formData = reactive<FormDataAssigned>({
   including: "", //รหัสตัวชี้วัด
-  indicator: "", //ชื่อตัวชี้วัด
+  includingName: "", //ชื่อตัวชี้วัด
   target: "", //ค่าเป้าหมาย
-  unit: "", //หน่วยนับ
-  weigth: "", //น้ำหนัก (ร้อยละ)
-  definition: "", //นิยามหรือความหมายของตัวชี้วัด
+  unit: null, //หน่วยนับ
+  weight: null, //น้ำหนัก (ร้อยละ)
+  meaning: "", //นิยามหรือความหมายของตัวชี้วัด
   formula: "", //สูตรคำนวณ
   achievement1: "", // ผลสำเร็จของงาน1
   achievement2: "", // ผลสำเร็จของงาน2
   achievement3: "", // ผลสำเร็จของงาน3
   achievement4: "", // ผลสำเร็จของงาน4
   achievement5: "", // ผลสำเร็จของงาน5
+  kpiUserEvaluationId: "",
 });
+
+function fetchspecialByid(id: string) {
+  showLoader();
+  http
+    .get(config.API.kpiAchievement("special") + `/${id}`)
+    .then((res) => {
+      const data = res.data.result;
+      console.log(data);
+
+      formData.including = data.including;
+      formData.includingName = data.includingName;
+      formData.target = data.target;
+      formData.unit = data.unit;
+      formData.achievement1 = data.achievement1;
+      formData.achievement2 = data.achievement2;
+      formData.achievement3 = data.achievement3;
+      formData.achievement4 = data.achievement4;
+      formData.achievement5 = data.achievement5;
+      formData.weight = data.weight;
+      formData.formula = data.formula;
+      formData.meaning = data.meaning;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
 /** ปิด dialog */
 function closeDialog() {
   modal.value = false;
   formData.including = "";
-  formData.indicator = "";
+  formData.includingName = "";
   formData.target = "";
-  formData.unit = "";
+  formData.unit = null;
   formData.achievement1 = "";
   formData.achievement2 = "";
   formData.achievement3 = "";
   formData.achievement4 = "";
   formData.achievement5 = "";
-  formData.weigth = "";
-  formData.definition = "";
+  formData.weight = null;
+  formData.meaning = "";
+  formData.formula = "";
 }
 
 function onSubmit() {
   dialogConfirm($q, async () => {
-    console.log(formData);
+    showLoader();
+    formData.weight = Number(formData.weight);
+    formData.unit = Number(formData.unit);
+    formData.kpiUserEvaluationId = store.dataEvaluation.id;
 
-    // try {
-    //   const url = isStatusEdit.value
-    //     ? config.API.kpiAchievement("planned") + `/${kpiUserPlannedId.value}`
-    //     : config.API.kpiAchievement("planned");
+    try {
+      const url = isStatusEdit.value
+        ? config.API.kpiAchievement("special") + `/${kpiUserPlannedId.value}`
+        : config.API.kpiAchievement("special");
 
-    //   const method = isStatusEdit.value ? "put" : "post";
-    //   await http[method](url, formData);
-    //   success($q, "บันทึกข้อมูลสำเร็จ");
-    // } catch (err) {
-    //   messageError($q, err);
-    // } finally {
-    // hideLoader();
-    closeDialog();
-    // }
+      const method = isStatusEdit.value ? "put" : "post";
+      await http[method](url, formData);
+      success($q, "บันทึกข้อมูลสำเร็จ");
+    } catch (err) {
+      messageError($q, err);
+    } finally {
+      hideLoader();
+      closeDialog();
+    }
   });
 }
+
+watch(
+  () => modal.value,
+  () => {
+    if (modal.value) {
+      isStatusEdit.value && fetchspecialByid(kpiUserPlannedId.value);
+    }
+  }
+);
 </script>
 <template>
   <q-dialog v-model="modal" persistent>
@@ -98,17 +146,19 @@ function onSubmit() {
                 class="inputgreen"
                 :rules="[(val) => !!val || `${'กรุณากรอกรหัสตัวชี้วัด'}`]"
                 hide-bottom-space
+                lazy-rules
               />
             </div>
             <div class="col-10">
               <q-input
-                v-model="formData.indicator"
+                v-model="formData.includingName"
                 label="ชื่อตัวชี้วัด"
                 outlined
                 dense
                 :rules="[(val:string) => !!val || `${'กรุณากรอกชื่อตัวชี้วัด'}`,]"
                 hide-bottom-space
                 class="inputgreen"
+                lazy-rules
               />
             </div>
             <div class="col-4">
@@ -120,6 +170,7 @@ function onSubmit() {
                 :rules="[(val:string) => !!val || `${'กรุณากรอกค่าเป้าหมาย'}`,]"
                 hide-bottom-space
                 class="inputgreen"
+                lazy-rules
               />
             </div>
             <div class="col-4">
@@ -133,11 +184,12 @@ function onSubmit() {
                 class="inputgreen"
                 mask="#"
                 reverse-fill-mask
+                lazy-rules
               />
             </div>
             <div class="col-4">
               <q-input
-                v-model="formData.weigth"
+                v-model="formData.weight"
                 label="น้ำหนัก (ร้อยละ)"
                 outlined
                 dense
@@ -146,6 +198,7 @@ function onSubmit() {
                 class="inputgreen"
                 mask="#"
                 reverse-fill-mask
+                lazy-rules
               />
             </div>
             <div class="col-12">
@@ -174,6 +227,7 @@ function onSubmit() {
                         (val) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`,
                       ]"
                       hide-bottom-space
+                      lazy-rules
                     />
                   </div>
                 </div>
@@ -193,6 +247,7 @@ function onSubmit() {
                         (val) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`,
                       ]"
                       hide-bottom-space
+                      lazy-rules
                     />
                   </div>
                 </div>
@@ -212,6 +267,7 @@ function onSubmit() {
                         (val) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`,
                       ]"
                       hide-bottom-space
+                      lazy-rules
                     />
                   </div>
                 </div>
@@ -231,6 +287,7 @@ function onSubmit() {
                         (val) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`,
                       ]"
                       hide-bottom-space
+                      lazy-rules
                     />
                   </div>
                 </div>
@@ -250,6 +307,7 @@ function onSubmit() {
                         (val) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`,
                       ]"
                       hide-bottom-space
+                      lazy-rules
                     />
                   </div>
                 </div>
@@ -257,7 +315,7 @@ function onSubmit() {
             </div>
             <div class="col-12">
               <q-input
-                v-model="formData.definition"
+                v-model="formData.meaning"
                 label="นิยามหรือความหมายของตัวชี้วัด"
                 outlined
                 dense
@@ -265,6 +323,7 @@ function onSubmit() {
                 :rules="[(val:string) => !!val || `${'กรุณากรอกนิยามหรือความหมายของตัวชี้วัด'}`,]"
                 hide-bottom-space
                 class="inputgreen"
+                lazy-rules
               />
             </div>
             <div class="col-12">
@@ -278,6 +337,7 @@ function onSubmit() {
                 class="inputgreen"
                 :rules="[(val) => !!val || `${'กรุณากรอกสูตรคำนวณ'}`]"
                 hide-bottom-space
+                lazy-rules
               />
             </div>
           </div>
diff --git a/src/modules/08_KPI/components/Tab/DialogEvaluate/01_Indicator.vue b/src/modules/08_KPI/components/Tab/DialogEvaluate/01_Indicator.vue
index cecab15..5adce97 100644
--- a/src/modules/08_KPI/components/Tab/DialogEvaluate/01_Indicator.vue
+++ b/src/modules/08_KPI/components/Tab/DialogEvaluate/01_Indicator.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { ref, watch } from "vue";
 import { useQuasar } from "quasar";
+import config from "@/app.config";
+import http from "@/plugins/http";
 
 import DialogHeader from "@/components/DialogHeader.vue";
 
@@ -127,8 +129,30 @@ function updateAchievement(index: number, data: any) {
 }
 
 function onSubmit() {
-  dialogConfirm($q, () => {
-    closeDialog();
+  dialogConfirm($q, async () => {
+    try {
+      showLoader();
+      const formData = rows.value.map((e: any) => ({
+        id: e.id,
+        point: e.point,
+      }));
+
+      const url =
+        numpage.value === 1
+          ? config.API.kpiAchievementPoint("planned")
+          : numpage.value === 2
+          ? config.API.kpiAchievementPoint("role")
+          : numpage.value === 3
+          ? config.API.kpiAchievementPoint("special")
+          : "";
+      await http.post(url, formData);
+      success($q, "บันทึกข้อมูลสำเร็จ");
+    } catch (err) {
+      messageError($q, err);
+    } finally {
+      hideLoader();
+      closeDialog();
+    }
   });
   console.log(rows.value);
 }
@@ -198,7 +222,13 @@ function onSubmit() {
                     {{ props.row.achievement }}
                   </div>
                   <div v-else-if="col.name === 'evaluationResults'">
-                    {{ (props.row.point / 5) * props.row.weight }}
+                    {{
+                      parseFloat(
+                        Number(
+                          (props.row.point / 5) * props.row.weight
+                        ).toFixed(2)
+                      )
+                    }}
                   </div>
                   <div v-else>
                     {{ col.value ? col.value : "-" }}
diff --git a/src/modules/08_KPI/components/Tab/Topic/01_Indicator.vue b/src/modules/08_KPI/components/Tab/Topic/01_Indicator.vue
index d91e262..0e6bb9f 100644
--- a/src/modules/08_KPI/components/Tab/Topic/01_Indicator.vue
+++ b/src/modules/08_KPI/components/Tab/Topic/01_Indicator.vue
@@ -12,8 +12,10 @@ import Dialog03 from "@/modules/08_KPI/components/Tab/Dialog/03_FormIndicatorSpe
 import DialogEvaluate from "@/modules/08_KPI/components/Tab/DialogEvaluate/01_Indicator.vue";
 
 import { useCounterMixin } from "@/stores/mixin";
+import { useKpiDataStore } from "@/modules/08_KPI/store";
 
 const $q = useQuasar();
+const store = useKpiDataStore();
 const route = useRoute();
 const {
   date2Thai,
@@ -27,6 +29,7 @@ const {
 const title = defineModel<string>("title", { required: true });
 const rows = defineModel<any>("data", { required: true });
 const numpage = defineModel<number>("page", { required: true });
+const evaluationTotal = defineModel<number>("total", { required: true });
 
 const props = defineProps({
   fetchList: { type: Function, required: true },
@@ -115,18 +118,6 @@ const modal = ref<boolean>(false);
 const modalAssigned = ref<boolean>(false);
 const isStatusEdit = ref<boolean>(false);
 const modalEvaluate = ref<boolean>(false);
-const evaluationTotal = ref<number>(0);
-
-// const evaluationTotal = computed(() => {
-//   if (rows.value) {
-//     const test = rows.value.reduce(
-//       (sumAge: number, e: any) => sumAge + e.point
-//     );
-//     console.log(test);
-
-//     return test;
-//   }
-// });
 
 function onAdd(edit: boolean = false, id: string = "") {
   isStatusEdit.value = edit;
@@ -152,7 +143,7 @@ function onDelete(id: string) {
           : numpage.value === 2
           ? config.API.kpiAchievement("role") + `/${id}`
           : numpage.value === 3
-          ? config.API.kpiAchievement("role") + `/${id}`
+          ? config.API.kpiAchievement("special") + `/${id}`
           : "";
       await http.delete(url);
       props.fetchList?.();
@@ -174,6 +165,15 @@ watch(
   }
 );
 
+watch(
+  () => modalAssigned.value,
+  () => {
+    if (!modalAssigned.value) {
+      props.fetchList?.();
+    }
+  }
+);
+
 watch(
   () => modalEvaluate.value,
   () => {
@@ -245,8 +245,39 @@ watch(
         <template v-slot:body="props">
           <q-tr :props="props" class="cursor-pointer">
             <q-td v-for="col in props.cols" :key="col.id">
-              <div v-if="col.name == 'createDate'">
-                {{ col.value ? date2Thai(col.value) : "-" }}
+              <div v-if="col.name === 'point'">
+                <q-rating
+                  v-model="props.row.point"
+                  max="5"
+                  size="sm"
+                  color="grey"
+                  :color-selected="store.ratingColors"
+                  label="ระดับการประเมินพฤติกรรม"
+                  disable
+                >
+                  <template v-slot:tip-1>
+                    <q-tooltip>{{ props.row.achievement1 }}</q-tooltip>
+                  </template>
+                  <template v-slot:tip-2>
+                    <q-tooltip>{{ props.row.achievement2 }}</q-tooltip>
+                  </template>
+                  <template v-slot:tip-3>
+                    <q-tooltip>{{ props.row.achievement3 }}</q-tooltip>
+                  </template>
+                  <template v-slot:tip-4>
+                    <q-tooltip>{{ props.row.achievement4 }}</q-tooltip>
+                  </template>
+                  <template v-slot:tip-5>
+                    <q-tooltip>{{ props.row.achievement5 }}</q-tooltip>
+                  </template>
+                </q-rating>
+              </div>
+              <div v-else-if="col.name === 'evaluationResults'">
+                {{
+                  parseFloat(
+                    Number((props.row.point / 5) * props.row.weight).toFixed(2)
+                  )
+                }}
               </div>
               <div v-else>
                 {{ col.value ? col.value : "-" }}
@@ -279,13 +310,19 @@ watch(
             </td>
           </q-tr>
         </template>
+        <template v-slot:bottom>
+          <span class="text-body2 text-weight-bold"
+            >รวมผลการประเมิน (ร้อยละ)</span
+          >
+          <div class="text-primary q-pl-md">{{ evaluationTotal }}</div>
+        </template>
       </q-table>
-      <div class="row text-body2 text-weight-bold q-pa-md">
+      <!-- <div class="row text-body2 text-weight-bold q-pa-md">
         <div class="col-12 text-center row justify-center">
           <span>รวมผลการประเมิน (ร้อยละ)</span>
           <div class="text-primary q-pl-md">{{ evaluationTotal }}</div>
         </div>
-      </div>
+      </div> -->
     </q-card-section>
   </q-card>
 
diff --git a/src/modules/08_KPI/interface/request/index.ts b/src/modules/08_KPI/interface/request/index.ts
index 3b50fa4..f4f89bc 100644
--- a/src/modules/08_KPI/interface/request/index.ts
+++ b/src/modules/08_KPI/interface/request/index.ts
@@ -13,26 +13,27 @@ interface FormProfile {
 
 interface FormDataAssigned {
   including: string;
-  indicator: string;
+  includingName: string;
   target: string;
-  unit: string;
-  weigth: string;
+  unit: number | null;
+  weight: number | null;
   achievement1: string;
   achievement2: string;
   achievement3: string;
   achievement4: string;
   achievement5: string;
-  definition: string;
+  meaning: string;
   formula: string;
+  kpiUserEvaluationId: string;
 }
 
-interface FormCapacityList{
-  id:string|null
-  name:string
-  level:string
-  point:number
-  weight:number
-  summary:number
+interface FormCapacityList {
+  id: string | null;
+  name: string;
+  level: string;
+  point: number;
+  weight: number;
+  summary: number;
 }
 
-export type { FormProfile, FormDataAssigned,FormCapacityList };
+export type { FormProfile, FormDataAssigned, FormCapacityList };