เพิ่มการพัฒนาตนเอง

This commit is contained in:
STW_TTTY\stwtt 2024-05-09 13:02:04 +07:00
parent 69f09ac698
commit 566915f52e

View file

@ -1,7 +1,19 @@
<script setup lang="ts">
import DialogHeader from "@/components/DialogHeader.vue";
import { ref, reactive } from "vue";
import { useCounterMixin } from "@/stores/mixin";
import { useQuasar } from "quasar";
import http from "@/plugins/http";
import config from "@/app.config";
import { useRoute } from "vue-router";
const route = useRoute()
const idKpi = ref<string>(route.params.id.toLocaleString())
const $q = useQuasar();
const mixin = useCounterMixin();
const { showLoader, hideLoader, dialogConfirm, messageError } = mixin;
const modal = defineModel<boolean>("modal", { required: true });
const isEdit = defineModel<boolean>("isEdit", { required: true });
@ -20,126 +32,148 @@ function close() {
modal.value = false;
isEdit.value = false;
formData.name = ""
formData.group = []
formData.target = ""
formData.isDevelopment70 = false
formData.isDevelopment20 = false
formData.isDevelopment10 = false
formData.achievement10 = "มีผลการพัฒนาและมีการดำเนินการตามเป้าหมายการนำไปพัฒนางาน"
formData.achievement5 = "มีผลการพัฒนาแต่ยังไม่ได้ดำเนินการตามเป้าหมายการนำไปพัฒนางาน"
formData.achievement0 = "ไม่ได้ดำเนินการพัฒนา"
formData.name = "";
formData.group = [];
formData.target = "";
formData.isDevelopment70 = false;
formData.isDevelopment20 = false;
formData.isDevelopment10 = false;
formData.achievement10 =
"มีผลการพัฒนาและมีการดำเนินการตามเป้าหมายการนำไปพัฒนางาน";
formData.achievement5 =
"มีผลการพัฒนาแต่ยังไม่ได้ดำเนินการตามเป้าหมายการนำไปพัฒนางาน";
formData.achievement0 = "ไม่ได้ดำเนินการพัฒนา";
}
function onSubmit() {
dialogConfirm($q, () => {
const body = {
name: formData.name,
target: formData.target,
summary: 0,
achievement10: formData.achievement10,
achievement5: formData.achievement5,
achievement0: formData.achievement0,
isDevelopment70: formData.isDevelopment70,
isDevelopment20: formData.isDevelopment20,
isDevelopment10: formData.isDevelopment10,
kpiUserEvaluationId: idKpi.value,
};
http
});
}
</script>
<template>
<q-dialog persistent v-model="modal">
<q-card style="width: 80%">
<DialogHeader
:tittle="`${isEdit ? 'แก้ไข' : 'เพิ่ม'}การพัฒนาตนเอง`"
:close="close"
/>
<q-separator />
<q-card-section>
<div class="row q-col-gutter-sm">
<div class="col-12">
<q-input
v-model="formData.name"
outlined
dense
class="inputgreen"
label="ชื่อเรื่อง / เนื้อเรื่อง / หัวข้อการพัฒนา"
>
</q-input>
<q-form greedy @submit.prevent @validation-success="onSubmit">
<DialogHeader
:tittle="`${isEdit ? 'แก้ไข' : 'เพิ่ม'}การพัฒนาตนเอง`"
:close="close"
/>
<q-separator />
<q-card-section>
<div class="row q-col-gutter-sm">
<div class="col-12">
<q-input
v-model="formData.name"
outlined
dense
class="inputgreen"
label="ชื่อเรื่อง / เนื้อเรื่อง / หัวข้อการพัฒนา"
>
</q-input>
</div>
<div class="column">
<q-checkbox
v-model="formData.isDevelopment70"
label="70 การลงมือปฏิบัติ (โดยผู้บังคับบัญชามอบหมาย)"
/>
<q-checkbox
v-model="formData.isDevelopment20"
label="20 การเรียนรู้จากผู้อื่น (Coach/Mentor/Consulting)"
/>
<q-checkbox
v-model="formData.isDevelopment10"
label="10 การฝึกอบรมอื่นๆ"
/>
</div>
<div class="col-12">
<q-input
label="เป้าหมายการนำไปพัฒนางาน"
v-model="formData.target"
outlined
type="textarea"
dense
class="inputgreen"
></q-input>
</div>
<div class="col-12">
<q-card bordered>
<div class="bg-grey-2 row q-py-sm text-weight-bold col-12">
<div class="col-4 text-center">
<span>ระดบคะแนน</span>
</div>
<div class="col-8 text-start">
<span>เกณฑการประเม</span>
</div>
</div>
<div class="row q-pa-sm">
<div class="col-4 text-center self-start text-body1">
<span>10</span>
</div>
<div class="col-8">
<q-input
class="inputgreen"
v-model="formData.achievement10"
outlined
dense
label="เกณฑ์การประเมิน"
></q-input>
</div>
</div>
<q-separator />
<div class="row q-pa-sm bg-grey-2">
<div class="col-4 text-center self-start text-body1">
<span>5</span>
</div>
<div class="col-8">
<q-input
class="inputgreen"
v-model="formData.achievement5"
outlined
dense
label="เกณฑ์การประเมิน"
></q-input>
</div>
</div>
<q-separator />
<div class="row q-pa-sm">
<div class="col-4 text-center self-start text-body1">
<span>0</span>
</div>
<div class="col-8">
<q-input
class="inputgreen"
v-model="formData.achievement0"
outlined
dense
label="เกณฑ์การประเมิน"
></q-input>
</div>
</div>
</q-card>
</div>
</div>
<div class="column">
<q-checkbox
v-model="formData.isDevelopment70"
label="70 การลงมือปฏิบัติ (โดยผู้บังคับบัญชามอบหมาย)"
/>
<q-checkbox
v-model="formData.isDevelopment20"
label="20 การเรียนรู้จากผู้อื่น (Coach/Mentor/Consulting)"
/>
<q-checkbox
v-model="formData.isDevelopment10"
label="10 การฝึกอบรมอื่นๆ"
/>
</div>
<div class="col-12">
<q-input
label="เป้าหมายการนำไปพัฒนางาน"
v-model="formData.target"
outlined
type="textarea"
dense
class="inputgreen"
></q-input>
</div>
<div class="col-12">
<q-card bordered>
<div class="bg-grey-2 row q-py-sm text-weight-bold col-12">
<div class="col-4 text-center">
<span>ระดบคะแนน</span>
</div>
<div class="col-8 text-start">
<span>เกณฑการประเม</span>
</div>
</div>
<div class="row q-pa-sm">
<div class="col-4 text-center self-start text-body1">
<span>10</span>
</div>
<div class="col-8">
<q-input
class="inputgreen"
v-model="formData.achievement10"
outlined
dense
label="เกณฑ์การประเมิน"
></q-input>
</div>
</div>
<q-separator />
<div class="row q-pa-sm bg-grey-2">
<div class="col-4 text-center self-start text-body1">
<span>5</span>
</div>
<div class="col-8">
<q-input
class="inputgreen"
v-model="formData.achievement5"
outlined
dense
label="เกณฑ์การประเมิน"
></q-input>
</div>
</div>
<q-separator />
<div class="row q-pa-sm">
<div class="col-4 text-center self-start text-body1">
<span>0</span>
</div>
<div class="col-8">
<q-input
class="inputgreen"
v-model="formData.achievement0"
outlined
dense
label="เกณฑ์การประเมิน"
></q-input>
</div>
</div>
</q-card>
</div>
</div>
</q-card-section>
<q-separator />
</q-card-section>
<q-separator />
<q-card-actions align="right" class="bg-white text-teal">
<q-btn label="บันทึก" color="secondary" type="submit"
><q-tooltip>นทกขอม</q-tooltip></q-btn
>
</q-card-actions>
<q-card-actions align="right" class="bg-white text-teal">
<q-btn label="บันทึก" color="secondary" type="submit"
><q-tooltip>นทกขอม</q-tooltip></q-btn
>
</q-card-actions>
</q-form>
</q-card>
</q-dialog>
</template>