ปรับ ui ระบบ KPI
This commit is contained in:
Tanyalak
parent
1993d72e04
commit
991e44f157
11 changed files with 345 additions and 304 deletions
|
|
@ -36,10 +36,10 @@ onMounted(() => {
|
|||
});
|
||||
</script>
|
||||
<template>
|
||||
<q-scroll-area style="height: 400px" class="bg-white row col-12">
|
||||
<div class="text-weight-bold text-body1">
|
||||
<span class="txt-under text-blue-5">องค์ประกอบที่ 1</span>
|
||||
<span> ผลสัมฤทธิ์ของงาน</span>
|
||||
<q-scroll-area style="height: 56vh" class="bg-white row col-12 text-dark q-pa-md">
|
||||
<div class="text-weight-bold text-body2">
|
||||
<span class="txt-under text-blue-6">องค์ประกอบที่ 1</span>
|
||||
<span class="q-ml-sm"> ผลสัมฤทธิ์ของงาน</span>
|
||||
</div>
|
||||
|
||||
<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_02" :title="`2. งานตามหน้าที่ความรับผิดชอบหลัก`" :page="2" />
|
||||
<Work v-model:data="rows_03" :title="`3. งานที่ได้รับมอบหมาย`" :page="3" />
|
||||
<div class="row text-body1 text-weight-bold">
|
||||
<div class="col-5 text-center">
|
||||
<div class="row text-body2 text-weight-bold">
|
||||
<div class="col-6 text-center row justify-center">
|
||||
<span>รวมผลการประเมิน (ร้อยละ) 100</span>
|
||||
<div class="text-primary q-pl-md">{{ total }}</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>
|
||||
<div class="text-primary q-pl-md">{{ resultWork }}</div>
|
||||
</div>
|
||||
<div class="col-1 text-primary">{{ resultWork }}</div>
|
||||
</div>
|
||||
|
||||
<q-separator class="q-py-xs" />
|
||||
<q-separator size="3px" class="q-my-lg" />
|
||||
|
||||
<!-- องค์ประกอบที่ 2 -->
|
||||
<div class="text-weight-bold text-body1 q-mb-sm">
|
||||
<span class="txt-under text-blue-5">องค์ประกอบที่ 2</span>
|
||||
<span> พฤติกรรมการปฎิบัติราชการ (สมรรถนะ)</span>
|
||||
<div class="text-weight-bold text-body2 q-mb-sm">
|
||||
<span class="txt-under text-blue-6">องค์ประกอบที่ 2</span>
|
||||
<span class="q-ml-sm"> พฤติกรรมการปฎิบัติราชการ (สมรรถนะ)</span>
|
||||
</div>
|
||||
|
||||
<Capacity v-model:data="rows_04" :title="`1. สมรรถนะหลัก`" :page="1" />
|
||||
<Capacity v-model:data="rows_05" :title="`2. สมรรถนะประจำกลุ่ม`" :page="2" />
|
||||
|
||||
<div class="row justify-evenly text-body1 text-weight-bold">
|
||||
<div class="col-5 text-right">
|
||||
<span>ผลการประเมินสมรรถนะ (20 คะแนน)</span>
|
||||
</div>
|
||||
<div class="col-5 text-primary">{{ resultEvaluation }}</div>
|
||||
<div class="row text-body2 text-weight-bold justify-center">
|
||||
<span>ผลการประเมินสมรรถนะ (20 คะแนน)</span>
|
||||
<div class="text-primary q-pl-md">{{ resultEvaluation }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-scroll-area>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
<template>
|
||||
<div>2</div>
|
||||
<div class="q-pa-md">2</div>
|
||||
</template>
|
||||
|
|
@ -1,3 +1,3 @@
|
|||
<template>
|
||||
<div>3</div>
|
||||
<div class="q-pa-md">3</div>
|
||||
</template>
|
||||
|
|
@ -1,3 +1,3 @@
|
|||
<template>
|
||||
<div>4</div>
|
||||
<div class="q-pa-md">4</div>
|
||||
</template>
|
||||
|
|
@ -4,7 +4,7 @@ import DialogHeader from "@/components/DialogHeader.vue";
|
|||
|
||||
const modal = defineModel<boolean>("modal", { required: true });
|
||||
const numpage = defineModel<number>("numpage", { required: true });
|
||||
const splitterModel = ref<number>(30);
|
||||
const splitterModel = ref<number>(25);
|
||||
const search = ref<string>("");
|
||||
|
||||
const define = ref<string>("");
|
||||
|
|
@ -88,7 +88,7 @@ function onSubmit() {}
|
|||
</script>
|
||||
<template>
|
||||
<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">
|
||||
<DialogHeader
|
||||
:tittle="
|
||||
|
|
@ -101,162 +101,156 @@ function onSubmit() {}
|
|||
<q-separator />
|
||||
|
||||
<q-card-section class="q-pa-none scroll" style="max-height: 80vh">
|
||||
<q-splitter v-model="splitterModel" disable>
|
||||
<template v-slot:before>
|
||||
<div class="bg-grey-1 q-pa-md">
|
||||
<q-input
|
||||
v-model="search"
|
||||
outlined
|
||||
dense
|
||||
label="ค้นหา"
|
||||
bg-color="white"
|
||||
:class="getclass()"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon v-if="search == ''" name="search" />
|
||||
<q-icon
|
||||
v-if="search !== ''"
|
||||
name="clear"
|
||||
class="cursor-pointer"
|
||||
@click="search = ''"
|
||||
/>
|
||||
</template>
|
||||
</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 class="col-12 row">
|
||||
<div class="bg-grey-1 q-pa-md col-xs-12 col-sm-4 col-md-3 row lineRight">
|
||||
<div class="col-12 fit">
|
||||
<div class="col-12 ">
|
||||
<q-input
|
||||
v-model="search"
|
||||
outlined
|
||||
dense
|
||||
label="ค้นหา"
|
||||
:class="getclass()"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon v-if="search == ''" name="search" />
|
||||
<q-icon
|
||||
v-if="search !== ''"
|
||||
name="clear"
|
||||
class="cursor-pointer"
|
||||
@click="search = ''"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<span>ชื่อตัวชี้วัด</span>
|
||||
<q-card bordered flat class="q-mt-sm 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>
|
||||
<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>
|
||||
|
||||
<q-separator />
|
||||
<q-card-section class="q-pa-none">
|
||||
<q-scroll-area
|
||||
style="height: 71vh"
|
||||
class="bg-white row col-12"
|
||||
>
|
||||
<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">
|
||||
<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-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 class="col-12">
|
||||
<q-input
|
||||
v-model="define"
|
||||
label="นิยามหรือความหมายของตัวชี้วัด"
|
||||
type="textarea"
|
||||
outlined
|
||||
autogrow
|
||||
dense
|
||||
:rules="[(val:string) => !!val || `${'กรุณากรอกตัวชี้วัด'}`,]"
|
||||
hide-bottom-space
|
||||
:class="getclass()"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<q-input
|
||||
v-model="formula"
|
||||
label="สูตรคำนวณ"
|
||||
type="textarea"
|
||||
outlined
|
||||
autogrow
|
||||
dense
|
||||
:rules="[(val:string) => !!val || `${'กรุณากรอกตัวชี้วัด'}`,]"
|
||||
hide-bottom-space
|
||||
:class="getclass()"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</q-splitter>
|
||||
</div>
|
||||
</q-card-section>
|
||||
<q-separator />
|
||||
|
||||
|
|
@ -278,4 +272,17 @@ function onSubmit() {}
|
|||
background: #ebf9f7 !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>
|
||||
|
|
|
|||
|
|
@ -110,115 +110,116 @@ function onSubmit() {}
|
|||
</script>
|
||||
<template>
|
||||
<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">
|
||||
<DialogHeader :tittle="`เพิ่มสมรรถนะ`" :close="closeDialog" />
|
||||
<q-separator />
|
||||
|
||||
<q-card-section class="q-pa-none scroll" style="max-height: 80vh">
|
||||
<q-splitter v-model="splitterModel" disable>
|
||||
<template v-slot:before>
|
||||
<div class="bg-grey-1 q-pa-md q-gutter-sm">
|
||||
<q-select
|
||||
v-model="type"
|
||||
outlined
|
||||
label="ประเภทสมรรถนะ"
|
||||
dense
|
||||
bg-color="white"
|
||||
option-label="name"
|
||||
option-value="id"
|
||||
:options="competencyTypeOp"
|
||||
emit-value
|
||||
:class="getclass()"
|
||||
map-options
|
||||
/>
|
||||
<q-input
|
||||
v-model="search"
|
||||
outlined
|
||||
dense
|
||||
label="ค้นหา"
|
||||
bg-color="white"
|
||||
:class="getclass()"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon v-if="search == ''" name="search" />
|
||||
<q-icon
|
||||
v-if="search !== ''"
|
||||
name="clear"
|
||||
class="cursor-pointer"
|
||||
@click="search = ''"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
<q-card flat bordered>
|
||||
<div class="row q-px-md q-py-sm items-center bg-grey-1">
|
||||
<div class="col-4">
|
||||
<span>รหัสตัวชี้วัด</span>
|
||||
<div class="col-12 row">
|
||||
<div class="bg-grey-1 q-pa-md col-xs-12 col-sm-4 col-md-3 row lineRight">
|
||||
<div class="col-12 q-col-gutter-sm fit">
|
||||
<div class="col-12 ">
|
||||
<q-select
|
||||
v-model="type"
|
||||
outlined
|
||||
label="ประเภทสมรรถนะ"
|
||||
dense
|
||||
bg-color="white"
|
||||
option-label="name"
|
||||
option-value="id"
|
||||
:options="competencyTypeOp"
|
||||
emit-value
|
||||
:class="getclass()"
|
||||
map-options
|
||||
/>
|
||||
</div>
|
||||
<div class="col-12 ">
|
||||
<q-input
|
||||
v-model="search"
|
||||
outlined
|
||||
dense
|
||||
label="ค้นหา"
|
||||
bg-color="white"
|
||||
:class="getclass()"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon v-if="search == ''" name="search" />
|
||||
<q-icon
|
||||
v-if="search !== ''"
|
||||
name="clear"
|
||||
class="cursor-pointer"
|
||||
@click="search = ''"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
</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 class="col-4">
|
||||
<span>ชื่อตัวชี้วัด</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<q-separator />
|
||||
<q-card-section class="q-pa-none">
|
||||
<q-scroll-area
|
||||
style="height: 33vh"
|
||||
class="bg-white row col-12"
|
||||
>
|
||||
<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-separator />
|
||||
<q-card-section class="q-pa-none">
|
||||
<q-list
|
||||
separator
|
||||
dense
|
||||
>
|
||||
<q-item-section class="q-pa-none">
|
||||
<div class="row items-center" style="height: 20px">
|
||||
<div class="col-4">
|
||||
<span>{{ item.metricCode }}</span>
|
||||
<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>
|
||||
<div class="col-4">
|
||||
<span>{{ item.indicatorName }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-scroll-area>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<template v-slot:after>
|
||||
<div class="row q-pa-md q-col-gutter-md">
|
||||
<div class="col-xs-12 col-sm-8 col-md-9 row">
|
||||
<div class="row col-12 q-pa-md q-col-gutter-sm">
|
||||
<div class="col-12">
|
||||
<span class="text-body1 text-weight-bold"
|
||||
<span class="text-body2 text-weight-medium"
|
||||
>รายละเอียดตัวชี้วัด</span
|
||||
>
|
||||
</div>
|
||||
<div class="col-8">
|
||||
<q-card bordered class="full-height">
|
||||
<div class="col-8 row">
|
||||
<q-card bordered class="fit q-pa-sm no-shadow">
|
||||
<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">
|
||||
<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-7">
|
||||
<div class="col-8">
|
||||
<span>{{
|
||||
formDetail[field] ? formDetail[field] : "-"
|
||||
}}</span>
|
||||
|
|
@ -227,19 +228,20 @@ function onSubmit() {}
|
|||
</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-4 row ">
|
||||
<q-card bordered class="col-12 row no-shadow">
|
||||
<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>
|
||||
<div
|
||||
v-for="(field, index) in Object.keys(fieldLabels)"
|
||||
:key="index + 1"
|
||||
class="col-12"
|
||||
>
|
||||
<div class="row q-py-lg">
|
||||
<div class="row col-12 q-py-sm">
|
||||
<div
|
||||
class="col-6 text-center text-body1 text-weight-bold"
|
||||
class="col-6 text-center text-body2"
|
||||
>
|
||||
{{ fieldLabels[field as keyof typeof fieldLabels] }}
|
||||
</div>
|
||||
|
|
@ -259,8 +261,8 @@ function onSubmit() {}
|
|||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</q-splitter>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
<q-separator />
|
||||
|
||||
|
|
@ -279,4 +281,17 @@ function onSubmit() {}
|
|||
background: #ebf9f7 !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>
|
||||
|
|
|
|||
|
|
@ -102,22 +102,24 @@ function onAdd() {
|
|||
}
|
||||
</script>
|
||||
<template>
|
||||
<q-card bordered style="border-radius: 5px">
|
||||
<q-card-section class="bg-grey-3 q-py-sm">
|
||||
<span class="text-weight-bold">{{ title }}</span>
|
||||
<q-card bordered style="border-radius: 5px" class="no-shadow">
|
||||
<q-card-section class="bg-grey-2 q-py-sm">
|
||||
<span class="text-weight-medium">{{ title }}</span>
|
||||
<q-btn
|
||||
class="q-ml-xs"
|
||||
flat
|
||||
round
|
||||
icon="mdi-plus"
|
||||
color="primary"
|
||||
size="md"
|
||||
size="12px"
|
||||
dense
|
||||
@click="onAdd"
|
||||
>
|
||||
<q-tooltip>เพิ่มข้อมูล</q-tooltip>
|
||||
</q-btn>
|
||||
</q-card-section>
|
||||
<q-card-section>
|
||||
<q-separator/>
|
||||
<q-card-section class="q-pa-sm">
|
||||
<q-table
|
||||
ref="table"
|
||||
:columns="columns"
|
||||
|
|
|
|||
|
|
@ -86,22 +86,23 @@ function onAdd() {
|
|||
}
|
||||
</script>
|
||||
<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">
|
||||
<span class="text-weight-bold">{{ title }}</span>
|
||||
<span class="text-weight-medium">{{ title }}</span>
|
||||
<q-btn
|
||||
class="q-ml-xs"
|
||||
flat
|
||||
round
|
||||
icon="mdi-plus"
|
||||
color="primary"
|
||||
size="md"
|
||||
size="12px"
|
||||
dense
|
||||
@click="onAdd"
|
||||
>
|
||||
<q-tooltip>เพิ่มข้อมูล</q-tooltip>
|
||||
</q-btn>
|
||||
</q-card-section>
|
||||
<q-card-section>
|
||||
<q-card-section class="q-pa-sm">
|
||||
<q-table
|
||||
ref="table"
|
||||
:columns="columns"
|
||||
|
|
|
|||
|
|
@ -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'" />
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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 />
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue