แบ่ง 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,23 +577,19 @@ 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"
? "ประเมินชำนาญการ" ? "ประเมินชำนาญการ"
: "ประเมินชำนาญการพิเศษ" : "ประเมินชำนาญการพิเศษ"
}} }}
</div> </div>
<q-space /> <q-space/>
<div>
<q-btn <q-btn
flat flat
round round
@ -601,188 +597,165 @@ onMounted(async () => {
color="primary" color="primary"
icon="history" icon="history"
@click="onClickPopupHistory" @click="onClickPopupHistory"
> >
<q-tooltip>ประวการประเม</q-tooltip> <q-tooltip>ประวการประเม</q-tooltip>
</q-btn> </q-btn>
</div> </div>
<div class="col-12 row"> </div>
<Stepper /> <div>
</div> <Stepper />
</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>
<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 class="col-12 q-pt-xs"> </div>
<div class="row q-col-gutter-md"> <div class="col-3 text-right">
<div <q-btn
:class=" v-if="store.step === 1"
store.step === 2 || :href="externalLink"
store.step === 4 || target="_blank"
store.step === 5 || outline
store.step === 6 || color="blue"
store.step === 8 || dense
store.step === 9 class="q-px-md"
? 'col-xs-12 col-sm-12 row' no-caps
: 'col-xs-12 col-sm-5 row' >
" ตรวจสอบคณสมบ ..
> </q-btn>
<q-card v-if="store.step === 1" flat bordered class="col-12 q-pa-md shadow-0"> </div>
<Step1 </div>
v-if="store.step === 1" <div class="row q-col-gutter-md col-12 q-pt-sm">
@update:spec="updateCheckSpec" <div
:data="formDataStep1" :class="
:educations="formDetail?.educations" store.step === 2 ||
/> store.step === 4 ||
</q-card> store.step === 5 ||
<q-card v-if="store.step === 2" flat bordered class="col-12 shadow-0" :style="$q.screen.lt.sm ? '' : 'height: 60vh; overflow: scroll;' "> store.step === 6 ||
<Step2 store.step === 8 ||
v-if="store.step === 2" store.step === 9
@update:form="updateformCommand" ? 'col-xs-12 col-sm-12 row'
/> : 'col-xs-12 col-sm-5 row'
</q-card> "
<q-card >
v-if="store.step === 3" flat bordered class="col-12 shadow-0"> <q-card flat bordered class="col-12 shadow-0">
<Step3 <Step1
v-if="store.step === 3" v-if="store.step === 1"
@update:file="updateFilePDF" @update:spec="updateCheckSpec"
/> :data="formDataStep1"
</q-card> :educations="formDetail?.educations"
<q-card />
v-if=" store.step === 4 || <Step2
store.step === 5 || store.step === 6 || v-if="store.step === 2"
store.step === 7 || store.step === 8 || @update:form="updateformCommand"
store.step === 9 />
" flat bordered class="col-12 q-pa-md shadow-0"> <Step3
<Step4 v-if="store.step === 4" /> v-if="store.step === 3"
<Step5 v-if="store.step === 5" /> @update:file="updateFilePDF"
<Step6 />
v-if="store.step === 6" <Step4 v-if="store.step === 4" />
@update:form="updateformCommand" <Step5 v-if="store.step === 5" />
/> <Step6
<Step7 v-if="store.step === 6"
v-if="store.step === 7" @update:form="updateformCommand"
@update:file="updateFilePDF" />
/> <Step7
<Step8 v-if="store.step === 8" /> v-if="store.step === 7"
<Step9 v-if="store.step === 9" /> @update:file="updateFilePDF"
</q-card> />
</div> <Step8 v-if="store.step === 8" />
<Step9 v-if="store.step === 9" />
<div class="col-xs-12 col-sm-7" v-if="store.step === 1 || store.step === 3 || store.step === 7"> </q-card>
<q-card </div>
class="row shadow-0" <div
bordered class="col-xs-12 col-sm-7 row"
flat v-if="store.step === 1 || store.step === 3 || store.step === 7"
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
v-if="store.step === 3 && pdfSrc"
:pdfSrc="pdfSrc"
:urlDownloadFile="urlDownloadFile"
/>
</q-card>
<q-card v-if="store.step === 7 && pdfSrc" class="row shadow-0" bordered flat >
<ViewStep7
v-if="store.step === 7 && pdfSrc"
: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
<q-btn v-if="store.step === 3 && pdfSrc"
v-else-if=" :pdfSrc="pdfSrc"
store.step >= store.currentStep && :urlDownloadFile="urlDownloadFile"
(store.step == 3 || store.step == 7)
"
unelevated
label="ยื่นเอกสาร"
color="public"
@click="onCilckNextStep()"
/> />
<ViewStep7
<q-btn v-if="store.step === 7 && pdfSrc"
v-if=" :pdfSrc="pdfSrc"
store.step >= store.currentStep && :urlDownloadFile="urlDownloadFile"
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>
</template> </div>
<div class="q-pt-sm q-gutter-md" align="right">
</q-splitter> <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()"
/>
<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>

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,139 +84,141 @@ onMounted(() => {
</script> </script>
<template> <template>
<q-list dense> <div class="q-pa-md">
<q-item v-ripple class="listItem"> <q-list dense>
<q-item-section avatar> <q-item v-ripple class="listItem">
<q-checkbox <q-item-section avatar>
:disable="store.currentStep > 1" <q-checkbox
keep-color :disable="store.currentStep > 1"
color="primary" keep-color
v-model="formData.isEducationalQft" color="primary"
@update:model-value="updateValue" v-model="formData.isEducationalQft"
/> @update:model-value="updateValue"
</q-item-section> />
<q-item-section> </q-item-section>
<q-item-label <q-item-section>
>ณวการศกษา <q-item-label
<q-btn >ณวการศกษา
flat <q-btn
round flat
dense round
color="info" dense
icon="info" color="info"
@click="openModal(false)" icon="info"
@click="openModal(false)"
>
<q-tooltip>อมลเพมเต</q-tooltip>
</q-btn>
</q-item-label>
</q-item-section>
</q-item>
<q-item v-ripple class="listItem">
<q-item-section avatar>
<q-checkbox
:disable="store.currentStep > 1"
keep-color
color="primary"
v-model="formData.isGovermantServiceHtr"
@update:model-value="updateValue"
/>
</q-item-section>
<q-item-section>
<q-item-label>ประวการรบราชการ </q-item-label>
</q-item-section>
</q-item>
<q-item v-ripple class="listItem">
<q-item-section avatar>
<q-checkbox
:disable="store.currentStep > 1"
keep-color
color="primary"
v-model="formData.isOperatingExp"
@update:model-value="updateValue"
/>
</q-item-section>
<q-item-section>
<q-item-label>ประสบการณในการปฏงาน </q-item-label>
</q-item-section>
</q-item>
<q-item v-ripple class="listItem">
<q-item-section avatar>
<q-checkbox
:disable="store.currentStep > 1"
keep-color
color="primary"
v-model="formData.isMinPeriodOfTenure"
@update:model-value="updateValue"
/>
</q-item-section>
<q-item-section>
<q-item-label
>ระยะเวลาขนตำในการดำรงตำแหนงในสายงานทขอเขารบการคดเลอก
<q-btn
flat
round
dense
color="info"
icon="info"
@click="openModal(true)"
>
<q-tooltip>อมลเพมเต</q-tooltip>
</q-btn></q-item-label
> >
<q-tooltip>อมลเพมเต</q-tooltip> </q-item-section>
</q-btn> </q-item>
</q-item-label> <q-item v-ripple class="listItem">
</q-item-section> <q-item-section avatar>
</q-item> <q-checkbox
<q-item v-ripple class="listItem"> :disable="store.currentStep > 1"
<q-item-section avatar> keep-color
<q-checkbox color="primary"
:disable="store.currentStep > 1" v-model="formData.isHaveSpecificQft"
keep-color @update:model-value="updateValue"
color="primary" />
v-model="formData.isGovermantServiceHtr" </q-item-section>
@update:model-value="updateValue" <q-item-section>
/> <q-item-label
</q-item-section> >ณสมบตรงตามคณสมบเฉพาะ สำหรบตำแหนงทกำหนด
<q-item-section> ในมาตรฐานกำหนดตำแหน</q-item-label
<q-item-label>ประวการรบราชการ </q-item-label>
</q-item-section>
</q-item>
<q-item v-ripple class="listItem">
<q-item-section avatar>
<q-checkbox
:disable="store.currentStep > 1"
keep-color
color="primary"
v-model="formData.isOperatingExp"
@update:model-value="updateValue"
/>
</q-item-section>
<q-item-section>
<q-item-label>ประสบการณในการปฏงาน </q-item-label>
</q-item-section>
</q-item>
<q-item v-ripple class="listItem">
<q-item-section avatar>
<q-checkbox
:disable="store.currentStep > 1"
keep-color
color="primary"
v-model="formData.isMinPeriodOfTenure"
@update:model-value="updateValue"
/>
</q-item-section>
<q-item-section>
<q-item-label
>ระยะเวลาขนตำในการดำรงตำแหนงในสายงานทขอเขารบการคดเลอก
<q-btn
flat
round
dense
color="info"
icon="info"
@click="openModal(true)"
> >
<q-tooltip>อมลเพมเต</q-tooltip> </q-item-section>
</q-btn></q-item-label </q-item>
> <q-item v-ripple class="listItem">
</q-item-section> <q-item-section avatar>
</q-item> <q-checkbox
<q-item v-ripple class="listItem"> :disable="store.currentStep > 1"
<q-item-section avatar> keep-color
<q-checkbox color="primary"
:disable="store.currentStep > 1" v-model="formData.isHaveProLicense"
keep-color @update:model-value="updateValue"
color="primary" />
v-model="formData.isHaveSpecificQft" </q-item-section>
@update:model-value="updateValue" <q-item-section>
/> <q-item-label
</q-item-section> >ใบอนญาตประกอบวชาชพของสายงานตางๆ และ/หร
<q-item-section> ณวเพมเตมครบถวนตามท .. กำหนด (แพทยพยาบาล ศวกรโยธา
<q-item-label สถาปน ฯลฯ)</q-item-label
>ณสมบตรงตามคณสมบเฉพาะ สำหรบตำแหนงทกำหนด >
ในมาตรฐานกำหนดตำแหน</q-item-label </q-item-section>
> </q-item>
</q-item-section> <q-item v-ripple class="listItem">
</q-item> <q-item-section avatar>
<q-item v-ripple class="listItem"> <q-checkbox
<q-item-section avatar> :disable="store.currentStep > 1"
<q-checkbox keep-color
:disable="store.currentStep > 1" color="primary"
keep-color v-model="formData.isHaveMinPeriodOrHoldPos"
color="primary" @update:model-value="updateValue"
v-model="formData.isHaveProLicense" />
@update:model-value="updateValue" </q-item-section>
/> <q-item-section>
</q-item-section> <q-item-label
<q-item-section> >ระยะเวลาขนตำในการดำรงตำแหนงหรอเคยดำรงตำแหนงในสายงานทจะคดเลอกตามคณวของบคคลและระดบตำแหนงทจะคดเลอก</q-item-label
<q-item-label >
>ใบอนญาตประกอบวชาชพของสายงานตางๆ และ/หร </q-item-section>
ณวเพมเตมครบถวนตามท .. กำหนด (แพทยพยาบาล ศวกรโยธา </q-item>
สถาปน ฯลฯ)</q-item-label </q-list>
> </div>
</q-item-section>
</q-item>
<q-item v-ripple class="listItem">
<q-item-section avatar>
<q-checkbox
:disable="store.currentStep > 1"
keep-color
color="primary"
v-model="formData.isHaveMinPeriodOrHoldPos"
@update:model-value="updateValue"
/>
</q-item-section>
<q-item-section>
<q-item-label
>ระยะเวลาขนตำในการดำรงตำแหนงหรอเคยดำรงตำแหนงในสายงานทจะคดเลอกตามคณวของบคคลและระดบตำแหนงทจะคดเลอก</q-item-label
>
</q-item-section>
</q-item>
</q-list>
<PopupCheckFeatures <PopupCheckFeatures
:modal="modal" :modal="modal"

View file

@ -5,17 +5,15 @@ 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 color="orange-5"
color="orange-5" label="รอตรวจสอบคุณสมบัติ"
label="รอตรวจสอบคุณสมบัติ" class="q-pa-sm"
class="q-pa-sm" style="font-size: 16px"
style="font-size: 16px" />
/>
</div>
</div> </div>
</template> </template>

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,268 +213,270 @@ 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;' ">
<q-card class="col-12 cardSp1" bordered> <div class="row col-12">
<div class="text-weight-bold row items-center bg-grey-2 col-12"> <q-card class="col-12 cardSp1" bordered>
<span class="q-ml-lg q-my-sm">อมลสวนต</span> <div class="text-weight-bold row items-center bg-grey-2 col-12">
</div> <span class="q-ml-lg q-my-sm">อมลสวนต</span>
<div class="col-12"><q-separator /></div> </div>
<div class="col-12"><q-separator /></div>
<div class="row col-12 q-pa-sm"> <div class="row col-12 q-pa-sm">
<div class="row q-col-gutter-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
readonly readonly
:model-value="formDetail.prefix" :model-value="formDetail.prefix"
label="คำนำหน้าชื่อ" label="คำนำหน้าชื่อ"
></q-input> ></q-input>
</div>
<div class="col-xs-6 col-sm-4 col-md-3">
<q-input
borderless
readonly
:model-value="formDetail.fullName"
label="ชื่อ - นามสกุล"
/>
</div>
<div class="col-xs-6 col-sm-4 col-md-3">
<q-input
borderless
:model-value="formDetail.birthDate"
readonly
label="วันเดือนปีเกิด"
>
</q-input>
</div>
<div class="col-xs-6 col-sm-4 col-md-3">
<q-input
borderless
readonly
:model-value="formDetail.position"
label="ตำแหน่ง"
/>
</div>
<div class="col-xs-6 col-sm-4 col-md-3">
<q-input
borderless
readonly
:model-value="formDetail.posNo"
label="ตำแหน่งเลขที่"
/>
</div>
<div class="col-xs-6 col-sm-4 col-md-3">
<q-input
borderless
readonly
:model-value="formDetail.salary"
label="เงินเดือน"
/>
</div>
<div class="col-xs-6 col-sm-4 col-md-3">
<q-input
borderless
readonly
:model-value="formDetail.positionLevel"
label="ระดับปัจจุบัน"
/>
</div>
<div class="col-xs-6 col-sm-4 col-md-3">
<q-input
borderless
readonly
:model-value="formDetail.positionLevel"
label="ระดับที่ประเมิน"
/>
</div>
<div class="col-xs-6 col-sm-4 col-md-3">
<q-input
borderless
readonly
:model-value="formDetail.govAge"
label="อายุราชการ"
/>
</div>
<div class="col-xs-12 col-sm-9">
<q-input
borderless
readonly
:model-value="formDetail.oc"
label="สังกัด"
/>
</div>
</div> </div>
<div class="col-xs-6 col-sm-4 col-md-3"> </div>
<q-input </q-card>
borderless
readonly <q-card class="col-12 cardSp1" bordered>
:model-value="formDetail.fullName" <div class="text-weight-bold row items-center bg-grey-2 col-12">
label="ชื่อ - นามสกุล" <span class="q-ml-lg q-my-sm">ประวการศกษา </span>
/> </div>
</div> <div class="col-12"><q-separator /></div>
<div class="col-xs-6 col-sm-4 col-md-3"> <div class="row col-12 q-pa-sm" v-if="formDetail.educations && formDetail.educations.length > 0">
<q-input <div
borderless class="row q-col-gutter-sm"
:model-value="formDetail.birthDate" v-for="(education, index) in formDetail.educations"
readonly :key="index"
label="วันเดือนปีเกิด"
> >
</q-input> <div class="col-xs-6 col-sm-4 col-md-3">
</div> <q-input
<div class="col-xs-6 col-sm-4 col-md-3"> borderless
<q-input readonly
borderless :model-value="education.educationLevel"
readonly label="ระดับศึกษา"
:model-value="formDetail.position" />
label="ตำแหน่ง" </div>
/>
</div>
<div class="col-xs-6 col-sm-4 col-md-3">
<q-input
borderless
readonly
:model-value="formDetail.posNo"
label="ตำแหน่งเลขที่"
/>
</div>
<div class="col-xs-6 col-sm-4 col-md-3">
<q-input
borderless
readonly
:model-value="formDetail.salary"
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
readonly readonly
:model-value="formDetail.positionLevel" :model-value="education.institute"
label="ระดับปัจจุบัน" label="สถานศึกษา"
/> />
</div> </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
readonly :model-value="date2Thai(education.startDate)"
:model-value="formDetail.positionLevel" readonly
label="ระดับที่ประเมิน" label="ตั้งแต่"
/> >
</div> </q-input>
</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
readonly :model-value="date2Thai(education.endDate)"
:model-value="formDetail.govAge" readonly
label="อายุราชการ" label="ถึง"
/> >
</div> </q-input>
<div class="col-xs-12 col-sm-9"> </div>
<q-input <div class="col-xs-6 col-sm-4 col-md-3">
borderless <q-input
readonly borderless
:model-value="formDetail.oc" :model-value="date2Thai(education.finishDate)"
label="สังกัด" readonly
/> label="วันที่สำเร็จการศึกษา"
>
</q-input>
</div>
<div class="col-xs-6 col-sm-4 col-md-3">
<q-input
borderless
readonly
:model-value="education.isEducation ? 'ใช่' : 'ไม่ใช่'"
label="วุฒิการศึกษาในตําแหน่ง"
/>
</div>
<div class="col-xs-6 col-sm-4 col-md-3">
<q-input
borderless
readonly
:model-value="education.degree"
label="วุฒิการศึกษา"
/>
</div>
<div class="col-xs-6 col-sm-4 col-md-3">
<q-input
borderless
readonly
:model-value="education.field"
label="สาขาวิชา/ทาง"
/>
</div>
<div class="col-xs-6 col-sm-4 col-md-3">
<q-input
borderless
readonly
:model-value="education.fundName"
label="ทุน"
/>
</div>
<div class="col-xs-6 col-sm-4 col-md-3">
<q-input
borderless
readonly
:model-value="education.gpa"
label="เกรดเฉลี่ย"
/>
</div>
<div class="col-xs-6 col-sm-4 col-md-6">
<q-input
borderless
readonly
:model-value="education.country"
label="ประเทศ"
/>
</div>
</div> </div>
</div> </div>
</div> <div v-else class="row col-12 q-pa-md">ไมประวการศกษา</div>
</q-card> </q-card>
<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>
</div>
<div class="col-12"><q-separator /></div>
<div class="row col-12 q-pa-sm" v-if="formDetail.educations && formDetail.educations.length > 0">
<div
class="row q-col-gutter-sm"
v-for="(education, index) in formDetail.educations"
:key="index"
>
<div class="col-xs-6 col-sm-4 col-md-3">
<q-input
borderless
readonly
:model-value="education.educationLevel"
label="ระดับศึกษา"
/>
</div>
<div class="col-xs-6 col-sm-4 col-md-3">
<q-input
borderless
readonly
:model-value="education.institute"
label="สถานศึกษา"
/>
</div>
<div class="col-xs-6 col-sm-4 col-md-3">
<q-input
borderless
:model-value="date2Thai(education.startDate)"
readonly
label="ตั้งแต่"
>
</q-input>
</div>
<div class="col-xs-6 col-sm-4 col-md-3">
<q-input
borderless
:model-value="date2Thai(education.endDate)"
readonly
label="ถึง"
>
</q-input>
</div>
<div class="col-xs-6 col-sm-4 col-md-3">
<q-input
borderless
:model-value="date2Thai(education.finishDate)"
readonly
label="วันที่สำเร็จการศึกษา"
>
</q-input>
</div>
<div class="col-xs-6 col-sm-4 col-md-3">
<q-input
borderless
readonly
:model-value="education.isEducation ? 'ใช่' : 'ไม่ใช่'"
label="วุฒิการศึกษาในตําแหน่ง"
/>
</div>
<div class="col-xs-6 col-sm-4 col-md-3">
<q-input
borderless
readonly
:model-value="education.degree"
label="วุฒิการศึกษา"
/>
</div>
<div class="col-xs-6 col-sm-4 col-md-3">
<q-input
borderless
readonly
:model-value="education.field"
label="สาขาวิชา/ทาง"
/>
</div>
<div class="col-xs-6 col-sm-4 col-md-3">
<q-input
borderless
readonly
:model-value="education.fundName"
label="ทุน"
/>
</div>
<div class="col-xs-6 col-sm-4 col-md-3">
<q-input
borderless
readonly
:model-value="education.gpa"
label="เกรดเฉลี่ย"
/>
</div>
<div class="col-xs-6 col-sm-4 col-md-6">
<q-input
borderless
readonly
:model-value="education.country"
label="ประเทศ"
/>
</div>
</div> </div>
</div> <div class="col-12"><q-separator /></div>
<div v-else class="row col-12 q-pa-md">ไมประวการศกษา</div> <TableData
</q-card> class="col-12"
:columns="columnsCertificates"
:row="formDetail.certificates"
/>
</q-card>
<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>
</div> </div>
<div class="col-12"><q-separator /></div> <div class="col-12"><q-separator /></div>
<TableData <div class="col-10">
class="col-12" <TableData :columns="columnSalaries" :row="formDetail.salaries" />
:columns="columnsCertificates" </div>
:row="formDetail.certificates" </q-card>
/>
</q-card>
<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>
</div> </div>
<div class="col-12"><q-separator /></div> <div class="col-12"><q-separator /></div>
<div class="col-10"> <TableData class="col-12" :columns="columnTraining" :row="formDetail.trainings"/>
<TableData :columns="columnSalaries" :row="formDetail.salaries" /> </q-card>
</div>
</q-card>
<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>
</div> </div>
<div class="col-12"><q-separator /></div> <div class="col-12"><q-separator /></div>
<TableData class="col-12" :columns="columnTraining" :row="formDetail.trainings"/> <div class="col-12 q-pa-sm">
</q-card> -
</div>
</q-card>
<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>
</div> </div>
<div class="col-12"><q-separator /></div> <div class="col-12"><q-separator /></div>
<div class="col-12 q-pa-sm"> <div class="col-10">
- <TableData :columns="columnProjectsProposed" />
</div> </div>
</q-card> </q-card>
</div>
<q-card class="col-12 cardSp1" bordered> </q-card>
<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 > <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>