hrms-bangkok/hrms-mgt
7
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

UI รายการการประเมินผลการปฏิบัติราชการระดับบุคคล

Browse source
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490 2024-04-26 16:14:54 +07:00
parent d43748e450
commit 0b50e82c5e
19 changed files with 4442 additions and 41 deletions
Download patch file Download diff file Expand all files Collapse all files

243
src/modules/14_KPI/views/detail.vue
View file

@ -1,3 +1,244 @@
<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 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 formProfile = reactive<any>({
fullName: "",
position: "",
type: "",
level: "",
status: "",
result: "",
score: "-",
avartar: "",
});
const router = useRouter();
function fetchEvaluation() {
showLoader();
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);
})
.finally(() => {
hideLoader();
});
}
function getProfile() {
showLoader();
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);
})
.finally(() => {
hideLoader();
});
}
async function fetchProfile(id: string) {
showLoader();
await http
.get(
config.API.fileByFile("ทะเบียนประวัติ", "โปรไฟล์", id, `profile-${id}`)
)
.then(async (res) => {
formProfile.avartar = res.data.downloadUrl;
})
.catch(() => {
// profilePicture.value = avatar;
})
.finally(() => {
hideLoader();
});
}
/** save */
function onSave() {}
onMounted(() => {
fetchEvaluation();
getProfile();
});
</script>
<template>
<div>detail</div>
<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="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">
<img
v-if="formProfile.avartar == null"
src="@/assets/avatar_user.jpg"
class="bg-grey-3"
style="object-fit: cover"
/>
<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">{{
formProfile.score
}}</span>
</div>
</div>
</div>
</div>
</div>
</div>
</q-card>
<q-card class="q-mt-md rounded">
<TabMain />
</q-card>
</div>
</div>
</template>
<style>
.bg-toolbar {
background-color: #f2fbfa;
}
.absolute-center-left {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
</style>