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

ปรับ ui ระบบ KPI

Browse source
This commit is contained in:
Tanyalak 2024-04-19 15:30:39 +07:00
parent 1993d72e04
commit 991e44f157
11 changed files with 345 additions and 304 deletions
Download patch file Download diff file Expand all files Collapse all files

57
src/modules/08_KPI/views/form.vue
View file

@ -28,7 +28,7 @@ const formProfile = reactive<FormProfile>({
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",
"https://cdn.quasar.dev/img/boy-avatar.png",
});
const router = useRouter();
@ -77,12 +77,20 @@ onMounted(() => {
>
</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">{{
<q-card bordered flat class="relative-position">
<div
class="absolute"
style="left: 2%; top: 50%; transform: translateY(-50%)"
>
<q-avatar size="95px">
<q-img :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 />
@ -93,6 +101,7 @@ onMounted(() => {
icon="mdi-file-eye-outline"
color="grey-2"
text-color="primary"
size="md"
>
<q-tooltip>ดูข้อมูลการช่วยราชการ</q-tooltip>
</q-btn>
@ -102,29 +111,23 @@ onMounted(() => {
color="grey-2"
text-color="blue-5"
icon="mdi-file-eye-outline"
size="md"
>
<q-tooltip>ดูข้อมูลการทดลองงาน</q-tooltip>
</q-btn>
</div>
</q-toolbar>
</div>
</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="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-bold">{{
<span class="text-weight-medium text-dark">{{
formProfile.position
}}</span>
</div>
@ -132,7 +135,7 @@ onMounted(() => {
<div class="col-2">
<div class="column">
<span class="text-grey-6">ประเภท</span>
<span class="text-weight-bold">{{
<span class="text-weight-medium text-dark">{{
formProfile.type
}}</span>
</div>
@ -140,7 +143,7 @@ onMounted(() => {
<div class="col-2">
<div class="column">
<span class="text-grey-6">ระดับชั้นงาน</span>
<span class="text-weight-bold">{{
<span class="text-weight-medium text-dark">{{
formProfile.level
}}</span>
</div>
@ -148,7 +151,7 @@ onMounted(() => {
<div class="col-2">
<div class="column">
<span class="text-grey-6">สถานะการประเมิน</span>
<span class="text-weight-bold">{{
<span class="text-weight-medium text-dark">{{
formProfile.status
}}</span>
</div>
@ -156,7 +159,7 @@ onMounted(() => {
<div class="col-2">
<div class="column">
<span class="text-grey-6">คะแนนประเมิน</span>
<span class="text-weight-bold text-primary">{{
<span class="text-weight-medium text-primary">{{
formProfile.score
}}</span>
</div>
@ -174,3 +177,9 @@ onMounted(() => {
</div>
</div>
</template>
<style>
.bg-toolbar{
background-color: #F2FBFA;
}
</style>