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

ปรับข้อมูลทะเบียนประมาณแท็ปข้อมูลส่วนตัว

Browse source
This commit is contained in:
Tanyalak 2024-04-22 17:08:23 +07:00
parent 56c009cc8a
commit 8ffd88a469
6 changed files with 438 additions and 446 deletions
Download patch file Download diff file Expand all files Collapse all files

73
src/modules/04_registryNew/components/detail/PersonalInformation/01_Profile.vue
View file

@ -461,26 +461,16 @@ onMounted(async () => {
<!-- Edit Dialog -->
<q-dialog v-model="modal" persistent>
<q-layout
view="lHh lpr lFf"
container
style="height: 500px"
class="bg-white"
>
<q-card>
<q-form greedy @submit.prevent @validation-success="onSubmit">
<q-header>
<q-toolbar>
<DialogHeader
tittle="แก้ไขประวัติส่วนตัว"
:close="() => (modal = false)"
/>
</q-toolbar>
<q-separator color="grey-4" />
</q-header>
<DialogHeader
tittle="แก้ไขประวัติส่วนตัว"
:close="() => (modal = false)"
/>
<q-page-container>
<q-page class="q-pa-md">
<div class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs">
<q-separator />
<q-card-section style="max-height: 50vh" class="scroll">
<div class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs">
<div class="col-xs-6 col-sm-6 col-md-6">
<q-input
dense
@ -749,13 +739,12 @@ onMounted(async () => {
/>
</div>
</div>
</q-page>
</q-page-container>
</q-card-section>
<q-footer>
<q-separator color="grey-4" />
<q-toolbar class="fit row wrap justify-end items-start content-start">
<q-btn
<q-separator />
<q-card-actions align="right">
<q-btn
dense
unelevated
label="บันทึก"
@ -766,32 +755,21 @@ onMounted(async () => {
>
<q-tooltip>บันทึกข้อมูล</q-tooltip>
</q-btn>
</q-toolbar>
</q-footer>
</q-card-actions>
</q-form>
</q-layout>
</q-card>
</q-dialog>
<q-dialog v-model="modalHistory" persistent>
<q-layout
view="lHh lpr lFf"
container
style="height: 500px; min-width: 80%"
class="bg-white"
>
<q-header>
<q-toolbar>
<DialogHeader
<q-card style="min-width: 80%">
<DialogHeader
tittle="ประวัติแก้ไขข้อมูลส่วนตัว"
:close="() => (modalHistory = false)"
/>
</q-toolbar>
<q-separator color="grey-4" />
</q-header>
<q-separator />
<q-page-container>
<q-page class="q-pa-md">
<div class="row q-gutter-sm q-mb-sm">
<q-card-section style="max-height: 50vh" class="scroll">
<div class="row q-gutter-sm q-mb-sm">
<q-space />
<q-input
standout
@ -864,9 +842,14 @@ onMounted(async () => {
</q-tr>
</template>
</d-table>
</q-page>
</q-page-container>
</q-layout>
</q-card-section>
<q-separator />
<q-card-actions align="right">
</q-card-actions>
</q-card>
</q-dialog>
</template>

588
src/modules/04_registryNew/components/detail/PersonalInformation/02_NameChangeHistory.vue
View file

@ -683,237 +683,224 @@ watch(
</d-table>
<q-dialog v-model="dialog" persistent>
<q-layout
view="lHh lpr lFf"
container
style="height: 350px"
class="bg-white"
>
<q-card>
<q-form @submit.prevent greedy @validation-success="onSubmit()">
<q-header>
<q-toolbar>
<dialog-header
:tittle="dialogStatus === 'edit' ? 'แก้ไขข้อมูล' : 'เพิ่มข้อมูล'"
:close="closeDialog"
/>
</q-toolbar>
<q-separator color="grey-4" />
</q-header>
<dialog-header
:tittle="dialogStatus === 'edit' ? 'แก้ไขข้อมูล' : 'เพิ่มข้อมูล'"
:close="closeDialog"
/>
<q-separator color="grey-4" />
<q-page-container>
<q-page class="q-pa-md">
<div class="row q-mb-sm">
<div class="col-5">
<q-select
outlined
v-model="changeNameData.status"
:options="statusOption"
label="สถานะการเปลี่ยนชื่อ"
use-input
hide-bottom-space
input-debounce="0"
:rules="[
(val) => !!val || `${'กรุณาเลือกสถานะการเปลี่ยนชื่อ'}`,
]"
@filter="(inputValue:string,
doneFn:Function) => filterSelector(inputValue, doneFn,'statusOptions'
) "
dense
/>
</div>
<q-card-section style="max-height: 50vh" class="scroll">
<div class="row q-mb-sm">
<div class="col-5">
<q-select
outlined
v-model="changeNameData.status"
:options="statusOption"
label="สถานะการเปลี่ยนชื่อ"
use-input
hide-bottom-space
input-debounce="0"
:rules="[
(val) => !!val || `${'กรุณาเลือกสถานะการเปลี่ยนชื่อ'}`,
]"
@filter="(inputValue:string,
doneFn:Function) => filterSelector(inputValue, doneFn,'statusOptions'
) "
dense
/>
</div>
<div class="row q-gutter-sm q-mb-md">
<div class="col">
<q-select
:readonly="
!changeNameData.status ||
(changeNameData.status !== 'เปลี่ยนคำนำหน้าชื่อ' &&
changeNameData.status !== 'เปลี่ยนคำนำหน้าชื่อ และชื่อ' &&
changeNameData.status !==
'เปลี่ยนคำนำหน้าชื่อ และนามสกุล' &&
changeNameData.status !==
'เปลี่ยนคำนำหน้าชื่อ และชื่อ-นามสกุล')
"
v-model="changeNameData.prefix"
:options="store.Ops.prefixOps"
label="คำนำหน้าชื่อ"
dense
:class="
!changeNameData.status ||
(changeNameData.status !== 'เปลี่ยนคำนำหน้าชื่อ' &&
changeNameData.status !== 'เปลี่ยนคำนำหน้าชื่อ และชื่อ' &&
changeNameData.status !==
'เปลี่ยนคำนำหน้าชื่อ และนามสกุล' &&
changeNameData.status !==
'เปลี่ยนคำนำหน้าชื่อ และชื่อ-นามสกุล')
? ''
: 'inputgreen'
"
outlined
use-input
lazy-rules
emit-value
map-options
:rules="[(val) => !!val || `${'กรุณาเลือกคำนำหน้าชื่อ'}`]"
hide-bottom-space
input-debounce="0"
option-label="name"
option-value="name"
@filter="(inputValue:string,
doneFn:Function) => filterSelector(inputValue, doneFn,'prefixOps'
) "
/>
</div>
<div class="col">
<q-input
:readonly="
!changeNameData.status ||
(changeNameData.status !== 'เปลี่ยนชื่อ' &&
changeNameData.status !== 'เปลี่ยนคำนำหน้าชื่อ และชื่อ' &&
changeNameData.status !== 'เปลี่ยนชื่อ-นามสกุล' &&
changeNameData.status !==
'เปลี่ยนคำนำหน้าชื่อ และชื่อ-นามสกุล')
"
outlined
v-model="changeNameData.firstName"
label="ชื่อ"
bg-color="white"
dense
:class="
!changeNameData.status ||
(changeNameData.status !== 'เปลี่ยนชื่อ' &&
changeNameData.status !== 'เปลี่ยนคำนำหน้าชื่อ และชื่อ' &&
changeNameData.status !== 'เปลี่ยนชื่อ-นามสกุล' &&
changeNameData.status !==
'เปลี่ยนคำนำหน้าชื่อ และชื่อ-นามสกุล')
? ''
: 'inputgreen'
"
:rules="[(val) => !!val || `${'กรุณากรอกชื่อ'}`]"
hide-bottom-space
/>
</div>
<div class="col">
<q-input
:readonly="
!changeNameData.status ||
(changeNameData.status !== 'เปลี่ยนนามสกุล' &&
changeNameData.status !== 'เปลี่ยนชื่อ-นามสกุล' &&
changeNameData.status !==
'เปลี่ยนคำนำหน้าชื่อ และนามสกุล' &&
changeNameData.status !==
'เปลี่ยนคำนำหน้าชื่อ และชื่อ-นามสกุล')
"
outlined
v-model="changeNameData.lastName"
label="นามสกุล"
bg-color="white"
dense
:class="
!changeNameData.status ||
(changeNameData.status !== 'เปลี่ยนนามสกุล' &&
changeNameData.status !== 'เปลี่ยนชื่อ-นามสกุล' &&
changeNameData.status !==
'เปลี่ยนคำนำหน้าชื่อ และนามสกุล' &&
changeNameData.status !==
'เปลี่ยนคำนำหน้าชื่อ และชื่อ-นามสกุล')
? ''
: 'inputgreen'
"
:rules="[(val) => !!val || `${'กรุณากรอกนามสกุล'}`]"
hide-bottom-space
/>
</div>
</div>
<div class="row q-gutter-sm q-mb-md">
<div class="col">
<q-select
:readonly="
!changeNameData.status ||
(changeNameData.status !== 'เปลี่ยนคำนำหน้าชื่อ' &&
changeNameData.status !== 'เปลี่ยนคำนำหน้าชื่อ และชื่อ' &&
changeNameData.status !==
'เปลี่ยนคำนำหน้าชื่อ และนามสกุล' &&
changeNameData.status !==
'เปลี่ยนคำนำหน้าชื่อ และชื่อ-นามสกุล')
"
v-model="changeNameData.prefix"
:options="store.Ops.prefixOps"
label="คำนำหน้าชื่อ"
dense
:class="
!changeNameData.status ||
(changeNameData.status !== 'เปลี่ยนคำนำหน้าชื่อ' &&
changeNameData.status !== 'เปลี่ยนคำนำหน้าชื่อ และชื่อ' &&
changeNameData.status !==
'เปลี่ยนคำนำหน้าชื่อ และนามสกุล' &&
changeNameData.status !==
'เปลี่ยนคำนำหน้าชื่อ และชื่อ-นามสกุล')
? ''
: 'inputgreen'
"
outlined
use-input
lazy-rules
emit-value
map-options
:rules="[(val) => !!val || `${'กรุณาเลือกคำนำหน้าชื่อ'}`]"
hide-bottom-space
input-debounce="0"
option-label="name"
option-value="name"
@filter="(inputValue:string,
doneFn:Function) => filterSelector(inputValue, doneFn,'prefixOps'
) "
/>
</div>
<div class="row">
<q-uploader
color="gray"
type="file"
flat
ref="uploader"
class="full-width"
text-color="white"
:max-size="10000000"
accept=".jpg,.png,.pdf,.csv,.doc,.docx"
bordered
label="[ไฟล์ jpg,png,pdf,csv,doc,docx ขนาดไม่เกิน 10MB]"
@added="(v) => (fileUpload = v[0])"
>
<template v-slot:header="scope">
<div class="row no-wrap items-center q-pa-sm q-gutter-xs">
<q-btn
v-if="scope.queuedFiles.length > 0"
icon="clear_all"
@click="scope.removeQueuedFiles"
round
dense
flat
>
<q-tooltip>ลบทั้งหมด</q-tooltip>
</q-btn>
<q-btn
v-if="scope.uploadedFiles.length > 0"
icon="done_all"
@click="scope.removeUploadedFiles"
round
dense
flat
>
<q-tooltip>ลบไฟล์ที่อัปโหลด</q-tooltip>
</q-btn>
<q-spinner
v-if="scope.isUploading"
class="q-uploader__spinner"
/>
<div class="col">
<div class="q-uploader__title">
{{ "[ไฟล์ jpg,png,pdf,csv,doc,docx ขนาดไม่เกิน 10MB]" }}
</div>
<div class="q-uploader__subtitle">
{{ scope.uploadSizeLabel }} /
{{ scope.uploadProgressLabel }}
</div>
<div class="col">
<q-input
:readonly="
!changeNameData.status ||
(changeNameData.status !== 'เปลี่ยนชื่อ' &&
changeNameData.status !== 'เปลี่ยนคำนำหน้าชื่อ และชื่อ' &&
changeNameData.status !== 'เปลี่ยนชื่อ-นามสกุล' &&
changeNameData.status !==
'เปลี่ยนคำนำหน้าชื่อ และชื่อ-นามสกุล')
"
outlined
v-model="changeNameData.firstName"
label="ชื่อ"
bg-color="white"
dense
:class="
!changeNameData.status ||
(changeNameData.status !== 'เปลี่ยนชื่อ' &&
changeNameData.status !== 'เปลี่ยนคำนำหน้าชื่อ และชื่อ' &&
changeNameData.status !== 'เปลี่ยนชื่อ-นามสกุล' &&
changeNameData.status !==
'เปลี่ยนคำนำหน้าชื่อ และชื่อ-นามสกุล')
? ''
: 'inputgreen'
"
:rules="[(val) => !!val || `${'กรุณากรอกชื่อ'}`]"
hide-bottom-space
/>
</div>
<div class="col">
<q-input
:readonly="
!changeNameData.status ||
(changeNameData.status !== 'เปลี่ยนนามสกุล' &&
changeNameData.status !== 'เปลี่ยนชื่อ-นามสกุล' &&
changeNameData.status !==
'เปลี่ยนคำนำหน้าชื่อ และนามสกุล' &&
changeNameData.status !==
'เปลี่ยนคำนำหน้าชื่อ และชื่อ-นามสกุล')
"
outlined
v-model="changeNameData.lastName"
label="นามสกุล"
bg-color="white"
dense
:class="
!changeNameData.status ||
(changeNameData.status !== 'เปลี่ยนนามสกุล' &&
changeNameData.status !== 'เปลี่ยนชื่อ-นามสกุล' &&
changeNameData.status !==
'เปลี่ยนคำนำหน้าชื่อ และนามสกุล' &&
changeNameData.status !==
'เปลี่ยนคำนำหน้าชื่อ และชื่อ-นามสกุล')
? ''
: 'inputgreen'
"
:rules="[(val) => !!val || `${'กรุณากรอกนามสกุล'}`]"
hide-bottom-space
/>
</div>
</div>
<div class="row">
<q-uploader
color="gray"
type="file"
flat
ref="uploader"
class="full-width"
text-color="white"
:max-size="10000000"
accept=".jpg,.png,.pdf,.csv,.doc,.docx"
bordered
label="[ไฟล์ jpg,png,pdf,csv,doc,docx ขนาดไม่เกิน 10MB]"
@added="(v) => (fileUpload = v[0])"
>
<template v-slot:header="scope">
<div class="row no-wrap items-center q-pa-sm q-gutter-xs">
<q-btn
v-if="scope.queuedFiles.length > 0"
icon="clear_all"
@click="scope.removeQueuedFiles"
round
dense
flat
>
<q-tooltip>ลบทั้งหมด</q-tooltip>
</q-btn>
<q-btn
v-if="scope.uploadedFiles.length > 0"
icon="done_all"
@click="scope.removeUploadedFiles"
round
dense
flat
>
<q-tooltip>ลบไฟล์ที่อัปโหลด</q-tooltip>
</q-btn>
<q-spinner
v-if="scope.isUploading"
class="q-uploader__spinner"
/>
<div class="col">
<div class="q-uploader__title">
{{ "[ไฟล์ jpg,png,pdf,csv,doc,docx ขนาดไม่เกิน 10MB]" }}
</div>
<div class="q-uploader__subtitle">
{{ scope.uploadSizeLabel }} /
{{ scope.uploadProgressLabel }}
</div>
<q-btn
v-if="scope.canAddFiles"
type="a"
icon="add_box"
@click="scope.pickFiles"
round
dense
flat
>
<q-uploader-add-trigger />
<q-tooltip>เลือกไฟล์</q-tooltip>
</q-btn>
<q-btn
v-if="scope.isUploading"
icon="clear"
@click="scope.abort"
round
dense
flat
>
<q-tooltip>ยกเลิกการอัปโหลด</q-tooltip>
</q-btn>
</div>
</template>
</q-uploader>
<div
v-if="alertUpload && dialogStatus === 'create'"
class="row text-negative items-center q-mt-sm"
>
กรุณาอัพโหลดเอกสาร
<q-icon name="mdi-alert-circle q-ml-sm" size="24px" />
</div>
<q-btn
v-if="scope.canAddFiles"
type="a"
icon="add_box"
@click="scope.pickFiles"
round
dense
flat
>
<q-uploader-add-trigger />
<q-tooltip>เลือกไฟล์</q-tooltip>
</q-btn>
<q-btn
v-if="scope.isUploading"
icon="clear"
@click="scope.abort"
round
dense
flat
>
<q-tooltip>ยกเลิกการอัปโหลด</q-tooltip>
</q-btn>
</div>
</template>
</q-uploader>
<div
v-if="alertUpload && dialogStatus === 'create'"
class="row text-negative items-center q-mt-sm"
>
กรุณาอัพโหลดเอกสาร
<q-icon name="mdi-alert-circle q-ml-sm" size="24px" />
</div>
</q-page>
</q-page-container>
<q-footer>
<q-separator color="grey-4" />
<q-toolbar class="fit row wrap justify-end items-start content-start">
<q-btn
</div>
</q-card-section>
<q-separator />
<q-card-actions align="right">
<q-btn
id="onSubmit"
type="submit"
dense
@ -934,99 +921,88 @@ watch(
>
<q-tooltip>บันทึกข้อมูล</q-tooltip>
</q-btn>
</q-toolbar>
</q-footer>
</q-card-actions>
</q-form>
</q-layout>
</q-card>
</q-dialog>
<q-dialog v-model="historyDialog" class="dialog" persistent>
<q-layout
view="lHh lpr lFf"
container
style="height: 500px; min-width: 80%"
class="bg-white"
>
<q-header>
<q-toolbar>
<dialog-header
<q-card style="min-width: 70%">
<dialog-header
tittle="ประวัติแก้ไขการเปลี่ยนชื่อ-นามสกุล"
:close="closeHistoryDialog"
/>
</q-toolbar>
<q-separator color="grey-4" />
</q-header>
<q-separator />
<q-page-container>
<q-page class="q-pa-md">
<q-toolbar style="padding: 0px" class="text-primary q-mb-sm">
<q-space />
<q-input
dense
outlined
bg-color="white"
v-model="historyKeyword"
label="ค้นหา"
class="q-mr-sm"
>
<template v-slot:append>
<q-icon name="search" />
</template>
</q-input>
<q-select
v-model="historyVisibleColumns"
multiple
outlined
dense
bg-color="white"
options-dense
:display-value="$q.lang.table.columns"
emit-value
map-options
:options="historyColumns"
option-value="name"
options-cover
style="min-width: 150px"
/>
</q-toolbar>
<d-table
ref="table"
:columns="historyColumns"
:rows="historyRows"
row-key="name"
flat
bordered
:paging="true"
<q-card-section style="max-height: 50vh" class="scroll">
<q-toolbar style="padding: 0px" class="text-primary q-mb-sm">
<q-space />
<q-input
dense
:filter="historyKeyword"
v-model:pagination="historyPagination"
:rows-per-page-options="[20, 50, 100]"
class="custom-header-table"
:visible-columns="historyVisibleColumns"
outlined
bg-color="white"
v-model="historyKeyword"
label="ค้นหา"
class="q-mr-sm"
>
<template v-slot:header="props">
<q-tr :props="props">
<q-th v-for="col in props.cols" :key="col.name" :props="props">
<span class="text-weight-medium">{{ col.label }}</span>
</q-th>
<q-th auto-width />
</q-tr>
<template v-slot:append>
<q-icon name="search" />
</template>
<template v-slot:body="props">
<q-tr :props="props" class="cursor-pointer">
<q-td v-for="col in props.cols" :key="col.id">
<div>
{{ col.value === "" ? "-" : col.value }}
</div>
</q-td>
<q-td auto-width> </q-td>
</q-tr>
</template>
</d-table>
</q-page>
</q-page-container>
</q-layout>
</q-input>
<q-select
v-model="historyVisibleColumns"
multiple
outlined
dense
bg-color="white"
options-dense
:display-value="$q.lang.table.columns"
emit-value
map-options
:options="historyColumns"
option-value="name"
options-cover
style="min-width: 150px"
/>
</q-toolbar>
<d-table
ref="table"
:columns="historyColumns"
:rows="historyRows"
row-key="name"
flat
bordered
:paging="true"
dense
:filter="historyKeyword"
v-model:pagination="historyPagination"
:rows-per-page-options="[20, 50, 100]"
class="custom-header-table"
:visible-columns="historyVisibleColumns"
>
<template v-slot:header="props">
<q-tr :props="props">
<q-th v-for="col in props.cols" :key="col.name" :props="props">
<span class="text-weight-medium">{{ col.label }}</span>
</q-th>
<q-th auto-width />
</q-tr>
</template>
<template v-slot:body="props">
<q-tr :props="props" class="cursor-pointer">
<q-td v-for="col in props.cols" :key="col.id">
<div>
{{ col.value === "" ? "-" : col.value }}
</div>
</q-td>
<q-td auto-width> </q-td>
</q-tr>
</template>
</d-table>
</q-card-section>
</q-card>
</q-dialog>
</template>

85
src/modules/04_registryNew/components/detail/PersonalInformation/Main.vue
View file

@ -12,52 +12,55 @@ import SpecialSkill from "@/modules/04_registryNew/components/detail/PersonalInf
const tab = ref<string>("1");
</script>
<template>
<div class="row items-center q-mb-md">
<div class="text-dark row items-center text-weight-bold">
<q-icon name="mdi-account" class="q-mr-md" size="sm" />
<h3 class="resigtry-tab-title">ข้อมูลส่วนตัว</h3>
<div class="row items-center q-my-md">
<div class="text-dark row items-center q-px-md">
<q-icon name="mdi-account" class="q-mr-md" size="22px" />
<div class="text-subtitle1 text-weight-bold">ข้อมูลส่วนตัว</div>
</div>
</div>
<q-separator />
<q-tabs
v-model="tab"
class="text-grey"
active-color="blue"
indicator-color="white"
align="left"
narrow-indicator
bordered
>
<q-tab name="1" label="ประวัติส่วนตัว" />
<q-tab name="2" label="ประวัติการเปลี่ยนชื่อ-นามสกุล" />
<q-tab name="3" label="ข้อมูลที่อยู่" />
<q-tab name="4" label="ข้อมูลครอบครัว" />
<q-tab name="5" label="ประวัติการศึกษา" />
<q-tab name="6" label="ความสามารถพิเศษ" />
</q-tabs>
<q-separator />
<q-card>
<q-tabs
v-model="tab"
class="text-grey q-pl-sm"
active-color="blue-8"
align="left"
bordered
narrow-indicator
indicator-color="transparent"
dense
>
<q-tab name="1" label="ประวัติส่วนตัว" />
<q-tab name="2" label="ประวัติการเปลี่ยนชื่อ-นามสกุล" />
<q-tab name="3" label="ข้อมูลที่อยู่" />
<q-tab name="4" label="ข้อมูลครอบครัว" />
<q-tab name="5" label="ประวัติการศึกษา" />
<q-tab name="6" label="ความสามารถพิเศษ" />
</q-tabs>
<q-separator />
<q-tab-panels v-model="tab" animated>
<q-tab-panel name="1">
<Profile />
</q-tab-panel>
<q-tab-panel name="2">
<NameChangeHistory />
</q-tab-panel>
<q-tab-panel name="3">
<Address />
</q-tab-panel>
<q-tab-panel name="4">
<Family />
</q-tab-panel>
<q-tab-panel name="5">
<Education />
</q-tab-panel>
<q-tab-panel name="6">
<SpecialSkill />
</q-tab-panel>
</q-tab-panels>
<q-tab-panels v-model="tab" animated >
<q-tab-panel name="1">
<Profile />
</q-tab-panel>
<q-tab-panel name="2">
<NameChangeHistory />
</q-tab-panel>
<q-tab-panel name="3">
<Address />
</q-tab-panel>
<q-tab-panel name="4">
<Family />
</q-tab-panel>
<q-tab-panel name="5">
<Education />
</q-tab-panel>
<q-tab-panel name="6">
<SpecialSkill />
</q-tab-panel>
</q-tab-panels>
</q-card>
</template>
<style scoped></style>

95
src/modules/04_registryNew/components/detail/TabMain.vue
View file

@ -43,44 +43,59 @@ const splitterModel = ref<number>(12);
</script>
<template>
<q-splitter v-model="splitterModel" disable>
<template v-slot:before>
<q-tabs v-model="store.tabMain" vertical class="text-blue">
<q-tab
class="hover-tab"
v-for="(tab, index) in itemsTab"
:key="index"
:name="tab.name"
:icon="tab.icon"
:label="tab.label"
/>
</q-tabs>
</template>
<template v-slot:after>
<q-tab-panels
v-model="store.tabMain"
animated
swipeable
vertical
transition-prev="jump-up"
transition-next="jump-up"
class="q-px-md"
<q-splitter
v-model="splitterModel"
disable
class="split"
>
<q-tab-panel
v-for="(tab, index) in itemsTab"
:key="index"
:name="tab.name"
>
<PersonalInformationMain v-if="store.tabMain === '1'" />
<GovernmentInformationMain v-if="store.tabMain === '2'" />
<salaryMain v-if="store.tabMain === '3'" />
<AchievementMain v-if="store.tabMain === '4'" />
<OtherMaim v-if="store.tabMain === '5'" />
</q-tab-panel>
</q-tab-panels>
</template>
</q-splitter>
<template v-slot:before>
<div class=""><!-- bg-tab-regi -->
<q-tabs
v-model="store.tabMain"
vertical
class="text-grey-6 text-weight-light"
active-class="bg-white text-blue-8 text-weight-bold bg-blue-1"
><!-- indicator-color="transparent" -->
<q-tab
class="q-py-sm"
v-for="(tab, index) in itemsTab"
:key="index"
:name="tab.name"
:icon="tab.icon"
:label="tab.label"
/><!-- hover-tab -->
</q-tabs>
</div>
</template>
<template v-slot:after>
<q-tab-panels
v-model="store.tabMain"
animated
swipeable
vertical
transition-prev="jump-up"
transition-next="jump-up"
class="q-pa-none"
><!-- split -->
<q-tab-panel
v-for="(tab, index) in itemsTab"
:key="index"
:name="tab.name"
class="q-pa-none"
>
<PersonalInformationMain v-if="store.tabMain === '1'" />
<GovernmentInformationMain v-if="store.tabMain === '2'" />
<salaryMain v-if="store.tabMain === '3'" />
<AchievementMain v-if="store.tabMain === '4'" />
<OtherMaim v-if="store.tabMain === '5'" />
</q-tab-panel>
</q-tab-panels>
</template>
</q-splitter>
</template>
<style scoped>
@ -89,4 +104,10 @@ const splitterModel = ref<number>(12);
color: white !important;
opacity: 1 !important;
}
.bg-tab-regi{
background-color: #273238;
}
.split{
border-radius: 10px !important;
}
</style>

41
src/modules/04_registryNew/views/detailView.vue
View file

@ -369,7 +369,7 @@ onMounted(async () => {
>
<q-tooltip>ดาวน์ไฟล์</q-tooltip>
<q-menu>
<q-list style="min-width: 120px">
<q-list style="min-width: 130px">
<q-item clickable v-close-popup @click="onClickDownloadKp7('FULL')">
<q-item-section class="text-blue">ก.พ.7/ก.ก.1</q-item-section>
</q-item>
@ -381,12 +381,11 @@ onMounted(async () => {
</q-btn>
</div>
<q-card>
<div class="column" style="height: 160px">
<q-card >
<div class="column" style="height: 120px">
<div class="col row items-center">
<div class="row col-12">
<div class="col-sm-3 col-md-2"></div>
<div class="col">
<div class="col" style="padding-left: 14%;">
<div class="col-12 text-primary">
<h2
class="title q-ma-none q-pa-none"
@ -397,38 +396,38 @@ onMounted(async () => {
}}
</h2>
</div>
<div class="col-12 subtitle">{{ formDetail?.position }}</div>
<!-- <div class="col-12 subtitle">{{ formDetail?.position }}</div> -->
</div>
</div>
</div>
<div class="absolute-center-left q-ml-lg">
<q-avatar size="130px">
<q-avatar size="90px">
<img :src="profilePicture" />
</q-avatar>
<q-btn
round
color="white"
text-color="primary"
icon="mdi-pencil-outline"
style="position: absolute; bottom: 0; right: 0"
@click="selectFile"
size="sm"
unelevated
class="bg-white btnEditImg"
>
</q-btn>
</div>
<div class="col row items-center bg-teal-1">
<div class="row col-12">
<div class="col-sm-3 col-md-2"></div>
<div class="col row items-center bg-toolbar">
<div class="row col-12" style="padding-left: 14%;">
<div class="col-2">
<div class="col-sm-3 col-md-3">
<div class="col text-grey-6">ตำแหน่งในสายงาน</div>
<div class="col text-grey-6 text-caption">ตำแหน่งในสายงาน</div>
<div class="col">{{ formDetail?.position || "-" }}</div>
</div>
</div>
<div class="col-2">
<div class="col-sm-3 col-md-3">
<div class="col text-grey-6">ประเภทตำแหน่ง</div>
<div class="col text-grey-6 text-caption">ประเภทตำแหน่ง</div>
<div class="col">
{{ formDetail?.posType?.posTypeName || "-" }}
</div>
@ -436,7 +435,7 @@ onMounted(async () => {
</div>
<div class="col-2">
<div class="col-sm-3 col-md-3">
<div class="col text-grey-6">ระดับตำแหน่ง</div>
<div class="col text-grey-6 text-caption">ระดับตำแหน่ง</div>
<div class="col">
{{ formDetail?.posLevel?.posLevelName || "-" }}
</div>
@ -447,7 +446,7 @@ onMounted(async () => {
</div>
</q-card>
<q-card class="q-mt-md rounded">
<q-card bordered class="q-mt-md rounded">
<TabMain />
</q-card>
@ -584,4 +583,14 @@ h2.title {
.rounded {
border-radius: 10px;
}
.bg-toolbar{
background-color: #F2FBFA;
}
.btnEditImg{
position: absolute;
bottom: 0;
right: 0;
border: 1px solid #EDEDED ;
}
</style>

2
src/modules/04_registryNew/views/list.vue
View file

@ -229,7 +229,7 @@ onMounted(async () => {
ข้อมูลทะเบียนประวัติ
</div> -->
<q-card class="q-mt-md">
<q-card class="q-mt-md ">
<q-card-section class="card-img q-pb-lg">
<div class="text-h5 text-center q-py-md text-weight-medium">
ค้นหาข้อมูลทะเบียนประวัติ