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

แก้ dialog เพิ่ม page

Browse source
This commit is contained in:
setthawutttty 2024-10-29 14:06:05 +07:00
parent a0feb4a785
commit 4124d81bb3
4 changed files with 576 additions and 546 deletions
Download patch file Download diff file Expand all files Collapse all files

528
src/modules/14_IDP/component/DialogDevelop.vue
View file

@ -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>

20
src/modules/14_IDP/router.ts
View file

@ -3,6 +3,8 @@
*/
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 [
{
@ -14,4 +16,22 @@ export default [
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],
},
},
];

29
src/modules/14_IDP/views/main.vue
View file

@ -10,8 +10,6 @@ import { useIndividualDevelopmentPlan } from "@/modules/14_IDP/store"; // ดึ
import type { DataOption, RowsListMain } from "@/modules/14_IDP/interface/Main";
import DialogDevelop from "@/modules/14_IDP/component/DialogDevelop.vue";
const $q = useQuasar();
const router = useRouter();
const mixin = useCounterMixin();
@ -169,7 +167,7 @@ function clearStatus() {
/** ฟังชั่น เปิด popup */
function openAdd() {
modalAdd.value = true;
router.push("/idp-registry");
}
function onDelete(id: string) {
@ -267,9 +265,12 @@ function updatePagination(newPagination: any) {
* @param id id row
*/
function onDetail(id: string) {
modalAdd.value = true;
isEdit.value = true;
idRow.value = id;
router.push(`/idp-registry-detail/${id}`);
}
function getSerach(){
pagination.value.page = 1
getListData()
}
watch(
@ -315,7 +316,7 @@ onMounted(async () => {
option-value="id"
:options="statusOptions"
style="width: 250px"
@update:model-value="getListData()"
@update:model-value="getSerach()"
@filter="(inputValue:string,
doneFn:Function) => filterOption(inputValue, doneFn
) "
@ -345,7 +346,7 @@ onMounted(async () => {
outlined
dense
label="ค้นหา"
@keydown.enter="getListData()"
@keydown.enter="getSerach()"
style="width: 200px"
>
<template v-slot:append>
@ -354,7 +355,7 @@ onMounted(async () => {
v-if="filterKeyword !== ''"
name="clear"
class="cursor-pointer"
@click="(filterKeyword = ''), getListData()"
@click="(filterKeyword = ''), getSerach()"
/>
</template>
</q-input>
@ -381,7 +382,7 @@ onMounted(async () => {
row-key="id"
:paging="true"
:visible-columns="visibleColumns"
:rows-per-page-options="[1, 25, 50, 100]"
:rows-per-page-options="[10, 25, 50, 100]"
@update:pagination="updatePagination"
>
<template v-slot:header="props">
@ -485,13 +486,5 @@ onMounted(async () => {
</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>
<style scoped lang="scss"></style>

545
src/modules/14_IDP/views/registry.vue Normal file
View 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>