KPI + UI สรุปผล
This commit is contained in:
STW_TTTY\stwtt
parent
defcfd56da
commit
abd7cd8beb
13 changed files with 1011 additions and 75 deletions
|
|
@ -1,3 +1,390 @@
|
|||
<script setup lang="ts">
|
||||
import { computed, ref } from "vue";
|
||||
|
||||
const separator = ref<any>("cell");
|
||||
|
||||
const title = ref<string>("");
|
||||
const developmentMethod = ref<string>("");
|
||||
const developmentPeriod = ref<string>("");
|
||||
|
||||
const evaluatorComment = ref<string>("");
|
||||
const superiorComment = ref<string>("");
|
||||
const additionalSuperiorComment = ref<string>("");
|
||||
|
||||
const superiorCommentCheck = ref<string>("");
|
||||
const additionalSuperiorCheck = ref<string>("");
|
||||
|
||||
const weight1 = ref<number>(10);
|
||||
const result1 = ref<number>(20);
|
||||
const weight2 = ref<number>(50);
|
||||
const result2 = ref<number>(60);
|
||||
const sumWeight = computed(() => {
|
||||
return weight1.value + weight2.value;
|
||||
});
|
||||
const sumResult = computed(() => {
|
||||
return result1.value + result2.value;
|
||||
});
|
||||
|
||||
const group = computed(() => {
|
||||
return convert(sumResult.value);
|
||||
});
|
||||
const options = ref<any[]>([
|
||||
{
|
||||
label: "ดีเด่น (คะแนนร้อยละ ๙๐.๐๐ ขึ้นไป)",
|
||||
value: "EXCELLENT",
|
||||
},
|
||||
{
|
||||
label: "ดีมาก (คะแนนร้อยละ ๘๐.๐๐ - ๘๙.๙๙)",
|
||||
value: "VERYGOOD",
|
||||
},
|
||||
{
|
||||
label: "ดี (คะแนนร้อยละ ๗๐.๐๐ - ๗๙.๙๙)",
|
||||
value: "GOOD",
|
||||
},
|
||||
{
|
||||
label: "พอใช้ (คะแนนร้อยละ ๖๐.๐๐ - ๖๙.๙๙)",
|
||||
value: "FAIR",
|
||||
},
|
||||
{
|
||||
label: "ต้องปรับปรุง (คะแนนต่ำกว่าร้อยละ ๖๐.๐๐)",
|
||||
value: "IMPROVEMENT",
|
||||
},
|
||||
]);
|
||||
|
||||
function convert(score: any): string {
|
||||
if (score >= 90) {
|
||||
return "EXCELLENT";
|
||||
} else if (score >= 80) {
|
||||
return "VERYGOOD";
|
||||
} else if (score >= 70) {
|
||||
return "GOOD";
|
||||
} else if (score >= 60) {
|
||||
return "FAIR";
|
||||
} else {
|
||||
return "IMPROVEMENT";
|
||||
}
|
||||
}
|
||||
|
||||
function onSubmit(){
|
||||
|
||||
}
|
||||
|
||||
function onSubmitCommander(){
|
||||
|
||||
}
|
||||
function onSubmitCommanderHigh(){
|
||||
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<div class="q-pa-md">สรุปผลการประเมิน</div>
|
||||
<div class="q-pa-sm ">
|
||||
<!-- 1-4 สรุปผลการประเมิน -->
|
||||
<q-card bordered>
|
||||
<q-form greedy @submit.prevent @validation-success="onSubmit">
|
||||
<q-card-section>
|
||||
<div class="row q-col-gutter-sm">
|
||||
<div class="col-12">
|
||||
<div class="text-weight-bold text-body2">
|
||||
<span class="txt-under text-blue-6">สรุปผลการประเมิน</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<q-markup-table
|
||||
:separator="separator"
|
||||
flat
|
||||
bordered
|
||||
class="custom-table2"
|
||||
>
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="text-left txt-customHead">
|
||||
องค์ประกอบการประเมิน
|
||||
</th>
|
||||
<th class="text-left txt-customHead">น้ำหนักคะแนน</th>
|
||||
<th class="text-left txt-customHead">ผลการประเมิน</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="text-left">องค์ประกอบที่ ๑ ผลสัมฤทธิ์ของงาน</td>
|
||||
<td class="text-left">{{ weight1 }}</td>
|
||||
<td class="text-left">{{ result1 }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-left">
|
||||
องค์ประกอบที่ ๒ พฤติกรรมการปฎิบัติราชการ (สมรรถนะ)
|
||||
</td>
|
||||
<td class="text-left">{{ weight2 }}</td>
|
||||
<td class="text-left">{{ result2 }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-right text-bold" style="font-size: 16px">
|
||||
รวม
|
||||
</td>
|
||||
<td class="text-left">{{ sumWeight }}</td>
|
||||
<td class="text-left">{{ sumResult }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</q-markup-table>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="text-weight-bold text-body2">
|
||||
<span class="txt-under text-blue-6">ระดับผลการประเมิน</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 no-pointer">
|
||||
<div class="column">
|
||||
<q-radio
|
||||
v-model="group"
|
||||
checked-icon="task_alt"
|
||||
unchecked-icon="panorama_fish_eye"
|
||||
val="EXCELLENT"
|
||||
label="ดีเด่น (คะแนนร้อยละ ๙๐.๐๐ ขึ้นไป)"
|
||||
/>
|
||||
<q-radio
|
||||
v-model="group"
|
||||
checked-icon="task_alt"
|
||||
unchecked-icon="panorama_fish_eye"
|
||||
val="VERYGOOD"
|
||||
label="ดีมาก (คะแนนร้อยละ ๘๐.๐๐ - ๘๙.๙๙)"
|
||||
/>
|
||||
<q-radio
|
||||
v-model="group"
|
||||
checked-icon="task_alt"
|
||||
unchecked-icon="panorama_fish_eye"
|
||||
val="GOOD"
|
||||
label="ดี (คะแนนร้อยละ ๗๐.๐๐ - ๗๙.๙๙)"
|
||||
/>
|
||||
<q-radio
|
||||
v-model="group"
|
||||
checked-icon="task_alt"
|
||||
unchecked-icon="panorama_fish_eye"
|
||||
val="FAIR"
|
||||
label="พอใช้ (คะแนนร้อยละ ๖๐.๐๐ - ๖๙.๙๙)"
|
||||
/>
|
||||
<q-radio
|
||||
v-model="group"
|
||||
checked-icon="task_alt"
|
||||
unchecked-icon="panorama_fish_eye"
|
||||
val="IMPROVEMENT"
|
||||
label="ต้องปรับปรุง (คะแนนต่ำกว่าร้อยละ ๖๐.๐๐)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="text-weight-bold text-body2">
|
||||
<span class="txt-under text-blue-6">ความรู้/ทักษะ/สมรรถนะ</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-input
|
||||
v-model="title"
|
||||
outlined
|
||||
type="textarea"
|
||||
label="ชื่อเรื่อง/เนื้อหา/หัวข้อการพัฒนา"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<q-input
|
||||
v-model="developmentMethod"
|
||||
outlined
|
||||
type="textarea"
|
||||
label="วิธีการพัฒนา"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<q-input
|
||||
v-model="developmentPeriod"
|
||||
outlined
|
||||
type="textarea"
|
||||
label="ช่วงเวลาการพัฒนา"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="text-weight-bold text-body2">
|
||||
<span class="txt-under text-blue-6">ความเห็นของผู้ประเมิน</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<q-input
|
||||
v-model="evaluatorComment"
|
||||
outlined
|
||||
type="textarea"
|
||||
label="ความเห็นของผู้ประเมิน"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
<q-separator />
|
||||
<q-card-actions align="right">
|
||||
<q-btn label="บันทึก" color="secondary" type="submit"
|
||||
><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
|
||||
>
|
||||
</q-card-actions>
|
||||
</q-form>
|
||||
</q-card>
|
||||
|
||||
<q-card bordered class="q-mt-md">
|
||||
<q-form greedy @submit.prevent @validation-success="onSubmitCommander">
|
||||
<q-card-section>
|
||||
<div class="row q-gutter-sm">
|
||||
<div class="col-12">
|
||||
<div class="text-weight-bold text-body2">
|
||||
<span class="txt-under text-blue-6"
|
||||
>ความเห็นของผู้บังคับบัญชาเหนือขึ้นไป</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="column">
|
||||
<q-radio
|
||||
v-model="superiorCommentCheck"
|
||||
checked-icon="task_alt"
|
||||
unchecked-icon="panorama_fish_eye"
|
||||
val="true"
|
||||
label="เห็นด้วยกับผลการประเมิน"
|
||||
/>
|
||||
<q-radio
|
||||
v-model="superiorCommentCheck"
|
||||
checked-icon="task_alt"
|
||||
unchecked-icon="panorama_fish_eye"
|
||||
val="false"
|
||||
label="มีความเห็นตามดังนี้"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-input
|
||||
v-model="superiorComment"
|
||||
outlined
|
||||
type="textarea"
|
||||
label="ความเห็นของผู้บังคับบัญชาเหนือขึ้นไป"
|
||||
:readonly="superiorCommentCheck == 'true'"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
<q-separator />
|
||||
<q-card-actions align="right">
|
||||
<q-btn label="บันทึก" color="secondary" type="submit"
|
||||
><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
|
||||
>
|
||||
</q-card-actions>
|
||||
</q-form>
|
||||
</q-card>
|
||||
|
||||
<q-card bordered class="q-mt-md">
|
||||
<q-form greedy @submit.prevent @validation-success="onSubmitCommanderHigh">
|
||||
<q-card-section>
|
||||
<div class="row q-gutter-sm">
|
||||
<div class="col-12">
|
||||
<div class="text-weight-bold text-body2">
|
||||
<span class="txt-under text-blue-6"
|
||||
>ความเห็นของผู้บังคับบัญชาเหนือขึ้นไปอีกชั้นหนึ่ง</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="column">
|
||||
<q-radio
|
||||
v-model="additionalSuperiorCheck"
|
||||
checked-icon="task_alt"
|
||||
unchecked-icon="panorama_fish_eye"
|
||||
val="true"
|
||||
label="เห็นด้วยกับผลการประเมิน"
|
||||
/>
|
||||
<q-radio
|
||||
v-model="additionalSuperiorCheck"
|
||||
checked-icon="task_alt"
|
||||
unchecked-icon="panorama_fish_eye"
|
||||
val="false"
|
||||
label="มีความเห็นตามดังนี้"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<q-input
|
||||
v-model="additionalSuperiorComment"
|
||||
outlined
|
||||
type="textarea"
|
||||
label="ความเห็นของผู้บังคับบัญชาเหนือขึ้นไปอีกชั้นหนึ่ง"
|
||||
:readonly="additionalSuperiorCheck == 'true'"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
<q-separator />
|
||||
<q-card-actions align="right">
|
||||
<q-btn label="บันทึก" color="secondary" type="submit"
|
||||
><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
|
||||
>
|
||||
</q-card-actions>
|
||||
</q-form>
|
||||
</q-card>
|
||||
</div>
|
||||
</template>
|
||||
<style scoped>
|
||||
.no-pointer {
|
||||
pointer-events: none;
|
||||
}
|
||||
.txt-customHead {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
.txt-under {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.custom-table2 {
|
||||
max-height: 64vh;
|
||||
|
||||
.q-table tr:nth-child(odd) td {
|
||||
background: white;
|
||||
}
|
||||
|
||||
.q-table tr:nth-child(even) td {
|
||||
background: #f8f8f8;
|
||||
}
|
||||
|
||||
.q-table thead tr {
|
||||
background: #ecebeb;
|
||||
}
|
||||
|
||||
.q-table thead tr th {
|
||||
position: sticky;
|
||||
}
|
||||
|
||||
.q-table td:nth-of-type(2) {
|
||||
z-index: 3 !important;
|
||||
}
|
||||
|
||||
.q-table th:nth-of-type(2),
|
||||
.q-table td:nth-of-type(2) {
|
||||
position: sticky;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* this will be the loading indicator */
|
||||
.q-table thead tr:last-child th {
|
||||
/* height of all previous header rows */
|
||||
top: 48px;
|
||||
}
|
||||
|
||||
.q-table thead tr:first-child th {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.q-btn-group--outline > .q-btn-item:not(:last-child):before {
|
||||
border-right: 1px solid #c4c4c4;
|
||||
}
|
||||
.q-btn-group--outline > .q-btn-item.active {
|
||||
color: #2196f3 !important;
|
||||
background-color: #fff;
|
||||
}
|
||||
.q-btn-group--outline > .q-btn-item.active:not(:last-child):before {
|
||||
border: 1px solid #2196f3;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue