เเก้ 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>
|
</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
|
||||||
|
|
|
||||||
|
|
@ -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 || `${'กรุณาเลือกตั้งแต่วัน'}`]"
|
||||||
|
|
|
||||||
|
|
@ -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)"
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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 || `${'กรุณาเลือกตั้งแต่วัน'}`]"
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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"
|
||||||
|
|
|
||||||
|
|
@ -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 || `${'กรุณาเลือกตั้งแต่วัน'}`]"
|
||||||
|
|
|
||||||
|
|
@ -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"
|
||||||
|
|
|
||||||
|
|
@ -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
|
||||||
|
|
|
||||||
|
|
@ -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
|
||||||
|
|
|
||||||
|
|
@ -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),
|
||||||
};
|
};
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue