ปรับข้อมูลทะเบียนประมาณแท็ปข้อมูลส่วนตัว
This commit is contained in:
Tanyalak
parent
56c009cc8a
commit
8ffd88a469
6 changed files with 438 additions and 446 deletions
|
|
@ -461,26 +461,16 @@ onMounted(async () => {
|
||||||
|
|
||||||
<!-- Edit Dialog -->
|
<!-- Edit Dialog -->
|
||||||
<q-dialog v-model="modal" persistent>
|
<q-dialog v-model="modal" persistent>
|
||||||
<q-layout
|
<q-card>
|
||||||
view="lHh lpr lFf"
|
|
||||||
container
|
|
||||||
style="height: 500px"
|
|
||||||
class="bg-white"
|
|
||||||
>
|
|
||||||
<q-form greedy @submit.prevent @validation-success="onSubmit">
|
<q-form greedy @submit.prevent @validation-success="onSubmit">
|
||||||
<q-header>
|
<DialogHeader
|
||||||
<q-toolbar>
|
tittle="แก้ไขประวัติส่วนตัว"
|
||||||
<DialogHeader
|
:close="() => (modal = false)"
|
||||||
tittle="แก้ไขประวัติส่วนตัว"
|
/>
|
||||||
:close="() => (modal = false)"
|
|
||||||
/>
|
|
||||||
</q-toolbar>
|
|
||||||
<q-separator color="grey-4" />
|
|
||||||
</q-header>
|
|
||||||
|
|
||||||
<q-page-container>
|
<q-separator />
|
||||||
<q-page class="q-pa-md">
|
<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="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs">
|
||||||
<div class="col-xs-6 col-sm-6 col-md-6">
|
<div class="col-xs-6 col-sm-6 col-md-6">
|
||||||
<q-input
|
<q-input
|
||||||
dense
|
dense
|
||||||
|
|
@ -749,13 +739,12 @@ onMounted(async () => {
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</q-page>
|
</q-card-section>
|
||||||
</q-page-container>
|
|
||||||
|
|
||||||
<q-footer>
|
<q-separator />
|
||||||
<q-separator color="grey-4" />
|
|
||||||
<q-toolbar class="fit row wrap justify-end items-start content-start">
|
<q-card-actions align="right">
|
||||||
<q-btn
|
<q-btn
|
||||||
dense
|
dense
|
||||||
unelevated
|
unelevated
|
||||||
label="บันทึก"
|
label="บันทึก"
|
||||||
|
|
@ -766,32 +755,21 @@ onMounted(async () => {
|
||||||
>
|
>
|
||||||
<q-tooltip>บันทึกข้อมูล</q-tooltip>
|
<q-tooltip>บันทึกข้อมูล</q-tooltip>
|
||||||
</q-btn>
|
</q-btn>
|
||||||
</q-toolbar>
|
</q-card-actions>
|
||||||
</q-footer>
|
|
||||||
</q-form>
|
</q-form>
|
||||||
</q-layout>
|
</q-card>
|
||||||
</q-dialog>
|
</q-dialog>
|
||||||
|
|
||||||
<q-dialog v-model="modalHistory" persistent>
|
<q-dialog v-model="modalHistory" persistent>
|
||||||
<q-layout
|
<q-card style="min-width: 80%">
|
||||||
view="lHh lpr lFf"
|
<DialogHeader
|
||||||
container
|
|
||||||
style="height: 500px; min-width: 80%"
|
|
||||||
class="bg-white"
|
|
||||||
>
|
|
||||||
<q-header>
|
|
||||||
<q-toolbar>
|
|
||||||
<DialogHeader
|
|
||||||
tittle="ประวัติแก้ไขข้อมูลส่วนตัว"
|
tittle="ประวัติแก้ไขข้อมูลส่วนตัว"
|
||||||
:close="() => (modalHistory = false)"
|
:close="() => (modalHistory = false)"
|
||||||
/>
|
/>
|
||||||
</q-toolbar>
|
<q-separator />
|
||||||
<q-separator color="grey-4" />
|
|
||||||
</q-header>
|
|
||||||
|
|
||||||
<q-page-container>
|
<q-card-section style="max-height: 50vh" class="scroll">
|
||||||
<q-page class="q-pa-md">
|
<div class="row q-gutter-sm q-mb-sm">
|
||||||
<div class="row q-gutter-sm q-mb-sm">
|
|
||||||
<q-space />
|
<q-space />
|
||||||
<q-input
|
<q-input
|
||||||
standout
|
standout
|
||||||
|
|
@ -864,9 +842,14 @@ onMounted(async () => {
|
||||||
</q-tr>
|
</q-tr>
|
||||||
</template>
|
</template>
|
||||||
</d-table>
|
</d-table>
|
||||||
</q-page>
|
</q-card-section>
|
||||||
</q-page-container>
|
|
||||||
</q-layout>
|
<q-separator />
|
||||||
|
|
||||||
|
<q-card-actions align="right">
|
||||||
|
|
||||||
|
</q-card-actions>
|
||||||
|
</q-card>
|
||||||
</q-dialog>
|
</q-dialog>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -683,237 +683,224 @@ watch(
|
||||||
</d-table>
|
</d-table>
|
||||||
|
|
||||||
<q-dialog v-model="dialog" persistent>
|
<q-dialog v-model="dialog" persistent>
|
||||||
<q-layout
|
<q-card>
|
||||||
view="lHh lpr lFf"
|
|
||||||
container
|
|
||||||
style="height: 350px"
|
|
||||||
class="bg-white"
|
|
||||||
>
|
|
||||||
<q-form @submit.prevent greedy @validation-success="onSubmit()">
|
<q-form @submit.prevent greedy @validation-success="onSubmit()">
|
||||||
<q-header>
|
<dialog-header
|
||||||
<q-toolbar>
|
:tittle="dialogStatus === 'edit' ? 'แก้ไขข้อมูล' : 'เพิ่มข้อมูล'"
|
||||||
<dialog-header
|
:close="closeDialog"
|
||||||
:tittle="dialogStatus === 'edit' ? 'แก้ไขข้อมูล' : 'เพิ่มข้อมูล'"
|
/>
|
||||||
:close="closeDialog"
|
<q-separator color="grey-4" />
|
||||||
/>
|
|
||||||
</q-toolbar>
|
|
||||||
<q-separator color="grey-4" />
|
|
||||||
</q-header>
|
|
||||||
|
|
||||||
<q-page-container>
|
<q-card-section style="max-height: 50vh" class="scroll">
|
||||||
<q-page class="q-pa-md">
|
<div class="row q-mb-sm">
|
||||||
<div class="row q-mb-sm">
|
<div class="col-5">
|
||||||
<div class="col-5">
|
<q-select
|
||||||
<q-select
|
outlined
|
||||||
outlined
|
v-model="changeNameData.status"
|
||||||
v-model="changeNameData.status"
|
:options="statusOption"
|
||||||
:options="statusOption"
|
label="สถานะการเปลี่ยนชื่อ"
|
||||||
label="สถานะการเปลี่ยนชื่อ"
|
use-input
|
||||||
use-input
|
hide-bottom-space
|
||||||
hide-bottom-space
|
input-debounce="0"
|
||||||
input-debounce="0"
|
:rules="[
|
||||||
:rules="[
|
(val) => !!val || `${'กรุณาเลือกสถานะการเปลี่ยนชื่อ'}`,
|
||||||
(val) => !!val || `${'กรุณาเลือกสถานะการเปลี่ยนชื่อ'}`,
|
]"
|
||||||
]"
|
@filter="(inputValue:string,
|
||||||
@filter="(inputValue:string,
|
doneFn:Function) => filterSelector(inputValue, doneFn,'statusOptions'
|
||||||
doneFn:Function) => filterSelector(inputValue, doneFn,'statusOptions'
|
) "
|
||||||
) "
|
dense
|
||||||
dense
|
/>
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="row q-gutter-sm q-mb-md">
|
</div>
|
||||||
<div class="col">
|
<div class="row q-gutter-sm q-mb-md">
|
||||||
<q-select
|
<div class="col">
|
||||||
:readonly="
|
<q-select
|
||||||
!changeNameData.status ||
|
:readonly="
|
||||||
(changeNameData.status !== 'เปลี่ยนคำนำหน้าชื่อ' &&
|
!changeNameData.status ||
|
||||||
changeNameData.status !== 'เปลี่ยนคำนำหน้าชื่อ และชื่อ' &&
|
(changeNameData.status !== 'เปลี่ยนคำนำหน้าชื่อ' &&
|
||||||
changeNameData.status !==
|
changeNameData.status !== 'เปลี่ยนคำนำหน้าชื่อ และชื่อ' &&
|
||||||
'เปลี่ยนคำนำหน้าชื่อ และนามสกุล' &&
|
changeNameData.status !==
|
||||||
changeNameData.status !==
|
'เปลี่ยนคำนำหน้าชื่อ และนามสกุล' &&
|
||||||
'เปลี่ยนคำนำหน้าชื่อ และชื่อ-นามสกุล')
|
changeNameData.status !==
|
||||||
"
|
'เปลี่ยนคำนำหน้าชื่อ และชื่อ-นามสกุล')
|
||||||
v-model="changeNameData.prefix"
|
"
|
||||||
:options="store.Ops.prefixOps"
|
v-model="changeNameData.prefix"
|
||||||
label="คำนำหน้าชื่อ"
|
:options="store.Ops.prefixOps"
|
||||||
dense
|
label="คำนำหน้าชื่อ"
|
||||||
:class="
|
dense
|
||||||
!changeNameData.status ||
|
:class="
|
||||||
(changeNameData.status !== 'เปลี่ยนคำนำหน้าชื่อ' &&
|
!changeNameData.status ||
|
||||||
changeNameData.status !== 'เปลี่ยนคำนำหน้าชื่อ และชื่อ' &&
|
(changeNameData.status !== 'เปลี่ยนคำนำหน้าชื่อ' &&
|
||||||
changeNameData.status !==
|
changeNameData.status !== 'เปลี่ยนคำนำหน้าชื่อ และชื่อ' &&
|
||||||
'เปลี่ยนคำนำหน้าชื่อ และนามสกุล' &&
|
changeNameData.status !==
|
||||||
changeNameData.status !==
|
'เปลี่ยนคำนำหน้าชื่อ และนามสกุล' &&
|
||||||
'เปลี่ยนคำนำหน้าชื่อ และชื่อ-นามสกุล')
|
changeNameData.status !==
|
||||||
? ''
|
'เปลี่ยนคำนำหน้าชื่อ และชื่อ-นามสกุล')
|
||||||
: 'inputgreen'
|
? ''
|
||||||
"
|
: 'inputgreen'
|
||||||
outlined
|
"
|
||||||
use-input
|
outlined
|
||||||
lazy-rules
|
use-input
|
||||||
emit-value
|
lazy-rules
|
||||||
map-options
|
emit-value
|
||||||
:rules="[(val) => !!val || `${'กรุณาเลือกคำนำหน้าชื่อ'}`]"
|
map-options
|
||||||
hide-bottom-space
|
:rules="[(val) => !!val || `${'กรุณาเลือกคำนำหน้าชื่อ'}`]"
|
||||||
input-debounce="0"
|
hide-bottom-space
|
||||||
option-label="name"
|
input-debounce="0"
|
||||||
option-value="name"
|
option-label="name"
|
||||||
@filter="(inputValue:string,
|
option-value="name"
|
||||||
doneFn:Function) => filterSelector(inputValue, doneFn,'prefixOps'
|
@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>
|
||||||
<div class="row">
|
<div class="col">
|
||||||
<q-uploader
|
<q-input
|
||||||
color="gray"
|
:readonly="
|
||||||
type="file"
|
!changeNameData.status ||
|
||||||
flat
|
(changeNameData.status !== 'เปลี่ยนชื่อ' &&
|
||||||
ref="uploader"
|
changeNameData.status !== 'เปลี่ยนคำนำหน้าชื่อ และชื่อ' &&
|
||||||
class="full-width"
|
changeNameData.status !== 'เปลี่ยนชื่อ-นามสกุล' &&
|
||||||
text-color="white"
|
changeNameData.status !==
|
||||||
:max-size="10000000"
|
'เปลี่ยนคำนำหน้าชื่อ และชื่อ-นามสกุล')
|
||||||
accept=".jpg,.png,.pdf,.csv,.doc,.docx"
|
"
|
||||||
bordered
|
outlined
|
||||||
label="[ไฟล์ jpg,png,pdf,csv,doc,docx ขนาดไม่เกิน 10MB]"
|
v-model="changeNameData.firstName"
|
||||||
@added="(v) => (fileUpload = v[0])"
|
label="ชื่อ"
|
||||||
>
|
bg-color="white"
|
||||||
<template v-slot:header="scope">
|
dense
|
||||||
<div class="row no-wrap items-center q-pa-sm q-gutter-xs">
|
:class="
|
||||||
<q-btn
|
!changeNameData.status ||
|
||||||
v-if="scope.queuedFiles.length > 0"
|
(changeNameData.status !== 'เปลี่ยนชื่อ' &&
|
||||||
icon="clear_all"
|
changeNameData.status !== 'เปลี่ยนคำนำหน้าชื่อ และชื่อ' &&
|
||||||
@click="scope.removeQueuedFiles"
|
changeNameData.status !== 'เปลี่ยนชื่อ-นามสกุล' &&
|
||||||
round
|
changeNameData.status !==
|
||||||
dense
|
'เปลี่ยนคำนำหน้าชื่อ และชื่อ-นามสกุล')
|
||||||
flat
|
? ''
|
||||||
>
|
: 'inputgreen'
|
||||||
<q-tooltip>ลบทั้งหมด</q-tooltip>
|
"
|
||||||
</q-btn>
|
:rules="[(val) => !!val || `${'กรุณากรอกชื่อ'}`]"
|
||||||
<q-btn
|
hide-bottom-space
|
||||||
v-if="scope.uploadedFiles.length > 0"
|
/>
|
||||||
icon="done_all"
|
</div>
|
||||||
@click="scope.removeUploadedFiles"
|
<div class="col">
|
||||||
round
|
<q-input
|
||||||
dense
|
:readonly="
|
||||||
flat
|
!changeNameData.status ||
|
||||||
>
|
(changeNameData.status !== 'เปลี่ยนนามสกุล' &&
|
||||||
<q-tooltip>ลบไฟล์ที่อัปโหลด</q-tooltip>
|
changeNameData.status !== 'เปลี่ยนชื่อ-นามสกุล' &&
|
||||||
</q-btn>
|
changeNameData.status !==
|
||||||
<q-spinner
|
'เปลี่ยนคำนำหน้าชื่อ และนามสกุล' &&
|
||||||
v-if="scope.isUploading"
|
changeNameData.status !==
|
||||||
class="q-uploader__spinner"
|
'เปลี่ยนคำนำหน้าชื่อ และชื่อ-นามสกุล')
|
||||||
/>
|
"
|
||||||
<div class="col">
|
outlined
|
||||||
<div class="q-uploader__title">
|
v-model="changeNameData.lastName"
|
||||||
{{ "[ไฟล์ jpg,png,pdf,csv,doc,docx ขนาดไม่เกิน 10MB]" }}
|
label="นามสกุล"
|
||||||
</div>
|
bg-color="white"
|
||||||
<div class="q-uploader__subtitle">
|
dense
|
||||||
{{ scope.uploadSizeLabel }} /
|
:class="
|
||||||
{{ scope.uploadProgressLabel }}
|
!changeNameData.status ||
|
||||||
</div>
|
(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>
|
</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>
|
</div>
|
||||||
</template>
|
<q-btn
|
||||||
</q-uploader>
|
v-if="scope.canAddFiles"
|
||||||
<div
|
type="a"
|
||||||
v-if="alertUpload && dialogStatus === 'create'"
|
icon="add_box"
|
||||||
class="row text-negative items-center q-mt-sm"
|
@click="scope.pickFiles"
|
||||||
>
|
round
|
||||||
กรุณาอัพโหลดเอกสาร
|
dense
|
||||||
<q-icon name="mdi-alert-circle q-ml-sm" size="24px" />
|
flat
|
||||||
</div>
|
>
|
||||||
|
<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>
|
</div>
|
||||||
</q-page>
|
</div>
|
||||||
</q-page-container>
|
</q-card-section>
|
||||||
|
<q-separator />
|
||||||
<q-footer>
|
<q-card-actions align="right">
|
||||||
<q-separator color="grey-4" />
|
<q-btn
|
||||||
<q-toolbar class="fit row wrap justify-end items-start content-start">
|
|
||||||
<q-btn
|
|
||||||
id="onSubmit"
|
id="onSubmit"
|
||||||
type="submit"
|
type="submit"
|
||||||
dense
|
dense
|
||||||
|
|
@ -934,99 +921,88 @@ watch(
|
||||||
>
|
>
|
||||||
<q-tooltip>บันทึกข้อมูล</q-tooltip>
|
<q-tooltip>บันทึกข้อมูล</q-tooltip>
|
||||||
</q-btn>
|
</q-btn>
|
||||||
</q-toolbar>
|
</q-card-actions>
|
||||||
</q-footer>
|
|
||||||
</q-form>
|
</q-form>
|
||||||
</q-layout>
|
</q-card>
|
||||||
</q-dialog>
|
</q-dialog>
|
||||||
|
|
||||||
|
|
||||||
<q-dialog v-model="historyDialog" class="dialog" persistent>
|
<q-dialog v-model="historyDialog" class="dialog" persistent>
|
||||||
<q-layout
|
<q-card style="min-width: 70%">
|
||||||
view="lHh lpr lFf"
|
<dialog-header
|
||||||
container
|
|
||||||
style="height: 500px; min-width: 80%"
|
|
||||||
class="bg-white"
|
|
||||||
>
|
|
||||||
<q-header>
|
|
||||||
<q-toolbar>
|
|
||||||
<dialog-header
|
|
||||||
tittle="ประวัติแก้ไขการเปลี่ยนชื่อ-นามสกุล"
|
tittle="ประวัติแก้ไขการเปลี่ยนชื่อ-นามสกุล"
|
||||||
:close="closeHistoryDialog"
|
:close="closeHistoryDialog"
|
||||||
/>
|
/>
|
||||||
</q-toolbar>
|
<q-separator />
|
||||||
<q-separator color="grey-4" />
|
|
||||||
</q-header>
|
|
||||||
|
|
||||||
<q-page-container>
|
<q-card-section style="max-height: 50vh" class="scroll">
|
||||||
<q-page class="q-pa-md">
|
<q-toolbar style="padding: 0px" class="text-primary q-mb-sm">
|
||||||
<q-toolbar style="padding: 0px" class="text-primary q-mb-sm">
|
<q-space />
|
||||||
<q-space />
|
<q-input
|
||||||
<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"
|
|
||||||
dense
|
dense
|
||||||
:filter="historyKeyword"
|
outlined
|
||||||
v-model:pagination="historyPagination"
|
bg-color="white"
|
||||||
:rows-per-page-options="[20, 50, 100]"
|
v-model="historyKeyword"
|
||||||
class="custom-header-table"
|
label="ค้นหา"
|
||||||
:visible-columns="historyVisibleColumns"
|
class="q-mr-sm"
|
||||||
>
|
>
|
||||||
<template v-slot:header="props">
|
<template v-slot:append>
|
||||||
<q-tr :props="props">
|
<q-icon name="search" />
|
||||||
<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>
|
||||||
<template v-slot:body="props">
|
</q-input>
|
||||||
<q-tr :props="props" class="cursor-pointer">
|
|
||||||
<q-td v-for="col in props.cols" :key="col.id">
|
<q-select
|
||||||
<div>
|
v-model="historyVisibleColumns"
|
||||||
{{ col.value === "" ? "-" : col.value }}
|
multiple
|
||||||
</div>
|
outlined
|
||||||
</q-td>
|
dense
|
||||||
<q-td auto-width> </q-td>
|
bg-color="white"
|
||||||
</q-tr>
|
options-dense
|
||||||
</template>
|
:display-value="$q.lang.table.columns"
|
||||||
</d-table>
|
emit-value
|
||||||
</q-page>
|
map-options
|
||||||
</q-page-container>
|
:options="historyColumns"
|
||||||
</q-layout>
|
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>
|
</q-dialog>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -12,52 +12,55 @@ import SpecialSkill from "@/modules/04_registryNew/components/detail/PersonalInf
|
||||||
const tab = ref<string>("1");
|
const tab = ref<string>("1");
|
||||||
</script>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
<div class="row items-center q-mb-md">
|
<div class="row items-center q-my-md">
|
||||||
<div class="text-dark row items-center text-weight-bold">
|
<div class="text-dark row items-center q-px-md">
|
||||||
<q-icon name="mdi-account" class="q-mr-md" size="sm" />
|
<q-icon name="mdi-account" class="q-mr-md" size="22px" />
|
||||||
<h3 class="resigtry-tab-title">ข้อมูลส่วนตัว</h3>
|
<div class="text-subtitle1 text-weight-bold">ข้อมูลส่วนตัว</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<q-separator />
|
<q-separator />
|
||||||
<q-tabs
|
<q-card>
|
||||||
v-model="tab"
|
<q-tabs
|
||||||
class="text-grey"
|
v-model="tab"
|
||||||
active-color="blue"
|
class="text-grey q-pl-sm"
|
||||||
indicator-color="white"
|
active-color="blue-8"
|
||||||
align="left"
|
align="left"
|
||||||
narrow-indicator
|
bordered
|
||||||
bordered
|
narrow-indicator
|
||||||
>
|
indicator-color="transparent"
|
||||||
<q-tab name="1" label="ประวัติส่วนตัว" />
|
dense
|
||||||
<q-tab name="2" label="ประวัติการเปลี่ยนชื่อ-นามสกุล" />
|
>
|
||||||
<q-tab name="3" label="ข้อมูลที่อยู่" />
|
<q-tab name="1" label="ประวัติส่วนตัว" />
|
||||||
<q-tab name="4" label="ข้อมูลครอบครัว" />
|
<q-tab name="2" label="ประวัติการเปลี่ยนชื่อ-นามสกุล" />
|
||||||
<q-tab name="5" label="ประวัติการศึกษา" />
|
<q-tab name="3" label="ข้อมูลที่อยู่" />
|
||||||
<q-tab name="6" label="ความสามารถพิเศษ" />
|
<q-tab name="4" label="ข้อมูลครอบครัว" />
|
||||||
</q-tabs>
|
<q-tab name="5" label="ประวัติการศึกษา" />
|
||||||
<q-separator />
|
<q-tab name="6" label="ความสามารถพิเศษ" />
|
||||||
|
</q-tabs>
|
||||||
|
<q-separator />
|
||||||
|
|
||||||
<q-tab-panels v-model="tab" animated>
|
<q-tab-panels v-model="tab" animated >
|
||||||
<q-tab-panel name="1">
|
<q-tab-panel name="1">
|
||||||
<Profile />
|
<Profile />
|
||||||
</q-tab-panel>
|
</q-tab-panel>
|
||||||
<q-tab-panel name="2">
|
<q-tab-panel name="2">
|
||||||
<NameChangeHistory />
|
<NameChangeHistory />
|
||||||
</q-tab-panel>
|
</q-tab-panel>
|
||||||
<q-tab-panel name="3">
|
<q-tab-panel name="3">
|
||||||
<Address />
|
<Address />
|
||||||
</q-tab-panel>
|
</q-tab-panel>
|
||||||
<q-tab-panel name="4">
|
<q-tab-panel name="4">
|
||||||
<Family />
|
<Family />
|
||||||
</q-tab-panel>
|
</q-tab-panel>
|
||||||
<q-tab-panel name="5">
|
<q-tab-panel name="5">
|
||||||
<Education />
|
<Education />
|
||||||
</q-tab-panel>
|
</q-tab-panel>
|
||||||
<q-tab-panel name="6">
|
<q-tab-panel name="6">
|
||||||
<SpecialSkill />
|
<SpecialSkill />
|
||||||
</q-tab-panel>
|
</q-tab-panel>
|
||||||
</q-tab-panels>
|
</q-tab-panels>
|
||||||
|
</q-card>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped></style>
|
<style scoped></style>
|
||||||
|
|
|
||||||
|
|
@ -43,44 +43,59 @@ const splitterModel = ref<number>(12);
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<q-splitter v-model="splitterModel" disable>
|
<q-splitter
|
||||||
<template v-slot:before>
|
v-model="splitterModel"
|
||||||
<q-tabs v-model="store.tabMain" vertical class="text-blue">
|
disable
|
||||||
<q-tab
|
class="split"
|
||||||
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-tab-panel
|
<template v-slot:before>
|
||||||
v-for="(tab, index) in itemsTab"
|
<div class=""><!-- bg-tab-regi -->
|
||||||
:key="index"
|
<q-tabs
|
||||||
:name="tab.name"
|
v-model="store.tabMain"
|
||||||
>
|
vertical
|
||||||
<PersonalInformationMain v-if="store.tabMain === '1'" />
|
|
||||||
<GovernmentInformationMain v-if="store.tabMain === '2'" />
|
class="text-grey-6 text-weight-light"
|
||||||
<salaryMain v-if="store.tabMain === '3'" />
|
active-class="bg-white text-blue-8 text-weight-bold bg-blue-1"
|
||||||
<AchievementMain v-if="store.tabMain === '4'" />
|
><!-- indicator-color="transparent" -->
|
||||||
<OtherMaim v-if="store.tabMain === '5'" />
|
<q-tab
|
||||||
</q-tab-panel>
|
class="q-py-sm"
|
||||||
</q-tab-panels>
|
v-for="(tab, index) in itemsTab"
|
||||||
</template>
|
:key="index"
|
||||||
</q-splitter>
|
: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>
|
</template>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
|
@ -89,4 +104,10 @@ const splitterModel = ref<number>(12);
|
||||||
color: white !important;
|
color: white !important;
|
||||||
opacity: 1 !important;
|
opacity: 1 !important;
|
||||||
}
|
}
|
||||||
|
.bg-tab-regi{
|
||||||
|
background-color: #273238;
|
||||||
|
}
|
||||||
|
.split{
|
||||||
|
border-radius: 10px !important;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -369,7 +369,7 @@ onMounted(async () => {
|
||||||
>
|
>
|
||||||
<q-tooltip>ดาวน์ไฟล์</q-tooltip>
|
<q-tooltip>ดาวน์ไฟล์</q-tooltip>
|
||||||
<q-menu>
|
<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 clickable v-close-popup @click="onClickDownloadKp7('FULL')">
|
||||||
<q-item-section class="text-blue">ก.พ.7/ก.ก.1</q-item-section>
|
<q-item-section class="text-blue">ก.พ.7/ก.ก.1</q-item-section>
|
||||||
</q-item>
|
</q-item>
|
||||||
|
|
@ -381,12 +381,11 @@ onMounted(async () => {
|
||||||
</q-btn>
|
</q-btn>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<q-card>
|
<q-card >
|
||||||
<div class="column" style="height: 160px">
|
<div class="column" style="height: 120px">
|
||||||
<div class="col row items-center">
|
<div class="col row items-center">
|
||||||
<div class="row col-12">
|
<div class="row col-12">
|
||||||
<div class="col-sm-3 col-md-2"></div>
|
<div class="col" style="padding-left: 14%;">
|
||||||
<div class="col">
|
|
||||||
<div class="col-12 text-primary">
|
<div class="col-12 text-primary">
|
||||||
<h2
|
<h2
|
||||||
class="title q-ma-none q-pa-none"
|
class="title q-ma-none q-pa-none"
|
||||||
|
|
@ -397,38 +396,38 @@ onMounted(async () => {
|
||||||
}}
|
}}
|
||||||
</h2>
|
</h2>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-12 subtitle">{{ formDetail?.position }}</div>
|
<!-- <div class="col-12 subtitle">{{ formDetail?.position }}</div> -->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="absolute-center-left q-ml-lg">
|
<div class="absolute-center-left q-ml-lg">
|
||||||
<q-avatar size="130px">
|
<q-avatar size="90px">
|
||||||
<img :src="profilePicture" />
|
<img :src="profilePicture" />
|
||||||
</q-avatar>
|
</q-avatar>
|
||||||
<q-btn
|
<q-btn
|
||||||
round
|
round
|
||||||
color="white"
|
|
||||||
text-color="primary"
|
text-color="primary"
|
||||||
icon="mdi-pencil-outline"
|
icon="mdi-pencil-outline"
|
||||||
style="position: absolute; bottom: 0; right: 0"
|
|
||||||
@click="selectFile"
|
@click="selectFile"
|
||||||
|
size="sm"
|
||||||
|
unelevated
|
||||||
|
class="bg-white btnEditImg"
|
||||||
>
|
>
|
||||||
</q-btn>
|
</q-btn>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="col row items-center bg-teal-1">
|
<div class="col row items-center bg-toolbar">
|
||||||
<div class="row col-12">
|
<div class="row col-12" style="padding-left: 14%;">
|
||||||
<div class="col-sm-3 col-md-2"></div>
|
|
||||||
<div class="col-2">
|
<div class="col-2">
|
||||||
<div class="col-sm-3 col-md-3">
|
<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 class="col">{{ formDetail?.position || "-" }}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-2">
|
<div class="col-2">
|
||||||
<div class="col-sm-3 col-md-3">
|
<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">
|
<div class="col">
|
||||||
{{ formDetail?.posType?.posTypeName || "-" }}
|
{{ formDetail?.posType?.posTypeName || "-" }}
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -436,7 +435,7 @@ onMounted(async () => {
|
||||||
</div>
|
</div>
|
||||||
<div class="col-2">
|
<div class="col-2">
|
||||||
<div class="col-sm-3 col-md-3">
|
<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">
|
<div class="col">
|
||||||
{{ formDetail?.posLevel?.posLevelName || "-" }}
|
{{ formDetail?.posLevel?.posLevelName || "-" }}
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -447,7 +446,7 @@ onMounted(async () => {
|
||||||
</div>
|
</div>
|
||||||
</q-card>
|
</q-card>
|
||||||
|
|
||||||
<q-card class="q-mt-md rounded">
|
<q-card bordered class="q-mt-md rounded">
|
||||||
<TabMain />
|
<TabMain />
|
||||||
</q-card>
|
</q-card>
|
||||||
|
|
||||||
|
|
@ -584,4 +583,14 @@ h2.title {
|
||||||
.rounded {
|
.rounded {
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.bg-toolbar{
|
||||||
|
background-color: #F2FBFA;
|
||||||
|
}
|
||||||
|
.btnEditImg{
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
right: 0;
|
||||||
|
border: 1px solid #EDEDED ;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
@ -229,7 +229,7 @@ onMounted(async () => {
|
||||||
ข้อมูลทะเบียนประวัติ
|
ข้อมูลทะเบียนประวัติ
|
||||||
</div> -->
|
</div> -->
|
||||||
|
|
||||||
<q-card class="q-mt-md">
|
<q-card class="q-mt-md ">
|
||||||
<q-card-section class="card-img q-pb-lg">
|
<q-card-section class="card-img q-pb-lg">
|
||||||
<div class="text-h5 text-center q-py-md text-weight-medium">
|
<div class="text-h5 text-center q-py-md text-weight-medium">
|
||||||
ค้นหาข้อมูลทะเบียนประวัติ
|
ค้นหาข้อมูลทะเบียนประวัติ
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue