แก้ load ระบบ kpi

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

@@ -16,13 +16,20 @@ import { useKpiDataStore } from "@/modules/08_KPI/store";
 
 import type { ListCriteria } from "@/modules/08_KPI/interface/request/index";
 
-const score = defineModel("score", { type: Number, default: 0 });
+const indicatorScore = defineModel("indicatorScore", {
+  type: Number,
+  default: 0,
+});
+const competencyScore = defineModel("competencyScore", {
+  type: Number,
+  default: 0,
+});
 const dataListCriteria = ref<ListCriteria[]>([]);
 
 const modalCriteria = ref<boolean>(false);
 const $q = useQuasar();
 const route = useRoute();
-const { showLoader, hideLoader, messageError } = useCounterMixin();
+const { hideLoader, messageError } = useCounterMixin();
 const store = useKpiDataStore();
 
 const evaluationId = ref<string>(route.params.id.toString());
@@ -37,7 +44,6 @@ const totalResults3 = ref<number>(0);
 // const resultWork = ref<number>(0);
 
 function fetchListPlanned() {
-  showLoader();
   http
     .get(config.API.kpiAchievement("planned") + `?id=${evaluationId.value}`)
     .then((res) => {
@@ -64,14 +70,10 @@ function fetchListPlanned() {
     })
     .catch((err) => {
       messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
     });
 }
 
 function fetchListRole() {
-  showLoader();
   http
     .get(config.API.kpiAchievement("role") + `?id=${evaluationId.value}`)
     .then((res) => {
@@ -98,14 +100,10 @@ function fetchListRole() {
     })
     .catch((err) => {
       messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
     });
 }
 
 function fetchAssigned() {
-  showLoader();
   http
     .get(config.API.kpiAchievement("special") + `?id=${evaluationId.value}`)
     .then((res) => {
@@ -133,9 +131,6 @@ function fetchAssigned() {
     })
     .catch((err) => {
       messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
     });
 }
 
@@ -143,10 +138,9 @@ function onInfo() {
   modalCriteria.value = true;
 }
 
-const totalCompetency = ref<number>(0);
 const resultWork = computed(() => {
   const total = totalResults1.value + totalResults2.value + totalResults3.value;
-  score.value = total;
+  indicatorScore.value = total;
   return total.toFixed(2);
 });
 
@@ -159,25 +153,9 @@ function getCriteria() {
     })
     .catch((e) => {
       messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
     });
 }
 
-watch(
-  () => totalCompetency.value,
-  (newValue, oldValue) => {
-    if (newValue !== oldValue) {
-      score.value =
-        totalResults1.value +
-        totalResults2.value +
-        totalResults3.value +
-        newValue;
-    }
-  }
-);
-
 watch(
   () => store.dataEvaluation.plannedPoint,
   (newValue, oldValue) => {
@@ -210,6 +188,9 @@ onMounted(() => {
   fetchListPlanned();
   fetchListRole();
   fetchAssigned();
+  setTimeout(() => {
+    hideLoader();
+  }, 1000);
 });
 </script>
 
@@ -286,7 +267,7 @@ onMounted(() => {
 
       <Competency
         v-model:dataListCriteria="dataListCriteria"
-        v-model:total-competency="totalCompetency"
+        v-model:competencyScore="competencyScore"
       />
     </div>
   </q-scroll-area>

src/modules/08_KPI/components/Tab/TabMain.vue

@@ -12,8 +12,14 @@ import File from "@/modules/08_KPI/components/Tab/05_File.vue";
 const store = useKpiDataStore();
 const route = useRoute();
 const isReadonly = <boolean>(route.name === "KPIEditEvaluator" ? true : false);
-const score = defineModel("score", { type: Number, default: 0 });
-
+const indicatorScore = defineModel("indicatorScore", {
+  type: Number,
+  default: 0,
+});
+const competencyScore = defineModel("competencyScore", {
+  type: Number,
+  default: 0,
+});
 const itemsTab = ref<any>([
   {
     name: "1",
@@ -84,7 +90,11 @@ const splitterModel = ref<number>(12);
           :name="tab.name"
           class="q-pa-none"
         >
-          <Assessment v-if="store.tabMain === '1'" v-model:score="score" />
+          <Assessment
+            v-if="store.tabMain === '1'"
+            v-model:indicatorScore="indicatorScore"
+            v-model:competencyScore="competencyScore"
+          />
           <Evaluator v-if="store.tabMain === '2'" :type="'evaluator'" />
           <Evaluator v-if="store.tabMain === '3'" :type="'commander'" />
           <Evaluator v-if="store.tabMain === '4'" :type="'commanderHigh'" />

src/modules/08_KPI/components/Tab/Topic/02_Competency.vue

@@ -18,7 +18,7 @@ import type {
 const dataListCriteria = defineModel<ListCriteria[]>("dataListCriteria", {
   required: true,
 });
-const totalCompetency = defineModel("totalCompetency", {
+const competencyScore = defineModel("competencyScore", {
   type: Number,
   default: 0,
 });
@@ -118,7 +118,6 @@ const lists = ref<any>([]);
 const resultEvaluation = ref<string | 0>(0);
 
 function getData(type: string) {
-  showLoader();
   http
     .get(config.API.kpiUserCapacity + `?id=${id.value}&type=${type}`)
     .then(async (res) => {
@@ -163,11 +162,8 @@ function getData(type: string) {
             ? (resultAvg / weightAvg) * store.dataEvaluation.capacityPoint
             : 0;
         resultEvaluation.value = sum.toFixed(2);
-        totalCompetency.value = sum;
+        competencyScore.value = sum;
       }
-      // end cal summary
-
-      hideLoader();
     });
 }
 

src/modules/08_KPI/views/form.vue

@@ -49,7 +49,8 @@ const commanderHighMainOp = ref<DataOptions[]>([]);
 const evaluatorId = ref<any>(null);
 const commanderId = ref<any>(null);
 const commanderHighId = ref<any>(null);
-const score = ref<number>(0);
+const indicatorScore = ref<number>(0);
+const competencyScore = ref<number>(0);
 
 const formProfile = reactive<FormProfile>({
   fullName: "",
@@ -65,7 +66,6 @@ const formProfile = reactive<FormProfile>({
 const router = useRouter();
 
 function fetchEvaluation() {
-  showLoader();
   http
     .get(config.API.kpiEvaluation + `/${id.value}`)
     .then((res) => {
@@ -83,14 +83,13 @@ function fetchEvaluation() {
     })
     .catch((e) => {
       messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
     });
+  // .finally(() => {
+  //   hideLoader();
+  // });
 }
 
 function getProfile() {
-  showLoader();
   http
     .get(config.API.profilePosition())
     .then((res) => {
@@ -106,14 +105,13 @@ function getProfile() {
     })
     .catch((e) => {
       messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
     });
+  // .finally(() => {
+  //   hideLoader();
+  // });
 }
 
 async function fetchProfile(id: string) {
-  showLoader();
   await http
     .get(
       config.API.fileByFile("ทะเบียนประวัติ", "โปรไฟล์", id, `profile-${id}`)
@@ -123,9 +121,6 @@ async function fetchProfile(id: string) {
     })
     .catch(() => {
       // profilePicture.value = avatar;
-    })
-    .finally(() => {
-      hideLoader();
     });
 }
 
@@ -251,9 +246,10 @@ watch(
       } else {
         scoreTotal.value = true;
       }
-    } else {
-      console.log(2);
     }
+    // else {
+    //   console.log(2);
+    // }
   }
 );
 
@@ -296,8 +292,9 @@ async function getAll() {
   await getOrgOp();
 }
 
-onMounted(() => {
-  getAll();
+onMounted(async () => {
+  showLoader();
+  await getAll();
 });
 </script>
 
@@ -441,7 +438,7 @@ onMounted(() => {
                     <div class="column">
                       <span class="text-grey-6">คะแนนประเมิน</span>
                       <span class="text-weight-medium text-primary">{{
-                        score.toFixed(2)
+                        (indicatorScore + competencyScore).toFixed(2)
                       }}</span>
                     </div>
                   </div>
@@ -452,7 +449,10 @@ onMounted(() => {
         </q-card>
 
         <q-card class="q-mt-md rounded">
-          <TabMain v-model:score="score" />
+          <TabMain
+            v-model:indicatorScore="indicatorScore"
+            v-model:competencyScore="competencyScore"
+          />
         </q-card>
       </div>
     </div>