แก้เเสดงผล การพัฒนารายบุคคล (Individual Development Plan)

This commit is contained in:
setthawutttty 2024-12-19 17:41:59 +07:00
parent 85fcae6be7
commit 4b4b293ee7
3 changed files with 101 additions and 66 deletions

View file

@ -49,4 +49,8 @@ export default {
/**API ยุทธศาสตร์*/
devStrategy,
/** IDP */
developmentReQuestIDP: (id: string) => `${developmentOrg}/profile/development/registry/OFFICER/${id}`,
developmentIDP: (id: string) => `${development}/main/registry/OFFICER/${id}`,
};

View file

@ -38,7 +38,7 @@ const profileId = ref<string>(
const empType = ref<string>(pathRegistryEmp(route.name?.toString() ?? ""));
const id = ref<string>(""); //id
const typeIDP = ref<string>('')
const isEdit = ref<boolean>(false); //
const modal = ref<boolean>(false); // popup
const modalDevelop = ref<boolean>(false); // popup
@ -553,6 +553,7 @@ function clearData() {
function openDialogDevelop(data: any) {
modalDevelop.value = true;
kpiDevelopmentId.value = data.kpiDevelopmentId;
typeIDP.value = data.type
}
function updatePaginationIdp(newPagination: any) {
@ -1272,7 +1273,7 @@ onMounted(async () => {
</q-card>
</q-dialog>
<DialogDevelop v-model:modal="modalDevelop" v-model:id="kpiDevelopmentId" />
<DialogDevelop v-model:modal="modalDevelop" v-model:id="kpiDevelopmentId" :type="typeIDP"/>
</template>
<style scoped>

View file

@ -29,6 +29,10 @@ const modal = defineModel<boolean>("modal", { required: true });
const id = defineModel<string>("id", { required: true });
const props = defineProps({
getAll: Function,
type: {
type: String,
required: true,
},
});
const development = ref<any[]>([]);
@ -203,11 +207,15 @@ watch(
(i) => {
if (i) {
showLoader();
http
.get(
config.API.kpiAchievementDevelop +
const url =
props.type == "KPI"
? config.API.kpiAchievementDevelop +
`/registry/${emType.value}/${id.value}`
)
: props.type == "REQUEST"
? config.API.developmentReQuestIDP(id.value)
: config.API.developmentIDP(id.value);
http
.get(url)
.then(async (res) => {
const data = res.data.result;
formData.year = data.selectTypeYear;
@ -265,7 +273,10 @@ watch(
<q-separator />
<q-card-section>
<div class="row q-col-gutter-sm">
<div class="col-3">
<div
class="col-3"
v-if="props.type !== 'DEVELOP' && props.type !== 'REQUEST'"
>
<q-select
outlined
dense
@ -280,48 +291,11 @@ watch(
>
</q-select>
</div>
<div class="col-3" v-if="choice == 'PROJECT'">
<datepicker
menu-class-name="modalfix"
v-model="formData.year"
readonly
:locale="'th'"
autoApply
position="center"
year-picker
:alt-position="customPosition"
:enableTimePicker="false"
@update:model-value="getDataByYear(), (projectName = '')"
>
<template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{
parseInt(value + 543)
}}</template>
<template #trigger>
<q-input
dense
readonly
outlined
hide-bottom-space
:rules="[(val:string) => !!val || `${'กรุณาเลือกปีงบประมาณ'}`,]"
:model-value="
formData.year === null ? null : Number(formData.year) + 543
"
:label="`${'ปีงบประมาณ'}`"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
</div>
<div class="col-3" v-if="choice == 'PROJECT'">
<div
class="col-3"
v-if="choice == 'PROJECT' && props.type !== 'DEVELOP'"
>
<q-select
outlined
dense
@ -347,19 +321,71 @@ watch(
</template>
</q-select>
</div>
<div class="col-12">
<q-input
v-model="formData.name"
readonly
outlined
dense
:rules="[(val:string) => !!val || `${'กรุณากรอกชื่อเรื่อง/เนื้อเรื่อง/หัวข้อการพัฒนา'}`,]"
lazy-rules
hide-bottom-space
class="inputgreen"
label="ชื่อเรื่อง/เนื้อเรื่อง/หัวข้อการพัฒนา"
<div class="col-12 row q-col-gutter-x-sm">
<div
:class="
props.type == 'REQUEST' ||
(props.type == 'KPI' && choice == 'MANUAL')
? 'col-12'
: 'col-9'
"
>
</q-input>
<q-input
v-model="formData.name"
readonly
outlined
dense
:rules="[(val:string) => !!val || `${'กรุณากรอกชื่อเรื่อง/เนื้อเรื่อง/หัวข้อการพัฒนา'}`,]"
lazy-rules
hide-bottom-space
class="inputgreen"
label="ชื่อเรื่อง/เนื้อเรื่อง/หัวข้อการพัฒนา"
>
</q-input>
</div>
<div class="col-3" v-if="choice == 'PROJECT'">
<datepicker
menu-class-name="modalfix"
v-model="formData.year"
readonly
:locale="'th'"
autoApply
position="center"
year-picker
:alt-position="customPosition"
:enableTimePicker="false"
@update:model-value="getDataByYear(), (projectName = '')"
>
<template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{
parseInt(value + 543)
}}</template>
<template #trigger>
<q-input
dense
readonly
outlined
hide-bottom-space
:rules="[(val:string) => !!val || `${'กรุณาเลือกปีงบประมาณ'}`,]"
:model-value="
formData.year === null
? null
: Number(formData.year) + 543
"
:label="`${'ปีงบประมาณ'}`"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
</div>
</div>
<div class="col-12">
<span class="text-weight-medium">การพฒนา</span>
@ -464,7 +490,7 @@ watch(
label="10 การฝึกอบรมอื่นๆ"
/> -->
</div>
<div class="col-12">
<div class="col-12" v-if="props.type !== 'DEVELOP'">
<q-input
label="เป้าหมายการนำไปพัฒนางาน"
v-model="formData.target"
@ -477,7 +503,10 @@ watch(
hide-bottom-space
></q-input>
</div>
<div class="col-12">
<div
class="col-12"
v-if="props.type !== 'DEVELOP' && props.type !== 'REQUEST'"
>
<q-card bordered>
<div class="bg-grey-2 row q-py-sm text-weight-bold col-12">
<div class="col-4 text-center">
@ -493,7 +522,6 @@ watch(
</div>
<div class="col-8">
<q-input
v-model="formData.achievement10"
outlined
readonly
@ -512,7 +540,6 @@ watch(
</div>
<div class="col-8">
<q-input
v-model="formData.achievement5"
outlined
readonly
@ -545,7 +572,10 @@ watch(
</q-card>
</div>
</div>
<div class="row q-pa-sm justify-center">
<div
class="row q-pa-sm justify-center"
v-if="props.type !== 'DEVELOP' && props.type !== 'REQUEST'"
>
<span class="text-body2 text-weight-bold">ผลการพฒนา </span>
<div class="text-primary q-pl-md">
{{ formData.point }}