เเก้ input ลอย ตอน validate เด้ง

This commit is contained in:
setthawutttty 2023-09-13 14:57:30 +07:00
parent e74e845cda
commit bc41809f86
12 changed files with 475 additions and 459 deletions

View file

@ -289,7 +289,7 @@ const getClass = (val: boolean) => {
</div> </div>
</div> </div>
<div class="col-xs-6 col-sm-3 row items-center"> <div class="col-xs-6 col-sm-3 row ">
<div class="col-12"> <div class="col-12">
<q-input <q-input
:class="getClass(edit)" :class="getClass(edit)"
@ -305,7 +305,7 @@ const getClass = (val: boolean) => {
/> />
</div> </div>
</div> </div>
<div class="col-xs-6 col-sm-3 row items-center"> <div class="col-xs-6 col-sm-3 row ">
<div class="col-12"> <div class="col-12">
<q-input <q-input
:class="getClass(edit)" :class="getClass(edit)"
@ -321,7 +321,7 @@ const getClass = (val: boolean) => {
/> />
</div> </div>
</div> </div>
<div class="col-xs-6 col-sm-3 row items-center"> <div class="col-xs-6 col-sm-3 row ">
<div class="col-12"> <div class="col-12">
<q-input <q-input
:class="getClass(edit)" :class="getClass(edit)"
@ -337,7 +337,7 @@ const getClass = (val: boolean) => {
/> />
</div> </div>
</div> </div>
<div class="col-xs-6 col-sm-3 row items-center"> <div class="col-xs-6 col-sm-3 row ">
<div class="col-12"> <div class="col-12">
<!-- <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit" :borderless="!edit" <!-- <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit" :borderless="!edit"
v-model="salary" :rules="[(val) => !!val || `${'กรุณากรอกเงินเดือน'}`]" hide-bottom-space v-model="salary" :rules="[(val) => !!val || `${'กรุณากรอกเงินเดือน'}`]" hide-bottom-space
@ -391,6 +391,7 @@ const getClass = (val: boolean) => {
dense dense
lazy-rules lazy-rules
:borderless="!edit" :borderless="!edit"
:readonly="!edit"
:model-value="date !== null ? date2Thai(date) : null" :model-value="date !== null ? date2Thai(date) : null"
:rules="[(val) => !!val || `${'กรุณาเลือกตั้งแต่วัน'}`]" :rules="[(val) => !!val || `${'กรุณาเลือกตั้งแต่วัน'}`]"
hide-bottom-space hide-bottom-space

View file

@ -201,7 +201,7 @@ const getClass = (val: boolean) => {
<q-img :src="avatar" v-if="avatar !== ''" /> <q-img :src="avatar" v-if="avatar !== ''" />
<q-img src="@/assets/avatar_user.jpg" v-else /> <q-img src="@/assets/avatar_user.jpg" v-else />
</div> </div>
<div class="col-xs-6 col-sm-3 row items-center"> <div class="col-xs-6 col-sm-3 row ">
<div class="col-12 q-pl-md"> <div class="col-12 q-pl-md">
<div class="col-12 text-top">ตำแหนงในสายงาน</div> <div class="col-12 text-top">ตำแหนงในสายงาน</div>
<div class="col-12 text-detail"> <div class="col-12 text-detail">
@ -209,7 +209,7 @@ const getClass = (val: boolean) => {
</div> </div>
</div> </div>
</div> </div>
<div class="col-xs-6 col-sm-3 row items-center"> <div class="col-xs-6 col-sm-3 row ">
<div class="col-12"> <div class="col-12">
<div class="col-12 text-top">ระด</div> <div class="col-12 text-top">ระด</div>
<div class="col-12 text-detail"> <div class="col-12 text-detail">
@ -217,7 +217,7 @@ const getClass = (val: boolean) => {
</div> </div>
</div> </div>
</div> </div>
<div class="col-xs-6 col-sm-3 row items-center"> <div class="col-xs-6 col-sm-3 row">
<div class="col-12"> <div class="col-12">
<div class="col-12 text-top">งก</div> <div class="col-12 text-top">งก</div>
<div class="col-12 text-detail"> <div class="col-12 text-detail">
@ -300,7 +300,7 @@ const getClass = (val: boolean) => {
/> />
</div> </div>
</div> </div>
<div class="col-xs-6 col-sm-3 row items-center"> <div class="col-xs-6 col-sm-3 row ">
<div class="col-12"> <div class="col-12">
<q-input <q-input
:class="getClass(edit)" :class="getClass(edit)"
@ -316,7 +316,7 @@ const getClass = (val: boolean) => {
/> />
</div> </div>
</div> </div>
<div class="col-xs-6 col-sm-3 row items-center"> <div class="col-xs-6 col-sm-3 row ">
<div class="col-12"> <div class="col-12">
<q-input <q-input
:class="getClass(edit)" :class="getClass(edit)"
@ -332,7 +332,7 @@ const getClass = (val: boolean) => {
/> />
</div> </div>
</div> </div>
<div class="col-xs-6 col-sm-3 row items-center"> <div class="col-xs-6 col-sm-3 row ">
<div class="col-12"> <div class="col-12">
<q-input <q-input
:class="getClass(edit)" :class="getClass(edit)"
@ -348,7 +348,7 @@ const getClass = (val: boolean) => {
/> />
</div> </div>
</div> </div>
<div class="col-xs-6 col-sm-3 row items-center"> <div class="col-xs-6 col-sm-3 row ">
<div class="col-12"> <div class="col-12">
<!-- <q-input <!-- <q-input
:class="getClass(edit)" :class="getClass(edit)"
@ -409,6 +409,7 @@ const getClass = (val: boolean) => {
:outlined="edit" :outlined="edit"
dense dense
lazy-rules lazy-rules
:readonly="!edit"
:borderless="!edit" :borderless="!edit"
:model-value="date !== null ? date2Thai(date) : null" :model-value="date !== null ? date2Thai(date) : null"
:rules="[(val) => !!val || `${'กรุณาเลือกตั้งแต่วัน'}`]" :rules="[(val) => !!val || `${'กรุณาเลือกตั้งแต่วัน'}`]"

View file

@ -497,9 +497,8 @@ const getClass = (val: boolean) => {
:addEmployee="statusAdd()" :addEmployee="statusAdd()"
/> />
<!-- :disable="statusEdit" --> <!-- :disable="statusEdit" -->
<q-separator />
<q-form ref="myform" class="col-12"> <q-form ref="myform" class="col-12">
<div class="row col-12 items-center q-col-gutter-x-sm q-col-gutter-y-sm"> <div class="row col-12 q-col-gutter-x-sm q-col-gutter-y-sm">
<div class="col-xs-6 col-sm-3 col-md-3"> <div class="col-xs-6 col-sm-3 col-md-3">
<q-input <q-input
:class="getClass(edit)" :class="getClass(edit)"

View file

@ -585,7 +585,7 @@ const getClass = (val: boolean) => {
<q-form ref="myForm"> <q-form ref="myForm">
<div class="row col-12 q-pa-md"> <div class="row col-12 q-pa-md">
<div class="col-12 row bg-white"> <div class="col-12 row bg-white">
<div class="col-xs-12 row items-center q-col-gutter-md"> <div class="col-xs-12 row q-col-gutter-md">
<div class="col-xs-12"> <div class="col-xs-12">
<div class="text-weight-bold text-grey">อมลสวนต</div> <div class="text-weight-bold text-grey">อมลสวนต</div>
</div> </div>

View file

@ -276,7 +276,7 @@ onMounted(async () => {
/> />
</div> </div>
</div> </div>
<div class="col-xs-6 col-sm-3 row items-center"> <div class="col-xs-6 col-sm-3 row ">
<div class="col-12"> <div class="col-12">
<q-input <q-input
:class="getClass(edit)" :class="getClass(edit)"
@ -292,7 +292,7 @@ onMounted(async () => {
/> />
</div> </div>
</div> </div>
<div class="col-xs-6 col-sm-3 row items-center"> <div class="col-xs-6 col-sm-3 row ">
<div class="col-12"> <div class="col-12">
<q-input <q-input
:class="getClass(edit)" :class="getClass(edit)"
@ -308,7 +308,7 @@ onMounted(async () => {
/> />
</div> </div>
</div> </div>
<div class="col-xs-6 col-sm-3 row items-center"> <div class="col-xs-6 col-sm-3 row ">
<div class="col-12"> <div class="col-12">
<q-input <q-input
:class="getClass(edit)" :class="getClass(edit)"
@ -324,7 +324,7 @@ onMounted(async () => {
/> />
</div> </div>
</div> </div>
<div class="col-xs-6 col-sm-3 row items-center"> <div class="col-xs-6 col-sm-3 row ">
<div class="col-12"> <div class="col-12">
<!-- <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit" :borderless="!edit" <!-- <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit" :borderless="!edit"
v-model="salary" :rules="[(val) => !!val || `${'กรุณากรอกเงินเดือน'}`]" hide-bottom-space v-model="salary" :rules="[(val) => !!val || `${'กรุณากรอกเงินเดือน'}`]" hide-bottom-space
@ -340,7 +340,7 @@ onMounted(async () => {
</div> </div>
</div> </div>
<div class="col-12"><q-separator /></div> <div class="col-12"><q-separator /></div>
<div class="col-xs-6 col-sm-6 row items-center"> <div class="col-xs-6 col-sm-6 row ">
<div class="col-12"> <div class="col-12">
<q-input <q-input
:class="getClass(edit)" :class="getClass(edit)"
@ -358,7 +358,7 @@ onMounted(async () => {
/> />
</div> </div>
</div> </div>
<div class="col-xs-6 col-sm-6 row items-center"> <div class="col-xs-6 col-sm-6 row ">
<div class="col-12"> <div class="col-12">
<datepicker <datepicker
menu-class-name="modalfix" menu-class-name="modalfix"
@ -379,6 +379,7 @@ onMounted(async () => {
:outlined="edit" :outlined="edit"
dense dense
lazy-rules lazy-rules
:readonly="!edit"
:borderless="!edit" :borderless="!edit"
:model-value="date !== null ? date2Thai(date) : null" :model-value="date !== null ? date2Thai(date) : null"
:rules="[(val) => !!val || `${'กรุณาเลือกตั้งแต่วัน'}`]" :rules="[(val) => !!val || `${'กรุณาเลือกตั้งแต่วัน'}`]"

View file

@ -247,81 +247,77 @@
</div> </div>
<div class="col-12"><q-separator /></div> <div class="col-12"><q-separator /></div>
<q-form ref="myForm"> <q-form ref="myForm">
<div class="row col-12 q-pa-md"> <div class="row q-pa-md">
<div class="col-12 row bg-white q-col-gutter-md"> <div class="col-12">
<div class="col-xs-12 row items-center"> <div class="row bg-white q-col-gutter-y-md">
<div class="col-12"> <div class="col-xs-12 row items-center">
<div class="text-weight-bold text-grey"> <div class="col-12">
ตำแหนงและหนวยงานเด <div class="text-weight-bold text-grey">
ตำแหนงและหนวยงานเด
</div>
</div>
<div class="col-12">
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="organizationPositionOld"
:rules="[(val) => !!val || `${'กรุณากรอกตำแหน่ง/สังกัด'}`]"
hide-bottom-space
:label="`${'ตำแหน่ง/สังกัด'}`"
type="textarea"
/>
</div> </div>
</div> </div>
<div class="col-12"> <div class="col-12">
<q-input <div class="row q-col-gutter-x-xs">
:class="getClass(edit)" <div class="col-xs-6 col-sm-3">
:outlined="edit" <q-input
dense :class="getClass(edit)"
lazy-rules :outlined="edit"
:readonly="!edit" dense
:borderless="!edit" lazy-rules
v-model="organizationPositionOld" :readonly="!edit"
:rules="[(val) => !!val || `${'กรุณากรอกตำแหน่ง/สังกัด'}`]" :borderless="!edit"
hide-bottom-space v-model="positionTypeOld"
:label="`${'ตำแหน่ง/สังกัด'}`" :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่งประเภท'}`]"
type="textarea" hide-bottom-space
/> :label="`${'ตำแหน่งประเภท'}`"
</div> />
</div> </div>
<div class="col-xs-6 col-sm-3 row items-center"> <div class="col-xs-6 col-sm-3">
<div class="col-12"> <q-input
<q-input :class="getClass(edit)"
:class="getClass(edit)" :outlined="edit"
:outlined="edit" dense
dense lazy-rules
lazy-rules :readonly="!edit"
:readonly="!edit" :borderless="!edit"
:borderless="!edit" v-model="positionLevelOld"
v-model="positionTypeOld" :rules="[(val) => !!val || `${'กรุณากรอกระดับ'}`]"
:rules="[(val) => !!val || `${'กรุณากรอกตำแหน่งประเภท'}`]" hide-bottom-space
hide-bottom-space :label="`${'ระดับ'}`"
:label="`${'ตำแหน่งประเภท'}`" />
/> </div>
</div> <div class="col-xs-6 col-sm-3">
</div> <q-input
<div class="col-xs-6 col-sm-3 row items-center"> :class="getClass(edit)"
<div class="col-12"> :outlined="edit"
<q-input dense
:class="getClass(edit)" lazy-rules
:outlined="edit" :readonly="!edit"
dense :borderless="!edit"
lazy-rules v-model="posNo"
:readonly="!edit" :rules="[(val) => !!val || `${'กรุณากรอกเลขที่'}`]"
:borderless="!edit" hide-bottom-space
v-model="positionLevelOld" :label="`${'เลขที่'}`"
:rules="[(val) => !!val || `${'กรุณากรอกระดับ'}`]" />
hide-bottom-space </div>
:label="`${'ระดับ'}`" <div class="col-xs-6 col-sm-3">
/> <!-- <q-input
</div>
</div>
<div class="col-xs-6 col-sm-3 row items-center">
<div class="col-12">
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="posNo"
:rules="[(val) => !!val || `${'กรุณากรอกเลขที่'}`]"
hide-bottom-space
:label="`${'เลขที่'}`"
/>
</div>
</div>
<div class="col-xs-6 col-sm-3 row items-center">
<div class="col-12">
<!-- <q-input
:class="getClass(edit)" :class="getClass(edit)"
:outlined="edit" :outlined="edit"
dense dense
@ -334,18 +330,83 @@
:label="`${'เงินเดือน'}`" :label="`${'เงินเดือน'}`"
type="number" type="number"
/> --> /> -->
<CurrencyInput <CurrencyInput
v-model="salary" v-model="salary"
:edit="edit" :edit="edit"
:options="{ :options="{
currency: 'THB', currency: 'THB',
}" }"
:label="`${'เงินเดือน'}`" :label="`${'เงินเดือน'}`"
/> />
</div>
</div>
</div> </div>
</div>
<div class="col-12"><q-separator /></div> <div class="col-12"><q-separator /></div>
<div class="col-xs-6 col-sm-6 row items-center">
<div class="col-12">
<div class="row q-col-gutter-x-xs">
<div class="col-xs-6 col-sm-6">
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="organization"
:rules="[(val) => !!val || `${'กรุณากรอกโอนไปสังกัด'}`]"
hide-bottom-space
:label="`${'โอนไปสังกัด'}`"
/>
</div>
<div class="col-xs-6 col-sm-6">
<datepicker
menu-class-name="modalfix"
:readonly="!edit"
v-model="date"
:locale="'th'"
autoApply
:enableTimePicker="false"
week-start="0"
>
<template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{
parseInt(value + 543)
}}</template>
<template #trigger>
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:borderless="!edit"
:model-value="date !== null ? date2Thai(date) : null"
:rules="[
(val) => !!val || `${'กรุณาเลือกตั้งแต่วัน'}`,
]"
hide-bottom-space
:label="`${'ตั้งแต่วัน'}`"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
:style="
edit
? 'color: var(--q-primary)'
: 'color: var(--q-grey)'
"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
</div>
</div>
</div>
<div class="col-12"> <div class="col-12">
<q-input <q-input
:class="getClass(edit)" :class="getClass(edit)"
@ -354,72 +415,14 @@
lazy-rules lazy-rules
:readonly="!edit" :readonly="!edit"
:borderless="!edit" :borderless="!edit"
v-model="organization" v-model="reason"
:rules="[(val) => !!val || `${'กรุณากรอกโอนไปสังกัด'}`]" :rules="[(val) => !!val || `${'กรุณากรอกหมายเหตุ '}`]"
hide-bottom-space hide-bottom-space
:label="`${'โอนไปสังกัด'}`" :label="`${'หมายเหตุ '}`"
type="textarea"
/> />
</div> </div>
</div> </div>
<div class="col-xs-6 col-sm-6 row items-center">
<div class="col-12">
<datepicker
menu-class-name="modalfix"
:readonly="!edit"
v-model="date"
:locale="'th'"
autoApply
:enableTimePicker="false"
week-start="0"
>
<template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{
parseInt(value + 543)
}}</template>
<template #trigger>
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:borderless="!edit"
:model-value="date !== null ? date2Thai(date) : null"
:rules="[(val) => !!val || `${'กรุณาเลือกตั้งแต่วัน'}`]"
hide-bottom-space
:label="`${'ตั้งแต่วัน'}`"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
:style="
edit
? 'color: var(--q-primary)'
: 'color: var(--q-grey)'
"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
</div>
</div>
<div class="col-12">
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="reason"
:rules="[(val) => !!val || `${'กรุณากรอกหมายเหตุ '}`]"
hide-bottom-space
:label="`${'หมายเหตุ '}`"
type="textarea"
/>
</div>
</div> </div>
</div> </div>
</q-form> </q-form>

View file

@ -349,7 +349,7 @@ onMounted(async () => {
</div> </div>
</div> --> </div> -->
<div class="col-12"><q-separator /></div> <div class="col-12"><q-separator /></div>
<div class="col-xs-6 col-sm-4 row items-center"> <div class="col-xs-6 col-sm-4 row ">
<div class="col-12"> <div class="col-12">
<q-input <q-input
:class="getClass(edit)" :class="getClass(edit)"
@ -365,7 +365,7 @@ onMounted(async () => {
/> />
</div> </div>
</div> </div>
<div class="col-xs-6 col-sm-4 row items-center"> <div class="col-xs-6 col-sm-4 row ">
<div class="col-12"> <div class="col-12">
<datepicker <datepicker
menu-class-name="modalfix" menu-class-name="modalfix"
@ -412,7 +412,7 @@ onMounted(async () => {
</datepicker> </datepicker>
</div> </div>
</div> </div>
<div class="col-xs-6 col-sm-4 row items-center"> <div class="col-xs-6 col-sm-4 row ">
<div class="col-12"> <div class="col-12">
<datepicker <datepicker
menu-class-name="modalfix" menu-class-name="modalfix"

View file

@ -133,7 +133,7 @@
/> />
</div> </div>
</div> </div>
<div class="col-xs-6 col-sm-3 row items-center"> <div class="col-xs-6 col-sm-3 row ">
<div class="col-12"> <div class="col-12">
<q-input <q-input
:class="getClass(edit)" :class="getClass(edit)"
@ -149,7 +149,7 @@
/> />
</div> </div>
</div> </div>
<div class="col-xs-6 col-sm-3 row items-center"> <div class="col-xs-6 col-sm-3 row ">
<div class="col-12"> <div class="col-12">
<q-input <q-input
:class="getClass(edit)" :class="getClass(edit)"
@ -165,7 +165,7 @@
/> />
</div> </div>
</div> </div>
<div class="col-xs-6 col-sm-3 row items-center"> <div class="col-xs-6 col-sm-3 row ">
<div class="col-12"> <div class="col-12">
<q-input <q-input
:class="getClass(edit)" :class="getClass(edit)"
@ -181,7 +181,7 @@
/> />
</div> </div>
</div> </div>
<div class="col-xs-6 col-sm-3 row items-center"> <div class="col-xs-6 col-sm-3 row ">
<div class="col-12"> <div class="col-12">
<!-- <q-input <!-- <q-input
:class="getClass(edit)" :class="getClass(edit)"
@ -207,7 +207,7 @@
</div> </div>
</div> </div>
<div class="col-12"><q-separator /></div> <div class="col-12"><q-separator /></div>
<div class="col-xs-6 col-sm-6 row items-center"> <div class="col-xs-6 col-sm-6 row ">
<div class="col-12"> <div class="col-12">
<q-input <q-input
:class="getClass(edit)" :class="getClass(edit)"
@ -223,7 +223,7 @@
/> />
</div> </div>
</div> </div>
<div class="col-xs-6 col-sm-6 row items-center"> <div class="col-xs-6 col-sm-6 row ">
<div class="col-12"> <div class="col-12">
<datepicker <datepicker
menu-class-name="modalfix" menu-class-name="modalfix"
@ -244,6 +244,7 @@
:outlined="edit" :outlined="edit"
dense dense
lazy-rules lazy-rules
:readonly="!edit"
:borderless="!edit" :borderless="!edit"
:model-value="date !== null ? date2Thai(date) : null" :model-value="date !== null ? date2Thai(date) : null"
:rules="[(val) => !!val || `${'กรุณาเลือกตั้งแต่วัน'}`]" :rules="[(val) => !!val || `${'กรุณาเลือกตั้งแต่วัน'}`]"

View file

@ -137,7 +137,7 @@
/> />
</div> </div>
</div> </div>
<div class="col-xs-6 col-sm-3 row items-center"> <div class="col-xs-6 col-sm-3 row ">
<div class="col-12"> <div class="col-12">
<q-input <q-input
:class="getClass(edit)" :class="getClass(edit)"
@ -153,7 +153,7 @@
/> />
</div> </div>
</div> </div>
<div class="col-xs-6 col-sm-3 row items-center"> <div class="col-xs-6 col-sm-3 row ">
<div class="col-12"> <div class="col-12">
<q-input <q-input
:class="getClass(edit)" :class="getClass(edit)"
@ -169,7 +169,7 @@
/> />
</div> </div>
</div> </div>
<div class="col-xs-6 col-sm-3 row items-center"> <div class="col-xs-6 col-sm-3 row ">
<div class="col-12"> <div class="col-12">
<q-input <q-input
:class="getClass(edit)" :class="getClass(edit)"
@ -185,7 +185,7 @@
/> />
</div> </div>
</div> </div>
<div class="col-xs-6 col-sm-3 row items-center"> <div class="col-xs-6 col-sm-3 row ">
<div class="col-12"> <div class="col-12">
<!-- <q-input <!-- <q-input
:class="getClass(edit)" :class="getClass(edit)"
@ -212,7 +212,7 @@
</div> </div>
</div> </div>
<div class="col-12"><q-separator /></div> <div class="col-12"><q-separator /></div>
<div class="col-xs-6 col-sm-6 row items-center"> <div class="col-xs-6 col-sm-6 row ">
<div class="col-12"> <div class="col-12">
<q-input <q-input
:class="getClass(edit)" :class="getClass(edit)"
@ -228,7 +228,7 @@
/> />
</div> </div>
</div> </div>
<div class="col-xs-6 col-sm-6 row items-center"> <div class="col-xs-6 col-sm-6 row ">
<div class="col-12"> <div class="col-12">
<datepicker <datepicker
menu-class-name="modalfix" menu-class-name="modalfix"

View file

@ -137,7 +137,7 @@
/> />
</div> </div>
</div> </div>
<div class="col-xs-6 col-sm-3 row items-center"> <div class="col-xs-6 col-sm-3 row ">
<div class="col-12"> <div class="col-12">
<q-input <q-input
:class="getClass(edit)" :class="getClass(edit)"
@ -153,7 +153,7 @@
/> />
</div> </div>
</div> </div>
<div class="col-xs-6 col-sm-3 row items-center"> <div class="col-xs-6 col-sm-3 row ">
<div class="col-12"> <div class="col-12">
<q-input <q-input
:class="getClass(edit)" :class="getClass(edit)"
@ -169,7 +169,7 @@
/> />
</div> </div>
</div> </div>
<div class="col-xs-6 col-sm-3 row items-center"> <div class="col-xs-6 col-sm-3 row ">
<div class="col-12"> <div class="col-12">
<q-input <q-input
:class="getClass(edit)" :class="getClass(edit)"
@ -185,7 +185,7 @@
/> />
</div> </div>
</div> </div>
<div class="col-xs-6 col-sm-3 row items-center"> <div class="col-xs-6 col-sm-3 row ">
<div class="col-12"> <div class="col-12">
<!-- <q-input <!-- <q-input
:class="getClass(edit)" :class="getClass(edit)"
@ -212,7 +212,7 @@
</div> </div>
</div> </div>
<div class="col-12"><q-separator /></div> <div class="col-12"><q-separator /></div>
<div class="col-xs-6 col-sm-6 row items-center"> <div class="col-xs-6 col-sm-6 row ">
<div class="col-12"> <div class="col-12">
<q-input <q-input
:class="getClass(edit)" :class="getClass(edit)"
@ -228,7 +228,7 @@
/> />
</div> </div>
</div> </div>
<div class="col-xs-6 col-sm-6 row items-center"> <div class="col-xs-6 col-sm-6 row ">
<div class="col-12"> <div class="col-12">
<datepicker <datepicker
menu-class-name="modalfix" menu-class-name="modalfix"
@ -250,6 +250,7 @@
dense dense
lazy-rules lazy-rules
:borderless="!edit" :borderless="!edit"
:readonly="!edit"
:model-value="date !== null ? date2Thai(date) : null" :model-value="date !== null ? date2Thai(date) : null"
:rules="[(val) => !!val || `${'กรุณาเลือกตั้งแต่วัน'}`]" :rules="[(val) => !!val || `${'กรุณาเลือกตั้งแต่วัน'}`]"
hide-bottom-space hide-bottom-space

View file

@ -774,7 +774,7 @@ const statusOrder = (val: boolean) => {
/> />
</div> </div>
</div> </div>
<div class="col-xs-6 col-sm-3 row items-center"> <div class="col-xs-6 col-sm-3 row ">
<div class="col-12"> <div class="col-12">
<q-input <q-input
:class="getClass(edit)" :class="getClass(edit)"
@ -790,7 +790,7 @@ const statusOrder = (val: boolean) => {
/> />
</div> </div>
</div> </div>
<div class="col-xs-6 col-sm-3 row items-center"> <div class="col-xs-6 col-sm-3 row ">
<div class="col-12"> <div class="col-12">
<q-input <q-input
:class="getClass(edit)" :class="getClass(edit)"
@ -806,7 +806,7 @@ const statusOrder = (val: boolean) => {
/> />
</div> </div>
</div> </div>
<div class="col-xs-6 col-sm-3 row items-center"> <div class="col-xs-6 col-sm-3 row ">
<div class="col-12"> <div class="col-12">
<q-input <q-input
:class="getClass(edit)" :class="getClass(edit)"
@ -822,7 +822,7 @@ const statusOrder = (val: boolean) => {
/> />
</div> </div>
</div> </div>
<div class="col-xs-6 col-sm-3 row items-center"> <div class="col-xs-6 col-sm-3 row ">
<div class="col-12"> <div class="col-12">
<!-- <q-input <!-- <q-input
:class="getClass(edit)" :class="getClass(edit)"
@ -849,7 +849,7 @@ const statusOrder = (val: boolean) => {
</div> </div>
</div> </div>
<div class="col-12"><q-separator /></div> <div class="col-12"><q-separator /></div>
<div class="col-xs-4 row items-center"> <div class="col-xs-4 row ">
<div class="col-12"> <div class="col-12">
<q-input <q-input
:class="getClass(edit)" :class="getClass(edit)"
@ -867,7 +867,7 @@ const statusOrder = (val: boolean) => {
/> />
</div> </div>
</div> </div>
<div class="col-xs-4 row items-center"> <div class="col-xs-4 row ">
<div class="col-12"> <div class="col-12">
<datepicker <datepicker
menu-class-name="modalfix" menu-class-name="modalfix"
@ -884,6 +884,7 @@ const statusOrder = (val: boolean) => {
}}</template> }}</template>
<template #trigger> <template #trigger>
<q-input <q-input
:readonly="!edit"
:class="getClass(edit)" :class="getClass(edit)"
:outlined="edit" :outlined="edit"
dense dense
@ -914,7 +915,7 @@ const statusOrder = (val: boolean) => {
</datepicker> </datepicker>
</div> </div>
</div> </div>
<div class="col-xs-4 row items-center"> <div class="col-xs-4 row ">
<div class="col-12"> <div class="col-12">
<datepicker <datepicker
menu-class-name="modalfix" menu-class-name="modalfix"
@ -931,6 +932,7 @@ const statusOrder = (val: boolean) => {
}}</template> }}</template>
<template #trigger> <template #trigger>
<q-input <q-input
:readonly="!edit"
:class="getClass(edit)" :class="getClass(edit)"
:outlined="edit" :outlined="edit"
dense dense

View file

@ -12,288 +12,295 @@
:addEmployee="statusAdd()" :addEmployee="statusAdd()"
/> />
<q-form ref="myform" class="col-12 q-pt-md"> <q-form ref="myform" class="col-12 q-pt-md">
<div class="row col-12 items-center q-col-gutter-x-sm q-col-gutter-y-sm"> <div class="row">
<div class="col-xs-6 col-sm-3 col-md-3"> <div class="row col-12 q-col-gutter-x-sm q-mb-xs">
<q-input <div class="col-xs-6 col-sm-3 col-md-3">
:class="getClass(edit)" <q-input
hide-bottom-space :class="getClass(edit)"
:outlined="edit" hide-bottom-space
v-model="informaData.cardid" :outlined="edit"
dense v-model="informaData.cardid"
@update:model-value="changeCardID" dense
lazy-rules @update:model-value="changeCardID"
:rules="[ lazy-rules
:rules="[
(val:string) => !!val || `${'กรุณากรอก เลขบัตรประจำตัวประชาชน'}`, (val:string) => !!val || `${'กรุณากรอก เลขบัตรประจำตัวประชาชน'}`,
(val:string) => (val:string) =>
val.length >= 13 || val.length >= 13 ||
`${'กรุณากรอกเลขบัตรประจำตัวประชาชนให้ครบ'}`, `${'กรุณากรอกเลขบัตรประจำตัวประชาชนให้ครบ'}`,
]" ]"
:readonly="!edit" :readonly="!edit"
:borderless="!edit" :borderless="!edit"
label="เลขบัตรประจำตัวประชาชน" label="เลขบัตรประจำตัวประชาชน"
maxlength="13" maxlength="13"
mask="#############" mask="#############"
/> />
<!-- :rules="[(val:any) =>val.length != 13 ||`${'กรุณากรอกเลขบัตรประจำตัวประชาชนให้ครบ'}`,]" --> <!-- :rules="[(val:any) =>val.length != 13 ||`${'กรุณากรอกเลขบัตรประจำตัวประชาชนให้ครบ'}`,]" -->
</div> </div>
<div class="col-xs-6 col-sm-3 col-md-3"> <div class="col-xs-6 col-sm-3 col-md-3">
<selector <selector
:hide-dropdown-icon="!edit" :hide-dropdown-icon="!edit"
hide-bottom-space hide-bottom-space
:class="getClass(edit)" :class="getClass(edit)"
:readonly="!edit" :readonly="!edit"
:borderless="!edit" :borderless="!edit"
:rules="[(val:string) => !!val || `${'กรุณาเลือก คำนำหน้าชื่อ'}`]" :rules="[(val:string) => !!val || `${'กรุณาเลือก คำนำหน้าชื่อ'}`]"
:outlined="edit" :outlined="edit"
dense dense
lazy-rules lazy-rules
v-model="informaData.prefixId" v-model="informaData.prefixId"
emit-value emit-value
map-options map-options
option-label="name" option-label="name"
:options="Ops.prefixOps" :options="Ops.prefixOps"
option-value="id" option-value="id"
:label="`${'คำนำหน้าชื่อ'}`" :label="`${'คำนำหน้าชื่อ'}`"
use-input use-input
input-debounce="0" input-debounce="0"
@filter="(inputValue:any, @filter="(inputValue:any,
doneFn:Function) => filterSelector(inputValue, doneFn,'prefixOps' doneFn:Function) => filterSelector(inputValue, doneFn,'prefixOps'
) " ) "
/> />
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<q-input
:class="getClass(edit)"
hide-bottom-space
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="informaData.firstname"
:rules="[(val:string) => !!val || `${'กรุณากรอก ชื่อ'}`]"
:label="`${'ชื่อ'}`"
/>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<q-input
:class="getClass(edit)"
hide-bottom-space
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="informaData.lastname"
:rules="[(val:string) => !!val || `${'กรุณากรอก นามสกุล'}`]"
:label="`${'นามสกุล'}`"
/>
</div>
</div> </div>
<div class="row col-12 q-col-gutter-x-sm q-mb-xs">
<div class="col-xs-6 col-sm-3 col-md-3"> <div class="col-xs-6 col-sm-2 col-md-2">
<q-input <datepicker
:class="getClass(edit)" v-model="informaData.birthDate"
hide-bottom-space :locale="'th'"
:outlined="edit" autoApply
dense :enableTimePicker="false"
lazy-rules week-start="0"
:readonly="!edit" :max-date="calculateMaxDate()"
:borderless="!edit" :disabled="!edit"
v-model="informaData.firstname" @update:model-value="handleDate"
:rules="[(val:string) => !!val || `${'กรุณากรอก ชื่อ'}`]" >
:label="`${'ชื่อ'}`" <template #year="{ year }">
/> {{ year + 543 }}
</div> </template>
<div class="col-xs-6 col-sm-3 col-md-3"> <template #year-overlay-value="{ value }">
<q-input {{ parseInt(value + 543) }}
:class="getClass(edit)" </template>
hide-bottom-space <template #trigger>
:outlined="edit" <q-input
dense :class="getClass(edit)"
lazy-rules hide-bottom-space
:readonly="!edit" :outlined="edit"
:borderless="!edit" dense
v-model="informaData.lastname" lazy-rules
:rules="[(val:string) => !!val || `${'กรุณากรอก นามสกุล'}`]" :readonly="!edit"
:label="`${'นามสกุล'}`" :borderless="!edit"
/> :model-value="
</div> informaData.birthDate == null
<div class="col-xs-6 col-sm-2 col-md-2"> ? null
<datepicker : date2Thai(informaData.birthDate)
v-model="informaData.birthDate" "
:locale="'th'" :rules="[(val:string) => !!val || `${'กรุณาเลือก วัน/เดือน/ปี เกิด'}`]"
autoApply :label="`${'วัน/เดือน/ปี เกิด'}`"
:enableTimePicker="false" >
week-start="0" <template v-slot:prepend>
:max-date="calculateMaxDate()" <q-icon
:disabled="!edit" name="event"
@update:model-value="handleDate" class="cursor-pointer"
> :style="
<template #year="{ year }"> edit
{{ year + 543 }} ? 'color: var(--q-primary)'
</template> : 'color: var(--q-grey)'
<template #year-overlay-value="{ value }"> "
{{ parseInt(value + 543) }} >
</template> </q-icon>
<template #trigger> </template>
<q-input </q-input>
:class="getClass(edit)" </template>
hide-bottom-space </datepicker>
:outlined="edit" </div>
dense <div class="col-xs-6 col-sm-2 col-md-2">
lazy-rules <q-input
:readonly="!edit" :class="getClass(false)"
:borderless="!edit" hide-bottom-space
:model-value=" dense
informaData.birthDate == null lazy-rules
? null readonly
: date2Thai(informaData.birthDate) borderless
" :style="!edit ? '' : 'padding:0 12px;'"
:rules="[(val:string) => !!val || `${'กรุณาเลือก วัน/เดือน/ปี เกิด'}`]" :model-value="informaData.age"
:label="`${'วัน/เดือน/ปี เกิด'}`" :label="`${'อายุ'}`"
> />
<template v-slot:prepend> </div>
<q-icon <div class="col-xs-6 col-sm-2 col-md-2">
name="event" <selector
class="cursor-pointer" :hide-dropdown-icon="!edit"
:style=" hide-bottom-space
edit ? 'color: var(--q-primary)' : 'color: var(--q-grey)' :class="getClass(edit)"
" :readonly="!edit"
> :borderless="!edit"
</q-icon> :outlined="edit"
</template> dense
</q-input> lazy-rules
</template> v-model="informaData.genderId"
</datepicker> emit-value
</div> map-options
<div class="col-xs-6 col-sm-2 col-md-2"> option-label="name"
<q-input :options="Ops.genderOps"
:class="getClass(false)" option-value="id"
hide-bottom-space :label="`${'เพศ'}`"
dense use-input
lazy-rules input-debounce="0"
readonly @filter="(inputValue:any,
borderless
:style="!edit ? '' : 'padding:0 12px;'"
:model-value="informaData.age"
:label="`${'อายุ'}`"
/>
</div>
<div class="col-xs-6 col-sm-2 col-md-2">
<selector
:hide-dropdown-icon="!edit"
hide-bottom-space
:class="getClass(edit)"
:readonly="!edit"
:borderless="!edit"
:outlined="edit"
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' doneFn:Function) => filterSelector(inputValue, doneFn,'genderOps'
) " ) "
/> />
</div> </div>
<div class="col-xs-6 col-sm-2 col-md-2"> <div class="col-xs-6 col-sm-2 col-md-2">
<selector <selector
:hide-dropdown-icon="!edit" :hide-dropdown-icon="!edit"
hide-bottom-space hide-bottom-space
:class="getClass(edit)" :class="getClass(edit)"
:readonly="!edit" :readonly="!edit"
:borderless="!edit" :borderless="!edit"
:outlined="edit" :outlined="edit"
dense dense
lazy-rules lazy-rules
v-model="informaData.statusId" v-model="informaData.statusId"
emit-value emit-value
map-options map-options
option-label="name" option-label="name"
:options="Ops.statusOps" :options="Ops.statusOps"
option-value="id" option-value="id"
:label="`${'สถานภาพ'}`" :label="`${'สถานภาพ'}`"
use-input use-input
input-debounce="0" input-debounce="0"
@filter="(inputValue:any, @filter="(inputValue:any,
doneFn:Function) => filterSelector(inputValue, doneFn,'statusOps' doneFn:Function) => filterSelector(inputValue, doneFn,'statusOps'
) " ) "
/> />
</div>
<div class="col-xs-6 col-sm-2 col-md-2">
<q-input
:class="getClass(edit)"
hide-bottom-space
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="informaData.nationality"
:label="`${'สัญชาติ'}`"
/>
</div>
<div class="col-xs-6 col-sm-2 col-md-2">
<q-input
:class="getClass(edit)"
hide-bottom-space
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="informaData.ethnicity"
:label="`${'เชื้อชาติ'}`"
/>
</div>
</div> </div>
<div class="col-xs-6 col-sm-2 col-md-2"> <div class="row col-12 q-col-gutter-x-sm q-mb-xs">
<q-input <div class="col-xs-6 col-sm-2 col-md-2">
:class="getClass(edit)" <selector
hide-bottom-space :hide-dropdown-icon="!edit"
:outlined="edit" hide-bottom-space
dense :class="getClass(edit)"
lazy-rules :readonly="!edit"
:readonly="!edit" :borderless="!edit"
:borderless="!edit" :outlined="edit"
v-model="informaData.nationality" dense
:label="`${'สัญชาติ'}`" lazy-rules
/> v-model="informaData.religionId"
</div> emit-value
<div class="col-xs-6 col-sm-2 col-md-2"> map-options
<q-input option-label="name"
:class="getClass(edit)" :options="Ops.religionOps"
hide-bottom-space option-value="id"
:outlined="edit" :label="`${'ศาสนา'}`"
dense use-input
lazy-rules input-debounce="0"
:readonly="!edit" @filter="(inputValue:any,
:borderless="!edit"
v-model="informaData.ethnicity"
:label="`${'เชื้อชาติ'}`"
/>
</div>
<div class="col-xs-6 col-sm-2 col-md-2">
<selector
:hide-dropdown-icon="!edit"
hide-bottom-space
:class="getClass(edit)"
:readonly="!edit"
:borderless="!edit"
:outlined="edit"
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' doneFn:Function) => filterSelector(inputValue, doneFn,'religionOps'
) " ) "
/> />
</div> </div>
<div class="col-xs-6 col-sm-2 col-md-2"> <div class="col-xs-6 col-sm-2 col-md-2">
<selector <selector
:hide-dropdown-icon="!edit" :hide-dropdown-icon="!edit"
hide-bottom-space hide-bottom-space
:class="getClass(edit)" :class="getClass(edit)"
:readonly="!edit" :readonly="!edit"
:borderless="!edit" :borderless="!edit"
:outlined="edit" :outlined="edit"
dense dense
lazy-rules lazy-rules
v-model="informaData.bloodId" v-model="informaData.bloodId"
emit-value emit-value
map-options map-options
option-label="name" option-label="name"
:options="Ops.bloodOps" :options="Ops.bloodOps"
option-value="id" option-value="id"
:label="`${'หมู่เลือด'}`" :label="`${'หมู่เลือด'}`"
use-input use-input
input-debounce="0" input-debounce="0"
@filter="(inputValue:any, @filter="(inputValue:any,
doneFn:Function) => filterSelector(inputValue, doneFn,'bloodOps' doneFn:Function) => filterSelector(inputValue, doneFn,'bloodOps'
) " ) "
clearable clearable
/> />
</div> </div>
<div class="col-xs-6 col-sm-2 col-md-2"> <div class="col-xs-6 col-sm-2 col-md-2">
<q-input <q-input
hide-bottom-space hide-bottom-space
:outlined="edit" :outlined="edit"
dense dense
lazy-rules lazy-rules
type="tel" type="tel"
:class="getClass(edit)" :class="getClass(edit)"
:readonly="!edit" :readonly="!edit"
:borderless="!edit" :borderless="!edit"
v-model="informaData.tel" v-model="informaData.tel"
:label="`${'เบอร์โทร'}`" :label="`${'เบอร์โทร'}`"
:rules="[ :rules="[
(val:string) => !!val || `${'กรุณากรอก เบอร์โทร'}`, (val:string) => !!val || `${'กรุณากรอก เบอร์โทร'}`,
(val:string) => (val:string) =>
val.length >= 10 || val.length >= 10 ||
`${'กรุณากรอกเบอร์โทรให้ครบ'}`, `${'กรุณากรอกเบอร์โทรให้ครบ'}`,
]" ]"
mask="##########" mask="##########"
/> />
</div>
</div> </div>
<div <div
class="col-xs-6 col-sm-3 col-md-3" class="col-xs-6 col-sm-3 col-md-3"
@ -1021,13 +1028,13 @@ const fetchDataComponent = async (modelData: Date) => {
await fetchData(); await fetchData();
}; };
const calculateMaxDate = () => { const calculateMaxDate = () => {
const today = new Date(); const today = new Date();
today.setDate(today.getDate() - 1); today.setDate(today.getDate() - 1);
return today; return today;
} };
const calRetire = async (birth: Date) => { const calRetire = async (birth: Date) => {
console.log(birth) console.log(birth);
const body = { const body = {
birthDate: dateToISO(birth), birthDate: dateToISO(birth),
}; };