hrms-bangkok/hrms-user
7
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

แบบประเมิน => form งานที่ได้รับมอบหมายพิเศษ

Browse source
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490 2024-04-23 11:04:33 +07:00
parent c2bf98e053
commit e8785cf385
2 changed files with 240 additions and 92 deletions
Download patch file Download diff file Expand all files Collapse all files

325
src/modules/08_KPI/components/Tab/Dialog/03_Dialog.vue
View file

@ -1,30 +1,38 @@
<script setup lang="ts">
divdivdiv<script setup lang="ts">
import { ref, reactive } from "vue";
import DialogHeader from "@/components/DialogHeader.vue";
import type { FormDataAssigned } from '@/modules/08_KPI/interface/request/index'
import type { FormDataAssigned } from "@/modules/08_KPI/interface/request/index";
const modal = defineModel<boolean>("modal", { required: true });
const formData = reactive<FormDataAssigned>({
indicator:'',//ชื่อตัวชี้วัด
target:'',//ค่าเป้าหมาย
unit:'',//หน่วยนับ
weigth:'',//น้ำหนัก (ร้อยละ)
definition:'',//นิยามหรือความหมายของตัวชี้วัด
})
including: "", //รหัสตัวชี้วัด
indicator: "", //ชื่อตัวชี้วัด
target: "", //ค่าเป้าหมาย
unit: "", //หน่วยนับ
weigth: "", //น้ำหนัก (ร้อยละ)
definition: "", //นิยามหรือความหมายของตัวชี้วัด
formula: "", //สูตรคำนวณ
achievement1: "", // ผลสำเร็จของงาน1
achievement2: "", // ผลสำเร็จของงาน2
achievement3: "", // ผลสำเร็จของงาน3
achievement4: "", // ผลสำเร็จของงาน4
achievement5: "", // ผลสำเร็จของงาน5
});
/** ปิด dialog */
function closeDialog() {
modal.value = false;
formData.indicator = ''
formData.target = ''
formData.unit = ''
formData.weigth = ''
formData.definition = ''
}
/** เรียกใช้ class */
function getclass() {
return "inputgreen";
formData.including = "";
formData.indicator = "";
formData.target = "";
formData.unit = "";
formData.achievement1 = "";
formData.achievement2 = "";
formData.achievement3 = "";
formData.achievement4 = "";
formData.achievement5 = "";
formData.weigth = "";
formData.definition = "";
}
function onSubmit() {}
@ -33,83 +41,216 @@ function onSubmit() {}
<q-dialog v-model="modal" persistent>
<q-card class="col-12" style="width: 50%">
<q-form greedy @submit.prevent @validation-success="onSubmit">
<DialogHeader
:tittle="`เพิ่มตัวชี้วัดที่ได้รับมอบหมาย`"
:close="closeDialog"
/>
<q-separator />
<DialogHeader
:tittle="`เพิ่มตัวชี้วัดที่ได้รับมอบหมาย`"
:close="closeDialog"
/>
<q-separator />
<q-card-section >
<div class="row q-col-gutter-sm">
<div class="col-12">
<q-input
v-model="formData.indicator"
label="ชื่อตัวชี้วัด"
outlined
dense
:rules="[(val:string) => !!val || `${'กรุณากรอกชื่อตัวชี้วัด'}`,]"
hide-bottom-space
:class="getclass()"
/>
<q-card-section>
<div class="row q-col-gutter-sm">
<div class="col-2">
<q-input
outlined
v-model="formData.including"
label="รหัสตัวชี้วัด"
bg-color="white"
dense
class="inputgreen"
:rules="[(val) => !!val || `${'กรุณากรอกรหัสตัวชี้วัด'}`]"
hide-bottom-space
/>
</div>
<div class="col-10">
<q-input
v-model="formData.indicator"
label="ชื่อตัวชี้วัด"
outlined
dense
:rules="[(val:string) => !!val || `${'กรุณากรอกชื่อตัวชี้วัด'}`,]"
hide-bottom-space
class="inputgreen"
/>
</div>
<div class="col-4">
<q-input
v-model="formData.target"
label="ค่าเป้าหมาย"
outlined
dense
:rules="[(val:string) => !!val || `${'กรุณากรอกค่าเป้าหมาย'}`,]"
hide-bottom-space
class="inputgreen"
/>
</div>
<div class="col-4">
<q-input
v-model="formData.unit"
label="หน่วยนับ"
outlined
dense
:rules="[(val:string) => !!val || `${'กรุณากรอกหน่วยนับ'}`,]"
hide-bottom-space
class="inputgreen"
mask="#"
reverse-fill-mask
/>
</div>
<div class="col-4">
<q-input
v-model="formData.weigth"
label="น้ำหนัก (ร้อยละ)"
outlined
dense
:rules="[(val:string) => !!val || `${'กรุณากรอกน้ำหนัก (ร้อยละ)'}`,]"
hide-bottom-space
class="inputgreen"
mask="#"
reverse-fill-mask
/>
</div>
<div class="col-12">
<q-card bordered>
<q-card>
<q-card-actions class="bg-grey-3 row">
<div class="col-4 flex justify-center items-center">
<div>ระดับคะแนน</div>
</div>
<div class="col-8 q-px-xl">ผลสำเร็จของงาน</div>
</q-card-actions>
</q-card>
<div class="row">
<div class="col-4 flex justify-center items-center">
<div>5</div>
</div>
<div class="col-8 q-pa-sm">
<q-input
outlined
v-model="formData.achievement5"
label="กรอกผลสำเร็จของงาน"
bg-color="white"
dense
class="inputgreen"
:rules="[
(val) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`,
]"
hide-bottom-space
/>
</div>
</div>
<div class="row">
<div class="col-4 flex justify-center items-center">
<div>4</div>
</div>
<div class="col-8 q-pa-sm">
<q-input
outlined
v-model="formData.achievement4"
label="กรอกผลสำเร็จของงาน"
bg-color="white"
dense
class="inputgreen"
:rules="[
(val) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`,
]"
hide-bottom-space
/>
</div>
</div>
<div class="row">
<div class="col-4 flex justify-center items-center">
<div>3</div>
</div>
<div class="col-8 q-pa-sm">
<q-input
outlined
v-model="formData.achievement3"
label="กรอกผลสำเร็จของงาน"
bg-color="white"
dense
class="inputgreen"
:rules="[
(val) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`,
]"
hide-bottom-space
/>
</div>
</div>
<div class="row">
<div class="col-4 flex justify-center items-center">
<div>2</div>
</div>
<div class="col-8 q-pa-sm">
<q-input
outlined
v-model="formData.achievement2"
label="กรอกผลสำเร็จของงาน"
bg-color="white"
dense
class="inputgreen"
:rules="[
(val) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`,
]"
hide-bottom-space
/>
</div>
</div>
<div class="row">
<div class="col-4 flex justify-center items-center">
<div>1</div>
</div>
<div class="col-8 q-pa-sm">
<q-input
outlined
v-model="formData.achievement1"
label="กรอกผลสำเร็จของงาน"
bg-color="white"
dense
class="inputgreen"
:rules="[
(val) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`,
]"
hide-bottom-space
/>
</div>
</div>
</q-card>
</div>
<div class="col-12">
<q-input
v-model="formData.definition"
label="นิยามหรือความหมายของตัวชี้วัด"
outlined
dense
type="textarea"
:rules="[(val:string) => !!val || `${'กรุณากรอกนิยามหรือความหมายของตัวชี้วัด'}`,]"
hide-bottom-space
class="inputgreen"
/>
</div>
<div class="col-12">
<q-input
outlined
v-model="formData.formula"
label="สูตรคำนวณ"
bg-color="white"
type="textarea"
dense
class="inputgreen"
:rules="[(val) => !!val || `${'กรุณากรอกสูตรคำนวณ'}`]"
hide-bottom-space
/>
</div>
</div>
<div class="col-4">
<q-input
v-model="formData.target"
label="ค่าเป้าหมาย"
outlined
dense
:rules="[(val:string) => !!val || `${'กรุณากรอกค่าเป้าหมาย'}`,]"
hide-bottom-space
:class="getclass()"
/>
</div>
<div class="col-4">
<q-input
v-model="formData.unit"
label="หน่วยนับ"
outlined
dense
:rules="[(val:string) => !!val || `${'กรุณากรอกหน่วยนับ'}`,]"
hide-bottom-space
:class="getclass()"
/>
</div>
<div class="col-4">
<q-input
v-model="formData.weigth"
label="น้ำหนัก (ร้อยละ)"
outlined
dense
:rules="[(val:string) => !!val || `${'กรุณากรอกน้ำหนัก (ร้อยละ)'}`,]"
hide-bottom-space
:class="getclass()"
/>
</div>
<div class="col-12">
<q-input
v-model="formData.definition"
label="นิยามหรือความหมายของตัวชี้วัด"
outlined
dense
type="textarea"
:rules="[(val:string) => !!val || `${'กรุณากรอกนิยามหรือความหมายของตัวชี้วัด'}`,]"
hide-bottom-space
:class="getclass()"
/>
</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-form>
<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>

7
src/modules/08_KPI/interface/request/index.ts
View file

@ -12,10 +12,17 @@ interface FormProfile {
}
interface FormDataAssigned {
including: string;
indicator: string;
target: string;
unit: string;
weigth: string;
achievement1: string;
achievement2: string;
achievement3: string;
achievement4: string;
achievement5: string;
definition: string;
formula: string;
}
export type { FormProfile, FormDataAssigned };