407 lines
15 KiB
Vue
407 lines
15 KiB
Vue
|
<script setup lang="ts">
|
|||
|
|
import { reactive, ref } from "vue";
|
|||
|
|
import { useQuasar } from "quasar";
|
|||
|
|
|
|||
|
|
import { useCounterMixin } from "@/stores/mixin";
|
|||
|
|
import { useRequestEditStore } from "@/modules/04_registryPerson/stores/RequestEdit";
|
|||
|
|
|
|||
|
|
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 isReadOnly = ref<boolean>(false);
|
|||
|
|
|
|||
|
|
const formData = reactive<FormDataIDP>({
|
|||
|
|
topic: "",
|
|||
|
|
development: [],
|
|||
|
|
otherAction: "",
|
|||
|
|
otherPerson: "",
|
|||
|
|
otherTraining: "",
|
|||
|
|
developmentTarget: "",
|
|||
|
|
developmentResults: "",
|
|||
|
|
developmentReport: "",
|
|||
|
|
status: "",
|
|||
|
|
remark: "",
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
//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: "อื่น ๆ (ระบุ)" },
|
|||
|
|
]);
|
|||
|
|
//ข้อมูลรายการสถานะ
|
|||
|
|
const statusOptionMain = ref<DataOption[]>(
|
|||
|
|
store.optionStatus.filter((e: DataOption) => e.id !== "")
|
|||
|
|
);
|
|||
|
|
const statusOption = ref<DataOption[]>(statusOptionMain.value); //ตัวเลือกรายการสถานะ
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 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 onSubmit() {
|
|||
|
|
dialogConfirm($q, () => {});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* function ปิด popup
|
|||
|
|
*/
|
|||
|
|
function closeDialog() {
|
|||
|
|
modal.value = false;
|
|||
|
|
formData.topic = "";
|
|||
|
|
formData.development = [];
|
|||
|
|
formData.otherAction = "";
|
|||
|
|
formData.otherPerson = "";
|
|||
|
|
formData.otherTraining = "";
|
|||
|
|
formData.developmentTarget = "";
|
|||
|
|
formData.developmentResults = "";
|
|||
|
|
formData.developmentReport = "";
|
|||
|
|
formData.status = "";
|
|||
|
|
formData.remark = "";
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* class inpui
|
|||
|
|
* @param val ค่าสถานะ
|
|||
|
|
*/
|
|||
|
|
function classInput(val: boolean) {
|
|||
|
|
return {
|
|||
|
|
"full-width cursor-pointer ": val,
|
|||
|
|
"full-width cursor-pointer inputgreen": !val,
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<template>
|
|||
|
|
<q-dialog v-model="modal" persistent>
|
|||
|
|
<q-card style="min-width: 90%">
|
|||
|
|
<q-form greedy @submit.prevent @validation-success="onSubmit">
|
|||
|
|
<DialogHeader tittle="ข้อมูลการพัฒนารายบุคคล" :close="closeDialog" />
|
|||
|
|
<q-separator />
|
|||
|
|
|
|||
|
|
<q-card-section style="max-height: 84vh" class="scroll">
|
|||
|
|
<div class="row q-col-gutter-sm">
|
|||
|
|
<div class="col-md-3 col-xs-12">
|
|||
|
|
<div class="row q-col-gutter-sm">
|
|||
|
|
<!-- สถานะ -->
|
|||
|
|
<div class="col-12">
|
|||
|
|
<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-12">
|
|||
|
|
<q-input
|
|||
|
|
:class="classInput(isReadOnly)"
|
|||
|
|
v-model="formData.remark"
|
|||
|
|
label="หมายเหตุ"
|
|||
|
|
dense
|
|||
|
|
outlined
|
|||
|
|
type="textarea"
|
|||
|
|
hide-bottom-space
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="col-md-9 col-xs-12">
|
|||
|
|
<div class="row q-col-gutter-sm">
|
|||
|
|
<div class="col-12">
|
|||
|
|
<q-input
|
|||
|
|
:class="classInput(isReadOnly)"
|
|||
|
|
readonly
|
|||
|
|
outlined
|
|||
|
|
v-model="formData.topic"
|
|||
|
|
label="ชื่อเรื่อง/เนื้อเรื่อง/หัวข้อการพัฒนา"
|
|||
|
|
dense
|
|||
|
|
/>
|
|||
|
|
</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-4">
|
|||
|
|
<q-label class="q-mb-sm text-weight-medium text-body2"
|
|||
|
|
>70 การลงมือปฏิบัติ (โดยผู้บังคับบัญชามอบหมาย)</q-label
|
|||
|
|
>
|
|||
|
|
<q-option-group
|
|||
|
|
disable
|
|||
|
|
class="check_box q-mt-sm"
|
|||
|
|
keep-color
|
|||
|
|
color="primary"
|
|||
|
|
dense
|
|||
|
|
v-model="formData.development"
|
|||
|
|
:options="itemsDevelopmentAction"
|
|||
|
|
type="checkbox"
|
|||
|
|
/>
|
|||
|
|
|
|||
|
|
<div
|
|||
|
|
class="row"
|
|||
|
|
v-if="formData.development.includes('other1')"
|
|||
|
|
>
|
|||
|
|
<div class="col-8 q-mt-sm relative-position">
|
|||
|
|
<div class="other_custom_input">
|
|||
|
|
<q-input
|
|||
|
|
readonly
|
|||
|
|
v-model="formData.otherAction"
|
|||
|
|
dense
|
|||
|
|
outlined
|
|||
|
|
class="inputgreen"
|
|||
|
|
label="กรุณาระบุ"
|
|||
|
|
></q-input>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 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
|
|||
|
|
>
|
|||
|
|
<q-option-group
|
|||
|
|
disable
|
|||
|
|
class="check_box q-mt-sm"
|
|||
|
|
keep-color
|
|||
|
|
color="primary"
|
|||
|
|
dense
|
|||
|
|
v-model="formData.development"
|
|||
|
|
:options="itemsDevelopmentPerson"
|
|||
|
|
type="checkbox"
|
|||
|
|
/>
|
|||
|
|
<div
|
|||
|
|
class="row"
|
|||
|
|
v-if="formData.development.includes('other2')"
|
|||
|
|
>
|
|||
|
|
<div class="col-8 q-mt-sm relative-position">
|
|||
|
|
<div class="other_custom_input">
|
|||
|
|
<q-input
|
|||
|
|
readonly
|
|||
|
|
v-model="formData.otherPerson"
|
|||
|
|
dense
|
|||
|
|
outlined
|
|||
|
|
label="กรุณาระบุ"
|
|||
|
|
></q-input>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 10 การฝึกอบรมอื่นๆ -->
|
|||
|
|
<div class="col-4">
|
|||
|
|
<q-label class="q-mb-sm text-weight-medium text-body2"
|
|||
|
|
>10 การฝึกอบรมอื่นๆ</q-label
|
|||
|
|
>
|
|||
|
|
<q-option-group
|
|||
|
|
disable
|
|||
|
|
class="check_box q-mt-sm"
|
|||
|
|
keep-color
|
|||
|
|
color="primary"
|
|||
|
|
dense
|
|||
|
|
v-model="formData.development"
|
|||
|
|
:options="itemsDevelopmentTraining"
|
|||
|
|
type="checkbox"
|
|||
|
|
/>
|
|||
|
|
<div
|
|||
|
|
class="row"
|
|||
|
|
v-if="formData.development.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"
|
|||
|
|
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>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</q-card-section>
|
|||
|
|
|
|||
|
|
<q-separator />
|
|||
|
|
|
|||
|
|
<q-card-actions align="right">
|
|||
|
|
<q-btn label="บันทึก" color="secondary" type="submit"
|
|||
|
|
><q-tooltip>บันทึก</q-tooltip></q-btn
|
|||
|
|
>
|
|||
|
|
</q-card-actions>
|
|||
|
|
</q-form>
|
|||
|
|
</q-card>
|
|||
|
|
</q-dialog>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<style scoped></style>
|