From b828b21aea547293ff976c9134951e97067b9043 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Thu, 29 Aug 2024 17:32:47 +0700
Subject: [PATCH] KPI ==> List load

---
 src/modules/08_KPI/views/main.vue | 67 ++++++++-----------------------
 1 file changed, 17 insertions(+), 50 deletions(-)

diff --git a/src/modules/08_KPI/views/main.vue b/src/modules/08_KPI/views/main.vue
index de80b59..0e29e70 100644
--- a/src/modules/08_KPI/views/main.vue
+++ b/src/modules/08_KPI/views/main.vue
@@ -13,7 +13,6 @@ import DialogHeader from "@/components/DialogHeader.vue";
 import { useCounterMixin } from "@/stores/mixin";
 import { useKpiDataStore } from "@/modules/08_KPI/store";
 
-const commanderOp = ref<any[]>([]);
 const $q = useQuasar();
 const mixin = useCounterMixin();
 const store = useKpiDataStore();
@@ -22,7 +21,7 @@ const { showLoader, hideLoader, messageError, date2Thai, dialogConfirm } =
   mixin;
 
 /** Table*/
-const rows = ref<any>();
+const rows = ref<any[]>([]);
 const visibleColumns = ref<string[]>([
   "createdAt",
   "year",
@@ -135,14 +134,14 @@ const total = ref<number>(0);
 const totalList = ref<number>(1);
 const isRoundClose = ref<boolean>(false);
 
-function fetchRoundOption(type: string) {
+async function fetchRoundOption(type: string) {
   const y = type === "main" ? year.value : yearDialog.value;
   showLoader();
-  http
+  await http
     .get(
       config.API.kpiPeriod + `?page=${1}&pageSize=${10}&keyword=${""}&year=${y}`
     )
-    .then((res) => {
+    .then(async (res) => {
       const data = res.data.result.data;
       const list = data.map((e: any) => ({
         id: e.id,
@@ -157,7 +156,7 @@ function fetchRoundOption(type: string) {
       if (type === "main") {
         roundMainOp.value = list;
         round.value = "";
-        fetchList();
+        await fetchList();
       } else {
         roundDialgOp.value = list;
         formRound.kpiPeriodId = { id: "", name: "", isClosed: false };
@@ -171,16 +170,18 @@ function fetchRoundOption(type: string) {
     });
 }
 
-/** ดึงข้อมูล */
-function fetchList() {
+/**
+ *  fetch รายการขอรับประเมินผลการปฏิบัติราชการระดับบุคคล
+ */
+async function fetchList() {
   showLoader();
-  http
+  await http
     .get(
       config.API.kpiEvaluation +
         `?page=${formQuery.page}&pageSize=${formQuery.pageSize}&kpiPeriodId=${round.value}`
     )
-    .then((res) => {
-      const data = res.data.result;
+    .then(async (res) => {
+      const data = await res.data.result;
       total.value = data.total;
       totalList.value = Math.ceil(data.total / formQuery.pageSize);
       rows.value = data.data;
@@ -201,26 +202,6 @@ function changRound() {
 function redirectViewDetail(id: string) {
   store.tabMain = "1";
 
-  // store.indicatorWeightTotal = 0;
-  // store.indicatorWeight1Total = 0;
-  // store.indicatorWeight2Total = 0;
-  // store.indicatorPercentVal = 0;
-  // store.indicatorScore = 0;
-  // store.indicatorScoreVal = 0;
-  // store.competencyScore = 0;
-  // store.competencyScoreVal = 0;
-  // store.devScore = 0;
-  // store.devScoreVal = 0;
-  // store.competencyDevScore = 0;
-  // store.excusiveCompetencyScore = 0;
-  // store.excusiveIndicator1PercentVal = 0;
-  // store.excusiveIndicator1Weight = 0;
-  // store.excusiveIndicator1ScoreVal = 0;
-  // store.excusiveIndicator2Weight = 0;
-  // store.excusiveIndicator2PercentVal = 0;
-  // store.excusiveIndicator2ScoreVal = 0;
-  // store.excusiveIndicatorScore = 0;
-
   router.push(`/KPI/${id}`);
 }
 
@@ -346,8 +327,7 @@ function getOrgOp() {
     })
     .catch((e) => {
       messageError($q, e);
-    })
-    .finally(() => {});
+    });
 }
 
 function filterOption(val: any, update: Function, refData: string) {
@@ -378,9 +358,8 @@ function filterOption(val: any, update: Function, refData: string) {
   }
 }
 
-onMounted(() => {
-  fetchRoundOption("main");
-  getOrgOp();
+onMounted(async () => {
+  await Promise.all([fetchRoundOption("main"), getOrgOp()]);
 });
 </script>
 
@@ -400,19 +379,7 @@ onMounted(() => {
         />
         รายการขอรับประเมินผลการปฏิบัติราชการระดับบุคคล
       </div>
-      <!-- <div class="toptitle text-white col-12 row items-center">
-        <q-btn
-          icon="mdi-arrow-left"
-          unelevated
-          round
-          dense
-          flat
-          color="primary"
-          class="q-mr-sm"
-          @click="router.push(`/`)"
-        />
-        รายการขอรับประเมินผลการปฏิบัติราชการระดับบุคคล
-      </div> -->
+
       <div class="col-12">
         <q-card bordered class="q-pa-md">
           <div class="row q-col-gutter-sm q-mb-sm">
@@ -581,7 +548,7 @@ onMounted(() => {
   <q-dialog v-model="modalDialog" persistent>
     <q-card
       class="col-12"
-      :style="$q.screen.gt.xs ? 'width: 25vw' : 'width: 100vw'"
+      :style="$q.screen.gt.xs ? 'width: 20vw' : 'width: 100vw'"
     >
       <q-form greedy @submit.prevent @validation-success="onSubmit">
         <DialogHeader :tittle="'สร้างแบบประเมินผลฯ'" :close="onCloseDialog" />