refactor: edit layout ui input
This commit is contained in:
Net
parent
2be948dcfa
commit
d1b9b95d97
3 changed files with 496 additions and 285 deletions
|
|
@ -12,7 +12,7 @@ import { useI18n } from 'vue-i18n';
|
|||
|
||||
const { locale } = useI18n();
|
||||
const optionStore = useOptionStore();
|
||||
|
||||
const prefixNameTh = defineModel<string>('prefixName');
|
||||
const firstName = defineModel<string>('firstName');
|
||||
const lastName = defineModel<string>('lastName');
|
||||
const firstNameEN = defineModel<string>('firstNameEN');
|
||||
|
|
@ -23,6 +23,13 @@ const gender = defineModel<string>('gender');
|
|||
const birthDate = defineModel<Date | string | null>('birthDate');
|
||||
const nationality = defineModel<string>('nationality');
|
||||
|
||||
const prefixNameOptions = ref<Record<string, unknown>[]>([]);
|
||||
const prefixNameFilter = selectFilterOptionRefMod(
|
||||
ref(optionStore.globalOption.prefix),
|
||||
prefixNameOptions,
|
||||
'label',
|
||||
);
|
||||
|
||||
const genderOptions = ref<Record<string, unknown>[]>([]);
|
||||
const genderFilter = selectFilterOptionRefMod(
|
||||
ref(optionStore.globalOption.gender),
|
||||
|
|
@ -48,274 +55,348 @@ defineProps<{
|
|||
}>();
|
||||
</script>
|
||||
<template>
|
||||
<div class="col-md-3 col-12 app-text-muted">
|
||||
• {{ title || $t('formDialogTitlePersonnel') }}
|
||||
</div>
|
||||
<div class="col-md-9 col-12 row q-col-gutter-md">
|
||||
<q-input
|
||||
lazy-rules="ondemand"
|
||||
:for="`${prefixId}-input-first-name`"
|
||||
:dense="dense"
|
||||
outlined
|
||||
:readonly="readonly"
|
||||
hide-bottom-space
|
||||
class="col-md-3 col-6"
|
||||
:label="$t('formDialogInputFirstName')"
|
||||
v-model="firstName"
|
||||
:rules="[
|
||||
(val: string) => !!val || $t('formDialogInputFirstNameValidate'),
|
||||
]"
|
||||
/>
|
||||
<q-input
|
||||
lazy-rules="ondemand"
|
||||
:for="`${prefixId}-input-last-name`"
|
||||
:dense="dense"
|
||||
outlined
|
||||
:readonly="readonly"
|
||||
hide-bottom-space
|
||||
class="col-md-3 col-6"
|
||||
:label="$t('formDialogInputLastName')"
|
||||
v-model="lastName"
|
||||
:rules="[(val: string) => !!val || $t('formDialogInputLastNameValidate')]"
|
||||
/>
|
||||
<q-input
|
||||
lazy-rules="ondemand"
|
||||
:for="`${prefixId}-input-first-name-en`"
|
||||
:dense="dense"
|
||||
outlined
|
||||
:readonly="readonly"
|
||||
hide-bottom-space
|
||||
class="col-md-3 col-6"
|
||||
:label="$t('formDialogInputFirstNameEN')"
|
||||
v-model="firstNameEN"
|
||||
:rules="[
|
||||
(val: string) => !!val || $t('formDialogInputFirstNameENValidate'),
|
||||
]"
|
||||
/>
|
||||
<q-input
|
||||
lazy-rules="ondemand"
|
||||
:for="`${prefixId}-input-last-name-en`"
|
||||
:dense="dense"
|
||||
outlined
|
||||
:readonly="readonly"
|
||||
hide-bottom-space
|
||||
class="col-md-3 col-6"
|
||||
:label="$t('formDialogInputLastNameEN')"
|
||||
v-model="lastNameEN"
|
||||
:rules="[
|
||||
(val: string) => !!val || $t('formDialogInputLastNameENValidate'),
|
||||
]"
|
||||
/>
|
||||
<q-input
|
||||
lazy-rules="ondemand"
|
||||
v-if="!employee"
|
||||
:for="`${prefixId}-input-telephone`"
|
||||
:dense="dense"
|
||||
outlined
|
||||
:readonly="readonly"
|
||||
class="col-6"
|
||||
:label="$t('formDialogInputTelephone')"
|
||||
v-model="telephoneNo"
|
||||
mask="##########"
|
||||
/>
|
||||
<q-input
|
||||
lazy-rules="ondemand"
|
||||
v-if="!employee"
|
||||
:for="`${prefixId}-input-email`"
|
||||
:dense="dense"
|
||||
outlined
|
||||
:readonly="readonly"
|
||||
:label="$t('formDialogInputEmail')"
|
||||
class="col-6"
|
||||
v-model="email"
|
||||
/>
|
||||
<q-select
|
||||
v-if="!employee"
|
||||
outlined
|
||||
clearable
|
||||
use-input
|
||||
fill-input
|
||||
emit-value
|
||||
map-options
|
||||
hide-selected
|
||||
hide-bottom-space
|
||||
v-model="gender"
|
||||
input-debounce="0"
|
||||
option-label="label"
|
||||
option-value="value"
|
||||
lazy-rules="ondemand"
|
||||
class="col-md-3 col-6"
|
||||
:dense="dense"
|
||||
:readonly="readonly"
|
||||
:options="genderOptions"
|
||||
:hide-dropdown-icon="readonly"
|
||||
:for="`${prefixId}-select-gender`"
|
||||
:label="$t('formDialogInputGender')"
|
||||
@filter="genderFilter"
|
||||
>
|
||||
<template v-slot:no-option>
|
||||
<q-item>
|
||||
<q-item-section class="text-grey">
|
||||
{{ $t('noResults') }}
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</template>
|
||||
</q-select>
|
||||
<div class="row col-12">
|
||||
<div class="col-12 q-pb-sm text-weight-bold text-body1">
|
||||
<q-icon
|
||||
flat
|
||||
size="xs"
|
||||
class="q-pa-sm rounded q-mr-xs"
|
||||
color="info"
|
||||
name="mdi-account"
|
||||
style="background-color: var(--surface-3)"
|
||||
/>
|
||||
{{ $t(`${title}`) }}
|
||||
</div>
|
||||
|
||||
<div class="col-12 row q-col-gutter-sm">
|
||||
<div class="col-6 row">
|
||||
<q-select
|
||||
outlined
|
||||
use-input
|
||||
fill-input
|
||||
emit-value
|
||||
map-options
|
||||
hide-selected
|
||||
hide-bottom-space
|
||||
v-model="prefixNameTh"
|
||||
input-debounce="0"
|
||||
option-label="label"
|
||||
option-value="value"
|
||||
lazy-rules="ondemand"
|
||||
class="col-2"
|
||||
:dense="dense"
|
||||
:readonly="readonly"
|
||||
:options="prefixNameOptions"
|
||||
:hide-dropdown-icon="readonly"
|
||||
:for="`${prefixId}-select-prefix-name`"
|
||||
:label="$t('formDialogInputPrefixName')"
|
||||
@filter="prefixNameFilter"
|
||||
>
|
||||
<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-md-3 col-6"
|
||||
>
|
||||
<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')"
|
||||
:for="`${prefixId}-input-first-name`"
|
||||
:dense="dense"
|
||||
outlined
|
||||
:readonly="readonly"
|
||||
hide-bottom-space
|
||||
class="col"
|
||||
:label="$t('formDialogInputFirstName')"
|
||||
v-model="firstName"
|
||||
:rules="[
|
||||
(val: string) =>
|
||||
!!val || $t('selectValidate') + $t('formDialogInputBirthDate'),
|
||||
(val: string) => !!val || $t('formDialogInputFirstNameValidate'),
|
||||
]"
|
||||
: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;
|
||||
/>
|
||||
<q-input
|
||||
lazy-rules="ondemand"
|
||||
:for="`${prefixId}-input-last-name`"
|
||||
:dense="dense"
|
||||
outlined
|
||||
:readonly="readonly"
|
||||
hide-bottom-space
|
||||
class="col"
|
||||
:label="$t('formDialogInputLastName')"
|
||||
v-model="lastName"
|
||||
:rules="[
|
||||
(val: string) => !!val || $t('formDialogInputLastNameValidate'),
|
||||
]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<q-select
|
||||
outlined
|
||||
use-input
|
||||
fill-input
|
||||
emit-value
|
||||
map-options
|
||||
hide-selected
|
||||
hide-bottom-space
|
||||
v-model="prefixNameTh"
|
||||
input-debounce="0"
|
||||
option-label="label"
|
||||
option-value="value"
|
||||
lazy-rules="ondemand"
|
||||
class="col-1"
|
||||
:dense="dense"
|
||||
:readonly="readonly"
|
||||
:options="prefixNameOptions"
|
||||
:hide-dropdown-icon="readonly"
|
||||
:for="`${prefixId}-select-prefix-name`"
|
||||
:label="$t('formDialogInputPrefixName')"
|
||||
@filter="prefixNameFilter"
|
||||
>
|
||||
<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"
|
||||
:for="`${prefixId}-input-first-name-en`"
|
||||
:dense="dense"
|
||||
outlined
|
||||
:readonly="readonly"
|
||||
hide-bottom-space
|
||||
class="col-2"
|
||||
:label="$t('formDialogInputFirstNameEN')"
|
||||
v-model="firstNameEN"
|
||||
:rules="[
|
||||
(val: string) => !!val || $t('formDialogInputFirstNameENValidate'),
|
||||
]"
|
||||
/>
|
||||
<q-input
|
||||
lazy-rules="ondemand"
|
||||
:for="`${prefixId}-input-last-name-en`"
|
||||
:dense="dense"
|
||||
outlined
|
||||
:readonly="readonly"
|
||||
hide-bottom-space
|
||||
class="col-2"
|
||||
:label="$t('formDialogInputLastNameEN')"
|
||||
v-model="lastNameEN"
|
||||
:rules="[
|
||||
(val: string) => !!val || $t('formDialogInputLastNameENValidate'),
|
||||
]"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
lazy-rules="ondemand"
|
||||
v-if="!employee"
|
||||
:for="`${prefixId}-input-telephone`"
|
||||
:dense="dense"
|
||||
outlined
|
||||
:readonly="readonly"
|
||||
class="col-3"
|
||||
:label="$t('formDialogInputTelephone')"
|
||||
v-model="telephoneNo"
|
||||
mask="##########"
|
||||
/>
|
||||
<q-input
|
||||
lazy-rules="ondemand"
|
||||
v-if="!employee"
|
||||
:for="`${prefixId}-input-email`"
|
||||
:dense="dense"
|
||||
outlined
|
||||
:readonly="readonly"
|
||||
:label="$t('formDialogInputEmail')"
|
||||
class="col-3"
|
||||
v-model="email"
|
||||
/>
|
||||
|
||||
<q-select
|
||||
v-if="!employee"
|
||||
outlined
|
||||
use-input
|
||||
fill-input
|
||||
emit-value
|
||||
map-options
|
||||
hide-selected
|
||||
hide-bottom-space
|
||||
v-model="gender"
|
||||
input-debounce="0"
|
||||
option-label="label"
|
||||
option-value="value"
|
||||
lazy-rules="ondemand"
|
||||
class="col-1"
|
||||
:dense="dense"
|
||||
:readonly="readonly"
|
||||
:options="genderOptions"
|
||||
:hide-dropdown-icon="readonly"
|
||||
:for="`${prefixId}-select-gender`"
|
||||
:label="$t('formDialogInputGender')"
|
||||
@filter="genderFilter"
|
||||
>
|
||||
<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="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;
|
||||
}
|
||||
}
|
||||
}
|
||||
"
|
||||
>
|
||||
<!-- v-model="birthDate" -->
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
size="xs"
|
||||
name="mdi-calendar-blank-outline"
|
||||
class="cursor-pointer"
|
||||
color="positive"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</VueDatePicker>
|
||||
<q-input
|
||||
lazy-rules="ondemand"
|
||||
:for="`${prefixId}-input-age`"
|
||||
:id="`${prefixId}-input-age`"
|
||||
:dense="dense"
|
||||
outlined
|
||||
readonly
|
||||
:label="$t('formDialogInputAge')"
|
||||
class="col-md-3 col-6"
|
||||
:model-value="
|
||||
birthDate?.toString() === 'Invalid Date' ||
|
||||
birthDate?.toString() === undefined
|
||||
? ''
|
||||
: calculateAge(birthDate)
|
||||
"
|
||||
/>
|
||||
<q-select
|
||||
v-if="employee"
|
||||
outlined
|
||||
clearable
|
||||
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-md-3 col-6"
|
||||
:dense="dense"
|
||||
v-model="gender"
|
||||
:readonly="readonly"
|
||||
:options="genderOptions"
|
||||
:hide-dropdown-icon="readonly"
|
||||
:for="`${prefixId}-select-gender`"
|
||||
:label="$t('formDialogInputGender')"
|
||||
:rules="[
|
||||
(val: string) =>
|
||||
!!val || $t('selectValidate') + $t('formDialogInputGender'),
|
||||
]"
|
||||
@filter="genderFilter"
|
||||
>
|
||||
<template v-slot:no-option>
|
||||
<q-item>
|
||||
<q-item-section class="text-grey">
|
||||
{{ $t('noResults') }}
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</template>
|
||||
</q-select>
|
||||
<q-select
|
||||
v-if="employee"
|
||||
outlined
|
||||
clearable
|
||||
use-input
|
||||
fill-input
|
||||
emit-value
|
||||
map-options
|
||||
hide-selected
|
||||
hide-bottom-space
|
||||
input-debounce="0"
|
||||
option-label="label"
|
||||
option-value="label"
|
||||
v-model="nationality"
|
||||
lazy-rules="ondemand"
|
||||
class="col-md-3 col-6"
|
||||
:dense="dense"
|
||||
:readonly="readonly"
|
||||
:options="nationalityOptions"
|
||||
:hide-dropdown-icon="readonly"
|
||||
:for="`${prefixId}-select-nationality`"
|
||||
:label="$t('formDialogInputNationality')"
|
||||
:rules="[
|
||||
(val: string) =>
|
||||
!!val || $t('selectValidate') + $t('formDialogInputNationality'),
|
||||
]"
|
||||
@filter="nationalityFilter"
|
||||
>
|
||||
<template v-slot:no-option>
|
||||
<q-item>
|
||||
<q-item-section class="text-grey">
|
||||
{{ $t('noResults') }}
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</template>
|
||||
</q-select>
|
||||
"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
size="xs"
|
||||
name="mdi-calendar-blank-outline"
|
||||
class="cursor-pointer"
|
||||
color="positive"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</VueDatePicker>
|
||||
<q-input
|
||||
lazy-rules="ondemand"
|
||||
:for="`${prefixId}-input-age`"
|
||||
:id="`${prefixId}-input-age`"
|
||||
:dense="dense"
|
||||
outlined
|
||||
readonly
|
||||
:label="$t('formDialogInputAge')"
|
||||
class="col"
|
||||
:model-value="
|
||||
birthDate?.toString() === 'Invalid Date' ||
|
||||
birthDate?.toString() === undefined
|
||||
? ''
|
||||
: calculateAge(birthDate)
|
||||
"
|
||||
/>
|
||||
|
||||
<q-select
|
||||
v-if="employee"
|
||||
outlined
|
||||
clearable
|
||||
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-md-3 col-6"
|
||||
:dense="dense"
|
||||
v-model="gender"
|
||||
:readonly="readonly"
|
||||
:options="genderOptions"
|
||||
:hide-dropdown-icon="readonly"
|
||||
:for="`${prefixId}-select-gender`"
|
||||
:label="$t('formDialogInputGender')"
|
||||
:rules="[
|
||||
(val: string) =>
|
||||
!!val || $t('selectValidate') + $t('formDialogInputGender'),
|
||||
]"
|
||||
@filter="genderFilter"
|
||||
>
|
||||
<template v-slot:no-option>
|
||||
<q-item>
|
||||
<q-item-section class="text-grey">
|
||||
{{ $t('noResults') }}
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</template>
|
||||
</q-select>
|
||||
<q-select
|
||||
v-if="employee"
|
||||
outlined
|
||||
clearable
|
||||
use-input
|
||||
fill-input
|
||||
emit-value
|
||||
map-options
|
||||
hide-selected
|
||||
hide-bottom-space
|
||||
input-debounce="0"
|
||||
option-label="label"
|
||||
option-value="label"
|
||||
v-model="nationality"
|
||||
lazy-rules="ondemand"
|
||||
class="col-md-3 col-6"
|
||||
:dense="dense"
|
||||
:readonly="readonly"
|
||||
:options="nationalityOptions"
|
||||
:hide-dropdown-icon="readonly"
|
||||
:for="`${prefixId}-select-nationality`"
|
||||
:label="$t('formDialogInputNationality')"
|
||||
:rules="[
|
||||
(val: string) =>
|
||||
!!val || $t('selectValidate') + $t('formDialogInputNationality'),
|
||||
]"
|
||||
@filter="nationalityFilter"
|
||||
>
|
||||
<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>
|
||||
<q-separator
|
||||
v-if="separator"
|
||||
class="col-12 q-mb-md"
|
||||
style="padding-block: 0.5px; margin-top: 32px"
|
||||
/>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -145,9 +145,10 @@ onMounted(() => {
|
|||
@click.stop="
|
||||
() => {
|
||||
if (v.statusSave) {
|
||||
$emit('remove', index , v.id );
|
||||
$emit('remove', index, v.id);
|
||||
} else {
|
||||
close(index);
|
||||
}
|
||||
close(index);
|
||||
}
|
||||
"
|
||||
/>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue