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

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>