feat: only validate field on submit only

This commit is contained in:
Methapon2001 2024-07-26 11:05:07 +07:00
parent 10e0d638f5
commit c3ac90429e
26 changed files with 164 additions and 14 deletions

View file

@ -28,6 +28,7 @@ const branchNo = defineModel<number>('branchNo');
<div class="col-md-3 col-12 app-text-muted"> {{ $t(`about`) }}</div>
<div class="col-md-9 col-12 row q-col-gutter-md">
<q-input
lazy-rules="ondemand"
:for="`${prefixId}-input-branch-code`"
:id="`${prefixId}-input-branch-code`"
v-if="typeCustomer === 'PERS'"
@ -41,6 +42,7 @@ const branchNo = defineModel<number>('branchNo');
/>
<q-input
lazy-rules="ondemand"
:for="`${prefixId}-input-branch-no`"
:id="`${prefixId}-input-branch-no`"
:dense="dense"
@ -53,6 +55,7 @@ const branchNo = defineModel<number>('branchNo');
/>
<q-input
lazy-rules="ondemand"
:for="`${prefixId}-input-customer-name`"
:id="`${prefixId}-input-customer-name`"
v-if="typeCustomer === 'PERS'"
@ -66,6 +69,7 @@ const branchNo = defineModel<number>('branchNo');
/>
<q-input
lazy-rules="ondemand"
:for="`${prefixId}-input-customer-english-name`"
:id="`${prefixId}-input-customer-english-name`"
v-if="typeCustomer === 'PERS'"
@ -80,6 +84,7 @@ const branchNo = defineModel<number>('branchNo');
<div class="row q-col-gutter-md">
<q-input
lazy-rules="ondemand"
:for="`${prefixId}-input-branch-code`"
:id="`${prefixId}-input-branch-code`"
v-if="typeCustomer === 'CORP'"
@ -92,6 +97,7 @@ const branchNo = defineModel<number>('branchNo');
v-model="branchCode"
/>
<q-input
lazy-rules="ondemand"
:for="`${prefixId}-input-legal-entity-code`"
:id="`${prefixId}-input-legal-entity-code`"
v-if="typeCustomer === 'CORP'"
@ -105,6 +111,7 @@ const branchNo = defineModel<number>('branchNo');
/>
<q-input
lazy-rules="ondemand"
:for="`${prefixId}-input-customer-english-name`"
:id="`${prefixId}-input-customer-english-name`"
v-if="typeCustomer === 'CORP'"
@ -118,6 +125,7 @@ const branchNo = defineModel<number>('branchNo');
/>
<q-input
lazy-rules="ondemand"
:for="`${prefixId}-input-customer-name`"
:id="`${prefixId}-input-customer-name`"
v-if="typeCustomer === 'CORP'"
@ -132,6 +140,7 @@ const branchNo = defineModel<number>('branchNo');
</div>
<q-input
lazy-rules="ondemand"
:for="`${prefixId}-input-tax-no`"
:id="`${prefixId}-input-tax-no`"
v-if="typeCustomer === 'CORP'"
@ -149,6 +158,7 @@ const branchNo = defineModel<number>('branchNo');
]"
/>
<q-input
lazy-rules="ondemand"
:for="`${prefixId}-input-register-name`"
:id="`${prefixId}-input-register-name`"
v-if="typeCustomer === 'CORP'"
@ -161,6 +171,7 @@ const branchNo = defineModel<number>('branchNo');
v-model="registerName"
/>
<q-input
lazy-rules="ondemand"
:for="`${prefixId}-input-authorized-capital`"
:id="`${prefixId}-input-authorized-capital`"
v-if="typeCustomer === 'CORP'"
@ -193,6 +204,7 @@ const branchNo = defineModel<number>('branchNo');
</template>
<template #trigger>
<q-input
lazy-rules="ondemand"
:for="`${prefixId}-input-start-date`"
:id="`${prefixId}-input-start-date`"
:label="$t('registerDate')"

View file

@ -47,6 +47,7 @@ defineEmits<{
</div>
<div v-if="!employee" class="col-md-9 col-12 row q-col-gutter-md">
<q-select
lazy-rules="ondemand"
:id="`${prefixId}-input-source-nationality`"
:dense="dense"
outlined
@ -75,6 +76,7 @@ defineEmits<{
/>
<q-input
lazy-rules="ondemand"
:for="`${prefixId}-input-employer-id`"
:id="`${prefixId}-input-employer-id`"
v-if="typeCustomer === 'PERS'"
@ -87,6 +89,7 @@ defineEmits<{
v-model="personName"
/>
<q-input
lazy-rules="ondemand"
:for="`${prefixId}-input-tax-no`"
:id="`${prefixId}-input-tax-no`"
v-if="typeCustomer === 'PERS'"
@ -105,6 +108,7 @@ defineEmits<{
/>
<q-input
lazy-rules="ondemand"
:for="`${prefixId}-input-customer-name`"
:id="`${prefixId}-input-customer-name`"
:dense="dense"
@ -118,6 +122,7 @@ defineEmits<{
v-model="customerName"
/>
<q-input
lazy-rules="ondemand"
:for="`${prefixId}-input-customer-name-en`"
:id="`${prefixId}-input-customer-name-en`"
:dense="dense"
@ -136,6 +141,7 @@ defineEmits<{
/>
<q-input
lazy-rules="ondemand"
v-if="typeCustomer !== 'PERS'"
:for="`${prefixId}-input-owner-name`"
:dense="dense"
@ -150,6 +156,7 @@ defineEmits<{
<div v-if="employee" class="col-md-9 col-12 row q-col-gutter-md">
<q-select
lazy-rules="ondemand"
:for="`${prefixId}-select-employer-branch`"
:use-input="!customerBranch"
input-debounce="0"
@ -354,6 +361,7 @@ defineEmits<{
</template>
</q-select>
<q-input
lazy-rules="ondemand"
:for="`${prefixId}-input-employee-id`"
:dense="dense"
outlined
@ -365,6 +373,7 @@ defineEmits<{
/>
<q-input
lazy-rules="ondemand"
v-if="readonly && !nrcNo"
:for="`${prefixId}-input-nrc-no`"
:dense="dense"
@ -376,6 +385,7 @@ defineEmits<{
v-model="slash"
/>
<q-input
lazy-rules="ondemand"
v-else
mask="## #### ###### #"
:for="`${prefixId}-input-nrc-no`"

View file

@ -19,6 +19,7 @@ const telephone = defineModel<string>('telephone');
</div>
<div class="col-md-9 col-12 row q-col-gutter-md">
<q-input
lazy-rules="ondemand"
:for="`${prefixId}-input-mail`"
:id="`${prefixId}-input-mail`"
:dense="dense"
@ -30,6 +31,7 @@ const telephone = defineModel<string>('telephone');
v-model="mail"
/>
<q-input
lazy-rules="ondemand"
:for="`${prefixId}-input-telephone`"
:id="`${prefixId}-input-telephone`"
:dense="dense"

View file

@ -138,6 +138,7 @@ watch(currentStatus, async () => {
class="row items-center justify-end q-px-md col-12 col-sm q-py-sm no-wrap"
>
<q-input
lazy-rules="ondemand"
outlined
dense
class="col-6"

View file

@ -54,6 +54,7 @@ onMounted(async () => {
</div>
<div class="col-md-9 col-12 row q-col-gutter-md">
<q-input
lazy-rules="ondemand"
:for="`${prefixId}-input-employment-office`"
:id="`${prefixId}-input-employment-office`"
:dense="dense"
@ -66,6 +67,7 @@ onMounted(async () => {
/>
<q-select
lazy-rules="ondemand"
:id="`${prefixId}-select-business-type`"
emit-value
option-value="value"
@ -81,6 +83,7 @@ onMounted(async () => {
/>
<q-input
lazy-rules="ondemand"
:for="`${prefixId}-input-bussiness-type-en`"
:id="`${prefixId}-input-bussiness-type-en`"
:dense="dense"
@ -93,6 +96,7 @@ onMounted(async () => {
/>
<q-select
lazy-rules="ondemand"
:for="`${prefixId}-select-job-position`"
:id="`${prefixId}-select-job-position`"
emit-value
@ -109,6 +113,7 @@ onMounted(async () => {
/>
<q-input
lazy-rules="ondemand"
:for="`${prefixId}-input-job-position-en`"
:id="`${prefixId}-input-job-position-en`"
:dense="dense"
@ -121,6 +126,7 @@ onMounted(async () => {
/>
<q-input
lazy-rules="ondemand"
:for="`${prefixId}-input-job-description`"
:id="`${prefixId}-input-job-description`"
:dense="dense"
@ -152,6 +158,7 @@ onMounted(async () => {
</template>
<template #trigger>
<q-input
lazy-rules="ondemand"
:for="`${prefixId}-input-start-date`"
:id="`${prefixId}-input-start-date`"
:label="$t('payDay')"
@ -197,6 +204,7 @@ onMounted(async () => {
</VueDatePicker>
<q-input
lazy-rules="ondemand"
:for="`${prefixId}-input-pay-rate`"
:id="`${prefixId}-input-pay-rate`"
:dense="dense"
@ -209,6 +217,7 @@ onMounted(async () => {
/>
<q-input
lazy-rules="ondemand"
:for="`${prefixId}-input-sales-person`"
:id="`${prefixId}-input-sales-person`"
:dense="dense"

View file

@ -146,6 +146,7 @@ onMounted(async () => {
</div>
<div class="col-md-9 col-12 row q-col-gutter-md">
<q-input
lazy-rules="ondemand"
:dense="dense"
outlined
:readonly="readonly"
@ -155,6 +156,7 @@ onMounted(async () => {
v-model="checkup.checkupResult"
/>
<q-select
lazy-rules="ondemand"
:id="`${prefixId}-select-province`"
:dense="dense"
:readonly="readonly"
@ -169,9 +171,9 @@ onMounted(async () => {
:label="$t('formDialogInputCheckupType')"
class="col-6"
:options="checkupTypeOption"
lazy-rules
/>
<q-select
lazy-rules="ondemand"
:id="`${prefixId}-select-province`"
:dense="dense"
:readonly="readonly"
@ -186,9 +188,9 @@ onMounted(async () => {
:label="$t('province')"
class="col-md-3 col-6"
:options="addrOptions.provinceOps"
lazy-rules
/>
<q-input
lazy-rules="ondemand"
:dense="dense"
outlined
:readonly="readonly"
@ -198,6 +200,7 @@ onMounted(async () => {
v-model="checkup.hospitalName"
/>
<q-input
lazy-rules="ondemand"
:label="$t('formDialogInputRemark')"
:dense="dense"
outlined
@ -208,6 +211,7 @@ onMounted(async () => {
type="textarea"
/>
<q-select
lazy-rules="ondemand"
:id="`${prefixId}-select-province`"
:dense="dense"
:readonly="readonly"
@ -222,9 +226,9 @@ onMounted(async () => {
:label="$t('formDialogInputMedicalBenefit')"
class="col-6"
:options="medicalBenefitOption"
lazy-rules
/>
<q-select
lazy-rules="ondemand"
:id="`${prefixId}-select-province`"
:dense="dense"
:readonly="readonly"
@ -239,7 +243,6 @@ onMounted(async () => {
:label="$t('formDialogInputInsuranceCompany')"
class="col-6"
:options="insuranceCompanyOption"
lazy-rules
/>
<VueDatePicker
utc
@ -260,6 +263,7 @@ onMounted(async () => {
</template>
<template #trigger>
<q-input
lazy-rules="ondemand"
:id="`${prefixId}-input-birth-date`"
:label="$t('formDialogInputCoverageStartDate')"
:dense="dense"
@ -326,6 +330,7 @@ onMounted(async () => {
</template>
<template #trigger>
<q-input
lazy-rules="ondemand"
id="input-birth-date"
:label="$t('formDialogInputCoverageExpiretDate')"
:dense="dense"

View file

@ -21,6 +21,7 @@ const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
<div v-if="$q.screen.gt.sm" class="col-3 q-pl-xl"></div>
<div class="col-md-9 col-12 row q-col-gutter-md">
<q-input
lazy-rules="ondemand"
:for="`${prefixId}-input-citizen-id`"
:dense="dense"
outlined
@ -29,7 +30,6 @@ const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
:label="$t('formDialogInputCitizenId')"
class="col"
v-model="employeeOther.citizenId"
lazy-rules
/>
</div>
<div
@ -40,6 +40,7 @@ const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
</div>
<div class="col-md-9 col-12 row q-col-gutter-md">
<q-input
lazy-rules="ondemand"
:for="`${prefixId}-input-father-first-name`"
:dense="dense"
outlined
@ -50,6 +51,7 @@ const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
v-model="employeeOther.fatherFirstName"
/>
<q-input
lazy-rules="ondemand"
:for="`${prefixId}-input-father-last-name`"
:dense="dense"
outlined
@ -60,6 +62,7 @@ const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
v-model="employeeOther.fatherLastName"
/>
<q-input
lazy-rules="ondemand"
:for="`${prefixId}-input-father-first-name-en`"
:dense="dense"
outlined
@ -70,6 +73,7 @@ const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
v-model="employeeOther.fatherFirstNameEN"
/>
<q-input
lazy-rules="ondemand"
:for="`${prefixId}-input-father-last-name-en`"
:dense="dense"
outlined
@ -80,6 +84,7 @@ const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
v-model="employeeOther.fatherLastNameEN"
/>
<q-input
lazy-rules="ondemand"
:for="`${prefixId}-input-father-birthplace`"
:dense="dense"
outlined
@ -99,6 +104,7 @@ const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
</div>
<div class="col-md-9 col-12 row q-col-gutter-md">
<q-input
lazy-rules="ondemand"
:for="`${prefixId}-input-mother-first-name`"
:dense="dense"
outlined
@ -109,6 +115,7 @@ const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
v-model="employeeOther.motherFirstName"
/>
<q-input
lazy-rules="ondemand"
:for="`${prefixId}-input-mother-last-name`"
:dense="dense"
outlined
@ -119,6 +126,7 @@ const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
v-model="employeeOther.motherLastName"
/>
<q-input
lazy-rules="ondemand"
:for="`${prefixId}-input-mother-first-name-en`"
:dense="dense"
outlined
@ -129,6 +137,7 @@ const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
v-model="employeeOther.motherFirstNameEN"
/>
<q-input
lazy-rules="ondemand"
:for="`${prefixId}-input-mother-last-name-en`"
:dense="dense"
outlined
@ -139,6 +148,7 @@ const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
v-model="employeeOther.motherLastNameEN"
/>
<q-input
lazy-rules="ondemand"
:for="`${prefixId}-input-mother-birthplace`"
:dense="dense"
outlined

View file

@ -39,6 +39,7 @@ defineProps<{
</div>
<div class="col-md-9 col-12 row q-col-gutter-md">
<q-select
lazy-rules="ondemand"
:id="`${prefixId}-select-passport-type`"
:dense="dense"
:readonly="readonly"
@ -53,13 +54,13 @@ defineProps<{
:label="$t('formDialogInputPassportType')"
class="col-md-3 col-12"
:options="passportTypeOption"
lazy-rules
:rules="[
(val: string) =>
!!val || $t('selectValidate') + $t('formDialogInputPassportType'),
]"
/>
<q-input
lazy-rules="ondemand"
:for="`${prefixId}-input-passport-no`"
:dense="dense"
outlined
@ -74,6 +75,7 @@ defineProps<{
]"
/>
<q-input
lazy-rules="ondemand"
:for="`${prefixId}-input-passport-ref`"
:dense="dense"
outlined
@ -84,6 +86,7 @@ defineProps<{
v-model="previousPassportReference"
/>
<q-input
lazy-rules="ondemand"
:for="`${prefixId}-input-passport-place`"
:dense="dense"
outlined
@ -98,6 +101,7 @@ defineProps<{
]"
/>
<q-select
lazy-rules="ondemand"
:id="`${prefixId}-select-passport-country`"
:dense="dense"
:readonly="readonly"
@ -112,7 +116,6 @@ defineProps<{
:label="$t('formDialogInputPassportCountry')"
class="col-md-3 col-6"
:options="passportIssuingCountryOption"
lazy-rules
:rules="[
(val: string) =>
!!val || $t('selectValidate') + $t('formDialogInputPassportCountry'),
@ -138,6 +141,7 @@ defineProps<{
</template>
<template #trigger>
<q-input
lazy-rules="ondemand"
:id="`${prefixId}-input-birth-date`"
hide-bottom-space
:label="$t('formDialogInputPassportIssuance')"
@ -195,6 +199,7 @@ defineProps<{
</template>
<template #trigger>
<q-input
lazy-rules="ondemand"
:id="`${prefixId}-input-birth-date`"
hide-bottom-space
:label="$t('formDialogInputPassportExpire')"

View file

@ -62,6 +62,7 @@ onMounted(async () => {
</div>
<div class="col-md-9 col-12 row q-col-gutter-md">
<q-select
lazy-rules="ondemand"
:id="`${prefixId}-select-visa-type`"
:dense="dense"
:readonly="readonly"
@ -76,13 +77,13 @@ onMounted(async () => {
:label="$t('formDialogInputVisaType')"
class="col-md-3 col-6"
:options="visaTypeOption"
lazy-rules
/>
<!-- :rules="[
(val: string) =>
!!val || $t('selectValidate') + $t('formDialogInputVisaType'),
]" -->
<q-input
lazy-rules="ondemand"
:for="`${prefixId}-input-visa-no`"
:dense="dense"
outlined
@ -116,6 +117,7 @@ onMounted(async () => {
</template>
<template #trigger>
<q-input
lazy-rules="ondemand"
:id="`${prefixId}-input-birth-date`"
hide-bottom-space
:label="$t('formDialogInputVisaIssuance')"
@ -183,6 +185,7 @@ onMounted(async () => {
</template>
<template #trigger>
<q-input
lazy-rules="ondemand"
:id="`${prefixId}-input-birth-date`"
hide-bottom-space
:label="$t('formDialogInputVisaExpire')"
@ -231,6 +234,7 @@ onMounted(async () => {
</template>
</VueDatePicker>
<q-input
lazy-rules="ondemand"
:for="`${prefixId}-input-visa-place`"
:dense="dense"
outlined
@ -264,6 +268,7 @@ onMounted(async () => {
</template>
<template #trigger>
<q-input
lazy-rules="ondemand"
:id="`${prefixId}-input-birth-date`"
hide-bottom-space
:label="$t('formDialogInputVisaStayUntil')"
@ -313,6 +318,7 @@ onMounted(async () => {
</template>
</VueDatePicker>
<q-input
lazy-rules="ondemand"
:for="`${prefixId}-input-tm6`"
:dense="dense"
outlined
@ -346,6 +352,7 @@ onMounted(async () => {
</template>
<template #trigger>
<q-input
lazy-rules="ondemand"
:id="`${prefixId}-input-birth-date`"
:label="$t('formDialogInputVisaEnter')"
:dense="dense"

View file

@ -119,6 +119,7 @@ onMounted(async () => {
</div>
<div class="col-md-9 col-12 row q-col-gutter-md">
<q-input
lazy-rules="ondemand"
:for="`${prefixId}-input-owner-name`"
:dense="dense"
outlined
@ -129,6 +130,7 @@ onMounted(async () => {
v-model="work.ownerName"
/>
<q-select
lazy-rules="ondemand"
:id="`${prefixId}-select-position-name`"
:dense="dense"
:readonly="readonly"
@ -143,9 +145,9 @@ onMounted(async () => {
:label="$t('formDialogInputJobPosition')"
class="col-6"
:options="positionNameOption"
lazy-rules
/>
<q-select
lazy-rules="ondemand"
:id="`${prefixId}-select-job-type`"
:dense="dense"
:readonly="readonly"
@ -160,9 +162,9 @@ onMounted(async () => {
:label="$t('formDialogInputJobType')"
class="col-6"
:options="jobTypeOption"
lazy-rules
/>
<q-select
lazy-rules="ondemand"
:id="`${prefixId}-select-province`"
:dense="dense"
:readonly="readonly"
@ -177,9 +179,9 @@ onMounted(async () => {
:label="$t('formDialogInputWorkPlace')"
class="col-6"
:options="workplaceOption"
lazy-rules
/>
<q-input
lazy-rules="ondemand"
:for="`${prefixId}-input-work-end-date`"
:label="$t('formDialogInputRemark')"
:dense="dense"
@ -210,6 +212,7 @@ onMounted(async () => {
</template>
<template #trigger>
<q-input
lazy-rules="ondemand"
:id="`${prefixId}-input-birth-date`"
:label="$t('formDialogInputWorkUntil')"
:dense="dense"
@ -253,6 +256,7 @@ onMounted(async () => {
</template>
</VueDatePicker>
<q-input
lazy-rules="ondemand"
:for="`${prefixId}-input-work-permit-no`"
:dense="dense"
outlined
@ -282,6 +286,7 @@ onMounted(async () => {
</template>
<template #trigger>
<q-input
lazy-rules="ondemand"
:id="`${prefixId}-input-birth-date`"
:label="$t('formDialogInputWorkPermitIssueDate')"
:dense="dense"
@ -344,6 +349,7 @@ onMounted(async () => {
</template>
<template #trigger>
<q-input
lazy-rules="ondemand"
:id="`${prefixId}-input-birth-date`"
:label="$t('formDialogInputWorkPermitExpireDate')"
:dense="dense"