1127 lines
37 KiB
Vue
1127 lines
37 KiB
Vue
<script setup lang="ts">
|
|
import { ref, onMounted, reactive, onUnmounted } from "vue";
|
|
import { useRoute, useRouter } from "vue-router";
|
|
import { useQuasar } from "quasar";
|
|
import http from "@/plugins/http";
|
|
import config from "@/app.config";
|
|
|
|
import DialogHeader from "@/components/DialogHeader.vue";
|
|
import Assessment from "@/modules/14_KPI/components/Tab/01_Assessment.vue";
|
|
import Result from "@/modules/14_KPI/components/Tab/04_Result.vue";
|
|
import File from "@/modules/14_KPI/components/Tab/05_File.vue";
|
|
import DialogGovernment from "@/modules/14_KPI/components/Tab/Dialog/DialogGovernment.vue";
|
|
|
|
import type { DataOption } from "@/modules/14_KPI/interface/index/Main";
|
|
|
|
import { useKpiDataStore } from "@/modules/14_KPI/store";
|
|
import { useCounterMixin } from "@/stores/mixin";
|
|
|
|
const itemsTab = ref<any[]>([
|
|
{
|
|
name: "1",
|
|
label: "จัดทำแบบฟอร์มการประเมิน",
|
|
},
|
|
{
|
|
name: "2",
|
|
label: "รายงานความก้าวหน้า",
|
|
},
|
|
{
|
|
name: "3",
|
|
label: "รายงานผลสำเร็จของงาน",
|
|
},
|
|
{
|
|
name: "4",
|
|
label: "สรุปผลการประเมิน",
|
|
},
|
|
{
|
|
name: "5",
|
|
label: "ไฟล์เอกสาร",
|
|
},
|
|
]);
|
|
|
|
const splitterModel = ref<number>(12);
|
|
const modalGovernment = ref<boolean>(false);
|
|
|
|
const modalEdit = ref<boolean>(false);
|
|
const route = useRoute();
|
|
const checkRoutePermisson = ref<boolean>(route.name == "KPIDetailPage");
|
|
const id = ref<string>(route.params.id as string);
|
|
const isReadonly = <boolean>(route.name === "KPIEditEvaluator" ? true : false);
|
|
|
|
const store = useKpiDataStore();
|
|
const $q = useQuasar();
|
|
const mixin = useCounterMixin();
|
|
const {
|
|
showLoader,
|
|
hideLoader,
|
|
messageError,
|
|
dialogConfirm,
|
|
success,
|
|
findOrgName,
|
|
} = mixin;
|
|
|
|
const evaluatorIdOp = ref<DataOption[]>([]);
|
|
const commanderIdOp = ref<DataOption[]>([]);
|
|
const commanderHighOp = ref<DataOption[]>([]);
|
|
|
|
const evaluatorIdMainOp = ref<DataOption[]>([]);
|
|
const commanderIdMainOp = ref<DataOption[]>([]);
|
|
const commanderHighMainOp = ref<DataOption[]>([]);
|
|
|
|
const evaluatorId = ref<any>(null);
|
|
const commanderId = ref<any>(null);
|
|
const commanderHighId = ref<any>(null);
|
|
const avartar = ref<string>("");
|
|
|
|
const formProfile = reactive<any>({
|
|
fullName: "",
|
|
position: "",
|
|
type: "",
|
|
level: "",
|
|
status: "",
|
|
result: "",
|
|
score: "-",
|
|
avartar: "",
|
|
});
|
|
|
|
const router = useRouter();
|
|
|
|
async function fetchEvaluation() {
|
|
showLoader();
|
|
await http
|
|
.get(config.API.kpiEvaluationUser + `/${id.value}`)
|
|
.then(async (res) => {
|
|
const data = res.data.result;
|
|
store.dataEvaluation = await data;
|
|
formProfile.status = await store.convertStatus(data.evaluationStatus);
|
|
formProfile.result = await store.convertResults(data.evaluationResults);
|
|
|
|
await Promise.all([
|
|
store.checkCompetency(),
|
|
store.checkCompetencyDefaultCompetencyLevel(),
|
|
fetchProfile(data.profileId),
|
|
getProfile(),
|
|
]);
|
|
})
|
|
.catch((e) => {
|
|
messageError($q, e);
|
|
})
|
|
.finally(() => {
|
|
setTimeout(() => {
|
|
hideLoader();
|
|
}, 1200);
|
|
});
|
|
}
|
|
|
|
async function fetchProfile(id: string) {
|
|
await http.get(config.API.orgCheckAvatar(id)).then(async (res) => {
|
|
if (res.data.result.avatarName) {
|
|
http
|
|
.get(
|
|
config.API.fileByFile(
|
|
"ทะเบียนประวัติ",
|
|
"โปรไฟล์",
|
|
id,
|
|
res.data.result.avatarName
|
|
)
|
|
)
|
|
.then(async (res) => {
|
|
avartar.value = res.data.downloadUrl;
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
function close() {
|
|
modalEdit.value = false;
|
|
}
|
|
|
|
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 fetchEvaluation();
|
|
await success($q, "บันทึกสำเร็จ");
|
|
close();
|
|
})
|
|
.catch((e) => {
|
|
messageError($q, e);
|
|
})
|
|
.finally(() => {
|
|
hideLoader();
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
async function getOrgOp() {
|
|
http
|
|
.get(config.API.Kpiorg + `/${store.dataProfile.profileId}`)
|
|
.then((res) => {
|
|
const data = res.data.result;
|
|
evaluatorIdMainOp.value = data.caregiver.map((i: any) => ({
|
|
id: i.id,
|
|
name: `${i.prefix}${i.firstName} ${i.lastName}`,
|
|
}));
|
|
commanderIdMainOp.value = data.commander.map((i: any) => ({
|
|
id: i.id,
|
|
name: `${i.prefix}${i.firstName} ${i.lastName}`,
|
|
}));
|
|
commanderHighMainOp.value = data.chairman.map((i: any) => ({
|
|
id: i.id,
|
|
name: `${i.prefix}${i.firstName} ${i.lastName}`,
|
|
}));
|
|
|
|
evaluatorId.value = data.caregiver
|
|
.map((i: any) => ({
|
|
id: i.id,
|
|
name: `${i.prefix}${i.firstName} ${i.lastName}`,
|
|
}))
|
|
.find((i: any) => i.id == store.dataEvaluation.evaluatorId);
|
|
commanderId.value = data.commander
|
|
.map((i: any) => ({
|
|
id: i.id,
|
|
name: `${i.prefix}${i.firstName} ${i.lastName}`,
|
|
}))
|
|
.find((i: any) => i.id == store.dataEvaluation.commanderId);
|
|
commanderHighId.value = data.chairman
|
|
.map((i: any) => ({
|
|
id: i.id,
|
|
name: `${i.prefix}${i.firstName} ${i.lastName}`,
|
|
}))
|
|
.find((i: any) => i.id == store.dataEvaluation.commanderHighId);
|
|
})
|
|
.catch((e) => {
|
|
messageError($q, e);
|
|
})
|
|
.finally(() => {});
|
|
}
|
|
|
|
function filterOption(val: any, update: Function, refData: string) {
|
|
switch (refData) {
|
|
case "evaluatorIdOp":
|
|
update(() => {
|
|
evaluatorIdOp.value = evaluatorIdMainOp.value.filter(
|
|
(v: any) => v.name.indexOf(val) > -1
|
|
);
|
|
});
|
|
break;
|
|
case "commanderIdOp":
|
|
update(() => {
|
|
commanderIdOp.value = commanderIdMainOp.value.filter(
|
|
(v: any) => v.name.indexOf(val) > -1
|
|
);
|
|
});
|
|
break;
|
|
case "commanderHighOp":
|
|
update(() => {
|
|
commanderHighOp.value = commanderHighMainOp.value.filter(
|
|
(v: any) => v.name.indexOf(val) > -1
|
|
);
|
|
});
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
}
|
|
|
|
async function getProfile() {
|
|
await http
|
|
.get(config.API.profilePosition + `/${store.dataEvaluation.profileId}`)
|
|
.then(async (res) => {
|
|
const data = await res.data.result;
|
|
store.dataProfile = await data;
|
|
await setTimeout(() => {
|
|
store.checkStep();
|
|
}, 1000);
|
|
})
|
|
.catch((e) => {
|
|
messageError($q, e);
|
|
});
|
|
}
|
|
|
|
async function getAll() {
|
|
await fetchEvaluation();
|
|
}
|
|
|
|
function sendToEvaluatore() {
|
|
dialogConfirm(
|
|
$q,
|
|
() => {
|
|
if (id.value) {
|
|
showLoader();
|
|
http
|
|
.put(config.API.kpiEvaluationUser + `/status/${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.kpiReqEditUser(id.value), {
|
|
status: "EVALUATOR",
|
|
})
|
|
.then(async () => {
|
|
await fetchEvaluation();
|
|
await success($q, "ขอแก้ไขสำเร็จ");
|
|
})
|
|
.catch((e) => {
|
|
messageError($q, e);
|
|
})
|
|
.finally(() => {
|
|
hideLoader();
|
|
});
|
|
}
|
|
},
|
|
"ยืนยันการขอแก้ไขข้อตกลง",
|
|
"ต้องการยืนยันการขอแก้ไขข้อตกลงนี้ใช่หรือไม่?"
|
|
);
|
|
}
|
|
|
|
function openGovernment() {
|
|
modalGovernment.value = true;
|
|
}
|
|
function openStatus() {
|
|
router.push(`/probation-detail/${store.dataEvaluation.profileId}`);
|
|
}
|
|
|
|
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();
|
|
});
|
|
});
|
|
}
|
|
|
|
function goToSummary() {
|
|
dialogConfirm(
|
|
$q,
|
|
() => {
|
|
showLoader();
|
|
http
|
|
.get(config.API.sendToSummary(store.dataEvaluation.id))
|
|
.then(async (res) => {
|
|
await fetchEvaluation();
|
|
store.tabMain = "4";
|
|
store.tabOpen = 4;
|
|
})
|
|
.catch((e) => {
|
|
messageError($q, e);
|
|
})
|
|
.finally(() => {
|
|
hideLoader();
|
|
});
|
|
},
|
|
"ยืนยันการส่งไปสรุปผลการประเมิน",
|
|
"ต้องการยืนยันส่งไปสรุปผลการประเมินใช่หรือไม่?"
|
|
);
|
|
}
|
|
|
|
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<any>({
|
|
fullName: "",
|
|
position: "",
|
|
avartar: "",
|
|
posTypeName: "",
|
|
posLevelName: "",
|
|
org: "",
|
|
isPosmasterAct: false,
|
|
posmasterAct: [],
|
|
});
|
|
|
|
async function fetchProfileEvaluator(id: string) {
|
|
showLoader();
|
|
http
|
|
.get(config.API.profilePosition + `/${id}`)
|
|
.then((res) => {
|
|
console.log(res.data.result);
|
|
const data = 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[0];
|
|
evaluator.value.org = findOrgName(data);
|
|
})
|
|
.catch((e) => {
|
|
messageError($q, e);
|
|
})
|
|
.finally(() => {
|
|
hideLoader();
|
|
});
|
|
}
|
|
|
|
onMounted(async () => {
|
|
store.isUpdate = await false;
|
|
await getAll();
|
|
});
|
|
|
|
onUnmounted(() => {
|
|
store.indicatorScoreVal = 0;
|
|
store.competencyScoreVal = 0;
|
|
store.devScoreVal = 0;
|
|
|
|
store.excusiveIndicator1ScoreVal = 0;
|
|
store.excusiveIndicator2ScoreVal = 0;
|
|
store.competencyScoreVal = 0;
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="toptitle col-12 row items-center">
|
|
<q-btn
|
|
icon="mdi-arrow-left"
|
|
unelevated
|
|
round
|
|
dense
|
|
flat
|
|
color="primary"
|
|
class="q-mr-sm"
|
|
@click="router.push(`/KPI-list`)"
|
|
/>
|
|
รายละเอียดการประเมินผลการปฏิบัติราชการระดับบุคคล
|
|
</div>
|
|
|
|
<!-- Profile -->
|
|
<q-card bordered flat class="relative-position">
|
|
<div class="row justify-center q-pa-md" v-if="!$q.screen.gt.xs">
|
|
<q-avatar size="80px">
|
|
<q-img :src="avartar" v-if="avartar !== undefined && avartar !== ''" />
|
|
<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="80px">
|
|
<q-img :src="avartar" v-if="avartar !== undefined && avartar !== ''" />
|
|
<q-img src="@/assets/avatar_user.jpg" v-else />
|
|
</q-avatar>
|
|
</div>
|
|
<div class="row col-12">
|
|
<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">
|
|
<span class="text-h6 text-weight-medium text-primary">{{
|
|
store.dataEvaluation.firstName
|
|
? `${store.dataEvaluation.prefix}${store.dataEvaluation.firstName} ${store.dataEvaluation.lastName}`
|
|
: ""
|
|
}}</span>
|
|
<q-space v-if="$q.screen.gt.xs" />
|
|
|
|
<div class="q-gutter-x-sm">
|
|
<span
|
|
v-if="
|
|
(!checkRoutePermisson &&
|
|
store.tabMain === '1' &&
|
|
store.dataEvaluation.posTypeName != 'อำนวยการ' &&
|
|
store.dataEvaluation.posTypeName != 'บริหาร' &&
|
|
store.indicatorWeightTotal != 100) ||
|
|
(!checkRoutePermisson &&
|
|
store.dataEvaluation.posTypeName == 'อำนวยการ' &&
|
|
store.dataEvaluation.posTypeName == 'บริหาร' &&
|
|
(store.indicatorWeight1Total != 100 ||
|
|
store.indicatorWeight2Total != 20) &&
|
|
store.dataEvaluation.evaluationStatus == 'NEW')
|
|
"
|
|
class="text-red"
|
|
>*น้ำหนัก(ร้อยละ) ผลสัมฤทธิ์ของงานไม่ถูกต้อง</span
|
|
>
|
|
<br v-if="!$q.screen.gt.xs" />
|
|
<q-btn
|
|
v-if="
|
|
store.rolePerson == 'USER' &&
|
|
store.dataEvaluation.evaluationStatus == 'NEW' &&
|
|
!checkRoutePermisson
|
|
"
|
|
:disabled="
|
|
(store.dataEvaluation.posTypeName != 'อำนวยการ' &&
|
|
store.dataEvaluation.posTypeName != 'บริหาร' &&
|
|
store.indicatorWeightTotal != 100) ||
|
|
(store.dataEvaluation.posTypeName == 'อำนวยการ' &&
|
|
store.dataEvaluation.posTypeName == 'บริหาร' &&
|
|
(store.indicatorWeight1Total != 100 ||
|
|
store.indicatorWeight2Total != 20))
|
|
"
|
|
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="
|
|
!checkRoutePermisson &&
|
|
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="
|
|
!checkRoutePermisson &&
|
|
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 == 'EVALUATOR' &&
|
|
store.dataEvaluation.evaluationStatus ==
|
|
'EVALUATING_EVALUATOR' &&
|
|
store.tabMain == '3'
|
|
"
|
|
unelevated
|
|
round
|
|
icon="mdi-send"
|
|
color="grey-2"
|
|
text-color="blue-6"
|
|
size="md"
|
|
@click="sendToSummary('SUMMARY')"
|
|
>
|
|
<q-tooltip>ส่งไปสรุปผลการประเมิน</q-tooltip>
|
|
</q-btn> -->
|
|
<q-btn
|
|
v-if="
|
|
!checkRoutePermisson &&
|
|
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="
|
|
!checkRoutePermisson &&
|
|
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="(modalEdit = true), getOrgOp()"
|
|
>
|
|
<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>
|
|
</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">
|
|
<q-card-section style="padding: 0px">
|
|
<q-splitter
|
|
v-if="$q.screen.gt.xs"
|
|
v-model="splitterModel"
|
|
:horizontal="!$q.screen.gt.xs"
|
|
disable
|
|
>
|
|
<template v-slot:before>
|
|
<q-tabs
|
|
v-model="store.tabMain"
|
|
:vertical="$q.screen.gt.xs"
|
|
class="text-grey-7 text-weight-light"
|
|
active-class="bg-blue-1 text-blue-8 text-weight-bold"
|
|
>
|
|
<q-tab
|
|
name="1"
|
|
label="จัดทำข้อตกลง"
|
|
:disable="store.tabOpen != 1"
|
|
/>
|
|
<q-tab
|
|
name="2"
|
|
label="รายงานความก้าวหน้า"
|
|
:disable="store.tabOpen != 2"
|
|
/>
|
|
<q-tab
|
|
name="3"
|
|
label="รายงานผลสำเร็จของงาน"
|
|
:disable="store.tabOpen < 3"
|
|
/>
|
|
<q-tab
|
|
name="4"
|
|
label="สรุปผลการประเมิน"
|
|
:disable="
|
|
store.tabOpen < 4 ||
|
|
(store.tabOpen == 4 &&
|
|
store.rolePerson === 'USER' &&
|
|
store.dataEvaluation.evaluationStatus != 'KP7')
|
|
"
|
|
/>
|
|
<q-tab name="5" label="ไฟล์เอกสาร" />
|
|
</q-tabs>
|
|
</template>
|
|
|
|
<template v-slot:after>
|
|
<q-tab-panels
|
|
v-model="store.tabMain"
|
|
animated
|
|
swipeable
|
|
vertical
|
|
transition-prev="jump-up"
|
|
transition-next="jump-up"
|
|
>
|
|
<q-tab-panel
|
|
v-for="(tab, index) in itemsTab"
|
|
:key="index"
|
|
:name="tab.name"
|
|
class="q-pa-none"
|
|
>
|
|
<Assessment v-if="store.tabMain === '1'" />
|
|
<Assessment v-if="store.tabMain === '2'" :type="'evaluator'" />
|
|
<Assessment v-if="store.tabMain === '3'" :type="'commander'" />
|
|
<Result v-if="store.tabMain === '4'" :type="'result'" />
|
|
<File v-if="store.tabMain === '5'" />
|
|
</q-tab-panel>
|
|
</q-tab-panels>
|
|
</template>
|
|
</q-splitter>
|
|
|
|
<q-list bordered class="rounded-borders" v-else>
|
|
<q-expansion-item
|
|
expand-separator
|
|
label="จัดทำข้อตกลง"
|
|
@click="store.tabMain = '1'"
|
|
>
|
|
<Assessment v-if="store.tabMain === '1'" />
|
|
</q-expansion-item>
|
|
|
|
<q-expansion-item
|
|
expand-separator
|
|
label="รายงานความก้าวหน้า"
|
|
@click="store.tabMain = '2'"
|
|
:disable="store.tabOpen < 2"
|
|
>
|
|
<Assessment v-if="store.tabMain === '2'" :type="'evaluator'" />
|
|
</q-expansion-item>
|
|
|
|
<q-expansion-item
|
|
expand-separator
|
|
label="รายงานผลสำเร็จของงาน"
|
|
@click="store.tabMain = '3'"
|
|
:disable="store.tabOpen < 3"
|
|
>
|
|
<Assessment v-if="store.tabMain === '3'" :type="'commander'" />
|
|
</q-expansion-item>
|
|
|
|
<q-expansion-item
|
|
expand-separator
|
|
label="ไฟล์เอกสาร"
|
|
@click="store.tabMain = '5'"
|
|
>
|
|
<File v-if="store.tabMain === '5'" />
|
|
</q-expansion-item> </q-list
|
|
></q-card-section>
|
|
</q-card>
|
|
|
|
<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="
|
|
checkRoutePermisson ||
|
|
!(
|
|
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:any,
|
|
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="
|
|
checkRoutePermisson ||
|
|
!(
|
|
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:any,
|
|
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="
|
|
checkRoutePermisson ||
|
|
!(
|
|
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:any,
|
|
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 v-if="!checkRoutePermisson" />
|
|
<q-card-actions
|
|
v-if="
|
|
!checkRoutePermisson &&
|
|
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: 700px; max-width: 80vw; min-height: 40vh">
|
|
<DialogHeader
|
|
:tittle="topic"
|
|
:close="() => (modalEvaluatorDetail = false)"
|
|
/>
|
|
<q-separator />
|
|
|
|
<q-card>
|
|
<div class="q-pa-md">
|
|
<span class="text-teal text-weight-bold text-body2">{{
|
|
evaluator.fullName
|
|
}}</span>
|
|
</div>
|
|
|
|
<q-card-section class="q-pa-md">
|
|
<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">
|
|
{{ 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">
|
|
{{
|
|
`${evaluator.posmasterAct.prefix}${evaluator.posmasterAct.firstName} ${evaluator.posmasterAct.lastName} (${evaluator.posmasterAct.posNo})`
|
|
}}
|
|
</div>
|
|
<div class="col-12" v-else>-</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</q-card-section>
|
|
</q-card>
|
|
</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>
|