ประเมินเชี่ยวชาญ
This commit is contained in:
setthawutttty
parent
08e5d2b1e1
commit
659e508a92
2 changed files with 223 additions and 146 deletions
|
|
@ -1,7 +1,13 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, reactive } from "vue";
|
||||
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>({
|
||||
subject: "",
|
||||
author: "",
|
||||
|
|
@ -13,8 +19,25 @@ const formData = reactive<any>({
|
|||
|
||||
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 = [
|
||||
{
|
||||
{
|
||||
id: "file1",
|
||||
fileName: "แบบพิจารณาคุณสมบัติบุคคล",
|
||||
pathName: "1-แบบพิจารณาคุณสมบัติบุคคล",
|
||||
|
|
@ -48,7 +71,6 @@ const files = [
|
|||
},
|
||||
];
|
||||
|
||||
|
||||
/**
|
||||
* function ดาวน์โหลดไฟล์
|
||||
* @param name ชื้อไฟล์
|
||||
|
|
@ -69,151 +91,195 @@ async function downloadFile(name: string) {
|
|||
// });
|
||||
}
|
||||
|
||||
function onCilckSave() {
|
||||
alert("save demo");
|
||||
function onSubmit() {
|
||||
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>
|
||||
|
||||
<template>
|
||||
<div class="col-12 row justify-center">
|
||||
<div class="col-xs-12 col-sm-12 col-md-11">
|
||||
<div class="toptitle text-white col-12 row items-center">
|
||||
<q-btn
|
||||
icon="mdi-arrow-left"
|
||||
unelevated
|
||||
round
|
||||
dense
|
||||
flat
|
||||
color="primary"
|
||||
class="q-mr-sm"
|
||||
@click="router.go(-1)"
|
||||
/>
|
||||
<div>ประเมินเชี่ยวชาญ</div>
|
||||
<form @submit.prevent="validateForm">
|
||||
<div class="col-12 row justify-center">
|
||||
<div class="col-xs-12 col-sm-12 col-md-11">
|
||||
<div class="toptitle text-white col-12 row items-center">
|
||||
<q-btn
|
||||
icon="mdi-arrow-left"
|
||||
unelevated
|
||||
round
|
||||
dense
|
||||
flat
|
||||
color="primary"
|
||||
class="q-mr-sm"
|
||||
@click="router.go(-1)"
|
||||
/>
|
||||
<div>ประเมินเชี่ยวชาญ</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-12 col-sm-12 col-md-11 row q-col-gutter-md">
|
||||
<div class="col-12 row">
|
||||
<q-card bordered class="col-12 row caedNone q-pa-md q-col-gutter-y-md">
|
||||
<div class="col-12">
|
||||
<q-card bordered class="cardSp1 col-12">
|
||||
<div class="text-weight-medium bg-grey-1 col-12 q-py-sm q-px-md">
|
||||
ผลงาน
|
||||
</div>
|
||||
<div class="col-12"><q-separator /></div>
|
||||
<div class="col-12 q-pa-sm">
|
||||
<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 class="col-xs-12 col-sm-12 col-md-11 row q-col-gutter-md">
|
||||
<div class="col-12 row">
|
||||
<q-card
|
||||
bordered
|
||||
class="col-12 row caedNone q-pa-md q-col-gutter-y-md"
|
||||
>
|
||||
<div class="col-12">
|
||||
<q-card bordered class="cardSp1 col-12">
|
||||
<div
|
||||
class="text-weight-medium bg-grey-1 col-12 q-py-sm q-px-md"
|
||||
>
|
||||
ผลงาน
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
<div class="col-12"><q-separator /></div>
|
||||
<div class="col-12 q-pa-sm">
|
||||
<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">
|
||||
<q-card bordered class="cardSp1 col-12">
|
||||
<div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
|
||||
เลือกผู้เซ็นเอกสาร
|
||||
</div>
|
||||
<div class="col-12"><q-separator /></div>
|
||||
<div class="col-12 q-pa-sm">
|
||||
<div class="row q-col-gutter-sm">
|
||||
<div class="col-xs-12 col-sm-12 row">
|
||||
<div class="text-weight-medium q-pt-xs q-pl-sm">
|
||||
ผู้บังคับบัญชาชั้นต้น
|
||||
<!-- เลือกผู้เซ็นเอกสาร -->
|
||||
<div class="col-12">
|
||||
<q-card bordered class="cardSp1 col-12">
|
||||
<div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
|
||||
เลือกผู้เซ็นเอกสาร
|
||||
</div>
|
||||
<div class="col-12"><q-separator /></div>
|
||||
<div class="col-12 q-pa-sm">
|
||||
<div class="row q-col-gutter-sm">
|
||||
<div class="col-xs-12 col-sm-12 row">
|
||||
<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 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 class="row q-col-gutter-sm col-12">
|
||||
<div class="col-xs-12 col-sm-12 row">
|
||||
<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>
|
||||
<div class="row q-col-gutter-sm col-12">
|
||||
<div class="col-xs-12 col-sm-12 row">
|
||||
<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>
|
||||
</q-card>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<q-card bordered class="cardSp1 col-12">
|
||||
<div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
|
||||
ดาวน์โหลดเอกสาร
|
||||
</div>
|
||||
<div class="col-12"><q-separator /></div>
|
||||
<div class="col-12">
|
||||
<q-card bordered class="cardSp1 col-12">
|
||||
<div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
|
||||
ดาวน์โหลดเอกสาร
|
||||
</div>
|
||||
<div class="col-12"><q-separator /></div>
|
||||
|
||||
<q-list
|
||||
v-for="file in files"
|
||||
|
|
@ -244,19 +310,19 @@ function onCilckSave() {
|
|||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
|
||||
</q-card>
|
||||
<div class="q-pt-sm q-gutter-sm" align="right">
|
||||
<q-btn
|
||||
unelevated
|
||||
label="บันทึกข้อมูล"
|
||||
color="public"
|
||||
@click="onCilckSave()"
|
||||
/>
|
||||
</q-card>
|
||||
<div class="q-pt-sm q-gutter-sm" align="right">
|
||||
<q-btn
|
||||
type="submit"
|
||||
unelevated
|
||||
label="บันทึกข้อมูล"
|
||||
color="public"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -93,6 +93,16 @@ interface ListMenu {
|
|||
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 {
|
||||
PersonInformation,
|
||||
FormCommand,
|
||||
|
|
@ -101,4 +111,5 @@ export type {
|
|||
EducationForm,
|
||||
CertificatesForm,
|
||||
ListMenu,
|
||||
FormRef
|
||||
};
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue