fix: form readonly (customer management)

This commit is contained in:
puriphatt 2024-06-27 04:43:12 +00:00
parent 77eeb0fe19
commit 57e0d0d1aa
10 changed files with 75 additions and 150 deletions

View file

@ -30,9 +30,8 @@ const employerBranchCode = defineModel<string>('employerBranchCode');
id="input-branchCode"
v-if="typeCustomer === 'PERS'"
:dense="dense"
:outlined="!readonly"
outlined
:readonly="true"
:borderless="readonly"
hide-bottom-space
class="col-3"
:label="$t('branchCode')"
@ -44,9 +43,8 @@ const employerBranchCode = defineModel<string>('employerBranchCode');
id="input-customerName"
v-if="typeCustomer === 'PERS'"
:dense="dense"
:outlined="!readonly"
outlined
:readonly="readonly"
:borderless="readonly"
hide-bottom-space
class="col"
:label="$t('customerName')"
@ -58,9 +56,8 @@ const employerBranchCode = defineModel<string>('employerBranchCode');
id="input-customerEnglishName"
v-if="typeCustomer === 'PERS'"
:dense="dense"
:outlined="!readonly"
outlined
:readonly="readonly"
:borderless="readonly"
hide-bottom-space
class="col"
:label="$t('customerEnglishName')"
@ -73,9 +70,8 @@ const employerBranchCode = defineModel<string>('employerBranchCode');
id="input-branchCode"
v-if="typeCustomer === 'CORP'"
:dense="dense"
:outlined="!readonly"
outlined
:readonly="true"
:borderless="readonly"
hide-bottom-space
class="col-3"
:label="$t('branchCode')"
@ -86,9 +82,8 @@ const employerBranchCode = defineModel<string>('employerBranchCode');
id="input-legalEntityCode"
v-if="typeCustomer === 'CORP'"
:dense="dense"
:outlined="!readonly"
outlined
:readonly="true"
:borderless="readonly"
hide-bottom-space
class="col-3"
:label="$t('legalEntityCode')"
@ -100,9 +95,8 @@ const employerBranchCode = defineModel<string>('employerBranchCode');
id="input-customerEnglishName"
v-if="typeCustomer === 'CORP'"
:dense="dense"
:outlined="!readonly"
outlined
:readonly="readonly"
:borderless="readonly"
hide-bottom-space
class="col-3"
:label="$t('customerEnglishName')"
@ -114,9 +108,8 @@ const employerBranchCode = defineModel<string>('employerBranchCode');
id="input-customerName"
v-if="typeCustomer === 'CORP'"
:dense="dense"
:outlined="!readonly"
outlined
:readonly="readonly"
:borderless="readonly"
hide-bottom-space
class="col-3"
:label="$t('customerName')"
@ -129,9 +122,8 @@ const employerBranchCode = defineModel<string>('employerBranchCode');
id="input-taxNo"
v-if="typeCustomer === 'CORP'"
:dense="dense"
:outlined="!readonly"
outlined
:readonly="readonly"
:borderless="readonly"
hide-bottom-space
class="col-6"
:label="$t('taxNo')"
@ -142,9 +134,8 @@ const employerBranchCode = defineModel<string>('employerBranchCode');
id="input-registerName"
v-if="typeCustomer === 'CORP'"
:dense="dense"
:outlined="!readonly"
outlined
:readonly="readonly"
:borderless="readonly"
hide-bottom-space
class="col-6"
:label="$t('registerName')"
@ -155,9 +146,8 @@ const employerBranchCode = defineModel<string>('employerBranchCode');
id="input-authorizedCapital"
v-if="typeCustomer === 'CORP'"
:dense="dense"
:outlined="!readonly"
outlined
:readonly="readonly"
:borderless="readonly"
hide-bottom-space
class="col-3"
:label="$t('authorizedCapital')"
@ -187,9 +177,8 @@ const employerBranchCode = defineModel<string>('employerBranchCode');
id="input-start-date"
:label="$t('registerDate')"
:dense="dense"
:outlined="readonly ? false : outlined"
outlined
:readonly="readonly"
:borderless="readonly"
:model-value="registerDate ? dateFormat(registerDate) : ''"
>
<template v-slot:prepend>

View file

@ -50,9 +50,8 @@ onMounted(async () => {});
id="input-employer-id"
v-if="typeCustomer === 'PERS'"
:dense="dense"
:outlined="!readonly"
outlined
:readonly="readonly"
:borderless="readonly"
hide-bottom-space
class="col-6"
:label="$t('formDialogCustomerName')"
@ -63,9 +62,8 @@ onMounted(async () => {});
id="input-tax-no"
v-if="typeCustomer === 'PERS'"
:dense="dense"
:outlined="!readonly"
outlined
:readonly="readonly"
:borderless="readonly"
hide-bottom-space
class="col-6"
:label="$t('taxNo')"
@ -76,9 +74,8 @@ onMounted(async () => {});
for="input-customer-name"
id="input-customer-name"
:dense="dense"
:outlined="!readonly"
outlined
:readonly="readonly"
:borderless="readonly"
hide-bottom-space
class="col-6"
:label="
@ -90,9 +87,8 @@ onMounted(async () => {});
for="input-customer-name-en"
id="input-customer-name-en"
:dense="dense"
:outlined="!readonly"
outlined
:readonly="readonly"
:borderless="readonly"
hide-bottom-space
class="col-6"
:label="
@ -109,9 +105,8 @@ onMounted(async () => {});
v-if="typeCustomer !== 'PERS'"
for="input-owner-name"
:dense="dense"
:outlined="!readonly"
outlined
:readonly="readonly"
:borderless="readonly"
hide-bottom-space
class="col-6"
:label="$t('companyOwnerName')"
@ -126,9 +121,8 @@ onMounted(async () => {});
input-debounce="0"
:hide-dropdown-icon="readonly"
:dense="dense"
:outlined="!readonly"
outlined
:readonly="readonly || customerBranch !== undefined"
:borderless="readonly"
hide-bottom-space
class="col-12"
:label="$t('formDialogEmployerBranchCode')"
@ -326,9 +320,8 @@ onMounted(async () => {});
<q-input
for="input-employeeID"
:dense="dense"
:outlined="!readonly"
outlined
:readonly="true"
:borderless="readonly"
hide-bottom-space
class="col-6"
:label="$t('formDialogEmployeeID')"
@ -338,9 +331,8 @@ onMounted(async () => {});
mask="## #### ###### #"
for="input-nrcNo"
:dense="dense"
:outlined="!readonly"
outlined
:readonly="readonly"
:borderless="readonly"
hide-bottom-space
class="col-6"
:label="$t('formDialogEmployeeNRCNo')"

View file

@ -19,9 +19,8 @@ const telephone = defineModel<string>('telephone');
for="input-mail"
id="input-mail"
:dense="dense"
:outlined="!readonly"
outlined
:readonly="readonly"
:borderless="readonly"
hide-bottom-space
class="col-6"
:label="$t('formDialogInputEmail')"
@ -31,9 +30,8 @@ const telephone = defineModel<string>('telephone');
for="input-telephone"
id="input-telephone"
:dense="dense"
:outlined="!readonly"
outlined
:readonly="readonly"
:borderless="readonly"
hide-bottom-space
class="col-6"
:label="$t('formDialogInputTelephone')"

View file

@ -64,9 +64,8 @@ defineProps<{
for="input-employment-office"
id="input-employment-office"
:dense="dense"
:outlined="!readonly"
outlined
:readonly="readonly"
:borderless="readonly"
hide-bottom-space
class="col-12"
:label="$t('inputCustomerAddress')"
@ -80,9 +79,8 @@ defineProps<{
option-label="label"
map-options
:dense="dense"
:outlined="!readonly"
outlined
:readonly="readonly"
:borderless="readonly"
v-model="bussinessType"
:options="typeBusinessOptions"
:label="$t('businessType')"
@ -93,9 +91,8 @@ defineProps<{
for="input-bussiness-type-en"
id="input-bussiness-type-en"
:dense="dense"
:outlined="!readonly"
outlined
:readonly="readonly"
:borderless="readonly"
hide-bottom-space
class="col-6"
:label="$t('businessTypeEN')"
@ -109,9 +106,8 @@ defineProps<{
option-label="label"
map-options
:dense="dense"
:outlined="!readonly"
outlined
:readonly="readonly"
:borderless="readonly"
v-model="jobPosition"
:options="jobPositionOptions"
:label="$t('jobPosition')"
@ -122,9 +118,8 @@ defineProps<{
for="input-job-position-en"
id="input-job-position-en"
:dense="dense"
:outlined="!readonly"
outlined
:readonly="readonly"
:borderless="readonly"
hide-bottom-space
class="col-6"
:label="$t('jobPositionEN')"
@ -135,9 +130,8 @@ defineProps<{
for="input-job-description"
id="input-job-description"
:dense="dense"
:outlined="!readonly"
outlined
:readonly="readonly"
:borderless="readonly"
hide-bottom-space
class="col-6"
:label="$t('jobDescription')"
@ -167,9 +161,8 @@ defineProps<{
id="input-start-date"
:label="$t('payDay')"
:dense="dense"
:outlined="readonly ? false : outlined"
outlined
:readonly="readonly"
:borderless="readonly"
:model-value="payDate ? dateFormat(payDate) : ''"
>
<template v-slot:prepend>
@ -197,9 +190,8 @@ defineProps<{
for="input-pay-rate"
id="input-pay-rate"
:dense="dense"
:outlined="!readonly"
outlined
:readonly="readonly"
:borderless="readonly"
hide-bottom-space
class="col-3"
:label="$t('payRate')"
@ -210,9 +202,8 @@ defineProps<{
for="input-sales-person"
id="input-sales-person"
:dense="dense"
:outlined="!readonly"
outlined
:readonly="readonly"
:borderless="readonly"
hide-bottom-space
class="col-6"
:label="$t('salesPerson')"

View file

@ -143,9 +143,8 @@ onMounted(async () => {
<div class="col-9 row q-col-gutter-md">
<q-input
:dense="dense"
:outlined="!readonly"
outlined
:readonly="readonly"
:borderless="readonly"
hide-bottom-space
class="col-6"
:label="$t('formDialogInputCheckupRes')"
@ -155,9 +154,8 @@ onMounted(async () => {
id="select-province"
:dense="dense"
:readonly="readonly"
:outlined="readonly ? false : outlined"
outlined
:hide-dropdown-icon="readonly"
:borderless="readonly"
hide-bottom-space
emit-value
map-options
@ -173,9 +171,8 @@ onMounted(async () => {
id="select-province"
:dense="dense"
:readonly="readonly"
:outlined="readonly ? false : outlined"
outlined
:hide-dropdown-icon="readonly"
:borderless="readonly"
hide-bottom-space
emit-value
map-options
@ -189,9 +186,8 @@ onMounted(async () => {
/>
<q-input
:dense="dense"
:outlined="!readonly"
outlined
:readonly="readonly"
:borderless="readonly"
hide-bottom-space
class="col-9"
:label="$t('formDialogInputHospital')"
@ -200,9 +196,8 @@ onMounted(async () => {
<q-input
:label="$t('formDialogInputRemark')"
:dense="dense"
:outlined="!readonly"
outlined
:readonly="readonly"
:borderless="readonly"
hide-bottom-space
class="col-12"
v-model="checkup.remark"
@ -212,9 +207,8 @@ onMounted(async () => {
id="select-province"
:dense="dense"
:readonly="readonly"
:outlined="readonly ? false : outlined"
outlined
:hide-dropdown-icon="readonly"
:borderless="readonly"
hide-bottom-space
emit-value
map-options
@ -230,9 +224,8 @@ onMounted(async () => {
id="select-province"
:dense="dense"
:readonly="readonly"
:outlined="readonly ? false : outlined"
outlined
:hide-dropdown-icon="readonly"
:borderless="readonly"
hide-bottom-space
emit-value
map-options
@ -265,9 +258,8 @@ onMounted(async () => {
id="input-birth-date"
:label="$t('formDialogInputCoverageStartDate')"
:dense="dense"
:outlined="readonly ? false : outlined"
outlined
:readonly="readonly"
:borderless="readonly"
:model-value="
checkup.coverageStartDate
? dateFormat(checkup.coverageStartDate)
@ -315,9 +307,8 @@ onMounted(async () => {
id="input-birth-date"
:label="$t('formDialogInputCoverageExpiretDate')"
:dense="dense"
:outlined="readonly ? false : outlined"
outlined
:readonly="readonly"
:borderless="readonly"
:model-value="
checkup.coverageExpireDate
? dateFormat(checkup.coverageExpireDate)

View file

@ -22,9 +22,8 @@ const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
<q-input
for="input-citizenId"
:dense="dense"
:outlined="readonly ? false : outlined"
outlined
:readonly="readonly"
:borderless="readonly"
hide-bottom-space
:label="$t('formDialogInputCitizenId')"
class="col"
@ -39,9 +38,8 @@ const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
<q-input
for="input-father-first-name"
:dense="dense"
:outlined="readonly ? false : outlined"
outlined
:readonly="readonly"
:borderless="readonly"
hide-bottom-space
class="col-3"
:label="$t('formDialogInputFirstName')"
@ -50,9 +48,8 @@ const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
<q-input
for="input-father-last-name"
:dense="dense"
:outlined="readonly ? false : outlined"
outlined
:readonly="readonly"
:borderless="readonly"
hide-bottom-space
class="col-3"
:label="$t('formDialogInputLastName')"
@ -61,9 +58,8 @@ const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
<q-input
for="input-father-first-name-en"
:dense="dense"
:outlined="readonly ? false : outlined"
outlined
:readonly="readonly"
:borderless="readonly"
hide-bottom-space
class="col-3"
:label="$t('formDialogInputFirstNameEN')"
@ -72,9 +68,8 @@ const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
<q-input
for="input-father-last-name-en"
:dense="dense"
:outlined="readonly ? false : outlined"
outlined
:readonly="readonly"
:borderless="readonly"
hide-bottom-space
class="col-3"
:label="$t('formDialogInputLastNameEN')"
@ -83,9 +78,8 @@ const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
<q-input
for="input-father-birthplace"
:dense="dense"
:outlined="readonly ? false : outlined"
outlined
:readonly="readonly"
:borderless="readonly"
hide-bottom-space
class="col-6"
:label="$t('formDialogInputFamilyBirthPlace')"
@ -100,9 +94,8 @@ const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
<q-input
for="input-mother-first-name"
:dense="dense"
:outlined="readonly ? false : outlined"
outlined
:readonly="readonly"
:borderless="readonly"
hide-bottom-space
class="col-3"
:label="$t('formDialogInputFirstName')"
@ -111,9 +104,8 @@ const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
<q-input
for="input-mother-last-name"
:dense="dense"
:outlined="readonly ? false : outlined"
outlined
:readonly="readonly"
:borderless="readonly"
hide-bottom-space
class="col-3"
:label="$t('formDialogInputLastName')"
@ -122,9 +114,8 @@ const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
<q-input
for="input-mother-first-name-en"
:dense="dense"
:outlined="readonly ? false : outlined"
outlined
:readonly="readonly"
:borderless="readonly"
hide-bottom-space
class="col-3"
:label="$t('formDialogInputFirstNameEN')"
@ -133,9 +124,8 @@ const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
<q-input
for="input-mother-last-name-en"
:dense="dense"
:outlined="readonly ? false : outlined"
outlined
:readonly="readonly"
:borderless="readonly"
hide-bottom-space
class="col-3"
:label="$t('formDialogInputLastNameEN')"
@ -144,9 +134,8 @@ const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
<q-input
for="input-mother-birthplace"
:dense="dense"
:outlined="readonly ? false : outlined"
outlined
:readonly="readonly"
:borderless="readonly"
hide-bottom-space
class="col-6"
:label="$t('formDialogInputFamilyBirthPlace')"

View file

@ -33,9 +33,8 @@ defineProps<{
id="select-passport-type"
:dense="dense"
:readonly="readonly"
:outlined="readonly ? false : outlined"
outlined
:hide-dropdown-icon="readonly"
:borderless="readonly"
hide-bottom-space
emit-value
map-options
@ -54,9 +53,8 @@ defineProps<{
<q-input
for="input-passport-no"
:dense="dense"
:outlined="!readonly"
outlined
:readonly="readonly"
:borderless="readonly"
hide-bottom-space
class="col-3"
:label="$t('formDialogInputPassportNo')"
@ -69,9 +67,8 @@ defineProps<{
<q-input
for="input-passport-ref"
:dense="dense"
:outlined="!readonly"
outlined
:readonly="readonly"
:borderless="readonly"
hide-bottom-space
class="col-6"
:label="$t('formDialogInputPassportRef')"
@ -84,9 +81,8 @@ defineProps<{
<q-input
for="input-passport-place"
:dense="dense"
:outlined="!readonly"
outlined
:readonly="readonly"
:borderless="readonly"
hide-bottom-space
class="col-3"
:label="$t('formDialogInputWPassportPlace')"
@ -100,9 +96,8 @@ defineProps<{
id="select-passport-country"
:dense="dense"
:readonly="readonly"
:outlined="readonly ? false : outlined"
outlined
:hide-dropdown-icon="readonly"
:borderless="readonly"
hide-bottom-space
emit-value
map-options
@ -141,9 +136,8 @@ defineProps<{
hide-bottom-space
:label="$t('formDialogInputPassportIssuance')"
:dense="dense"
:outlined="readonly ? false : outlined"
outlined
:readonly="readonly"
:borderless="readonly"
:model-value="passportIssueDate ? dateFormat(passportIssueDate) : ''"
:rules="[
(val: string) =>
@ -185,9 +179,8 @@ defineProps<{
hide-bottom-space
:label="$t('formDialogInputPassportExpire')"
:dense="dense"
:outlined="readonly ? false : outlined"
outlined
:readonly="readonly"
:borderless="readonly"
:model-value="
passportExpiryDate ? dateFormat(passportExpiryDate) : ''
"

View file

@ -58,9 +58,8 @@ onMounted(async () => {
id="select-visa-type"
:dense="dense"
:readonly="readonly"
:outlined="readonly ? false : outlined"
outlined
:hide-dropdown-icon="readonly"
:borderless="readonly"
hide-bottom-space
emit-value
map-options
@ -79,9 +78,8 @@ onMounted(async () => {
<q-input
for="input-visa-no"
:dense="dense"
:outlined="!readonly"
outlined
:readonly="readonly"
:borderless="readonly"
hide-bottom-space
class="col-3"
:label="$t('formDialogInputVisaNo')"
@ -114,9 +112,8 @@ onMounted(async () => {
hide-bottom-space
:label="$t('formDialogInputVisaIssuance')"
:dense="dense"
:outlined="readonly ? false : outlined"
outlined
:readonly="readonly"
:borderless="readonly"
:model-value="visaIssueDate ? dateFormat(visaIssueDate) : ''"
>
<!-- :rules="[
@ -166,9 +163,8 @@ onMounted(async () => {
hide-bottom-space
:label="$t('formDialogInputVisaExpire')"
:dense="dense"
:outlined="readonly ? false : outlined"
outlined
:readonly="readonly"
:borderless="readonly"
:model-value="visaExpiryDate ? dateFormat(visaExpiryDate) : ''"
>
<!-- :rules="[
@ -198,9 +194,8 @@ onMounted(async () => {
<q-input
for="input-visa-place"
:dense="dense"
:outlined="!readonly"
outlined
:readonly="readonly"
:borderless="readonly"
hide-bottom-space
class="col-6"
:label="$t('formDialogInputVisaPlace')"
@ -233,9 +228,8 @@ onMounted(async () => {
hide-bottom-space
:label="$t('formDialogInputVisaStayUntil')"
:dense="dense"
:outlined="readonly ? false : outlined"
outlined
:readonly="readonly"
:borderless="readonly"
:model-value="visaStayUntilDate ? dateFormat(visaStayUntilDate) : ''"
>
<!-- :rules="[
@ -266,9 +260,8 @@ onMounted(async () => {
<q-input
for="input-tm6"
:dense="dense"
:outlined="!readonly"
outlined
:readonly="readonly"
:borderless="readonly"
hide-bottom-space
class="col-6"
:label="$t('formDialogInputVisaTM6')"
@ -300,9 +293,8 @@ onMounted(async () => {
id="input-birth-date"
:label="$t('formDialogInputVisaEnter')"
:dense="dense"
:outlined="readonly ? false : outlined"
outlined
:readonly="readonly"
:borderless="readonly"
:model-value="entryDate ? dateFormat(entryDate) : ''"
>
<!-- :rules="[

View file

@ -114,9 +114,8 @@ onMounted(async () => {
<q-input
for="input-ownerName"
:dense="dense"
:outlined="!readonly"
outlined
:readonly="readonly"
:borderless="readonly"
hide-bottom-space
class="col-6"
:label="$t('formDialogInputOwnerName')"
@ -126,9 +125,8 @@ onMounted(async () => {
id="select-positionName"
:dense="dense"
:readonly="readonly"
:outlined="readonly ? false : outlined"
outlined
:hide-dropdown-icon="readonly"
:borderless="readonly"
hide-bottom-space
emit-value
map-options
@ -144,9 +142,8 @@ onMounted(async () => {
id="select-jobType"
:dense="dense"
:readonly="readonly"
:outlined="readonly ? false : outlined"
outlined
:hide-dropdown-icon="readonly"
:borderless="readonly"
hide-bottom-space
emit-value
map-options
@ -162,9 +159,8 @@ onMounted(async () => {
id="select-province"
:dense="dense"
:readonly="readonly"
:outlined="readonly ? false : outlined"
outlined
:hide-dropdown-icon="readonly"
:borderless="readonly"
hide-bottom-space
emit-value
map-options
@ -180,9 +176,8 @@ onMounted(async () => {
for="input-workEndDate"
:label="$t('formDialogInputRemark')"
:dense="dense"
:outlined="!readonly"
outlined
:readonly="readonly"
:borderless="readonly"
hide-bottom-space
class="col-12"
v-model="work.remark"
@ -210,9 +205,8 @@ onMounted(async () => {
id="input-birth-date"
:label="$t('formDialogInputWorkUntil')"
:dense="dense"
:outlined="readonly ? false : outlined"
outlined
:readonly="readonly"
:borderless="readonly"
:model-value="
work.workEndDate ? dateFormat(work.workEndDate) : ''
"
@ -240,9 +234,8 @@ onMounted(async () => {
<q-input
for="input-workPermitNo"
:dense="dense"
:outlined="!readonly"
outlined
:readonly="readonly"
:borderless="readonly"
hide-bottom-space
class="col-6"
:label="$t('formDialogInputWorkPermitNo')"
@ -270,9 +263,8 @@ onMounted(async () => {
id="input-birth-date"
:label="$t('formDialogInputWorkPermitIssueDate')"
:dense="dense"
:outlined="readonly ? false : outlined"
outlined
:readonly="readonly"
:borderless="readonly"
:model-value="
work.workPermitIssuDate
? dateFormat(work.workPermitIssuDate)
@ -321,9 +313,8 @@ onMounted(async () => {
id="input-birth-date"
:label="$t('formDialogInputWorkPermitExpireDate')"
:dense="dense"
:outlined="readonly ? false : outlined"
outlined
:readonly="readonly"
:borderless="readonly"
:model-value="
work.workPermitExpireDate
? dateFormat(work.workPermitExpireDate)

View file

@ -18,9 +18,8 @@ const fileEmployerDocument = defineModel<File | null>('fileEmployerDocument');
<q-file
id="input-attchment"
:dense="dense"
:outlined="readonly ? false : outlined"
outlined
:readonly="readonly"
:borderless="readonly"
multiple
append
:label="$t('additionalEmployerDocument')"