656 lines
21 KiB
Vue
656 lines
21 KiB
Vue
<script setup lang="ts">
|
|
import { onMounted, ref } from "vue";
|
|
import { useQuasar } from "quasar";
|
|
import axios from "axios";
|
|
|
|
import { useRoute } from "vue-router";
|
|
import { checkPermission } from "@/utils/permissions";
|
|
import { useCounterMixin } from "@/stores/mixin";
|
|
import { useEvaluateDetailStore } from "@/modules/12_evaluatePersonal/store/EvaluateDetail";
|
|
import http from "@/plugins/http";
|
|
import config from "@/app.config";
|
|
import genReport from "@/plugins/genreport";
|
|
|
|
import DialogHeader from "@/components/DialogHeader.vue";
|
|
|
|
/** uer*/
|
|
const store = useEvaluateDetailStore();
|
|
const $q = useQuasar();
|
|
const mixin = useCounterMixin();
|
|
const route = useRoute();
|
|
|
|
const { showLoader, hideLoader, messageError, success, dialogConfirm } = mixin;
|
|
|
|
const checkBox = ref<string>("");
|
|
const evaluationResult = ref<string>("");
|
|
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 formTemplates = ref<any[]>([
|
|
{
|
|
code: "เอกสารแบบ ค",
|
|
templateName: "template-4",
|
|
title:
|
|
" แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลประกอบการประเมินผลงาน(เอกสารแบบ ค)",
|
|
fileName:
|
|
"แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลประกอบการประเมินผลงาน (เอกสารแบบ ค)",
|
|
downloadFile: "",
|
|
file: null,
|
|
},
|
|
{
|
|
code: "เอกสารหมายเลข 15",
|
|
templateName: "template-4",
|
|
title: "บัญชีแสดงการรับ-ส่งผลงาน (เอกสารหมายเลข 15)",
|
|
fileName: "บัญชีแสดงการรับ-ส่งผลงาน (เอกสารหมายเลข 15)",
|
|
downloadFile: "",
|
|
file: null,
|
|
},
|
|
{
|
|
code: "เอกสารหมายเลข 16",
|
|
templateName: "template-4",
|
|
title: " แบบประเมินผลงาน (เอกสารหมายเลข 16)",
|
|
fileName: "แบบประเมินผลงาน (เอกสารหมายเลข 16)",
|
|
downloadFile: "",
|
|
file: null,
|
|
},
|
|
{
|
|
code: "เอกสารหมายเลข 17",
|
|
templateName: "template-4",
|
|
title: " แบบแสดงการประเมินผลงาน (เอกสารหมายเลข 17)",
|
|
fileName: "แบบแสดงการประเมินผลงาน (เอกสารหมายเลข 17)",
|
|
downloadFile: "",
|
|
file: null,
|
|
},
|
|
|
|
{
|
|
code: "เอกสารหมายเลข 18",
|
|
templateName: "template-4",
|
|
title: " แบบรายงานผลการประเมินบุคคล (เอกสารหมายเลข 18)",
|
|
fileName: "แบบรายงานผลการประเมินบุคคล (เอกสารหมายเลข 18)",
|
|
downloadFile: "",
|
|
file: null,
|
|
},
|
|
|
|
{
|
|
code: "เอกสารแบบ ง",
|
|
templateName: "template-4",
|
|
title: "แบบสรุปผลการประเมิน (เอกสารแบบ ง)",
|
|
fileName: "แบบสรุปผลการประเมิน (เอกสารแบบ ง)",
|
|
downloadFile: "",
|
|
file: null,
|
|
},
|
|
]);
|
|
|
|
/** ติดต่อผู้ขอประเมิน*/
|
|
const messenger = ref<string>(""); //ข้อความ
|
|
const title = ref<string>(""); //หัวข้อ
|
|
const modalEvaluation = ref<boolean>(false); //แสดง popup ติดต่อผู้ขอประเมิน
|
|
|
|
/** function ดาวน์โหลดไฟล์ต้นแบบ*/
|
|
async function onClickDowloadFile(
|
|
tp: string,
|
|
templateName: string,
|
|
fileName: string
|
|
) {
|
|
showLoader();
|
|
await http
|
|
.get(config.API.evaluateGetReport(id.value))
|
|
.then(async (res) => {
|
|
const data = res.data.result;
|
|
const body = {
|
|
template: tp,
|
|
reportName: templateName,
|
|
data: data,
|
|
};
|
|
await genReport(body, fileName);
|
|
})
|
|
.catch((e) => {
|
|
messageError($q, e);
|
|
})
|
|
.finally(() => {
|
|
hideLoader();
|
|
});
|
|
}
|
|
|
|
/**
|
|
* 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(async (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;
|
|
await fileUpLoad(link, file);
|
|
await downloadFileList(name);
|
|
})
|
|
.catch((e) => {
|
|
messageError($q, e);
|
|
})
|
|
.finally(() => {
|
|
hideLoader();
|
|
});
|
|
}
|
|
}
|
|
|
|
/**
|
|
* function อัปโหลดไฟล์
|
|
* @param url link อัปโหลด
|
|
* @param file ไฟล์
|
|
*/
|
|
async function fileUpLoad(url: string, file: any) {
|
|
await axios
|
|
.put(url, file, {
|
|
headers: { "Content-Type": file?.type },
|
|
onUploadProgress: (e) => console.log(e),
|
|
})
|
|
.then(() => {
|
|
success($q, "อัปโหลดไฟล์สำเร็จ");
|
|
})
|
|
.catch((e) => {
|
|
messageError($q, e);
|
|
})
|
|
.finally(() => {
|
|
hideLoader();
|
|
});
|
|
}
|
|
|
|
function onSubmit() {
|
|
if (formTemplates.value.some((e: any) => e.downloadFile === "")) {
|
|
for (let i = 0; i < formTemplates.value.length; i++) {
|
|
if (formTemplates.value[i].downloadFile === "") {
|
|
formTemplates.value[i].file = null;
|
|
}
|
|
}
|
|
} else {
|
|
modalConfirm.value = true;
|
|
}
|
|
}
|
|
|
|
/** function ยืนยันผลการพิจารณา */
|
|
async function confirmApprove() {
|
|
dialogConfirm(
|
|
$q,
|
|
async () => {
|
|
showLoader();
|
|
const data = {
|
|
metadata: {
|
|
additionalProp1: nameOfWork.value,
|
|
additionalProp2: nameOfOwner.value,
|
|
additionalProp3: position.value,
|
|
},
|
|
};
|
|
await http
|
|
.patch(
|
|
config.API.evaluationPatchData("เล่ม 2", id.value, "1-เอกสารเล่ม 2"),
|
|
data
|
|
)
|
|
.then(async () => {
|
|
await Promise.all([updateEvaluationResult(), nextStep()]);
|
|
modalConfirm.value = false;
|
|
store.step = 9;
|
|
store.currentStep = 9;
|
|
success($q, "ยืนยันผลการพิจารณาสำเร็จ");
|
|
})
|
|
.catch((e) => {
|
|
messageError($q, e);
|
|
})
|
|
.finally(() => {
|
|
hideLoader();
|
|
});
|
|
},
|
|
"ยืนยันผลการพิจารณา",
|
|
"ต้องการยืนยันผลการพิจารณาใช่หรือไม่?"
|
|
);
|
|
}
|
|
|
|
/** function ยืนยันผลการพิจารณา*/
|
|
async function nextStep() {
|
|
await http
|
|
.put(config.API.evaluationNextFinish(id.value))
|
|
.then(() => {})
|
|
.catch((e) => {
|
|
messageError($q, e);
|
|
});
|
|
}
|
|
|
|
const downloadDocEditUrl = ref<string>("");
|
|
|
|
/** function ตรวจสอบไฟล์แก้ไข*/
|
|
async function checkDocEdit() {
|
|
await http
|
|
.get(
|
|
config.API.evaluationPatchData(
|
|
"เล่ม 2",
|
|
id.value,
|
|
"2-เอกสารเล่ม 2 (ฉบับแก้ไข)"
|
|
)
|
|
)
|
|
.then((res: any) => {
|
|
downloadDocEditUrl.value = res.data.downloadUrl;
|
|
});
|
|
}
|
|
|
|
/**
|
|
* function ดาวน์โหลดไฟล์
|
|
* @param fileName ชื่อไฟล์
|
|
*/
|
|
async function downloadFileList(fileName: string) {
|
|
await http
|
|
.get(config.API.evaluationFilebyId("เล่ม 2", id.value, fileName))
|
|
.then((res) => {
|
|
const index = formTemplates.value.findIndex(
|
|
(item) => item.fileName === fileName
|
|
);
|
|
if (index !== -1) {
|
|
formTemplates.value[index].downloadFile = res.data.downloadUrl;
|
|
}
|
|
});
|
|
}
|
|
|
|
const author = ref<string>(""); //เจ้าของผลงาน
|
|
const subject = ref<string>(""); //ชื่อผลงาน
|
|
const assignedPosition = ref<string>(""); //ตำแหน่ง
|
|
|
|
/** function เรียกข้อมูลผลงาน*/
|
|
async function fetchDataSigner() {
|
|
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;
|
|
|
|
nameOfWork.value = data.subjectDoc2 ? data.subjectDoc2[0] : '';
|
|
nameOfOwner.value = data.authorDoc2;
|
|
position.value = data.assignedPosition;
|
|
evaluationResult.value = data.evaluationResult;
|
|
}
|
|
})
|
|
.catch((e) => {
|
|
messageError($q, e);
|
|
});
|
|
}
|
|
|
|
async function updateEvaluationResult() {
|
|
await http
|
|
.put(config.API.updateEvaluationResult(id.value), {
|
|
result: checkBox.value,
|
|
})
|
|
.then(() => {})
|
|
.catch((e) => {
|
|
messageError($q, e);
|
|
});
|
|
}
|
|
|
|
/** fiunction ส่งข้อความ*/
|
|
async function onSentMessenger() {
|
|
showLoader();
|
|
await http
|
|
.put(config.API.evaluationSentToContact(id.value), {
|
|
subject: title.value,
|
|
body: messenger.value,
|
|
})
|
|
.then(() => {
|
|
success($q, "ส่งข้อความสำเร็จ");
|
|
title.value = "";
|
|
messenger.value = "";
|
|
modalEvaluation.value = false;
|
|
})
|
|
.catch((e) => {
|
|
messageError($q, e);
|
|
})
|
|
.finally(() => {
|
|
hideLoader();
|
|
});
|
|
}
|
|
|
|
onMounted(async () => {
|
|
try {
|
|
showLoader();
|
|
await Promise.all([
|
|
fetchDataSigner(),
|
|
formTemplates.value.forEach((e) => {
|
|
downloadFileList(e.fileName);
|
|
}),
|
|
|
|
// downloadFileList(
|
|
// "แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลประกอบการประเมินผลงาน (เอกสารแบบ ค)"
|
|
// ),
|
|
// downloadFileList("บัญชีแสดงการรับ-ส่งผลงาน (เอกสารหมายเลข 15)"),
|
|
// downloadFileList("แบบประเมินผลงาน (เอกสารหมายเลข 16)"),
|
|
// downloadFileList("แบบแสดงการประเมินผลงาน (เอกสารหมายเลข 17)"),
|
|
// downloadFileList("แบบรายงานผลการประเมินบุคคล (เอกสารหมายเลข 18)"),
|
|
// downloadFileList("แบบสรุปผลการประเมิน (เอกสารแบบ ง)"),
|
|
checkDocEdit(),
|
|
]);
|
|
} catch (error) {
|
|
console.log(error);
|
|
} finally {
|
|
hideLoader();
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="row q-col-gutter-sm q-pa-sm">
|
|
<q-form
|
|
class="row q-col-gutter-sm"
|
|
greedy
|
|
@submit.prevent
|
|
@validation-success="onSubmit"
|
|
>
|
|
<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"
|
|
v-for="(item, index) in formTemplates"
|
|
:key="index"
|
|
>
|
|
<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">
|
|
{{ item.title }}
|
|
</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(
|
|
item.code,
|
|
item.templateName,
|
|
item.code
|
|
)
|
|
"
|
|
>
|
|
<q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
|
|
>
|
|
</div>
|
|
<div>
|
|
<q-btn
|
|
v-if="item.downloadFile"
|
|
:href="item.downloadFile"
|
|
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 &&
|
|
checkPermission($route)?.attrIsUpdate
|
|
"
|
|
>
|
|
<div class="row col-12">
|
|
<q-file
|
|
v-model="item.file"
|
|
outlined
|
|
hide-bottom-space
|
|
lazy-rules
|
|
label="อัปโหลดไฟล์"
|
|
class="col-12"
|
|
dense
|
|
accept=".pdf"
|
|
:rules="
|
|
item.downloadFile === ''
|
|
? [(val:string) => !!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(item.fileName, item.file)"
|
|
><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
|
|
>
|
|
</template>
|
|
</q-file>
|
|
</div>
|
|
</div>
|
|
</q-card>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</q-card>
|
|
</div>
|
|
<div class="col-12" v-if="downloadDocEditUrl !== ''">
|
|
<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>
|
|
<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 && checkPermission($route)?.attrIsUpdate"
|
|
class="col-12"
|
|
>
|
|
<!-- @click="modalConfirm = true" -->
|
|
<div align="right">
|
|
<q-btn
|
|
class="q-mr-sm"
|
|
label="ติดต่อผู้ขอประเมิน"
|
|
color="info"
|
|
@click="modalEvaluation = true"
|
|
/>
|
|
<q-btn
|
|
type="submit"
|
|
unelevated
|
|
label="ยืนยันผลการพิจารณา"
|
|
color="public"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
v-if="evaluationResult !== 'PENDING'"
|
|
align="right"
|
|
class="full-width"
|
|
>
|
|
ผลการประเมิน:
|
|
<span
|
|
:class="
|
|
evaluationResult == 'PASS'
|
|
? `full-width text-green`
|
|
: `full-width text-red`
|
|
"
|
|
>{{ evaluationResult == "PASS" ? "ผ่าน" : "ไม่ผ่าน" }}</span
|
|
>
|
|
</div>
|
|
</q-form>
|
|
</div>
|
|
|
|
<!-- dialog ยืนยันผลการพิจารณา -->
|
|
<q-dialog v-model="modalConfirm" persistent>
|
|
<q-card style="min-width: 60vw">
|
|
<DialogHeader
|
|
tittle="ยืนยันผลการพิจารณา"
|
|
:close="() => (modalConfirm = false)"
|
|
/>
|
|
|
|
<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>
|
|
<div class="row q-gutter-x-sm q-pt-sm">
|
|
<q-radio
|
|
v-model="checkBox"
|
|
checked-icon="task_alt"
|
|
unchecked-icon="panorama_fish_eye"
|
|
size="sm"
|
|
dense
|
|
val="PASS"
|
|
label="ผ่าน"
|
|
/>
|
|
<q-radio
|
|
v-model="checkBox"
|
|
checked-icon="task_alt"
|
|
unchecked-icon="panorama_fish_eye"
|
|
size="sm"
|
|
dense
|
|
val="NOTPASS"
|
|
label="ไม่ผ่าน"
|
|
/>
|
|
</div>
|
|
</q-card-section>
|
|
<q-separator />
|
|
|
|
<div class="row justify-end q-px-md q-py-sm items-center">
|
|
<q-btn
|
|
:disable="checkBox == ''"
|
|
dense
|
|
color="public"
|
|
class="q-px-md q-py-xs"
|
|
label="ยืนยัน"
|
|
@click="confirmApprove"
|
|
>
|
|
</q-btn>
|
|
</div>
|
|
</q-card>
|
|
</q-dialog>
|
|
|
|
<!-- popup ติดต่อผู้ขอประเมิน -->
|
|
<q-dialog v-model="modalEvaluation" persistent>
|
|
<q-card style="min-width: 60vw">
|
|
<q-form greedy @submit.prevent @validation-success="onSentMessenger">
|
|
<DialogHeader
|
|
tittle="ติดต่อผู้ขอประเมิน"
|
|
:close="
|
|
() => ((modalEvaluation = false), (title = ''), (messenger = ''))
|
|
"
|
|
/>
|
|
<q-separator />
|
|
<q-card-section class="q-pa-md bg-grey-1">
|
|
<div class="row q-col-gutter-sm">
|
|
<div class="col-12">
|
|
<q-input
|
|
v-model="title"
|
|
label="หัวข้อ"
|
|
outlined
|
|
dense
|
|
bg-color="white"
|
|
:rules="[(val:string) => !!val || 'กรุณากรอกหัวข้อ']"
|
|
/>
|
|
</div>
|
|
<div class="col-12">
|
|
<q-input
|
|
v-model="messenger"
|
|
label="ข้อความ"
|
|
type="textarea"
|
|
outlined
|
|
dense
|
|
bg-color="white"
|
|
:rules="[(val:string) => !!val || 'กรุณากรอกข้อความ']"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</q-card-section>
|
|
<q-separator />
|
|
|
|
<q-card-actions align="right">
|
|
<q-btn color="public" type="submit" label="ส่งข้อความ" />
|
|
</q-card-actions>
|
|
</q-form>
|
|
</q-card>
|
|
</q-dialog>
|
|
</template>
|
|
|
|
<style scoped></style>
|