แบบประเมิน => dialog ประเมิน

src/modules/08_KPI/components/Tab/Topic/01_Indicator.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, watch } from "vue";
+import { computed, ref, watch } from "vue";
 import { useQuasar } from "quasar";
 import { useRoute } from "vue-router";
 import config from "@/app.config";
@@ -114,7 +114,19 @@ const filterKeyword = ref<string>("");
 const modal = ref<boolean>(false);
 const modalAssigned = ref<boolean>(false);
 const isStatusEdit = ref<boolean>(false);
-const moalEvaluate = 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;
@@ -127,7 +139,7 @@ function onAdd(edit: boolean = false, id: string = "") {
 }
 
 function onEvaluate() {
-  moalEvaluate.value = true;
+  modalEvaluate.value = true;
 }
 
 function onDelete(id: string) {
@@ -161,6 +173,15 @@ watch(
     }
   }
 );
+
+watch(
+  () => modalEvaluate.value,
+  () => {
+    if (!modalEvaluate.value) {
+      props.fetchList?.();
+    }
+  }
+);
 </script>
 <template>
   <q-card bordered style="border-radius: 5px" class="no-shadow">
@@ -259,6 +280,12 @@ watch(
           </q-tr>
         </template>
       </q-table>
+      <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>
     </q-card-section>
   </q-card>
 
@@ -275,7 +302,11 @@ watch(
     :kpiUserPlannedId="kpiUserPlannedId"
   />
 
-  <DialogEvaluate v-model:modal="moalEvaluate" v-model:data="rows" />
+  <DialogEvaluate
+    v-model:modal="modalEvaluate"
+    :data="rows"
+    :numpage="numpage"
+  />
 </template>
 <style scoped>
 .custom-table2 {