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

73
src/modules/06_assess/componenst/Stepper.vue Normal file
View file

@ -0,0 +1,73 @@
<script setup lang="ts">
import { ref } from "vue";
import { useAssessStore } from "@/modules/06_assess/store";
const store = useAssessStore();
</script>
<template>
<q-stepper
v-model="store.step"
vertical
animated
flat
ref="stepper"
:bordered="false"
>
<q-step
keep-alive
:name="1"
prefix="1"
title="ตรวจสอบคุณสมบัติ"
:done="store.step > 1"
>
</q-step>
<q-step :name="2" prefix="2" title="จัดเตรียมเอกสาร" :done="store.step > 2">
</q-step>
<q-step :name="3" prefix="3" title="ตรวจสอบเอกสาร" :done="store.step > 3">
</q-step>
<q-step
:name="4"
prefix="4"
title="รอตรวจสอบคุณสมบัติ"
:done="store.step > 4"
>
</q-step>
<q-step
:name="5"
prefix="5"
title="ประกาศบนเว็บไซต์"
:done="store.step > 5"
>
</q-step>
<q-step
:name="6"
prefix="6"
title="จัดเตรียมเอกสารเล่ม 2"
:done="store.step > 6"
>
</q-step>
<q-step
:name="7"
prefix="7"
title="ตรวจสอบเอกสารเล่ม 2"
:done="store.step > 7"
>
</q-step>
<q-step :name="8" prefix="8" title="รอพิจารณาผล" :done="store.step > 8">
</q-step>
<q-step :name="9" prefix="9" title="เสร็จสิ้น" :done="store.step > 9">
</q-step>
</q-stepper>
</template>
<style scoped></style>

108
src/modules/06_assess/componenst/Tab1.vue Normal file
View file

@ -0,0 +1,108 @@
<script setup lang="ts">
import { ref } from "vue";
import { useQuasar } from "quasar";
import Stepper from "@/modules/06_assess/componenst/Stepper.vue";
import Step1 from "@/modules/06_assess/componenst/step/step1.vue";
import Step2 from "@/modules/06_assess/componenst/step/step2.vue";
import Step3 from "@/modules/06_assess/componenst/step/step3.vue";
import Step4 from "@/modules/06_assess/componenst/step/step4.vue";
import Step5 from "@/modules/06_assess/componenst/step/step5.vue";
import Step6 from "@/modules/06_assess/componenst/step/step6.vue";
import Step7 from "@/modules/06_assess/componenst/step/step7.vue";
import Step8 from "@/modules/06_assess/componenst/step/step8.vue";
import Step9 from "@/modules/06_assess/componenst/step/step9.vue";
import ViewStep1 from "@/modules/06_assess/componenst/viewstep/viewStep1.vue";
import ViewStep3 from "@/modules/06_assess/componenst/viewstep/viewStep3.vue";
import { useAssessStore } from "@/modules/06_assess/store";
import { useCounterMixin } from "@/stores/mixin";
const store = useAssessStore();
const mixin = useCounterMixin();
const { dialogConfirm } = mixin;
const $q = useQuasar();
function onCilckNextStep() {
store.step < 9 &&
dialogConfirm($q, () => {
store.step++;
});
}
function onCilckprPeviousStep() {
store.step > 1 &&
dialogConfirm($q, () => {
store.step--;
});
}
</script>
<template>
<div class="row q-col-gutter-md">
<div class="col-xs-12 col-sm-3">
<div class="toptitle">ประเมินชำนาญการ</div>
<Stepper />
</div>
<div class="col-xs-12 col-sm-9">
<div class="toptitle">
{{ store.step }}.{{ store.titel[store.step - 1] }}
</div>
<div class="row q-col-gutter-md col-12">
<div
:class="
store.step === 2
? 'col-xs-12 col-sm-12 row'
: 'col-xs-12 col-sm-5 row'
"
>
<q-card flat bordered class="col-12 q-pa-md">
<q-card-section>
<Step1 v-if="store.step === 1" />
<Step2 v-if="store.step === 2" />
<Step3 v-if="store.step === 3" />
<Step4 v-if="store.step === 4" />
<Step5 v-if="store.step === 5" />
<Step6 v-if="store.step === 6" />
<Step7 v-if="store.step === 7" />
<Step8 v-if="store.step === 8" />
<Step9 v-if="store.step === 9" />
</q-card-section>
</q-card>
</div>
<div class="col-xs-12 col-sm-7 row" v-if="store.step !== 2">
<q-card flat bordered class="col-12">
<q-card-section>
<ViewStep1 v-if="store.step === 1" />
<ViewStep3 v-if="store.step === 3" /> </q-card-section
></q-card>
</div>
</div>
<div class="q-mt-md q-gutter-md" align="right">
<q-btn
v-if="store.step !== 1"
unelevated
outline
label="ย้อนกลับ"
color="public"
@click="onCilckprPeviousStep"
/>
<q-btn
unelevated
label="ดำเนินกานต่อ"
color="public"
@click="onCilckNextStep"
/>
</div>
</div>
</div>
</template>
<style>
.q-stepper--vertical .q-stepper__step-inner {
padding: 0;
}
</style>

108
src/modules/06_assess/componenst/Tab2.vue Normal file
View file

@ -0,0 +1,108 @@
<script setup lang="ts">
import { ref } from "vue";
import { useQuasar } from "quasar";
import Stepper from "@/modules/06_assess/componenst/Stepper.vue";
import Step1 from "@/modules/06_assess/componenst/step/step1.vue";
import Step2 from "@/modules/06_assess/componenst/step/step2.vue";
import Step3 from "@/modules/06_assess/componenst/step/step3.vue";
import Step4 from "@/modules/06_assess/componenst/step/step4.vue";
import Step5 from "@/modules/06_assess/componenst/step/step5.vue";
import Step6 from "@/modules/06_assess/componenst/step/step6.vue";
import Step7 from "@/modules/06_assess/componenst/step/step7.vue";
import Step8 from "@/modules/06_assess/componenst/step/step8.vue";
import Step9 from "@/modules/06_assess/componenst/step/step9.vue";
import ViewStep1 from "@/modules/06_assess/componenst/viewstep/viewStep1.vue";
import ViewStep3 from "@/modules/06_assess/componenst/viewstep/viewStep3.vue";
import { useAssessStore } from "@/modules/06_assess/store";
import { useCounterMixin } from "@/stores/mixin";
const store = useAssessStore();
const mixin = useCounterMixin();
const { dialogConfirm } = mixin;
const $q = useQuasar();
function onCilckNextStep() {
store.step < 9 &&
dialogConfirm($q, () => {
store.step++;
});
}
function onCilckprPeviousStep() {
store.step > 1 &&
dialogConfirm($q, () => {
store.step--;
});
}
</script>
<template>
<div class="row q-col-gutter-md">
<div class="col-xs-12 col-sm-3">
<div class="toptitle">ประเมินชำนาญการพิเศษ</div>
<Stepper />
</div>
<div class="col-xs-12 col-sm-9">
<div class="toptitle">
{{ store.step }}.{{ store.titel[store.step - 1] }}
</div>
<div class="row q-col-gutter-md col-12">
<div
:class="
store.step === 2
? 'col-xs-12 col-sm-12 row'
: 'col-xs-12 col-sm-5 row'
"
>
<q-card flat bordered class="col-12 q-pa-md">
<q-card-section>
<Step1 v-if="store.step === 1" />
<Step2 v-if="store.step === 2" />
<Step3 v-if="store.step === 3" />
<Step4 v-if="store.step === 4" />
<Step5 v-if="store.step === 5" />
<Step6 v-if="store.step === 6" />
<Step7 v-if="store.step === 7" />
<Step8 v-if="store.step === 8" />
<Step9 v-if="store.step === 9" />
</q-card-section>
</q-card>
</div>
<div class="col-xs-12 col-sm-7 row" v-if="store.step !== 2">
<q-card flat bordered class="col-12">
<q-card-section>
<ViewStep1 v-if="store.step === 1" />
<ViewStep3 v-if="store.step === 3" /> </q-card-section
></q-card>
</div>
</div>
<div class="q-mt-md q-gutter-md" align="right">
<q-btn
v-if="store.step !== 1"
unelevated
outline
label="ย้อนกลับ"
color="public"
@click="onCilckprPeviousStep"
/>
<q-btn
unelevated
label="ดำเนินกานต่อ"
color="public"
@click="onCilckNextStep"
/>
</div>
</div>
</div>
</template>
<style>
.q-stepper--vertical .q-stepper__step-inner {
padding: 0;
}
</style>

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>

180
src/modules/06_assess/componenst/viewstep/viewPDF.vue Normal file
View file

@ -0,0 +1,180 @@
<script setup lang="ts">
import { ref } from "vue";
const splitterModel = ref(14);
const numOfPages = ref<number>(0);
const page = ref<number>(1);
const pdfSrc = ref<any>();
/** ไปหน้าต่อไปของรายงาน */
function nextPage() {
if (page.value < numOfPages.value) {
page.value++;
}
}
/** กลับหน้าก่อนหน้าของรายงาน */
function backPage() {
if (page.value !== 1) {
page.value--;
}
}
</script>
<template>
<q-splitter
v-model="splitterModel"
horizontal
style="
height: 50vh;
border: 1px solid rgb(210, 210, 210);
border-radius: 5px;
"
before-class="overflow-hidden disable"
separator-class="bg-white disabled"
>
<template v-slot:before>
<div class="q-px-sm">
<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>
</template>
<template v-slot:after>
<div class="q-pa-md">
<VuePDF ref="vuePDFRef" :pdf="pdfSrc" :page="page" fit-parent />
</div>
</template>
<template v-slot:default>
<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>
</template>
</q-splitter>
<!-- <q-card class="bg-white">
<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> -->
</template>
<style scoped></style>

9
src/modules/06_assess/componenst/viewstep/viewStep1.vue Normal file
View file

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

34
src/modules/06_assess/componenst/viewstep/viewStep3.vue Normal file
View file

@ -0,0 +1,34 @@
<script setup lang="ts">
import ViewPDF from "@/modules/06_assess/componenst/viewstep/viewPDF.vue";
import { useAssessStore } from "@/modules/06_assess/store";
const store = useAssessStore();
</script>
<template>
<q-tab-panels v-model="store.tabPanels" animated swipeable vertical>
<q-tab-panel name="1">
<ViewPDF />
</q-tab-panel>
<q-tab-panel name="2">
<ViewPDF />
</q-tab-panel>
<q-tab-panel name="3">
<ViewPDF />
</q-tab-panel>
<q-tab-panel name="4">
<ViewPDF />
</q-tab-panel>
<q-tab-panel name="5">
<ViewPDF />
</q-tab-panel>
<q-tab-panel name="6">
<ViewPDF />
</q-tab-panel>
</q-tab-panels>
</template>
<style scoped></style>

13
src/modules/06_assess/router.ts Normal file
View file

@ -0,0 +1,13 @@
const assessMain = () => import("@/modules/06_assess/views/AssessMain.vue");
export default [
{
path: "/assess",
name: "assess",
component: assessMain,
meta: {
Auth: true,
Key: [7],
},
},
];

28
src/modules/06_assess/store.ts Normal file
View file

@ -0,0 +1,28 @@
import { defineStore } from "pinia";
import { ref } from "vue";
export const useAssessStore = defineStore("asses", () => {
const tabMenu = ref<string>("1");
const step = ref<number>(1);
const titel = ref<string[]>([
"ตรวจสอบคุณสมบัติ",
"จัดเตรียมเอกสาร",
"ตรวจสอบเอกสาร",
"รอตรวจสอบคุณสมบัติ",
"ประกาศบนเว็บไซต์",
"จัดเตรียมเอกสารเล่ม 2",
"ตรวจสอบเอกสารเล่ม 2",
"รอพิจารณาผล",
"เสร็จสิ้น",
]);
const tabPanels = ref<string>("1");
return {
tabMenu,
step,
titel,
tabPanels,
};
});

65
src/modules/06_assess/views/AssessMain.vue Normal file
View file

@ -0,0 +1,65 @@
<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useQuasar } from "quasar";
import { useRouter } from "vue-router";
import http from "@/plugins/http";
import config from "@/app.config";
import Tab1 from "@/modules/06_assess/componenst/Tab1.vue"; // ชำนาญการ
import Tab2 from "@/modules/06_assess/componenst/Tab2.vue"; // ชำนาญการพิเศษ
import { useAssessStore } from "@/modules/06_assess/store";
const store = useAssessStore();
const router = useRouter();
const $q = useQuasar();
</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-card class="col-12 items-center">
<q-tabs
v-model="store.tabMenu"
dense
align="left"
inline-label
class="rounded-borders"
indicator-color="primary"
active-bg-color="teal-1"
active-class="text-primary"
>
<q-tab name="1" label="ชำนาญการ" />
<q-tab name="2" label="ชำนาญการพิเศษ" />
</q-tabs>
<q-separator />
<q-tab-panels v-model="store.tabMenu" animated>
<q-tab-panel name="1"> <Tab1 /></q-tab-panel>
<q-tab-panel name="2"> <Tab2 /></q-tab-panel>
</q-tab-panels>
</q-card>
</q-card>
</div>
</div>
</div>
</template>
<style lang="scss" scoped></style>