406 lines
15 KiB
Vue
406 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>
|