145 lines
5.6 KiB
Vue
145 lines
5.6 KiB
Vue
<script setup lang="ts">
|
|
import DialogHeader from "@/components/DialogHeader.vue";
|
|
import { ref, reactive } from "vue";
|
|
|
|
const modal = defineModel<boolean>("modal", { required: true });
|
|
const isEdit = defineModel<boolean>("isEdit", { required: true });
|
|
|
|
const formData = reactive({
|
|
name: "",
|
|
group: [],
|
|
target: "",
|
|
isDevelopment70: false,
|
|
isDevelopment20: false,
|
|
isDevelopment10: false,
|
|
achievement10: "มีผลการพัฒนาและมีการดำเนินการตามเป้าหมายการนำไปพัฒนางาน",
|
|
achievement5: "มีผลการพัฒนาแต่ยังไม่ได้ดำเนินการตามเป้าหมายการนำไปพัฒนางาน",
|
|
achievement0: "ไม่ได้ดำเนินการพัฒนา",
|
|
});
|
|
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 = "ไม่ได้ดำเนินการพัฒนา"
|
|
}
|
|
</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>
|
|
</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-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>
|
|
</q-dialog>
|
|
</template>
|