hrms-user/src/modules/08_KPI/components/Tab/04_Result.vue

688 lines
23 KiB
Vue

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useQuasar } from "quasar";
import { useCounterMixin } from "@/stores/mixin";
import { useKpiDataStore } from "@/modules/08_KPI/store";
import http from "@/plugins/http";
import config from "@/app.config";
import { useRoute } from "vue-router";
import genReport from "@/plugins/genreport";
const store = useKpiDataStore();
const $q = useQuasar();
const mixin = useCounterMixin();
const {
dialogConfirm,
success,
showLoader,
hideLoader,
dialogMessageNotify,
messageError,
} = mixin;
const separator = ref<any>("cell");
const route = useRoute();
const id = ref<string>(route.params.id as string);
const additionalSuperiorCommentRef = ref<any>(null);
const superiorCommentRef = ref<any>(null);
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>(0);
const result1 = ref<number>(0);
const weight2 = ref<number>(0);
const result2 = ref<number>(0);
const sumWeight = ref<number>(0);
const sumResult = ref<number>(0);
const result = ref<string>("");
function onSubmit() {
dialogConfirm($q, () => {
showLoader();
http
.put(config.API.kpiSendToReason(id.value, "user"), {
topicEvaluator: title.value,
developEvaluator: developmentMethod.value,
timeEvaluator: developmentPeriod.value,
reasonEvaluator: evaluatorComment.value,
})
.then((res) => {
success($q, "บันทึกข้อมูลสำเร็จ");
fetchEvaluation();
getData();
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
});
}
function onSubmitCommander() {
if (superiorCommentCheck.value == "") {
dialogMessageNotify($q, "กรุณาเลือกความคิดเห็น");
} else {
dialogConfirm($q, () => {
showLoader();
http
.put(config.API.kpiSendToReason(id.value, "commander"), {
isReason: superiorCommentCheck.value == "true" ? true : false,
reason: superiorComment.value,
})
.then((res) => {
success($q, "บันทึกข้อมูลสำเร็จ");
fetchEvaluation();
getData();
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
});
}
}
function onSubmitCommanderHigh() {
if (additionalSuperiorCheck.value == "") {
dialogMessageNotify($q, "กรุณาเลือกความคิดเห็น");
} else {
dialogConfirm($q, () => {
showLoader();
http
.put(config.API.kpiSendToReason(id.value, "commanderHigh"), {
isReason: additionalSuperiorCheck.value == "true" ? true : false,
reason: additionalSuperiorComment.value,
})
.then((res) => {
success($q, "บันทึกข้อมูลสำเร็จ");
fetchEvaluation();
getData();
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
});
}
}
function resetCommander() {
superiorComment.value = "";
superiorCommentRef.value.resetValidation();
}
function resetCommanderHigh() {
additionalSuperiorComment.value = "";
additionalSuperiorCommentRef.value.resetValidation();
}
/**
* ดึงข้อมูลการประเมิน
*/
async function fetchEvaluation() {
await http
.get(config.API.kpiEvaluation + `/${id.value}`)
.then(async (res) => {
const data = res.data.result;
// เก็บข้อมูลการประเมินเข้า store
store.dataEvaluation = await data;
// เช็คว่าถ้าผู้รับการประเมินเปิดการประเมินไปแล้วจะไม่ยิงอัปเดตสถานะการเปิดดูอีก แต่ถ้ายังไม่เคยเปิดจะยิงเพื่ออัปเดต
if (
!store.dataEvaluation.isOpen &&
data.profileId == store.dataProfile.profileId
) {
userOpen();
}
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
}
function userOpen() {
http.get(config.API.openPoint(id.value)).then(async (res) => {
// success($q, "เปิดการประเมินสำเร็จ");
});
}
function getData() {
http
.get(config.API.kpiSendToGet(id.value))
.then((res) => {
const data = res.data.result;
title.value = data.topicEvaluator;
developmentMethod.value = data.developEvaluator;
developmentPeriod.value = data.timeEvaluator;
evaluatorComment.value = data.reasonEvaluator;
superiorCommentCheck.value = data.isReasonCommander.toString();
superiorComment.value = data.reasonCommander;
additionalSuperiorCheck.value = data.isReasonCommanderHigh.toString();
additionalSuperiorComment.value = data.reasonCommanderHigh;
result1.value = data.totalPoint1;
result2.value = data.totalPoint2_1 + data.totalPoint2_2;
weight1.value = data.weightPoint1;
weight2.value = data.weightPoint2;
sumWeight.value = data.weightPoint1 + data.weightPoint2;
sumResult.value = data.summaryPoint;
result.value = data.evaluationResults;
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {});
}
/**
* ฟังก์ชันดาวน์โหลดรายงาน
*/
async function downloadReport() {
showLoader();
await http
.get(config.API.kpiReport(id.value))
.then(async (res) => {
console.log(res.data.result.data);
const data = res.data.result;
await genReport(
data,
"แบบรายงานผลการปฏิบัติราชการ " +
store.dataEvaluation.prefix +
store.dataEvaluation.fileName +
" " +
store.dataEvaluation.lastName
);
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
}
onMounted(() => {
getData();
fetchEvaluation();
});
</script>
<template>
<div class="q-pa-sm">
<!-- 1-4 สรปผลการประเม -->
<q-card bordered>
<q-form greedy @submit.prevent @validation-success="onSubmit">
<q-toolbar>
<q-toolbar-title class="text-subtitle2 text-bold"
>สรปผลการประเม</q-toolbar-title
>
<q-space />
<q-btn
v-if="store.dataEvaluation.evaluationStatus === 'COMPLETE'"
outline
flat
dense
color="blue"
icon="mdi-download"
size="12px"
class="q-mr-md"
@click="downloadReport"
>
<q-tooltip>ดาวนโหลดแบบรายงานผลการปฏราชการ</q-tooltip>
</q-btn>
</q-toolbar>
<q-separator />
<q-card-section>
<div class="row q-col-gutter-sm">
<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">องคประกอบท 1 ผลสมฤทธของงาน</td>
<td class="text-left">{{ weight1 }}</td>
<td class="text-left">{{ result1 }}</td>
</tr>
<tr>
<td class="text-left">
องคประกอบท 2 พฤตกรรมการปฎราชการ (สมรรถนะ)
</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="result"
checked-icon="task_alt"
unchecked-icon="panorama_fish_eye"
val="EXCELLENT"
label="ดีเด่น (คะแนนร้อยละ 90.00 ขึ้นไป)"
/>
<q-radio
v-model="result"
checked-icon="task_alt"
unchecked-icon="panorama_fish_eye"
val="VERY_GOOD"
label="ดีมาก (คะแนนร้อยละ 80.00 - 89.99)"
/>
<q-radio
v-model="result"
checked-icon="task_alt"
unchecked-icon="panorama_fish_eye"
val="GOOD"
label="ดี (คะแนนร้อยละ 70.00 - 79.99)"
/>
<q-radio
v-model="result"
checked-icon="task_alt"
unchecked-icon="panorama_fish_eye"
val="FAIR"
label="พอใช้ (คะแนนร้อยละ 60.00 - 69.99)"
/>
<q-radio
v-model="result"
checked-icon="task_alt"
unchecked-icon="panorama_fish_eye"
val="IMPROVEMENT"
label="ต้องปรับปรุง (คะแนนต่ำกว่าร้อยละ 60.00)"
/>
</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
lazy-rules
hide-bottom-space
type="textarea"
label="ชื่อเรื่อง/เนื้อหา/หัวข้อการพัฒนา"
:readonly="
store.rolePerson !== 'EVALUATOR' ||
store.dataEvaluation.evaluationStatus !== 'SUMMARY'
"
:rules="[(val:string) => !!val || `${'กรุณากรอกชื่อเรื่อง/เนื้อหา/หัวข้อการพัฒนา'}`,]"
/>
</div>
<div class="col-12">
<q-input
v-model="developmentMethod"
outlined
lazy-rules
hide-bottom-space
type="textarea"
label="วิธีการพัฒนา"
:readonly="
store.rolePerson !== 'EVALUATOR' ||
store.dataEvaluation.evaluationStatus !== 'SUMMARY'
"
:rules="[(val:string) => !!val || `${'กรุณากรอกวิธีการพัฒนา'}`,]"
/>
</div>
<div class="col-12">
<q-input
v-model="developmentPeriod"
outlined
hide-bottom-space
lazy-rules
type="textarea"
label="ช่วงเวลาการพัฒนา"
:readonly="
store.rolePerson !== 'EVALUATOR' ||
store.dataEvaluation.evaluationStatus !== 'SUMMARY'
"
:rules="[(val:string) => !!val || `${'กรุณากรอกช่วงเวลาการพัฒนา'}`,]"
/>
</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
lazy-rules
type="textarea"
hide-bottom-space
label="ความเห็นของผู้ประเมิน"
:readonly="
store.rolePerson !== 'EVALUATOR' ||
store.dataEvaluation.evaluationStatus !== 'SUMMARY'
"
:rules="[(val:string) => !!val || `${'กรุณากรอกความเห็นของ'}`,]"
/>
</div>
</div>
</q-card-section>
<q-separator
v-if="
store.rolePerson == 'EVALUATOR' &&
store.dataEvaluation.evaluationStatus == 'SUMMARY'
"
/>
<q-card-actions
v-if="
store.rolePerson == 'EVALUATOR' &&
store.dataEvaluation.evaluationStatus == 'SUMMARY'
"
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"
v-if="
evaluatorComment !== null && store.dataEvaluation.commanderId !== null
"
>
<q-form greedy @submit.prevent @validation-success="onSubmitCommander">
<q-toolbar>
<q-toolbar-title class="text-subtitle2 text-bold"
>ความเห็นของผู้บังคับบัญชาเหนือขึ้นไป</q-toolbar-title
>
</q-toolbar>
<q-separator />
<q-card-section>
<div class="row q-col-gutter-sm">
<div class="col-12">
<div class="column">
<q-radio
v-model="superiorCommentCheck"
checked-icon="task_alt"
unchecked-icon="panorama_fish_eye"
val="true"
:disable="
store.dataEvaluation.evaluationStatus !==
'SUMMARY_COMMANDER' ||
!(
store.dataEvaluation.evaluationStatus ==
'SUMMARY_COMMANDER' && store.rolePerson === 'COMMANDER'
)
"
label="เห็นด้วยกับผลการประเมิน"
@click="resetCommander()"
/>
<q-radio
v-model="superiorCommentCheck"
checked-icon="task_alt"
unchecked-icon="panorama_fish_eye"
val="false"
label="มีความเห็นต่าง ดังนี้"
:disable="
store.dataEvaluation.evaluationStatus !==
'SUMMARY_COMMANDER' ||
!(
store.dataEvaluation.evaluationStatus ==
'SUMMARY_COMMANDER' && store.rolePerson === 'COMMANDER'
)
"
/>
</div>
</div>
<div class="col-12">
<q-input
lazy-rules
v-model="superiorComment"
outlined
:readonly="
superiorCommentCheck == 'true' ||
store.dataEvaluation.evaluationStatus !==
'SUMMARY_COMMANDER' ||
!(
store.dataEvaluation.evaluationStatus ==
'SUMMARY_COMMANDER' && store.rolePerson === 'COMMANDER'
)
"
type="textarea"
label="ความเห็นของผู้บังคับบัญชาเหนือขึ้นไป"
hide-bottom-space
ref="superiorCommentRef"
:rules="[(val:string) => superiorCommentCheck !== 'false'||!!val || `${'กรุณากรอกความเห็น'}`,]"
/>
</div>
</div>
</q-card-section>
<div
v-if="
store.dataEvaluation.evaluationStatus == 'SUMMARY_COMMANDER' &&
store.rolePerson === 'COMMANDER'
"
>
<q-separator />
<q-card-actions align="right">
<q-btn label="บันทึก" color="secondary" type="submit"
><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
>
</q-card-actions>
</div>
</q-form>
</q-card>
<q-card
bordered
class="q-mt-md"
v-if="
store.dataEvaluation.evaluationStatus !== 'SUMMARY' &&
store.dataEvaluation.evaluationStatus !== 'SUMMARY_COMMANDER' &&
store.dataEvaluation.commanderHighId !== null
"
>
<q-form
greedy
@submit.prevent
@validation-success="onSubmitCommanderHigh"
>
<q-toolbar>
<q-toolbar-title class="text-subtitle2 text-bold"
>ความเห็นของผู้บังคับบัญชาเหนือขึ้นไปอีกชั้นหนึ่ง</q-toolbar-title
>
</q-toolbar>
<q-separator />
<q-card-section>
<div class="row q-col-gutter-sm">
<div class="col-12">
<div class="column">
<q-radio
:disable="
store.dataEvaluation.evaluationStatus !==
'SUMMARY_COMMANDER_HIGH' ||
!(
store.dataEvaluation.evaluationStatus ==
'SUMMARY_COMMANDER_HIGH' &&
store.rolePerson === 'COMMANDERHIGH'
)
"
v-model="additionalSuperiorCheck"
checked-icon="task_alt"
unchecked-icon="panorama_fish_eye"
val="true"
label="เห็นด้วยกับผลการประเมิน"
@click="resetCommanderHigh()"
/>
<q-radio
:disable="
store.dataEvaluation.evaluationStatus !==
'SUMMARY_COMMANDER_HIGH' ||
!(
store.dataEvaluation.evaluationStatus ==
'SUMMARY_COMMANDER_HIGH' &&
store.rolePerson === 'COMMANDERHIGH'
)
"
v-model="additionalSuperiorCheck"
checked-icon="task_alt"
unchecked-icon="panorama_fish_eye"
val="false"
label="มีความเห็นต่าง ดังนี้"
/>
</div>
</div>
<div class="col-12">
<q-input
lazy-rules
ref="additionalSuperiorCommentRef"
v-model="additionalSuperiorComment"
outlined
hide-bottom-space
type="textarea"
label="ความเห็นของผู้บังคับบัญชาเหนือขึ้นไปอีกชั้นหนึ่ง"
:readonly="
additionalSuperiorCheck == 'true' ||
store.dataEvaluation.evaluationStatus !==
'SUMMARY_COMMANDER_HIGH' ||
!(
store.dataEvaluation.evaluationStatus ==
'SUMMARY_COMMANDER_HIGH' &&
store.rolePerson === 'COMMANDERHIGH'
)
"
:rules="[(val:string) => additionalSuperiorCheck !== 'false'||!!val || `${'กรุณากรอกความเห็น'}`,]"
/>
</div>
</div>
</q-card-section>
<div
v-if="
store.dataEvaluation.evaluationStatus == 'SUMMARY_COMMANDER_HIGH' &&
store.rolePerson === 'COMMANDERHIGH'
"
>
<q-separator />
<q-card-actions align="right">
<q-btn label="บันทึก" color="secondary" type="submit"
><q-tooltip>นทกขอม</q-tooltip></q-btn
>
</q-card-actions>
</div>
</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>