hrms-mgt/src/modules/12_evaluatePersonal/components/Detail/step/step8.vue

983 lines
36 KiB
Vue

<script setup lang="ts">
import { onMounted, ref } from "vue";
import { useRoute } from "vue-router";
import { useQuasar } from "quasar";
import axios from "axios";
import http from "@/plugins/http";
import config from "@/app.config";
import genReport from "@/plugins/genreport";
/** importType*/
import type { FileEvaluationRefRef } from "@/modules/12_evaluatePersonal/interface/index/evalute";
/** importStore*/
import { useCounterMixin } from "@/stores/mixin";
import { useEvaluateDetailStore } from "@/modules/12_evaluatePersonal/store/EvaluateDetail";
/** uer*/
const store = useEvaluateDetailStore();
const $q = useQuasar();
const mixin = useCounterMixin();
const route = useRoute();
const {
date2Thai,
showLoader,
hideLoader,
messageError,
success,
dialogConfirm,
} = mixin;
const id = ref<string>(route.params.id as string);
const modalConfirm = ref<boolean>(false);
const nameOfWork = ref<string>("");
const nameOfOwner = ref<string>("");
const position = ref<string>("");
const fileEvaluation81 = ref<any>();
const fileEvaluation82 = ref<any>();
const fileEvaluation83 = ref<any>();
const fileEvaluation84 = ref<any>();
const fileEvaluation85 = ref<any>();
const fileEvaluation86 = ref<any>();
const fileEvaluation81Ref = ref<object | null>(null);
const fileEvaluation82Ref = ref<object | null>(null);
const fileEvaluation83Ref = ref<object | null>(null);
const fileEvaluation84Ref = ref<object | null>(null);
const fileEvaluation85Ref = ref<object | null>(null);
const fileEvaluation86Ref = ref<object | null>(null);
const profile = ref<any>();
const fileEvaluationRef: FileEvaluationRefRef = {
fileEvaluation81: fileEvaluation81Ref,
fileEvaluation82: fileEvaluation82Ref,
fileEvaluation83: fileEvaluation83Ref,
fileEvaluation84: fileEvaluation84Ref,
fileEvaluation85: fileEvaluation85Ref,
fileEvaluation86: fileEvaluation86Ref,
};
/** function ดาวน์โหลดไฟล์ต้นแบบ*/
async function onClickDowloadFile(
tp: string,
templateName: string,
fileName: string
) {
showLoader();
const data = Object.assign(
{ fullName: profile.value == null ? "" : profile.value.fullName },
{ position: profile.value == null ? "" : profile.value.position },
{ positionLevel: profile.value == null ? "" : profile.value.positionLevel },
{ posNo: profile.value == null ? "" : profile.value.posNo },
{ oc: profile.value == null ? "" : profile.value.oc },
{
birthDate:
profile.value == null ? "" : date2Thai(profile.value.birthDate),
},
{ govAge: profile.value == null ? "" : profile.value.govAge },
{
positionLevelNew:
profile.value == null
? ""
: profile.value.type == "EXPERT"
? "ชำนาญการ"
: "ชำนาญการพิเศษ",
}
);
const body = {
template: tp,
reportName: templateName,
data: data,
};
await genReport(body, fileName);
}
/**
* function เรียก link อัปโหลด
* @param name ชื่อไฟล์
* @param file ไฟล์
*/
function upLoadFile(name: string, file: any) {
if (file) {
showLoader();
http
.post(config.API.evaluationFileListbyId("เล่ม 2", id.value), {
fileList: {
fileName: name,
metadata: {
tag: "value",
author: author.value,
subject: subject.value,
assignedPosition: assignedPosition.value,
},
},
})
.then((res) => {
const foundKey: any = Object.keys(res.data).find(
(key) =>
res.data[key]?.fileName !== undefined &&
res.data[key]?.fileName !== ""
);
const link = res.data[foundKey]?.uploadUrl;
fileUpLoad(link, file);
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
downloadFileList(name);
hideLoader();
});
}
}
/**
* function อัปโหลดไฟล์
* @param url link อัปโหลด
* @param file ไฟล์
*/
function fileUpLoad(url: string, file: any) {
axios
.put(url, file, {
headers: { "Content-Type": file?.type },
onUploadProgress: (e) => console.log(e),
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
success($q, "อัปโหลดไฟล์สำเร็จ");
});
}
/** function ยืนยันผลการพิจารณา*/
async function confirmApprove() {
const fileEvaluationValues = [
fileEvaluation81,
fileEvaluation82,
fileEvaluation83,
fileEvaluation84,
fileEvaluation85,
fileEvaluation86,
];
const downloadFileValues = [
downloadFile1,
downloadFile2,
downloadFile3,
downloadFile4,
downloadFile5,
downloadFile6,
];
for (let i = 0; i < downloadFileValues.length; i++) {
if (downloadFileValues[i].value === "") {
fileEvaluationValues[i].value = null;
}
}
setTimeout(() => {
const hasError = [];
for (const key in fileEvaluationRef) {
if (Object.prototype.hasOwnProperty.call(fileEvaluationRef, key)) {
const property = fileEvaluationRef[key];
if (property.value && typeof property.value.validate === "function") {
const isValid = property.value.validate();
hasError.push(isValid);
}
}
}
if (hasError.every((result) => result === true)) {
dialogConfirm(
$q,
() => {
const data = {
metadata: {
additionalProp1: nameOfWork.value,
additionalProp2: nameOfOwner.value,
additionalProp3: position.value,
},
};
showLoader();
http
.patch(
config.API.evaluationPatchData(
"เล่ม 2",
id.value,
"1-เอกสารเล่ม 2"
),
data
)
.then(() => {})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
nextStep();
modalConfirm.value = false;
hideLoader();
});
},
"ยืนยันผลการพิจารณา",
"ต้องการยืนยันผลการพิจารณาใช่หรือไม่?"
);
}
}, 100);
}
/** function ยืนยันผลการพิจารณา*/
function nextStep() {
showLoader();
http
.put(config.API.evaluationNextFinish(id.value))
.then(() => {
success($q, "ยืนยันผลการพิจารณาสำเร็จ");
store.step = 9;
store.currentStep = 9;
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
}
/** function เรียกข้แมูลคุณสมบัติ*/
async function fetchProfile() {
showLoader();
await http
.get(config.API.evaluateGetDetail(id.value))
.then((res) => {
const data = res.data.result;
profile.value = data;
})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
hideLoader();
});
}
const downloadDocEditUrl = ref<string>("");
async function checkDocEdit() {
showLoader();
await http
.get(
config.API.evaluationPatchData(
"เล่ม 2",
id.value,
"2-เอกสารเล่ม 2 (ฉบับแก้ไข)"
)
)
.then((res: any) => {
downloadDocEditUrl.value = res.data.downloadUrl;
})
.catch((e) => {
// messageError($q, e);
})
.finally(() => {
hideLoader();
});
}
const downloadFile1 = ref<string>("");
const downloadFile2 = ref<string>("");
const downloadFile3 = ref<string>("");
const downloadFile4 = ref<string>("");
const downloadFile5 = ref<string>("");
const downloadFile6 = ref<string>("");
/**
* function ดาวน์โหลดไฟล์
* @param fileName ชื่อไฟล์
*/
async function downloadFileList(fileName: string) {
showLoader();
await http
.get(config.API.evaluationFilebyId("เล่ม 2", id.value, fileName))
.then((res) => {
if (
fileName ===
"แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลประกอบการประเมินผลงาน (เอกสารแบบ ค)"
) {
downloadFile1.value = res.data.downloadUrl;
} else if (fileName === "บัญชีแสดงการรับ-ส่งผลงาน (เอกสารหมายเลข 15)") {
downloadFile2.value = res.data.downloadUrl;
} else if (fileName === "แบบประเมินผลงาน (เอกสารหมายเลข 16)") {
downloadFile3.value = res.data.downloadUrl;
} else if (fileName === "แบบแสดงการประเมินผลงาน (เอกสารหมายเลข 17)") {
downloadFile4.value = res.data.downloadUrl;
} else if (fileName === "แบบรายงานผลการประเมินบุคคล (เอกสารหมายเลข 18)") {
downloadFile5.value = res.data.downloadUrl;
} else if (fileName === "แบบสรุปผลการประเมิน (เอกสารแบบ ง)") {
downloadFile6.value = res.data.downloadUrl;
}
})
.finally(() => {
hideLoader();
});
}
const author = ref<string>("");
const subject = ref<string>("");
const assignedPosition = ref<string>("");
/** function เรียกข้อมูลผลงาน*/
async function fetchDataSigner() {
showLoader();
await http
.get(config.API.evaluationSigner(id.value, 2))
.then((res) => {
const data = res.data.result;
if (data) {
author.value = data.authorDoc2;
subject.value = data.subjectDoc2;
assignedPosition.value = data.assignedPosition;
}
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
}
onMounted(async () => {
fetchProfile();
fetchDataSigner();
downloadFileList(
"แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลประกอบการประเมินผลงาน (เอกสารแบบ ค)"
);
downloadFileList("บัญชีแสดงการรับ-ส่งผลงาน (เอกสารหมายเลข 15)");
downloadFileList("แบบประเมินผลงาน (เอกสารหมายเลข 16)");
downloadFileList("แบบแสดงการประเมินผลงาน (เอกสารหมายเลข 17)");
downloadFileList("แบบรายงานผลการประเมินบุคคล (เอกสารหมายเลข 18)");
downloadFileList("แบบสรุปผลการประเมิน (เอกสารแบบ ง)");
checkDocEdit();
});
</script>
<template>
<div class="row q-col-gutter-sm q-pa-sm">
<div class="col-12">
<q-card bordered style="border: 1px solid #d6dee1">
<div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
เอกสารทเกยวของกบการประเม
</div>
<div class="col-12"><q-separator /></div>
<div class="col-12 q-pa-sm">
<div class="row q-col-gutter-sm col-12">
<div class="col-6">
<q-card bordered style="border: 1px solid #d6dee1">
<div class="col-12 row items-center text-weight-medium bg-grey-1 q-py-sm q-px-sm">
<div class="col-xs-12 col-sm-9">
แบบตรวจสอบความถกตองครบถวนของขอมลประกอบการประเมนผลงาน
(เอกสารแบบ )
</div>
<q-space/>
<div class="col-xs-12 col-sm-3 row justify-end">
<div v-if="store.currentStep == 8">
<q-btn
class="col-12"
flat dense
icon="download"
color="indigo"
@click="
onClickDowloadFile(
'เอกสารแบบ ค',
'template-4',
'เอกสารแบบ ค'
)
"
>
<q-tooltip> ดาวนโหลดตนแบบ </q-tooltip></q-btn
>
</div>
<div>
<q-btn
v-if="downloadFile1"
:href="downloadFile1"
target="_blank"
class="col-12"
flat
dense
icon="visibility"
color="blue"
>
<q-tooltip> ไฟลเอกสาร </q-tooltip></q-btn
>
</div>
</div>
</div>
<div class="col-12" v-if="store.currentStep == 8"><q-separator /></div>
<div class="row col-12 q-pa-sm" v-if="store.currentStep == 8">
<div class="row col-12">
<q-file
ref="fileEvaluation81Ref"
v-model="fileEvaluation81"
outlined
hide-bottom-space
lazy-rules
label="อัปโหลดไฟล์"
class="col-12"
dense
accept=".pdf"
:rules="
downloadFile1 === ''
? [(val) => !!val || 'กรุณาเลือกไฟล์']
: []
"
>
<template v-slot:prepend>
<q-icon name="attach_file" />
</template>
<template v-slot:after>
<q-btn
flat
round
dense
color="primary"
icon="mdi-upload"
@click="
upLoadFile(
'แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลประกอบการประเมินผลงาน (เอกสารแบบ ค)',
fileEvaluation81
)
"
><q-tooltip>ปโหลดไฟล</q-tooltip></q-btn
>
</template>
</q-file>
</div>
</div>
</q-card>
</div>
<div class="col-6">
<q-card bordered style="border: 1px solid #d6dee1">
<div class="col-12 row items-center text-weight-medium bg-grey-1 q-py-sm q-px-sm">
<div class="col-xs-12 col-sm-9">
ญชแสดงการร-งผลงาน (เอกสารหมายเลข 15)
</div>
<q-space/>
<div class="col-xs-12 col-sm-3 row justify-end">
<div
v-if="store.currentStep == 8"
>
<q-btn
class="col-12"
flat dense
icon="download"
color="indigo"
@click="
onClickDowloadFile(
'เอกสารหมายเลข 15',
'template-4',
'เอกสารหมายเลข 15'
)
"
>
<q-tooltip> ดาวนโหลดตนแบบ </q-tooltip></q-btn
>
</div>
<div>
<q-btn
v-if="downloadFile2"
:href="downloadFile2"
target="_blank"
class="col-12"
flat dense
icon="visibility"
color="blue"
>
<q-tooltip> ไฟลเอกสาร </q-tooltip></q-btn
>
</div>
</div>
</div>
<div class="col-12" v-if="store.currentStep == 8"><q-separator /></div>
<div class="col-12 q-pa-sm" v-if="store.currentStep == 8">
<div class="row col-12">
<q-file
ref="fileEvaluation82Ref"
v-model="fileEvaluation82"
class="col-12"
outlined
dense
hide-bottom-space
lazy-rules
label="อัปโหลดไฟล์"
accept=".pdf"
:rules="
downloadFile2 === ''
? [(val) => !!val || 'กรุณาเลือกไฟล์']
: []
"
>
<template v-slot:prepend>
<q-icon name="attach_file" />
</template>
<template v-slot:after>
<q-btn
flat
round
dense
color="primary"
icon="mdi-upload"
@click="
upLoadFile(
'บัญชีแสดงการรับ-ส่งผลงาน (เอกสารหมายเลข 15)',
fileEvaluation82
)
"
><q-tooltip>ปโหลดไฟล</q-tooltip></q-btn
>
</template>
</q-file>
</div>
</div>
</q-card>
</div>
<div class="col-6">
<q-card bordered style="border: 1px solid #d6dee1">
<div class="col-12 row items-center text-weight-medium bg-grey-1 q-py-sm q-px-sm">
<div class="col-xs-12 col-sm-9">
แบบประเมนผลงาน (เอกสารหมายเลข 16)
</div>
<q-space/>
<div class="col-xs-12 col-sm-3 row justify-end">
<div v-if="store.currentStep == 8">
<q-btn
class="col-12"
dense
flat
icon="download"
color="indigo"
@click="
onClickDowloadFile(
'เอกสารหมายเลข 16',
'template-4',
'เอกสารหมายเลข 16'
)
"
>
<q-tooltip> ดาวนโหลดตนแบบ </q-tooltip></q-btn
>
</div>
<div>
<q-btn
v-if="downloadFile3"
:href="downloadFile3"
target="_blank"
class="col-12"
flat dense
icon="visibility"
color="blue"
>
<q-tooltip> ไฟลเอกสาร </q-tooltip></q-btn
>
</div>
</div>
</div>
<div class="col-12" v-if="store.currentStep == 8"><q-separator /></div>
<div class="col-12 q-pa-sm" v-if="store.currentStep == 8">
<div class="row col-12">
<q-file
ref="fileEvaluation83Ref"
v-model="fileEvaluation83"
class="col-12"
outlined
dense
hide-bottom-space
lazy-rules
label="อัปโหลดไฟล์"
accept=".pdf"
:rules="
downloadFile3 === ''
? [(val) => !!val || 'กรุณาเลือกไฟล์']
: []
"
>
<template v-slot:prepend>
<q-icon name="attach_file" />
</template>
<template v-slot:after>
<q-btn
flat
round
dense
color="primary"
icon="mdi-upload"
@click="
upLoadFile(
'แบบประเมินผลงาน (เอกสารหมายเลข 16)',
fileEvaluation83
)
"
><q-tooltip>ปโหลดไฟล</q-tooltip></q-btn
>
</template>
</q-file>
</div>
</div>
</q-card>
</div>
<div class="col-6">
<q-card bordered style="border: 1px solid #d6dee1">
<div class="col-12 row items-center text-weight-medium bg-grey-1 q-py-sm q-px-sm">
<div class="col-xs-12 col-sm-9">
แบบแสดงการประเมนผลงาน (เอกสารหมายเลข 17)
</div>
<q-space/>
<div class="col-xs-12 col-sm-3 row justify-end">
<div
v-if="store.currentStep == 8"
>
<q-btn
class="col-12"
flat dense
icon="download"
color="indigo"
@click="
onClickDowloadFile(
'เอกสารหมายเลข 17',
'template-4',
'เอกสารหมายเลข 17'
)
"
>
<q-tooltip> ดาวนโหลดตนแบบ </q-tooltip></q-btn
>
</div>
<div>
<q-btn
v-if="downloadFile4"
:href="downloadFile4"
target="_blank"
class="col-12"
flat dense
icon="visibility"
color="blue"
>
<q-tooltip> ไฟลเอกสาร </q-tooltip></q-btn
>
</div>
</div>
</div>
<div class="col-12" v-if="store.currentStep == 8"><q-separator /></div>
<div class="col-12 q-pa-sm" v-if="store.currentStep == 8">
<div class="row col-12">
<q-file
ref="fileEvaluation84Ref"
v-model="fileEvaluation84"
class="col-12"
outlined
dense
hide-bottom-space
lazy-rules
label="อัปโหลดไฟล์"
accept=".pdf"
:rules="
downloadFile4 === ''
? [(val) => !!val || 'กรุณาเลือกไฟล์']
: []
"
>
<template v-slot:prepend>
<q-icon name="attach_file" />
</template>
<template v-slot:after>
<q-btn
flat
round
dense
color="primary"
icon="mdi-upload"
@click="
upLoadFile(
'แบบแสดงการประเมินผลงาน (เอกสารหมายเลข 17)',
fileEvaluation84
)
"
><q-tooltip>ปโหลดไฟล</q-tooltip></q-btn
>
</template>
</q-file>
</div>
</div>
</q-card>
</div>
<div class="col-6">
<q-card bordered style="border: 1px solid #d6dee1">
<div class="col-12 row items-center text-weight-medium bg-grey-1 q-py-sm q-px-sm">
<div class="col-xs-12 col-sm-9">
แบบรายงานผลการประเมนบคคล (เอกสารหมายเลข 18)
</div>
<q-space/>
<div class="col-xs-12 col-sm-3 row justify-end">
<div
v-if="store.currentStep == 8"
>
<q-btn
class="col-12"
flat dense
icon="download"
color="indigo"
@click="
onClickDowloadFile(
'เอกสารหมายเลข 18',
'template-4',
'เอกสารหมายเลข 18'
)
"
>
<q-tooltip> ดาวนโหลดตนแบบ </q-tooltip></q-btn
>
</div>
<div>
<q-btn
v-if="downloadFile5"
:href="downloadFile5"
target="_blank"
class="col-12"
flat dense
icon="visibility"
color="blue"
>
<q-tooltip> ไฟลเอกสาร </q-tooltip></q-btn
>
</div>
</div>
</div>
<div class="col-12" v-if="store.currentStep == 8"><q-separator /></div>
<div class="col-12 q-pa-sm" v-if="store.currentStep == 8">
<div class="row q-col-gutter-md col-12">
<div class="row col-12">
<q-file
ref="fileEvaluation85Ref"
v-model="fileEvaluation85"
class="col-12"
outlined
dense
hide-bottom-space
lazy-rules
label="อัปโหลดไฟล์"
accept=".pdf"
:rules="
downloadFile5 === ''
? [(val) => !!val || 'กรุณาเลือกไฟล์']
: []
"
>
<template v-slot:prepend>
<q-icon name="attach_file" />
</template>
<template v-slot:after>
<q-btn
flat
round
dense
color="primary"
icon="mdi-upload"
@click="
upLoadFile(
'แบบรายงานผลการประเมินบุคคล (เอกสารหมายเลข 18)',
fileEvaluation85
)
"
><q-tooltip>ปโหลดไฟล</q-tooltip></q-btn
>
</template>
</q-file>
</div>
</div>
</div>
</q-card>
</div>
<div class="col-6">
<q-card bordered style="border: 1px solid #d6dee1">
<div class="col-12 row items-center text-weight-medium bg-grey-1 q-py-sm q-px-sm">
<div class="col-xs-12 col-sm-9">
แบบสรปผลการประเม (เอกสารแบบ )
</div>
<q-space/>
<div class="col-xs-12 col-sm-3 row justify-end">
<div v-if="store.currentStep == 8">
<q-btn
flat dense
icon="download"
color="indigo"
@click="
onClickDowloadFile(
'เอกสารแบบ ง',
'template-4',
'เอกสารแบบ ง'
)
"
>
<q-tooltip> ดาวนโหลดตนแบบ </q-tooltip></q-btn
>
</div>
<div>
<q-btn
v-if="downloadFile6"
:href="downloadFile6"
target="_blank"
class="col-12"
flat dense
icon="visibility"
color="blue"
>
<q-tooltip> ไฟลเอกสาร </q-tooltip></q-btn
>
</div>
</div>
</div>
<div class="col-12" v-if="store.currentStep == 8"><q-separator /></div>
<div class="col-12 q-pa-sm" v-if="store.currentStep == 8">
<div class="row col-12">
<q-file
ref="fileEvaluation86Ref"
v-model="fileEvaluation86"
class="col-12"
outlined
dense
hide-bottom-space
lazy-rules
label="อัปโหลดไฟล์"
accept=".pdf"
:rules="
downloadFile6 === ''
? [(val) => !!val || 'กรุณาเลือกไฟล์']
: []
"
>
<template v-slot:prepend>
<q-icon name="attach_file" />
</template>
<template v-slot:after>
<q-btn
flat
round
dense
color="primary"
icon="mdi-upload"
@click="
upLoadFile(
'แบบสรุปผลการประเมิน (เอกสารแบบ ง)',
fileEvaluation86
)
"
><q-tooltip>ปโหลดไฟล</q-tooltip></q-btn
>
</template>
</q-file>
</div>
</div>
</q-card>
</div>
</div>
</div>
</q-card>
</div>
<div v-if="downloadDocEditUrl != ''" class="col-12">
<q-card bordered style="border: 1px solid #d6dee1">
<div class="col-12 row items-center text-weight-medium bg-grey-1 q-py-sm q-px-md">
<div>เอกสารเล 2 (ฉบบแกไข)</div>
<q-space/>
<div v-if="downloadDocEditUrl !== ''">
<q-btn
:href="downloadDocEditUrl"
target="_blank"
class="col-12"
icon="visibility"
color="blue"
flat
dense
>
<q-tooltip> ไฟลเอกสาร </q-tooltip></q-btn
>
</div>
</div>
</q-card>
</div>
<div v-if="store.currentStep == 8" class="col-12">
<div align="right">
<q-btn
unelevated
label="ยืนยันผลการพิจารณา"
color="public"
@click="confirmApprove"
/>
</div>
</div>
</div>
<q-dialog v-model="modalConfirm" persistent>
<q-card style="min-width: 60vw">
<q-toolbar>
<q-toolbar-title class="text-subtitle2 text-bold">
นยนผลการพจารณา
</q-toolbar-title>
<q-btn
icon="close"
unelevated
round
dense
@click="modalConfirm = false"
style="color: #ff8080; background-color: #ffdede"
/>
</q-toolbar>
<q-separator />
<q-card-section class="q-pa-md bg-grey-1">
<div class="row q-col-gutter-sm">
<div class="col-4">
<q-input
v-model="nameOfWork"
label="ชื่อผลงาน"
outlined
dense
bg-color="white"
/>
</div>
<div class="col-4">
<q-input
v-model="nameOfOwner"
label="ชื่อเจ้าของผลงาน"
outlined
dense
bg-color="white"
/>
</div>
<div class="col-4">
<q-input
v-model="position"
label="ตำแหน่งที่ได้รับ"
outlined
dense
bg-color="white"
/>
</div>
</div>
</q-card-section>
<q-separator />
<div class="row justify-end q-px-md q-py-sm items-center">
<q-btn
dense
color="public"
id="onSubmit"
class="q-px-md q-py-xs"
label="ยืนยัน"
@click="confirmApprove"
>
</q-btn>
</div>
</q-card>
</q-dialog>
</template>
<style scoped></style>