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

ปรับ ui ประเมิน step 1-5

Browse source
This commit is contained in:
Tanyalak 2024-01-18 11:02:23 +07:00
parent 915df2cc92
commit 814c25d81a
13 changed files with 631 additions and 576 deletions
Download patch file Download diff file Expand all files Collapse all files

25
src/modules/12_evaluatePersonal/components/Detail/viewstep/tableStep1.vue
View file

@ -12,19 +12,18 @@ const props = defineProps({
</script>
<template>
<d-table
ref="table"
:columns="props.columns"
:rows="props.row"
row-key="name"
flat
bordered
dense
class="custom-header-table"
style="width: 610px"
:rows-per-page-options="[10, 25, 50, 100]"
>
</d-table>
<q-table
ref="table"
flat
bordered
:columns="props.columns"
:rows="props.row"
dense
:rows-per-page-options="[10, 25, 50, 100]"
virtual-scroll
class="row col-12"
>
</q-table>
</template>
<style scoped></style>

23
src/modules/12_evaluatePersonal/components/Detail/viewstep/viewPDF.vue
View file

@ -52,9 +52,10 @@ onMounted(() => {
<q-splitter
v-model="splitterModel"
horizontal
class="bg-grey-1 q-px-sm"
:style="
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;'
"
before-class="overflow-hidden disable"
@ -67,8 +68,9 @@ onMounted(() => {
<q-btn
padding="xs"
icon="mdi-chevron-left"
color="grey-2"
text-color="grey-5"
color="grey-4"
unelevated
text-color="grey-8"
size="md"
class="my-auto"
@click="backPage"
@ -84,8 +86,9 @@ onMounted(() => {
<q-btn
padding="xs"
icon="mdi-chevron-right"
color="grey-2"
text-color="grey-5"
color="grey-4"
unelevated
text-color="grey-8"
size="md"
@click="nextPage"
:disable="page === numOfPages"
@ -106,8 +109,9 @@ onMounted(() => {
<q-btn
padding="xs"
icon="mdi-chevron-left"
color="grey-2"
text-color="grey-5"
color="grey-4"
unelevated
text-color="grey-8"
size="md"
class="my-auto"
@click="backPage"
@ -124,8 +128,9 @@ onMounted(() => {
<q-btn
padding="xs"
icon="mdi-chevron-right"
color="grey-2"
text-color="grey-5"
color="grey-4"
unelevated
text-color="grey-8"
size="md"
@click="nextPage"
:disable="page === numOfPages"

193
src/modules/12_evaluatePersonal/components/Detail/viewstep/viewStep1.vue
View file

@ -128,16 +128,16 @@ onMounted(() => {
</script>
<template>
<q-scroll-area style="height: 450px; max=width: 100%">
<div class="q-pa-xs">
<q-card class="q-gutter-md" style="max-width: 100%">
<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 />
<q-card bordered class="col-12 row shadow-0 q-pa-sm" :style="$q.screen.lt.sm ? '' : 'max-height: 64vh; 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 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">
<q-input
borderless
@ -161,9 +161,6 @@ onMounted(() => {
readonly
label="วันเดือนปีเกิด"
>
<template v-slot:prepend>
<q-icon class="size-icon" name="o_calendar_today" />
</template>
</q-input>
</div>
<div class="col-xs-6 col-sm-4 col-md-3">
@ -182,14 +179,6 @@ onMounted(() => {
label="ตำแหน่งเลขที่"
/>
</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">
<q-input
borderless
@ -225,17 +214,27 @@ onMounted(() => {
label="อายุราชการ"
/>
</div>
<div class="col-xs-12 col-sm-9">
<q-input
borderless
readonly
:model-value="formDetail.oc"
label="สังกัด"
autogrow
/>
</div>
</div>
</q-card>
</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 v-if="formDetail.educations && formDetail.educations.length > 0">
<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-pa-sm"
class="row q-col-gutter-sm"
v-for="(education, index) in formDetail.educations"
:key="index"
>
@ -264,9 +263,6 @@ onMounted(() => {
readonly
label="ตั้งแต่"
>
<template v-slot:prepend>
<q-icon class="size-icon" name="o_calendar_today" />
</template>
</q-input>
</div>
@ -277,9 +273,6 @@ onMounted(() => {
readonly
label="ถึง"
>
<template v-slot:prepend>
<q-icon class="size-icon" name="o_calendar_today" />
</template>
</q-input>
</div>
<div class="col-xs-6 col-sm-4 col-md-3">
@ -289,9 +282,6 @@ onMounted(() => {
readonly
label="วันที่สำเร็จการศึกษา"
>
<template v-slot:prepend>
<q-icon class="size-icon" name="o_calendar_today" />
</template>
</q-input>
</div>
@ -347,84 +337,67 @@ onMounted(() => {
label="ประเทศ"
/>
</div>
</div>
</div>
<div v-else class="row col-12 q-pa-md">ไม่มีประวัติการศึกษา</div>
<q-separator />
</q-card>
</div>
<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 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 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 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 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 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 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">
<TableData :columns="columnProjectsProposed" />
</div>
</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-scroll-area>
</q-card>
</template>
<style >
.cardSp1{
border: 1px solid #d6dee1;
margin-bottom: 10px ;
box-shadow: none !important;
}
</style>

87
src/modules/12_evaluatePersonal/components/Detail/viewstep/viewStep3.vue
View file

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