hrms-user/src/modules/08_KPI/views/form.vue

1368 lines
47 KiB
Vue

<script setup lang="ts">
import { ref, onMounted, reactive, computed } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useQuasar } from "quasar";
import genReport from "@/plugins/genreport";
import axios from "axios";
import http from "@/plugins/http";
import config from "@/app.config";
import { useCounterMixin } from "@/stores/mixin";
import { useKpiDataStore } from "@/modules/08_KPI/store";
import type { FormProfile } from "@/modules/08_KPI/interface/request/index";
import type {
DataOptions,
EvaluatorType,
} from "@/modules/08_KPI/interface/index/Main";
import type { EvaOptionType } from "@/modules/08_KPI/interface/response/index";
import TabMain from "@/modules/08_KPI/components/Tab/TabMain.vue";
import DialogHeader from "@/components/DialogHeader.vue";
import DialogGovernment from "@/modules/08_KPI/components/Tab/Dialog/DialogGovernment.vue";
interface ArrayFileList {
id: string;
pathName: string;
fileName: string;
}
const $q = useQuasar();
const store = useKpiDataStore();
const mixin = useCounterMixin();
const {
showLoader,
hideLoader,
messageError,
dialogConfirm,
success,
findOrgName,
findOrgNameHtml,
dialogRemove,
} = mixin;
const route = useRoute();
const router = useRouter();
const id = ref<string>(route.params.id as string);
const modalUpload = ref<boolean>(false);
const fileUpload = ref<any>(null);
const fileList = ref<ArrayFileList[]>([]);
const modalGovernment = ref<boolean>(false); // ตัวแปร dialog ช่วยราชการ
const modalEdit = ref<boolean>(false); // ตัวแปร dialog แก้ไขผู้ประเมิน
const isReadonly = <boolean>(route.name === "KPIEditEvaluator" ? true : false);
const evaluatorIdOp = ref<DataOptions[]>([]); // ตัวแปรเก็บ option ผู้ประเมิน
const commanderIdOp = ref<DataOptions[]>([]); // ตัวแปรเก็บ option ผู้บังคับบัญชา
const commanderHighOp = ref<DataOptions[]>([]); // ตัวแปรเก็บ option ผู้บังคับบัญชาเหนือไปอีกขั้น
const evaluatorIdMainOp = ref<DataOptions[]>([]); // ตัวแปรเก็บ option ผู้ประเมิน
const commanderIdMainOp = ref<DataOptions[]>([]); // ตัวแปรเก็บ option ผู้บังคับบัญชา
const commanderHighMainOp = ref<DataOptions[]>([]); // ตัวแปรเก็บ option ผู้บังคับบัญชาเหนือไปอีกขั้น
const evaluatorId = ref<any>(null); // ตัวแปรเก็บ id ผู้ประเมิน
const commanderId = ref<any>(null); // ตัวแปรเก็บ id ผู้บังคับบัญชา
const commanderHighId = ref<any>(null); // ตัวแปรเก็บ id ผู้บังคับบัญชาเหนือไปอีกขั้น
const formProfile = reactive<FormProfile>({
fullName: "",
position: "",
type: "",
level: "",
status: "",
result: "",
score: "-",
avartar: "",
});
/** ฟังชั่นดึงข้อมูล ผู้ประเมิน */
async function fetchEvaluation() {
await http
.get(config.API.kpiEvaluation + `/${id.value}`)
.then(async (res) => {
const data = await res.data.result;
store.dataEvaluation = await res.data.result;
formProfile.status = store.convertStatus(data.evaluationStatus);
formProfile.result = store.convertResults(data.evaluationResults);
store.checkCompetencyDefaultCompetencyLevel();
await getAvatar(data.profileId);
})
.catch((e) => {
messageError($q, e);
});
}
async function getAvatar(id: string) {
await http
.get(config.API.orgCheckAvatar(id))
.then(async (res) => {
const data = await res.data.result;
if (data.avatarName) {
await fetchProfile(id, data.avatarName);
}
})
.catch((e) => {
messageError($q, e);
});
}
/** ดึงข้อมูล เพื่อเก็บรูปโปรไฟล์ */
async function fetchProfile(id: string, avatarName: string) {
http
.get(config.API.fileByFile("ทะเบียนประวัติ", "โปรไฟล์", id, avatarName))
.then(async (res) => {
store.dataEvaluation.avartar = res.data.downloadUrl;
});
}
/** เปิด dialog แก้ไขผู้ประเมิน */
function openEvaluator() {
modalEdit.value = true;
getOrgOp();
}
/** ปิด dialog */
function close() {
modalEdit.value = false;
evaluatorId.value = null;
commanderId.value = null;
commanderHighId.value = null;
}
/** บันทึกข้อมูล */
function onSubmit() {
dialogConfirm($q, () => {
if (id.value) {
showLoader();
http
.put(config.API.kpiEvaluationCheck + `/${id.value}`, {
evaluatorId: evaluatorId.value ? evaluatorId.value.id : null,
commanderId: commanderId.value ? commanderId.value.id : null,
commanderHighId: commanderHighId.value
? commanderHighId.value.id
: null,
})
.then(async () => {
await Promise.all([fetchEvaluation(), getOrgOp()]);
success($q, "บันทึกสำเร็จ");
close();
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
}
});
}
/** ดึงข้อมูล ผู้ประเมิน */
async function getOrgOp() {
http
.get(config.API.Kpiorg)
.then((res) => {
const data = res.data.result;
evaluatorIdMainOp.value = data.caregiver.map((i: EvaOptionType) => ({
id: i.id,
name: `${i.prefix}${i.firstName} ${i.lastName}`,
}));
commanderIdMainOp.value = data.commander.map((i: EvaOptionType) => ({
id: i.id,
name: `${i.prefix}${i.firstName} ${i.lastName}`,
}));
commanderHighMainOp.value = data.chairman.map((i: EvaOptionType) => ({
id: i.id,
name: `${i.prefix}${i.firstName} ${i.lastName}`,
}));
evaluatorId.value = data.caregiver
.map((i: EvaOptionType) => ({
id: i.id,
name: `${i.prefix}${i.firstName} ${i.lastName}`,
}))
.find((i: EvaOptionType) => i.id == store.dataEvaluation.evaluatorId);
commanderId.value = data.commander
.map((i: EvaOptionType) => ({
id: i.id,
name: `${i.prefix}${i.firstName} ${i.lastName}`,
}))
.find((i: EvaOptionType) => i.id == store.dataEvaluation.commanderId);
commanderHighId.value = data.chairman
.map((i: EvaOptionType) => ({
id: i.id,
name: `${i.prefix}${i.firstName} ${i.lastName}`,
}))
.find(
(i: EvaOptionType) => i.id == store.dataEvaluation.commanderHighId
);
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {});
}
/** ฟิลเตอร์ input */
function filterOption(val: string, update: Function, refData: string) {
switch (refData) {
case "evaluatorIdOp":
update(() => {
evaluatorIdOp.value = evaluatorIdMainOp.value.filter(
(v: DataOptions) => v.name.indexOf(val) > -1
);
});
break;
case "commanderIdOp":
update(() => {
commanderIdOp.value = commanderIdMainOp.value.filter(
(v: DataOptions) => v.name.indexOf(val) > -1
);
});
break;
case "commanderHighOp":
update(() => {
commanderHighOp.value = commanderHighMainOp.value.filter(
(v: DataOptions) => v.name.indexOf(val) > -1
);
});
break;
default:
break;
}
}
/** ดึงข้อมูลทั้งหมดในหน้า */
async function getAll() {
await Promise.all([fetchEvaluation(), getOrgOp(), getProfile()]);
await store.checkStep();
}
/** ส่งให้ผู้ประเมิน */
function sendToEvaluatore() {
dialogConfirm(
$q,
() => {
if (id.value) {
showLoader();
http
.put(config.API.kpiSendToStatus(id.value), {
status: "NEW_EVALUATOR",
})
.then(async () => {
await fetchEvaluation();
await success($q, "ส่งข้อตกลงให้ผู้ประเมินอนุมัติสำเร็จ");
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
}
},
"ยืนยันการส่งข้อตกลงให้ผู้ประเมินอนุมัติ",
"ต้องการยืนยันส่งข้อตกลงนี้ให้ผู้ประเมินอนุมัติใช่หรือไม่?"
);
}
/**
* ยืนยันการส่งให้ผู้ประเมินรายงานผลสำเร็จของงาน
*/
function sendToEvaluateEvaluatore() {
dialogConfirm(
$q,
() => {
if (id.value) {
showLoader();
http
.put(config.API.kpiSendToStatus(id.value), {
status: "EVALUATING_EVALUATOR",
})
.then(async () => {
await fetchEvaluation();
await success($q, "ส่งให้ผู้ประเมินรายงานผลสำเร็จของงานสำเร็จ");
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
}
},
"ยืนยันการส่งให้ผู้ประเมินรายงานผลสำเร็จของงาน",
"ต้องการยืนยันส่งให้ผู้ประเมินรายงานผลสำเร็จของงานใช่หรือไม่?"
);
}
/**
* ยืนยันการขอแก้ไขข้อตกลง
*/
function requireEdit() {
dialogConfirm(
$q,
() => {
if (id.value) {
showLoader();
http
.put(config.API.kpiReqEdit(id.value), {
status: "EVALUATOR",
})
.then(async (res) => {
await fetchEvaluation();
await success($q, "ขอแก้ไขสำเร็จ");
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
}
},
"ยืนยันการขอแก้ไขข้อตกลง",
"ต้องการยืนยันการขอแก้ไขข้อตกลงนี้ใช่หรือไม่?"
);
}
/** เปิด dialog ช่วยราชการ */
function openGovernment() {
modalGovernment.value = true;
}
/** เช็ค สถานะการทดลองงาน */
function openStatus() {
router.push(`/probation-detail/${store.dataEvaluation.id}`);
}
/** ส่งให้ผู้ประเมิน */
function sendToEvauator() {
dialogConfirm($q, () => {
showLoader();
http
.post(config.API.sendToCommander, {
status: "EVALUATING",
id: [store.dataEvaluation.id],
})
.then(async () => {
await getAll();
store.tabMain = "3";
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
});
}
/**
* ยืนยันการส่งไปสรุปผลการประเมิน
*/
async function goToSummary() {
dialogConfirm(
$q,
async () => {
showLoader();
await http
.get(config.API.sendToSummary(store.dataEvaluation.id))
.then(async () => {
await http
.put(
config.API.updatePoint(store.dataEvaluation.id),
store.dataEvaluation.posTypeName != "อำนวยการ" &&
store.dataEvaluation.posTypeName != "บริหาร"
? {
totalPoint1: store.indicatorScoreVal.toFixed(2),
totalPoint2_1: store.competencyScoreVal.toFixed(2),
totalPoint2_2: store.devScoreVal.toFixed(2),
summaryPoint: (
store.indicatorScoreVal +
store.competencyScoreVal +
store.devScoreVal
).toFixed(2),
}
: {
totalPoint1: (
store.excusiveIndicator1ScoreVal +
store.excusiveIndicator2ScoreVal
).toFixed(2),
totalPoint2_1: store.competencyScoreVal.toFixed(2),
summaryPoint: (
store.excusiveIndicator1ScoreVal +
store.excusiveIndicator2ScoreVal +
store.competencyScoreVal
).toFixed(2),
}
)
.then((res) => {});
await fetchEvaluation();
store.tabMain = "4";
store.tabOpen = 4;
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
},
"ยืนยันการส่งไปสรุปผลการประเมิน",
"ต้องการยืนยันส่งไปสรุปผลการประเมินใช่หรือไม่?"
);
}
/**
* เปิด dialog ข้อมูลผู้ประเมิน
* @param profileId id ผู้ประเมิน
* @param type ประเภท
*/
const modalEvaluatorDetail = ref<boolean>(false);
const topic = ref<string>("");
function viewEvaluatorDetail(profileId: string, type: string) {
modalEvaluatorDetail.value = true;
topic.value =
type == "evaluator"
? "ข้อมูลของผู้ประเมิน"
: type == "commander"
? "ข้อมูลของผู้บังคับบัญชาเหนือขึ้นไป"
: "ข้อมูลของผู้บังคับบัญชาเหนือขึ้นไปอีกชั้นหนึ่ง";
fetchProfileEvaluator(profileId);
}
const evaluator = ref<EvaluatorType>({
fullName: "",
position: "",
avartar: "",
posTypeName: "",
posLevelName: "",
org: "",
posExecutiveName: "",
isPosmasterAct: false,
posmasterAct: [],
});
/**
* ข้อมูลของผู้ประเมิน
* @param id ข้อมูลของผู้ประเมิน
*/
async function fetchProfileEvaluator(id: string) {
showLoader();
http
.get(config.API.orgPosition + `/${id}`)
.then(async (res) => {
const data = await res.data.result;
evaluator.value.fullName =
data.prefix + data.firstName + " " + data.lastName;
evaluator.value.position = data.position;
evaluator.value.posTypeName = data.posTypeName;
evaluator.value.posLevelName = data.posLevelName;
evaluator.value.isPosmasterAct = data.isPosmasterAct;
evaluator.value.posmasterAct = data.posmasterAct;
evaluator.value.org = await findOrgNameHtml(data);
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
}
/** ดึงข้อมูลโปรไฟล์ */
async function getProfile() {
await http
.get(config.API.profilePosition())
.then(async (res) => {
const data = await res.data.result;
store.dataProfile = await data;
})
.catch((e) => {
messageError($q, e);
});
}
async function downloadReport() {
await http
.get(config.API.kpiReportList(id.value))
.then(async (res) => {
const data = res.data.result;
await genReport(
data,
"แบบกำหนดข้อตกลง" +
store.dataEvaluation.prefix +
store.dataEvaluation.firstName +
" " +
store.dataEvaluation.lastName
);
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {});
}
async function uploadReport() {
modalUpload.value = true;
getData();
}
function closeDialog() {
modalUpload.value = false;
fileUpload.value = null;
}
/** ฟังชั่น อัปโหลดไฟล์ */
async function clickUpload(file: any) {
const fileName = { fileName: file.name };
dialogConfirm(
$q,
async () => {
showLoader();
const selectedFile = file;
const formdata = new FormData();
formdata.append("file", selectedFile);
await http
.post(config.API.file("แบบกำหนดข้อตกลง", "KPI", id.value), {
replace: true,
fileList: fileName,
})
.then(async (res) => {
const foundKey: string | undefined = Object.keys(res.data).find(
(key) =>
res.data[key]?.fileName !== undefined &&
res.data[key]?.fileName !== ""
);
foundKey &&
uploadFileDoc(res.data[foundKey]?.uploadUrl, fileUpload.value);
})
.catch((err) => {
messageError($q, err);
});
},
"ยืนยันการอัปโหลดไฟล์",
"ต้องการยืนยันการอัปโหลดไฟล์นี้หรือไม่ ?"
);
}
/**
* อัปโหลดไฟล์
* @param uploadUrl url
* @param file ไฟล์
*/
async function uploadFileDoc(uploadUrl: string, file: any) {
const Data = new FormData();
Data.append("file", fileUpload.value);
await axios
.put(uploadUrl, file, {
headers: {
"Content-Type": file.type,
},
})
.then(async (res) => {
await getData();
success($q, "อัปโหลดไฟล์สำเร็จ");
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
fileUpload.value = null;
hideLoader();
});
}
/** ดึงข้อมูล */
async function getData() {
showLoader();
await http
.get(config.API.file("แบบกำหนดข้อตกลง", "KPI", id.value))
.then((res) => {
fileList.value = res.data;
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
}
/**
* ลบไฟล์
* @param fileName file name
*/
function deleteFile(fileName: string) {
dialogRemove($q, async () => {
showLoader();
http
.delete(
config.API.file("แบบกำหนดข้อตกลง", "KPI", id.value) + `/${fileName}`
)
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
await getData();
setTimeout(() => {
success($q, `ลบไฟล์สำเร็จ`);
hideLoader();
}, 500);
});
});
}
/**
* ดาวน์โหลดลิงก์ไฟล์
* @param fileName file name
*/
function downloadFile(fileName: string) {
showLoader();
http
.get(config.API.file("แบบกำหนดข้อตกลง", "KPI", id.value) + `/${fileName}`)
.then((res) => {
const data = res.data.downloadUrl;
window.open(data, "_blank");
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
hideLoader();
});
}
const sizeImg = ref<any>();
function onResize(size: { width: any; height: any }) {
if (size.height <= 156) {
sizeImg.value = "80px";
} else if (size.height > 156) {
sizeImg.value = "120px";
}
}
onMounted(async () => {
showLoader();
store.isUpdate = false;
await getAll();
});
</script>
<template>
<div class="col-12 row justify-center">
<div class="col-xs-12 col-sm-12 col-md-11">
<div class="toptitle text-white col-12 row items-center">
<q-btn
icon="mdi-arrow-left"
unelevated
round
dense
flat
color="primary"
class="q-mr-sm"
@click="
isReadonly ? router.push(`/KPI-evaluator`) : router.push(`/KPI`)
"
/>
{{
isReadonly
? "รายละเอียดการประเมินผลการปฏิบัติราชการระดับบุคคล"
: id
? `แก้ไขแบบประเมิน`
: `เพิ่มแบบประเมิน`
}}
<q-space />
</div>
<div class="col-12">
<q-card bordered flat class="relative-position">
<div class="row justify-center q-pa-md" v-if="!$q.screen.gt.xs">
<q-avatar :size="sizeImg">
<q-img
:src="store.dataEvaluation.avartar"
v-if="store.dataEvaluation.avartar !== undefined"
/>
<q-img src="@/assets/avatar_user.jpg" v-else />
</q-avatar>
</div>
<div
v-if="$q.screen.gt.xs"
class="absolute-center-left"
style="left: 2%; top: 50%; transform: translateY(-50%)"
>
<q-avatar :size="sizeImg">
<q-img
:src="store.dataEvaluation.avartar"
v-if="store.dataEvaluation.avartar !== undefined"
/>
<q-img src="@/assets/avatar_user.jpg" v-else />
</q-avatar>
</div>
<div class="row col-12">
<q-resize-observer @resize="onResize" />
<div class="row items-center col-12 q-pa-sm">
<div
class="col-12"
:style="$q.screen.gt.xs ? 'padding-left: 12%' : ''"
>
<div class="row col-12 items-center justify-center">
<div>
<span class="text-h6 text-weight-medium text-primary">{{
store.dataEvaluation.firstName
? `${store.dataEvaluation.prefix}${store.dataEvaluation.firstName} ${store.dataEvaluation.lastName}`
: ""
}}</span>
<p class="q-mb-none text-html">
{{ findOrgNameHtml(store.dataEvaluation) }}
</p>
</div>
<q-space v-if="$q.screen.gt.xs" />
<div class="q-gutter-x-sm">
<span
v-if="
store.tabMain === '1' &&
store.dataEvaluation.evaluationStatus == 'NEW' &&
((store.dataEvaluation.posTypeName != 'อำนวยการ' &&
store.dataEvaluation.posTypeName != 'บริหาร' &&
store.indicatorWeightTotal != 100) ||
((store.dataEvaluation.posTypeName == 'อำนวยการ' ||
store.dataEvaluation.posTypeName == 'บริหาร') &&
store.indicatorWeightTotal != 100))
"
class="text-red"
>*น้ำหนัก(ร้อยละ) ผลสัมฤทธิ์ของงานไม่ถูกต้อง</span
>
<br v-if="!$q.screen.gt.xs" />
<q-btn
v-if="
store.rolePerson == 'USER' &&
store.dataEvaluation.evaluationStatus == 'NEW'
"
:disabled="
((store.dataEvaluation.posTypeName != 'อำนวยการ' ||
store.dataEvaluation.posTypeName != 'บริหาร') &&
store.indicatorWeightTotal != 100) ||
((store.dataEvaluation.posTypeName == 'อำนวยการ' ||
store.dataEvaluation.posTypeName == 'บริหาร') &&
store.indicatorWeightTotal != 100)
"
unelevated
round
icon="mdi-send"
color="grey-2"
text-color="blue-6"
size="md"
@click="sendToEvaluatore()"
>
<q-tooltip>ส่งให้ผู้ประเมินอนุมัติ</q-tooltip>
</q-btn>
<q-btn
v-if="
store.rolePerson == 'USER' &&
store.tabMain == '2' &&
store.dataEvaluation.evaluationStatus == 'APPROVE'
"
unelevated
round
icon="mdi-send"
color="grey-2"
text-color="blue-6"
size="md"
@click="sendToEvauator"
>
<q-tooltip>ทำการประเมิน</q-tooltip>
</q-btn>
<q-btn
v-if="
store.rolePerson == 'USER' &&
store.dataEvaluation.evaluationStatus == 'EVALUATING' &&
store.tabMain == '3'
"
unelevated
round
icon="mdi-send"
color="grey-2"
text-color="blue-6"
size="md"
@click="sendToEvaluateEvaluatore()"
>
<q-tooltip
>ส่งให้ผู้ประเมินรายงานผลสำเร็จของงาน</q-tooltip
>
</q-btn>
<q-btn
v-if="
store.rolePerson == 'USER' &&
store.tabOpen < 3 &&
store.dataEvaluation.evaluationStatus != 'NEW' &&
(store.dataEvaluation.evaluationReqEdit == null ||
store.dataEvaluation.evaluationReqEdit == 'DONE')
"
:disabled="store.dataEvaluation.evaluatorId == null"
unelevated
round
icon="mdi-file-edit"
color="grey-2"
text-color="red-6"
size="md"
@click="requireEdit()"
>
<q-tooltip>ขอแก้ไขข้อตกลง</q-tooltip>
</q-btn>
<q-btn
v-if="
store.rolePerson == 'EVALUATOR' &&
store.tabMain === '3' &&
store.dataEvaluation.evaluationStatus ===
'EVALUATING_EVALUATOR'
"
:disabled="
store.indicatorScoreVal +
store.competencyScoreVal +
store.devScoreVal <=
0
"
unelevated
round
icon="mdi-send"
color="grey-2"
text-color="blue-6"
size="md"
@click="goToSummary()"
>
<q-tooltip>สรุปผลการประเมิน</q-tooltip>
</q-btn>
<q-btn
v-if="store.rolePerson == 'USER'"
unelevated
round
icon="mdi-account"
color="grey-2"
text-color="edit"
size="md"
@click="openEvaluator()"
>
<q-tooltip>{{
store.dataEvaluation.evaluationStatus === "NEW" &&
store.rolePerson === "USER"
? "แก้ไขผู้ประเมิน"
: "ข้อมูลผู้ประเมิน"
}}</q-tooltip>
</q-btn>
<q-btn
unelevated
round
icon="mdi-file-eye-outline"
color="grey-2"
text-color="primary"
size="md"
@click="openGovernment"
>
<q-tooltip>ดูข้อมูลการช่วยราชการ</q-tooltip>
</q-btn>
<q-btn
unelevated
round
color="grey-2"
text-color="blue-5"
icon="mdi-file-eye-outline"
size="md"
@click="openStatus"
>
<q-tooltip
>ดูข้อมูลการทดลองปฏิบัติหน้าที่ราชการ</q-tooltip
>
</q-btn>
<q-btn
v-if="
store.dataEvaluation.evaluationStatus !== 'NEW' &&
store.dataEvaluation.evaluationStatus !==
'NEW_EVALUATOR' &&
store.dataEvaluation.evaluationStatus !==
'NEW_COMMANDER' &&
store.dataEvaluation.evaluationStatus !==
'NEW_COMMANDER_HIGH'
"
unelevated
round
color="grey-2"
text-color="primary"
icon="download"
size="md"
@click="downloadReport()"
>
<q-tooltip
>ดาวน์โหลดแบบกำหนดข้อตกลงการประเมินผลสัมฤทธิ์ของงานและพฤติกรรมการปฏิบัติราชการ</q-tooltip
>
</q-btn>
<q-btn
v-if="
store.dataEvaluation.evaluationStatus !== 'NEW' &&
store.dataEvaluation.evaluationStatus !==
'NEW_EVALUATOR' &&
store.dataEvaluation.evaluationStatus !==
'NEW_COMMANDER' &&
store.dataEvaluation.evaluationStatus !==
'NEW_COMMANDER_HIGH'
"
unelevated
round
color="grey-2"
text-color="blue"
icon="upload"
size="md"
@click="uploadReport()"
>
<q-tooltip
>อัปโหลดแบบกำหนดข้อตกลงการประเมินผลสัมฤทธิ์ของงานและพฤติกรรมการปฏิบัติราชการ</q-tooltip
>
</q-btn>
</div>
</div>
</div>
</div>
<div class="row items-center bg-toolbar col-12 q-pa-sm">
<div
class="col-12 q-py-xs"
:style="
$q.screen.gt.xs ? 'padding-left: 12%' : 'padding-left:5%'
"
>
<div class="row">
<div class="col-xs-12 col-md-2">
<div :class="$q.screen.gt.sm ? 'column' : 'row'">
<span class="text-grey-6 col">ตำแหน่งในสายงาน</span>
<span class="text-weight-medium text-dark col">{{
store.dataEvaluation.position
}}</span>
</div>
</div>
<div class="col-xs-12 col-md-2">
<div :class="$q.screen.gt.sm ? 'column' : 'row'">
<span class="text-grey-6 col">ตำแหน่งประเภท</span>
<span class="text-weight-medium text-dark col">{{
store.dataEvaluation.posTypeName
}}</span>
</div>
</div>
<div class="col-xs-12 col-md-2">
<div :class="$q.screen.gt.sm ? 'column' : 'row'">
<span class="text-grey-6 col">ระดับ</span>
<span class="text-weight-medium text-dark col">{{
store.dataEvaluation.posLevelName
}}</span>
</div>
</div>
<div class="col-xs-12 col-md-2">
<div :class="$q.screen.gt.sm ? 'column' : 'row'">
<span class="text-grey-6 col">สถานะการประเมิน</span>
<span class="text-weight-medium text-dark col">{{
formProfile.status
}}</span>
</div>
</div>
<div class="col-xs-12 col-md-2">
<div :class="$q.screen.gt.sm ? 'column' : 'row'">
<span class="text-grey-6 col">ผลการประเมิน</span>
<span class="text-weight-medium text-dark col">{{
formProfile.result
}}</span>
</div>
</div>
<div class="col-xs-12 col-md-2">
<div :class="$q.screen.gt.sm ? 'column' : 'row'">
<span class="text-grey-6 col">คะแนนประเมิน</span>
<span class="text-weight-medium text-primary col">
{{
store.dataEvaluation.posTypeName != "อำนวยการ" &&
store.dataEvaluation.posTypeName != "บริหาร"
? (
store.indicatorScoreVal +
store.competencyScoreVal +
store.devScoreVal
).toFixed(2)
: (
store.excusiveIndicator1ScoreVal +
store.excusiveIndicator2ScoreVal +
store.competencyScoreVal
).toFixed(2)
}}
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</q-card>
<q-card class="q-mt-md rounded">
<TabMain />
</q-card>
</div>
</div>
</div>
<q-dialog v-model="modalEdit" persistent>
<q-card bordered style="width: 50vh">
<q-form greedy @submit.prevent @validation-success="onSubmit">
<DialogHeader
:tittle="
store.dataEvaluation.evaluationStatus === 'NEW' &&
store.rolePerson === 'USER'
? 'แก้ไขผู้ประเมิน'
: 'ข้อมูลผู้ประเมิน'
"
:close="close"
/>
<q-separator />
<q-card-section>
<div class="column q-gutter-sm">
<div class="row">
<div class="col-10">
<q-select
:readonly="
!(
store.dataEvaluation.evaluationStatus === 'NEW' &&
store.rolePerson === 'USER'
)
"
v-model="evaluatorId"
outlined
label="ผู้ประเมิน"
dense
option-label="name"
option-value="id"
:options="evaluatorIdOp"
class="inputgreen"
map-options
hide-bottom-space
lazy-rules
:rules="[ (val:string) => !!val ||
`${'กรุณาเลือกผู้ประเมิน'}`, ]"
use-input
@filter="(inputValue:string,
doneFn:Function) => filterOption(inputValue, doneFn,'evaluatorIdOp'
) "
/>
</div>
<div class="col-2 q-pa-sm text-right">
<q-icon
v-if="evaluatorId"
name="mdi-eye"
size="sm"
color="info"
class="cursor-pointer"
@click="viewEvaluatorDetail(evaluatorId.id, 'evaluator')"
>
<q-tooltip>ดูข้อมูลผู้ประเมิน</q-tooltip>
</q-icon>
</div>
</div>
<div class="row">
<div class="col-10">
<q-select
:readonly="
!(
store.dataEvaluation.evaluationStatus === 'NEW' &&
store.rolePerson === 'USER'
)
"
v-model="commanderId"
outlined
label="ผู้บังคับบัญชาเหนือขึ้นไป"
dense
option-label="name"
option-value="id"
:options="commanderIdOp"
map-options
class="inputgreen"
use-input
@filter="(inputValue:string,
doneFn:Function) => filterOption(inputValue, doneFn,'commanderIdOp'
) "
>
<template
v-if="
store.dataEvaluation.evaluationStatus === 'NEW' &&
store.rolePerson === 'USER' &&
commanderId
"
v-slot:append
>
<q-icon
name="cancel"
@click.stop.prevent="commanderId = null"
class="cursor-pointer"
/>
</template>
</q-select>
</div>
<div class="col-2 q-pa-sm text-right">
<q-icon
v-if="commanderId"
name="mdi-eye"
size="sm"
color="info"
class="cursor-pointer"
@click="viewEvaluatorDetail(commanderId.id, 'commander')"
>
<q-tooltip>ดูข้อมูลผู้บังคับบัญชาเหนือขึ้นไป</q-tooltip>
</q-icon>
</div>
</div>
<div class="row">
<div class="col-10">
<q-select
:readonly="
!(
store.dataEvaluation.evaluationStatus === 'NEW' &&
store.rolePerson === 'USER'
)
"
v-model="commanderHighId"
outlined
label="ผู้บังคับบัญชาเหนือขึ้นไปอีกชั้นหนึ่ง"
dense
option-label="name"
option-value="id"
:options="commanderHighOp"
map-options
use-input
class="inputgreen"
@filter="(inputValue:string,
doneFn:Function) => filterOption(inputValue, doneFn,'commanderHighOp'
) "
>
<template
v-if="
store.dataEvaluation.evaluationStatus === 'NEW' &&
store.rolePerson === 'USER' &&
commanderHighId
"
v-slot:append
>
<q-icon
name="cancel"
@click.stop.prevent="commanderHighId = null"
class="cursor-pointer"
/>
</template>
</q-select>
</div>
<div class="col-2 q-pa-sm text-right">
<q-icon
v-if="commanderHighId"
name="mdi-eye"
size="sm"
color="info"
class="cursor-pointer"
@click="
viewEvaluatorDetail(commanderHighId.id, 'commanderHigh')
"
>
<q-tooltip
>ดูข้อมูลผู้บังคับบัญชาเหนือขึ้นไปอีกชั้นหนึ่ง</q-tooltip
>
</q-icon>
</div>
</div>
</div>
</q-card-section>
<q-separator />
<q-card-actions
v-if="
store.dataEvaluation.evaluationStatus === 'NEW' &&
store.rolePerson === 'USER'
"
align="right"
class="bg-white text-teal"
>
<q-btn label="บันทึก" color="secondary" type="submit"
><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
>
</q-card-actions>
</q-form>
</q-card>
</q-dialog>
<q-dialog v-model="modalEvaluatorDetail" persistent>
<q-card style="width: 60vw; max-width: 70vw; min-height: 40vh">
<DialogHeader
:tittle="topic"
:close="() => (modalEvaluatorDetail = false)"
/>
<q-separator />
<q-card-section class="q-pa-md">
<div class="q-pb-md">
<span class="text-teal text-weight-bold text-body2">{{
evaluator.fullName
}}</span>
</div>
<div class="row">
<div class="col-12 column justify-center no-wrap">
<div class="row text-grey-6">
<div class="col-3">ตำแหน่งในสายงาน</div>
<div class="col-3">ตำแหน่งประเภท</div>
<div class="col-3">ตำแหน่งทางการบริหาร</div>
<div class="col-3">สังกัด</div>
</div>
<div class="row">
<div class="col-3">
{{ evaluator.position ? evaluator.position : "-" }}
</div>
<div class="col-3">
{{ evaluator.posTypeName ? evaluator.posTypeName : "-" }}
{{
evaluator.posLevelName ? ` (${evaluator.posLevelName})` : "-"
}}
</div>
<div class="col-3">
{{
evaluator.posExecutiveName ? evaluator.posExecutiveName : "-"
}}
</div>
<div class="col-3 text-html">
{{ evaluator.org ? evaluator.org : "-" }}
</div>
</div>
<div class="row q-mt-md text-grey-6">
<div class="col-12">รักษาการในตำแหน่ง/การรักษาราชการแทน</div>
</div>
<div class="row">
<div
class="col-12"
v-if="evaluator.isPosmasterAct"
v-for="(data, index) in evaluator.posmasterAct"
:key="index"
>
{{
data.firstName
? `- ${data.prefix}${data.firstName} ${data.lastName}`
: "- ว่าง"
}}
{{ `(${data.posNo})` }}
</div>
<div class="col-12" v-else>-</div>
</div>
</div>
</div>
</q-card-section>
</q-card>
</q-dialog>
<q-dialog v-model="modalUpload" persistent>
<q-card class="col-12" style="width: 60vw">
<DialogHeader
tittle="อัปโหลดแบบกำหนดข้อตกลงการประเมินผลสัมฤทธิ์ของงานและพฤติกรรมการปฏิบัติราชการ"
:close="closeDialog"
/>
<q-separator />
<q-card-section>
<div class="row col-12 q-col-gutter-y-sm">
<div class="col-12 row" v-if="fileList.length == 0">
<q-file
for="inputFiles"
class="col-12"
outlined
dense
v-model="fileUpload"
label="ไฟล์เอกสารแบบกำหนดข้อตกลง"
hide-bottom-space
accept=".pdf"
clearable
>
<template v-slot:prepend>
<q-icon name="attach_file" color="primary" />
</template>
<template v-slot:after>
<q-btn
size="14px"
v-if="fileUpload"
flat
round
dense
color="primary"
icon="mdi-upload"
@click="clickUpload(fileUpload)"
><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
>
</template>
</q-file>
</div>
<div v-if="fileList.length > 0" class="col-xs-12 row">
<q-list class="full-width rounded-borders" bordered separator>
<q-item
clickable
v-ripple
v-for="data in fileList"
:key="data.id"
class="items-center"
>
<q-item-section>{{ data.fileName }}</q-item-section>
<q-space />
<div>
<q-btn
size="12px"
flat
round
dense
color="blue"
icon="mdi-download"
@click="downloadFile(data.fileName)"
><q-tooltip>ดาวนโหลดไฟล</q-tooltip></q-btn
>
<q-btn
size="12px"
flat
round
dense
color="red"
class="q-ml-sm"
icon="mdi-delete-outline"
@click="deleteFile(data.fileName)"
><q-tooltip>ลบไฟล</q-tooltip></q-btn
>
</div>
</q-item>
</q-list>
</div>
<div class="col-12" v-else>
<q-card class="q-pa-md" bordered> ไมรายการเอกสาร </q-card>
</div>
</div>
</q-card-section>
</q-card>
</q-dialog>
<DialogGovernment v-model:modal="modalGovernment" />
</template>
<style>
.bg-toolbar {
background-color: #f2fbfa;
}
.absolute-center-left {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
</style>