เช็คเบอร์โทร

This commit is contained in:
Suphonchai Phoonsawat 2023-10-15 16:46:06 +07:00
parent 457164331d
commit 2f6ac4318c
3 changed files with 951 additions and 730 deletions

View file

@ -9,12 +9,22 @@
:editData="false" :editData="false"
/> />
<q-form ref="myform"> <q-form ref="myform">
<div class="row col-12 items-center q-col-gutter-x-sm q-col-gutter-y-xs"> <div
class="row col-12 items-center q-col-gutter-x-sm q-col-gutter-y-xs"
>
<div class="col-xs-12 col-sm-3 col-md-2"> <div class="col-xs-12 col-sm-3 col-md-2">
<q-select <q-select
:class="getClass(status == 'checkRegister' || status == 'payment')" :class="
:readonly="!(status == 'checkRegister' || status == 'payment')" getClass(
:borderless="!(status == 'checkRegister' || status == 'payment')" status == 'checkRegister' || status == 'payment'
)
"
:readonly="
!(status == 'checkRegister' || status == 'payment')
"
:borderless="
!(status == 'checkRegister' || status == 'payment')
"
:rules="[(val) => !!val || `${'กรุณาเลือก คำนำหน้า'}`]" :rules="[(val) => !!val || `${'กรุณาเลือก คำนำหน้า'}`]"
:outlined="status == 'checkRegister' || status == 'payment'" :outlined="status == 'checkRegister' || status == 'payment'"
dense dense
@ -30,12 +40,20 @@
</div> </div>
<div class="col-xs-12 col-sm-3 col-md-3"> <div class="col-xs-12 col-sm-3 col-md-3">
<q-input <q-input
:class="getClass(status == 'checkRegister' || status == 'payment')" :class="
getClass(
status == 'checkRegister' || status == 'payment'
)
"
:outlined="status == 'checkRegister' || status == 'payment'" :outlined="status == 'checkRegister' || status == 'payment'"
dense dense
lazy-rules lazy-rules
:readonly="!(status == 'checkRegister' || status == 'payment')" :readonly="
:borderless="!(status == 'checkRegister' || status == 'payment')" !(status == 'checkRegister' || status == 'payment')
"
:borderless="
!(status == 'checkRegister' || status == 'payment')
"
v-model="defaultContact.contactFirstname" v-model="defaultContact.contactFirstname"
:rules="[(val) => !!val || `${'กรุณากรอก ชื่อ'}`]" :rules="[(val) => !!val || `${'กรุณากรอก ชื่อ'}`]"
:label="`${'ชื่อ'}`" :label="`${'ชื่อ'}`"
@ -43,12 +61,20 @@
</div> </div>
<div class="col-xs-12 col-sm-3 col-md-3"> <div class="col-xs-12 col-sm-3 col-md-3">
<q-input <q-input
:class="getClass(status == 'checkRegister' || status == 'payment')" :class="
getClass(
status == 'checkRegister' || status == 'payment'
)
"
:outlined="status == 'checkRegister' || status == 'payment'" :outlined="status == 'checkRegister' || status == 'payment'"
dense dense
lazy-rules lazy-rules
:readonly="!(status == 'checkRegister' || status == 'payment')" :readonly="
:borderless="!(status == 'checkRegister' || status == 'payment')" !(status == 'checkRegister' || status == 'payment')
"
:borderless="
!(status == 'checkRegister' || status == 'payment')
"
v-model="defaultContact.contactLastname" v-model="defaultContact.contactLastname"
:rules="[(val) => !!val || `${'กรุณากรอก นามสกุล'}`]" :rules="[(val) => !!val || `${'กรุณากรอก นามสกุล'}`]"
:label="`${'นามสกุล'}`" :label="`${'นามสกุล'}`"
@ -56,12 +82,20 @@
</div> </div>
<div class="col-xs-12 col-sm-3 col-md-4"> <div class="col-xs-12 col-sm-3 col-md-4">
<q-input <q-input
:class="getClass(status == 'checkRegister' || status == 'payment')" :class="
getClass(
status == 'checkRegister' || status == 'payment'
)
"
:outlined="status == 'checkRegister' || status == 'payment'" :outlined="status == 'checkRegister' || status == 'payment'"
dense dense
lazy-rules lazy-rules
:readonly="!(status == 'checkRegister' || status == 'payment')" :readonly="
:borderless="!(status == 'checkRegister' || status == 'payment')" !(status == 'checkRegister' || status == 'payment')
"
:borderless="
!(status == 'checkRegister' || status == 'payment')
"
v-model="defaultContact.contactRelations" v-model="defaultContact.contactRelations"
:rules="[(val) => !!val || `${'กรุณากรอกความสัมพันธ์'}`]" :rules="[(val) => !!val || `${'กรุณากรอกความสัมพันธ์'}`]"
:label="`${'เกี่ยวข้องเป็น'}`" :label="`${'เกี่ยวข้องเป็น'}`"
@ -72,21 +106,32 @@
:outlined="status == 'checkRegister' || status == 'payment'" :outlined="status == 'checkRegister' || status == 'payment'"
dense dense
:counter=" :counter="
status == 'checkRegister' || status == 'payment' ? true : false status == 'checkRegister' || status == 'payment'
? true
: false
" "
lazy-rules lazy-rules
type="tel" type="tel"
mask="##########" mask="##########"
maxlength="10" maxlength="10"
:class="getClass(status == 'checkRegister' || status == 'payment')" :class="
:readonly="!(status == 'checkRegister' || status == 'payment')" getClass(
:borderless="!(status == 'checkRegister' || status == 'payment')" status == 'checkRegister' || status == 'payment'
)
"
:readonly="
!(status == 'checkRegister' || status == 'payment')
"
:borderless="
!(status == 'checkRegister' || status == 'payment')
"
v-model="defaultContact.contactTel" v-model="defaultContact.contactTel"
:label="`${'โทรศัพท์'}`" :label="`${'โทรศัพท์'}`"
:rules="[ :rules="[
(val) => val.length == 10 || `${'กรุณากรอก โทรศัพท์'}`, (val) => !!val || '* กรุณากรอกข้อมูลหมายเลขโทรศัพท์',
(val) => (val) =>
/^[0-9]*$/.test(val) || `${'กรุณากรอกข้อมูลโทรศัพท์ให้ถูกต้อง'}`, (val.length >= 9 && val.length <= 10) ||
'กรุณากรอกข้อมูลหมายเลขโทรศัพท์ให้ถูกต้อง',
]" ]"
/> />
</div> </div>

View file

@ -18,21 +18,33 @@
> >
<div class="col-xs-12 col-sm-4 col-md-4"> <div class="col-xs-12 col-sm-4 col-md-4">
<q-input <q-input
:class="getClass(status == 'checkRegister' || status == 'payment')" :class="
getClass(
status == 'checkRegister' || status == 'payment'
)
"
:outlined="status == 'checkRegister' || status == 'payment'" :outlined="status == 'checkRegister' || status == 'payment'"
dense dense
type="tel" type="tel"
mask="#############" mask="#############"
:counter=" :counter="
status == 'checkRegister' || status == 'payment' ? true : false status == 'checkRegister' || status == 'payment'
? true
: false
" "
lazy-rules lazy-rules
:readonly="!(status == 'checkRegister' || status == 'payment')" :readonly="
:borderless="!(status == 'checkRegister' || status == 'payment')" !(status == 'checkRegister' || status == 'payment')
"
:borderless="
!(status == 'checkRegister' || status == 'payment')
"
v-model="defaultInformation.cardid" v-model="defaultInformation.cardid"
maxlength="13" maxlength="13"
:rules="[ :rules="[
(val) => val.length == 13 || `${'กรุณากรอก เลขประจำตัวประชาชน'}`, (val) =>
val.length == 13 ||
`${'กรุณากรอก เลขประจำตัวประชาชน'}`,
(val) => (val) =>
/^[0-9]*$/.test(val) || /^[0-9]*$/.test(val) ||
`${'กรุณากรอกเลขประจำตัวประชาชนให้ถูกต้อง'}`, `${'กรุณากรอกเลขประจำตัวประชาชนให้ถูกต้อง'}`,
@ -42,9 +54,17 @@
</div> </div>
<div class="col-xs-12 col-sm-2 col-md-2"> <div class="col-xs-12 col-sm-2 col-md-2">
<q-select <q-select
:class="getClass(status == 'checkRegister' || status == 'payment')" :class="
:readonly="!(status == 'checkRegister' || status == 'payment')" getClass(
:borderless="!(status == 'checkRegister' || status == 'payment')" status == 'checkRegister' || status == 'payment'
)
"
:readonly="
!(status == 'checkRegister' || status == 'payment')
"
:borderless="
!(status == 'checkRegister' || status == 'payment')
"
:rules="[(val) => !!val || `${'กรุณาเลือก คำนำหน้าชื่อ'}`]" :rules="[(val) => !!val || `${'กรุณาเลือก คำนำหน้าชื่อ'}`]"
:outlined="status == 'checkRegister' || status == 'payment'" :outlined="status == 'checkRegister' || status == 'payment'"
dense dense
@ -60,12 +80,20 @@
</div> </div>
<div class="col-xs-12 col-sm-3 col-md-3"> <div class="col-xs-12 col-sm-3 col-md-3">
<q-input <q-input
:class="getClass(status == 'checkRegister' || status == 'payment')" :class="
getClass(
status == 'checkRegister' || status == 'payment'
)
"
:outlined="status == 'checkRegister' || status == 'payment'" :outlined="status == 'checkRegister' || status == 'payment'"
dense dense
lazy-rules lazy-rules
:readonly="!(status == 'checkRegister' || status == 'payment')" :readonly="
:borderless="!(status == 'checkRegister' || status == 'payment')" !(status == 'checkRegister' || status == 'payment')
"
:borderless="
!(status == 'checkRegister' || status == 'payment')
"
v-model="defaultInformation.firstname" v-model="defaultInformation.firstname"
:rules="[(val) => !!val || `${'กรุณากรอก ชื่อ'}`]" :rules="[(val) => !!val || `${'กรุณากรอก ชื่อ'}`]"
:label="`${'ชื่อ'}`" :label="`${'ชื่อ'}`"
@ -73,12 +101,20 @@
</div> </div>
<div class="col-xs-12 col-sm-3 col-md-3"> <div class="col-xs-12 col-sm-3 col-md-3">
<q-input <q-input
:class="getClass(status == 'checkRegister' || status == 'payment')" :class="
getClass(
status == 'checkRegister' || status == 'payment'
)
"
:outlined="status == 'checkRegister' || status == 'payment'" :outlined="status == 'checkRegister' || status == 'payment'"
dense dense
lazy-rules lazy-rules
:readonly="!(status == 'checkRegister' || status == 'payment')" :readonly="
:borderless="!(status == 'checkRegister' || status == 'payment')" !(status == 'checkRegister' || status == 'payment')
"
:borderless="
!(status == 'checkRegister' || status == 'payment')
"
v-model="defaultInformation.lastname" v-model="defaultInformation.lastname"
:rules="[(val) => !!val || `${'กรุณากรอก นามสกุล'}`]" :rules="[(val) => !!val || `${'กรุณากรอก นามสกุล'}`]"
:label="`${'นามสกุล'}`" :label="`${'นามสกุล'}`"
@ -97,9 +133,17 @@
:label="`${'สัญชาติ'}`" :label="`${'สัญชาติ'}`"
/> --> /> -->
<q-select <q-select
:class="getClass(status == 'checkRegister' || status == 'payment')" :class="
:readonly="!(status == 'checkRegister' || status == 'payment')" getClass(
:borderless="!(status == 'checkRegister' || status == 'payment')" status == 'checkRegister' || status == 'payment'
)
"
:readonly="
!(status == 'checkRegister' || status == 'payment')
"
:borderless="
!(status == 'checkRegister' || status == 'payment')
"
:rules="[(val) => !!val || `${'กรุณากรอก สัญชาติ'}`]" :rules="[(val) => !!val || `${'กรุณากรอก สัญชาติ'}`]"
:outlined="status == 'checkRegister' || status == 'payment'" :outlined="status == 'checkRegister' || status == 'payment'"
dense dense
@ -111,9 +155,17 @@
</div> </div>
<div class="col-xs-12 col-sm-3 col-md-3"> <div class="col-xs-12 col-sm-3 col-md-3">
<q-select <q-select
:class="getClass(status == 'checkRegister' || status == 'payment')" :class="
:readonly="!(status == 'checkRegister' || status == 'payment')" getClass(
:borderless="!(status == 'checkRegister' || status == 'payment')" status == 'checkRegister' || status == 'payment'
)
"
:readonly="
!(status == 'checkRegister' || status == 'payment')
"
:borderless="
!(status == 'checkRegister' || status == 'payment')
"
:rules="[(val) => !!val || `${'กรุณาเลือก ศาสนา'}`]" :rules="[(val) => !!val || `${'กรุณาเลือก ศาสนา'}`]"
:outlined="status == 'checkRegister' || status == 'payment'" :outlined="status == 'checkRegister' || status == 'payment'"
dense dense
@ -135,7 +187,9 @@
:enableTimePicker="false" :enableTimePicker="false"
week-start="0" week-start="0"
:max-date="new Date()" :max-date="new Date()"
:disabled="!(status == 'checkRegister' || status == 'payment')" :disabled="
!(status == 'checkRegister' || status == 'payment')
"
@update:modelValue="selectBirthDate" @update:modelValue="selectBirthDate"
> >
<template #year="{ year }"> <template #year="{ year }">
@ -147,19 +201,38 @@
<template #trigger> <template #trigger>
<q-input <q-input
:class=" :class="
getClass(status == 'checkRegister' || status == 'payment') getClass(
status == 'checkRegister' ||
status == 'payment'
)
"
:outlined="
status == 'checkRegister' || status == 'payment'
" "
:outlined="status == 'checkRegister' || status == 'payment'"
dense dense
lazy-rules lazy-rules
:readonly="!(status == 'checkRegister' || status == 'payment')" :readonly="
:borderless="!(status == 'checkRegister' || status == 'payment')" !(
status == 'checkRegister' ||
status == 'payment'
)
"
:borderless="
!(
status == 'checkRegister' ||
status == 'payment'
)
"
:model-value=" :model-value="
defaultInformation.birthDate == null defaultInformation.birthDate == null
? null ? null
: date2Thai(defaultInformation.birthDate) : date2Thai(defaultInformation.birthDate)
" "
:rules="[(val) => !!val || `${'กรุณาเลือก วัน/เดือน/ปี เกิด'}`]" :rules="[
(val) =>
!!val ||
`${'กรุณาเลือก วัน/เดือน/ปี เกิด'}`,
]"
:label="`${'วัน/เดือน/ปี เกิด'}`" :label="`${'วัน/เดือน/ปี เกิด'}`"
> >
<template v-slot:prepend> <template v-slot:prepend>
@ -168,7 +241,8 @@
class="cursor-pointer" class="cursor-pointer"
size="22px" size="22px"
:style=" :style="
status == 'checkRegister' || status == 'payment' status == 'checkRegister' ||
status == 'payment'
? 'color: var(--q-primary)' ? 'color: var(--q-primary)'
: 'color: var(--q-grey)' : 'color: var(--q-grey)'
" "
@ -181,7 +255,11 @@
</div> </div>
<div class="col-xs-12 col-sm-3 col-md-3 q-pb-md"> <div class="col-xs-12 col-sm-3 col-md-3 q-pb-md">
<q-input <q-input
:class="getClass(status == 'checkRegister' || status == 'payment')" :class="
getClass(
status == 'checkRegister' || status == 'payment'
)
"
dense dense
lazy-rules lazy-rules
readonly readonly
@ -204,21 +282,31 @@
:outlined="status == 'checkRegister' || status == 'payment'" :outlined="status == 'checkRegister' || status == 'payment'"
dense dense
:counter=" :counter="
status == 'checkRegister' || status == 'payment' ? true : false status == 'checkRegister' || status == 'payment'
? true
: false
" "
lazy-rules lazy-rules
type="tel" type="tel"
mask="##########" mask="##########"
maxlength="10" maxlength="10"
:class="getClass(status == 'checkRegister' || status == 'payment')" :class="
:readonly="!(status == 'checkRegister' || status == 'payment')" getClass(
:borderless="!(status == 'checkRegister' || status == 'payment')" status == 'checkRegister' || status == 'payment'
)
"
:readonly="
!(status == 'checkRegister' || status == 'payment')
"
:borderless="
!(status == 'checkRegister' || status == 'payment')
"
v-model="defaultInformation.tel" v-model="defaultInformation.tel"
:rules="[ :rules="[
(val) => !!val || `${'กรุณากรอก เบอร์โทร'}`, (val) => !!val || '* กรุณากรอกข้อมูลหมายเลขโทรศัพท์',
(val) => val.length == 10 || `${'กรุณากรอก เบอร์โทร'}`,
(val) => (val) =>
/^[0-9]*$/.test(val) || `${'กรุณากรอกข้อมูลเบอร์โทรให้ถูกต้อง'}`, (val.length >= 9 && val.length <= 10) ||
'กรุณากรอกข้อมูลหมายเลขโทรศัพท์ให้ถูกต้อง',
]" ]"
:label="`${'เบอร์โทร'}`" :label="`${'เบอร์โทร'}`"
/> />
@ -339,7 +427,11 @@
</div> --> </div> -->
<div class="col-xs-12 col-sm-3 col-md-3 q-pb-md"> <div class="col-xs-12 col-sm-3 col-md-3 q-pb-md">
<q-input <q-input
:class="getClass(status == 'checkRegister' || status == 'payment')" :class="
getClass(
status == 'checkRegister' || status == 'payment'
)
"
dense dense
lazy-rules lazy-rules
readonly readonly
@ -355,10 +447,16 @@
class="containerimage row justify-center col-xs-6 col-sm-10 col-md-12" class="containerimage row justify-center col-xs-6 col-sm-10 col-md-12"
> >
<label for="file-upload" class="col-12 row"> <label for="file-upload" class="col-12 row">
<q-img v-if="img == ''" src="@/assets/avatar_user.jpg" class="col-12"> <q-img
v-if="img == ''"
src="@/assets/avatar_user.jpg"
class="col-12"
>
<div <div
class="overlay" class="overlay"
v-if="status == 'checkRegister' || status == 'payment'" v-if="
status == 'checkRegister' || status == 'payment'
"
> >
<q-icon name="mdi-camera" /> <q-icon name="mdi-camera" />
<br />ปเดต <br />ปเดต
@ -367,7 +465,9 @@
<q-img v-else :src="img" class="col-12"> <q-img v-else :src="img" class="col-12">
<div <div
class="overlay" class="overlay"
v-if="status == 'checkRegister' || status == 'payment'" v-if="
status == 'checkRegister' || status == 'payment'
"
> >
<q-icon name="mdi-camera" /> <q-icon name="mdi-camera" />
<br />ปเดต <br />ปเดต
@ -503,9 +603,13 @@ const fetchData = async () => {
defaultInformation.value.email = defaultInformation.value.email =
keycloak.tokenParsed == null ? "" : keycloak.tokenParsed.email; keycloak.tokenParsed == null ? "" : keycloak.tokenParsed.email;
defaultInformation.value.firstname = defaultInformation.value.firstname =
keycloak.tokenParsed == null ? "" : keycloak.tokenParsed.given_name; keycloak.tokenParsed == null
? ""
: keycloak.tokenParsed.given_name;
defaultInformation.value.lastname = defaultInformation.value.lastname =
keycloak.tokenParsed == null ? "" : keycloak.tokenParsed.family_name; keycloak.tokenParsed == null
? ""
: keycloak.tokenParsed.family_name;
}) })
.finally(() => { .finally(() => {
hideLoader(); hideLoader();
@ -611,7 +715,8 @@ const selectBirthDate = async () => {
padding: 1%; padding: 1%;
border-radius: 8px; border-radius: 8px;
border: solid 2px rgba(168, 168, 168, 0.055) !important; border: solid 2px rgba(168, 168, 168, 0.055) !important;
box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.048), 0 3px 6px 0 rgba(0, 0, 0, 0.097); box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.048),
0 3px 6px 0 rgba(0, 0, 0, 0.097);
} }
.overlay { .overlay {

View file

@ -16,48 +16,76 @@
label="ลูกจ้างประจำ" label="ลูกจ้างประจำ"
color="teal" color="teal"
val="prem" val="prem"
:disable="!(status == 'checkRegister' || status == 'payment')" :disable="
!(status == 'checkRegister' || status == 'payment')
"
/> />
<q-radio <q-radio
v-model="defaultOccupation.positionType" v-model="defaultOccupation.positionType"
label="ลูกจ้างชั่วคราว" label="ลูกจ้างชั่วคราว"
color="teal" color="teal"
val="temp" val="temp"
:disable="!(status == 'checkRegister' || status == 'payment')" :disable="
!(status == 'checkRegister' || status == 'payment')
"
/> />
<q-radio <q-radio
v-model="defaultOccupation.positionType" v-model="defaultOccupation.positionType"
label="ผู้ปฏิบัติงานอื่นในกรุงเทพมหานคร" label="ผู้ปฏิบัติงานอื่นในกรุงเทพมหานคร"
color="teal" color="teal"
val="other" val="other"
:disable="!(status == 'checkRegister' || status == 'payment')" :disable="
!(status == 'checkRegister' || status == 'payment')
"
/> />
</div> </div>
<div class="col-12 row q-col-gutter-sm"> <div class="col-12 row q-col-gutter-sm">
<div class="col-4"> <div class="col-4">
<q-input <q-input
:class="getClass(status == 'checkRegister' || status == 'payment')" :class="
:outlined="status == 'checkRegister' || status == 'payment'" getClass(
status == 'checkRegister' || status == 'payment'
)
"
:outlined="
status == 'checkRegister' || status == 'payment'
"
dense dense
lazy-rules lazy-rules
autogrow autogrow
:readonly="!(status == 'checkRegister' || status == 'payment')" :readonly="
:borderless="!(status == 'checkRegister' || status == 'payment')" !(status == 'checkRegister' || status == 'payment')
"
:borderless="
!(status == 'checkRegister' || status == 'payment')
"
v-model="defaultOccupation.position" v-model="defaultOccupation.position"
:rules="[(val) => !!val || `${'กรุณากรอก ชื่อตำแหน่ง'}`]" :rules="[
(val) => !!val || `${'กรุณากรอก ชื่อตำแหน่ง'}`,
]"
:label="`${'ชื่อตำแหน่ง'}`" :label="`${'ชื่อตำแหน่ง'}`"
/> />
</div> </div>
<div class="col-4"> <div class="col-4">
<q-input <q-input
:class="getClass(status == 'checkRegister' || status == 'payment')" :class="
:outlined="status == 'checkRegister' || status == 'payment'" getClass(
status == 'checkRegister' || status == 'payment'
)
"
:outlined="
status == 'checkRegister' || status == 'payment'
"
dense dense
lazy-rules lazy-rules
type="number" type="number"
autogrow autogrow
:readonly="!(status == 'checkRegister' || status == 'payment')" :readonly="
:borderless="!(status == 'checkRegister' || status == 'payment')" !(status == 'checkRegister' || status == 'payment')
"
:borderless="
!(status == 'checkRegister' || status == 'payment')
"
v-model="defaultOccupation.salary" v-model="defaultOccupation.salary"
:rules="[(val) => !!val || `${'กรุณากรอก เงินเดือน'}`]" :rules="[(val) => !!val || `${'กรุณากรอก เงินเดือน'}`]"
:label="`${'เงินเดือน'}`" :label="`${'เงินเดือน'}`"
@ -66,13 +94,23 @@
<div class="col-4"> <div class="col-4">
<q-input <q-input
:class="getClass(status == 'checkRegister' || status == 'payment')" :class="
:outlined="status == 'checkRegister' || status == 'payment'" getClass(
status == 'checkRegister' || status == 'payment'
)
"
:outlined="
status == 'checkRegister' || status == 'payment'
"
dense dense
lazy-rules lazy-rules
autogrow autogrow
:readonly="!(status == 'checkRegister' || status == 'payment')" :readonly="
:borderless="!(status == 'checkRegister' || status == 'payment')" !(status == 'checkRegister' || status == 'payment')
"
:borderless="
!(status == 'checkRegister' || status == 'payment')
"
v-model="defaultOccupation.group" v-model="defaultOccupation.group"
:rules="[(val) => !!val || `${'กรุณากรอก กลุ่ม/ฝ่าย'}`]" :rules="[(val) => !!val || `${'กรุณากรอก กลุ่ม/ฝ่าย'}`]"
:label="`${'กลุ่ม/ฝ่าย'}`" :label="`${'กลุ่ม/ฝ่าย'}`"
@ -80,13 +118,23 @@
</div> </div>
<div class="col-4"> <div class="col-4">
<q-input <q-input
:class="getClass(status == 'checkRegister' || status == 'payment')" :class="
:outlined="status == 'checkRegister' || status == 'payment'" getClass(
status == 'checkRegister' || status == 'payment'
)
"
:outlined="
status == 'checkRegister' || status == 'payment'
"
dense dense
lazy-rules lazy-rules
autogrow autogrow
:readonly="!(status == 'checkRegister' || status == 'payment')" :readonly="
:borderless="!(status == 'checkRegister' || status == 'payment')" !(status == 'checkRegister' || status == 'payment')
"
:borderless="
!(status == 'checkRegister' || status == 'payment')
"
v-model="defaultOccupation.pile" v-model="defaultOccupation.pile"
:rules="[(val) => !!val || `${'กรุณากรอก กอง'}`]" :rules="[(val) => !!val || `${'กรุณากรอก กอง'}`]"
:label="`${'กอง'}`" :label="`${'กอง'}`"
@ -94,13 +142,23 @@
</div> </div>
<div class="col-4"> <div class="col-4">
<q-input <q-input
:class="getClass(status == 'checkRegister' || status == 'payment')" :class="
:outlined="status == 'checkRegister' || status == 'payment'" getClass(
status == 'checkRegister' || status == 'payment'
)
"
:outlined="
status == 'checkRegister' || status == 'payment'
"
dense dense
lazy-rules lazy-rules
autogrow autogrow
:readonly="!(status == 'checkRegister' || status == 'payment')" :readonly="
:borderless="!(status == 'checkRegister' || status == 'payment')" !(status == 'checkRegister' || status == 'payment')
"
:borderless="
!(status == 'checkRegister' || status == 'payment')
"
v-model="defaultOccupation.org" v-model="defaultOccupation.org"
:rules="[(val) => !!val || `${'กรุณากรอก สังกัด'}`]" :rules="[(val) => !!val || `${'กรุณากรอก สังกัด'}`]"
:label="`${'สังกัด'}`" :label="`${'สังกัด'}`"
@ -108,25 +166,38 @@
</div> </div>
<div class="col-4"> <div class="col-4">
<q-input <q-input
:class="getClass(status == 'checkRegister' || status == 'payment')" :class="
:outlined="status == 'checkRegister' || status == 'payment'" getClass(
status == 'checkRegister' || status == 'payment'
)
"
:outlined="
status == 'checkRegister' || status == 'payment'
"
dense dense
:counter=" :counter="
status == 'checkRegister' || status == 'payment' ? true : false status == 'checkRegister' || status == 'payment'
? true
: false
" "
maxlength="10" maxlength="10"
lazy-rules lazy-rules
type="tel" type="tel"
mask="##########" mask="##########"
autogrow autogrow
:readonly="!(status == 'checkRegister' || status == 'payment')" :readonly="
:borderless="!(status == 'checkRegister' || status == 'payment')" !(status == 'checkRegister' || status == 'payment')
"
:borderless="
!(status == 'checkRegister' || status == 'payment')
"
v-model="defaultOccupation.tel" v-model="defaultOccupation.tel"
:rules="[ :rules="[
(val) => !!val || `${'กรุณากรอก เบอร์โทรที่ทำงาน'}`,
(val) => val.length == 10 || `${'กรุณากรอก เบอร์โทรที่ทำงาน'}`,
(val) => (val) =>
/^[0-9]*$/.test(val) || 'กรุณากรอก เบอร์โทรที่ทำงานให้ถูกต้อง', !!val || '* กรุณากรอกข้อมูลหมายเลขโทรศัพท์',
(val) =>
(val.length >= 9 && val.length <= 10) ||
'กรุณากรอกข้อมูลหมายเลขโทรศัพท์ให้ถูกต้อง',
]" ]"
:label="`${'เบอร์โทรที่ทำงาน'}`" :label="`${'เบอร์โทรที่ทำงาน'}`"
/> />