แบ่ง Layout ประเมินบุคคลใหม่

This commit is contained in:
Tanyalak 2024-01-17 09:27:57 +07:00
parent 516c78d5ab
commit c3191c2fb4
7 changed files with 553 additions and 575 deletions

View file

@ -559,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="toptitle2 text-white col-12 row items-center"> <div class="toptitle text-white col-12 row items-center">
<q-btn <q-btn
icon="mdi-arrow-left" icon="mdi-arrow-left"
unelevated unelevated
@ -577,15 +577,10 @@ onMounted(async () => {
<div class="col-xs-12 col-sm-12 col-md-11 row"> <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-card bordered class="col-12 row caedNone">
<q-splitter <div class="col-xs-12 col-sm-3">
v-model="splitterModel" <div class="col-12 row no-wrap">
:style="$q.screen.lt.sm ? 'height: 74vh;' : 'height: auto;'"
:horizontal="$q.screen.lt.sm"
>
<template v-slot:before>
<div class="col-12 row q-py-md q-px-lg" > <div class="col-12 row q-py-md q-px-lg" >
<div class="col-12 row items-center q-pa-none no-wrap"> <div class="col-12 row items-center no-wrap">
<div class="toptitle2"> <div class="toptitle2">
{{ {{
route.params.type === "expert" route.params.type === "expert"
@ -593,7 +588,8 @@ onMounted(async () => {
: "ประเมินชำนาญการพิเศษ" : "ประเมินชำนาญการพิเศษ"
}} }}
</div> </div>
<q-space /> <q-space/>
<div>
<q-btn <q-btn
flat flat
round round
@ -605,36 +601,40 @@ onMounted(async () => {
<q-tooltip>ประวการประเม</q-tooltip> <q-tooltip>ประวการประเม</q-tooltip>
</q-btn> </q-btn>
</div> </div>
<div class="col-12 row"> </div>
<div>
<Stepper /> <Stepper />
</div> </div>
</div> </div>
</template> <div class="col-12 row">
<q-separator vertical/>
</div>
</div>
</div>
<template v-slot:after> <div class="col-xs-12 col-sm-9 q-pa-md" v-if="showLoadStatus">
<div class="col-12 row q-pa-md" > <div class="col-12 row items-center">
<div class="col-12 row" v-if="showLoadStatus"> <div class="col-9">
<div class="toptitle2 q-pt-xs items-center"> <div class="toptitle2">
{{ store.step }}.{{ store.title[store.step - 1] }} {{ store.step }}.{{ store.title[store.step - 1] }}
</div> </div>
<q-space /> </div>
<div> <div class="col-3 text-right">
<q-btn <q-btn
v-if="store.step === 1" v-if="store.step === 1"
:href="externalLink" :href="externalLink"
target="_blank" target="_blank"
outline outline
color="blue" color="blue"
no-caps
dense dense
class="q-px-sm" class="q-px-md"
no-caps
> >
ตรวจสอบคณสมบ .. ตรวจสอบคณสมบ ..
</q-btn> </q-btn>
</div> </div>
</div> </div>
<div class="col-12 q-pt-xs"> <div class="row q-col-gutter-md col-12 q-pt-sm">
<div class="row q-col-gutter-md">
<div <div
:class=" :class="
store.step === 2 || store.step === 2 ||
@ -647,33 +647,21 @@ onMounted(async () => {
: 'col-xs-12 col-sm-5 row' : 'col-xs-12 col-sm-5 row'
" "
> >
<q-card v-if="store.step === 1" flat bordered class="col-12 q-pa-md shadow-0"> <q-card flat bordered class="col-12 shadow-0">
<Step1 <Step1
v-if="store.step === 1" v-if="store.step === 1"
@update:spec="updateCheckSpec" @update:spec="updateCheckSpec"
:data="formDataStep1" :data="formDataStep1"
:educations="formDetail?.educations" :educations="formDetail?.educations"
/> />
</q-card>
<q-card v-if="store.step === 2" flat bordered class="col-12 shadow-0" :style="$q.screen.lt.sm ? '' : 'height: 60vh; overflow: scroll;' ">
<Step2 <Step2
v-if="store.step === 2" v-if="store.step === 2"
@update:form="updateformCommand" @update:form="updateformCommand"
/> />
</q-card>
<q-card
v-if="store.step === 3" flat bordered class="col-12 shadow-0">
<Step3 <Step3
v-if="store.step === 3" v-if="store.step === 3"
@update:file="updateFilePDF" @update:file="updateFilePDF"
/> />
</q-card>
<q-card
v-if=" store.step === 4 ||
store.step === 5 || store.step === 6 ||
store.step === 7 || store.step === 8 ||
store.step === 9
" flat bordered class="col-12 q-pa-md shadow-0">
<Step4 v-if="store.step === 4" /> <Step4 v-if="store.step === 4" />
<Step5 v-if="store.step === 5" /> <Step5 v-if="store.step === 5" />
<Step6 <Step6
@ -688,39 +676,30 @@ onMounted(async () => {
<Step9 v-if="store.step === 9" /> <Step9 v-if="store.step === 9" />
</q-card> </q-card>
</div> </div>
<div
<div class="col-xs-12 col-sm-7" v-if="store.step === 1 || store.step === 3 || store.step === 7"> class="col-xs-12 col-sm-7 row"
<q-card v-if="store.step === 1 || store.step === 3 || store.step === 7"
class="row shadow-0"
bordered
flat
v-if="store.step === 1"
> >
<div class="col-12 ">
<ViewStep1 <ViewStep1
v-if="store.step === 1" v-if="store.step === 1"
@update:formDeital="updateFormDetail" @update:formDeital="updateFormDetail"
:data="formDataStep1" :data="formDataStep1"
/> />
</q-card>
<q-card v-if="store.step === 3 && pdfSrc" class="row shadow-0" bordered flat >
<ViewStep3 <ViewStep3
v-if="store.step === 3 && pdfSrc" v-if="store.step === 3 && pdfSrc"
:pdfSrc="pdfSrc" :pdfSrc="pdfSrc"
:urlDownloadFile="urlDownloadFile" :urlDownloadFile="urlDownloadFile"
/> />
</q-card>
<q-card v-if="store.step === 7 && pdfSrc" class="row shadow-0" bordered flat >
<ViewStep7 <ViewStep7
v-if="store.step === 7 && pdfSrc" v-if="store.step === 7 && pdfSrc"
:pdfSrc="pdfSrc" :pdfSrc="pdfSrc"
:urlDownloadFile="urlDownloadFile" :urlDownloadFile="urlDownloadFile"
/> />
</q-card>
</div> </div>
</div> </div>
</div> </div>
<div class="row col-12 q-pt-sm"> <div class="q-pt-sm q-gutter-md" align="right">
<q-space />
<q-btn <q-btn
v-if=" v-if="
store.step >= store.currentStep && store.step >= store.currentStep &&
@ -777,12 +756,6 @@ onMounted(async () => {
/> />
</div> </div>
</div> </div>
</template>
</q-splitter>
</q-card> </q-card>
</div> </div>
</div> </div>

View file

@ -148,7 +148,7 @@ watch(props, () => {
<q-card style="width: 40vw"> <q-card style="width: 40vw">
<DialogHeader :tittle="props.title" :close="props.closeModal" /> <DialogHeader :tittle="props.title" :close="props.closeModal" />
<q-separator /> <q-separator />
<q-card-section class="q-pa-sm bg-grey-1"> <q-card-section class="q-px-sm q-pt-none q-pb-sm bg-grey-1">
<Table <Table
style="max-height: 80vh" style="max-height: 80vh"
:view-mode="false" :view-mode="false"

View file

@ -84,6 +84,7 @@ onMounted(() => {
</script> </script>
<template> <template>
<div class="q-pa-md">
<q-list dense> <q-list dense>
<q-item v-ripple class="listItem"> <q-item v-ripple class="listItem">
<q-item-section avatar> <q-item-section avatar>
@ -217,6 +218,7 @@ onMounted(() => {
</q-item-section> </q-item-section>
</q-item> </q-item>
</q-list> </q-list>
</div>
<PopupCheckFeatures <PopupCheckFeatures
:modal="modal" :modal="modal"

View file

@ -5,8 +5,7 @@ const status = ref<string>("WAIT_CHECK_DOC_V1");
</script> </script>
<template> <template>
<div class="row"> <div class="col-12 row justify-center">
<div class="col-12 text-center">
<q-badge <q-badge
v-if="status == 'WAIT_CHECK_DOC_V1'" v-if="status == 'WAIT_CHECK_DOC_V1'"
outline outline
@ -16,7 +15,6 @@ const status = ref<string>("WAIT_CHECK_DOC_V1");
style="font-size: 16px" style="font-size: 16px"
/> />
</div> </div>
</div>
</template> </template>
<style scoped></style> <style scoped></style>

View file

@ -125,7 +125,7 @@ watch(
<q-separator /> <q-separator />
<q-card-section class="q-pt-none"> <q-card-section class="q-pt-none">
<div class="col-xs-12 col-sm-12 col-md-12 row q-col-gutter-md"> <div class="col-xs-12 col-sm-12 col-md-12 row q-col-gutter-md">
<div class="col-12 q-mt-sm"> <div class="col-12">
<q-table <q-table
ref="table" ref="table"
flat flat

View file

@ -213,7 +213,8 @@ onMounted(async () => {
</script> </script>
<template> <template>
<div class="col-12 row q-pa-md" :style="$q.screen.lt.sm ? '' : 'height: 60vh; overflow: scroll;' "> <q-card bordered class="col-12 row shadow-0 q-pa-md" :style="$q.screen.lt.sm ? '' : 'height: 60vh; overflow: scroll;' ">
<div class="row col-12">
<q-card class="col-12 cardSp1" bordered> <q-card class="col-12 cardSp1" bordered>
<div class="text-weight-bold row items-center bg-grey-2 col-12"> <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>
@ -475,6 +476,7 @@ onMounted(async () => {
</div> </div>
</q-card> </q-card>
</div> </div>
</q-card>
</template> </template>
<style > <style >

View file

@ -20,7 +20,7 @@ const tabPanels = store.tabPanels
</script> </script>
<template> <template>
<div class="col-12 row"> <q-card bordered class="col-12 row shadow-0">
<div class="col-12 row items-center q-px-sm q-py-xs"> <div class="col-12 row items-center q-px-sm q-py-xs">
<div class="q-pl-sm text-weight-medium" >เอกสารทปโหลด</div> <div class="q-pl-sm text-weight-medium" >เอกสารทปโหลด</div>
<q-space /> <q-space />
@ -29,6 +29,7 @@ const tabPanels = store.tabPanels
color="primary" color="primary"
icon="download" icon="download"
target="_blank" target="_blank"
dense
:href="props.urlDownloadFile" :href="props.urlDownloadFile"
> >
<q-tooltip>ดาวนโหลด</q-tooltip> <q-tooltip>ดาวนโหลด</q-tooltip>
@ -37,6 +38,8 @@ const tabPanels = store.tabPanels
flat flat
color="primary" color="primary"
icon="mdi-fullscreen" icon="mdi-fullscreen"
dense
class="q-ml-sm"
@click="modalPerview = true" @click="modalPerview = true"
><q-tooltip>เตมจอ</q-tooltip></q-btn ><q-tooltip>เตมจอ</q-tooltip></q-btn
> >
@ -66,7 +69,7 @@ const tabPanels = store.tabPanels
<ViewPDF :pdfSrc="props.pdfSrc" class="col-12" /> <ViewPDF :pdfSrc="props.pdfSrc" class="col-12" />
</q-tab-panel> </q-tab-panel>
</q-tab-panels> </q-tab-panels>
</div> </q-card>
<q-dialog v-model="modalPerview" full-width fullHeight> <q-dialog v-model="modalPerview" full-width fullHeight>
<q-card> <q-card>