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>
|
||||||
|
|
@ -2,7 +2,7 @@ const evaluateMain = () =>
|
||||||
import("@/modules/06_evaluate/views/EvaluateMain.vue");
|
import("@/modules/06_evaluate/views/EvaluateMain.vue");
|
||||||
const evaluateStep = () =>
|
const evaluateStep = () =>
|
||||||
import("@/modules/06_evaluate/components/EvaluateStepMain.vue");
|
import("@/modules/06_evaluate/components/EvaluateStepMain.vue");
|
||||||
|
const expertPage = () => import('@/modules/06_evaluate/components/ExpertPage.vue')
|
||||||
export default [
|
export default [
|
||||||
{
|
{
|
||||||
path: "/evaluate",
|
path: "/evaluate",
|
||||||
|
|
@ -32,4 +32,13 @@ export default [
|
||||||
Key: [7],
|
Key: [7],
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: "/evaluate/expert",
|
||||||
|
name: "evaluate-expert",
|
||||||
|
component: expertPage,
|
||||||
|
meta: {
|
||||||
|
Auth: true,
|
||||||
|
Key: [7],
|
||||||
|
},
|
||||||
|
},
|
||||||
];
|
];
|
||||||
|
|
|
||||||
|
|
@ -48,6 +48,10 @@ function onclickAddEvaluate(data: ListMenu) {
|
||||||
menu.value = data;
|
menu.value = data;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function openExpert(){
|
||||||
|
router.push('/evaluate/expert')
|
||||||
|
}
|
||||||
|
|
||||||
/** ตัวแปร Paging*/
|
/** ตัวแปร Paging*/
|
||||||
const page = ref<number>(1);
|
const page = ref<number>(1);
|
||||||
const pageSize = ref<number>(25);
|
const pageSize = ref<number>(25);
|
||||||
|
|
@ -192,6 +196,10 @@ watch(
|
||||||
<q-item-section>{{ item.label }}</q-item-section>
|
<q-item-section>{{ item.label }}</q-item-section>
|
||||||
<q-tooltip>{{ item.label }}</q-tooltip>
|
<q-tooltip>{{ item.label }}</q-tooltip>
|
||||||
</q-item>
|
</q-item>
|
||||||
|
<q-item clickable v-close-popup @click.stop="openExpert">
|
||||||
|
<q-item-section>ประเมินเชี่ยวชาญ</q-item-section>
|
||||||
|
<q-tooltip>ประเมินเชี่ยวชาญ</q-tooltip>
|
||||||
|
</q-item>
|
||||||
</q-list>
|
</q-list>
|
||||||
</q-menu>
|
</q-menu>
|
||||||
<q-tooltip>เพิ่มการประเมินบุคคล</q-tooltip>
|
<q-tooltip>เพิ่มการประเมินบุคคล</q-tooltip>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue