476 lines
18 KiB
Vue
476 lines
18 KiB
Vue
<script setup lang="ts">
|
||
import { reactive, ref, watch } from "vue";
|
||
import { useQuasar } from "quasar";
|
||
|
||
import { useCounterMixin } from "@/stores/mixin";
|
||
import { useRequestEditStore } from "@/modules/04_registryPerson/stores/RequestEdit";
|
||
import config from "@/app.config";
|
||
import http from "@/plugins/http";
|
||
|
||
import type {
|
||
DataOption,
|
||
DataItemsDevelopment,
|
||
} from "@/modules/04_registryPerson/interface/index/Main";
|
||
import type { FormDataIDP } from "@/modules/04_registryPerson/interface/request/Main";
|
||
|
||
import DialogHeader from "@/components/DialogHeader.vue";
|
||
|
||
const $q = useQuasar();
|
||
const store = useRequestEditStore();
|
||
const { dialogConfirm, showLoader, hideLoader, messageError, success } =
|
||
useCounterMixin();
|
||
|
||
const modal = defineModel<boolean>("modal", { required: true }); //เปิด,ปิด popup แก้ไขสถานะคำร้อง
|
||
const requestId = defineModel<string>("requestId", { required: true }); // id ที่ต้องการแก้ไข
|
||
const { fetchDataList } = defineProps({
|
||
fetchDataList: { type: Function, require: true },
|
||
});
|
||
|
||
const isReadOnly = ref<boolean>(false); //อ่านอย่างเดียว
|
||
|
||
//ฟอร์มข้อมูลการพัฒนารายบุคคล
|
||
const formData = reactive<FormDataIDP>({
|
||
topic: "", //ชื่อเรื่อง/เนื้อเรื่อง/หัวข้อการพัฒนา
|
||
developmentProjects: [], //วิธีการพัฒนา
|
||
reasonDevelopment70: "", //อื่นๆ 70 การลงมือปฏิบัติ
|
||
reasonDevelopment20: "", //อื่นๆ 20 การเรียนรู้จากผู้อื่น
|
||
reasonDevelopment10: "", //อื่นๆ 10 การฝึกอบรมอื่นๆ
|
||
developmentTarget: "", //เป้าหมายการนำไปพัฒนางาน
|
||
developmentResults: "", //วิธีการวัดผลการพัฒนา
|
||
developmentReport: "", //รายงานผลการพัฒนา
|
||
status: "", //สถานะ
|
||
reason: "", //หมายเหตุ
|
||
});
|
||
|
||
//70 การลงมือปฏิบัติ (โดยผู้บังคับบัญชามอบหมาย)
|
||
const itemsDevelopment70 = 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 itemsDevelopment20 = 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 itemsDevelopment10 = 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: "อื่น ๆ (ระบุ)" },
|
||
]);
|
||
//ข้อมูลรายการสถานะ
|
||
const statusOptionMain = ref<DataOption[]>(
|
||
store.optionStatusIDP.filter((e: DataOption) => e.id !== "")
|
||
);
|
||
const statusOption = ref<DataOption[]>(statusOptionMain.value); //ตัวเลือกรายการสถานะ
|
||
|
||
/**
|
||
* function fetch ข้อมูลการพัฒนารายบุคคลตาม ID ที่ค้องการ
|
||
* @param id ID ที่ต้องการดูรายละเอียด
|
||
*/
|
||
function fetchDataByid(id: string) {
|
||
showLoader();
|
||
http
|
||
.get(config.API.requestDevelopmentEdit + `admin/${id}`)
|
||
.then((res) => {
|
||
const data = res.data.result;
|
||
formData.topic = data.name;
|
||
formData.developmentProjects = data.developmentProjects;
|
||
formData.developmentTarget = data.developmentTarget;
|
||
formData.developmentResults = data.developmentResults;
|
||
formData.developmentReport = data.developmentReport;
|
||
formData.reasonDevelopment70 = data.reasonDevelopment70;
|
||
formData.reasonDevelopment20 = data.reasonDevelopment20;
|
||
formData.reasonDevelopment10 = data.reasonDevelopment10;
|
||
formData.status = data.status;
|
||
formData.reason = data.reason;
|
||
})
|
||
.catch((err) => {
|
||
messageError($q, err);
|
||
})
|
||
.finally(() => {
|
||
hideLoader();
|
||
});
|
||
}
|
||
|
||
/**
|
||
* function ค้นหาคำใน select สถานะคำร้อง
|
||
* @param val คำค้น
|
||
* @param update Function
|
||
*/
|
||
function filterOption(val: string, update: Function) {
|
||
update(() => {
|
||
formData.status = val ? "" : formData.status;
|
||
statusOption.value = statusOptionMain.value.filter(
|
||
(v: DataOption) => v.name.indexOf(val) > -1
|
||
);
|
||
});
|
||
}
|
||
|
||
/** function บันทึกข้อมูลการพัฒนารายบุคคล */
|
||
function onSubmit() {
|
||
dialogConfirm($q, async () => {
|
||
showLoader();
|
||
await http
|
||
.patch(config.API.requestDevelopmentEdit + `admin/${requestId.value}`, {
|
||
status: formData.status,
|
||
reason: formData.reason,
|
||
})
|
||
.then(async () => {
|
||
await fetchDataList?.();
|
||
success($q, "บันทึกข้อมูลสำเร็จ");
|
||
closeDialog();
|
||
})
|
||
.catch((err) => {
|
||
messageError($q, err);
|
||
})
|
||
.finally(() => {
|
||
hideLoader();
|
||
});
|
||
});
|
||
}
|
||
|
||
/**
|
||
* function ปิด popup
|
||
* และกำหนด formData เป็นค่า Defult
|
||
*/
|
||
function closeDialog() {
|
||
modal.value = false;
|
||
formData.topic = "";
|
||
formData.developmentProjects = [];
|
||
formData.reasonDevelopment70 = "";
|
||
formData.reasonDevelopment20 = "";
|
||
formData.reasonDevelopment10 = "";
|
||
formData.developmentTarget = "";
|
||
formData.developmentResults = "";
|
||
formData.developmentReport = "";
|
||
formData.status = "";
|
||
formData.reason = "";
|
||
}
|
||
|
||
/**
|
||
* class inpui
|
||
* @param val ค่าสถานะ
|
||
*/
|
||
function classInput(val: boolean) {
|
||
return {
|
||
"full-width cursor-pointer ": val,
|
||
"full-width cursor-pointer inputgreen": !val,
|
||
};
|
||
}
|
||
|
||
/**
|
||
* ดูการเปลี่ยนแปลงของ modal เมื่อ modal เป็น True
|
||
* fetch ข้อมูลการพัฒนารายบุคคลตาม ID ที่ค้องการ
|
||
*/
|
||
watch(modal, (val) => {
|
||
if (val) {
|
||
fetchDataByid(requestId.value);
|
||
}
|
||
});
|
||
</script>
|
||
|
||
<template>
|
||
<q-dialog v-model="modal" persistent>
|
||
<q-card style="min-width: 65%">
|
||
<q-form greedy @submit.prevent @validation-success="onSubmit">
|
||
<DialogHeader tittle="ข้อมูลการพัฒนารายบุคคล" :close="closeDialog" />
|
||
<q-separator />
|
||
|
||
<!-- สถานะคำร้อง -->
|
||
<q-card-section>
|
||
<q-card bordered class="col-12">
|
||
<div class="col-12 text-weight-medium bg-grey-1 q-py-xs q-px-md">
|
||
สถานะคำร้อง
|
||
</div>
|
||
<q-separator />
|
||
<div class="row q-pa-md q-col-gutter-sm">
|
||
<!-- สถานะ -->
|
||
<div class="col-4">
|
||
<q-select
|
||
:class="classInput(isReadOnly)"
|
||
v-model="formData.status"
|
||
label="สถานะ"
|
||
dense
|
||
outlined
|
||
emit-value
|
||
map-options
|
||
:options="statusOption"
|
||
:rules="[(val:string) => !!val || `${'กรุณาเลือกสถานะ'}`]"
|
||
lazy-rules
|
||
hide-bottom-space
|
||
use-input
|
||
option-label="name"
|
||
option-value="id"
|
||
@filter="(inputValue:string,
|
||
doneFn:Function) => filterOption(inputValue, doneFn
|
||
) "
|
||
>
|
||
<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-8">
|
||
<q-input
|
||
:class="classInput(isReadOnly)"
|
||
v-model="formData.reason"
|
||
label="หมายเหตุ"
|
||
dense
|
||
outlined
|
||
type="textarea"
|
||
hide-bottom-space
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<q-card-actions align="right">
|
||
<q-btn label="บันทึก" color="secondary" type="submit"
|
||
><q-tooltip>บันทึก</q-tooltip></q-btn
|
||
>
|
||
</q-card-actions>
|
||
</q-card>
|
||
</q-card-section>
|
||
|
||
<!-- รายละเอียด -->
|
||
<q-card-section class="q-pt-none">
|
||
<q-card bordered class="col-12">
|
||
<div class="col-12 text-weight-medium bg-grey-1 q-py-xs q-px-md">
|
||
รายละเอียด
|
||
</div>
|
||
<q-separator />
|
||
<div class="row q-col-gutter-sm q-pa-md">
|
||
<div class="col-12">
|
||
<q-input
|
||
readonly
|
||
outlined
|
||
v-model="formData.topic"
|
||
label="ชื่อเรื่อง/เนื้อเรื่อง/หัวข้อการพัฒนา"
|
||
dense
|
||
/>
|
||
</div>
|
||
|
||
<div class="col-12">
|
||
<div class="q-mb-sm text-weight-medium text-body2">
|
||
วิธีการพัฒนา
|
||
</div>
|
||
<div class="row col-12 q-ml-md q-col-gutter-sm">
|
||
<!-- 70 การลงมือปฏิบัติ (โดยผู้บังคับบัญชามอบหมาย) -->
|
||
<div class="col-4">
|
||
<div class="q-mb-sm text-weight-medium text-body2">
|
||
70 การลงมือปฏิบัติ (โดยผู้บังคับบัญชามอบหมาย)
|
||
</div>
|
||
<q-option-group
|
||
disable
|
||
class="check_box q-mt-sm"
|
||
keep-color
|
||
color="primary"
|
||
dense
|
||
v-model="formData.developmentProjects"
|
||
:options="itemsDevelopment70"
|
||
type="checkbox"
|
||
/>
|
||
|
||
<div
|
||
class="row"
|
||
v-if="formData.developmentProjects.includes('other1')"
|
||
>
|
||
<div class="col-8 q-mt-sm relative-position">
|
||
<div class="other_custom_input">
|
||
<q-input
|
||
readonly
|
||
v-model="formData.reasonDevelopment70"
|
||
dense
|
||
outlined
|
||
label="กรุณาระบุ"
|
||
></q-input>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 20 การเรียนรู้จากผู้อื่น (Coach/Mentor/Consulting) -->
|
||
<div class="col-4">
|
||
<div class="q-mb-sm text-weight-medium text-body2">
|
||
20 การเรียนรู้จากผู้อื่น (Coach/Mentor/Consulting)
|
||
</div>
|
||
<q-option-group
|
||
disable
|
||
class="check_box q-mt-sm"
|
||
keep-color
|
||
color="primary"
|
||
dense
|
||
v-model="formData.developmentProjects"
|
||
:options="itemsDevelopment20"
|
||
type="checkbox"
|
||
/>
|
||
<div
|
||
class="row"
|
||
v-if="formData.developmentProjects.includes('other2')"
|
||
>
|
||
<div class="col-8 q-mt-sm relative-position">
|
||
<div class="other_custom_input">
|
||
<q-input
|
||
readonly
|
||
v-model="formData.reasonDevelopment20"
|
||
dense
|
||
outlined
|
||
label="กรุณาระบุ"
|
||
></q-input>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 10 การฝึกอบรมอื่นๆ -->
|
||
<div class="col-4">
|
||
<div class="q-mb-sm text-weight-medium text-body2">
|
||
10 การฝึกอบรมอื่นๆ
|
||
</div>
|
||
<q-option-group
|
||
disable
|
||
class="check_box q-mt-sm"
|
||
keep-color
|
||
color="primary"
|
||
dense
|
||
v-model="formData.developmentProjects"
|
||
:options="itemsDevelopment10"
|
||
type="checkbox"
|
||
/>
|
||
<div
|
||
class="row"
|
||
v-if="formData.developmentProjects.includes('other3')"
|
||
>
|
||
<div class="offset-4 col-8 q-mt-sm relative-position">
|
||
<div class="other_custom_input">
|
||
<q-input
|
||
readonly
|
||
v-model="formData.reasonDevelopment10"
|
||
dense
|
||
outlined
|
||
label="กรุณาระบุ"
|
||
></q-input>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- เป้าหมายการนำไปพัฒนางาน -->
|
||
<div class="col-12">
|
||
<q-input
|
||
readonly
|
||
outlined
|
||
v-model="formData.developmentTarget"
|
||
label="เป้าหมายการนำไปพัฒนางาน"
|
||
dense
|
||
type="textarea"
|
||
/>
|
||
</div>
|
||
|
||
<!-- วิธีการวัดผลการพัฒนา -->
|
||
<div class="col-12">
|
||
<q-input
|
||
readonly
|
||
outlined
|
||
v-model="formData.developmentResults"
|
||
label="วิธีการวัดผลการพัฒนา"
|
||
dense
|
||
type="textarea"
|
||
/>
|
||
</div>
|
||
|
||
<!-- รายงานผลการพัฒนา -->
|
||
<div class="col-12">
|
||
<q-input
|
||
readonly
|
||
outlined
|
||
v-model="formData.developmentReport"
|
||
label="รายงานผลการพัฒนา"
|
||
dense
|
||
type="textarea"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</q-card>
|
||
</q-card-section>
|
||
</q-form>
|
||
</q-card>
|
||
</q-dialog>
|
||
</template>
|
||
|
||
<style scoped></style>
|