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

18
src/modules/08_KPI/views/TabMain.vue
View file

@ -28,20 +28,28 @@ const itemsTab = ref<any>([
},
]);
const splitterModel = ref<number>(15);
const splitterModel = ref<number>(12);
</script>
<template>
<q-splitter v-model="splitterModel" disable>
<template v-slot:before>
<q-tabs v-model="store.tabMain" vertical class="text-blue">
<q-tab
<q-tabs v-model="store.tabMain" vertical class="text-grey-7 text-weight-light" active-class="bg-blue-1 text-blue-8 text-weight-bold">
<!-- <q-tab
class="hover-tab"
v-for="(tab, index) in itemsTab"
:key="index"
:name="tab.name"
:icon="tab.icon"
:label="tab.label"
/>
/> -->
<q-tab name="1" label="ผู้ขอรับการประเมิน" />
<q-tab name="2" label="ผู้บังคับบัญชา">
<div class="text-caption">เหนือขึ้นไป</div>
</q-tab>
<q-tab name="3" label="ผู้บังคับบัญชา">
<div class="text-caption">เหนือขึ้นไปอีกหนึ่งขั้น</div>
</q-tab>
<q-tab name="4" label="ไฟล์เอกสาร" />
</q-tabs>
</template>
@ -53,12 +61,12 @@ const splitterModel = ref<number>(15);
vertical
transition-prev="jump-up"
transition-next="jump-up"
class="q-px-md"
>
<q-tab-panel
v-for="(tab, index) in itemsTab"
:key="index"
:name="tab.name"
class="q-pa-none"
>
<Assessment v-if="store.tabMain === '1'" />
<CommanderAbove v-if="store.tabMain === '2'" />

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>

2
src/modules/08_KPI/views/main.vue
View file

@ -130,7 +130,7 @@ onMounted(async () => {
emit-value
map-options
/>
<q-btn flat round color="primary" icon="add" @click="router.push(`/KPI/add`)">
<q-btn class="q-ml-sm" flat round color="primary" icon="add" @click="router.push(`/KPI/add`)">
<q-tooltip> เพิ่มข้อมูล </q-tooltip>
</q-btn>
<q-space />