แก้ dialog เพิ่ม page
This commit is contained in:
setthawutttty
parent
a0feb4a785
commit
4124d81bb3
4 changed files with 576 additions and 546 deletions
|
|
@ -1,528 +0,0 @@
|
||||||
<script setup lang="ts">
|
|
||||||
import { reactive, ref, computed, watch } from "vue";
|
|
||||||
import { useQuasar } from "quasar";
|
|
||||||
import axios from "axios";
|
|
||||||
|
|
||||||
import http from "@/plugins/http";
|
|
||||||
import config from "@/app.config";
|
|
||||||
import { useCounterMixin } from "@/stores/mixin";
|
|
||||||
import { useIndividualDevelopmentPlan } from "@/modules/14_IDP/store";
|
|
||||||
|
|
||||||
import type {
|
|
||||||
FormDataIDP,
|
|
||||||
DataItemsDevelopment,
|
|
||||||
} from "@/modules/14_IDP/interface/Main";
|
|
||||||
|
|
||||||
import DialogHeader from "@/components/DialogHeader.vue";
|
|
||||||
|
|
||||||
const $q = useQuasar();
|
|
||||||
const store = useIndividualDevelopmentPlan();
|
|
||||||
const { dialogConfirm, showLoader, hideLoader, messageError, success } =
|
|
||||||
useCounterMixin();
|
|
||||||
|
|
||||||
const modal = defineModel<boolean>("modal", { required: true }); //เปิด,ปิด popup แก้ไขสถานะคำร้อง
|
|
||||||
const isEdit = defineModel<boolean>("isEdit", { required: true }); //เปิด,ปิด popup แก้ไขสถานะคำร้อง
|
|
||||||
const idRow = defineModel<string>("idRow", { required: true }); //เปิด,ปิด popup แก้ไขสถานะคำร้อง
|
|
||||||
const isReadOnly = ref<boolean>(false);
|
|
||||||
|
|
||||||
const props = defineProps({
|
|
||||||
getData: Function,
|
|
||||||
onDownloadFile: Function,
|
|
||||||
});
|
|
||||||
|
|
||||||
/** เช็ค 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)
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
const formData = reactive<FormDataIDP>({
|
|
||||||
topic: "",
|
|
||||||
development: [],
|
|
||||||
otherAction: "",
|
|
||||||
otherPerson: "",
|
|
||||||
otherTraining: "",
|
|
||||||
developmentTarget: "",
|
|
||||||
developmentResults: "",
|
|
||||||
developmentReport: "",
|
|
||||||
document: null,
|
|
||||||
});
|
|
||||||
|
|
||||||
//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: "อื่น ๆ (ระบุ)" },
|
|
||||||
]);
|
|
||||||
|
|
||||||
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, `บันทึกข้อมูลสำเร็จ`);
|
|
||||||
closeDialog();
|
|
||||||
await props.getData?.();
|
|
||||||
hideLoader();
|
|
||||||
})
|
|
||||||
.catch((e) => {
|
|
||||||
messageError($q, e);
|
|
||||||
hideLoader();
|
|
||||||
})
|
|
||||||
.finally(() => {});
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* function ปิด popup
|
|
||||||
*/
|
|
||||||
function closeDialog() {
|
|
||||||
modal.value = false;
|
|
||||||
formData.topic = "";
|
|
||||||
formData.development = [];
|
|
||||||
formData.otherAction = "";
|
|
||||||
formData.otherPerson = "";
|
|
||||||
formData.otherTraining = "";
|
|
||||||
formData.developmentTarget = "";
|
|
||||||
formData.developmentResults = "";
|
|
||||||
formData.developmentReport = "";
|
|
||||||
formData.document = null;
|
|
||||||
|
|
||||||
isEdit.value = false;
|
|
||||||
idRow.value = "";
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* class inpui
|
|
||||||
* @param val ค่าสถานะ
|
|
||||||
*/
|
|
||||||
function classInput(val: boolean) {
|
|
||||||
return {
|
|
||||||
"full-width cursor-pointer ": val,
|
|
||||||
"full-width cursor-pointer inputgreen": !val,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
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();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
watch(
|
|
||||||
() => modal.value,
|
|
||||||
() => {
|
|
||||||
if (idRow.value) {
|
|
||||||
getDetail();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
);
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<q-dialog v-model="modal" persistent>
|
|
||||||
<q-card style="min-width: 90vw">
|
|
||||||
<q-form greedy @submit.prevent @validation-success="onSubmit">
|
|
||||||
<DialogHeader
|
|
||||||
:tittle="
|
|
||||||
isEdit
|
|
||||||
? 'รายละเอียดยื่นคำร้องขอเพิ่มข้อมูลการพัฒนารายบุคคล'
|
|
||||||
: 'ยื่นคำร้องขอเพิ่มข้อมูลการพัฒนารายบุคคล'
|
|
||||||
"
|
|
||||||
:close="closeDialog"
|
|
||||||
/>
|
|
||||||
<q-separator />
|
|
||||||
|
|
||||||
<q-card-section style="max-height: 80vh" class="scroll">
|
|
||||||
<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="props.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>
|
|
||||||
</q-form>
|
|
||||||
</q-card>
|
|
||||||
</q-dialog>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
:deep(.check_box .q-checkbox) {
|
|
||||||
align-items: start;
|
|
||||||
}
|
|
||||||
|
|
||||||
.other_custom_input {
|
|
||||||
position: absolute;
|
|
||||||
top: -25px;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -3,6 +3,8 @@
|
||||||
*/
|
*/
|
||||||
|
|
||||||
const idpMain = () => import("@/modules/14_IDP/views/main.vue");
|
const idpMain = () => import("@/modules/14_IDP/views/main.vue");
|
||||||
|
const idpRegistry = () => import("@/modules/14_IDP/views/registry.vue");
|
||||||
|
const idpRegistryDetail = () => import("@/modules/14_IDP/views/registry.vue");
|
||||||
|
|
||||||
export default [
|
export default [
|
||||||
{
|
{
|
||||||
|
|
@ -14,4 +16,22 @@ export default [
|
||||||
Key: [14],
|
Key: [14],
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: "/idp-registry",
|
||||||
|
name: "idpRegistry",
|
||||||
|
component: idpRegistry,
|
||||||
|
meta: {
|
||||||
|
Auth: true,
|
||||||
|
Key: [14],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/idp-registry-detail/:id",
|
||||||
|
name: "idpRegistryDetail",
|
||||||
|
component: idpRegistryDetail,
|
||||||
|
meta: {
|
||||||
|
Auth: true,
|
||||||
|
Key: [14],
|
||||||
|
},
|
||||||
|
},
|
||||||
];
|
];
|
||||||
|
|
|
||||||
|
|
@ -10,8 +10,6 @@ import { useIndividualDevelopmentPlan } from "@/modules/14_IDP/store"; // ดึ
|
||||||
|
|
||||||
import type { DataOption, RowsListMain } from "@/modules/14_IDP/interface/Main";
|
import type { DataOption, RowsListMain } from "@/modules/14_IDP/interface/Main";
|
||||||
|
|
||||||
import DialogDevelop from "@/modules/14_IDP/component/DialogDevelop.vue";
|
|
||||||
|
|
||||||
const $q = useQuasar();
|
const $q = useQuasar();
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const mixin = useCounterMixin();
|
const mixin = useCounterMixin();
|
||||||
|
|
@ -169,7 +167,7 @@ function clearStatus() {
|
||||||
|
|
||||||
/** ฟังชั่น เปิด popup */
|
/** ฟังชั่น เปิด popup */
|
||||||
function openAdd() {
|
function openAdd() {
|
||||||
modalAdd.value = true;
|
router.push("/idp-registry");
|
||||||
}
|
}
|
||||||
|
|
||||||
function onDelete(id: string) {
|
function onDelete(id: string) {
|
||||||
|
|
@ -267,9 +265,12 @@ function updatePagination(newPagination: any) {
|
||||||
* @param id id row
|
* @param id id row
|
||||||
*/
|
*/
|
||||||
function onDetail(id: string) {
|
function onDetail(id: string) {
|
||||||
modalAdd.value = true;
|
router.push(`/idp-registry-detail/${id}`);
|
||||||
isEdit.value = true;
|
}
|
||||||
idRow.value = id;
|
|
||||||
|
function getSerach(){
|
||||||
|
pagination.value.page = 1
|
||||||
|
getListData()
|
||||||
}
|
}
|
||||||
|
|
||||||
watch(
|
watch(
|
||||||
|
|
@ -315,7 +316,7 @@ onMounted(async () => {
|
||||||
option-value="id"
|
option-value="id"
|
||||||
:options="statusOptions"
|
:options="statusOptions"
|
||||||
style="width: 250px"
|
style="width: 250px"
|
||||||
@update:model-value="getListData()"
|
@update:model-value="getSerach()"
|
||||||
@filter="(inputValue:string,
|
@filter="(inputValue:string,
|
||||||
doneFn:Function) => filterOption(inputValue, doneFn
|
doneFn:Function) => filterOption(inputValue, doneFn
|
||||||
) "
|
) "
|
||||||
|
|
@ -345,7 +346,7 @@ onMounted(async () => {
|
||||||
outlined
|
outlined
|
||||||
dense
|
dense
|
||||||
label="ค้นหา"
|
label="ค้นหา"
|
||||||
@keydown.enter="getListData()"
|
@keydown.enter="getSerach()"
|
||||||
style="width: 200px"
|
style="width: 200px"
|
||||||
>
|
>
|
||||||
<template v-slot:append>
|
<template v-slot:append>
|
||||||
|
|
@ -354,7 +355,7 @@ onMounted(async () => {
|
||||||
v-if="filterKeyword !== ''"
|
v-if="filterKeyword !== ''"
|
||||||
name="clear"
|
name="clear"
|
||||||
class="cursor-pointer"
|
class="cursor-pointer"
|
||||||
@click="(filterKeyword = ''), getListData()"
|
@click="(filterKeyword = ''), getSerach()"
|
||||||
/>
|
/>
|
||||||
</template>
|
</template>
|
||||||
</q-input>
|
</q-input>
|
||||||
|
|
@ -381,7 +382,7 @@ onMounted(async () => {
|
||||||
row-key="id"
|
row-key="id"
|
||||||
:paging="true"
|
:paging="true"
|
||||||
:visible-columns="visibleColumns"
|
:visible-columns="visibleColumns"
|
||||||
:rows-per-page-options="[1, 25, 50, 100]"
|
:rows-per-page-options="[10, 25, 50, 100]"
|
||||||
@update:pagination="updatePagination"
|
@update:pagination="updatePagination"
|
||||||
>
|
>
|
||||||
<template v-slot:header="props">
|
<template v-slot:header="props">
|
||||||
|
|
@ -485,13 +486,5 @@ onMounted(async () => {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<DialogDevelop
|
|
||||||
v-model:modal="modalAdd"
|
|
||||||
:get-data="getListData"
|
|
||||||
v-model:is-edit="isEdit"
|
|
||||||
v-model:id-row="idRow"
|
|
||||||
:on-download-file="onDownloadFile"
|
|
||||||
/>
|
|
||||||
</template>
|
</template>
|
||||||
<style scoped lang="scss"></style>
|
<style scoped lang="scss"></style>
|
||||||
|
|
|
||||||
545
src/modules/14_IDP/views/registry.vue
Normal file
545
src/modules/14_IDP/views/registry.vue
Normal file
|
|
@ -0,0 +1,545 @@
|
||||||
|
<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 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 idRow = ref<string>("");
|
||||||
|
const router = useRouter();
|
||||||
|
const route = useRoute();
|
||||||
|
const isReadOnly = ref<boolean>(false);
|
||||||
|
const isEdit = ref<boolean>(false); // เก็บ เช็ค รายละเอียด/แก้ไข
|
||||||
|
|
||||||
|
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>
|
||||||
|
</q-form>
|
||||||
|
</q-card>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
Loading…
Add table
Add a link
Reference in a new issue