561 lines
20 KiB
Vue
561 lines
20 KiB
Vue
<script setup lang="ts">
|
||
import { reactive, ref, computed, onMounted } from "vue";
|
||
import { useRouter, useRoute } from "vue-router";
|
||
import { useQuasar } from "quasar";
|
||
import axios from "axios";
|
||
import { useDataStore } from "@/stores/data";
|
||
|
||
import Workflow from "@/components/Workflow/Main.vue";
|
||
|
||
import http from "@/plugins/http";
|
||
import config from "@/app.config";
|
||
import { useCounterMixin } from "@/stores/mixin";
|
||
|
||
import type {
|
||
FormDataIDP,
|
||
DataItemsDevelopment,
|
||
} from "@/modules/14_IDP/interface/Main";
|
||
|
||
const $q = useQuasar();
|
||
const { dialogConfirm, showLoader, hideLoader, messageError, success } =
|
||
useCounterMixin();
|
||
const dataStore = useDataStore();
|
||
|
||
const idRow = ref<string>("");
|
||
const router = useRouter();
|
||
const route = useRoute();
|
||
const isReadOnly = ref<boolean>(false);
|
||
const isEdit = ref<boolean>(false); // เก็บ เช็ค รายละเอียด/แก้ไข
|
||
const requestId = ref<string>(
|
||
route.params.id ? route.params.id.toString() : ""
|
||
);
|
||
|
||
const formData = reactive<FormDataIDP>({
|
||
topic: "",
|
||
development: [],
|
||
otherAction: "",
|
||
otherPerson: "",
|
||
otherTraining: "",
|
||
developmentTarget: "",
|
||
developmentResults: "",
|
||
developmentReport: "",
|
||
document: null,
|
||
});
|
||
|
||
/** เช็ค true/false 70*/
|
||
const isDevelopment70 = computed(() => {
|
||
return itemsDevelopmentAction.value.some((txt) =>
|
||
formData.development.includes(txt.value)
|
||
);
|
||
});
|
||
/** เช็ค true/false 20*/
|
||
const isDevelopment20 = computed(() => {
|
||
return itemsDevelopmentPerson.value.some((txt) =>
|
||
formData.development.includes(txt.value)
|
||
);
|
||
});
|
||
/** เช็ค true/false 10*/
|
||
const isDevelopment10 = computed(() => {
|
||
return itemsDevelopmentTraining.value.some((txt) =>
|
||
formData.development.includes(txt.value)
|
||
);
|
||
});
|
||
|
||
//70 การลงมือปฏิบัติ (โดยผู้บังคับบัญชามอบหมาย)
|
||
const itemsDevelopmentAction = ref<DataItemsDevelopment[]>([
|
||
{
|
||
value: "on_the_job_training",
|
||
label: "การฝึกปฏิบัติในงาน (On the job training)",
|
||
},
|
||
{
|
||
value: "job_project_assignment",
|
||
label: "การมอบหมายงาน/โครงการ (Job/Project assignment)",
|
||
},
|
||
{
|
||
value: "job_shadowing",
|
||
label: "การติดตามเรียนรู้รูปแบบการทำงานของผู้บริหาร (Job shadowing)",
|
||
},
|
||
{
|
||
value: "job_enlargement",
|
||
label: "การมอบหมายงานเพิ่มขึ้น (Job enlargement)",
|
||
},
|
||
{
|
||
value: "internal_trainer",
|
||
label: "การเป็นวิทยากรภายในหน่วยงาน (Internal trainer)",
|
||
},
|
||
{
|
||
value: "rotation",
|
||
label: "การหมุนเวียนงาน (Rotation)",
|
||
},
|
||
{
|
||
value: "activity",
|
||
label: "การทำกิจกรรม (Activity)",
|
||
},
|
||
{
|
||
value: "site_visit",
|
||
label: "การศึกษาดูงานนอกสถานที่ (Site visit)",
|
||
},
|
||
{
|
||
value: "benchmarking",
|
||
label: "การแลกเปลี่ยน เทียบเคียงความรู้ ประสมการณ์ (Benchmarking)",
|
||
},
|
||
{
|
||
value: "problem_solving",
|
||
label: "การแก้ปัญหา (Problem-solving)",
|
||
},
|
||
{
|
||
value: "team_working",
|
||
label: "การทำงานเป็นทีม (Team working)",
|
||
},
|
||
{
|
||
value: "other1",
|
||
label: "อื่นๆ (ระบุ)",
|
||
},
|
||
]);
|
||
//20 การเรียนรู้จากผู้อื่น (Coach/Mentor/Consulting)
|
||
const itemsDevelopmentPerson = ref<DataItemsDevelopment[]>([
|
||
{ value: "coaching", label: "การสอนงาน (Coaching)" },
|
||
{ value: "mentoring", label: "การเป็นพี่เลี้ยง (Mentoring)" },
|
||
{ value: "team_meeting", label: "การประชุมทีม (Team meeting)" },
|
||
{ value: "consulting", label: "การให้คำปรึกษา (Consulting)" },
|
||
{ value: "feedback", label: "การให้ข้อคิดเห็น/เสนอแนะ (Feedback)" },
|
||
{ value: "other2", label: "อื่นๆ (ระบุ)" },
|
||
]);
|
||
//10 การฝึกอบรมอื่นๆ
|
||
const itemsDevelopmentTraining = ref<DataItemsDevelopment[]>([
|
||
{
|
||
value: "self_learning",
|
||
label: "การเรียนรู้ด้วยตนเอง แบบ online/offline (Self – learning)",
|
||
},
|
||
{ value: "classroom_training", label: "การฝึกอบรม (Classroom training)" },
|
||
{
|
||
value: "in_house_training",
|
||
label: "การฝึกอบรมภายในองค์กร (In – house training)",
|
||
},
|
||
{
|
||
value: "public_training",
|
||
label: "การฝึกอบรมจากองค์กรภายนอก (Public training)",
|
||
},
|
||
{
|
||
value: "e_training",
|
||
label: "การฝึกอบรมผ่าน online (e – training / e – learning)",
|
||
},
|
||
{ value: "meeting", label: "การประชุม (Meeting)" },
|
||
{ value: "seminar", label: "การสัมมนา (Seminar)" },
|
||
{ value: "other3", label: "อื่นๆ (ระบุ)" },
|
||
]);
|
||
|
||
/**
|
||
* class inpui
|
||
* @param val ค่าสถานะ
|
||
*/
|
||
function classInput(val: boolean) {
|
||
return {
|
||
"full-width cursor-pointer ": val,
|
||
"full-width cursor-pointer inputgreen": !val,
|
||
};
|
||
}
|
||
|
||
/**
|
||
* function หาชื่อไฟล์
|
||
* @param id รายการยื่นคำร้องขอแก้ไขข้อมูล
|
||
*/
|
||
function onDownloadFile(id: string) {
|
||
showLoader();
|
||
http
|
||
.get(config.API.file("IDP", "ยื่นคำร้องขอเพิ่มข้อมูลการพัฒนารายบุคคล", id))
|
||
.then((res) => {
|
||
if (res.data.length !== 0) {
|
||
downloadUrl(id, res.data[0].fileName);
|
||
} else {
|
||
hideLoader();
|
||
}
|
||
})
|
||
.catch((e) => {
|
||
messageError($q, e);
|
||
hideLoader();
|
||
});
|
||
}
|
||
|
||
/**
|
||
* function โหลดไฟล์
|
||
* @param id รายการยื่นคำร้องขอแก้ไขข้อมูล
|
||
* @param fileName ชื่อไฟล์
|
||
*/
|
||
function downloadUrl(id: string, fileName: string) {
|
||
http
|
||
.get(
|
||
config.API.fileByFile(
|
||
"IDP",
|
||
"ยื่นคำร้องขอเพิ่มข้อมูลการพัฒนารายบุคคล",
|
||
id,
|
||
fileName
|
||
)
|
||
)
|
||
.then((res) => {
|
||
window.open(res.data.downloadUrl, "_blank");
|
||
})
|
||
.catch((e) => {
|
||
messageError($q, e);
|
||
})
|
||
.finally(() => {
|
||
hideLoader();
|
||
});
|
||
}
|
||
|
||
function onSubmit() {
|
||
dialogConfirm($q, () => {
|
||
showLoader();
|
||
const body = {
|
||
name: formData.topic,
|
||
developmentTarget: formData.developmentTarget,
|
||
developmentResults: formData.developmentResults,
|
||
developmentReport: formData.developmentReport,
|
||
reasonDevelopment70: formData.otherAction,
|
||
reasonDevelopment20: formData.otherPerson,
|
||
reasonDevelopment10: formData.otherTraining,
|
||
isDevelopment70: isDevelopment70.value,
|
||
isDevelopment20: isDevelopment20.value,
|
||
isDevelopment10: isDevelopment10.value,
|
||
developmentProjects: formData.development,
|
||
};
|
||
http
|
||
.post(config.API.developmentRequest, body)
|
||
.then(async (res) => {
|
||
await createURLUpload(res.data.result, formData.document);
|
||
})
|
||
.catch((e) => {
|
||
messageError($q, e);
|
||
hideLoader();
|
||
})
|
||
.finally(() => {});
|
||
});
|
||
}
|
||
|
||
/**
|
||
* function สร้าง URL อัปโหลไฟล์เอกสารหลักฐาน
|
||
*/
|
||
async function createURLUpload(id: string, file: any) {
|
||
const fileName = { fileName: file.name };
|
||
await http
|
||
.post(
|
||
config.API.file("IDP", "ยื่นคำร้องขอเพิ่มข้อมูลการพัฒนารายบุคคล", id),
|
||
{
|
||
replace: false,
|
||
fileList: fileName,
|
||
}
|
||
)
|
||
.then(async (res) => {
|
||
const foundKey: string | undefined = Object.keys(res.data).find(
|
||
(key) =>
|
||
res.data[key]?.fileName !== undefined &&
|
||
res.data[key]?.fileName !== ""
|
||
);
|
||
foundKey &&
|
||
(await uploadFileDoc(res.data[foundKey]?.uploadUrl, formData.document));
|
||
})
|
||
.catch((err) => {
|
||
messageError($q, err);
|
||
hideLoader();
|
||
});
|
||
}
|
||
|
||
/**
|
||
* function สำหรับอัพโหลดไฟล์เอกสารหลักฐาน
|
||
*/
|
||
async function uploadFileDoc(uploadUrl: string, file: any) {
|
||
await axios
|
||
.put(uploadUrl, file, {
|
||
headers: {
|
||
"Content-Type": file.type,
|
||
},
|
||
})
|
||
.then(async (res) => {
|
||
success($q, `บันทึกข้อมูลสำเร็จ`);
|
||
router.push("/idp");
|
||
hideLoader();
|
||
})
|
||
.catch((e) => {
|
||
messageError($q, e);
|
||
hideLoader();
|
||
})
|
||
.finally(() => {});
|
||
}
|
||
|
||
function getDetail() {
|
||
showLoader();
|
||
http
|
||
.get(config.API.developmentRequest + `/user/${idRow.value}`)
|
||
.then((res) => {
|
||
const data = res.data.result;
|
||
formData.topic = data.name;
|
||
formData.developmentTarget = data.developmentTarget;
|
||
formData.developmentResults = data.developmentResults;
|
||
formData.developmentReport = data.developmentReport;
|
||
formData.otherAction = data.reasonDevelopment70;
|
||
formData.otherPerson = data.reasonDevelopment20;
|
||
formData.otherTraining = data.reasonDevelopment10;
|
||
formData.development = data.developmentProjects;
|
||
})
|
||
.catch((e) => {
|
||
messageError($q, e);
|
||
})
|
||
.finally(() => {
|
||
hideLoader();
|
||
});
|
||
}
|
||
|
||
onMounted(() => {
|
||
if (route.name == "idpRegistryDetail") {
|
||
isEdit.value = true;
|
||
idRow.value = route.params.id as string;
|
||
getDetail();
|
||
} else {
|
||
isEdit.value = false;
|
||
idRow.value = "";
|
||
}
|
||
});
|
||
</script>
|
||
<template>
|
||
<div class="row justify-center">
|
||
<div 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)"
|
||
/>
|
||
{{
|
||
isEdit
|
||
? "รายละเอียดยื่นคำร้องขอเพิ่มข้อมูลการพัฒนารายบุคคล"
|
||
: "ยื่นคำร้องขอเพิ่มข้อมูลการพัฒนารายบุคคล"
|
||
}}
|
||
</div>
|
||
<q-card bordered>
|
||
<q-form greedy @submit.prevent @validation-success="onSubmit">
|
||
<q-card-section>
|
||
<div class="row q-col-gutter-sm">
|
||
<div class="col-12">
|
||
<div class="row q-col-gutter-sm">
|
||
<div class="col-12">
|
||
<q-input
|
||
:class="classInput(isReadOnly)"
|
||
outlined
|
||
v-model="formData.topic"
|
||
label="ชื่อเรื่อง/เนื้อเรื่อง/หัวข้อการพัฒนา"
|
||
dense
|
||
:readonly="isEdit"
|
||
hide-bottom-space
|
||
:rules="[(val:any) => !!val || `${'กรุณากรอกชื่อเรื่อง/เนื้อเรื่อง/หัวข้อการพัฒนา'}`]"
|
||
/>
|
||
</div>
|
||
|
||
<div class="col-12">
|
||
<q-label class="q-mb-sm text-weight-medium text-body2"
|
||
>วิธีการพัฒนา
|
||
</q-label>
|
||
<div class="row col-12 q-ml-md q-col-gutter-sm">
|
||
<!-- 70 การลงมือปฏิบัติ (โดยผู้บังคับบัญชามอบหมาย) -->
|
||
<div class="col-12 col-sm-6 col-lg-4">
|
||
<q-label class="q-mb-sm text-weight-medium text-body2"
|
||
>70 การลงมือปฏิบัติ
|
||
(โดยผู้บังคับบัญชามอบหมาย)</q-label
|
||
>
|
||
<q-option-group
|
||
class="check_box q-mt-sm"
|
||
keep-color
|
||
color="primary"
|
||
dense
|
||
v-model="formData.development"
|
||
:options="itemsDevelopmentAction"
|
||
type="checkbox"
|
||
:disable="isEdit"
|
||
/>
|
||
|
||
<div
|
||
class="row q-pb-md"
|
||
v-if="formData.development.includes('other1')"
|
||
>
|
||
<div
|
||
class="offset-4 offset-md-3 col-8 q-mt-sm relative-position"
|
||
>
|
||
<div class="other_custom_input">
|
||
<q-input
|
||
v-model="formData.otherAction"
|
||
dense
|
||
:readonly="isEdit"
|
||
outlined
|
||
class="inputgreen"
|
||
label="กรุณาระบุ"
|
||
></q-input>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 20 การเรียนรู้จากผู้อื่น (Coach/Mentor/Consulting) -->
|
||
<div class="col-12 col-sm-6 col-lg-4">
|
||
<q-label class="q-mb-sm text-weight-medium text-body2"
|
||
>20 การเรียนรู้จากผู้อื่น
|
||
(Coach/Mentor/Consulting)</q-label
|
||
>
|
||
<q-option-group
|
||
class="check_box q-mt-sm"
|
||
keep-color
|
||
color="primary"
|
||
dense
|
||
:disable="isEdit"
|
||
v-model="formData.development"
|
||
:options="itemsDevelopmentPerson"
|
||
type="checkbox"
|
||
/>
|
||
<div
|
||
class="row q-pb-md"
|
||
v-if="formData.development.includes('other2')"
|
||
>
|
||
<div
|
||
class="offset-4 offset-md-3 col-8 q-mt-sm relative-position"
|
||
>
|
||
<div class="other_custom_input">
|
||
<q-input
|
||
v-model="formData.otherPerson"
|
||
dense
|
||
:readonly="isEdit"
|
||
outlined
|
||
label="กรุณาระบุ"
|
||
></q-input>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 10 การฝึกอบรมอื่นๆ -->
|
||
<div class="col-12 col-sm-6 col-lg-4">
|
||
<q-label class="q-mb-sm text-weight-medium text-body2"
|
||
>10 การฝึกอบรมอื่นๆ</q-label
|
||
>
|
||
<q-option-group
|
||
class="check_box q-mt-sm"
|
||
keep-color
|
||
color="primary"
|
||
dense
|
||
:disable="isEdit"
|
||
v-model="formData.development"
|
||
:options="itemsDevelopmentTraining"
|
||
type="checkbox"
|
||
/>
|
||
<div
|
||
class="row q-pb-md"
|
||
v-if="formData.development.includes('other3')"
|
||
>
|
||
<div
|
||
class="offset-4 offset-md-3 col-8 q-mt-sm relative-position"
|
||
>
|
||
<div class="other_custom_input">
|
||
<q-input
|
||
v-model="formData.otherTraining"
|
||
dense
|
||
:readonly="isEdit"
|
||
outlined
|
||
label="กรุณาระบุ"
|
||
></q-input>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- เป้าหมายการนำไปพัฒนางาน -->
|
||
<div class="col-12">
|
||
<q-input
|
||
outlined
|
||
:readonly="isEdit"
|
||
v-model="formData.developmentTarget"
|
||
label="เป้าหมายการนำไปพัฒนางาน"
|
||
dense
|
||
type="textarea"
|
||
class="inputgreen"
|
||
/>
|
||
</div>
|
||
|
||
<!-- วิธีการวัดผลการพัฒนา -->
|
||
<div class="col-12">
|
||
<q-input
|
||
outlined
|
||
:readonly="isEdit"
|
||
v-model="formData.developmentResults"
|
||
label="วิธีการวัดผลการพัฒนา"
|
||
dense
|
||
type="textarea"
|
||
class="inputgreen"
|
||
/>
|
||
</div>
|
||
|
||
<!-- รายงานผลการพัฒนา -->
|
||
<div class="col-12">
|
||
<q-input
|
||
:readonly="isEdit"
|
||
outlined
|
||
v-model="formData.developmentReport"
|
||
label="รายงานผลการพัฒนา"
|
||
dense
|
||
type="textarea"
|
||
class="inputgreen"
|
||
/>
|
||
</div>
|
||
<div class="col-12">
|
||
<q-file
|
||
v-if="!isEdit"
|
||
:class="classInput(isReadOnly)"
|
||
v-model="formData.document"
|
||
label="อัปโหลดเอกสารหลักฐาน"
|
||
flat
|
||
dense
|
||
:readonly="isEdit"
|
||
outlined
|
||
hide-bottom-space
|
||
:rules="[(val:any) => !!val || `${'กรุณาเลือกไฟล์'}`]"
|
||
/>
|
||
<q-btn
|
||
v-else
|
||
color="primary"
|
||
flat
|
||
dense
|
||
rounded
|
||
icon="mdi-download"
|
||
label="ดาวน์โหลดเอกสารหลักฐาน"
|
||
@click="onDownloadFile?.(idRow)"
|
||
>
|
||
<q-tooltip>ดาวน์โหลดเอกสารหลักฐาน</q-tooltip>
|
||
</q-btn>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</q-card-section>
|
||
<q-separator v-if="!isEdit" />
|
||
<q-card-actions align="right" v-if="!isEdit">
|
||
<q-btn label="บันทึก" color="secondary" type="submit"
|
||
><q-tooltip>บันทึก</q-tooltip></q-btn
|
||
>
|
||
</q-card-actions>
|
||
|
||
<div class="col-12 q-mt-sm">
|
||
<Workflow
|
||
v-if="dataStore.officerType === 'OFFICER' && requestId"
|
||
ref="workflowRef"
|
||
:id="requestId"
|
||
sys-name="REGISTRY_IDP"
|
||
/>
|
||
</div>
|
||
</q-form>
|
||
</q-card>
|
||
</div>
|
||
</div>
|
||
</template>
|