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

View file

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

View file

@ -497,9 +497,8 @@ const getClass = (val: boolean) => {
:addEmployee="statusAdd()"
/>
<!-- :disable="statusEdit" -->
<q-separator />
<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">
<q-input
:class="getClass(edit)"

View file

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

View file

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

View file

@ -247,81 +247,77 @@
</div>
<div class="col-12"><q-separator /></div>
<q-form ref="myForm">
<div class="row col-12 q-pa-md">
<div class="col-12 row bg-white q-col-gutter-md">
<div class="col-xs-12 row items-center">
<div class="col-12">
<div class="text-weight-bold text-grey">
ตำแหนงและหนวยงานเด
<div class="row q-pa-md">
<div class="col-12">
<div class="row bg-white q-col-gutter-y-md">
<div class="col-xs-12 row items-center">
<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 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 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="positionTypeOld"
: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)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="positionLevelOld"
: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)"
: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
<div class="row q-col-gutter-x-xs">
<div class="col-xs-6 col-sm-3">
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="positionTypeOld"
:rules="[(val) => !!val || `${'กรุณากรอกตำแหน่งประเภท'}`]"
hide-bottom-space
:label="`${'ตำแหน่งประเภท'}`"
/>
</div>
<div class="col-xs-6 col-sm-3">
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="positionLevelOld"
:rules="[(val) => !!val || `${'กรุณากรอกระดับ'}`]"
hide-bottom-space
:label="`${'ระดับ'}`"
/>
</div>
<div class="col-xs-6 col-sm-3">
<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 class="col-xs-6 col-sm-3">
<!-- <q-input
:class="getClass(edit)"
:outlined="edit"
dense
@ -334,18 +330,83 @@
:label="`${'เงินเดือน'}`"
type="number"
/> -->
<CurrencyInput
v-model="salary"
:edit="edit"
:options="{
currency: 'THB',
}"
:label="`${'เงินเดือน'}`"
/>
<CurrencyInput
v-model="salary"
:edit="edit"
:options="{
currency: 'THB',
}"
:label="`${'เงินเดือน'}`"
/>
</div>
</div>
</div>
</div>
<div class="col-12"><q-separator /></div>
<div class="col-xs-6 col-sm-6 row items-center">
<div class="col-12"><q-separator /></div>
<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">
<q-input
:class="getClass(edit)"
@ -354,72 +415,14 @@
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="organization"
:rules="[(val) => !!val || `${'กรุณากรอกโอนไปสังกัด'}`]"
v-model="reason"
:rules="[(val) => !!val || `${'กรุณากรอกหมายเหตุ '}`]"
hide-bottom-space
:label="`${'โอนไปสังกัด'}`"
:label="`${'หมายเหตุ '}`"
type="textarea"
/>
</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>
</q-form>

View file

@ -349,7 +349,7 @@ onMounted(async () => {
</div>
</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">
<q-input
:class="getClass(edit)"
@ -365,7 +365,7 @@ onMounted(async () => {
/>
</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">
<datepicker
menu-class-name="modalfix"
@ -412,7 +412,7 @@ onMounted(async () => {
</datepicker>
</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">
<datepicker
menu-class-name="modalfix"