616 lines
18 KiB
Vue
616 lines
18 KiB
Vue
<script setup lang="ts">
|
|
import { ref, onMounted } from "vue";
|
|
import { useCounterMixin } from "@/stores/mixin";
|
|
import { useQuasar } from "quasar";
|
|
import keycloak from "@/plugins/keycloak";
|
|
|
|
import axios from "axios";
|
|
import http from "@/plugins/http";
|
|
import config from "@/app.config";
|
|
import { useRouter, useRoute } from "vue-router";
|
|
import genReport from "@/plugins/genreport";
|
|
import { useEvaluateDetailStore } from "@/modules/12_evaluatePersonal/store/EvaluateDetail";
|
|
|
|
const store = useEvaluateDetailStore();
|
|
|
|
const modalView = ref<boolean>(false);
|
|
const fullName = ref<string>(
|
|
keycloak.tokenParsed ? keycloak.tokenParsed.name!.toString() : ""
|
|
);
|
|
|
|
const router = useRouter();
|
|
const route = useRoute();
|
|
const numOfPages = ref<number>(0);
|
|
const page = ref<number>(1);
|
|
const $q = useQuasar();
|
|
const mixin = useCounterMixin();
|
|
const {
|
|
dialogConfirm,
|
|
date2Thai,
|
|
showLoader,
|
|
hideLoader,
|
|
messageError,
|
|
success,
|
|
} = mixin;
|
|
const AnnouncementStartDate = ref<string | null>();
|
|
const AnnouncementEndDate = ref<string | null>();
|
|
const id = ref<string>(route.params.id as string);
|
|
const pdfSrc = ref<any>();
|
|
const fileEvaluation5 = ref<any>();
|
|
const fileEvaluation5Ref = ref<any>();
|
|
const status = ref<string>("ANNOUNCE_WEB");
|
|
const website = ref<string>("https://bma-ehr.frappet.com/");
|
|
|
|
const files = [
|
|
{
|
|
id: "file1",
|
|
fileName: "แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)",
|
|
pathName: "5-แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)",
|
|
},
|
|
{
|
|
id: "file2",
|
|
fileName: "ประกาศผลการคัดเลือกบุคคล (เอกสารหมายเลข 10)",
|
|
pathName: "10-ประกาศผลการคัดเลือกบุคคล (เอกสารหมายเลข 10)",
|
|
},
|
|
{
|
|
id: "file3",
|
|
fileName: "ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)",
|
|
pathName: "6-ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)",
|
|
},
|
|
];
|
|
|
|
const listFile = [
|
|
{
|
|
id: "x1",
|
|
fileName: "เอกสาร 1",
|
|
pathName: "12",
|
|
},
|
|
{
|
|
id: "x2",
|
|
fileName: "เอกสาร 2",
|
|
pathName: "12",
|
|
},
|
|
];
|
|
|
|
function downloadFile(name: string) {
|
|
console.log("download");
|
|
}
|
|
|
|
function deleteFile(name: string) {
|
|
console.log("delete");
|
|
}
|
|
|
|
function save() {
|
|
download10Url.value === ""
|
|
? (fileEvaluation5.value = "")
|
|
: fileEvaluation5.value;
|
|
fileEvaluation5Ref.value.validate();
|
|
if (
|
|
fileEvaluation5Ref.value.hasError === false &&
|
|
download10Url.value !== ""
|
|
) {
|
|
dialogConfirm($q, () => {
|
|
showLoader();
|
|
http
|
|
.put(config.API.evaluationNext5To6(id.value))
|
|
// .then((res) => {})
|
|
.catch((e) => {
|
|
messageError($q, e);
|
|
})
|
|
.finally(() => {
|
|
success($q, "บันทึกแจ้งผลการประกาศคัดเลือกสำเร็จ");
|
|
store.step = 6;
|
|
store.currentStep = 6;
|
|
hideLoader();
|
|
});
|
|
});
|
|
}
|
|
}
|
|
|
|
function upLoadFile(file: any) {
|
|
if (file) {
|
|
showLoader();
|
|
http
|
|
.post(config.API.evaluationFileListbyId("เล่ม 1", id.value), {
|
|
fileList: {
|
|
fileName: "บันทึกแจ้งผลการประกาศคัดเลือก",
|
|
metadata: {
|
|
tag: "value",
|
|
author: author.value,
|
|
subject: subject.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);
|
|
})
|
|
.catch((e) => {
|
|
messageError($q, e);
|
|
})
|
|
.finally(() => {
|
|
hideLoader();
|
|
});
|
|
}
|
|
}
|
|
|
|
function fileUpLoad(url: string) {
|
|
axios
|
|
.put(url, fileEvaluation5.value, {
|
|
headers: { "Content-Type": fileEvaluation5.value?.type },
|
|
onUploadProgress: (e) => console.log(e),
|
|
})
|
|
.catch((e) => {
|
|
messageError($q, e);
|
|
})
|
|
.finally(() => {
|
|
checkDocResult();
|
|
success($q, "อัปโหลดไฟล์สำเร็จ");
|
|
});
|
|
}
|
|
|
|
function getFileName(fileName: string) {
|
|
if (fileName && fileName.lastIndexOf(".") !== -1) {
|
|
const index = fileName.indexOf("(");
|
|
if (index !== -1) {
|
|
return fileName.substring(0, index).trim();
|
|
} else {
|
|
// กรณีไม่มีวงเล็บ
|
|
return fileName.split(".").slice(0, -1).join(".");
|
|
}
|
|
} else {
|
|
// ในกรณีที่ไม่มีนามสกุล
|
|
return fileName;
|
|
}
|
|
}
|
|
|
|
/** ไปหน้าต่อไปของรายงาน */
|
|
function nextPage() {
|
|
if (page.value < numOfPages.value) {
|
|
page.value++;
|
|
}
|
|
}
|
|
|
|
/** กลับหน้าก่อนหน้าของรายงาน */
|
|
function backPage() {
|
|
if (page.value !== 1) {
|
|
page.value--;
|
|
}
|
|
}
|
|
|
|
function copyLink(name: string) {
|
|
showLoader();
|
|
http
|
|
.get(config.API.evaluationFilebyId("เล่ม 1", id.value, name))
|
|
.then((res) => {
|
|
console.log(res.data);
|
|
const link = res.data.downloadUrl;
|
|
navigator.clipboard.writeText(link);
|
|
})
|
|
.catch((e) => {})
|
|
.finally(() => {
|
|
success($q, "คัดลอก URL สำเร็จ");
|
|
hideLoader();
|
|
});
|
|
}
|
|
|
|
function getDate() {
|
|
showLoader();
|
|
http
|
|
.get(config.API.evaluationDateAnnounce(id.value))
|
|
.then((res) => {
|
|
const data = res.data.result;
|
|
AnnouncementStartDate.value = date2Thai(data.dateStartAnnounce);
|
|
// const endDate = new Date(data.dateStartAnnounce);
|
|
// endDate.setDate(endDate.getDate() + 30);
|
|
AnnouncementEndDate.value = date2Thai(data.dateEndAnnounce);
|
|
})
|
|
.catch((e) => {
|
|
messageError($q, e);
|
|
})
|
|
.finally(() => {
|
|
hideLoader();
|
|
});
|
|
}
|
|
// function linkCopy(link: string) {
|
|
// navigator.clipboard
|
|
// .writeText(link)
|
|
// .then(() => {
|
|
// console.log(`Copied link for file: ${link}`);
|
|
// })
|
|
// .catch((e) => {
|
|
// messageError($q, e);
|
|
// })
|
|
// .finally(() => {
|
|
// success($q, "คัดลอกสำเร็จ");
|
|
// });
|
|
// }
|
|
|
|
// async function onClickDowloadFile(
|
|
// tp: string,
|
|
// templateName: string,
|
|
// fileName: string
|
|
// ) {
|
|
// showLoader();
|
|
// const data = Object.assign(
|
|
// { fullName: fullName.value },
|
|
// tp === "EV1_005" || tp === "EV1_007" ? { organizationName: "-" } : null,
|
|
// tp === "EV1_007" ? { positionName: "-" } : null,
|
|
// tp === "EV1_007" ? { positionLeaveName: "-" } : null
|
|
// );
|
|
// const body = {
|
|
// template: tp,
|
|
// reportName: templateName,
|
|
// data: data,
|
|
// };
|
|
// console.log(body);
|
|
// await genReport(body, fileName);
|
|
// }
|
|
|
|
// function onClickViewPDF(file: any) {
|
|
// // pdfSrc.value = file.webkitRelativePath;
|
|
// modalView.value = true;
|
|
// }
|
|
|
|
const download10Url = ref<string>("");
|
|
function checkDocResult() {
|
|
showLoader();
|
|
http
|
|
.get(
|
|
config.API.evaluationPatchData(
|
|
"เล่ม 1",
|
|
id.value,
|
|
"บันทึกแจ้งผลการประกาศคัดเลือก"
|
|
)
|
|
)
|
|
.then((res: any) => {
|
|
download10Url.value = res.data.downloadUrl;
|
|
})
|
|
// .catch((e) => {
|
|
// messageError($q, e);
|
|
// })
|
|
.finally(() => {
|
|
hideLoader();
|
|
});
|
|
}
|
|
|
|
const author = ref<string>("");
|
|
const subject = ref<string>("");
|
|
|
|
function fetchDataSigner() {
|
|
showLoader();
|
|
http
|
|
.get(config.API.evaluationSigner(id.value, 1))
|
|
.then((res) => {
|
|
const data = res.data.result;
|
|
author.value = data.author;
|
|
subject.value = data.subject;
|
|
})
|
|
.catch((e) => {
|
|
messageError($q, e);
|
|
})
|
|
.finally(() => {
|
|
hideLoader();
|
|
});
|
|
}
|
|
|
|
onMounted(async () => {
|
|
await getDate();
|
|
await checkDocResult();
|
|
await fetchDataSigner();
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="row q-gutter-sm">
|
|
<div class="col-12">
|
|
<q-banner class="text-weight-bold text-red-14 bg-red-2 text-center">
|
|
<div class="text-weight-bold">
|
|
<q-icon name="info_outline" color="red-14" size="24px" />
|
|
ประกาศเมื่อวันที่ {{ AnnouncementStartDate }} ถึงวันที่
|
|
{{ AnnouncementEndDate }}
|
|
</div>
|
|
</q-banner>
|
|
</div>
|
|
|
|
<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>
|
|
|
|
<q-list
|
|
v-for="file in files"
|
|
:key="file.id"
|
|
class="full-width"
|
|
bordered
|
|
separator
|
|
>
|
|
<q-item clickable v-ripple>
|
|
<q-item-section>{{ file.fileName }}</q-item-section>
|
|
<q-item-section avatar>
|
|
<div class="row">
|
|
<div>
|
|
<!-- <q-btn
|
|
:href="file.pathName"
|
|
target="_blank"
|
|
flat
|
|
round
|
|
color="blue-6"
|
|
icon="mdi-download"
|
|
>
|
|
<q-tooltip>คัดลอกลิ้งค์</q-tooltip>
|
|
</q-btn> -->
|
|
<q-btn
|
|
flat
|
|
round
|
|
color="primary"
|
|
icon="mdi-clipboard-outline"
|
|
@click="copyLink(file.pathName)"
|
|
>
|
|
<q-tooltip>คัดลอกลิ้งค์</q-tooltip>
|
|
</q-btn>
|
|
</div>
|
|
</div>
|
|
</q-item-section>
|
|
</q-item>
|
|
</q-list>
|
|
</q-card>
|
|
</div>
|
|
<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="row">
|
|
<div class="col-12 q-pa-sm">
|
|
<div class="row q-col-gutter-md col-12">
|
|
<div class="col-xs-12 col-sm-6 row">
|
|
<q-btn
|
|
v-if="download10Url != ''"
|
|
:href="download10Url"
|
|
target="_blank"
|
|
class="col-12"
|
|
outline
|
|
icon="visibility"
|
|
label="ดูไฟล์เอกสาร"
|
|
color="primary"
|
|
>
|
|
<q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
|
|
>
|
|
</div>
|
|
|
|
<div v-if="store.currentStep == 5" class="row col-12">
|
|
<div class="col-xs-12 col-sm-10 row">
|
|
<q-file
|
|
ref="fileEvaluation5Ref"
|
|
v-model="fileEvaluation5"
|
|
class="col-12"
|
|
outlined
|
|
dense
|
|
label="อัปโหลดไฟล์"
|
|
hide-bottom-space
|
|
lazy-rules
|
|
accept=".pdf"
|
|
:rules="
|
|
download10Url === ''
|
|
? [(val) => !!val || 'กรุณาเลือกไฟล์']
|
|
: []
|
|
"
|
|
>
|
|
<template v-slot:prepend>
|
|
<q-icon name="attach_file" />
|
|
</template>
|
|
</q-file>
|
|
</div>
|
|
<div class="col-2 self-center text-center q-pl-none">
|
|
<q-btn
|
|
flat
|
|
round
|
|
dense
|
|
color="primary"
|
|
icon="mdi-upload"
|
|
@click="upLoadFile(fileEvaluation5)"
|
|
><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</q-card>
|
|
</div>
|
|
|
|
<!-- <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="row">
|
|
<div class="col-12 q-pa-sm">
|
|
<div class="row q-col-gutter-md col-12 q-mb-xs">
|
|
<div class="col-xs-12 col-sm-11 row">
|
|
<q-file
|
|
v-model="fileEvaluation5"
|
|
class="col-12"
|
|
outlined
|
|
dense
|
|
hide-bottom-space
|
|
lazy-rules
|
|
accept=".pdf"
|
|
label="อัปโหลดไฟล์"
|
|
>
|
|
<template v-slot:prepend>
|
|
<q-icon name="attach_file" />
|
|
</template>
|
|
</q-file>
|
|
</div>
|
|
<div class="col-1 self-center text-center q-pl-none">
|
|
<q-btn
|
|
flat
|
|
round
|
|
dense
|
|
color="primary"
|
|
icon="mdi-upload"
|
|
@click="upLoadFile"
|
|
><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
|
|
>
|
|
</div>
|
|
</div>
|
|
<div v-if="listFile.length > 0">
|
|
<q-list
|
|
v-for="file in listFile"
|
|
:key="file.id"
|
|
class="full-width"
|
|
bordered
|
|
separator
|
|
>
|
|
<q-item clickable v-ripple>
|
|
<q-item-section>{{ file.fileName }}</q-item-section>
|
|
<q-item-section avatar>
|
|
<div class="row">
|
|
<div>
|
|
<q-btn
|
|
dense
|
|
flat
|
|
round
|
|
size="12px"
|
|
color="blue"
|
|
icon="mdi-download-outline"
|
|
@click="downloadFile(file.pathName)"
|
|
>
|
|
<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
|
|
</q-btn>
|
|
<q-btn
|
|
dense
|
|
flat
|
|
round
|
|
size="12px"
|
|
color="red"
|
|
icon="mdi-trash-can-outline"
|
|
@click="deleteFile(file.pathName)"
|
|
>
|
|
<q-tooltip>ลบไฟล์</q-tooltip>
|
|
</q-btn>
|
|
</div>
|
|
</div>
|
|
</q-item-section>
|
|
</q-item>
|
|
</q-list>
|
|
</div>
|
|
<div class="col-12" v-else>
|
|
<q-card class="q-pa-md" bordered> ไม่มีรายการเอกสาร </q-card>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</q-card>
|
|
</div> -->
|
|
<div v-if="store.currentStep == 5" class="col-12">
|
|
<div class="q-mt-xs q-gutter-md" align="right">
|
|
<q-btn
|
|
unelevated
|
|
label="บันทึกแจ้งผลการประกาศคัดเลือก"
|
|
color="public"
|
|
@click="save"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<q-dialog
|
|
v-model="modalView"
|
|
persistent
|
|
:maximized="true"
|
|
transition-show="slide-up"
|
|
transition-hide="slide-down"
|
|
>
|
|
<q-card class="bg-white">
|
|
<div class="flex justify-end items-center align-center q-mr-md q-mt-sm">
|
|
<q-btn
|
|
icon="close"
|
|
unelevated
|
|
round
|
|
dense
|
|
style="color: #ff8080; background-color: #ffdede"
|
|
size="12px"
|
|
v-close-popup
|
|
/>
|
|
</div>
|
|
<div class="q-pa-md">
|
|
<div class="row items-start items-center">
|
|
<div class="col">
|
|
<q-btn
|
|
padding="xs"
|
|
icon="mdi-chevron-left"
|
|
color="grey-2"
|
|
text-color="grey-5"
|
|
size="md"
|
|
class="my-auto"
|
|
@click="backPage"
|
|
:disable="page == 1"
|
|
/>
|
|
</div>
|
|
<div class="col-12 col-md-auto">
|
|
<div class="q-pa-md flex">
|
|
หน้าที่ {{ page }} จาก {{ numOfPages }}
|
|
</div>
|
|
</div>
|
|
<div class="col text-right">
|
|
<q-btn
|
|
padding="xs"
|
|
icon="mdi-chevron-right"
|
|
color="grey-2"
|
|
text-color="grey-5"
|
|
size="md"
|
|
@click="nextPage"
|
|
:disable="page === numOfPages"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="row items- items-center">
|
|
<VuePDF ref="vuePDFRef" :pdf="pdfSrc" :page="page" fit-parent />
|
|
</div>
|
|
<div class="row items- items-end">
|
|
<div class="col">
|
|
<q-btn
|
|
padding="xs"
|
|
icon="mdi-chevron-left"
|
|
color="grey-2"
|
|
text-color="grey-5"
|
|
size="md"
|
|
class="my-auto"
|
|
@click="backPage"
|
|
:disable="page == 1"
|
|
/>
|
|
</div>
|
|
<div class="col-12 col-md-auto">
|
|
<div class="q-pa-md flex">
|
|
หน้าที่ {{ page }} จาก {{ numOfPages }}
|
|
</div>
|
|
</div>
|
|
<div class="col text-right">
|
|
<q-btn
|
|
padding="xs"
|
|
icon="mdi-chevron-right"
|
|
color="grey-2"
|
|
text-color="grey-5"
|
|
size="md"
|
|
@click="nextPage"
|
|
:disable="page === numOfPages"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</q-card>
|
|
</q-dialog>
|
|
</template>
|
|
|
|
<style scoped></style>
|