refactor: edit layout input
This commit is contained in:
Net
parent
b564b9d0dd
commit
6b82dd636c
2 changed files with 500 additions and 16 deletions
|
|
@ -1,5 +1,6 @@
|
|||
<script setup lang="ts">
|
||||
import { dateFormat, parseAndFormatDate } from 'src/utils/datetime';
|
||||
import { ref } from 'vue';
|
||||
|
||||
const id = defineModel<string>('id');
|
||||
const branchNo = defineModel<number>('branchNo');
|
||||
|
|
@ -11,6 +12,8 @@ const registerName = defineModel<string>('registerName');
|
|||
const registerDate = defineModel<Date | null>('registerDate');
|
||||
const authorizedCapital = defineModel<string>('authorizedCapital');
|
||||
|
||||
const test = ref<string>('-');
|
||||
|
||||
defineProps<{
|
||||
code?: string;
|
||||
readonly?: boolean;
|
||||
|
|
@ -21,7 +24,163 @@ defineProps<{
|
|||
|
||||
<template>
|
||||
<div class="row q-col-gutter-md">
|
||||
<q-input
|
||||
<template v-if="customerType === 'CORP'">
|
||||
<q-input
|
||||
lazy-rules="ondemand"
|
||||
dense
|
||||
outlined
|
||||
:readonly="readonly"
|
||||
hide-bottom-space
|
||||
class="col-12 col-md-3"
|
||||
:label="$t('customer.form.legalPersonNo')"
|
||||
for="input-legal-person-no"
|
||||
:model-value="test"
|
||||
:rules="[
|
||||
(val: string) =>
|
||||
(val && val.length > 0 && /[a-zA-Z]+/.test(val)) ||
|
||||
$t('formDialogInputHqAbbreviation'),
|
||||
]"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
lazy-rules="ondemand"
|
||||
dense
|
||||
outlined
|
||||
:readonly="readonly"
|
||||
hide-bottom-space
|
||||
class="col-12 col-md-3"
|
||||
:label="$t('customer.form.branchCode')"
|
||||
for="input-branch-code"
|
||||
:model-value="test"
|
||||
:rules="[
|
||||
(val: string) =>
|
||||
(val && val.length > 0 && /[a-zA-Z]+/.test(val)) ||
|
||||
$t('formDialogInputHqAbbreviation'),
|
||||
]"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
lazy-rules="ondemand"
|
||||
dense
|
||||
outlined
|
||||
:readonly="readonly"
|
||||
hide-bottom-space
|
||||
class="col-12 col-md-3"
|
||||
:label="$t('customer.form.customerCode')"
|
||||
for="input-customer-code"
|
||||
:model-value="test"
|
||||
:rules="[
|
||||
(val: string) =>
|
||||
(val && val.length > 0 && /[a-zA-Z]+/.test(val)) ||
|
||||
$t('formDialogInputHqAbbreviation'),
|
||||
]"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
lazy-rules="ondemand"
|
||||
dense
|
||||
outlined
|
||||
:readonly="readonly"
|
||||
hide-bottom-space
|
||||
class="col-12 col-md-3"
|
||||
:label="$t('customer.form.legalPersonCode')"
|
||||
for="input-legal-person-code"
|
||||
:model-value="test"
|
||||
:rules="[
|
||||
(val: string) =>
|
||||
(val && val.length > 0 && /[a-zA-Z]+/.test(val)) ||
|
||||
$t('formDialogInputHqAbbreviation'),
|
||||
]"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
lazy-rules="ondemand"
|
||||
dense
|
||||
outlined
|
||||
:readonly="readonly"
|
||||
hide-bottom-space
|
||||
class="col-12 col-md-6"
|
||||
:label="$t('customer.form.registerName')"
|
||||
for="input-register-name"
|
||||
:model-value="test"
|
||||
:rules="[
|
||||
(val: string) =>
|
||||
(val && val.length > 0 && /[a-zA-Z]+/.test(val)) ||
|
||||
$t('formDialogInputHqAbbreviation'),
|
||||
]"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
lazy-rules="ondemand"
|
||||
dense
|
||||
outlined
|
||||
:readonly="readonly"
|
||||
hide-bottom-space
|
||||
class="col-12 col-md-6"
|
||||
:label="$t('customer.form.registerNameEN')"
|
||||
for="input-register-name-en"
|
||||
:model-value="test"
|
||||
:rules="[
|
||||
(val: string) =>
|
||||
(val && val.length > 0 && /[a-zA-Z]+/.test(val)) ||
|
||||
$t('formDialogInputHqAbbreviation'),
|
||||
]"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
lazy-rules="ondemand"
|
||||
dense
|
||||
outlined
|
||||
:readonly="readonly"
|
||||
hide-bottom-space
|
||||
class="col-12 col-md-2"
|
||||
:label="$t('customer.form.authorizedCapital')"
|
||||
for="input-authorized-capital"
|
||||
:model-value="test"
|
||||
:rules="[
|
||||
(val: string) =>
|
||||
(val && val.length > 0 && /[a-zA-Z]+/.test(val)) ||
|
||||
$t('formDialogInputHqAbbreviation'),
|
||||
]"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
lazy-rules="ondemand"
|
||||
dense
|
||||
outlined
|
||||
:readonly="readonly"
|
||||
hide-bottom-space
|
||||
class="col-12 col-md-2"
|
||||
:label="$t('customer.form.registerDate')"
|
||||
for="input-register-date"
|
||||
:model-value="test"
|
||||
:rules="[
|
||||
(val: string) =>
|
||||
(val && val.length > 0 && /[a-zA-Z]+/.test(val)) ||
|
||||
$t('formDialogInputHqAbbreviation'),
|
||||
]"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
lazy-rules="ondemand"
|
||||
dense
|
||||
outlined
|
||||
:readonly="readonly"
|
||||
hide-bottom-space
|
||||
class="col-12 col-md-2"
|
||||
:label="$t('customer.form.registerCompanyName')"
|
||||
for="input-register-company-name"
|
||||
:model-value="test"
|
||||
:rules="[
|
||||
(val: string) =>
|
||||
(val && val.length > 0 && /[a-zA-Z]+/.test(val)) ||
|
||||
$t('formDialogInputHqAbbreviation'),
|
||||
]"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<template v-if="customerType === 'PERS'"></template>
|
||||
<!-- <q-input
|
||||
lazy-rules="ondemand"
|
||||
dense
|
||||
outlined
|
||||
|
|
@ -173,6 +332,6 @@ defineProps<{
|
|||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</VueDatePicker>
|
||||
</VueDatePicker> -->
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,18 @@ import { ref, watch } from 'vue';
|
|||
import { QSelect } from 'quasar';
|
||||
import { selectFilterOptionRefMod } from 'stores/utils';
|
||||
import { getRole } from 'src/services/keycloak';
|
||||
import useOptionStore from 'stores/options';
|
||||
import { onMounted } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
const { locale } = useI18n();
|
||||
|
||||
import {
|
||||
dateFormat,
|
||||
calculateAge,
|
||||
parseAndFormatDate,
|
||||
disabledAfterToday,
|
||||
} from 'src/utils/datetime';
|
||||
|
||||
import {
|
||||
SaveButton,
|
||||
EditButton,
|
||||
|
|
@ -25,13 +36,17 @@ defineEmits<{
|
|||
(e: 'cancel'): void;
|
||||
}>();
|
||||
|
||||
const optionStore = useOptionStore();
|
||||
const code = defineModel<string>('code', { required: true });
|
||||
const personName = defineModel<string>('personName', { required: true });
|
||||
const customerName = defineModel<string>('customerName', { required: true });
|
||||
const customerNameEN = defineModel<string>('customerNameEn', {
|
||||
required: true,
|
||||
});
|
||||
const taxNo = defineModel<string | null>('taxNo');
|
||||
const namePrefix = defineModel<string | null>('namePrefix');
|
||||
const birthDate = defineModel<Date | string | null>('birthDate');
|
||||
const gender = defineModel<string>('gender');
|
||||
|
||||
const firstName = defineModel<string>('firstName', { required: true });
|
||||
const lastName = defineModel<string>('lastName', { required: true });
|
||||
const firstNameEN = defineModel<string>('firstNameEn', { required: true });
|
||||
const lastNameEN = defineModel<string>('lastNameEn', { required: true });
|
||||
|
||||
const registeredBranchId = defineModel<string>('registeredBranchId', {
|
||||
required: true,
|
||||
});
|
||||
|
|
@ -66,6 +81,53 @@ watch(
|
|||
},
|
||||
);
|
||||
|
||||
const prefixNameOptions = ref<Record<string, unknown>[]>([]);
|
||||
let prefixNameFilter: (
|
||||
value: string,
|
||||
update: (callbackFn: () => void, afterFn?: (ref: QSelect) => void) => void,
|
||||
) => void;
|
||||
|
||||
const prefixNameEnOptions = ref<Record<string, unknown>[]>([]);
|
||||
let prefixNameEnFilter: (
|
||||
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',
|
||||
);
|
||||
},
|
||||
);
|
||||
|
||||
function formatCode(input: string | undefined, type: 'code' | 'number') {
|
||||
if (!input) return;
|
||||
return input.slice(...(type === 'code' ? [0, -6] : [-6]));
|
||||
|
|
@ -116,13 +178,276 @@ function formatCode(input: string | undefined, type: 'code' | 'number') {
|
|||
:disabled="actionDisabled"
|
||||
/>
|
||||
</div>
|
||||
<q-select
|
||||
outlined
|
||||
clearable
|
||||
use-input
|
||||
fill-input
|
||||
emit-value
|
||||
map-options
|
||||
|
||||
<div class="col-12 row">
|
||||
<q-select
|
||||
outlined
|
||||
clearable
|
||||
use-input
|
||||
fill-input
|
||||
emit-value
|
||||
map-options
|
||||
hide-selected
|
||||
hide-bottom-space
|
||||
dense
|
||||
class="col-12 col-md-5"
|
||||
option-value="id"
|
||||
input-debounce="0"
|
||||
option-label="name"
|
||||
lazy-rules="ondemand"
|
||||
v-model="registeredBranchId"
|
||||
:readonly="readonly"
|
||||
:options="filteredBranchOptions"
|
||||
:hide-dropdown-icon="readonly"
|
||||
:label="$t('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('noResults') }}
|
||||
</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"
|
||||
lazy-rules="ondemand"
|
||||
hide-dropdown-icon
|
||||
class="col-1"
|
||||
dense
|
||||
:readonly="readonly"
|
||||
:options="prefixNameOptions"
|
||||
:for="`${prefixId}-select-prefix-name`"
|
||||
:label="$t('formDialogInputPrefixName')"
|
||||
@filter="prefixNameFilter"
|
||||
:model-value="readonly ? namePrefix || '-' : namePrefix"
|
||||
@update:model-value="
|
||||
(v) => {
|
||||
typeof v === 'string' ? (namePrefix = v) : '';
|
||||
}
|
||||
"
|
||||
@clear="namePrefix = ''"
|
||||
>
|
||||
<template v-slot:no-option>
|
||||
<q-item>
|
||||
<q-item-section class="text-grey">
|
||||
{{ $t('noResults') }}
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</template>
|
||||
</q-select>
|
||||
|
||||
<q-input
|
||||
lazy-rules="ondemand"
|
||||
dense
|
||||
outlined
|
||||
:readonly="readonly"
|
||||
hide-bottom-space
|
||||
class="col-12 col-md-4"
|
||||
:label="$t('customer.form.firstName')"
|
||||
for="input-first-name"
|
||||
v-model="firstName"
|
||||
/>
|
||||
<q-input
|
||||
lazy-rules="ondemand"
|
||||
dense
|
||||
outlined
|
||||
:readonly="readonly"
|
||||
hide-bottom-space
|
||||
class="col-12 col-md-4"
|
||||
:label="$t('customer.form.lastName')"
|
||||
for="input-last-name"
|
||||
v-model="lastName"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-12 row q-col-gutter-sm">
|
||||
<q-input
|
||||
lazy-rules="ondemand"
|
||||
dense
|
||||
outlined
|
||||
disable
|
||||
:readonly="readonly"
|
||||
hide-bottom-space
|
||||
class="col-12 col-md-1"
|
||||
:label="$t('customer.form.prefixName')"
|
||||
for="input-prefix-name"
|
||||
:model-value="
|
||||
namePrefix ? $t(`customer.form.prefix.${namePrefix}`) : '-'
|
||||
"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
lazy-rules="ondemand"
|
||||
dense
|
||||
outlined
|
||||
:readonly="readonly"
|
||||
hide-bottom-space
|
||||
class="col-12 col-md-4"
|
||||
:label="$t('customer.form.firstNameEN')"
|
||||
for="input-first-name-en"
|
||||
v-model="firstNameEN"
|
||||
/>
|
||||
<q-input
|
||||
lazy-rules="ondemand"
|
||||
dense
|
||||
outlined
|
||||
:readonly="readonly"
|
||||
hide-bottom-space
|
||||
class="col-12 col-md-4"
|
||||
:label="$t('customer.form.lastNameEN')"
|
||||
for="input-last-name-en"
|
||||
v-model="lastNameEN"
|
||||
/>
|
||||
</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"
|
||||
lazy-rules="ondemand"
|
||||
class="col-2"
|
||||
dense
|
||||
:readonly="readonly"
|
||||
:options="genderOptions"
|
||||
:hide-dropdown-icon="readonly"
|
||||
:for="`${prefixId}-select-gender`"
|
||||
:label="$t('formDialogInputGender')"
|
||||
@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('noResults') }}
|
||||
</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 === 'th-th' ? 'th' : 'en'"
|
||||
:enableTimePicker="false"
|
||||
:disabled="readonly"
|
||||
class="col-2"
|
||||
>
|
||||
<template #year="{ value }">
|
||||
{{ $i18n.locale === 'th-th' ? value + 543 : value }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ $i18n.locale === 'th-th' ? value + 543 : value }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
lazy-rules="ondemand"
|
||||
:for="`${prefixId}-input-birth-date`"
|
||||
hide-bottom-space
|
||||
placeholder="DD/MM/YYYY"
|
||||
:label="$t('formDialogInputBirthDate')"
|
||||
dense
|
||||
outlined
|
||||
:readonly="readonly"
|
||||
:rules="[
|
||||
(val: string) =>
|
||||
!!val || $t('selectValidate') + $t('formDialogInputBirthDate'),
|
||||
]"
|
||||
: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
|
||||
lazy-rules="ondemand"
|
||||
:for="`${prefixId}-input-age`"
|
||||
:id="`${prefixId}-input-age`"
|
||||
dense
|
||||
outlined
|
||||
:readonly="readonly"
|
||||
:label="$t('formDialogInputAge')"
|
||||
class="col-2"
|
||||
:model-value="
|
||||
birthDate?.toString() === 'Invalid Date' ||
|
||||
birthDate?.toString() === undefined
|
||||
? ''
|
||||
: calculateAge(birthDate)
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- <q-select
|
||||
outlined
|
||||
clearable
|
||||
use-input
|
||||
fill-input
|
||||
emit-value
|
||||
map-options
|
||||
hide-selected
|
||||
hide-bottom-space
|
||||
dense
|
||||
|
|
@ -235,6 +560,6 @@ function formatCode(input: string | undefined, type: 'code' | 'number') {
|
|||
v-model="taxNo"
|
||||
:for="`${prefixId}-input-tax-no`"
|
||||
class="col-12 col-md-4"
|
||||
/>
|
||||
/> -->
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue