เเก้ input ลอย ตอน validate เด้ง
This commit is contained in:
parent
e74e845cda
commit
bc41809f86
12 changed files with 475 additions and 459 deletions
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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 || `${'กรุณาเลือกตั้งแต่วัน'}`]"
|
||||
|
|
|
|||
|
|
@ -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)"
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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 || `${'กรุณาเลือกตั้งแต่วัน'}`]"
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue