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

View file

@ -148,7 +148,7 @@ watch(props, () => {
<q-card style="width: 40vw">
<DialogHeader :tittle="props.title" :close="props.closeModal" />
<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
style="max-height: 80vh"
:view-mode="false"

View file

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

View file

@ -5,17 +5,15 @@ const status = ref<string>("WAIT_CHECK_DOC_V1");
</script>
<template>
<div class="row">
<div class="col-12 text-center">
<q-badge
v-if="status == 'WAIT_CHECK_DOC_V1'"
outline
color="orange-5"
label="รอตรวจสอบคุณสมบัติ"
class="q-pa-sm"
style="font-size: 16px"
/>
</div>
<div class="col-12 row justify-center">
<q-badge
v-if="status == 'WAIT_CHECK_DOC_V1'"
outline
color="orange-5"
label="รอตรวจสอบคุณสมบัติ"
class="q-pa-sm"
style="font-size: 16px"
/>
</div>
</template>

View file

@ -125,7 +125,7 @@ watch(
<q-separator />
<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-12 q-mt-sm">
<div class="col-12">
<q-table
ref="table"
flat

View file

@ -213,268 +213,270 @@ onMounted(async () => {
</script>
<template>
<div class="col-12 row q-pa-md" :style="$q.screen.lt.sm ? '' : 'height: 60vh; overflow: scroll;' ">
<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>
<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>
<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="row col-12 q-pa-sm">
<div class="row q-col-gutter-sm">
<div class="col-xs-6 col-sm-4 col-md-3">
<q-input
borderless
readonly
:model-value="formDetail.prefix"
label="คำนำหน้าชื่อ"
></q-input>
<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">
<q-input
borderless
readonly
:model-value="formDetail.prefix"
label="คำนำหน้าชื่อ"
></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 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="วันเดือนปีเกิด"
</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="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"
>
</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="education.educationLevel"
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="education.institute"
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
:model-value="date2Thai(education.startDate)"
readonly
label="ตั้งแต่"
>
</q-input>
</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 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>
</q-card>
<div v-else class="row col-12 q-pa-md">ไมประวการศกษา</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="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>
<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>
<div v-else class="row col-12 q-pa-md">ไมประวการศกษา</div>
</q-card>
<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>
<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-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-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>
<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>
</q-card>
</template>
<style >

View file

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