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

35
src/modules/08_KPI/components/Tab/01_Assessment.vue
View file

@ -36,10 +36,10 @@ onMounted(() => {
}); });
</script> </script>
<template> <template>
<q-scroll-area style="height: 400px" class="bg-white row col-12"> <q-scroll-area style="height: 56vh" class="bg-white row col-12 text-dark q-pa-md">
<div class="text-weight-bold text-body1"> <div class="text-weight-bold text-body2">
<span class="txt-under text-blue-5">องค์ประกอบที่ 1</span> <span class="txt-under text-blue-6">องค์ประกอบที่ 1</span>
<span> ผลสัมฤทธิ์ของงาน</span> <span class="q-ml-sm"> ผลสัมฤทธิ์ของงาน</span>
</div> </div>
<div class="q-gutter-md q-mt-sm"> <div class="q-gutter-md q-mt-sm">
@ -47,33 +47,32 @@ onMounted(() => {
<Work v-model:data="rows_01" :title="`1. งานตามแผนปฏิบัติราชการประจำปี`" :page="1" /> <Work v-model:data="rows_01" :title="`1. งานตามแผนปฏิบัติราชการประจำปี`" :page="1" />
<Work v-model:data="rows_02" :title="`2. งานตามหน้าที่ความรับผิดชอบหลัก`" :page="2" /> <Work v-model:data="rows_02" :title="`2. งานตามหน้าที่ความรับผิดชอบหลัก`" :page="2" />
<Work v-model:data="rows_03" :title="`3. งานที่ได้รับมอบหมาย`" :page="3" /> <Work v-model:data="rows_03" :title="`3. งานที่ได้รับมอบหมาย`" :page="3" />
<div class="row text-body1 text-weight-bold"> <div class="row text-body2 text-weight-bold">
<div class="col-5 text-center"> <div class="col-6 text-center row justify-center">
<span>รวมผลการประเมิน (ร้อยละ) 100</span> <span>รวมผลการประเมิน (ร้อยละ) 100</span>
<div class="text-primary q-pl-md">{{ total }}</div>
</div> </div>
<div class="col-1 text-primary">{{ total }}</div>
<div class="col-5 text-center"> <div class="col-6 text-center row justify-center">
<span>สรุปผลการประเมินผลสัมฤทธิ์ของงาน (คะแนนเต็ม 70 คะแนน)</span> <span>สรุปผลการประเมินผลสัมฤทธิ์ของงาน (คะแนนเต็ม 70 คะแนน)</span>
<div class="text-primary q-pl-md">{{ resultWork }}</div>
</div> </div>
<div class="col-1 text-primary">{{ resultWork }}</div>
</div> </div>
<q-separator class="q-py-xs" /> <q-separator size="3px" class="q-my-lg" />
<!-- องค์ประกอบที่ 2 --> <!-- องค์ประกอบที่ 2 -->
<div class="text-weight-bold text-body1 q-mb-sm"> <div class="text-weight-bold text-body2 q-mb-sm">
<span class="txt-under text-blue-5">องค์ประกอบที่ 2</span> <span class="txt-under text-blue-6">องค์ประกอบที่ 2</span>
<span> พฤติกรรมการปฎิบัติราชการ (สมรรถนะ)</span> <span class="q-ml-sm"> พฤติกรรมการปฎิบัติราชการ (สมรรถนะ)</span>
</div> </div>
<Capacity v-model:data="rows_04" :title="`1. สมรรถนะหลัก`" :page="1" /> <Capacity v-model:data="rows_04" :title="`1. สมรรถนะหลัก`" :page="1" />
<Capacity v-model:data="rows_05" :title="`2. สมรรถนะประจำกลุ่ม`" :page="2" /> <Capacity v-model:data="rows_05" :title="`2. สมรรถนะประจำกลุ่ม`" :page="2" />
<div class="row justify-evenly text-body1 text-weight-bold"> <div class="row text-body2 text-weight-bold justify-center">
<div class="col-5 text-right"> <span>ผลการประเมินสมรรถนะ (20 คะแนน)</span>
<span>ผลการประเมินสมรรถนะ (20 คะแนน)</span> <div class="text-primary q-pl-md">{{ resultEvaluation }}</div>
</div>
<div class="col-5 text-primary">{{ resultEvaluation }}</div>
</div> </div>
</div> </div>
</q-scroll-area> </q-scroll-area>

2
src/modules/08_KPI/components/Tab/02_CommanderAbove.vue
View file

@ -1,3 +1,3 @@
<template> <template>
<div>2</div> <div class="q-pa-md">2</div>
</template> </template>

2
src/modules/08_KPI/components/Tab/03_CommanderAboveOneStep.vue
View file

@ -1,3 +1,3 @@
<template> <template>
<div>3</div> <div class="q-pa-md">3</div>
</template> </template>

2
src/modules/08_KPI/components/Tab/04_File.vue
View file

@ -1,3 +1,3 @@
<template> <template>
<div>4</div> <div class="q-pa-md">4</div>
</template> </template>

313
src/modules/08_KPI/components/Tab/Dialog/01_Dialog.vue
View file

@ -4,7 +4,7 @@ import DialogHeader from "@/components/DialogHeader.vue";
const modal = defineModel<boolean>("modal", { required: true }); const modal = defineModel<boolean>("modal", { required: true });
const numpage = defineModel<number>("numpage", { required: true }); const numpage = defineModel<number>("numpage", { required: true });
const splitterModel = ref<number>(30); const splitterModel = ref<number>(25);
const search = ref<string>(""); const search = ref<string>("");
const define = ref<string>(""); const define = ref<string>("");
@ -88,7 +88,7 @@ function onSubmit() {}
</script> </script>
<template> <template>
<q-dialog v-model="modal" persistent> <q-dialog v-model="modal" persistent>
<q-card class="col-12" style="width: 80%"> <q-card class="col-12" style="width: 85%">
<q-form greedy @submit.prevent @validation-success="onSubmit"> <q-form greedy @submit.prevent @validation-success="onSubmit">
<DialogHeader <DialogHeader
:tittle=" :tittle="
@ -101,162 +101,156 @@ function onSubmit() {}
<q-separator /> <q-separator />
<q-card-section class="q-pa-none scroll" style="max-height: 80vh"> <q-card-section class="q-pa-none scroll" style="max-height: 80vh">
<q-splitter v-model="splitterModel" disable> <div class="col-12 row">
<template v-slot:before> <div class="bg-grey-1 q-pa-md col-xs-12 col-sm-4 col-md-3 row lineRight">
<div class="bg-grey-1 q-pa-md"> <div class="col-12 fit">
<q-input <div class="col-12 ">
v-model="search" <q-input
outlined v-model="search"
dense outlined
label="ค้นหา" dense
bg-color="white" label="ค้นหา"
:class="getclass()" :class="getclass()"
> >
<template v-slot:append> <template v-slot:append>
<q-icon v-if="search == ''" name="search" /> <q-icon v-if="search == ''" name="search" />
<q-icon <q-icon
v-if="search !== ''" v-if="search !== ''"
name="clear" name="clear"
class="cursor-pointer" class="cursor-pointer"
@click="search = ''" @click="search = ''"
/> />
</template> </template>
</q-input> </q-input>
<q-card flat bordered class="q-mt-sm">
<div class="row q-px-md q-py-sm items-center bg-grey-1">
<div class="col-4">
<span>รหัสตัวชี้วัด</span>
</div> </div>
<div class="col-4"> <q-card bordered flat class="q-mt-sm no-shadow bg-white col-12">
<span>ชื่อตัวชี้วัด</span> <div class="row q-px-md q-py-sm items-center bg-grey-1">
<div class="col-4">
<span>รหัสตัวชี้วัด</span>
</div>
<div class="col-4">
<span>ชื่อตัวชี้วัด</span>
</div>
</div>
<q-separator/>
<q-card-section class="q-pa-none">
<q-list
separator
dense
>
<q-item
v-for="(item, index) in listTarget"
:key="index"
clickable
v-ripple
:active="listCheck === index"
active-class="my-menu-link"
@click="clickList(index, item.id)"
>
<q-item-section class="q-pa-none">
<div class="row items-center" style="height: 20px">
<div class="col-4">
<span>{{ item.metricCode }}</span>
</div>
<div class="col-4">
<span>{{ item.indicatorName }}</span>
</div>
</div>
</q-item-section>
</q-item>
</q-list>
</q-card-section>
</q-card>
</div>
</div>
<div class="col-xs-12 col-sm-8 col-md-9 row">
<div class="row q-pa-md q-col-gutter-sm">
<div class="col-12">
<span class="text-body2 text-weight-medium"
>รายละเอียดตัวชี้วัด</span
>
</div>
<div class="col-8">
<q-card bordered class="full-height q-pa-sm">
<div
v-for="(field, index) in Object.keys(fieldDetailLabels)"
:key="index + 1"
>
<div class="row q-pa-sm q-col-gutter-lg col-12">
<div class="col-4 text-grey-6">
{{
fieldDetailLabels[
field as keyof typeof fieldDetailLabels
]
}}
</div>
<div class="col-8">
<span>{{
formDetail[field] ? formDetail[field] : "-"
}}</span>
</div>
</div>
</div>
</q-card>
</div>
<div class="col-4 row ">
<div class="row col-12 card-box">
<div class="col-12 bg-grey-2 row items-center text-weight-medium">
<div class="col-6 text-center">ระดับคะแนน</div>
<div class="col-6 text-center">ผลสำเร็จของงาน</div>
</div>
<div
v-for="(field, index) in Object.keys(fieldLabels)"
:key="index + 1"
class="row col-12 items-center lineTop"
>
<div
class="col-6 text-center text-body2"
>
{{ fieldLabels[field as keyof typeof fieldLabels] }}
</div>
<div class="col-6 text-center text-primary">
<span>{{
formScore[field] ? formScore[field] : "-"
}}</span>
</div>
</div>
</div> </div>
</div> </div>
<div class="col-12">
<q-separator /> <q-input
<q-card-section class="q-pa-none"> v-model="define"
<q-scroll-area label="นิยามหรือความหมายของตัวชี้วัด"
style="height: 71vh" type="textarea"
class="bg-white row col-12" outlined
> autogrow
<q-list dense
v-for="(item, index) in listTarget" :rules="[(val:string) => !!val || `${'กรุณากรอกตัวชี้วัด'}`,]"
:key="index" hide-bottom-space
bordered :class="getclass()"
separator />
> </div>
<q-item <div class="col-12">
clickable <q-input
v-ripple v-model="formula"
:active="listCheck === index" label="สูตรคำนวณ"
active-class="my-menu-link" type="textarea"
@click="clickList(index, item.id)" outlined
> autogrow
<q-item-section class="q-pa-none"> dense
<div class="row items-center" style="height: 20px"> :rules="[(val:string) => !!val || `${'กรุณากรอกตัวชี้วัด'}`,]"
<div class="col-4"> hide-bottom-space
<span>{{ item.metricCode }}</span> :class="getclass()"
</div> />
<div class="col-4"> </div>
<span>{{ item.indicatorName }}</span>
</div>
</div>
</q-item-section>
</q-item>
</q-list>
</q-scroll-area>
</q-card-section>
</q-card>
</div>
</template>
<template v-slot:after>
<div class="row q-pa-md q-col-gutter-md">
<div class="col-12">
<span class="text-body1 text-weight-bold"
>รายละเอียดตัวชี้วัด</span
>
</div>
<div class="col-8">
<q-card bordered class="full-height">
<div
v-for="(field, index) in Object.keys(fieldDetailLabels)"
:key="index + 1"
>
<div class="row q-pa-md">
<div class="col-3 text-grey-6 text-weight-medium">
{{
fieldDetailLabels[
field as keyof typeof fieldDetailLabels
]
}}
</div>
<div class="col-7">
<span>{{
formDetail[field] ? formDetail[field] : "-"
}}</span>
</div>
</div>
</div>
</q-card>
</div>
<div class="col-4">
<q-card bordered>
<div class="bg-grey-2 row q-py-sm text-weight-bold">
<div class="col-6 text-center">ระดับคะแนน</div>
<div class="col-6 text-center">ผลสำเร็จของงาน</div>
</div>
<div
v-for="(field, index) in Object.keys(fieldLabels)"
:key="index + 1"
>
<div class="row q-py-lg">
<div
class="col-6 text-center text-body1 text-weight-bold"
>
{{ fieldLabels[field as keyof typeof fieldLabels] }}
</div>
<div class="col-6 text-center">
<span>{{
formScore[field] ? formScore[field] : "-"
}}</span>
</div>
</div>
<div
class="col-12"
v-if="index !== Object.keys(fieldLabels).length - 1"
>
<q-separator />
</div>
</div>
</q-card>
</div>
<div class="col-12">
<q-input
v-model="define"
label="นิยามหรือความหมายของตัวชี้วัด"
type="textarea"
outlined
dense
:rules="[(val:string) => !!val || `${'กรุณากรอกตัวชี้วัด'}`,]"
hide-bottom-space
:class="getclass()"
/>
</div>
<div class="col-12">
<q-input
v-model="formula"
label="สูตรคำนวณ"
type="textarea"
outlined
dense
:rules="[(val:string) => !!val || `${'กรุณากรอกตัวชี้วัด'}`,]"
hide-bottom-space
:class="getclass()"
/>
</div> </div>
</div> </div>
</template> </div>
</q-splitter>
</q-card-section> </q-card-section>
<q-separator /> <q-separator />
@ -278,4 +272,17 @@ function onSubmit() {}
background: #ebf9f7 !important; background: #ebf9f7 !important;
color: #1bb19ab8 !important; color: #1bb19ab8 !important;
} }
.no-shadow{
box-shadow:none !important;
}
.lineRight{
border-right: 1px solid #EDEDED !important;
}
.lineTop{
border-top: 1px solid #EDEDED !important;
}
.card-box{
border: 1px solid #EDEDED !important;
border-radius: 8px;
}
</style> </style>

197
src/modules/08_KPI/components/Tab/Dialog/04_Dialog.vue
View file

@ -110,115 +110,116 @@ function onSubmit() {}
</script> </script>
<template> <template>
<q-dialog v-model="modal" persistent> <q-dialog v-model="modal" persistent>
<q-card class="col-12" style="width: 80%"> <q-card class="col-12" style="width: 85%">
<q-form greedy @submit.prevent @validation-success="onSubmit"> <q-form greedy @submit.prevent @validation-success="onSubmit">
<DialogHeader :tittle="`เพิ่มสมรรถนะ`" :close="closeDialog" /> <DialogHeader :tittle="`เพิ่มสมรรถนะ`" :close="closeDialog" />
<q-separator /> <q-separator />
<q-card-section class="q-pa-none scroll" style="max-height: 80vh"> <q-card-section class="q-pa-none scroll" style="max-height: 80vh">
<q-splitter v-model="splitterModel" disable> <div class="col-12 row">
<template v-slot:before> <div class="bg-grey-1 q-pa-md col-xs-12 col-sm-4 col-md-3 row lineRight">
<div class="bg-grey-1 q-pa-md q-gutter-sm"> <div class="col-12 q-col-gutter-sm fit">
<q-select <div class="col-12 ">
v-model="type" <q-select
outlined v-model="type"
label="ประเภทสมรรถนะ" outlined
dense label="ประเภทสมรรถนะ"
bg-color="white" dense
option-label="name" bg-color="white"
option-value="id" option-label="name"
:options="competencyTypeOp" option-value="id"
emit-value :options="competencyTypeOp"
:class="getclass()" emit-value
map-options :class="getclass()"
/> map-options
<q-input />
v-model="search" </div>
outlined <div class="col-12 ">
dense <q-input
label="ค้นหา" v-model="search"
bg-color="white" outlined
:class="getclass()" dense
> label="ค้นหา"
<template v-slot:append> bg-color="white"
<q-icon v-if="search == ''" name="search" /> :class="getclass()"
<q-icon >
v-if="search !== ''" <template v-slot:append>
name="clear" <q-icon v-if="search == ''" name="search" />
class="cursor-pointer" <q-icon
@click="search = ''" v-if="search !== ''"
/> name="clear"
</template> class="cursor-pointer"
</q-input> @click="search = ''"
<q-card flat bordered> />
<div class="row q-px-md q-py-sm items-center bg-grey-1"> </template>
<div class="col-4"> </q-input>
<span>รหัสตัวชี้วัด</span> </div>
<div class="col-12 ">
<q-card bordered flat class="no-shadow bg-white col-12">
<div class="row q-px-md q-py-sm items-center bg-grey-1">
<div class="col-4">
<span>รหัสตัวชี้วัด</span>
</div>
<div class="col-4">
<span>ชื่อตัวชี้วัด</span>
</div>
</div> </div>
<div class="col-4">
<span>ชื่อตัวชี้วัด</span>
</div>
</div>
<q-separator /> <q-separator />
<q-card-section class="q-pa-none"> <q-card-section class="q-pa-none">
<q-scroll-area <q-list
style="height: 33vh" separator
class="bg-white row col-12" dense
>
<q-list
v-for="(item, index) in listTarget"
:key="index"
bordered
separator
>
<q-item
clickable
v-ripple
:active="listCheck === index"
active-class="my-menu-link"
@click="clickList(index, item.id)"
> >
<q-item-section class="q-pa-none"> <q-item
<div class="row items-center" style="height: 20px"> v-for="(item, index) in listTarget"
<div class="col-4"> :key="index"
<span>{{ item.metricCode }}</span> clickable
v-ripple
:active="listCheck === index"
active-class="my-menu-link"
@click="clickList(index, item.id)"
>
<q-item-section class="q-pa-none">
<div class="row items-center" style="height: 20px">
<div class="col-4">
<span>{{ item.metricCode }}</span>
</div>
<div class="col-4">
<span>{{ item.indicatorName }}</span>
</div>
</div> </div>
<div class="col-4"> </q-item-section>
<span>{{ item.indicatorName }}</span> </q-item>
</div> </q-list>
</div> </q-card-section>
</q-item-section> </q-card>
</q-item> </div>
</q-list>
</q-scroll-area>
</q-card-section>
</q-card>
</div> </div>
</template> </div>
<template v-slot:after> <div class="col-xs-12 col-sm-8 col-md-9 row">
<div class="row q-pa-md q-col-gutter-md"> <div class="row col-12 q-pa-md q-col-gutter-sm">
<div class="col-12"> <div class="col-12">
<span class="text-body1 text-weight-bold" <span class="text-body2 text-weight-medium"
>รายละเอียดตัวชี้วัด</span >รายละเอียดตัวชี้วัด</span
> >
</div> </div>
<div class="col-8"> <div class="col-8 row">
<q-card bordered class="full-height"> <q-card bordered class="fit q-pa-sm no-shadow">
<div <div
v-for="(field, index) in Object.keys(fieldDetailLabels)" v-for="(field, index) in Object.keys(fieldDetailLabels)"
:key="index + 1" :key="index + 1"
> >
<div class="row q-pa-md"> <div class="row q-pa-sm q-col-gutter-lg col-12">
<div class="col-3 text-grey-6 text-weight-medium"> <div class="col-4 text-grey-6">
{{ {{
fieldDetailLabels[ fieldDetailLabels[
field as keyof typeof fieldDetailLabels field as keyof typeof fieldDetailLabels
] ]
}} }}
</div> </div>
<div class="col-7"> <div class="col-8">
<span>{{ <span>{{
formDetail[field] ? formDetail[field] : "-" formDetail[field] ? formDetail[field] : "-"
}}</span> }}</span>
@ -227,19 +228,20 @@ function onSubmit() {}
</div> </div>
</q-card> </q-card>
</div> </div>
<div class="col-4"> <div class="col-4 row ">
<q-card bordered> <q-card bordered class="col-12 row no-shadow">
<div class="bg-grey-2 row q-py-sm text-weight-bold"> <div class="bg-grey-2 row q-py-sm text-weight-bold col-12">
<div class="col-6 text-center">ระดับคะแนน</div> <div class="col-6 text-center">ระดับคะแนน</div>
<div class="col-6 text-center">ผลสำเร็จของงาน</div> <div class="col-6 text-center">ผลสำเร็จของงาน</div>
</div> </div>
<div <div
v-for="(field, index) in Object.keys(fieldLabels)" v-for="(field, index) in Object.keys(fieldLabels)"
:key="index + 1" :key="index + 1"
class="col-12"
> >
<div class="row q-py-lg"> <div class="row col-12 q-py-sm">
<div <div
class="col-6 text-center text-body1 text-weight-bold" class="col-6 text-center text-body2"
> >
{{ fieldLabels[field as keyof typeof fieldLabels] }} {{ fieldLabels[field as keyof typeof fieldLabels] }}
</div> </div>
@ -259,8 +261,8 @@ function onSubmit() {}
</q-card> </q-card>
</div> </div>
</div> </div>
</template> </div>
</q-splitter> </div>
</q-card-section> </q-card-section>
<q-separator /> <q-separator />
@ -279,4 +281,17 @@ function onSubmit() {}
background: #ebf9f7 !important; background: #ebf9f7 !important;
color: #1bb19ab8 !important; color: #1bb19ab8 !important;
} }
.no-shadow{
box-shadow:none !important;
}
.lineRight{
border-right: 1px solid #EDEDED !important;
}
.lineTop{
border-top: 1px solid #EDEDED !important;
}
.card-box{
border: 1px solid #EDEDED !important;
border-radius: 8px;
}
</style> </style>

12
src/modules/08_KPI/components/Tab/Topic/01_Template.vue
View file

@ -102,22 +102,24 @@ function onAdd() {
} }
</script> </script>
<template> <template>
<q-card bordered style="border-radius: 5px"> <q-card bordered style="border-radius: 5px" class="no-shadow">
<q-card-section class="bg-grey-3 q-py-sm"> <q-card-section class="bg-grey-2 q-py-sm">
<span class="text-weight-bold">{{ title }}</span> <span class="text-weight-medium">{{ title }}</span>
<q-btn <q-btn
class="q-ml-xs" class="q-ml-xs"
flat flat
round round
icon="mdi-plus" icon="mdi-plus"
color="primary" color="primary"
size="md" size="12px"
dense
@click="onAdd" @click="onAdd"
> >
<q-tooltip>เพิ่มข้อมูล</q-tooltip> <q-tooltip>เพิ่มข้อมูล</q-tooltip>
</q-btn> </q-btn>
</q-card-section> </q-card-section>
<q-card-section> <q-separator/>
<q-card-section class="q-pa-sm">
<q-table <q-table
ref="table" ref="table"
:columns="columns" :columns="columns"

9
src/modules/08_KPI/components/Tab/Topic/02_Template.vue
View file

@ -86,22 +86,23 @@ function onAdd() {
} }
</script> </script>
<template> <template>
<q-card bordered style="border-radius: 5px"> <q-card bordered style="border-radius: 5px" class="no-shadow">
<q-card-section class="bg-grey-3 q-py-sm"> <q-card-section class="bg-grey-3 q-py-sm">
<span class="text-weight-bold">{{ title }}</span> <span class="text-weight-medium">{{ title }}</span>
<q-btn <q-btn
class="q-ml-xs" class="q-ml-xs"
flat flat
round round
icon="mdi-plus" icon="mdi-plus"
color="primary" color="primary"
size="md" size="12px"
dense
@click="onAdd" @click="onAdd"
> >
<q-tooltip>เพิ่มข้อมูล</q-tooltip> <q-tooltip>เพิ่มข้อมูล</q-tooltip>
</q-btn> </q-btn>
</q-card-section> </q-card-section>
<q-card-section> <q-card-section class="q-pa-sm">
<q-table <q-table
ref="table" ref="table"
:columns="columns" :columns="columns"

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> </script>
<template> <template>
<q-splitter v-model="splitterModel" disable> <q-splitter v-model="splitterModel" disable>
<template v-slot:before> <template v-slot:before>
<q-tabs v-model="store.tabMain" vertical class="text-blue"> <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 <!-- <q-tab
class="hover-tab" class="hover-tab"
v-for="(tab, index) in itemsTab" v-for="(tab, index) in itemsTab"
:key="index" :key="index"
:name="tab.name" :name="tab.name"
:icon="tab.icon" :icon="tab.icon"
:label="tab.label" :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> </q-tabs>
</template> </template>
@ -53,12 +61,12 @@ const splitterModel = ref<number>(15);
vertical vertical
transition-prev="jump-up" transition-prev="jump-up"
transition-next="jump-up" transition-next="jump-up"
class="q-px-md"
> >
<q-tab-panel <q-tab-panel
v-for="(tab, index) in itemsTab" v-for="(tab, index) in itemsTab"
:key="index" :key="index"
:name="tab.name" :name="tab.name"
class="q-pa-none"
> >
<Assessment v-if="store.tabMain === '1'" /> <Assessment v-if="store.tabMain === '1'" />
<CommanderAbove v-if="store.tabMain === '2'" /> <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: "จัดเตรียมข้อมูล", status: "จัดเตรียมข้อมูล",
score: "100", score: "100",
avartar: 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(); const router = useRouter();
@ -77,12 +77,20 @@ onMounted(() => {
> >
</div> </div>
<div class="col-12"> <div class="col-12">
<q-card bordered flatclass="relative-position"> <q-card bordered flat class="relative-position">
<div class="column"> <div
<div class="row items-center"> class="absolute"
<div class="offset-2 col-10"> style="left: 2%; top: 50%; transform: translateY(-50%)"
<q-toolbar class="q-pl-none"> >
<span class="text-h6 text-bold text-primary">{{ <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 : "-" formProfile.fullName ? formProfile.fullName : "-"
}}</span> }}</span>
<q-space /> <q-space />
@ -93,6 +101,7 @@ onMounted(() => {
icon="mdi-file-eye-outline" icon="mdi-file-eye-outline"
color="grey-2" color="grey-2"
text-color="primary" text-color="primary"
size="md"
> >
<q-tooltip>ดูข้อมูลการช่วยราชการ</q-tooltip> <q-tooltip>ดูข้อมูลการช่วยราชการ</q-tooltip>
</q-btn> </q-btn>
@ -102,29 +111,23 @@ onMounted(() => {
color="grey-2" color="grey-2"
text-color="blue-5" text-color="blue-5"
icon="mdi-file-eye-outline" icon="mdi-file-eye-outline"
size="md"
> >
<q-tooltip>ดูข้อมูลการทดลองงาน</q-tooltip> <q-tooltip>ดูข้อมูลการทดลองงาน</q-tooltip>
</q-btn> </q-btn>
</div> </div>
</q-toolbar> </div>
</div> </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 items-center bg-toolbar col-12 q-pa-sm">
<div class="row q-gutter-x-lg no-wrap text-weight-medium"> <div class="col-12 q-py-xs" style="padding-left: 12%;">
<div class="row no-wrap">
<div class="col-2"> <div class="col-2">
<div class="column"> <div class="column">
<span class="text-grey-6">ตำแหน่งในสายงาน</span> <span class="text-grey-6">ตำแหน่งในสายงาน</span>
<span class="text-weight-bold">{{ <span class="text-weight-medium text-dark">{{
formProfile.position formProfile.position
}}</span> }}</span>
</div> </div>
@ -132,7 +135,7 @@ onMounted(() => {
<div class="col-2"> <div class="col-2">
<div class="column"> <div class="column">
<span class="text-grey-6">ประเภท</span> <span class="text-grey-6">ประเภท</span>
<span class="text-weight-bold">{{ <span class="text-weight-medium text-dark">{{
formProfile.type formProfile.type
}}</span> }}</span>
</div> </div>
@ -140,7 +143,7 @@ onMounted(() => {
<div class="col-2"> <div class="col-2">
<div class="column"> <div class="column">
<span class="text-grey-6">ระดับชั้นงาน</span> <span class="text-grey-6">ระดับชั้นงาน</span>
<span class="text-weight-bold">{{ <span class="text-weight-medium text-dark">{{
formProfile.level formProfile.level
}}</span> }}</span>
</div> </div>
@ -148,7 +151,7 @@ onMounted(() => {
<div class="col-2"> <div class="col-2">
<div class="column"> <div class="column">
<span class="text-grey-6">สถานะการประเมิน</span> <span class="text-grey-6">สถานะการประเมิน</span>
<span class="text-weight-bold">{{ <span class="text-weight-medium text-dark">{{
formProfile.status formProfile.status
}}</span> }}</span>
</div> </div>
@ -156,7 +159,7 @@ onMounted(() => {
<div class="col-2"> <div class="col-2">
<div class="column"> <div class="column">
<span class="text-grey-6">คะแนนประเมิน</span> <span class="text-grey-6">คะแนนประเมิน</span>
<span class="text-weight-bold text-primary">{{ <span class="text-weight-medium text-primary">{{
formProfile.score formProfile.score
}}</span> }}</span>
</div> </div>
@ -174,3 +177,9 @@ onMounted(() => {
</div> </div>
</div> </div>
</template> </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 emit-value
map-options 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-tooltip> เพิ่มข้อมูล </q-tooltip>
</q-btn> </q-btn>
<q-space /> <q-space />