kpi พัฒนาตน
This commit is contained in:
STW_TTTY\stwtt
parent
79a64bd5e9
commit
61ce529725
2 changed files with 219 additions and 17 deletions
|
|
@ -1,6 +1,6 @@
|
|||
<script setup lang="ts">
|
||||
import DialogHeader from "@/components/DialogHeader.vue";
|
||||
import { ref, reactive, watch } from "vue";
|
||||
import { ref, reactive, watch, computed } from "vue";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useQuasar } from "quasar";
|
||||
|
||||
|
|
@ -8,11 +8,43 @@ import http from "@/plugins/http";
|
|||
import config from "@/app.config";
|
||||
import { useRoute } from "vue-router";
|
||||
|
||||
import type { DataOptionTechnique } from "@/modules/08_KPI/interface/index/Main";
|
||||
|
||||
const props = defineProps({
|
||||
getAll: Function,
|
||||
});
|
||||
const route = useRoute();
|
||||
const idKpi = ref<string>(route.params.id.toLocaleString());
|
||||
const development = ref<any[]>([]);
|
||||
const reasonDevelopment70 = ref<string>("");
|
||||
const reasonDevelopment20 = ref<string>("");
|
||||
const reasonDevelopment10 = ref<string>("");
|
||||
|
||||
const checkOtherBox11 = computed<boolean>(() => {
|
||||
return development.value.includes("other1");
|
||||
});
|
||||
const checkOtherBox12 = computed<boolean>(() => {
|
||||
return development.value.includes("other2");
|
||||
});
|
||||
const checkOtherBox13 = computed<boolean>(() => {
|
||||
return development.value.includes("other3");
|
||||
});
|
||||
|
||||
const isDevelopment70 = computed(() => {
|
||||
return projectTechniquesOp1.value.some((txt) =>
|
||||
development.value.includes(txt.value)
|
||||
);
|
||||
});
|
||||
const isDevelopment20 = computed(() => {
|
||||
return projectTechniquesOp2.value.some((txt) =>
|
||||
development.value.includes(txt.value)
|
||||
);
|
||||
});
|
||||
const isDevelopment10 = computed(() => {
|
||||
return projectTechniquesOp3.value.some((txt) =>
|
||||
development.value.includes(txt.value)
|
||||
);
|
||||
});
|
||||
|
||||
const $q = useQuasar();
|
||||
const mixin = useCounterMixin();
|
||||
|
|
@ -39,29 +71,95 @@ const formData = reactive({
|
|||
achievement5: "มีผลการพัฒนาแต่ยังไม่ได้ดำเนินการตามเป้าหมายการนำไปพัฒนางาน",
|
||||
achievement0: "ไม่ได้ดำเนินการพัฒนา",
|
||||
});
|
||||
|
||||
const projectTechniquesOp1 = ref<DataOptionTechnique[]>([
|
||||
{
|
||||
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: "อื่น ๆ (ระบุ)" },
|
||||
]);
|
||||
const projectTechniquesOp2 = ref<DataOptionTechnique[]>([
|
||||
{ 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: "อื่น ๆ (ระบุ)" },
|
||||
]);
|
||||
|
||||
const projectTechniquesOp3 = ref<DataOptionTechnique[]>([
|
||||
{
|
||||
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 close() {
|
||||
modal.value = false;
|
||||
id.value = "";
|
||||
|
||||
development.value = [];
|
||||
formData.name = "";
|
||||
formData.group = [];
|
||||
formData.target = "";
|
||||
formData.isDevelopment70 = false;
|
||||
formData.isDevelopment20 = false;
|
||||
formData.isDevelopment10 = false;
|
||||
reasonDevelopment70.value = "";
|
||||
reasonDevelopment20.value = "";
|
||||
reasonDevelopment10.value = "";
|
||||
formData.achievement10 =
|
||||
"มีผลการพัฒนาและมีการดำเนินการตามเป้าหมายการนำไปพัฒนางาน";
|
||||
formData.achievement5 =
|
||||
"มีผลการพัฒนาแต่ยังไม่ได้ดำเนินการตามเป้าหมายการนำไปพัฒนางาน";
|
||||
formData.achievement0 = "ไม่ได้ดำเนินการพัฒนา";
|
||||
|
||||
props.getAll?.();
|
||||
}
|
||||
|
||||
function onSubmit() {
|
||||
if (
|
||||
formData.isDevelopment70 == false &&
|
||||
formData.isDevelopment20 == false &&
|
||||
formData.isDevelopment10 == false
|
||||
isDevelopment70.value == false &&
|
||||
isDevelopment20.value == false &&
|
||||
isDevelopment10.value == false
|
||||
) {
|
||||
dialogMessageNotify($q, "กรุณาเลือกวิธีการพัฒนา อย่างน้อย 1 ตัวเลือก");
|
||||
} else {
|
||||
|
|
@ -75,10 +173,14 @@ function onSubmit() {
|
|||
achievement10: formData.achievement10,
|
||||
achievement5: formData.achievement5,
|
||||
achievement0: formData.achievement0,
|
||||
isDevelopment70: formData.isDevelopment70,
|
||||
isDevelopment20: formData.isDevelopment20,
|
||||
isDevelopment10: formData.isDevelopment10,
|
||||
isDevelopment70: isDevelopment70.value,
|
||||
isDevelopment20: isDevelopment20.value,
|
||||
isDevelopment10: isDevelopment10.value,
|
||||
kpiUserEvaluationId: idKpi.value,
|
||||
developmentProjects: development.value,
|
||||
reasonDevelopment70: checkOtherBox11 ? reasonDevelopment70.value : "",
|
||||
reasonDevelopment20: checkOtherBox12 ? reasonDevelopment20.value : "",
|
||||
reasonDevelopment10: checkOtherBox13 ? reasonDevelopment10.value : "",
|
||||
};
|
||||
showLoader();
|
||||
http[id.value ? "put" : "post"](url, body)
|
||||
|
|
@ -102,7 +204,7 @@ watch(
|
|||
showLoader();
|
||||
http
|
||||
.get(config.API.kpiAchievementDevelop + `/${id.value}`)
|
||||
.then((res) => {
|
||||
.then(async(res) => {
|
||||
const data = res.data.result;
|
||||
formData.name = data.name;
|
||||
formData.group = data.group;
|
||||
|
|
@ -113,6 +215,10 @@ watch(
|
|||
formData.achievement10 = data.achievement10;
|
||||
formData.achievement5 = data.achievement5;
|
||||
formData.achievement0 = data.achievement0;
|
||||
development.value = data.developmentProjects;
|
||||
reasonDevelopment70.value = data.developmentProjects.includes("other1") ? data.reasonDevelopment70:'';
|
||||
reasonDevelopment20.value = data.developmentProjects.includes("other2") ? data.reasonDevelopment20:'';
|
||||
reasonDevelopment10.value = data.developmentProjects.includes("other3") ? data.reasonDevelopment10:'';
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
|
|
@ -126,7 +232,7 @@ watch(
|
|||
</script>
|
||||
<template>
|
||||
<q-dialog persistent v-model="modal">
|
||||
<q-card style="width: 80%">
|
||||
<q-card style="min-width: 90vw">
|
||||
<q-form greedy @submit.prevent @validation-success="onSubmit">
|
||||
<DialogHeader
|
||||
:tittle="`${id ? 'แก้ไข' : 'เพิ่ม'}การพัฒนาตนเอง`"
|
||||
|
|
@ -151,8 +257,88 @@ watch(
|
|||
<div class="col-12">
|
||||
<span class="text-weight-medium">วิธีการพัฒนา</span>
|
||||
</div>
|
||||
<div class="column">
|
||||
<q-checkbox
|
||||
<div class="row q-col-gutter-md full-width">
|
||||
<div class="col-12 col-sm-6 col-md-6 col-lg-4">
|
||||
<span class="text-weight-medium"
|
||||
>70 การลงมือปฏิบัติ (โดยผู้บังคับบัญชามอบหมาย)</span
|
||||
>
|
||||
<q-option-group
|
||||
class="check_box q-mt-sm"
|
||||
keep-color
|
||||
color="primary"
|
||||
dense
|
||||
v-model="development"
|
||||
:options="projectTechniquesOp1"
|
||||
type="checkbox"
|
||||
/>
|
||||
<div class="row q-pb-md" v-if="checkOtherBox11">
|
||||
<div class="offset-4 col-8 q-mt-sm relative-position">
|
||||
<div class="other_custom_input">
|
||||
<q-input
|
||||
v-model="reasonDevelopment70"
|
||||
dense
|
||||
outlined
|
||||
class="inputgreen"
|
||||
label="กรุณาระบุ"
|
||||
></q-input>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-sm-6 col-md-6 col-lg-4">
|
||||
<span class="text-weight-medium"
|
||||
>20 การเรียนรู้จากผู้อื่น (Coach/Mentor/Consulting)</span
|
||||
>
|
||||
<q-option-group
|
||||
class="check_box q-mt-sm"
|
||||
keep-color
|
||||
color="primary"
|
||||
dense
|
||||
v-model="development"
|
||||
:options="projectTechniquesOp2"
|
||||
type="checkbox"
|
||||
/>
|
||||
<div class="row q-pb-md" v-if="checkOtherBox12">
|
||||
<div class="offset-4 col-8 q-mt-sm relative-position">
|
||||
<div class="other_custom_input">
|
||||
<q-input
|
||||
v-model="reasonDevelopment20"
|
||||
dense
|
||||
outlined
|
||||
class="inputgreen"
|
||||
label="กรุณาระบุ"
|
||||
></q-input>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-sm-6 col-md-6 col-lg-4">
|
||||
<span class="text-weight-medium">10 การฝึกอบรมอื่นๆ</span>
|
||||
<q-option-group
|
||||
class="check_box q-mt-sm"
|
||||
keep-color
|
||||
color="primary"
|
||||
dense
|
||||
v-model="development"
|
||||
:options="projectTechniquesOp3"
|
||||
type="checkbox"
|
||||
/>
|
||||
<div class="row q-pb-md" v-if="checkOtherBox13">
|
||||
<div class="offset-4 col-8 q-mt-sm relative-position">
|
||||
<div class="other_custom_input">
|
||||
<q-input
|
||||
v-model="reasonDevelopment10"
|
||||
dense
|
||||
outlined
|
||||
class="inputgreen"
|
||||
label="กรุณาระบุ"
|
||||
></q-input>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <q-checkbox
|
||||
v-model="formData.isDevelopment70"
|
||||
label="70 การลงมือปฏิบัติ (โดยผู้บังคับบัญชามอบหมาย)"
|
||||
/>
|
||||
|
|
@ -163,7 +349,7 @@ watch(
|
|||
<q-checkbox
|
||||
v-model="formData.isDevelopment10"
|
||||
label="10 การฝึกอบรมอื่นๆ"
|
||||
/>
|
||||
/> -->
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<q-input
|
||||
|
|
@ -256,3 +442,14 @@ watch(
|
|||
</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>
|
||||
|
|
|
|||
|
|
@ -9,4 +9,9 @@ interface Pagination {
|
|||
sortBy: string;
|
||||
}
|
||||
|
||||
export type { DataOptions, Pagination };
|
||||
interface DataOptionTechnique {
|
||||
label: string;
|
||||
value: string;
|
||||
}
|
||||
|
||||
export type { DataOptions, Pagination, DataOptionTechnique };
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue