แบ่ง Layout ประเมินบุคคลใหม่
This commit is contained in:
Tanyalak
parent
516c78d5ab
commit
c3191c2fb4
7 changed files with 553 additions and 575 deletions
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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 >
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue