refactor: customer
This commit is contained in:
puriphatt
parent
2ab96dc816
commit
234b03c7fa
12 changed files with 372 additions and 978 deletions
|
|
@ -50,7 +50,7 @@ const authorizedCapital = defineModel<string>('authorizedCapital', {
|
|||
|
||||
// both
|
||||
const telephoneNo = defineModel<string>('telephoneNo');
|
||||
const customerCode = defineModel<string | undefined>('customerCode', {
|
||||
const codeCustomer = defineModel<string | undefined>('codeCustomer', {
|
||||
required: true,
|
||||
});
|
||||
|
||||
|
|
@ -130,6 +130,15 @@ watch(
|
|||
:label="$t('customer.form.legalPersonCode')"
|
||||
for="input-legal-person-code"
|
||||
v-model="legalPersonNo"
|
||||
mask="#############"
|
||||
:rules="[
|
||||
(val) => (val && val.length > 0) || $t('form.error.required'),
|
||||
(val) =>
|
||||
(val && val.length === 13 && /[0-9]+/.test(val)) ||
|
||||
$t('form.error.invalidCustomeMessage', {
|
||||
msg: $t('form.error.requireLength', { msg: 13 }),
|
||||
}),
|
||||
]"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
|
|
@ -141,7 +150,7 @@ watch(
|
|||
:disable="!readonly"
|
||||
:readonly="readonly"
|
||||
:label="$t('customer.form.customerCode')"
|
||||
:model-value="customerCode"
|
||||
:model-value="legalPersonNo"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
|
|
@ -153,7 +162,7 @@ watch(
|
|||
:label="$t('customer.form.branchCode')"
|
||||
:disable="!readonly"
|
||||
:readonly="readonly"
|
||||
:model-value="`${branchCode?.slice(0, -2) || '-'}${index.toString().padStart(2, '0')}`"
|
||||
:model-value="branchCode"
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
|
@ -182,7 +191,7 @@ watch(
|
|||
:rules="[
|
||||
(val: string) => !!val || $t('form.error.required'),
|
||||
(val: string) =>
|
||||
/^[A-Za-z]+$/.test(val) || $t('form.error.letterOnly'),
|
||||
/^[A-Za-z\s.,]+$/.test(val) || $t('form.error.letterOnly'),
|
||||
]"
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -249,7 +258,7 @@ watch(
|
|||
:disable="!readonly"
|
||||
:readonly="readonly"
|
||||
:label="$t('customer.form.customerCode')"
|
||||
:model-value="customerCode"
|
||||
:model-value="codeCustomer"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
|
|
@ -262,6 +271,15 @@ watch(
|
|||
:label="$t('customer.form.cardNumber')"
|
||||
for="input-legal-person-no"
|
||||
v-model="citizenId"
|
||||
mask="#############"
|
||||
:rules="[
|
||||
(val) => (val && val.length > 0) || $t('form.error.required'),
|
||||
(val) =>
|
||||
(val && val.length === 13 && /[0-9]+/.test(val)) ||
|
||||
$t('form.error.invalidCustomeMessage', {
|
||||
msg: $t('form.error.requireLength', { msg: 13 }),
|
||||
}),
|
||||
]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ withDefaults(
|
|||
prefixId?: string;
|
||||
outlined?: boolean;
|
||||
readonly?: boolean;
|
||||
create?: boolean;
|
||||
onCreate?: boolean;
|
||||
actionDisabled?: boolean;
|
||||
customerType?: 'CORP' | 'PERS';
|
||||
hideAction?: boolean;
|
||||
|
|
@ -78,60 +78,6 @@ watch(
|
|||
);
|
||||
},
|
||||
);
|
||||
|
||||
// const prefixNameOptions = ref<Record<string, unknown>[]>([]);
|
||||
// let prefixNameFilter: (
|
||||
// value: string,
|
||||
// update: (callbackFn: () => void, afterFn?: (ref: QSelect) => void) => void,
|
||||
// ) => void;
|
||||
|
||||
// const genderOptions = ref<Record<string, unknown>[]>([]);
|
||||
// let genderFilter: (
|
||||
// value: string,
|
||||
// update: (callbackFn: () => void, afterFn?: (ref: QSelect) => void) => void,
|
||||
// ) => void;
|
||||
|
||||
// onMounted(() => {
|
||||
// prefixNameFilter = selectFilterOptionRefMod(
|
||||
// ref(optionStore.globalOption?.prefix),
|
||||
// prefixNameOptions,
|
||||
// 'label',
|
||||
// );
|
||||
// genderFilter = selectFilterOptionRefMod(
|
||||
// ref(optionStore.globalOption?.gender),
|
||||
// genderOptions,
|
||||
// 'label',
|
||||
// );
|
||||
// });
|
||||
|
||||
// watch(
|
||||
// () => optionStore.globalOption,
|
||||
// () => {
|
||||
// prefixNameFilter = selectFilterOptionRefMod(
|
||||
// ref(optionStore.globalOption.prefix),
|
||||
// prefixNameOptions,
|
||||
// 'label',
|
||||
// );
|
||||
// genderFilter = selectFilterOptionRefMod(
|
||||
// ref(optionStore.globalOption.gender),
|
||||
// genderOptions,
|
||||
// 'label',
|
||||
// );
|
||||
// },
|
||||
// );
|
||||
|
||||
// watch(
|
||||
// () => namePrefix.value,
|
||||
// (v) => {
|
||||
// if (v === 'mr') gender.value = 'male';
|
||||
// else gender.value = 'female';
|
||||
// },
|
||||
// );
|
||||
|
||||
// function formatCode(input: string | undefined, type: 'code' | 'number') {
|
||||
// if (!input) return;
|
||||
// return input.slice(...(type === 'code' ? [0, -6] : [-6]));
|
||||
// }
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -239,7 +185,7 @@ watch(
|
|||
</div>
|
||||
|
||||
<div
|
||||
v-if="customerType === 'CORP' && !create"
|
||||
v-if="customerType === 'CORP' && !onCreate"
|
||||
class="row col-12 q-col-gutter-sm"
|
||||
>
|
||||
<q-input
|
||||
|
|
@ -270,12 +216,12 @@ watch(
|
|||
class="col-6 col-md-3"
|
||||
:label="$t('customer.table.businessTypePure')"
|
||||
for="input-first-name-en"
|
||||
v-model="businessType"
|
||||
:model-value="optionStore.mapOption(businessType)"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="customerType === 'PERS' && !create"
|
||||
v-if="customerType === 'PERS' && !onCreate"
|
||||
class="row col-12 q-col-gutter-sm"
|
||||
>
|
||||
<q-input
|
||||
|
|
@ -307,11 +253,11 @@ watch(
|
|||
class="col-6 col-md-3"
|
||||
:label="$t('customer.table.businessTypePure')"
|
||||
for="input-first-name-en"
|
||||
v-model="businessType"
|
||||
:model-value="optionStore.mapOption(businessType)"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div v-if="!create" class="row col-12 q-col-gutter-sm">
|
||||
<div v-if="!onCreate" class="row col-12 q-col-gutter-sm">
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
|
|
@ -320,7 +266,7 @@ watch(
|
|||
class="col-6 col-md-5"
|
||||
:label="$t('customer.form.jobPosition')"
|
||||
for="input-first-name-en"
|
||||
v-model="jobPosition"
|
||||
:model-value="optionStore.mapOption(jobPosition)"
|
||||
/>
|
||||
<q-input
|
||||
dense
|
||||
|
|
@ -343,671 +289,5 @@ watch(
|
|||
</q-input>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div v-if="customerType === 'CORP'" class="col-12 row q-col-gutter-sm">
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
:readonly="readonly"
|
||||
hide-bottom-space
|
||||
class="col-12 col-md-6"
|
||||
:label="$t('customer.form.customerName')"
|
||||
for="input-first-name"
|
||||
v-model="customerName"
|
||||
:rules="[(val: string) => !!val || $t('form.error.required')]"
|
||||
/>
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
:readonly="readonly"
|
||||
hide-bottom-space
|
||||
class="col-12 col-md-6"
|
||||
:label="$t('customer.form.customerNameEN')"
|
||||
for="input-first-name-en"
|
||||
v-model="customerNameEN"
|
||||
:rules="[
|
||||
(val: string) => !!val || $t('form.error.required'),
|
||||
(val: string) =>
|
||||
/^[A-Za-z]+$/.test(val) || $t('form.error.letterOnly'),
|
||||
]"
|
||||
/>
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
:readonly="readonly"
|
||||
hide-bottom-space
|
||||
class="col-6 col-md-3"
|
||||
:label="$t('general.taxNo')"
|
||||
for="input-first-name-en"
|
||||
v-model="taxNo"
|
||||
mask="#############"
|
||||
:rules="[
|
||||
(val) => (val && val.length > 0) || $t('form.error.required'),
|
||||
(val) =>
|
||||
(val && val.length === 13 && /[0-9]+/.test(val)) ||
|
||||
$t('form.error.invalidCustomeMessage', {
|
||||
msg: $t('form.error.requireLength', { msg: 13 }),
|
||||
}),
|
||||
]"
|
||||
/>
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
:readonly="readonly"
|
||||
hide-bottom-space
|
||||
class="col-6 col-md-3"
|
||||
:label="$t('customer.table.businessTypePure')"
|
||||
for="input-first-name-en"
|
||||
v-model="businessType"
|
||||
/>
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
:readonly="readonly"
|
||||
hide-bottom-space
|
||||
class="col-6 col-md-3"
|
||||
:label="$t('customer.form.jobPosition')"
|
||||
for="input-first-name-en"
|
||||
v-model="jobPosition"
|
||||
/>
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
:readonly="readonly"
|
||||
hide-bottom-space
|
||||
class="col-6 col-md-3"
|
||||
:label="$t('customer.form.headQuarters.telephoneNo')"
|
||||
for="input-first-name-en"
|
||||
v-model="telephoneNo"
|
||||
>
|
||||
<template #prepend>
|
||||
<q-icon
|
||||
size="xs"
|
||||
name="mdi-phone-outline"
|
||||
class="cursor-pointer"
|
||||
color="primary"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
</div>
|
||||
|
||||
<div v-if="customerType === 'PERS'" class="col-12 row q-col-gutter-sm">
|
||||
<div class="col-9 row q-col-gutter-sm">
|
||||
<q-select
|
||||
outlined
|
||||
clearable
|
||||
use-input
|
||||
fill-input
|
||||
emit-value
|
||||
map-options
|
||||
hide-selected
|
||||
hide-bottom-space
|
||||
dense
|
||||
class="col-12"
|
||||
option-value="id"
|
||||
input-debounce="0"
|
||||
option-label="name"
|
||||
v-model="registeredBranchId"
|
||||
:readonly="readonly"
|
||||
:options="filteredBranchOptions"
|
||||
:hide-dropdown-icon="readonly"
|
||||
:label="$t('customer.form.registeredBranch')"
|
||||
:for="`${prefixId}-input-source-nationality`"
|
||||
:rules="[
|
||||
(val) => {
|
||||
const roles = getRole() || [];
|
||||
return (
|
||||
['admin', 'system', 'head_of_admin'].some((v) =>
|
||||
roles.includes(v),
|
||||
) ||
|
||||
!!val ||
|
||||
$t('form.error.required')
|
||||
);
|
||||
},
|
||||
]"
|
||||
@filter="branchFilter"
|
||||
>
|
||||
<template v-slot:no-option>
|
||||
<q-item>
|
||||
<q-item-section class="text-grey">
|
||||
{{ $t('general.noData') }}
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</template>
|
||||
</q-select>
|
||||
<q-select
|
||||
outlined
|
||||
use-input
|
||||
fill-input
|
||||
emit-value
|
||||
map-options
|
||||
hide-selected
|
||||
hide-bottom-space
|
||||
input-debounce="0"
|
||||
option-label="label"
|
||||
option-value="value"
|
||||
hide-dropdown-icon
|
||||
class="col-12 col-md-2"
|
||||
dense
|
||||
:readonly="readonly"
|
||||
:options="prefixNameOptions"
|
||||
:for="`${prefixId}-select-prefix-name`"
|
||||
:label="$t('form.prefixName')"
|
||||
@filter="prefixNameFilter"
|
||||
:model-value="readonly ? namePrefix || '-' : namePrefix"
|
||||
@update:model-value="
|
||||
(v) => {
|
||||
typeof v === 'string' ? (namePrefix = v) : '';
|
||||
}
|
||||
"
|
||||
@clear="namePrefix = ''"
|
||||
:rules="[
|
||||
(val) => {
|
||||
const roles = getRole() || [];
|
||||
return !!val || $t('form.error.required');
|
||||
},
|
||||
]"
|
||||
>
|
||||
<template v-slot:no-option>
|
||||
<q-item>
|
||||
<q-item-section class="text-grey">
|
||||
{{ $t('general.noData') }}
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</template>
|
||||
</q-select>
|
||||
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
:readonly="readonly"
|
||||
hide-bottom-space
|
||||
class="col-12 col-md-5"
|
||||
:label="$t('customer.form.firstName')"
|
||||
for="input-first-name"
|
||||
v-model="firstName"
|
||||
:rules="[
|
||||
(val) => {
|
||||
const roles = getRole() || [];
|
||||
return !!val || $t('form.error.required');
|
||||
},
|
||||
]"
|
||||
/>
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
:readonly="readonly"
|
||||
hide-bottom-space
|
||||
class="col-12 col-md-5"
|
||||
:label="$t('customer.form.lastName')"
|
||||
for="input-last-name"
|
||||
v-model="lastName"
|
||||
:rules="[
|
||||
(val) => {
|
||||
const roles = getRole() || [];
|
||||
return !!val || $t('form.error.required');
|
||||
},
|
||||
]"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
:disable="!readonly"
|
||||
readonly
|
||||
hide-bottom-space
|
||||
class="col-12 col-md-2"
|
||||
label="Title"
|
||||
for="input-prefix-name-en"
|
||||
:model-value="
|
||||
readonly
|
||||
? capitalize(namePrefix || '') || '-'
|
||||
: capitalize(namePrefix || '')
|
||||
"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
:readonly="readonly"
|
||||
hide-bottom-space
|
||||
class="col-12 col-md-5"
|
||||
label="Name"
|
||||
for="input-first-name-en"
|
||||
v-model="firstNameEN"
|
||||
:rules="[
|
||||
(val: string) => !!val || $t('form.error.required'),
|
||||
(val: string) =>
|
||||
/^[A-Za-z]+$/.test(val) || $t('form.error.letterOnly'),
|
||||
]"
|
||||
/>
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
:readonly="readonly"
|
||||
hide-bottom-space
|
||||
class="col-12 col-md-5"
|
||||
label="Surname"
|
||||
for="input-last-name-en"
|
||||
v-model="lastNameEN"
|
||||
:rules="[
|
||||
(val: string) => !!val || $t('form.error.required'),
|
||||
(val: string) =>
|
||||
/^[A-Za-z]+$/.test(val) || $t('form.error.letterOnly'),
|
||||
]"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
outlined
|
||||
class="col-md-5 col-12"
|
||||
hide-bottom-space
|
||||
v-model="lastNameEN"
|
||||
mask="#############"
|
||||
:readonly="readonly"
|
||||
dense
|
||||
:label="$t('personnel.form.citizenId')"
|
||||
:rules="[
|
||||
(val) => (val && val.length > 0) || $t('form.error.required'),
|
||||
(val) =>
|
||||
(val && val.length === 13 && /[0-9]+/.test(val)) ||
|
||||
$t('form.error.invalidCustomeMessage', {
|
||||
msg: $t('form.error.requireLength', { msg: 13 }),
|
||||
}),
|
||||
]"
|
||||
for="input-citizen-id"
|
||||
/>
|
||||
<q-select
|
||||
outlined
|
||||
use-input
|
||||
fill-input
|
||||
emit-value
|
||||
map-options
|
||||
hide-selected
|
||||
hide-bottom-space
|
||||
input-debounce="0"
|
||||
option-label="label"
|
||||
option-value="value"
|
||||
class="col-md-2 col-6"
|
||||
dense
|
||||
:readonly="readonly"
|
||||
:options="genderOptions"
|
||||
:hide-dropdown-icon="readonly"
|
||||
:for="`${prefixId}-select-gender`"
|
||||
:label="$t('form.gender')"
|
||||
@filter="genderFilter"
|
||||
:model-value="readonly ? gender || '-' : gender"
|
||||
@update:model-value="
|
||||
(v) => (typeof v === 'string' ? (gender = v) : '')
|
||||
"
|
||||
@clear="gender = ''"
|
||||
>
|
||||
<template v-slot:no-option>
|
||||
<q-item>
|
||||
<q-item-section class="text-grey">
|
||||
{{ $t('general.noData') }}
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</template>
|
||||
</q-select>
|
||||
|
||||
<DatePicker
|
||||
v-model="birthDate"
|
||||
class="col-md col-6"
|
||||
:id="`${prefixId}-input-birth-date`"
|
||||
:readonly="readonly"
|
||||
:label="$t('form.birthDate')"
|
||||
:disabled-dates="disabledAfterToday"
|
||||
:rules="[
|
||||
(val: string) =>
|
||||
!!val ||
|
||||
$t('form.error.selectField', { field: $t('form.birthDate') }),
|
||||
]"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
:for="`${prefixId}-input-age`"
|
||||
:id="`${prefixId}-input-age`"
|
||||
dense
|
||||
outlined
|
||||
:label="$t('personnel.age')"
|
||||
class="col-md col-12"
|
||||
:model-value="
|
||||
birthDate?.toString() === 'Invalid Date' ||
|
||||
birthDate?.toString() === undefined
|
||||
? ''
|
||||
: calculateAge(birthDate)
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="row col-12 q-col-gutter-sm">
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
:readonly="readonly"
|
||||
hide-bottom-space
|
||||
class="col-6 col-md"
|
||||
:label="$t('customer.table.businessTypePure')"
|
||||
for="input-first-name-en"
|
||||
v-model="firstNameEN"
|
||||
/>
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
:readonly="readonly"
|
||||
hide-bottom-space
|
||||
class="col-6 col-md"
|
||||
:label="$t('customer.form.jobPosition')"
|
||||
for="input-first-name-en"
|
||||
v-model="firstNameEN"
|
||||
/>
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
:readonly="readonly"
|
||||
hide-bottom-space
|
||||
class="col-6 col-md-3"
|
||||
:label="$t('customer.form.headQuarters.telephoneNo')"
|
||||
for="input-first-name-en"
|
||||
v-model="firstNameEN"
|
||||
>
|
||||
<template #prepend>
|
||||
<q-icon
|
||||
size="xs"
|
||||
name="mdi-phone-outline"
|
||||
class="cursor-pointer"
|
||||
color="primary"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<!-- <div class="col-12 row q-col-gutter-sm">
|
||||
<q-select
|
||||
outlined
|
||||
clearable
|
||||
use-input
|
||||
fill-input
|
||||
emit-value
|
||||
map-options
|
||||
hide-selected
|
||||
hide-bottom-space
|
||||
dense
|
||||
class="col-12 col-md-7"
|
||||
option-value="id"
|
||||
input-debounce="0"
|
||||
option-label="name"
|
||||
v-model="registeredBranchId"
|
||||
:readonly="readonly"
|
||||
:options="filteredBranchOptions"
|
||||
:hide-dropdown-icon="readonly"
|
||||
:label="$t('customer.form.registeredBranch')"
|
||||
:for="`${prefixId}-input-source-nationality`"
|
||||
:rules="[
|
||||
(val) => {
|
||||
const roles = getRole() || [];
|
||||
return (
|
||||
['admin', 'system', 'head_of_admin'].some((v) =>
|
||||
roles.includes(v),
|
||||
) ||
|
||||
!!val ||
|
||||
$t('form.error.required')
|
||||
);
|
||||
},
|
||||
]"
|
||||
@filter="branchFilter"
|
||||
>
|
||||
<template v-slot:no-option>
|
||||
<q-item>
|
||||
<q-item-section class="text-grey">
|
||||
{{ $t('general.noData') }}
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</template>
|
||||
</q-select>
|
||||
</div>
|
||||
|
||||
<div class="col-12 row q-col-gutter-sm">
|
||||
<q-select
|
||||
outlined
|
||||
use-input
|
||||
fill-input
|
||||
emit-value
|
||||
map-options
|
||||
hide-selected
|
||||
hide-bottom-space
|
||||
input-debounce="0"
|
||||
option-label="label"
|
||||
option-value="value"
|
||||
hide-dropdown-icon
|
||||
class="col-12 col-md-2"
|
||||
dense
|
||||
:readonly="readonly"
|
||||
:options="prefixNameOptions"
|
||||
:for="`${prefixId}-select-prefix-name`"
|
||||
:label="$t('form.prefixName')"
|
||||
@filter="prefixNameFilter"
|
||||
:model-value="readonly ? namePrefix || '-' : namePrefix"
|
||||
@update:model-value="
|
||||
(v) => {
|
||||
typeof v === 'string' ? (namePrefix = v) : '';
|
||||
}
|
||||
"
|
||||
@clear="namePrefix = ''"
|
||||
:rules="[
|
||||
(val) => {
|
||||
const roles = getRole() || [];
|
||||
return !!val || $t('form.error.required');
|
||||
},
|
||||
]"
|
||||
>
|
||||
<template v-slot:no-option>
|
||||
<q-item>
|
||||
<q-item-section class="text-grey">
|
||||
{{ $t('general.noData') }}
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</template>
|
||||
</q-select>
|
||||
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
:readonly="readonly"
|
||||
hide-bottom-space
|
||||
class="col-12 col-md-5"
|
||||
:label="$t('customer.form.firstName')"
|
||||
for="input-first-name"
|
||||
v-model="firstName"
|
||||
:rules="[
|
||||
(val) => {
|
||||
const roles = getRole() || [];
|
||||
return !!val || $t('form.error.required');
|
||||
},
|
||||
]"
|
||||
/>
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
:readonly="readonly"
|
||||
hide-bottom-space
|
||||
class="col-12 col-md-5"
|
||||
:label="$t('customer.form.lastName')"
|
||||
for="input-last-name"
|
||||
v-model="lastName"
|
||||
:rules="[
|
||||
(val) => {
|
||||
const roles = getRole() || [];
|
||||
return !!val || $t('form.error.required');
|
||||
},
|
||||
]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-12 row q-col-gutter-sm">
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
:disable="!readonly"
|
||||
readonly
|
||||
hide-bottom-space
|
||||
class="col-12 col-md-2"
|
||||
:label="$t('customer.form.prefixName')"
|
||||
for="input-prefix-name"
|
||||
:model-value="
|
||||
readonly
|
||||
? capitalize(namePrefix || '') || '-'
|
||||
: capitalize(namePrefix || '')
|
||||
"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
:readonly="readonly"
|
||||
hide-bottom-space
|
||||
class="col-12 col-md-5"
|
||||
:label="$t('customer.form.firstNameEN')"
|
||||
for="input-first-name-en"
|
||||
v-model="firstNameEN"
|
||||
:rules="[
|
||||
(val: string) => !!val || $t('form.error.required'),
|
||||
(val: string) =>
|
||||
/^[A-Za-z]+$/.test(val) || $t('form.error.letterOnly'),
|
||||
]"
|
||||
/>
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
:readonly="readonly"
|
||||
hide-bottom-space
|
||||
class="col-12 col-md-5"
|
||||
:label="$t('customer.form.lastNameEN')"
|
||||
for="input-last-name-en"
|
||||
v-model="lastNameEN"
|
||||
:rules="[
|
||||
(val: string) => !!val || $t('form.error.required'),
|
||||
(val: string) =>
|
||||
/^[A-Za-z]+$/.test(val) || $t('form.error.letterOnly'),
|
||||
]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-12 row q-col-gutter-sm">
|
||||
<q-select
|
||||
outlined
|
||||
use-input
|
||||
fill-input
|
||||
emit-value
|
||||
map-options
|
||||
hide-selected
|
||||
hide-bottom-space
|
||||
input-debounce="0"
|
||||
option-label="label"
|
||||
option-value="value"
|
||||
class="col-12 col-md-2"
|
||||
dense
|
||||
:readonly="readonly"
|
||||
:options="genderOptions"
|
||||
:hide-dropdown-icon="readonly"
|
||||
:for="`${prefixId}-select-gender`"
|
||||
:label="$t('form.gender')"
|
||||
@filter="genderFilter"
|
||||
:model-value="readonly ? gender || '-' : gender"
|
||||
@update:model-value="(v) => (typeof v === 'string' ? (gender = v) : '')"
|
||||
@clear="gender = ''"
|
||||
:rules="[
|
||||
(val) => {
|
||||
const roles = getRole() || [];
|
||||
return !!val || $t('form.error.required');
|
||||
},
|
||||
]"
|
||||
>
|
||||
<template v-slot:no-option>
|
||||
<q-item>
|
||||
<q-item-section class="text-grey">
|
||||
{{ $t('general.noData') }}
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</template>
|
||||
</q-select>
|
||||
|
||||
<VueDatePicker
|
||||
:id="`${prefixId}-input-birth-date`"
|
||||
:for="`${prefixId}-input-birth-date`"
|
||||
utc
|
||||
autoApply
|
||||
v-model="birthDate"
|
||||
:disabled-dates="disabledAfterToday"
|
||||
:teleport="true"
|
||||
:dark="$q.dark.isActive"
|
||||
:locale="$i18n.locale === 'tha' ? 'th' : 'en'"
|
||||
:enableTimePicker="false"
|
||||
:disabled="readonly"
|
||||
class="col-12 col-md-3"
|
||||
>
|
||||
<template #year="{ value }">
|
||||
{{ $i18n.locale === 'tha' ? value + 543 : value }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ $i18n.locale === 'tha' ? value + 543 : value }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
:for="`${prefixId}-input-birth-date`"
|
||||
hide-bottom-space
|
||||
placeholder="DD/MM/YYYY"
|
||||
:label="$t('form.birthDate')"
|
||||
dense
|
||||
outlined
|
||||
:readonly="readonly"
|
||||
:rules="[
|
||||
(val: string) =>
|
||||
!!val || $t('selectValidate') + $t('form.birthDate'),
|
||||
]"
|
||||
:mask="readonly ? '' : '##/##/####'"
|
||||
:model-value="
|
||||
birthDate && readonly
|
||||
? dateFormat(birthDate)
|
||||
: dateFormat(birthDate, false, false, true)
|
||||
"
|
||||
@update:model-value="
|
||||
(v) => {
|
||||
if (v && v.toString().length === 10) {
|
||||
const today = new Date();
|
||||
const date = parseAndFormatDate(v, locale);
|
||||
birthDate = date && date > today ? today : date;
|
||||
}
|
||||
}
|
||||
"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
size="xs"
|
||||
name="mdi-calendar-blank-outline"
|
||||
class="cursor-pointer"
|
||||
color="primary"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</VueDatePicker>
|
||||
|
||||
<q-input
|
||||
:for="`${prefixId}-input-age`"
|
||||
:id="`${prefixId}-input-age`"
|
||||
dense
|
||||
outlined
|
||||
readonly
|
||||
:label="$t('general.age')"
|
||||
class="col-12 col-md-2"
|
||||
:model-value="
|
||||
birthDate?.toString() === 'Invalid Date' ||
|
||||
birthDate?.toString() === undefined
|
||||
? ''
|
||||
: calculateAge(birthDate)
|
||||
"
|
||||
/>
|
||||
</div> -->
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -47,6 +47,7 @@ withDefaults(
|
|||
customerName: string;
|
||||
readonly?: boolean;
|
||||
prefixId?: string;
|
||||
onCreate?: boolean;
|
||||
actionDisabled?: boolean;
|
||||
customerType?: 'CORP' | 'PERS';
|
||||
hideAction?: boolean;
|
||||
|
|
@ -69,37 +70,37 @@ withDefaults(
|
|||
? $t('customer.form.headQuarters.title')
|
||||
: $t('customer.form.branch.title', { name: index || 0 })
|
||||
}}
|
||||
<!-- <EditButton
|
||||
icon-only
|
||||
v-if="readonly"
|
||||
@click="$emit('edit')"
|
||||
class="q-ml-auto"
|
||||
type="button"
|
||||
:disabled="actionDisabled"
|
||||
/>
|
||||
<DeleteButton
|
||||
icon-only
|
||||
v-if="readonly"
|
||||
@click="$emit('delete')"
|
||||
type="button"
|
||||
:disabled="actionDisabled"
|
||||
/>
|
||||
<UndoButton
|
||||
icon-only
|
||||
v-if="!readonly"
|
||||
@click="$emit('cancel')"
|
||||
type="button"
|
||||
class="q-ml-auto"
|
||||
:disabled="actionDisabled"
|
||||
/> -->
|
||||
<!-- v-if="!readonly" -->
|
||||
<SaveButton
|
||||
icon-only
|
||||
@click="$emit('save')"
|
||||
class="q-ml-auto"
|
||||
type="submit"
|
||||
:disabled="actionDisabled"
|
||||
/>
|
||||
<div class="q-ml-auto row no-warp">
|
||||
<EditButton
|
||||
icon-only
|
||||
v-if="readonly"
|
||||
@click="$emit('edit')"
|
||||
class="q-ml-auto"
|
||||
type="button"
|
||||
:disabled="actionDisabled"
|
||||
/>
|
||||
<DeleteButton
|
||||
icon-only
|
||||
v-if="readonly"
|
||||
@click="$emit('delete')"
|
||||
type="button"
|
||||
:disabled="actionDisabled"
|
||||
/>
|
||||
<UndoButton
|
||||
icon-only
|
||||
v-if="!readonly && !onCreate"
|
||||
@click="$emit('cancel')"
|
||||
type="button"
|
||||
:disabled="actionDisabled"
|
||||
/>
|
||||
<SaveButton
|
||||
v-if="!readonly"
|
||||
icon-only
|
||||
@click="$emit('save')"
|
||||
type="submit"
|
||||
:disabled="actionDisabled"
|
||||
/>
|
||||
</div>
|
||||
</span>
|
||||
|
||||
<div class="col-12" :style="{ opacity: actionDisabled ? '.5' : undefined }">
|
||||
|
|
@ -140,13 +141,13 @@ withDefaults(
|
|||
v-model:birthDate="item.birthDate"
|
||||
v-model:customerName="item.customerName"
|
||||
v-model:legalPersonNo="item.legalPersonNo"
|
||||
v-model:branchCode="item.branchCode"
|
||||
v-model:branchCode="item.code"
|
||||
v-model:registerName="item.registerName"
|
||||
v-model:registerNameEN="item.registerNameEN"
|
||||
v-model:registerDate="item.registerDate"
|
||||
v-model:authorizedCapital="item.authorizedCapital"
|
||||
v-model:telephoneNo="item.telephoneNo"
|
||||
v-model:customerCode="item.customerCode"
|
||||
v-model:codeCustomer="item.codeCustomer"
|
||||
/>
|
||||
</q-tab-panel>
|
||||
<q-tab-panel name="business">
|
||||
|
|
|
|||
|
|
@ -110,6 +110,7 @@ let jobPositionENFilter = selectFilterOptionRefMod(
|
|||
map-options
|
||||
hide-selected
|
||||
hide-bottom-space
|
||||
hide-dropdown-icon
|
||||
input-debounce="0"
|
||||
option-value="value"
|
||||
option-label="label"
|
||||
|
|
@ -142,6 +143,7 @@ let jobPositionENFilter = selectFilterOptionRefMod(
|
|||
map-options
|
||||
hide-selected
|
||||
hide-bottom-space
|
||||
hide-dropdown-icon
|
||||
input-debounce="0"
|
||||
option-value="value"
|
||||
option-label="label"
|
||||
|
|
@ -170,6 +172,7 @@ let jobPositionENFilter = selectFilterOptionRefMod(
|
|||
map-options
|
||||
hide-selected
|
||||
hide-bottom-space
|
||||
hide-dropdown-icon
|
||||
input-debounce="0"
|
||||
option-value="value"
|
||||
option-label="label"
|
||||
|
|
@ -200,6 +203,7 @@ let jobPositionENFilter = selectFilterOptionRefMod(
|
|||
map-options
|
||||
hide-selected
|
||||
hide-bottom-space
|
||||
hide-dropdown-icon
|
||||
input-debounce="0"
|
||||
option-value="value"
|
||||
option-label="label"
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue