แก้เเสดงผล Individual Development Plan
This commit is contained in:
setthawutttty
parent
72c3ce8326
commit
1dff367e7b
3 changed files with 101 additions and 68 deletions
|
|
@ -12,6 +12,7 @@ import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
|
|||
|
||||
import DialogDevelop from "@/modules/10_registry/Dialog/DialogDevelopmant.vue";
|
||||
|
||||
const typeIDP = ref<string>("");
|
||||
const link = ref<string>("");
|
||||
const dataPerson = useDataStore();
|
||||
const idByRow = ref<string>("");
|
||||
|
|
@ -191,6 +192,7 @@ function getHistory() {
|
|||
function openDialogDevelop(data: any) {
|
||||
modalDevelop.value = true;
|
||||
kpiDevelopmentId.value = data.kpiDevelopmentId;
|
||||
typeIDP.value = data.type
|
||||
}
|
||||
|
||||
function onSearch() {
|
||||
|
|
@ -374,7 +376,7 @@ onMounted(async () => {
|
|||
</d-table>
|
||||
</div>
|
||||
|
||||
<DialogDevelop v-model:modal="modalDevelop" v-model:id="kpiDevelopmentId" />
|
||||
<DialogDevelop v-model:modal="modalDevelop" v-model:id="kpiDevelopmentId" :type="typeIDP"/>
|
||||
</template>
|
||||
<style scoped>
|
||||
.absolute_button {
|
||||
|
|
|
|||
|
|
@ -20,6 +20,10 @@ interface ProjectYearOp {
|
|||
|
||||
const props = defineProps({
|
||||
getAll: Function,
|
||||
type: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
|
||||
const development = ref<any[]>([]);
|
||||
|
|
@ -195,8 +199,14 @@ watch(
|
|||
(i) => {
|
||||
if (i) {
|
||||
showLoader();
|
||||
const url =
|
||||
props.type == "KPI"
|
||||
? config.API.kpiAchievementDevelop + `/registry/user/${id.value}`
|
||||
: props.type == "REQUEST"
|
||||
? config.API.developmentReQuestIDP(id.value)
|
||||
: config.API.developmentIDP(id.value);
|
||||
http
|
||||
.get(config.API.kpiAchievementDevelop + `/registry/user/${id.value}`)
|
||||
.get(url)
|
||||
.then(async (res) => {
|
||||
const data = res.data.result;
|
||||
formData.year = data.selectTypeYear;
|
||||
|
|
@ -321,9 +331,11 @@ function filterOptionFn(val: string, update: Function) {
|
|||
<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
|
||||
class="inputgreen"
|
||||
outlined
|
||||
dense
|
||||
label="ตัวเลือก"
|
||||
|
|
@ -337,54 +349,15 @@ function filterOptionFn(val: string, update: Function) {
|
|||
>
|
||||
</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 || `${'กรุณาเลือกปีงบประมาณ'}`,]"
|
||||
class="inputgreen"
|
||||
: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
|
||||
:rules="[(val:string) => !!val || `${'กรุณาเลือกโครงการ/หลักสูตรการฝึกอบรม'}`,]"
|
||||
class="inputgreen"
|
||||
label="โครงการ/หลักสูตรการฝึกอบรม"
|
||||
:options="projectOp"
|
||||
option-label="projectName"
|
||||
|
|
@ -392,7 +365,7 @@ function filterOptionFn(val: string, update: Function) {
|
|||
map-options
|
||||
hide-bottom-space
|
||||
use-input
|
||||
:readonly="!formData.year"
|
||||
readonly
|
||||
v-model="projectName"
|
||||
@update:model-value="getProjectDetail(projectName)"
|
||||
@filter="filterOptionFn"
|
||||
|
|
@ -406,19 +379,70 @@ function filterOptionFn(val: string, update: Function) {
|
|||
</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
|
||||
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>
|
||||
|
|
@ -523,7 +547,7 @@ function filterOptionFn(val: string, update: Function) {
|
|||
label="10 การฝึกอบรมอื่นๆ"
|
||||
/> -->
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="col-12" v-if="props.type !== 'DEVELOP'">
|
||||
<q-input
|
||||
label="เป้าหมายการนำไปพัฒนางาน"
|
||||
v-model="formData.target"
|
||||
|
|
@ -531,13 +555,15 @@ function filterOptionFn(val: string, update: Function) {
|
|||
readonly
|
||||
type="textarea"
|
||||
dense
|
||||
class="inputgreen"
|
||||
:rules="[(val:string) => !!val || `${'กรุณากรอกเป้าหมายการนำไปพัฒนางาน'}`,]"
|
||||
lazy-rules
|
||||
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">
|
||||
|
|
@ -553,7 +579,6 @@ function filterOptionFn(val: string, update: Function) {
|
|||
</div>
|
||||
<div class="col-8">
|
||||
<q-input
|
||||
class="inputgreen"
|
||||
v-model="formData.achievement10"
|
||||
outlined
|
||||
readonly
|
||||
|
|
@ -572,7 +597,6 @@ function filterOptionFn(val: string, update: Function) {
|
|||
</div>
|
||||
<div class="col-8">
|
||||
<q-input
|
||||
class="inputgreen"
|
||||
v-model="formData.achievement5"
|
||||
outlined
|
||||
readonly
|
||||
|
|
@ -591,7 +615,6 @@ function filterOptionFn(val: string, update: Function) {
|
|||
</div>
|
||||
<div class="col-8">
|
||||
<q-input
|
||||
class="inputgreen"
|
||||
v-model="formData.achievement0"
|
||||
outlined
|
||||
readonly
|
||||
|
|
@ -606,7 +629,10 @@ function filterOptionFn(val: string, update: Function) {
|
|||
</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 }}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue