hrms-bangkok/hrms-mgt
7
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

AIP == > IDP

Browse source
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490 2024-10-01 10:43:52 +07:00
parent b5829ec905
commit b059e3a770
9 changed files with 333 additions and 144 deletions
Download patch file Download diff file Expand all files Collapse all files

162
src/modules/04_registryPerson/components/requestEdit/Dialog02_EditIDP.vue
View file

@ -1,9 +1,11 @@
<script setup lang="ts">
import { reactive, ref } from "vue";
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,
@ -20,24 +22,28 @@ const { dialogConfirm, showLoader, hideLoader, messageError, success } =
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 isReadOnly = ref<boolean>(false); //อ่านอย่างเดียว
//ฟอร์มข้อมูลการพัฒนารายบุคคล
const formData = reactive<FormDataIDP>({
topic: "",
development: [],
otherAction: "",
otherPerson: "",
otherTraining: "",
developmentTarget: "",
developmentResults: "",
developmentReport: "",
status: "",
remark: "",
topic: "", //ชื่อเรื่อง/เนื้อเรื่อง/หัวข้อการพัฒนา
developmentProjects: [], //วิธีการพัฒนา
reasonDevelopment70: "", //อื่นๆ 70 การลงมือปฏิบัติ
reasonDevelopment20: "", //อื่นๆ 20 การเรียนรู้จากผู้อื่น
reasonDevelopment10: "", //อื่นๆ 10 การฝึกอบรมอื่นๆ
developmentTarget: "", //เป้าหมายการนำไปพัฒนางาน
developmentResults: "", //วิธีการวัดผลการพัฒนา
developmentReport: "", //รายงานผลการพัฒนา
status: "", //สถานะ
reason: "", //หมายเหตุ
});
//70 การลงมือปฏิบัติ (โดยผู้บังคับบัญชามอบหมาย)
const itemsDevelopmentAction = ref<DataItemsDevelopment[]>([
const itemsDevelopment70 = ref<DataItemsDevelopment[]>([
{
value: "on_the_job_training",
label: "การฝึกปฏิบัติในงาน (On the job training)",
@ -88,7 +94,7 @@ const itemsDevelopmentAction = ref<DataItemsDevelopment[]>([
},
]);
//20 การเรียนรู้จากผู้อื่น (Coach/Mentor/Consulting)
const itemsDevelopmentPerson = ref<DataItemsDevelopment[]>([
const itemsDevelopment20 = ref<DataItemsDevelopment[]>([
{ value: "coaching", label: "การสอนงาน (Coaching)" },
{ value: "mentoring", label: "การเป็นพี่เลี้ยง (Mentoring)" },
{ value: "team_meeting", label: "การประชุมทีม (Team meeting)" },
@ -97,7 +103,7 @@ const itemsDevelopmentPerson = ref<DataItemsDevelopment[]>([
{ value: "other2", label: "อื่น ๆ (ระบุ)" },
]);
//10 การฝึกอบรมอื่นๆ
const itemsDevelopmentTraining = ref<DataItemsDevelopment[]>([
const itemsDevelopment10 = ref<DataItemsDevelopment[]>([
{
value: "self_learning",
label: "การเรียนรู้ด้วยตนเอง แบบ online/offline (Self – learning)",
@ -121,10 +127,39 @@ const itemsDevelopmentTraining = ref<DataItemsDevelopment[]>([
]);
//ข้อมูลรายการสถานะ
const statusOptionMain = ref<DataOption[]>(
store.optionStatus.filter((e: DataOption) => e.id !== "")
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 คำค้น
@ -139,25 +174,45 @@ function filterOption(val: string, update: Function) {
});
}
/** function บันทึกข้อมูลการพัฒนารายบุคคล */
function onSubmit() {
dialogConfirm($q, () => {});
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.development = [];
formData.otherAction = "";
formData.otherPerson = "";
formData.otherTraining = "";
formData.developmentProjects = [];
formData.reasonDevelopment70 = "";
formData.reasonDevelopment20 = "";
formData.reasonDevelopment10 = "";
formData.developmentTarget = "";
formData.developmentResults = "";
formData.developmentReport = "";
formData.status = "";
formData.remark = "";
formData.reason = "";
}
/**
@ -170,6 +225,16 @@ function classInput(val: boolean) {
"full-width cursor-pointer inputgreen": !val,
};
}
/**
* ดูการเปลี่ยนแปลงของ modal เมื่อ modal เป็น True
* fetch ข้อมูลการพัฒนารายบุคคลตาม ID ที่ค้องการ
*/
watch(modal, (val) => {
if (val) {
fetchDataByid(requestId.value);
}
});
</script>
<template>
@ -218,7 +283,7 @@ function classInput(val: boolean) {
<div class="col-12">
<q-input
:class="classInput(isReadOnly)"
v-model="formData.remark"
v-model="formData.reason"
label="หมายเหตุ"
dense
outlined
@ -233,7 +298,6 @@ function classInput(val: boolean) {
<div class="row q-col-gutter-sm">
<div class="col-12">
<q-input
:class="classInput(isReadOnly)"
readonly
outlined
v-model="formData.topic"
@ -243,38 +307,37 @@ function classInput(val: boolean) {
</div>
<div class="col-12">
<q-label class="q-mb-sm text-weight-medium text-body2"
>วิธีการพัฒนา
</q-label>
<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">
<q-label class="q-mb-sm text-weight-medium text-body2"
>70 การลงมือปฏิบัติ (โดยผู้บังคับบัญชามอบหมาย)</q-label
>
<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.development"
:options="itemsDevelopmentAction"
v-model="formData.developmentProjects"
:options="itemsDevelopment70"
type="checkbox"
/>
<div
class="row"
v-if="formData.development.includes('other1')"
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.otherAction"
v-model="formData.reasonDevelopment70"
dense
outlined
class="inputgreen"
label="กรุณาระบุ"
></q-input>
</div>
@ -284,29 +347,28 @@ function classInput(val: boolean) {
<!-- 20 การเรียนรู้จากผู้อื่น (Coach/Mentor/Consulting) -->
<div class="col-4">
<q-label class="q-mb-sm text-weight-medium text-body2"
>20 การเรียนรู้จากผู้อื่น
(Coach/Mentor/Consulting)</q-label
>
<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.development"
:options="itemsDevelopmentPerson"
v-model="formData.developmentProjects"
:options="itemsDevelopment20"
type="checkbox"
/>
<div
class="row"
v-if="formData.development.includes('other2')"
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.otherPerson"
v-model="formData.reasonDevelopment20"
dense
outlined
label="กรุณาระบุ"
@ -318,28 +380,28 @@ function classInput(val: boolean) {
<!-- 10 การฝึกอบรมอื่นๆ -->
<div class="col-4">
<q-label class="q-mb-sm text-weight-medium text-body2"
>10 การฝึกอบรมอื่นๆ</q-label
>
<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.development"
:options="itemsDevelopmentTraining"
v-model="formData.developmentProjects"
:options="itemsDevelopment10"
type="checkbox"
/>
<div
class="row"
v-if="formData.development.includes('other3')"
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.otherTraining"
v-model="formData.reasonDevelopment10"
dense
outlined
label="กรุณาระบุ"