แก้ไขไม่ให้เลือกวันเกิน Date now
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490
parent
d2db87cc2e
commit
d2a50125a5
3 changed files with 354 additions and 161 deletions
|
|
@ -140,7 +140,7 @@ const fetchPerson = async () => {
|
|||
Ops.value.religionOps = optionreligions;
|
||||
OpsFilter.value.religionOps = optionreligions;
|
||||
})
|
||||
.catch((e: any) => { })
|
||||
.catch((e: any) => {})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
|
|
@ -359,34 +359,82 @@ const clickBack = () => {
|
|||
<div class="row">
|
||||
<div class="row col-12 q-col-gutter-x-sm q-mb-xs">
|
||||
<div class="col-xs-6 col-sm-3 col-md-3">
|
||||
<q-input hide-bottom-space outlined v-model="informaData.cardid" dense @update:model-value="changeCardID " for="#cardId"
|
||||
lazy-rules :rules="[
|
||||
<q-input
|
||||
hide-bottom-space
|
||||
outlined
|
||||
v-model="informaData.cardid"
|
||||
dense
|
||||
@update:model-value="changeCardID"
|
||||
for="#cardId"
|
||||
lazy-rules
|
||||
:rules="[
|
||||
(val: string) => !!val || `${'กรุณากรอก เลขประจำตัวประชาชน'}`,
|
||||
(val: string) =>
|
||||
val.length >= 13 ||
|
||||
`${'กรุณากรอกเลขประจำตัวประชาชนให้ครบ'}`,
|
||||
]" label="เลขประจำตัวประชาชน" maxlength="13" mask="#############" />
|
||||
]"
|
||||
label="เลขประจำตัวประชาชน"
|
||||
maxlength="13"
|
||||
mask="#############"
|
||||
/>
|
||||
<!-- :rules="[(val:any) =>val.length != 13 ||`${'กรุณากรอกเลขประจำตัวประชาชนให้ครบ'}`,]" -->
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-3 col-md-3">
|
||||
<selector for="#prefixId" hide-bottom-space outlined :rules="[(val: string) => !!val || `${'กรุณาเลือก คำนำหน้าชื่อ'}`]" dense
|
||||
lazy-rules v-model="informaData.prefixId" emit-value map-options option-label="name"
|
||||
:options="Ops.prefixOps" option-value="id" :label="`${'คำนำหน้าชื่อ'}`" use-input input-debounce="0"
|
||||
@filter="(inputValue: any, doneFn: Function) => filterSelector(inputValue, doneFn, 'prefixOps')" />
|
||||
<selector
|
||||
for="#prefixId"
|
||||
hide-bottom-space
|
||||
outlined
|
||||
:rules="[(val: string) => !!val || `${'กรุณาเลือก คำนำหน้าชื่อ'}`]"
|
||||
dense
|
||||
lazy-rules
|
||||
v-model="informaData.prefixId"
|
||||
emit-value
|
||||
map-options
|
||||
option-label="name"
|
||||
:options="Ops.prefixOps"
|
||||
option-value="id"
|
||||
:label="`${'คำนำหน้าชื่อ'}`"
|
||||
use-input
|
||||
input-debounce="0"
|
||||
@filter="(inputValue: any, doneFn: Function) => filterSelector(inputValue, doneFn, 'prefixOps')"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-3 col-md-3">
|
||||
<q-input for="#firstname" hide-bottom-space outlined dense lazy-rules v-model="informaData.firstname"
|
||||
:rules="[(val: string) => !!val || `${'กรุณากรอก ชื่อ'}`]" :label="`${'ชื่อ'}`" />
|
||||
<q-input
|
||||
for="#firstname"
|
||||
hide-bottom-space
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
v-model="informaData.firstname"
|
||||
:rules="[(val: string) => !!val || `${'กรุณากรอก ชื่อ'}`]"
|
||||
:label="`${'ชื่อ'}`"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-3 col-md-3">
|
||||
<q-input for="#lastname" hide-bottom-space outlined dense lazy-rules v-model="informaData.lastname"
|
||||
:rules="[(val: string) => !!val || `${'กรุณากรอก นามสกุล'}`]" :label="`${'นามสกุล'}`" />
|
||||
<q-input
|
||||
for="#lastname"
|
||||
hide-bottom-space
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
v-model="informaData.lastname"
|
||||
:rules="[(val: string) => !!val || `${'กรุณากรอก นามสกุล'}`]"
|
||||
:label="`${'นามสกุล'}`"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row col-12 q-col-gutter-x-sm q-mb-xs">
|
||||
<div class="col-xs-6 col-sm-2 col-md-2">
|
||||
<datepicker v-model="informaData.birthDate" :locale="'th'" autoApply :enableTimePicker="false" week-start="0"
|
||||
:max-date="calculateMaxDate()" @update:model-value="calRetire">
|
||||
<datepicker
|
||||
v-model="informaData.birthDate"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
:max-date="calculateMaxDate()"
|
||||
@update:model-value="calRetire"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
|
|
@ -394,13 +442,26 @@ const clickBack = () => {
|
|||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input for="#birthDate" hide-bottom-space outlined dense lazy-rules :model-value="informaData.birthDate == null
|
||||
? null
|
||||
: date2Thai(informaData.birthDate)
|
||||
" :rules="[(val: string) => !!val || `${'กรุณาเลือก วัน/เดือน/ปี เกิด'}`]"
|
||||
:label="`${'วัน/เดือน/ปี เกิด'}`">
|
||||
<q-input
|
||||
for="#birthDate"
|
||||
hide-bottom-space
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
:model-value="
|
||||
informaData.birthDate == null
|
||||
? null
|
||||
: date2Thai(informaData.birthDate)
|
||||
"
|
||||
:rules="[(val: string) => !!val || `${'กรุณาเลือก วัน/เดือน/ปี เกิด'}`]"
|
||||
:label="`${'วัน/เดือน/ปี เกิด'}`"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
style="color: var(--q-primary)"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
|
|
@ -408,55 +469,144 @@ const clickBack = () => {
|
|||
</datepicker>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-2 col-md-2">
|
||||
<q-input hide-bottom-space dense lazy-rules readonly borderless style="padding:0 12px;"
|
||||
:model-value="informaData.age" :label="`${'อายุ'}`" />
|
||||
<q-input
|
||||
hide-bottom-space
|
||||
dense
|
||||
lazy-rules
|
||||
readonly
|
||||
borderless
|
||||
style="padding: 0 12px"
|
||||
:model-value="informaData.age"
|
||||
:label="`${'อายุ'}`"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-2 col-md-2">
|
||||
<selector for="#genderId" hide-bottom-space outlined dense lazy-rules v-model="informaData.genderId" emit-value map-options
|
||||
option-label="name" :options="Ops.genderOps" option-value="id" :label="`${'เพศ'}`" use-input
|
||||
input-debounce="0" @filter="(inputValue: any,
|
||||
<selector
|
||||
for="#genderId"
|
||||
hide-bottom-space
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
v-model="informaData.genderId"
|
||||
emit-value
|
||||
map-options
|
||||
option-label="name"
|
||||
:options="Ops.genderOps"
|
||||
option-value="id"
|
||||
:label="`${'เพศ'}`"
|
||||
use-input
|
||||
input-debounce="0"
|
||||
@filter="(inputValue: any,
|
||||
doneFn: Function) => filterSelector(inputValue, doneFn, 'genderOps'
|
||||
)" />
|
||||
)"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-2 col-md-2">
|
||||
<selector for="#statusId" hide-bottom-space outlined dense lazy-rules v-model="informaData.statusId" emit-value map-options
|
||||
option-label="name" :options="Ops.statusOps" option-value="id" :label="`${'สถานภาพ'}`" use-input
|
||||
input-debounce="0" @filter="(inputValue: any,
|
||||
<selector
|
||||
for="#statusId"
|
||||
hide-bottom-space
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
v-model="informaData.statusId"
|
||||
emit-value
|
||||
map-options
|
||||
option-label="name"
|
||||
:options="Ops.statusOps"
|
||||
option-value="id"
|
||||
:label="`${'สถานภาพ'}`"
|
||||
use-input
|
||||
input-debounce="0"
|
||||
@filter="(inputValue: any,
|
||||
doneFn: Function) => filterSelector(inputValue, doneFn, 'statusOps'
|
||||
)" />
|
||||
)"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-2 col-md-2">
|
||||
<q-input for="#nationality" hide-bottom-space outlined dense lazy-rules v-model="informaData.nationality"
|
||||
:label="`${'สัญชาติ'}`" />
|
||||
<q-input
|
||||
for="#nationality"
|
||||
hide-bottom-space
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
v-model="informaData.nationality"
|
||||
:label="`${'สัญชาติ'}`"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-2 col-md-2">
|
||||
<q-input for="#ethnicity" hide-bottom-space outlined dense lazy-rules v-model="informaData.ethnicity"
|
||||
:label="`${'เชื้อชาติ'}`" />
|
||||
<q-input
|
||||
for="#ethnicity"
|
||||
hide-bottom-space
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
v-model="informaData.ethnicity"
|
||||
:label="`${'เชื้อชาติ'}`"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row col-12 q-col-gutter-x-sm q-mb-xs">
|
||||
<div class="col-xs-6 col-sm-2 col-md-2">
|
||||
<selector for="#religionId" hide-bottom-space outlined dense lazy-rules v-model="informaData.religionId" emit-value map-options
|
||||
option-label="name" :options="Ops.religionOps" option-value="id" :label="`${'ศาสนา'}`" use-input
|
||||
input-debounce="0" @filter="(inputValue: any,
|
||||
<selector
|
||||
for="#religionId"
|
||||
hide-bottom-space
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
v-model="informaData.religionId"
|
||||
emit-value
|
||||
map-options
|
||||
option-label="name"
|
||||
:options="Ops.religionOps"
|
||||
option-value="id"
|
||||
:label="`${'ศาสนา'}`"
|
||||
use-input
|
||||
input-debounce="0"
|
||||
@filter="(inputValue: any,
|
||||
doneFn: Function) => filterSelector(inputValue, doneFn, 'religionOps'
|
||||
)" />
|
||||
)"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-2 col-md-2">
|
||||
<selector for="#bloodId" hide-bottom-space outlined dense lazy-rules v-model="informaData.bloodId" emit-value map-options
|
||||
option-label="name" :options="Ops.bloodOps" option-value="id" :label="`${'หมู่เลือด'}`" use-input
|
||||
input-debounce="0" @filter="(inputValue: any,
|
||||
<selector
|
||||
for="#bloodId"
|
||||
hide-bottom-space
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
v-model="informaData.bloodId"
|
||||
emit-value
|
||||
map-options
|
||||
option-label="name"
|
||||
:options="Ops.bloodOps"
|
||||
option-value="id"
|
||||
:label="`${'หมู่เลือด'}`"
|
||||
use-input
|
||||
input-debounce="0"
|
||||
@filter="(inputValue: any,
|
||||
doneFn: Function) => filterSelector(inputValue, doneFn, 'bloodOps'
|
||||
)" clearable />
|
||||
)"
|
||||
clearable
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-2 col-md-2">
|
||||
<q-input for="#tel" hide-bottom-space outlined dense lazy-rules type="tel" v-model="informaData.tel"
|
||||
:label="`${'เบอร์โทร'}`" :rules="[
|
||||
<q-input
|
||||
for="#tel"
|
||||
hide-bottom-space
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
type="tel"
|
||||
v-model="informaData.tel"
|
||||
:label="`${'เบอร์โทร'}`"
|
||||
:rules="[
|
||||
(val: string) => !!val || `${'กรุณากรอก เบอร์โทร'}`,
|
||||
(val: string) =>
|
||||
val.length >= 10 ||
|
||||
`${'กรุณากรอกเบอร์โทรให้ครบ'}`,
|
||||
]" mask="##########" />
|
||||
]"
|
||||
mask="##########"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -464,25 +614,60 @@ const clickBack = () => {
|
|||
<div class="col-12 q-pt-md q-pb-sm"><q-separator /></div>
|
||||
<div class="row col-12">
|
||||
<q-space />
|
||||
<q-btn for="#submitForm" unelevated dense class="q-px-md items-center" color="light-blue-10" label="บันทึก" @click="saveData" />
|
||||
<q-btn
|
||||
for="#submitForm"
|
||||
unelevated
|
||||
dense
|
||||
class="q-px-md items-center"
|
||||
color="light-blue-10"
|
||||
label="บันทึก"
|
||||
@click="saveData"
|
||||
/>
|
||||
</div>
|
||||
</q-card>
|
||||
|
||||
<!-- Header -->
|
||||
<q-page-sticky position="top" expand class="bg-grey-2 text-white" style="z-index: 99; padding: 0% 1% 0% 1%">
|
||||
<q-page-sticky
|
||||
position="top"
|
||||
expand
|
||||
class="bg-grey-2 text-white"
|
||||
style="z-index: 99; padding: 0% 1% 0% 1%"
|
||||
>
|
||||
<div class="row col-12 q-gutter-sm q-pb-sm text-dark no-wrap items-center">
|
||||
<q-btn flat round class="bg-teal-1 full-height" color="primary" icon="mdi-chevron-left" dense
|
||||
@click="router.go(-1)">
|
||||
<q-btn
|
||||
flat
|
||||
round
|
||||
class="bg-teal-1 full-height"
|
||||
color="primary"
|
||||
icon="mdi-chevron-left"
|
||||
dense
|
||||
@click="router.go(-1)"
|
||||
>
|
||||
</q-btn>
|
||||
<q-avatar size="65px" rounded class="containerimage">
|
||||
<img v-if="image == null" src="@/assets/avatar_user.jpg" class="bg-grey-3" style="object-fit: cover" />
|
||||
<img
|
||||
v-if="image == null"
|
||||
src="@/assets/avatar_user.jpg"
|
||||
class="bg-grey-3"
|
||||
style="object-fit: cover"
|
||||
/>
|
||||
<img :src="image" class="bg-grey-3" style="object-fit: cover" />
|
||||
<div class="overlay absolute-bottom text-subtitle2 text-center cursor-pointer" @click="addNewImage()">
|
||||
<div
|
||||
class="overlay absolute-bottom text-subtitle2 text-center cursor-pointer"
|
||||
@click="addNewImage()"
|
||||
>
|
||||
<q-icon name="mdi-camera" size="18px" color="blue">
|
||||
<q-tooltip>อัปเดตรูปภาพ</q-tooltip>
|
||||
</q-icon>
|
||||
|
||||
<input for="#profile" type="file" style="display: none" ref="inputImage" accept="image/*" @change="uploadImage" />
|
||||
<input
|
||||
for="#profile"
|
||||
type="file"
|
||||
style="display: none"
|
||||
ref="inputImage"
|
||||
accept="image/*"
|
||||
@change="uploadImage"
|
||||
/>
|
||||
</div>
|
||||
</q-avatar>
|
||||
|
||||
|
|
@ -498,4 +683,4 @@ const clickBack = () => {
|
|||
</div>
|
||||
</q-page-sticky>
|
||||
<!-- End Header -->
|
||||
</template>
|
||||
</template>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue