เพิ่ม dialog กรอกบัตร, ปรับ input เพิ่มเติม
This commit is contained in:
Tanyalak
parent
1d5a73bb03
commit
16dd4c2fe8
4 changed files with 135 additions and 35 deletions
|
|
@ -13,7 +13,17 @@
|
|||
/>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-3 col-md-4">
|
||||
<q-input
|
||||
<q-field outlined bottom-slots :stack-label="defaultInformation.cardid != null" label="เลขประจำตัวประชาชน" counter maxlength="12" dense>
|
||||
<template v-slot:prepend>
|
||||
<q-btn round flat dense size="md" @click="idDialog">
|
||||
<q-icon name="mdi-pencil-outline" color="primary" />
|
||||
</q-btn>
|
||||
</template>
|
||||
<template v-slot:control>
|
||||
<div class="self-center full-width no-outline" tabindex="0">{{defaultInformation.cardid}}</div>
|
||||
</template>
|
||||
</q-field>
|
||||
<!-- <q-input
|
||||
:class="getClass(status == 'register' || status == 'rejectRegister')"
|
||||
:outlined="status == 'register' || status == 'rejectRegister'"
|
||||
dense
|
||||
|
|
@ -30,7 +40,7 @@
|
|||
(val) => /^[0-9]*$/.test(val) || `${'กรุณากรอกเลขประจำตัวประชาชนให้ถูกต้อง'}`
|
||||
]"
|
||||
label="เลขบัตรประจำตัวประชาชน"
|
||||
/>
|
||||
/> -->
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-3 col-md-2">
|
||||
<q-select
|
||||
|
|
@ -77,14 +87,15 @@
|
|||
/>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-3 col-md-3"><!-- :borderless="!false" -->
|
||||
<q-input
|
||||
<q-select
|
||||
:class="getClass(false)"
|
||||
dense
|
||||
:outlined="status == 'register' || status == 'rejectRegister'"
|
||||
:readonly="!(status == 'rejectRegister')"
|
||||
:readonly="!(status == 'register' ||status == 'rejectRegister')"
|
||||
:borderless="!(status == 'register' || status == 'rejectRegister')"
|
||||
lazy-rules
|
||||
v-model="defaultInformation.nationality"
|
||||
:options="opNat"
|
||||
:rules="[(val) => !!val || `${'กรุณากรอก สัญชาติ'}`]"
|
||||
:label="`${'สัญชาติ'}`"
|
||||
/>
|
||||
|
|
@ -157,11 +168,12 @@
|
|||
</template>
|
||||
</datepicker>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-3 col-md-3 q-pb-md">
|
||||
<div class="col-xs-12 col-sm-3 col-md-3">
|
||||
<q-input
|
||||
:class="getClass(status == 'register' || status == 'rejectRegister')"
|
||||
dense
|
||||
lazy-rules
|
||||
bottom-slots
|
||||
:outlined="status == 'register' || status == 'rejectRegister'"
|
||||
:readonly="!(status == 'rejectRegister')"
|
||||
:borderless="!(status == 'register' || status == 'rejectRegister')"
|
||||
|
|
@ -211,11 +223,12 @@
|
|||
:label="`${'โทรศัพท์มือถือ'}`"
|
||||
/>
|
||||
</div> -->
|
||||
<div class="col-xs-12 col-sm-3 col-md-3 q-pb-md"><!-- style="padding: 0 12px" -->
|
||||
<div class="col-xs-12 col-sm-3 col-md-3"><!-- style="padding: 0 12px" -->
|
||||
<q-input
|
||||
:class="getClass(status == 'register' || status == 'rejectRegister')"
|
||||
dense
|
||||
lazy-rules
|
||||
bottom-slots
|
||||
:outlined="status == 'register' || status == 'rejectRegister'"
|
||||
:readonly="!(status == 'rejectRegister')"
|
||||
:borderless="!(status == 'register' || status == 'rejectRegister')"
|
||||
|
|
@ -271,6 +284,60 @@
|
|||
/>
|
||||
</div> -->
|
||||
</q-form>
|
||||
|
||||
<!-- dialog กรอกเลขบัตร -->
|
||||
<q-dialog v-model="idModel">
|
||||
<q-card style="width: 350px">
|
||||
<q-card-section class="bg-grey-2 q-py-sm">
|
||||
<div class="text-subtitle1 text-weight-medium">กรอกเลขประจำตัวประชาชน</div>
|
||||
</q-card-section>
|
||||
<q-separator color="grey-4" />
|
||||
<q-card-section>
|
||||
<q-input
|
||||
:class="getClass(status == 'register' || status == 'rejectRegister')"
|
||||
:outlined="status == 'register' || status == 'rejectRegister'"
|
||||
dense
|
||||
type="tel"
|
||||
mask="#############"
|
||||
:counter="status == 'register' || status == 'rejectRegister' ? true : false"
|
||||
lazy-rules
|
||||
:readonly="!(status == 'register' || status == 'rejectRegister')"
|
||||
:borderless="!(status == 'register' || status == 'rejectRegister')"
|
||||
v-model="defaultInformation.cardid"
|
||||
maxlength="13"
|
||||
:rules="[
|
||||
(val) => val.length == 13 || `${'กรุณากรอก เลขประจำตัวประชาชน'}`,
|
||||
(val) => /^[0-9]*$/.test(val) || `${'กรุณากรอกเลขประจำตัวประชาชนให้ถูกต้อง'}`
|
||||
]"
|
||||
label="เลขบัตรประจำตัวประชาชน"
|
||||
class="q-mb-sm"
|
||||
/>
|
||||
<q-input
|
||||
:class="getClass(status == 'register' || status == 'rejectRegister')"
|
||||
:outlined="status == 'register' || status == 'rejectRegister'"
|
||||
dense
|
||||
type="tel"
|
||||
mask="#############"
|
||||
:counter="status == 'register' || status == 'rejectRegister' ? true : false"
|
||||
lazy-rules
|
||||
:readonly="!(status == 'register' || status == 'rejectRegister')"
|
||||
:borderless="!(status == 'register' || status == 'rejectRegister')"
|
||||
v-model="defaultInformation.cardid"
|
||||
maxlength="13"
|
||||
:rules="[
|
||||
(val) => val.length == 13 || `${'กรุณากรอกยืนยันเลขประจำตัวประชาชน'}`,
|
||||
(val) => /^[0-9]*$/.test(val) || `${'กรุณากรอกยืนยันเลขประจำตัวประชาชนให้ถูกต้อง'}`
|
||||
]"
|
||||
label="ยืนยันเลขบัตรประจำตัวประชาชน"
|
||||
/>
|
||||
</q-card-section>
|
||||
<q-separator color="grey-4" />
|
||||
<q-card-actions align="right" class="bg-white text-teal">
|
||||
<q-btn flat label="ยกเลิก" color="red" v-close-popup />
|
||||
<q-btn flat label="ตกลง" class="bg-teal-1" v-close-popup />
|
||||
</q-card-actions>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, watch } from 'vue'
|
||||
|
|
@ -324,6 +391,10 @@ const myform = ref<any>({})
|
|||
const img = ref<string>('')
|
||||
const fileProfile = ref<File[]>([])
|
||||
|
||||
const opNat = ref(['ไทย'])
|
||||
const idModel = ref<boolean>(false)
|
||||
|
||||
|
||||
watch(myform, async (count: any, prevCount: any) => {
|
||||
emit('update:form', count)
|
||||
})
|
||||
|
|
@ -445,6 +516,10 @@ const getClass = (val: boolean) => {
|
|||
'full-width cursor-pointer': !val
|
||||
}
|
||||
}
|
||||
|
||||
const idDialog = () => {
|
||||
idModel.value = true
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue