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

UI ประเมินผล

Browse source
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490 2023-12-13 15:24:59 +07:00
parent 24ec62633a
commit 7e99b5fc4b
19 changed files with 1328 additions and 47 deletions
Download patch file Download diff file Expand all files Collapse all files

56
src/modules/06_assess/componenst/step/step1.vue Normal file
View file

@ -0,0 +1,56 @@
<script setup lang="ts">
import { ref } from "vue";
const feature1 = ref<boolean>(false);
const feature2 = ref<boolean>(false);
const feature3 = ref<boolean>(false);
const feature4 = ref<boolean>(false);
const feature5 = ref<boolean>(false);
</script>
<template>
<q-list>
<q-item v-ripple>
<q-item-section avatar>
<q-checkbox keep-color color="primary" v-model="feature1" />
</q-item-section>
<q-item-section>
<q-item-label>ตรวจสอบคุณสมบัติ</q-item-label>
</q-item-section>
</q-item>
<q-item v-ripple>
<q-item-section avatar>
<q-checkbox keep-color color="primary" v-model="feature2" />
</q-item-section>
<q-item-section>
<q-item-label>ตรวจสอบคุณสมบัติ</q-item-label>
</q-item-section>
</q-item>
<q-item v-ripple>
<q-item-section avatar>
<q-checkbox keep-color color="primary" v-model="feature3" />
</q-item-section>
<q-item-section>
<q-item-label>ตรวจสอบคุณสมบัติ</q-item-label>
</q-item-section>
</q-item>
<q-item v-ripple>
<q-item-section avatar>
<q-checkbox keep-color color="primary" v-model="feature4" />
</q-item-section>
<q-item-section>
<q-item-label>ตรวจสอบคุณสมบัติ</q-item-label>
</q-item-section>
</q-item>
<q-item v-ripple>
<q-item-section avatar>
<q-checkbox keep-color color="primary" v-model="feature5" />
</q-item-section>
<q-item-section>
<q-item-label>ตรวจสอบคุณสมบัติ</q-item-label>
</q-item-section>
</q-item>
</q-list>
</template>
<style scoped></style>

483
src/modules/06_assess/componenst/step/step2.vue Normal file
View file

@ -0,0 +1,483 @@
<script setup lang="ts">
import { ref } from "vue";
const fileEvaluation1 = ref<any>();
const fileEvaluation2 = ref<any>();
const fileEvaluation3 = ref<any>();
const fileEvaluation4 = ref<any>();
const fileEvaluation5 = ref<any>();
const fileEvaluation6 = ref<any>();
const modalView = ref<boolean>(false);
const numOfPages = ref<number>(0);
const page = ref<number>(1);
const pdfSrc = ref<any>();
function onClickViewPDF(file: any) {
pdfSrc.value = file.webkitRelativePath;
modalView.value = true;
}
/** ไปหน้าต่อไปของรายงาน */
function nextPage() {
if (page.value < numOfPages.value) {
page.value++;
}
}
/** กลับหน้าก่อนหน้าของรายงาน */
function backPage() {
if (page.value !== 1) {
page.value--;
}
}
</script>
<template>
<div class="row q-col-gutter-md">
<!-- แบบพิจารณาคุณสมบัติบุคคล -->
<div class="col-6">
<q-card bordered style="border: 1px solid #d6dee1">
<div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
แบบพิจารณาคุณสมบัติบุคคล
</div>
<div class="col-12"><q-separator /></div>
<div class="row">
<div class="col-12 q-pa-sm">
<div class="row q-col-gutter-md col-12">
<div class="col-xs-12 col-sm-6 row">
<q-btn
class="col-12"
outline
icon="download"
label="ดาวน์โหลดต้นแบบ"
color="primary"
>
<q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
>
</div>
<div class="col-xs-12 col-sm-6 row">
<q-btn
v-if="fileEvaluation1"
class="col-12"
outline
icon="visibility"
label="ดูไฟล์เอกสาร"
color="primary"
@click="onClickViewPDF(fileEvaluation1)"
>
<q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
>
</div>
<div class="col-xs-12 col-sm-11 row">
<q-file
v-model="fileEvaluation1"
class="col-12"
outlined
dense
hide-bottom-space
lazy-rules
accept=".pdf"
>
<template v-slot:prepend>
<q-icon name="attach_file" />
</template>
</q-file>
</div>
<div class="col-1 self-center text-center">
<q-btn flat round dense color="primary" icon="mdi-upload"
><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
>
</div>
</div>
</div>
</div>
</q-card>
</div>
<!-- แบบแสดงรายละเอียดการเสนอผลงาน -->
<div class="col-6">
<q-card bordered style="border: 1px solid #d6dee1">
<div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
แบบแสดงรายละเอียดการเสนอผลงาน
</div>
<div class="col-12"><q-separator /></div>
<div class="row">
<div class="col-12 q-pa-sm">
<div class="row q-col-gutter-md col-12">
<div class="col-xs-12 col-sm-6 row">
<q-btn
class="col-12"
outline
icon="download"
label="ดาวน์โหลดต้นแบบ"
color="primary"
>
<q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
>
</div>
<div class="col-xs-12 col-sm-6 row">
<q-btn
v-if="fileEvaluation2"
class="col-12"
outline
icon="visibility"
label="ดูไฟล์เอกสาร"
color="primary"
>
<q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
>
</div>
<div class="col-xs-12 col-sm-11 row">
<q-file
v-model="fileEvaluation2"
class="col-12"
outlined
dense
hide-bottom-space
lazy-rules
accept=".pdf"
>
<template v-slot:prepend>
<q-icon name="attach_file" />
</template>
</q-file>
</div>
<div class="col-1 self-center text-center">
<q-btn flat round dense color="primary" icon="mdi-upload"
><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
>
</div>
</div>
</div>
</div>
</q-card>
</div>
<!-- แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล -->
<div class="col-6">
<q-card bordered style="border: 1px solid #d6dee1">
<div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล
</div>
<div class="col-12"><q-separator /></div>
<div class="row">
<div class="col-12 q-pa-sm">
<div class="row q-col-gutter-md col-12">
<div class="col-xs-12 col-sm-6 row">
<q-btn
class="col-12"
outline
icon="download"
label="ดาวน์โหลดต้นแบบ"
color="primary"
>
<q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
>
</div>
<div class="col-xs-12 col-sm-6 row">
<q-btn
v-if="fileEvaluation3"
class="col-12"
outline
icon="visibility"
label="ดูไฟล์เอกสาร"
color="primary"
>
<q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
>
</div>
<div class="col-xs-12 col-sm-11 row">
<q-file
v-model="fileEvaluation3"
class="col-12"
outlined
dense
hide-bottom-space
lazy-rules
accept=".pdf"
>
<template v-slot:prepend>
<q-icon name="attach_file" />
</template>
</q-file>
</div>
<div class="col-1 self-center text-center">
<q-btn flat round dense color="primary" icon="mdi-upload"
><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
>
</div>
</div>
</div>
</div>
</q-card>
</div>
<!-- แบบประเมินคุณลักษณะบุคคล -->
<div class="col-6">
<q-card bordered style="border: 1px solid #d6dee1">
<div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
แบบประเมินคุณลักษณะบุคคล
</div>
<div class="col-12"><q-separator /></div>
<div class="row">
<div class="col-12 q-pa-sm">
<div class="row q-col-gutter-md col-12">
<div class="col-xs-12 col-sm-6 row">
<q-btn
class="col-12"
outline
icon="download"
label="ดาวน์โหลดต้นแบบ"
color="primary"
>
<q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
>
</div>
<div class="col-xs-12 col-sm-6 row">
<q-btn
v-if="fileEvaluation4"
class="col-12"
outline
icon="visibility"
label="ดูไฟล์เอกสาร"
color="primary"
>
<q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
>
</div>
<div class="col-xs-12 col-sm-11 row">
<q-file
v-model="fileEvaluation4"
class="col-12"
outlined
dense
hide-bottom-space
lazy-rules
accept=".pdf"
>
<template v-slot:prepend>
<q-icon name="attach_file" />
</template>
</q-file>
</div>
<div class="col-1 self-center text-center">
<q-btn flat round dense color="primary" icon="mdi-upload"
><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
>
</div>
</div>
</div>
</div>
</q-card>
</div>
<!-- แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก -->
<div class="col-6">
<q-card bordered style="border: 1px solid #d6dee1">
<div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก
</div>
<div class="col-12"><q-separator /></div>
<div class="row">
<div class="col-12 q-pa-sm">
<div class="row q-col-gutter-md col-12">
<div class="col-xs-12 col-sm-6 row">
<q-btn
class="col-12"
outline
icon="download"
label="ดาวน์โหลดต้นแบบ"
color="primary"
>
<q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
>
</div>
<div class="col-xs-12 col-sm-6 row">
<q-btn
v-if="fileEvaluation5"
class="col-12"
outline
icon="visibility"
label="ดูไฟล์เอกสาร"
color="primary"
>
<q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
>
</div>
<div class="col-xs-12 col-sm-11 row">
<q-file
v-model="fileEvaluation5"
class="col-12"
outlined
dense
hide-bottom-space
lazy-rules
accept=".pdf"
>
<template v-slot:prepend>
<q-icon name="attach_file" />
</template>
</q-file>
</div>
<div class="col-1 self-center text-center">
<q-btn flat round dense color="primary" icon="mdi-upload"
><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
>
</div>
</div>
</div>
</div>
</q-card>
</div>
<!--ผลงานที่จะส่งประเมิน -->
<div class="col-6">
<q-card bordered style="border: 1px solid #d6dee1">
<div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
ผลงานที่จะส่งประเมิน
</div>
<div class="col-12"><q-separator /></div>
<div class="row">
<div class="col-12 q-pa-sm">
<div class="row q-col-gutter-md col-12">
<div class="col-xs-12 col-sm-6 row">
<q-btn
class="col-12"
outline
icon="download"
label="ดาวน์โหลดต้นแบบ"
color="primary"
>
<q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
>
</div>
<div class="col-xs-12 col-sm-6 row">
<q-btn
v-if="fileEvaluation6"
class="col-12"
outline
icon="visibility"
label="ดูไฟล์เอกสาร"
color="primary"
>
<q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
>
</div>
<div class="col-xs-12 col-sm-11 row">
<q-file
v-model="fileEvaluation6"
class="col-12"
outlined
dense
hide-bottom-space
lazy-rules
accept=".pdf"
>
<template v-slot:prepend>
<q-icon name="attach_file" />
</template>
</q-file>
</div>
<div class="col-1 self-center text-center">
<q-btn flat round dense color="primary" icon="mdi-upload"
><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
>
</div>
</div>
</div>
</div>
</q-card>
</div>
</div>
<!-- Dialog Full Screen -->
<q-dialog
v-model="modalView"
persistent
:maximized="true"
transition-show="slide-up"
transition-hide="slide-down"
>
<q-card class="bg-white">
<div class="flex justify-end items-center align-center q-mr-md q-mt-sm">
<q-btn
icon="close"
unelevated
round
dense
style="color: #ff8080; background-color: #ffdede"
size="12px"
v-close-popup
/>
</div>
<div class="q-pa-md">
<div class="row items-start items-center">
<div class="col">
<q-btn
padding="xs"
icon="mdi-chevron-left"
color="grey-2"
text-color="grey-5"
size="md"
class="my-auto"
@click="backPage"
:disable="page == 1"
/>
</div>
<div class="col-12 col-md-auto">
<div class="q-pa-md flex">
หน้าที่ {{ page }} จาก {{ numOfPages }}
</div>
</div>
<div class="col text-right">
<q-btn
padding="xs"
icon="mdi-chevron-right"
color="grey-2"
text-color="grey-5"
size="md"
@click="nextPage"
:disable="page === numOfPages"
/>
</div>
</div>
<div class="row items- items-center">
<VuePDF ref="vuePDFRef" :pdf="pdfSrc" :page="page" fit-parent />
</div>
<div class="row items- items-end">
<div class="col">
<q-btn
padding="xs"
icon="mdi-chevron-left"
color="grey-2"
text-color="grey-5"
size="md"
class="my-auto"
@click="backPage"
:disable="page == 1"
/>
</div>
<div class="col-12 col-md-auto">
<div class="q-pa-md flex">
หน้าที่ {{ page }} จาก {{ numOfPages }}
</div>
</div>
<div class="col text-right">
<q-btn
padding="xs"
icon="mdi-chevron-right"
color="grey-2"
text-color="grey-5"
size="md"
@click="nextPage"
:disable="page === numOfPages"
/>
</div>
</div>
</div>
</q-card>
</q-dialog>
</template>
<style scoped></style>

80
src/modules/06_assess/componenst/step/step3.vue Normal file
View file

@ -0,0 +1,80 @@
<script setup lang="ts">
import { reactive, ref } from "vue";
import { useCounterMixin } from "@/stores/mixin";
import { useAssessStore } from "@/modules/06_assess/store";
const store = useAssessStore();
const mixin = useCounterMixin();
const { date2Thai } = mixin;
const selectedItem = ref(1);
function handleItemClick(itemNumber: number) {
store.tabPanels = itemNumber.toString();
selectedItem.value = itemNumber;
}
</script>
<template>
<q-list separator>
<q-item
clickable
v-ripple
:active="selectedItem === 1 ? true : false"
active-class="text-primary"
@click="handleItemClick(1)"
>
<q-item-section>แบบพิจารณาคุณสมบัติบุคคล</q-item-section>
</q-item>
<q-item
clickable
v-ripple
:active="selectedItem === 2 ? true : false"
active-class="text-primary"
@click="handleItemClick(2)"
>
<q-item-section>แบบแสดงรายละเอียดการเสนอผลงาน</q-item-section>
</q-item>
<q-item
clickable
v-ripple
:active="selectedItem === 3 ? true : false"
active-class="text-primary"
@click="handleItemClick(3)"
>
<q-item-section
>แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล</q-item-section
>
</q-item>
<q-item
clickable
v-ripple
:active="selectedItem === 4 ? true : false"
active-class="text-primary"
@click="handleItemClick(4)"
>
<q-item-section> แบบประเมินคุณลักษณะบุคคล </q-item-section>
</q-item>
<q-item
clickable
v-ripple
:active="selectedItem === 5 ? true : false"
active-class="text-primary"
@click="handleItemClick(5)"
>
<q-item-section> แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก </q-item-section>
</q-item>
<q-item
clickable
v-ripple
:active="selectedItem === 6 ? true : false"
active-class="text-primary"
@click="handleItemClick(6)"
>
<q-item-section> ผลงานที่จะส่งประเมิน </q-item-section>
</q-item>
</q-list>
</template>
<style scoped></style>

7
src/modules/06_assess/componenst/step/step4.vue Normal file
View file

@ -0,0 +1,7 @@
<script setup lang="ts"></script>
<template>
<div><h1>4</h1></div>
</template>
<style scoped></style>

7
src/modules/06_assess/componenst/step/step5.vue Normal file
View file

@ -0,0 +1,7 @@
<script setup lang="ts"></script>
<template>
<div><h1>5</h1></div>
</template>
<style scoped></style>

7
src/modules/06_assess/componenst/step/step6.vue Normal file
View file

@ -0,0 +1,7 @@
<script setup lang="ts"></script>
<template>
<div><h1>6</h1></div>
</template>
<style scoped></style>

7
src/modules/06_assess/componenst/step/step7.vue Normal file
View file

@ -0,0 +1,7 @@
<script setup lang="ts"></script>
<template>
<div><h1>7</h1></div>
</template>
<style scoped></style>

7
src/modules/06_assess/componenst/step/step8.vue Normal file
View file

@ -0,0 +1,7 @@
<script setup lang="ts"></script>
<template>
<div><h1>8</h1></div>
</template>
<style scoped></style>

7
src/modules/06_assess/componenst/step/step9.vue Normal file
View file

@ -0,0 +1,7 @@
<script setup lang="ts"></script>
<template>
<div><h1>9</h1></div>
</template>
<style scoped></style>