UI ประเมินเชี่ยวชาญ
This commit is contained in:
setthawutttty
parent
5e5eab0398
commit
08e5d2b1e1
3 changed files with 280 additions and 1 deletions
262
src/modules/06_evaluate/components/ExpertPage.vue
Normal file
262
src/modules/06_evaluate/components/ExpertPage.vue
Normal file
|
|
@ -0,0 +1,262 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, reactive } from "vue";
|
||||
import { useRouter } from "vue-router";
|
||||
|
||||
const formData = reactive<any>({
|
||||
subject: "",
|
||||
author: "",
|
||||
commanderFullname: "",
|
||||
commanderPosition: "",
|
||||
commanderAboveFullname: "",
|
||||
commanderAbovePosition: "",
|
||||
});
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
const files = [
|
||||
{
|
||||
id: "file1",
|
||||
fileName: "แบบพิจารณาคุณสมบัติบุคคล",
|
||||
pathName: "1-แบบพิจารณาคุณสมบัติบุคคล",
|
||||
},
|
||||
{
|
||||
id: "file2",
|
||||
fileName: "แบบแสดงรายละเอียดการเสนอผลงาน",
|
||||
pathName: "2-แบบแสดงรายละเอียดการเสนอผลงาน",
|
||||
},
|
||||
{
|
||||
id: "file3",
|
||||
fileName:
|
||||
"แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล (เอกสารแบบ ก)",
|
||||
pathName:
|
||||
"3-แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล (เอกสารแบบ ก)",
|
||||
},
|
||||
{
|
||||
id: "file4",
|
||||
fileName: "แบบประเมินคุณลักษณะบุคคล",
|
||||
pathName: "4-แบบประเมินคุณลักษณะบุคคล",
|
||||
},
|
||||
{
|
||||
id: "file5",
|
||||
fileName: "แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)",
|
||||
pathName: "5-แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)",
|
||||
},
|
||||
{
|
||||
id: "file6",
|
||||
fileName: "ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)",
|
||||
pathName: "6-ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)",
|
||||
},
|
||||
];
|
||||
|
||||
|
||||
/**
|
||||
* function ดาวน์โหลดไฟล์
|
||||
* @param name ชื้อไฟล์
|
||||
*/
|
||||
async function downloadFile(name: string) {
|
||||
// showLoader();
|
||||
// await http
|
||||
// .get(config.API.evaluationFilebyId("เล่ม 1", id.value, name))
|
||||
// .then((res) => {
|
||||
// const link = res.data.downloadUrl;
|
||||
// const type = res.data.fileType;
|
||||
// const fileName = res.data.fileName;
|
||||
// getPDF(link, type, fileName);
|
||||
// })
|
||||
// .catch((e) => {})
|
||||
// .finally(() => {
|
||||
// hideLoader();
|
||||
// });
|
||||
}
|
||||
|
||||
function onCilckSave() {
|
||||
alert("save demo");
|
||||
}
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
<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 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>
|
||||
|
||||
<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"
|
||||
:key="file.id"
|
||||
class="full-width"
|
||||
bordered
|
||||
>
|
||||
<q-item clickable v-ripple>
|
||||
<q-item-section class="text-grey-9">{{
|
||||
file.fileName
|
||||
}}</q-item-section>
|
||||
<q-item-section avatar>
|
||||
<div class="row">
|
||||
<div>
|
||||
<q-btn
|
||||
dense
|
||||
flat
|
||||
round
|
||||
size="12px"
|
||||
color="blue"
|
||||
icon="mdi-download"
|
||||
@click="downloadFile(file.pathName)"
|
||||
>
|
||||
<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
</div>
|
||||
</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()"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
Loading…
Add table
Add a link
Reference in a new issue