hrms-mgt/src/modules/14_KPI/views/detail.vue

<script setup lang="ts">
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 TabMain from "@/modules/14_KPI/components/detailList/TabMain.vue";

import { useCounterMixin } from "@/stores/mixin";
import { useKPIDataStore } from "@/modules/14_KPI/store/KPIStore";
import { time } from "console";

// import type { FormProfile } from "@/modules/08_KPI/interface/request/index";

const route = useRoute();
const id = ref<string>(route.params.id as string);
const isReadonly = <boolean>(route.name === "KPIDetail" ? true : false);

const store = useKPIDataStore();
const $q = useQuasar();
const mixin = useCounterMixin();
const { showLoader, hideLoader, messageError } = mixin;
const indicatorScore = ref<number>(0);
const competencyScore = ref<number>(0);
const formProfile = reactive<any>({
  fullName: "",
  position: "",
  type: "",
  level: "",
  status: "",
  result: "",
  score: "-",
  avartar: "",
});

const router = useRouter();

function fetchEvaluation() {
  http
    .get(config.API.kpiUserEvaluation + `/${id.value}`)
    .then((res) => {
      const data = res.data.result;
      store.dataEvaluation = data;
      formProfile.status = store.convertStatus(data.evaluationStatus);
      formProfile.result = store.convertResults(data.evaluationResults);
      fetchProfile(data.profileId);
    })
    .catch((e) => {
      messageError($q, e);
    });
}

function getProfile() {
  http
    .get(config.API.profilePosition())
    .then((res) => {
      const data = res.data.result;
      store.dataProfile = data;
      store.checkCompetency();
      store.checkCompetencyDefaultCompetencyLevel();
      formProfile.fullName = `${data.prefix}${data.firstName} ${data.lastName}`;
      formProfile.position = data.position;
      formProfile.type = data.posTypeName;
      formProfile.level = data.posLevelName;
    })
    .catch((e) => {
      messageError($q, e);
    });
}

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

/** save */
function onSave() {}

onMounted(async () => {
  showLoader();
  fetchEvaluation();
  getProfile();
});
</script>

<template>
  <div class="col-xs-12 col-sm-12 col-md-11">
    <div class="toptitle col-12 row items-center">
      <q-btn
        icon="mdi-arrow-left"
        unelevated
        round
        dense
        flat
        color="primary"
        class="q-mr-sm"
        @click="
          () => {
            store.dataEvaluation = {};
            isReadonly ? router.push(`/KPI-list`) : router.push(`/KPI`);
          }
        "
      />
      {{ id ? `รายละเอียดแบบประเมิน` : `เพิ่มแบบประเมิน` }}
      <q-space />
    </div>
    <div class="col-12">
      <q-card bordered flat class="relative-position">
        <div
          class="absolute-center-left"
          style="left: 2%; top: 50%; transform: translateY(-50%)"
        >
          <q-avatar size="95px">
            <q-img
              v-if="formProfile.avartar == null"
              src="@/assets/avatar_user.jpg"
              class="bg-grey-3"
              style="object-fit: cover"
            />

            <q-img v-else :src="formProfile.avartar" />
          </q-avatar>
        </div>
        <div class="row col-12">
          <div class="row items-center col-12 q-pa-sm">
            <div class="col-12" style="padding-left: 12%">
              <div class="row col-12 items-center">
                <span class="text-h6 text-weight-medium text-primary">{{
                  formProfile.fullName ? formProfile.fullName : "-"
                }}</span>
                <q-space />
                <div class="q-gutter-x-sm">
                  <q-btn
                    unelevated
                    round
                    icon="mdi-file-eye-outline"
                    color="grey-2"
                    text-color="primary"
                    size="md"
                  >
                    <q-tooltip>ดูข้อมูลการช่วยราชการ</q-tooltip>
                  </q-btn>
                  <q-btn
                    unelevated
                    round
                    color="grey-2"
                    text-color="blue-5"
                    icon="mdi-file-eye-outline"
                    size="md"
                  >
                    <q-tooltip>ดูข้อมูลการทดลองงาน</q-tooltip>
                  </q-btn>
                </div>
              </div>
            </div>
          </div>

          <div class="row items-center bg-toolbar col-12 q-pa-sm">
            <div class="col-12 q-py-xs" style="padding-left: 12%">
              <div class="row no-wrap">
                <div class="col-2">
                  <div class="column">
                    <span class="text-grey-6">ตำแหน่งในสายงาน</span>
                    <span class="text-weight-medium text-dark">{{
                      formProfile.position
                    }}</span>
                  </div>
                </div>
                <div class="col-2">
                  <div class="column">
                    <span class="text-grey-6">ประเภทตำแหน่ง</span>
                    <span class="text-weight-medium text-dark">{{
                      formProfile.type
                    }}</span>
                  </div>
                </div>
                <div class="col-2">
                  <div class="column">
                    <span class="text-grey-6">ระดับตำแหน่ง</span>
                    <span class="text-weight-medium text-dark">{{
                      formProfile.level
                    }}</span>
                  </div>
                </div>
                <div class="col-2">
                  <div class="column">
                    <span class="text-grey-6">สถานะการประเมิน</span>
                    <span class="text-weight-medium text-dark">{{
                      formProfile.status
                    }}</span>
                  </div>
                </div>
                <div class="col-2">
                  <div class="column">
                    <span class="text-grey-6">ผลการประเมิน</span>
                    <span class="text-weight-medium text-dark">{{
                      formProfile.result
                    }}</span>
                  </div>
                </div>
                <div class="col-2">
                  <div class="column">
                    <span class="text-grey-6">คะแนนประเมิน</span>
                    <span class="text-weight-medium text-primary"
                      >{{ (indicatorScore + competencyScore).toFixed(2) }}
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </q-card>

      <q-card class="q-mt-md rounded">
        <TabMain
          v-model:indicatorScore="indicatorScore"
          v-model:competencyScore="competencyScore"
        />
      </q-card>
    </div>
  </div>
</template>
<style>
.bg-toolbar {
  background-color: #f2fbfa;
}

.absolute-center-left {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
</style>