hrms-user/src/modules/11_probation/component/06_EvaluateResult.vue

731 lines
26 KiB
Vue

<script setup lang="ts">
import { useQuasar } from "quasar";
import { ref, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useCounterMixin } from "@/stores/mixin";
import http from "@/plugins/http";
import config from "@/app.config";
const assign = ref<any>([]);
const person = ref<any>([]);
const fullname = ref<string>("");
const mentors = ref<any>([]);
const date_start = ref<Date>(new Date());
const date_finish = ref<Date>();
const develop = ref<number>();
const result = ref<number>();
const director_id = ref<any>(null);
const director_id2 = ref<any>(null);
const director_id3 = ref<any>(null);
const reson52 = ref<string>("");
const ID = ref<string>("");
const reson = ref<string>("");
const director1_dated = ref<any>("");
const director2_dated = ref<any>("");
const chairman_dated = ref<Date>();
const action = ref<string>("add");
const expand_month = ref<string>();
const commander = ref<any>([]);
const optionDirector = ref<any>([]);
const mixin = useCounterMixin();
const {
showLoader,
hideLoader,
messageError,
dialogConfirm,
success,
date2Thai,
} = mixin;
const $q = useQuasar();
const router = useRouter();
const route = useRoute();
const id = ref<string>(route.params.id as string);
const profileId = ref<string>(route.params.profileId as string);
const mode = ref<any>($q.screen.gt.xs);
const status = ref<boolean>(true);
const options = ref<any>([
{ value: 1, label: "พัฒนาครบ 3 ส่วน" },
{ value: 2, label: "พัฒนาไม่ครบ 3 ส่วน" },
]);
const optionsResult = ref<any>([
{ value: 1, label: "ไม่ต่ำกว่ามาตรฐานที่กำหนด เห็นควรให้รับราชการต่อ" },
{ value: 2, label: "ต่ำกว่ามาตรฐานที่กำหนด เห็นควรให้ออกจากราชการ" },
{
value: 3,
label: "เห็นควรให้ขยายระยะเวลาทดลองปฏิบัติหน้าที่ราชการต่อไปอีก",
},
]);
function onSubmit() {
dialogConfirm($q, async () => await postData("post"));
}
/** post/put data
* @param action post put
*/
async function postData(action: string) {
const data = await {
start_date: date_start.value,
date_finish: date_finish.value,
develop_complete: develop.value,
pass_result: result.value,
reson: reson.value,
chairman_dated: chairman_dated.value,
director1_dated: director1_dated.value,
director2_dated: director2_dated.value,
expand_month: expand_month.value,
};
if (action === "post") {
await http
.post(config.API.createformReport(id.value), data)
.then(() => {
success($q, "บันทึกสำเร็จ");
router.push(`/probation/detail/${profileId.value}/${id.value}`);
})
.catch((e: any) => {
messageError($q, e);
})
.finally(() => {
status.value = false;
fecthResult(id.value);
});
} else if (action === "put") {
await http
.put(config.API.createformReport(id.value), data)
.then(() => {
success($q, "บันทึกสำเร็จ");
router.push(`/probation/detail/${profileId.value}/${id.value}`);
})
.catch((e: any) => {
messageError($q, e);
})
.finally(() => {
status.value = false;
fecthResult(id.value);
});
}
}
/** แปลง val เป็นตัวหนังสือ
* @param val ตัวเลข
*/
async function changeReson52(val: number) {
switch (val) {
case 1:
reson52.value = "เห็นควรให้รับราชการต่อไป";
break;
case 2:
reson52.value = "เห็นควรให้ออกจากราชการ";
break;
case 3:
reson52.value = `เห็นควรให้ขยายเวลาทดลองปฏิบัตหิน้าท่ีราชการต่อไปอีก ${expand_month.value} เดือน`;
break;
default:
break;
}
}
/** แปลงรหัสไฟล์ */
function downloadFile(response: any, filename: string) {
const link = document.createElement("a");
var fileName = filename;
link.href = window.URL.createObjectURL(new Blob([response.data]));
link.setAttribute("download", fileName);
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
/**
* ดาว์โหลดไฟล์
* @param type docx/pdf
*/
async function clickdownloadFile(type: string) {
showLoader();
await http
.get(config.API.reportEvaluateResult(type, id.value), {
responseType: "blob",
})
.then((res) => {
downloadFile(res, `แบบรายงานการประเมินฯ_${fullname.value}.${type}`);
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
}
/** get ข้อมูลรายการมอยหมาย เก็บไว้ตัวแปร
* @param id personal id
*/
async function fecthAssign(id: string) {
showLoader();
await http
.get(config.API.evaluateReportcreate(id))
.then(async (res) => {
assign.value = res.data.data.assign;
person.value = res.data.data.person;
mentors.value = res.data.data.mentors;
date_start.value = res.data.data.assign.date_start;
date_finish.value = res.data.data.assign.date_finish;
if (
res.data.data.result.develop_complete != null &&
res.data.data.result.evaluate_result != null
) {
develop.value = res.data.data.result.develop_complete;
result.value = res.data.data.result.evaluate_result;
await changeReson52(Number(res.data.data.result.evaluate_result));
}
director_id.value = res.data.data.chairman;
director_id2.value = res.data.data.commander;
if (mentors.value.length != 0) {
director_id3.value = mentors.value[0];
}
commander.value = res.data.data.commander;
optionDirector.value = mentors.value;
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
}
/** get ข้อมูล เก็บไว้ตัวแปร
* @param id personal id
*/
const fecthResult = async (id: string) => {
await http
.get(config.API.createformReport(id))
.then(async (res: any) => {
if (res.data.data != null) {
const data = await res.data.data.evaluate;
ID.value = data.id;
date_start.value = data.date_start;
date_finish.value = data.date_finish;
develop.value = await Number(data.develop_complete);
result.value = await Number(data.pass_result);
reson.value = await data.reson;
chairman_dated.value = await data.chairman_dated;
director1_dated.value = await data.director1_dated;
director2_dated.value = await data.director2_dated;
status.value = false;
action.value = "edit";
expand_month.value = data.expand_month;
await changeReson52(Number(data.pass_result));
}
})
.catch((e) => {});
};
/** ผลการประเมินการทดลองปฏิบัติหน้าที่ราชการ */
async function selectResult() {
if (result.value !== 3) {
expand_month.value = "";
}
await changeReson52(Number(result.value));
}
onMounted(async () => {
await fecthAssign(id.value);
await fecthResult(id.value);
});
</script>
<template>
<div v-if="!$q.screen.gt.xs" 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="router.go(-1)"
/>
<div>แบบรายงานการประเม </div>
</div>
</div>
<div :class="`${$q.screen.gt.xs ? '' : 'mobileClass'}`">
<div class="col-12">
<span class="toptitle text-dark">แบบรายงานการประเมนฯ</span>
<q-btn
v-if="!status"
size="12px"
flat
dense
round
icon="mdi-download"
color="blue"
>
<q-tooltip>ดาวนโหลด</q-tooltip>
<q-menu>
<q-list style="min-width: 150px">
<q-item clickable v-close-popup @click="clickdownloadFile('pdf')">
<q-item-section avatar
><q-icon color="red" name="mdi-file-pdf"
/></q-item-section>
<q-item-section>ไฟล .PDF</q-item-section>
</q-item>
<q-item clickable v-close-popup @click="clickdownloadFile('docx')">
<q-item-section avatar
><q-icon color="blue" name="mdi-file-word"
/></q-item-section>
<q-item-section>ไฟล .docx</q-item-section>
</q-item>
</q-list>
</q-menu>
</q-btn>
</div>
<div class="row q-my-sm q-col-gutter-y-sm">
<div class="col-12 text-dark text-weight-medium">
<div class="col-12 row items-center q-col-gutter-y-xs">
<div class="col-12">
<q-icon name="mdi-label" color="grey-4" />
<span class="text-grey-6 q-pl-sm"
>ทดลองปฏหนาทราชการ</span
>
<span class="text-dark q-pl-sm">{{ person.name }}</span>
</div>
<div class="col-12 q-pl-md">
<span class="text-grey-6 q-pl-sm">ตำแหนงในสายงาน</span>
<span class="text-dark q-pl-sm">{{ person.PositionLineName }}</span>
</div>
<div class="col-12 q-pl-md">
<span class="text-grey-6 q-pl-sm">ระด</span>
<span class="text-dark q-pl-sm">
{{ person.PositionLevelName }}</span
>
</div>
<div class="col-12 q-pl-md">
<span class="text-grey-6 q-pl-sm">งก</span>
<span class="text-dark q-pl-sm">{{ person.Oc }}</span>
</div>
</div>
</div>
<div class="col-12 text-dark text-weight-medium row items-center">
<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
ประเมนผล
<span class="text-primary q-pr-sm"> ครงท 1 </span>
</div>
<div class="col-12 text-dark row text-weight-medium items-center">
<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
การทดลองปฎหนาทราชการ<span class="text-primary q-pr-sm">{{
"ครั้งที่ " + assign.round_no
}}</span>
</div>
<div class="col-12">
<q-form
greedy
@submit.prevent
@validation-success="onSubmit"
class="full-width"
>
<div class="row q-col-gutter-sm">
<div class="col-12 col-sm-6">
<datepicker
v-model="date_start"
:locale="'th'"
autoApply
borderless
:readonly="!status"
:enableTimePicker="false"
week-start="0"
>
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
outlined
dense
hide-bottom-space
:disable="!status"
class="full-width datepicker"
:model-value="
date_start != null ? date2Thai(date_start) : null
"
:label="`${'ระหว่างวันที่'}`"
:rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่'}`]"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
</div>
<div class="col-12 col-sm-6">
<datepicker
v-model="date_finish"
:locale="'th'"
autoApply
:readonly="!status"
borderless
:enableTimePicker="false"
week-start="0"
>
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
outlined
dense
hide-bottom-space
:disable="!status"
class="full-width datepicker"
:model-value="
date_finish != null ? date2Thai(date_finish) : null
"
:label="`${'ถึงวันที่'}`"
:rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่'}`]"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
</div>
<div class="col-12 col-sm-6">
<q-select
:rules="[
(val:string) =>
!!val ||
'กรุณาเลือกการพัฒนาในระหว่างทดลองปฏิบัติหน้าที่ราชการ',
]"
hide-bottom-space
:options="options"
dense
borderless
:disable="!status"
emit-value
map-options
option-label="label"
option-value="value"
outlined
v-model="develop"
label="การพัฒนาในระหว่างทดลองปฏิบัติหน้าที่ราชการ"
use-input
><template v-slot:no-option>
<q-item>
<q-item-section class="text-grey">
ไมอม
</q-item-section>
</q-item>
</template>
</q-select>
</div>
<div :class="`col-12 col-sm-6`">
<q-select
:rules="[
(val:string) =>
!!val ||
'กรุณาเลือกผลการประเมินการทดลองปฏิบัติหน้าที่ราชการ',
]"
hide-bottom-space
:options="optionsResult"
:disable="!status"
dense
borderless
emit-value
map-options
option-label="label"
option-value="value"
outlined
v-model="result"
class="selectPt"
label="ผลการประเมินการทดลองปฏิบัติหน้าที่ราชการ"
@update:model-value="selectResult"
use-input
><template v-slot:no-option>
<q-item>
<q-item-section class="text-grey">
ไมอม
</q-item-section>
</q-item>
</template>
</q-select>
</div>
<div
v-if="result == 3"
:class="`col-12 ${result == 3 ? 'offset-sm-6 col-sm-6' : ''}`"
>
<q-input
outlined
hide-bottom-space
dense
v-model="expand_month"
label="จำนวนเดือน"
:rules="[(val:string) => !!val || 'กรุณากรอกจำนวนเดือน']"
type="number"
/>
</div>
<div class="col-12 col-sm-6">
<q-input
hide-bottom-space
dense
borderless
outlined
:disable="!status"
class="bg-white"
type="textarea"
v-model="reson"
lazy-rules
label="เหตุผล"
:rules="[
(val:string) => (!!val && val.length > 0) || 'กรุณาระบุเหตุผล',
]"
/>
</div>
<div class="col-12 col-sm-6">
<q-input
hide-bottom-space
dense
borderless
outlined
readonly
class="bg-white"
type="textarea"
v-model="reson52"
lazy-rules
label="ความเห็นของผู้มีอํานาจสั่งบรรจุตามมาตรา 52"
:rules="[
(val:string) =>
(!!val && val.length > 0) ||
'กรุณาความเห็นของผู้มีอํานาจสั่งบรรจุตามมาตรา 52',
]"
/>
</div>
<div class="col-12">
<q-separator size="3px" color="grey-2" />
</div>
<div class="col-12 text-dark text-weight-medium">
ประธานคณะกรรมการประเมนผลการปฏหนาทราชการ/านาจสงบรรจตามมาตรา
52
</div>
<div class="col-12">
<div class="row q-col-gutter-sm">
<div class="col-12 col-sm-8">
<q-select
dense
v-model="director_id"
outlined
:options="commander"
label="ชื่อ-นามสกุล"
option-label="label"
disable
/>
</div>
<div class="col-12 col-sm-4">
<datepicker
v-model="chairman_dated"
:locale="'th'"
:readonly="!status"
autoApply
borderless
:enableTimePicker="false"
week-start="0"
>
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
outlined
dense
hide-bottom-space
:disable="!status"
:model-value="
chairman_dated != null
? date2Thai(chairman_dated)
: null
"
:label="`${'ลงวันที่'}`"
:rules="[(val:string) => !!val || `${'กรุณาเลือกลงวันที่'}`]"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
</div>
</div>
</div>
<div class="col-12 text-dark text-weight-medium">คณะกรรมการ</div>
<div class="col-12">
<div class="row q-col-gutter-sm">
<div class="col-12 col-sm-8">
<q-select
dense
v-model="director_id2"
outlined
label="ชื่อ-นามสกุล"
disable
:options="optionDirector"
option-label="label"
/>
</div>
<div class="col-12 col-sm-4">
<datepicker
v-model="director1_dated"
:locale="'th'"
autoApply
borderless
:readonly="!status"
:enableTimePicker="false"
week-start="0"
>
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
outlined
dense
hide-bottom-space
:disable="!status"
:model-value="
director1_dated != null
? date2Thai(director1_dated)
: null
"
:label="`${'ลงวันที่'}`"
:rules="[(val:string) => !!val || `${'กรุณาเลือกลงวันที่'}`]"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
</div>
</div>
</div>
<div class="col-12 text-dark text-weight-medium">คณะกรรมการ</div>
<div class="col-12">
<div class="row q-col-gutter-sm">
<div class="col-12 col-sm-8">
<q-select
dense
v-model="director_id3"
outlined
label="ชื่อ-นามสกุล"
:options="optionDirector"
disable
option-label="label"
/>
</div>
<div class="col-12 col-sm-4">
<datepicker
v-model="director2_dated"
:locale="'th'"
autoApply
:readonly="!status"
borderless
:enableTimePicker="false"
week-start="0"
>
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
outlined
dense
:disable="!status"
hide-bottom-space
:model-value="
director2_dated != null
? date2Thai(director2_dated)
: null
"
:label="`${'ลงวันที่'}`"
:rules="[(val:string) => !!val || `${'กรุณาเลือกลงวันที่'}`]"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
</div>
</div>
</div>
<div class="col-12" align="right" v-if="action == 'add'">
<q-btn label="บันทึก" color="secondary" type="submit"
><q-tooltip>นทกขอม</q-tooltip></q-btn
>
</div>
</div>
</q-form>
</div>
</div>
</div>
</template>
<style scoped>
.mobileClass {
background-color: #fff;
border-radius: 10px;
padding: 10px;
}
</style>