KPI ==> ปรับ load

2024-08-27 15:28:06 +07:00 · 2024-08-27 15:28:06 +07:00 · 6797177b01
commit 6797177b01
parent 70d0975463
6 changed files with 91 additions and 188 deletions
--- a/src/modules/14_KPI/components/Tab/01_Assessment.vue
+++ b/src/modules/14_KPI/components/Tab/01_Assessment.vue
@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { ref, onMounted, computed, watch, reactive } from "vue";
-import { useQuasar, type QTableProps } from "quasar";
+import { ref, onMounted, computed, watch } from "vue";
+import { useQuasar } from "quasar";
 import { useRoute } from "vue-router";

 import DialogListCriteria from "@/modules/14_KPI/components/Tab/Dialog/DialogListCriteria.vue";
@ -21,8 +21,7 @@ const dataListCriteria = ref<ListCriteria[]>([]);
 const modalCriteria = ref<boolean>(false);
 const $q = useQuasar();
 const route = useRoute();
-const { hideLoader, messageError, success, showLoader, dialogRemove } =
-  useCounterMixin();
+const { messageError } = useCounterMixin();
 const store = useKpiDataStore();

 const evaluationId = ref<string>(route.params.id.toString());
@ -206,18 +205,13 @@ watch(
  }
 );

-onMounted(() => {
-  showLoader(),
-    Promise.all([
-      getCriteria(),
-      fetchListPlanned(),
-      fetchListRole(),
-      fetchAssigned(),
-    ]).finally(() => {
-      setTimeout(() => {
-        hideLoader();
-      }, 2500);
-    });
+onMounted(async () => {
+  await Promise.all([
+    getCriteria(),
+    fetchListPlanned(),
+    fetchListRole(),
+    fetchAssigned(),
+  ]);
 });
 </script>

--- a/src/modules/14_KPI/components/Tab/TabMain.vue
+++ b/src/modules/14_KPI/components/Tab/TabMain.vue
@ -1,16 +1,11 @@
 <script setup lang="ts">
 import { ref } from "vue";
 import { useKpiDataStore } from "@/modules/14_KPI/store";
-import { useRoute } from "vue-router";

 import Assessment from "@/modules/14_KPI/components/Tab/01_Assessment.vue";
-import Evaluator from "@/modules/14_KPI/components/Tab/02_Evaluator.vue";
-import CommanderAbove from "@/modules/14_KPI/components/Tab/03_CommanderAbove.vue";
-import CommanderAboveOneStep from "@/modules/14_KPI/components/Tab/04_CommanderAboveOneStep.vue";
 import File from "@/modules/14_KPI/components/Tab/05_File.vue";

 const store = useKpiDataStore();
-const route = useRoute();

 const itemsTab = ref<any>([
  {
--- a/src/modules/14_KPI/components/Tab/Topic/01_Indicator.vue
+++ b/src/modules/14_KPI/components/Tab/Topic/01_Indicator.vue
@ -160,8 +160,8 @@ function onDelete(id: string) {
          ? config.API.kpiAchievement("special") + `/${id}`
          : "";
      await http.delete(url);
-      success($q, "ลบข้อมูลสำเร็จ");
-      props.fetchList?.();
+      await props.fetchList?.();
+      await success($q, "ลบข้อมูลสำเร็จ");
    } catch (err) {
      messageError($q, err);
    } finally {
@ -304,7 +304,7 @@ const isEditStep3 = computed(() => {
          <q-tr :props="props" class="cursor-pointer">
            <q-td>
              <q-btn
-              v-if="isEditStep1"
+                v-if="isEditStep1"
                flat
                round
                icon="mdi-eye"
@ -374,7 +374,7 @@ const isEditStep3 = computed(() => {
                  <q-tooltip>รายงานความก้าวหน้า</q-tooltip>
                </q-btn>
                <q-btn
-                v-if="!checkRoutePermisson"
+                  v-if="!checkRoutePermisson"
                  flat
                  round
                  icon="warning"
--- a/src/modules/14_KPI/components/Tab/Topic/02_Competency.vue
+++ b/src/modules/14_KPI/components/Tab/Topic/02_Competency.vue
@ -220,9 +220,9 @@ function onDelete(id: string, type: string) {
    showLoader();
    http
      .delete(config.API.kpiUserCapacity + `/${id}`)
-      .then((res) => {
-        success($q, "ลบข้อมูลสำเร็จ");
-        getData(type);
+      .then(async () => {
+        await getData(type);
+        await success($q, "ลบข้อมูลสำเร็จ");
      })
      .catch((e) => {
        messageError($q, e);
@ -363,7 +363,9 @@ onMounted(() => {
        <d-table
          ref="table"
          :columns="columns"
-          :rows="rows[item.id] && rows[item.id].length !== 0 ? rows[item.id] : []"
+          :rows="
+            rows[item.id] && rows[item.id].length !== 0 ? rows[item.id] : []
+          "
          row-key="id"
          flat
          bordered
--- a/src/modules/14_KPI/components/Tab/Topic/03_Develop.vue
+++ b/src/modules/14_KPI/components/Tab/Topic/03_Develop.vue
@ -142,9 +142,9 @@ function onDelete(id: string) {
    showLoader();
    http
      .delete(config.API.kpiAchievementDevelop + `/${id}`)
-      .then((res) => {
-        success($q, "ลบข้อมูลสำเร็จ");
-        getDevelop();
+      .then(async () => {
+        await getDevelop();
+        await success($q, "ลบข้อมูลสำเร็จ");
      })
      .catch((e) => {
        messageError($q, e);
--- a/src/modules/14_KPI/views/detailView.vue
+++ b/src/modules/14_KPI/views/detailView.vue
@ -1,23 +1,17 @@
 <script setup lang="ts">
-import { ref, onMounted, reactive, computed, watch } from "vue";
+import { ref, onMounted, reactive } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import { useQuasar } from "quasar";
 import http from "@/plugins/http";
 import config from "@/app.config";
-import Avatar from "@/assets/!avatar_user.jpg";

 import DialogHeader from "@/components/DialogHeader.vue";
 import Assessment from "@/modules/14_KPI/components/Tab/01_Assessment.vue";
 import Result from "@/modules/14_KPI/components/Tab/04_Result.vue";
 import File from "@/modules/14_KPI/components/Tab/05_File.vue";
 import DialogGovernment from "@/modules/14_KPI/components/Tab/Dialog/DialogGovernment.vue";
-import DialogStatus from "@/modules/14_KPI/components/Tab/Dialog/DialogStatus.vue";

-import type {
-  DataOption,
-  ItemsTab,
-} from "@/modules/14_KPI/interface/index/Main";
-import type { ResUserEvaluation } from "@/modules/14_KPI/interface/response/KPI";
+import type { DataOption } from "@/modules/14_KPI/interface/index/Main";

 import { useKpiDataStore } from "@/modules/14_KPI/store";
 import { useCounterMixin } from "@/stores/mixin";
@ -47,19 +41,13 @@ const itemsTab = ref<any[]>([

 const splitterModel = ref<number>(12);
 const modalGovernment = ref<boolean>(false);
-const modalStatus = ref<boolean>(false);
-// const modalScore = ref<boolean>(false);
+
 const modalEdit = ref<boolean>(false);
 const route = useRoute();
 const checkRoutePermisson = ref<boolean>(route.name == "KPIDetailPage");
 const id = ref<string>(route.params.id as string);
 const isReadonly = <boolean>(route.name === "KPIEditEvaluator" ? true : false);

-// const plannedPoint = ref<string>("");
-// const rolePoint = ref<string>("");
-// const specialPoint = ref<string>("");
-// const capacityPoint = ref<string>("");
-
 const store = useKpiDataStore();
 const $q = useQuasar();
 const mixin = useCounterMixin();
@ -83,6 +71,7 @@ const commanderHighMainOp = ref<DataOption[]>([]);
 const evaluatorId = ref<any>(null);
 const commanderId = ref<any>(null);
 const commanderHighId = ref<any>(null);
+const avartar = ref<string>("");

 const formProfile = reactive<any>({
  fullName: "",
@ -98,45 +87,49 @@ const formProfile = reactive<any>({
 const router = useRouter();

 async function fetchEvaluation() {
+  showLoader();
  await http
    .get(config.API.kpiEvaluationUser + `/${id.value}`)
    .then(async (res) => {
      const data = res.data.result;
      store.dataEvaluation = await data;
-      formProfile.status = store.convertStatus(data.evaluationStatus);
-      formProfile.result = store.convertResults(data.evaluationResults);
-      store.checkCompetency();
-      store.checkCompetencyDefaultCompetencyLevel();
+      formProfile.status = await store.convertStatus(data.evaluationStatus);
+      formProfile.result = await store.convertResults(data.evaluationResults);

-      fetchProfile(data.profileId);
+      await Promise.all([
+        store.checkCompetency(),
+        store.checkCompetencyDefaultCompetencyLevel(),
+        fetchProfile(data.profileId),
+        getProfile(),
+      ]);
    })
    .catch((e) => {
      messageError($q, e);
+    })
+    .finally(() => {
+      setTimeout(() => {
+        hideLoader();
+      }, 1200);
    });
 }

 async function fetchProfile(id: string) {
-  await http
-    .get(config.API.orgCheckAvatar(id))
-    .then(async (res) => {
-      if (res.data.result.avatarName) {
-        http
-          .get(
-            config.API.fileByFile(
-              "ทะเบียนประวัติ",
-              "โปรไฟล์",
-              id,
-              res.data.result.avatarName
-            )
+  await http.get(config.API.orgCheckAvatar(id)).then(async (res) => {
+    if (res.data.result.avatarName) {
+      http
+        .get(
+          config.API.fileByFile(
+            "ทะเบียนประวัติ",
+            "โปรไฟล์",
+            id,
+            res.data.result.avatarName
          )
-          .then(async (res) => {
-            store.dataEvaluation.avartar = res.data.downloadUrl;
-          });
-      }
-    })
-    .catch(() => {
-      // profilePicture.value = avatar;
-    });
+        )
+        .then(async (res) => {
+          avartar.value = res.data.downloadUrl;
+        });
+    }
+  });
 }

 function close() {
@ -155,10 +148,10 @@ function onSubmit() {
            ? commanderHighId.value.id
            : null,
        })
-        .then((res) => {
-          fetchEvaluation();
+        .then(async () => {
+          await fetchEvaluation();
+          await success($q, "บันทึกสำเร็จ");
          close();
-          success($q, "บันทึกสำเร็จ");
        })
        .catch((e) => {
          messageError($q, e);
@ -169,6 +162,7 @@ function onSubmit() {
    }
  });
 }
+
 async function getOrgOp() {
  http
    .get(config.API.Kpiorg + `/${store.dataProfile.profileId}`)
@ -248,15 +242,15 @@ async function getProfile() {
      store.dataProfile = await data;
      await setTimeout(() => {
        store.checkStep();
-      }, 800);
+      }, 1000);
    })
    .catch((e) => {
      messageError($q, e);
    });
 }
+
 async function getAll() {
  await fetchEvaluation();
-  await getProfile();
 }

 function sendToEvaluatore() {
@ -269,9 +263,9 @@ function sendToEvaluatore() {
          .put(config.API.kpiEvaluationUser + `/status/${id.value}`, {
            status: "NEW_EVALUATOR",
          })
-          .then((res) => {
-            success($q, "ส่งข้อตกลงให้ผู้ประเมินอนุมัติสำเร็จ");
-            fetchEvaluation();
+          .then(async () => {
+            await fetchEvaluation();
+            await success($q, "ส่งข้อตกลงให้ผู้ประเมินอนุมัติสำเร็จ");
          })
          .catch((e) => {
            messageError($q, e);
@ -296,9 +290,9 @@ function sendToEvaluateEvaluatore() {
          .put(config.API.kpiSendToStatus(id.value), {
            status: "EVALUATING_EVALUATOR",
          })
-          .then((res) => {
-            success($q, "ส่งให้ผู้ประเมินรายงานผลสำเร็จของงานสำเร็จ");
-            fetchEvaluation();
+          .then(async () => {
+            await fetchEvaluation();
+            await success($q, "ส่งให้ผู้ประเมินรายงานผลสำเร็จของงานสำเร็จ");
          })
          .catch((e) => {
            messageError($q, e);
@ -323,9 +317,9 @@ function requireEdit() {
          .put(config.API.kpiReqEditUser(id.value), {
            status: "EVALUATOR",
          })
-          .then((res) => {
-            success($q, "ขอแก้ไขสำเร็จ");
-            fetchEvaluation();
+          .then(async () => {
+            await fetchEvaluation();
+            await success($q, "ขอแก้ไขสำเร็จ");
          })
          .catch((e) => {
            messageError($q, e);
@ -345,7 +339,6 @@ function openGovernment() {
 }
 function openStatus() {
  router.push(`/probation-detail/${store.dataEvaluation.profileId}`);
-  // modalStatus.value = true;
 }

 function sendToEvauator() {
@ -356,7 +349,7 @@ function sendToEvauator() {
        status: "EVALUATING",
        id: [store.dataEvaluation.id],
      })
-      .then(async (res) => {
+      .then(async () => {
        await getAll();
        store.tabMain = "3";
      })
@ -416,6 +409,7 @@ const evaluator = ref<any>({
  isPosmasterAct: false,
  posmasterAct: [],
 });
+
 async function fetchProfileEvaluator(id: string) {
  showLoader();
  http
@ -465,10 +459,7 @@ onMounted(async () => {
  <q-card bordered flat class="relative-position">
    <div class="row justify-center q-pa-md" v-if="!$q.screen.gt.xs">
      <q-avatar size="80px">
-        <q-img
-          :src="store.dataEvaluation.avartar"
-          v-if="store.dataEvaluation.avartar !== undefined"
-        />
+        <q-img :src="avartar" v-if="avartar !== undefined && avartar !== ''" />
        <q-img src="@/assets/avatar_user.jpg" v-else />
      </q-avatar>
    </div>
@ -479,10 +470,7 @@ onMounted(async () => {
      style="left: 2%; top: 50%; transform: translateY(-50%)"
    >
      <q-avatar size="80px">
-        <q-img
-          :src="store.dataEvaluation.avartar"
-          v-if="store.dataEvaluation.avartar !== undefined"
-        />
+        <q-img :src="avartar" v-if="avartar !== undefined && avartar !== ''" />
        <q-img src="@/assets/avatar_user.jpg" v-else />
      </q-avatar>
    </div>
@ -860,6 +848,7 @@ onMounted(async () => {
        </q-expansion-item> </q-list
    ></q-card-section>
  </q-card>
+
  <q-dialog v-model="modalEdit" persistent>
    <q-card bordered style="width: 50vh">
      <q-form greedy @submit.prevent @validation-success="onSubmit">
@ -878,7 +867,8 @@ onMounted(async () => {
            <div class="row">
              <div class="col-10">
                <q-select
-                  :readonly="checkRoutePermisson||
+                  :readonly="
+                    checkRoutePermisson ||
                    !(
                      store.dataEvaluation.evaluationStatus === 'NEW' &&
                      store.rolePerson === 'USER'
@ -919,7 +909,8 @@ onMounted(async () => {
            <div class="row">
              <div class="col-10">
                <q-select
-                  :readonly="checkRoutePermisson||
+                  :readonly="
+                    checkRoutePermisson ||
                    !(
                      store.dataEvaluation.evaluationStatus === 'NEW' &&
                      store.rolePerson === 'USER'
@ -971,7 +962,8 @@ onMounted(async () => {
            <div class="row">
              <div class="col-10">
                <q-select
-                  :readonly="checkRoutePermisson||
+                  :readonly="
+                    checkRoutePermisson ||
                    !(
                      store.dataEvaluation.evaluationStatus === 'NEW' &&
                      store.rolePerson === 'USER'
@ -1026,9 +1018,10 @@ onMounted(async () => {
            </div>
          </div>
        </q-card-section>
-        <q-separator v-if="!checkRoutePermisson"/>
+        <q-separator v-if="!checkRoutePermisson" />
        <q-card-actions
-          v-if="!checkRoutePermisson&&
+          v-if="
+            !checkRoutePermisson &&
            store.dataEvaluation.evaluationStatus === 'NEW' &&
            store.rolePerson === 'USER'
          "
@ -1095,13 +1088,13 @@ onMounted(async () => {
                <div class="col-12">รักษาการในตำแหน่ง/การรักษาราชการแทน</div>
              </div>
              <div class="row">
-              <div class="col-12" v-if="evaluator.isPosmasterAct">
-                {{
-                  `${evaluator.posmasterAct.prefix}${evaluator.posmasterAct.firstName} ${evaluator.posmasterAct.lastName} (${evaluator.posmasterAct.posNo})`
-                }}
+                <div class="col-12" v-if="evaluator.isPosmasterAct">
+                  {{
+                    `${evaluator.posmasterAct.prefix}${evaluator.posmasterAct.firstName} ${evaluator.posmasterAct.lastName} (${evaluator.posmasterAct.posNo})`
+                  }}
+                </div>
+                <div class="col-12" v-else>-</div>
              </div>
-              <div class="col-12" v-else>-</div>
-            </div>
            </div>
          </div>
        </q-card-section>
@ -1109,88 +1102,7 @@ onMounted(async () => {
    </q-card>
  </q-dialog>

-  <!-- <q-dialog v-model="modalScore" persistent>
-    <q-card bordered style="width: 50vh">
-      <q-form greedy @submit.prevent @validation-success="onSubmitScore">
-        <DialogHeader tittle="แก้ไขคะแนนเต็ม" :close="clearScore" />
-        <q-separator />
-        <q-card-section>
-          <div class="column q-gutter-sm">
-            <q-input
-              v-model="plannedPoint"
-              label="งานตามแผนปฏิบัติราชการประจำปี"
-              dense
-              outlined
-              class="inputgreen"
-              mask="###"
-              :rules="[
-                (val) =>
-                  !!val ||
-                  val == '0' ||
-                  'กรุณากรอกคะเเนนงานตามแผนปฏิบัติราชการประจำปี หรือ 0',
-              ]"
-              hide-bottom-space
-              lazy-rules
-            />
-            <q-input
-              v-model="rolePoint"
-              label="งานตามหน้าที่ความรับผิดชอบหลัก"
-              dense
-              outlined
-              class="inputgreen"
-              mask="###"
-              :rules="[(val:string) => !!val || val == '0' || `${'กรุณากรอกคะเเนนงานตามหน้าที่ความรับผิดชอบหลัก หรือ 0'}`,]"
-              hide-bottom-space
-              lazy-rules
-            />
-            <q-input
-              v-model="specialPoint"
-              label="งานที่ได้รับมอบหมายพิเศษ"
-              dense
-              outlined
-              class="inputgreen"
-              mask="###"
-              :rules="[(val:string) => !!val || val == '0' ||`${'กรุณากรอกคะเเนนงานที่ได้รับมอบหมายพิเศษ หรือ 0'}`,]"
-              hide-bottom-space
-              lazy-rules
-            />
-            <q-input
-              v-model="capacityPoint"
-              label="สมรรถนะ"
-              dense
-              outlined
-              class="inputgreen"
-              mask="###"
-              :rules="[(val:string) => !!val || val == '0' ||`${'กรุณากรอกคะเเนนสมรรถนะ หรือ 0'}`,]"
-              hide-bottom-space
-              lazy-rules
-            />
-          </div>
-        </q-card-section>
-        <q-separator />
-        <q-card-actions class="bg-white row justify-between">
-          <div class="col-8 text-red q-px-sm">
-            <span v-if="scoreTotal == true"
-              >คะแนนเต็มรวมกันต้องเท่ากับ 100 คะแนน</span
-            >
-          </div>
-          <q-btn
-            label="บันทึก"
-            color="secondary"
-            type="submit"
-            :disable="totalScore !== 100"
-            ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
-          >
-        </q-card-actions>
-      </q-form>
-    </q-card>
-  </q-dialog> -->
  <DialogGovernment v-model:modal="modalGovernment" />
-
-  <!-- <DialogStatus
-    v-model:modal="modalStatus"
-    v-model:is-probation="store.dataProfile.isProbation"
-  /> -->
 </template>
 <style>
 .bg-toolbar {