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

ปรับ ui การประเมิน step 1-3

Browse source
This commit is contained in:
Tanyalak 2024-01-16 19:55:28 +07:00
parent b14413eb98
commit 200881c0c7
9 changed files with 907 additions and 866 deletions
Download patch file Download diff file Expand all files Collapse all files

364
src/modules/06_evaluate/components/EvaluateStepMain.vue
View file

@ -39,6 +39,7 @@ const route = useRoute();
const store = useEvaluateStore(); const store = useEvaluateStore();
const mixin = useCounterMixin(); const mixin = useCounterMixin();
const $q = useQuasar(); const $q = useQuasar();
const splitterModel = 20;
const { showLoader, hideLoader, messageError, dialogConfirm } = mixin; const { showLoader, hideLoader, messageError, dialogConfirm } = mixin;
@ -558,7 +559,7 @@ onMounted(async () => {
<template> <template>
<div class="col-12 row justify-center"> <div class="col-12 row justify-center">
<div class="col-xs-12 col-sm-12 col-md-11"> <div class="col-xs-12 col-sm-12 col-md-11">
<div class="toptitle text-white col-12 row items-center"> <div class="toptitle2 text-white col-12 row items-center">
<q-btn <q-btn
icon="mdi-arrow-left" icon="mdi-arrow-left"
unelevated unelevated
@ -573,174 +574,214 @@ onMounted(async () => {
</div> </div>
</div> </div>
<div class="col-xs-12 col-sm-12 col-md-11 row q-col-gutter-md q-mt-xs"> <div class="col-xs-12 col-sm-12 col-md-11 row">
<div class="col-12 row"> <div class="col-12 row">
<q-card bordered class="col-12 row caedNone q-pa-md q-col-gutter-md"> <q-card bordered class="col-12 row caedNone">
<div class="col-xs-12 col-sm-3"> <q-splitter
<div class="toptitle"> v-model="splitterModel"
{{ :style="$q.screen.lt.sm ? 'height: 74vh;' : 'height: auto;'"
route.params.type === "expert" :horizontal="$q.screen.lt.sm"
? "ประเมินชำนาญการ" >
: "ประเมินชำนาญการพิเศษ"
}}
<q-btn
flat
round
dense
color="primary"
icon="history"
@click="onClickPopupHistory"
>
<q-tooltip>ประวัติการประเมิน</q-tooltip>
</q-btn>
</div>
<Stepper />
</div>
<div class="col-xs-12 col-sm-9" v-if="showLoadStatus"> <template v-slot:before>
<div class="col-12 row"> <div class="col-12 row q-py-md q-px-lg" >
<div class="col-9"> <div class="col-12 row items-center q-pa-none no-wrap">
<div class="toptitle"> <div class="toptitle2">
{{ store.step }}.{{ store.title[store.step - 1] }} {{
route.params.type === "expert"
? "ประเมินชำนาญการ"
: "ประเมินชำนาญการพิเศษ"
}}
</div>
<q-space />
<q-btn
flat
round
dense
color="primary"
icon="history"
@click="onClickPopupHistory"
>
<q-tooltip>ประวัติการประเมิน</q-tooltip>
</q-btn>
</div>
<div class="col-12 row">
<Stepper />
</div>
</div>
</template>
<template v-slot:after>
<div class="col-12 row q-pa-md" v-if="showLoadStatus">
<div class="col-12 row">
<div class="toptitle2 q-pt-xs">
{{ store.step }}.{{ store.title[store.step - 1] }}
</div>
<q-space />
<div>
<q-btn
v-if="store.step === 1"
:href="externalLink"
target="_blank"
outline
color="blue"
no-caps
dense
class="q-px-sm"
>
ตรวจสอบคุณสมบัติกับ ก.พ.
</q-btn>
</div>
</div> </div>
</div> <div class="col-12 q-pt-xs">
<div class="col-3 text-right"> <div class="row q-col-gutter-md">
<q-btn <div
v-if="store.step === 1" :class="
:href="externalLink" store.step === 2 ||
target="_blank" store.step === 4 ||
outline store.step === 5 ||
color="blue" store.step === 6 ||
no-caps store.step === 8 ||
> store.step === 9
ตรวจสอบคุณสมบัติกับ ก.พ. ? 'col-xs-12 col-sm-12 row'
</q-btn> : 'col-xs-12 col-sm-5 row'
</div> "
</div> >
<div class="row q-col-gutter-md col-12"> <q-card v-if="store.step === 1" flat bordered class="col-12 q-pa-md shadow-0">
<div <Step1
:class="
store.step === 2 || @update:spec="updateCheckSpec"
store.step === 4 || :data="formDataStep1"
store.step === 5 || :educations="formDetail?.educations"
store.step === 6 || />
store.step === 8 || </q-card>
store.step === 9 <q-card v-if="store.step === 2" flat bordered class="col-12 shadow-0" :style="$q.screen.lt.sm ? '' : 'height: 60vh; overflow: scroll;' ">
? 'col-xs-12 col-sm-12 row' <Step2
: 'col-xs-12 col-sm-5 row'
" @update:form="updateformCommand"
> />
<q-card flat bordered class="col-12 q-pa-md"> </q-card>
<q-card-section> <q-card
<Step1 v-if="store.step === 3" flat bordered class="col-12 shadow-0">
v-if="store.step === 1" <Step3
@update:spec="updateCheckSpec"
:data="formDataStep1" @update:file="updateFilePDF"
:educations="formDetail?.educations" />
/> </q-card>
<Step2 <q-card
v-if="store.step === 2" v-if=" store.step === 4 ||
@update:form="updateformCommand" store.step === 5 || store.step === 6 ||
/> store.step === 7 || store.step === 8 ||
<Step3 store.step === 9
v-if="store.step === 3" " flat bordered class="col-12 q-pa-md shadow-0">
@update:file="updateFilePDF" <Step4 v-if="store.step === 4" />
/> <Step5 v-if="store.step === 5" />
<Step4 v-if="store.step === 4" /> <Step6
<Step5 v-if="store.step === 5" /> v-if="store.step === 6"
<Step6 @update:form="updateformCommand"
v-if="store.step === 6" />
@update:form="updateformCommand" <Step7
/> v-if="store.step === 7"
<Step7 @update:file="updateFilePDF"
v-if="store.step === 7" />
@update:file="updateFilePDF" <Step8 v-if="store.step === 8" />
/> <Step9 v-if="store.step === 9" />
<Step8 v-if="store.step === 8" /> </q-card>
<Step9 v-if="store.step === 9" /> </div>
</q-card-section>
</q-card> <div class="col-xs-12 col-sm-7" v-if="store.step === 1 || store.step === 3 || store.step === 7">
</div> <q-card
<div class=" row q-pa-md shadow-0"
class="col-xs-12 col-sm-7 row" bordered
v-if="store.step === 1 || store.step === 3 || store.step === 7" flat
> v-if="store.step === 1"
<div class="col-12 "> >
<ViewStep1 <div class="col-12 row">
v-if="store.step === 1" <ViewStep1
@update:formDeital="updateFormDetail" @update:formDeital="updateFormDetail"
:data="formDataStep1" :data="formDataStep1"
/>
</div>
</q-card>
<q-card v-if="store.step === 3 && pdfSrc" class="row shadow-0" bordered flat >
<ViewStep3
:pdfSrc="pdfSrc"
:urlDownloadFile="urlDownloadFile"
/>
</q-card>
<q-card v-if="store.step === 7 && pdfSrc" class="row shadow-0" bordered flat >
<ViewStep7
:pdfSrc="pdfSrc"
:urlDownloadFile="urlDownloadFile"
/>
</q-card>
</div>
</div>
</div>
<div class="row col-12 q-pt-sm">
<q-space />
<q-btn
v-if="
store.step >= store.currentStep &&
store.statusUpload === false &&
store.step !== 3 &&
store.step !== 4 &&
store.step !== 5 &&
store.step !== 7 &&
store.step !== 8 &&
store.step !== 9
"
unelevated
:label="
store.step === 2 || store.step === 6
? 'บันทึกข้อมูล'
: 'ดำเนินการต่อ'
"
color="public"
@click="onCilckNextStep()"
/> />
<ViewStep3
v-if="store.step === 3 && pdfSrc" <q-btn
:pdfSrc="pdfSrc" v-else-if="
:urlDownloadFile="urlDownloadFile" store.step >= store.currentStep &&
(store.step == 3 || store.step == 7)
"
unelevated
label="ยื่นเอกสาร"
color="public"
@click="onCilckNextStep()"
/> />
<ViewStep7
v-if="store.step === 7 && pdfSrc" <q-btn
:pdfSrc="pdfSrc" v-if="
:urlDownloadFile="urlDownloadFile" store.step >= store.currentStep &&
store.step == 2 &&
store.statusUpload
"
unelevated
label="ดำเนินการต่อ"
color="public"
@click="onCilckNextStep()"
/>
<q-btn
v-if="
store.step >= store.currentStep &&
store.step == 6 &&
store.statusUpload
"
unelevated
label="ดำเนินการต่อ"
color="public"
@click="onCilckNextStep()"
/> />
</div> </div>
</div> </div>
</div> </template>
<div class="q-mt-md q-gutter-md" align="right">
<q-btn </q-splitter>
v-if="
store.step >= store.currentStep &&
store.statusUpload === false &&
store.step !== 3 &&
store.step !== 4 &&
store.step !== 5 &&
store.step !== 7 &&
store.step !== 8 &&
store.step !== 9
"
unelevated
:label="
store.step === 2 || store.step === 6
? 'บันทึกข้อมูล'
: 'ดำเนินการต่อ'
"
color="public"
@click="onCilckNextStep()"
/>
<q-btn
v-else-if="
store.step >= store.currentStep &&
(store.step == 3 || store.step == 7)
"
unelevated
label="ยื่นเอกสาร"
color="public"
@click="onCilckNextStep()"
/>
<q-btn
v-if="
store.step >= store.currentStep &&
store.step == 2 &&
store.statusUpload
"
unelevated
label="ดำเนินการต่อ"
color="public"
@click="onCilckNextStep()"
/>
<q-btn
v-if="
store.step >= store.currentStep &&
store.step == 6 &&
store.statusUpload
"
unelevated
label="ดำเนินการต่อ"
color="public"
@click="onCilckNextStep()"
/>
</div>
</div>
</q-card> </q-card>
</div> </div>
</div> </div>
@ -756,4 +797,9 @@ onMounted(async () => {
.q-stepper--vertical .q-stepper__step-inner { .q-stepper--vertical .q-stepper__step-inner {
padding: 0; padding: 0;
} }
.toptitle2 {
font-size: 1rem;
font-weight: bold;
margin-bottom: 1.2%;
}
</style> </style>

22
src/modules/06_evaluate/components/Stepper.vue
View file

@ -8,12 +8,12 @@ const store = useEvaluateStore();
<template> <template>
<q-stepper <q-stepper
v-model="store.step" v-model="store.step"
dense
vertical vertical
animated animated
flat flat
ref="stepper" ref="stepper"
:bordered="false" class="stepEva"
header-nav
> >
<q-step <q-step
keep-alive keep-alive
@ -22,6 +22,7 @@ const store = useEvaluateStore();
title="ตรวจสอบคุณสมบัติ" title="ตรวจสอบคุณสมบัติ"
:done="store.currentStep >= 1" :done="store.currentStep >= 1"
:disable="store.currentStep < 1" :disable="store.currentStep < 1"
class="subStep"
> >
</q-step> </q-step>
@ -31,6 +32,7 @@ const store = useEvaluateStore();
title="จัดเตรียมเอกสารเล่ม 1" title="จัดเตรียมเอกสารเล่ม 1"
:done="store.currentStep >= 2" :done="store.currentStep >= 2"
:disable="store.currentStep < 2" :disable="store.currentStep < 2"
class="subStep"
> >
</q-step> </q-step>
@ -40,6 +42,7 @@ const store = useEvaluateStore();
title="ตรวจสอบเอกสารเล่ม 1" title="ตรวจสอบเอกสารเล่ม 1"
:done="store.currentStep >= 3" :done="store.currentStep >= 3"
:disable="store.currentStep < 3" :disable="store.currentStep < 3"
class="subStep"
> >
</q-step> </q-step>
@ -49,6 +52,7 @@ const store = useEvaluateStore();
title="รอตรวจสอบคุณสมบัติ" title="รอตรวจสอบคุณสมบัติ"
:done="store.currentStep >= 4" :done="store.currentStep >= 4"
:disable="store.currentStep < 4" :disable="store.currentStep < 4"
class="subStep"
> >
</q-step> </q-step>
@ -58,6 +62,7 @@ const store = useEvaluateStore();
title="ประกาศบนเว็บไซต์" title="ประกาศบนเว็บไซต์"
:done="store.currentStep >= 5" :done="store.currentStep >= 5"
:disable="store.currentStep < 5" :disable="store.currentStep < 5"
class="subStep"
> >
</q-step> </q-step>
@ -67,6 +72,7 @@ const store = useEvaluateStore();
title="จัดเตรียมเอกสารเล่ม 2" title="จัดเตรียมเอกสารเล่ม 2"
:done="store.currentStep >= 6" :done="store.currentStep >= 6"
:disable="store.currentStep < 6" :disable="store.currentStep < 6"
class="subStep"
> >
</q-step> </q-step>
@ -76,6 +82,7 @@ const store = useEvaluateStore();
title="รอพิจารณาผลการประเมิน 2" title="รอพิจารณาผลการประเมิน 2"
:done="store.currentStep >= 7" :done="store.currentStep >= 7"
:disable="store.currentStep < 7" :disable="store.currentStep < 7"
class="subStep"
> >
</q-step> </q-step>
@ -85,6 +92,7 @@ const store = useEvaluateStore();
title="ตรวจสอบความถูกต้องของเอกสารเล่ม 2" title="ตรวจสอบความถูกต้องของเอกสารเล่ม 2"
:done="store.currentStep >= 8" :done="store.currentStep >= 8"
:disable="store.currentStep < 8" :disable="store.currentStep < 8"
class="subStep"
> >
</q-step> </q-step>
@ -94,9 +102,17 @@ const store = useEvaluateStore();
title="เสร็จสิ้น" title="เสร็จสิ้น"
:done="store.currentStep >= 9" :done="store.currentStep >= 9"
:disable="store.currentStep < 9" :disable="store.currentStep < 9"
class="subStep"
> >
</q-step> </q-step>
</q-stepper> </q-stepper>
</template> </template>
<style scoped></style> <style>
.stepEva{
padding: 0px !important;
}
.subStep .q-stepper__tab{
padding: 12px 0px !important;
}
</style>

22
src/modules/06_evaluate/components/step/step1.vue
View file

@ -84,8 +84,8 @@ onMounted(() => {
</script> </script>
<template> <template>
<q-list> <q-list dense>
<q-item v-ripple> <q-item v-ripple class="listItem">
<q-item-section avatar> <q-item-section avatar>
<q-checkbox <q-checkbox
:disable="store.currentStep > 1" :disable="store.currentStep > 1"
@ -111,7 +111,7 @@ onMounted(() => {
</q-item-label> </q-item-label>
</q-item-section> </q-item-section>
</q-item> </q-item>
<q-item v-ripple> <q-item v-ripple class="listItem">
<q-item-section avatar> <q-item-section avatar>
<q-checkbox <q-checkbox
:disable="store.currentStep > 1" :disable="store.currentStep > 1"
@ -125,7 +125,7 @@ onMounted(() => {
<q-item-label>ประวัติการรับราชการ </q-item-label> <q-item-label>ประวัติการรับราชการ </q-item-label>
</q-item-section> </q-item-section>
</q-item> </q-item>
<q-item v-ripple> <q-item v-ripple class="listItem">
<q-item-section avatar> <q-item-section avatar>
<q-checkbox <q-checkbox
:disable="store.currentStep > 1" :disable="store.currentStep > 1"
@ -139,7 +139,7 @@ onMounted(() => {
<q-item-label>ประสบการณ์ในการปฏิบัติงาน </q-item-label> <q-item-label>ประสบการณ์ในการปฏิบัติงาน </q-item-label>
</q-item-section> </q-item-section>
</q-item> </q-item>
<q-item v-ripple> <q-item v-ripple class="listItem">
<q-item-section avatar> <q-item-section avatar>
<q-checkbox <q-checkbox
:disable="store.currentStep > 1" :disable="store.currentStep > 1"
@ -165,7 +165,7 @@ onMounted(() => {
> >
</q-item-section> </q-item-section>
</q-item> </q-item>
<q-item v-ripple> <q-item v-ripple class="listItem">
<q-item-section avatar> <q-item-section avatar>
<q-checkbox <q-checkbox
:disable="store.currentStep > 1" :disable="store.currentStep > 1"
@ -182,7 +182,7 @@ onMounted(() => {
> >
</q-item-section> </q-item-section>
</q-item> </q-item>
<q-item v-ripple> <q-item v-ripple class="listItem">
<q-item-section avatar> <q-item-section avatar>
<q-checkbox <q-checkbox
:disable="store.currentStep > 1" :disable="store.currentStep > 1"
@ -200,7 +200,7 @@ onMounted(() => {
> >
</q-item-section> </q-item-section>
</q-item> </q-item>
<q-item v-ripple> <q-item v-ripple class="listItem">
<q-item-section avatar> <q-item-section avatar>
<q-checkbox <q-checkbox
:disable="store.currentStep > 1" :disable="store.currentStep > 1"
@ -226,4 +226,8 @@ onMounted(() => {
/> />
</template> </template>
<style scoped></style> <style >
.listItem{
padding: 5px 0px !important;
}
</style>

1016
src/modules/06_evaluate/components/step/step2.vue
View file

File diff suppressed because it is too large Load diff

6
src/modules/06_evaluate/components/step/step3.vue
View file

@ -103,6 +103,7 @@ onMounted(async () => {
:active="selectedItem === 1 ? true : false" :active="selectedItem === 1 ? true : false"
active-class="text-primary" active-class="text-primary"
@click="handleItemClick(1)" @click="handleItemClick(1)"
class=" cursor-pointer"
> >
<q-item-section>แบบพิจารณาคุณสมบัติบุคคล</q-item-section> <q-item-section>แบบพิจารณาคุณสมบัติบุคคล</q-item-section>
</q-item> </q-item>
@ -112,6 +113,7 @@ onMounted(async () => {
:active="selectedItem === 2 ? true : false" :active="selectedItem === 2 ? true : false"
active-class="text-primary" active-class="text-primary"
@click="handleItemClick(2)" @click="handleItemClick(2)"
class=" cursor-pointer"
> >
<q-item-section>แบบแสดงรายละเอียดการเสนอผลงาน</q-item-section> <q-item-section>แบบแสดงรายละเอียดการเสนอผลงาน</q-item-section>
</q-item> </q-item>
@ -121,6 +123,7 @@ onMounted(async () => {
:active="selectedItem === 3 ? true : false" :active="selectedItem === 3 ? true : false"
active-class="text-primary" active-class="text-primary"
@click="handleItemClick(3)" @click="handleItemClick(3)"
class=" cursor-pointer"
> >
<q-item-section <q-item-section
>แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล >แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล
@ -133,6 +136,7 @@ onMounted(async () => {
:active="selectedItem === 4 ? true : false" :active="selectedItem === 4 ? true : false"
active-class="text-primary" active-class="text-primary"
@click="handleItemClick(4)" @click="handleItemClick(4)"
class=" cursor-pointer"
> >
<q-item-section> แบบประเมินคุณลักษณะบุคคล </q-item-section> <q-item-section> แบบประเมินคุณลักษณะบุคคล </q-item-section>
</q-item> </q-item>
@ -142,6 +146,7 @@ onMounted(async () => {
:active="selectedItem === 5 ? true : false" :active="selectedItem === 5 ? true : false"
active-class="text-primary" active-class="text-primary"
@click="handleItemClick(5)" @click="handleItemClick(5)"
class=" cursor-pointer"
> >
<q-item-section> <q-item-section>
แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9) แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)
@ -153,6 +158,7 @@ onMounted(async () => {
:active="selectedItem === 6 ? true : false" :active="selectedItem === 6 ? true : false"
active-class="text-primary" active-class="text-primary"
@click="handleItemClick(6)" @click="handleItemClick(6)"
class=" cursor-pointer"
> >
<q-item-section> ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11) </q-item-section> <q-item-section> ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11) </q-item-section>
</q-item> </q-item>

34
src/modules/06_evaluate/components/viewstep/tableStep1.vue
View file

@ -12,25 +12,21 @@ const props = defineProps({
</script> </script>
<template> <template>
<q-table <div class="q-pa-sm row col-12">
ref="table" <q-table
flat ref="table"
bordered flat
class="custom-header-table" bordered
:columns="props.columns" :columns="props.columns"
:rows="props.row" :rows="props.row"
dense dense
:rows-per-page-options="[10, 25, 50, 100]" :rows-per-page-options="[10, 25, 50, 100]"
virtual-scroll virtual-scroll
> class="row col-12"
<template v-slot:header="props"> :style="$q.screen.lt.sm ? 'width: 70vw' : 'width: 50vw;'"
<q-tr :props="props"> >
<q-th v-for="col in props.cols" :key="col.name" :props="props"> </q-table>
<span class="text-weight-medium" v-html="col.label" /> </div>
</q-th>
</q-tr>
</template>
</q-table>
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>

27
src/modules/06_evaluate/components/viewstep/viewPDF.vue
View file

@ -62,23 +62,25 @@ function backPage() {
<q-splitter <q-splitter
v-model="splitterModel" v-model="splitterModel"
horizontal horizontal
class="bg-grey-1 q-px-sm"
:style=" :style="
props.type !== 'popup' props.type !== 'popup'
? 'height: 50vh; border: 1px solid rgb(210, 210, 210);border-radius: 5px;' ? 'height: 50vh; border-radius: 5px;'
: 'border: 1px solid rgb(210, 210, 210);border-radius: 5px;' : 'border: 1px solid rgb(210, 210, 210);border-radius: 5px;'
" "
before-class="overflow-hidden disable" before-class="overflow-hidden disable"
separator-class="bg-white disabled" separator-class="bg-white disabled"
> >
<template v-slot:before> <template v-slot:before>
<div class="q-px-sm"> <div class="q-py-sm">
<div class="row items-start items-center"> <div class="row items-start items-center">
<div class="col"> <div class="col">
<q-btn <q-btn
padding="xs" padding="xs"
icon="mdi-chevron-left" icon="mdi-chevron-left"
color="grey-2" color="grey-4"
text-color="grey-5" unelevated
text-color="grey-8"
size="md" size="md"
class="my-auto" class="my-auto"
@click="backPage" @click="backPage"
@ -94,8 +96,9 @@ function backPage() {
<q-btn <q-btn
padding="xs" padding="xs"
icon="mdi-chevron-right" icon="mdi-chevron-right"
color="grey-2" color="grey-4"
text-color="grey-5" unelevated
text-color="grey-8"
size="md" size="md"
@click="nextPage" @click="nextPage"
:disable="page === numOfPages" :disable="page === numOfPages"
@ -123,14 +126,15 @@ function backPage() {
</div> </div>
</template> </template>
<template v-slot:default> <template v-slot:default>
<div class="q-pa-md"> <div class="q-py-sm">
<div class="row items-start items-center"> <div class="row items-start items-center">
<div class="col"> <div class="col">
<q-btn <q-btn
padding="xs" padding="xs"
icon="mdi-chevron-left" icon="mdi-chevron-left"
color="grey-2" color="grey-4"
text-color="grey-5" unelevated
text-color="grey-8"
size="md" size="md"
class="my-auto" class="my-auto"
@click="backPage" @click="backPage"
@ -147,8 +151,9 @@ function backPage() {
<q-btn <q-btn
padding="xs" padding="xs"
icon="mdi-chevron-right" icon="mdi-chevron-right"
color="grey-2" color="grey-4"
text-color="grey-5" unelevated
text-color="grey-8"
size="md" size="md"
@click="nextPage" @click="nextPage"
:disable="page === numOfPages" :disable="page === numOfPages"

188
src/modules/06_evaluate/components/viewstep/viewStep1.vue
View file

@ -213,15 +213,15 @@ onMounted(async () => {
</script> </script>
<template> <template>
<q-scroll-area style="height: 500px"> <div class="col-12 row" :style="$q.screen.lt.sm ? '' : 'height: 60vh; overflow: scroll;' ">
<q-card class="q-gutter-md" style="width: 690px;"> <q-card class="col-12 cardSp1" bordered>
<q-card bordered style="border: 1px solid #d6dee1"> <div class="text-weight-bold row items-center bg-grey-2 col-12">
<div class="text-weight-bold row items-center bg-grey-2"> <span class="q-ml-lg q-my-sm">ข้อมูลส่วนตัว</span>
<span class="q-ml-lg q-my-sm">ข้อมูลส่วนตัว</span> </div>
</div> <div class="col-12"><q-separator /></div>
<q-separator />
<div class="row q-pa-sm"> <div class="row col-12 q-pa-sm">
<div class="row q-col-gutter-sm">
<div class="col-xs-6 col-sm-4 col-md-3"> <div class="col-xs-6 col-sm-4 col-md-3">
<q-input <q-input
borderless borderless
@ -245,9 +245,6 @@ onMounted(async () => {
readonly readonly
label="วันเดือนปีเกิด" label="วันเดือนปีเกิด"
> >
<template v-slot:prepend>
<q-icon class="size-icon" name="o_calendar_today" />
</template>
</q-input> </q-input>
</div> </div>
<div class="col-xs-6 col-sm-4 col-md-3"> <div class="col-xs-6 col-sm-4 col-md-3">
@ -266,14 +263,6 @@ onMounted(async () => {
label="ตำแหน่งเลขที่" label="ตำแหน่งเลขที่"
/> />
</div> </div>
<div class="col-xs-6 col-sm-4 col-md-3">
<q-input
borderless
readonly
:model-value="formDetail.oc"
label="สังกัด"
/>
</div>
<div class="col-xs-6 col-sm-4 col-md-3"> <div class="col-xs-6 col-sm-4 col-md-3">
<q-input <q-input
borderless borderless
@ -309,17 +298,26 @@ onMounted(async () => {
label="อายุราชการ" label="อายุราชการ"
/> />
</div> </div>
<div class="col-xs-12 col-sm-9">
<q-input
borderless
readonly
:model-value="formDetail.oc"
label="สังกัด"
/>
</div>
</div> </div>
</q-card> </div>
</q-card>
<q-card bordered style="border: 1px solid #d6dee1"> <q-card class="col-12 cardSp1" bordered>
<div class="text-weight-bold row items-center bg-grey-2"> <div class="text-weight-bold row items-center bg-grey-2 col-12">
<span class="q-ml-lg q-my-sm">ประวัติการศึกษา </span> <span class="q-ml-lg q-my-sm">ประวัติการศึกษา </span>
</div> </div>
<q-separator /> <div class="col-12"><q-separator /></div>
<div v-if="formDetail.educations && formDetail.educations.length > 0"> <div class="row col-12 q-pa-sm" v-if="formDetail.educations && formDetail.educations.length > 0">
<div <div
class="row q-pa-sm" class="row q-col-gutter-sm"
v-for="(education, index) in formDetail.educations" v-for="(education, index) in formDetail.educations"
:key="index" :key="index"
> >
@ -348,9 +346,6 @@ onMounted(async () => {
readonly readonly
label="ตั้งแต่" label="ตั้งแต่"
> >
<template v-slot:prepend>
<q-icon class="size-icon" name="o_calendar_today" />
</template>
</q-input> </q-input>
</div> </div>
@ -361,9 +356,6 @@ onMounted(async () => {
readonly readonly
label="ถึง" label="ถึง"
> >
<template v-slot:prepend>
<q-icon class="size-icon" name="o_calendar_today" />
</template>
</q-input> </q-input>
</div> </div>
<div class="col-xs-6 col-sm-4 col-md-3"> <div class="col-xs-6 col-sm-4 col-md-3">
@ -373,9 +365,6 @@ onMounted(async () => {
readonly readonly
label="วันที่สำเร็จการศึกษา" label="วันที่สำเร็จการศึกษา"
> >
<template v-slot:prepend>
<q-icon class="size-icon" name="o_calendar_today" />
</template>
</q-input> </q-input>
</div> </div>
@ -431,74 +420,67 @@ onMounted(async () => {
label="ประเทศ" label="ประเทศ"
/> />
</div> </div>
</div>
</div> </div>
<div v-else class="row col-12 q-pa-md">ไม่มีประวัติการศึกษา</div> </div>
<q-separator /> <div v-else class="row col-12 q-pa-md">ไม่มีประวัติการศึกษา</div>
</q-card>
<q-card bordered style="border: 1px solid #d6dee1">
<div class="text-weight-bold row items-center bg-grey-2">
<span class="q-ml-lg q-my-sm">ใบอนุญาตประกอบวิชาชีพ</span>
</div>
<q-separator />
<div class="row q-pa-sm">
<div class="col-xs-12 col-sm-12 col-md-12">
<TableData
:columns="columnsCertificates"
:row="formDetail.certificates"
/>
</div>
</div>
</q-card>
<q-card bordered style="border: 1px solid #d6dee1">
<div class="text-weight-bold row items-center bg-grey-2">
<span class="q-ml-lg q-my-sm">ประวัติการรับราชการ</span>
</div>
<q-separator />
<div class="row q-pa-sm">
<div class="col-xs-12 col-sm-12 col-md-12">
<TableData :columns="columnSalaries" :row="formDetail.salaries" />
</div>
</div>
</q-card>
<q-card bordered style="border: 1px solid #d6dee1">
<div class="text-weight-bold row items-center bg-grey-2">
<span class="q-ml-lg q-my-sm">ประวัติการฝึกอบรมดูงาน</span>
</div>
<q-separator />
<div class="row q-pa-sm">
<div class="col-xs-12 col-sm-12 col-md-12">
<TableData :columns="columnTraining" :row="formDetail.trainings" />
</div>
</div>
</q-card>
<q-card bordered style="border: 1px solid #d6dee1">
<div class="text-weight-bold row items-center bg-grey-2">
<span class="q-ml-lg q-my-sm">ประสบการณ์ในการปฏิบัติงาน </span>
</div>
<q-separator />
<div class="row q-pa-sm">
<div class="col-xs-12 col-sm-12 col-md-12">-</div>
</div>
</q-card>
<q-card bordered style="border: 1px solid #d6dee1">
<div class="text-weight-bold row items-center bg-grey-2">
<span class="q-ml-lg q-my-sm">ผลงานที่เคยเสนอขอประเมิน (ถ้ามี)</span>
</div>
<q-separator />
<div class="row q-pa-sm">
<div class="col-xs-12 col-sm-12 col-md-12">
<TableData :columns="columnProjectsProposed" />
</div>
</div>
</q-card>
</q-card> </q-card>
</q-scroll-area>
<q-card class="col-12 cardSp1" bordered>
<div class="text-weight-bold row items-center bg-grey-2 col-12">
<span class="q-ml-lg q-my-sm">ใบอนุญาตประกอบวิชาชีพ</span>
</div>
<div class="col-12"><q-separator /></div>
<TableData
class="col-12"
:columns="columnsCertificates"
:row="formDetail.certificates"
/>
</q-card>
<q-card class="col-12 cardSp1" bordered>
<div class="text-weight-bold row items-center bg-grey-2 col-12">
<span class="q-ml-lg q-my-sm">ประวัติการรับราชการ</span>
</div>
<div class="col-12"><q-separator /></div>
<div class="col-10">
<TableData :columns="columnSalaries" :row="formDetail.salaries" />
</div>
</q-card>
<q-card class="col-12 cardSp1" bordered>
<div class="text-weight-bold row items-center bg-grey-2 col-12">
<span class="q-ml-lg q-my-sm">ประวัติการฝึกอบรมดูงาน</span>
</div>
<div class="col-12"><q-separator /></div>
<TableData class="col-12" :columns="columnTraining" :row="formDetail.trainings"/>
</q-card>
<q-card class="col-12 cardSp1" bordered>
<div class="text-weight-bold row items-center bg-grey-2 col-12">
<span class="q-ml-lg q-my-sm">ประสบการณ์ในการปฏิบัติงาน </span>
</div>
<div class="col-12"><q-separator /></div>
<div class="col-12 q-pa-sm">
-
</div>
</q-card>
<q-card class="col-12 cardSp1" bordered>
<div class="text-weight-bold row items-center bg-grey-2 col-12">
<span class="q-ml-lg q-my-sm">ผลงานที่เคยเสนอขอประเมิน (ถ้ามี)</span>
</div>
<div class="col-12"><q-separator /></div>
<div class="col-10">
<TableData :columns="columnProjectsProposed" />
</div>
</q-card>
</div>
</template> </template>
<style scoped></style> <style >
.cardSp1{
border: 1px solid #d6dee1;
margin-bottom: 10px ;
box-shadow: none !important;
}
</style>

88
src/modules/06_evaluate/components/viewstep/viewStep3.vue
View file

@ -16,54 +16,58 @@ const props = defineProps({
const modalPerview = ref<boolean>(false); const modalPerview = ref<boolean>(false);
const store = useEvaluateStore(); const store = useEvaluateStore();
const tabPanels = store.tabPanels
</script> </script>
<template> <template>
<div class="col-12 row"> <div class="col-12 row">
<q-space /> <div class="col-12 row items-center q-px-sm q-py-xs">
<q-btn <div class="q-pl-sm text-weight-medium" >เอกสารที่อัปโหลด</div>
flat <q-space />
round <q-btn
color="primary" flat
icon="download" color="primary"
target="_blank" icon="download"
:href="props.urlDownloadFile" target="_blank"
> :href="props.urlDownloadFile"
<q-tooltip>ดาวน์โหลด</q-tooltip> >
</q-btn> <q-tooltip>ดาวน์โหลด</q-tooltip>
<q-btn </q-btn>
flat <q-btn
round flat
color="primary" color="primary"
icon="mdi-fullscreen" icon="mdi-fullscreen"
@click="modalPerview = true" @click="modalPerview = true"
><q-tooltip>ดูเต็มจอ</q-tooltip></q-btn ><q-tooltip>ดูเต็มจอ</q-tooltip></q-btn
> >
</div>
<q-tab-panels v-model="store.tabPanels" animated swipeable vertical class="col-12">
<q-tab-panel name="1">
<ViewPDF :pdfSrc="props.pdfSrc" class="col-12" />
</q-tab-panel>
<q-tab-panel name="2">
<ViewPDF :pdfSrc="props.pdfSrc" class="col-12" />
</q-tab-panel>
<q-tab-panel name="3">
<ViewPDF :pdfSrc="props.pdfSrc" class="col-12" />
</q-tab-panel>
<q-tab-panel name="4">
<ViewPDF :pdfSrc="props.pdfSrc" class="col-12" />
</q-tab-panel>
<q-tab-panel name="5">
<ViewPDF :pdfSrc="props.pdfSrc" class="col-12" />
</q-tab-panel>
<q-tab-panel name="6">
<ViewPDF :pdfSrc="props.pdfSrc" class="col-12" />
</q-tab-panel>
</q-tab-panels>
</div> </div>
<q-tab-panels v-model="store.tabPanels" animated swipeable vertical>
<q-tab-panel name="1">
<ViewPDF :pdfSrc="props.pdfSrc" />
</q-tab-panel>
<q-tab-panel name="2">
<ViewPDF :pdfSrc="props.pdfSrc" />
</q-tab-panel>
<q-tab-panel name="3">
<ViewPDF :pdfSrc="props.pdfSrc" />
</q-tab-panel>
<q-tab-panel name="4">
<ViewPDF :pdfSrc="props.pdfSrc" />
</q-tab-panel>
<q-tab-panel name="5">
<ViewPDF :pdfSrc="props.pdfSrc" />
</q-tab-panel>
<q-tab-panel name="6">
<ViewPDF :pdfSrc="props.pdfSrc" />
</q-tab-panel>
</q-tab-panels>
<q-dialog v-model="modalPerview" full-width fullHeight> <q-dialog v-model="modalPerview" full-width fullHeight>
<q-card> <q-card>
<q-card-section> <q-card-section>