hrms-user/src/modules/08_KPI/components/Tab/01_Assessment.vue

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useQuasar } from "quasar";
import { useRoute } from "vue-router";

import config from "@/app.config";
import http from "@/plugins/http";

import Work from "@/modules/08_KPI/components/Tab/Topic/01_Indicator.vue";
import Competency from "@/modules/08_KPI/components/Tab/Topic/02_Competency.vue";

import { useCounterMixin } from "@/stores/mixin";
import { useKpiDataStore } from "@/modules/08_KPI/store";

const $q = useQuasar();
const route = useRoute();
const { showLoader, hideLoader, messageError } = useCounterMixin();
const store = useKpiDataStore();

const evaluationId = ref<string>(route.params.id.toString());

const rows_01 = ref<any[]>();
const rows_02 = ref<any[]>();
const rows_03 = ref<any[]>();

const total = ref<number>(0);
const resultWork = ref<number>(0);
const resultEvaluation = ref<number>(0);

function fetchListPlanned() {
  showLoader();
  http
    .get(config.API.kpiAchievement("planned") + `?id=${evaluationId.value}`)
    .then((res) => {
      const data = res.data.result;
      rows_01.value = data;
    })
    .catch((err) => {
      messageError($q, err);
    })
    .finally(() => {
      hideLoader();
    });
}

function fetchListRole() {
  showLoader();
  http
    .get(config.API.kpiAchievement("role") + `?id=${evaluationId.value}`)
    .then((res) => {
      const data = res.data.result;
      rows_02.value = data;
    })
    .catch((err) => {
      messageError($q, err);
    })
    .finally(() => {
      hideLoader();
    });
}

function fetchAssigned() {
  const data = [
    {
      includingName: "name",
      target: "เป่า",
      point: "12",
      weight: "12",
      achievement: "12",
      evaluationResults: "12",
    },
  ];
  rows_03.value = data;
}

onMounted(() => {
  fetchListPlanned();
  fetchListRole();
  fetchAssigned();
});
</script>

<template>
  <q-scroll-area
    style="height: 100vh"
    class="bg-white row col-12 text-dark q-pa-md"
  >
    <div class="text-weight-bold text-body2">
      <span class="txt-under text-blue-6">องค์ประกอบที่ 1</span>
      <span class="q-ml-sm"> ผลสัมฤทธิ์ของงาน</span>
    </div>

    <div class="q-gutter-md q-mt-sm">
      <!-- องค์ประกอบที่ 1 -->
      <Work
        v-model:data="rows_01"
        :title="`1. งานตามแผนปฏิบัติราชการประจำปี`"
        :page="1"
        :fetchList="fetchListPlanned"
      />
      <Work
        v-model:data="rows_02"
        :title="`2. งานตามหน้าที่ความรับผิดชอบหลัก`"
        :page="2"
        :fetchList="fetchListRole"
      />
      <Work
        v-model:data="rows_03"
        :title="`3. งานที่ได้รับมอบหมายพิเศษ`"
        :page="3"
        :fetchList="fetchAssigned"
      />
      <div class="row text-body2 text-weight-bold">
        <div class="col-6 text-center row justify-center">
          <span>รวมผลการประเมิน (ร้อยละ) 100</span>
          <div class="text-primary q-pl-md">{{ total }}</div>
        </div>

        <div class="col-6 text-center row justify-center">
          <span>สรุปผลการประเมินผลสัมฤทธิ์ของงาน (คะแนนเต็ม 70 คะแนน)</span>
          <div class="text-primary q-pl-md">{{ resultWork }}</div>
        </div>
      </div>

      <q-separator size="3px" class="q-my-lg" />

      <!-- องค์ประกอบที่ 2 -->
      <div class="text-weight-bold text-body2 q-mb-sm">
        <span class="txt-under text-blue-6">องค์ประกอบที่ 2</span>
        <span class="q-ml-sm"> พฤติกรรมการปฎิบัติราชการ (สมรรถนะ)</span>
      </div>

      <Competency />

      <div class="row text-body2 text-weight-bold justify-center">
        <span>ผลการประเมินสมรรถนะ (20 คะแนน)</span>
        <div class="text-primary q-pl-md">{{ resultEvaluation }}</div>
      </div>
    </div>
  </q-scroll-area>
</template>

<style scoped>
.txt-under {
  text-decoration: underline;
}
</style>