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

ประเมินเชี่ยวชาญ

Browse source
This commit is contained in:
setthawutttty 2024-02-07 11:31:36 +07:00
parent 08e5d2b1e1
commit 659e508a92
2 changed files with 223 additions and 146 deletions
Download patch file Download diff file Expand all files Collapse all files

358
src/modules/06_evaluate/components/ExpertPage.vue
View file

@ -1,7 +1,13 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, reactive } from "vue"; import { ref, reactive } from "vue";
import { useRouter } from "vue-router"; import { useRouter } from "vue-router";
import { useCounterMixin } from "@/stores/mixin";
import { useQuasar } from "quasar";
import type { FormRef } from "@/modules/06_evaluate/interface/evalute";
const $q = useQuasar();
const mixin = useCounterMixin();
const { dialogConfirm, messageError, showLoader, hideLoader } = mixin;
const formData = reactive<any>({ const formData = reactive<any>({
subject: "", subject: "",
author: "", author: "",
@ -13,8 +19,25 @@ const formData = reactive<any>({
const router = useRouter(); const router = useRouter();
const subjectRef = ref<Object | null>(null);
const authorRef = ref<Object | null>(null);
const commanderFullnameRef = ref<Object | null>(null);
const commanderPositionRef = ref<Object | null>(null);
const commanderAboveFullnameRef = ref<Object | null>(null);
const commanderAbovePositionRef = ref<Object | null>(null);
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
const objectRef: FormRef = {
subject: subjectRef,
author: authorRef,
commanderFullname: commanderFullnameRef,
commanderPosition: commanderPositionRef,
commanderAboveFullname: commanderAboveFullnameRef,
commanderAbovePosition: commanderAbovePositionRef,
};
const files = [ const files = [
{ {
id: "file1", id: "file1",
fileName: "แบบพิจารณาคุณสมบัติบุคคล", fileName: "แบบพิจารณาคุณสมบัติบุคคล",
pathName: "1-แบบพิจารณาคุณสมบัติบุคคล", pathName: "1-แบบพิจารณาคุณสมบัติบุคคล",
@ -48,7 +71,6 @@ const files = [
}, },
]; ];
/** /**
* function ดาวน์โหลดไฟล์ * function ดาวน์โหลดไฟล์
* @param name ชื้อไฟล์ * @param name ชื้อไฟล์
@ -69,151 +91,195 @@ async function downloadFile(name: string) {
// }); // });
} }
function onCilckSave() { function onSubmit() {
alert("save demo"); dialogConfirm($q, () => {
console.log(formData);
// showLoader();
// http
// .post(config.API.createOrganization, formData)
// .then((res) => {
// status.value = true;
// store.typeOrganizational = "draft";
// store.draftId = res.data.result.id;
// success($q, "บันทึกข้อมูลสำเร็จ");
// // props.fetchActive?.();
// })
// .catch((err) => {
// messageError($q, err);
// })
// .finally(async () => {
// modal.value = await false;
// await close();
// await hideLoader();
// });
});
}
/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
function validateForm() {
const hasError = [];
for (const key in objectRef) {
if (Object.prototype.hasOwnProperty.call(objectRef, key)) {
const property = objectRef[key];
if (property.value && typeof property.value.validate === "function") {
const isValid = property.value.validate();
hasError.push(isValid);
}
}
}
if (hasError.every((result) => result === true)) {
onSubmit();
} else {
}
} }
</script> </script>
<template> <template>
<div class="col-12 row justify-center"> <form @submit.prevent="validateForm">
<div class="col-xs-12 col-sm-12 col-md-11"> <div class="col-12 row justify-center">
<div class="toptitle text-white col-12 row items-center"> <div class="col-xs-12 col-sm-12 col-md-11">
<q-btn <div class="toptitle text-white col-12 row items-center">
icon="mdi-arrow-left" <q-btn
unelevated icon="mdi-arrow-left"
round unelevated
dense round
flat dense
color="primary" flat
class="q-mr-sm" color="primary"
@click="router.go(-1)" class="q-mr-sm"
/> @click="router.go(-1)"
<div>ประเมินเชี่ยวชาญ</div> />
<div>ประเมินเชี่ยวชาญ</div>
</div>
</div> </div>
</div>
<div class="col-xs-12 col-sm-12 col-md-11 row q-col-gutter-md"> <div class="col-xs-12 col-sm-12 col-md-11 row q-col-gutter-md">
<div class="col-12 row"> <div class="col-12 row">
<q-card bordered class="col-12 row caedNone q-pa-md q-col-gutter-y-md"> <q-card
<div class="col-12"> bordered
<q-card bordered class="cardSp1 col-12"> class="col-12 row caedNone q-pa-md q-col-gutter-y-md"
<div class="text-weight-medium bg-grey-1 col-12 q-py-sm q-px-md"> >
ผลงาน <div class="col-12">
</div> <q-card bordered class="cardSp1 col-12">
<div class="col-12"><q-separator /></div> <div
<div class="col-12 q-pa-sm"> class="text-weight-medium bg-grey-1 col-12 q-py-sm q-px-md"
<div class="row q-col-gutter-sm"> >
<q-input ผลงาน
ref="performanceRef"
dense
class="col-xs-12 col-sm-6"
outlined
label="ชื่อผลงาน"
v-model="formData.subject"
:rules="[(val) => !!val || `${'กรุณากรอกชื่อผลงาน'}`]"
lazy-rules
hide-bottom-space
/>
<q-input
ref="performanceOwnerRef"
class="col-xs-12 col-sm-6"
dense
outlined
v-model="formData.author"
label="เจ้าของผลงาน"
:rules="[(val) => !!val || `${'กรุณากรอกเจ้าของผลงาน'}`]"
lazy-rules
hide-bottom-space
/>
</div> </div>
</div> <div class="col-12"><q-separator /></div>
</q-card> <div class="col-12 q-pa-sm">
</div> <div class="row q-col-gutter-sm">
<q-input
ref="subjectRef"
dense
class="col-xs-12 col-sm-6"
outlined
label="ชื่อผลงาน"
v-model="formData.subject"
:rules="[(val) => !!val || `${'กรุณากรอกชื่อผลงาน'}`]"
lazy-rules
hide-bottom-space
/>
<q-input
ref="authorRef"
class="col-xs-12 col-sm-6"
dense
outlined
v-model="formData.author"
label="เจ้าของผลงาน"
:rules="[(val) => !!val || `${'กรุณากรอกเจ้าของผลงาน'}`]"
lazy-rules
hide-bottom-space
/>
</div>
</div>
</q-card>
</div>
<!-- เลือกผู้เซ็นเอกสาร --> <!-- เลือกผู้เซ็นเอกสาร -->
<div class="col-12"> <div class="col-12">
<q-card bordered class="cardSp1 col-12"> <q-card bordered class="cardSp1 col-12">
<div class="text-weight-medium bg-grey-1 q-py-sm q-px-md"> <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
เลือกผู้เซ็นเอกสาร เลือกผู้เซ็นเอกสาร
</div> </div>
<div class="col-12"><q-separator /></div> <div class="col-12"><q-separator /></div>
<div class="col-12 q-pa-sm"> <div class="col-12 q-pa-sm">
<div class="row q-col-gutter-sm"> <div class="row q-col-gutter-sm">
<div class="col-xs-12 col-sm-12 row"> <div class="col-xs-12 col-sm-12 row">
<div class="text-weight-medium q-pt-xs q-pl-sm"> <div class="text-weight-medium q-pt-xs q-pl-sm">
ผู้บังคับบัญชาชั้นต้น ผู้บังคับบัญชาชั้นต้น
</div>
<div class="row col-12 q-col-gutter-sm q-pa-sm">
<q-input
ref="commanderFullnameRef"
dense
class="col-xs-12 col-sm-6"
outlined
label="ชื่อ-นามสกุล"
v-model="formData.commanderFullname"
:rules="[
(val) => !!val || `${'กรุณากรอกชื่อ-นามสกุล'}`,
]"
lazy-rules
hide-bottom-space
/>
<q-input
ref="commanderPositionRef"
class="col-xs-12 col-sm-6"
dense
outlined
v-model="formData.commanderPosition"
label="ตำแหน่ง"
:rules="[(val) => !!val || `${'กรุณากรอกตำแหน่ง'}`]"
lazy-rules
hide-bottom-space
/>
</div>
</div> </div>
<div class="row col-12 q-col-gutter-sm q-pa-sm"> </div>
<q-input <div class="row q-col-gutter-sm col-12">
ref="commanderFullnameRef" <div class="col-xs-12 col-sm-12 row">
dense <div class="text-weight-medium q-pl-sm q-pt-sm">
class="col-xs-12 col-sm-6" ผู้บังคับบัญชาเหนือขึ้นไป 1 ระดับ
outlined </div>
label="ชื่อ-นามสกุล" <div class="row col-12 q-col-gutter-md q-pa-sm">
v-model="formData.commanderFullname" <q-input
:rules="[ ref="commanderAboveFullnameRef"
(val) => !!val || `${'กรุณากรอกชื่อ-นามสกุล'}`, dense
]" class="col-xs-12 col-sm-6"
lazy-rules outlined
hide-bottom-space v-model="formData.commanderAboveFullname"
/> label="ชื่อ-นามสกุล"
<q-input :rules="[
ref="commanderPositionRef" (val) => !!val || `${'กรุณากรอกชื่อ-นามสกุล'}`,
class="col-xs-12 col-sm-6" ]"
dense lazy-rules
outlined hide-bottom-space
v-model="formData.commanderPosition" />
label="ตำแหน่ง" <q-input
:rules="[(val) => !!val || `${'กรุณากรอกตำแหน่ง'}`]" ref="commanderAbovePositionRef"
lazy-rules class="col-xs-12 col-sm-6"
hide-bottom-space dense
/> outlined
v-model="formData.commanderAbovePosition"
label="ตำแหน่ง"
:rules="[(val) => !!val || `${'กรุณากรอกตำแหน่ง'}`]"
lazy-rules
hide-bottom-space
/>
</div>
</div> </div>
</div> </div>
</div> </div>
<div class="row q-col-gutter-sm col-12"> </q-card>
<div class="col-xs-12 col-sm-12 row"> </div>
<div class="text-weight-medium q-pl-sm q-pt-sm">
ผู้บังคับบัญชาเหนือขึ้นไป 1 ระดับ
</div>
<div class="row col-12 q-col-gutter-md q-pa-sm">
<q-input
ref="commanderAboveFullnameRef"
dense
class="col-xs-12 col-sm-6"
outlined
v-model="formData.commanderAboveFullname"
label="ชื่อ-นามสกุล"
:rules="[
(val) => !!val || `${'กรุณากรอกชื่อ-นามสกุล'}`,
]"
lazy-rules
hide-bottom-space
/>
<q-input
ref="commanderAbovePositionRef"
class="col-xs-12 col-sm-6"
dense
outlined
v-model="formData.commanderAbovePosition"
label="ตำแหน่ง"
:rules="[(val) => !!val || `${'กรุณากรอกตำแหน่ง'}`]"
lazy-rules
hide-bottom-space
/>
</div>
</div>
</div>
</div>
</q-card>
</div>
<div class="col-12"> <div class="col-12">
<q-card bordered class="cardSp1 col-12"> <q-card bordered class="cardSp1 col-12">
<div class="text-weight-medium bg-grey-1 q-py-sm q-px-md"> <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
ดาวน์โหลดเอกสาร ดาวน์โหลดเอกสาร
</div> </div>
<div class="col-12"><q-separator /></div> <div class="col-12"><q-separator /></div>
<q-list <q-list
v-for="file in files" v-for="file in files"
@ -244,19 +310,19 @@ function onCilckSave() {
</q-item-section> </q-item-section>
</q-item> </q-item>
</q-list> </q-list>
</q-card>
</q-card> <div class="q-pt-sm q-gutter-sm" align="right">
<div class="q-pt-sm q-gutter-sm" align="right"> <q-btn
<q-btn type="submit"
unelevated unelevated
label="บันทึกข้อมูล" label="บันทึกข้อมูล"
color="public" color="public"
@click="onCilckSave()" />
/> </div>
</div> </div>
</div> </q-card>
</q-card> </div>
</div> </div>
</div> </div>
</div> </form>
</template> </template>

11
src/modules/06_evaluate/interface/evalute.ts
View file

@ -93,6 +93,16 @@ interface ListMenu {
label: string; label: string;
} }
interface FormRef{
subject: object | null;
author: object | null;
commanderFullname: object | null;
commanderPosition: object | null;
commanderAboveFullname: object | null;
commanderAbovePosition: object | null;
[key: string]: any;
}
export type { export type {
PersonInformation, PersonInformation,
FormCommand, FormCommand,
@ -101,4 +111,5 @@ export type {
EducationForm, EducationForm,
CertificatesForm, CertificatesForm,
ListMenu, ListMenu,
FormRef
}; };