hrms-user/src/modules/08_KPI/views/form.vue

<script setup lang="ts">
import { ref, onMounted, reactive } from "vue";
import { useRoute, useRouter } from "vue-router";
import TabMain from '@/modules/08_KPI/views/TabMain.vue'
import http from "@/plugins/http";
import config from "@/app.config";

import { useCounterMixin } from "@/stores/mixin";
import { useQuasar } from "quasar";

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

const route = useRoute()
const id = route.params.id as string;

const $q = useQuasar();
const mixin = useCounterMixin();
const { showLoader, hideLoader, messageError } = mixin;


const formProfile = reactive<FormProfile>({
  fullName: "นางสาวกัณฐิมา กาฬสินธุ์",
  prefix: "นางสาว",
  firstName: "กัณฐิมา",
  lastName: "กาฬสินธุ์",
  position: "หัวหน้าสำนักงาน",
  type: "บริหาร",
  level: "ชำนาญการพิเศษ",
  status: "จัดเตรียมข้อมูล",
  score: "100",
  avartar:
    "https://edm-s3.frappet.synology.me/edm/%E0%B8%97%E0%B8%B0%E0%B9%80%E0%B8%9A%E0%B8%B5%E0%B8%A2%E0%B8%99%E0%B8%9B%E0%B8%A3%E0%B8%B0%E0%B8%A7%E0%B8%B1%E0%B8%95%E0%B8%B4/%E0%B9%82%E0%B8%9B%E0%B8%A3%E0%B9%84%E0%B8%9F%E0%B8%A5%E0%B9%8C/1526d9d3-d8b1-43ab-81b5-a84dfbe99202/profile-1526d9d3-d8b1-43ab-81b5-a84dfbe99202?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=b63sTDiLkQPT06cpirTh%2F20240405%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240405T100811Z&X-Amz-Expires=604800&X-Amz-SignedHeaders=host&X-Amz-Signature=a6b8cb6b4f1ffd4edff045ad9fd91bc9a7eb5e00c45c5283bd8bf8f8e1ff5bf0",
});

const router = useRouter();

function getProfile() {
  showLoader();
  http
    .get(config.API.profileBykeycloak())
    .then((res) => {
      const data = res.data.result;
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      hideLoader();
    });
}
onMounted(() => {
  getProfile();
});
</script>

<template>
  <div class="col-12 row justify-center">
    <div class="col-xs-12 col-sm-12 col-md-11">
      <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(`/KPI`)"
        />
        {{ id ? `แก้ไขแบบประเมิน`:`เพิ่มแบบประเมิน` }}
      </div>
      <div class="col-12">
        <q-card bordered flatclass="relative-position">
          <div class="column">
            <div class="row items-center">
              <div class="offset-2 col-10">
                <q-toolbar class="q-pl-none">
                  <span class="text-h6 text-bold 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"
                    >
                      <q-tooltip>ดูข้อมูลการช่วยราชการ</q-tooltip>
                    </q-btn>
                    <q-btn unelevated round color="grey-2" text-color="blue-5">
                      <q-icon name="mdi-briefcase-eye-outline" />
                      <q-tooltip>ดูข้อมูลการทดลองงาน</q-tooltip>
                    </q-btn>
                  </div>
                </q-toolbar>
              </div>
            </div>
            <div
              class="absolute"
              style="left: 3%; top: 50%; transform: translateY(-50%)"
            >
              <q-avatar size="150px">
                <img :src="formProfile.avartar" />
              </q-avatar>
            </div>

            <div class="row items-center bg-teal-1">
              <div class="offset-2 col-10">
                <div class="row q-gutter-x-lg no-wrap text-weight-medium">
                  <div class="col-2">
                    <div class="column">
                      <span class="text-grey-6">ตำแหน่งในสายงาน</span>
                      <span class="text-weight-bold">{{ formProfile.position }}</span>
                    </div>
                  </div>
                  <div class="col-2">
                    <div class="column">
                      <span class="text-grey-6">ประเภท</span>
                      <span class="text-weight-bold">{{ formProfile.type }}</span>
                    </div>
                  </div>
                  <div class="col-2">
                    <div class="column">
                      <span class="text-grey-6">ระดับชั้นงาน</span>
                      <span class="text-weight-bold">{{ formProfile.level }}</span>
                    </div>
                  </div>
                  <div class="col-2">
                    <div class="column">
                      <span class="text-grey-6">สถานะการประเมิน</span>
                      <span class="text-weight-bold">{{ formProfile.status }}</span>
                    </div>
                  </div>
                  <div class="col-2">
                    <div class="column">
                      <span class="text-grey-6">คะแนนประเมิน</span>
                      <span class="text-weight-bold text-primary">{{ formProfile.score }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </q-card>

        <q-card class="q-mt-md rounded">
          <TabMain />
        </q-card>
      </div>
    </div>
  </div>
</template>