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

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

@@ -111,12 +111,12 @@ onMounted(() => {
         :fetchList="fetchAssigned"
       />
       <div class="row text-body2 text-weight-bold">
-        <div class="col-6 text-center row justify-center">
+        <!-- <div class="col-6 text-center row justify-center">
           <span>รวมผลการประเมิน (ร้อยละ) 100</span>
           <div class="text-primary q-pl-md">{{ total }}</div>
-        </div>
+        </div> -->
 
-        <div class="col-6 text-center row justify-center">
+        <div class="col-12 text-center row justify-center">
           <span>สรุปผลการประเมินผลสัมฤทธิ์ของงาน (คะแนนเต็ม 70 คะแนน)</span>
           <div class="text-primary q-pl-md">{{ resultWork }}</div>
         </div>

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

@@ -1,16 +1,28 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, watch } from "vue";
+import { useQuasar } from "quasar";
 
 import DialogHeader from "@/components/DialogHeader.vue";
 
-import { useKpiDataStore } from "@/modules/08_KPI/store";
-
 import type { QTableProps } from "quasar";
 
+import { useKpiDataStore } from "@/modules/08_KPI/store";
+import { useCounterMixin } from "@/stores/mixin";
+
+const $q = useQuasar();
 const store = useKpiDataStore();
+const {
+  showLoader,
+  hideLoader,
+  messageError,
+  dialogConfirm,
+  dialogMessageNotify,
+  success,
+} = useCounterMixin();
 
 const modal = defineModel<boolean>("modal", { required: true });
 const rows = defineModel<any>("data", { required: true });
+const numpage = defineModel<number>("numpage", { required: true });
 
 /** table*/
 const columns = ref<QTableProps["columns"]>([
@@ -90,18 +102,44 @@ const visibleColumns = ref<string[]>([
   "evaluationResults",
 ]);
 
-const answer3 = ref<number>(0);
-
 function closeDialog() {
   modal.value = false;
 }
+
+function updateAchievement(index: number, data: any) {
+  switch (data.point) {
+    case 1:
+      rows.value[index].achievement = data.achievement1;
+      break;
+    case 2:
+      rows.value[index].achievement = data.achievement2;
+      break;
+    case 3:
+      rows.value[index].achievement = data.achievement3;
+      break;
+    case 4:
+      rows.value[index].achievement = data.achievement4;
+      break;
+    case 5:
+      rows.value[index].achievement = data.achievement5;
+      break;
+  }
+}
+
+function onSubmit() {
+  dialogConfirm($q, () => {
+    closeDialog();
+  });
+  console.log(rows.value);
+}
 </script>
 <template>
   <q-dialog v-model="modal" persistent>
     <q-card style="width: 1200px; max-width: 80vw">
       <DialogHeader :tittle="'ประเมิน'" :close="closeDialog" />
+
       <q-separator />
-      <q-card-section class="q-pt-none">
+      <q-card-section>
         <div class="col-12 q-pa-sm">
           <q-table
             ref="table"
@@ -122,7 +160,6 @@ function closeDialog() {
                 <q-th v-for="col in props.cols" :key="col.name" :props="props">
                   <span class="text-weight-medium">{{ col.label }}</span>
                 </q-th>
-                <q-th auto-width />
               </q-tr>
             </template>
             <template v-slot:body="props">
@@ -136,24 +173,33 @@ function closeDialog() {
                       color="grey"
                       :color-selected="store.ratingColors"
                       label="ระดับการประเมินพฤติกรรม"
+                      @update:model-value="
+                        updateAchievement(props.rowIndex, props.row)
+                      "
                     >
                       <template v-slot:tip-1>
-                        <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
+                        <q-tooltip>{{ props.row.achievement1 }}</q-tooltip>
                       </template>
                       <template v-slot:tip-2>
-                        <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
+                        <q-tooltip>{{ props.row.achievement2 }}</q-tooltip>
                       </template>
                       <template v-slot:tip-3>
-                        <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
+                        <q-tooltip>{{ props.row.achievement3 }}</q-tooltip>
                       </template>
                       <template v-slot:tip-4>
-                        <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
+                        <q-tooltip>{{ props.row.achievement4 }}</q-tooltip>
                       </template>
                       <template v-slot:tip-5>
-                        <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
+                        <q-tooltip>{{ props.row.achievement5 }}</q-tooltip>
                       </template>
                     </q-rating>
                   </div>
+                  <div v-else-if="col.name === 'achievement'">
+                    {{ props.row.achievement }}
+                  </div>
+                  <div v-else-if="col.name === 'evaluationResults'">
+                    {{ (props.row.point / 5) * props.row.weight }}
+                  </div>
                   <div v-else>
                     {{ col.value ? col.value : "-" }}
                   </div>
@@ -163,6 +209,12 @@ function closeDialog() {
           </q-table>
         </div>
       </q-card-section>
+      <q-separator />
+      <q-card-actions align="right">
+        <q-btn label="บันทึก" color="secondary" @click="onSubmit"
+          ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
+        >
+      </q-card-actions>
     </q-card>
   </q-dialog>
 </template>

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 {