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 { locale } = useI18n();
|
||||||
const optionStore = useOptionStore();
|
const optionStore = useOptionStore();
|
||||||
|
const prefixNameTh = defineModel<string>('prefixName');
|
||||||
const firstName = defineModel<string>('firstName');
|
const firstName = defineModel<string>('firstName');
|
||||||
const lastName = defineModel<string>('lastName');
|
const lastName = defineModel<string>('lastName');
|
||||||
const firstNameEN = defineModel<string>('firstNameEN');
|
const firstNameEN = defineModel<string>('firstNameEN');
|
||||||
|
|
@ -23,6 +23,13 @@ const gender = defineModel<string>('gender');
|
||||||
const birthDate = defineModel<Date | string | null>('birthDate');
|
const birthDate = defineModel<Date | string | null>('birthDate');
|
||||||
const nationality = defineModel<string>('nationality');
|
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 genderOptions = ref<Record<string, unknown>[]>([]);
|
||||||
const genderFilter = selectFilterOptionRefMod(
|
const genderFilter = selectFilterOptionRefMod(
|
||||||
ref(optionStore.globalOption.gender),
|
ref(optionStore.globalOption.gender),
|
||||||
|
|
@ -48,274 +55,348 @@ defineProps<{
|
||||||
}>();
|
}>();
|
||||||
</script>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
<div class="col-md-3 col-12 app-text-muted">
|
<div class="row col-12">
|
||||||
• {{ title || $t('formDialogTitlePersonnel') }}
|
<div class="col-12 q-pb-sm text-weight-bold text-body1">
|
||||||
</div>
|
<q-icon
|
||||||
<div class="col-md-9 col-12 row q-col-gutter-md">
|
flat
|
||||||
<q-input
|
size="xs"
|
||||||
lazy-rules="ondemand"
|
class="q-pa-sm rounded q-mr-xs"
|
||||||
:for="`${prefixId}-input-first-name`"
|
color="info"
|
||||||
:dense="dense"
|
name="mdi-account"
|
||||||
outlined
|
style="background-color: var(--surface-3)"
|
||||||
:readonly="readonly"
|
/>
|
||||||
hide-bottom-space
|
{{ $t(`${title}`) }}
|
||||||
class="col-md-3 col-6"
|
</div>
|
||||||
:label="$t('formDialogInputFirstName')"
|
|
||||||
v-model="firstName"
|
<div class="col-12 row q-col-gutter-sm">
|
||||||
:rules="[
|
<div class="col-6 row">
|
||||||
(val: string) => !!val || $t('formDialogInputFirstNameValidate'),
|
<q-select
|
||||||
]"
|
outlined
|
||||||
/>
|
use-input
|
||||||
<q-input
|
fill-input
|
||||||
lazy-rules="ondemand"
|
emit-value
|
||||||
:for="`${prefixId}-input-last-name`"
|
map-options
|
||||||
:dense="dense"
|
hide-selected
|
||||||
outlined
|
hide-bottom-space
|
||||||
:readonly="readonly"
|
v-model="prefixNameTh"
|
||||||
hide-bottom-space
|
input-debounce="0"
|
||||||
class="col-md-3 col-6"
|
option-label="label"
|
||||||
:label="$t('formDialogInputLastName')"
|
option-value="value"
|
||||||
v-model="lastName"
|
lazy-rules="ondemand"
|
||||||
:rules="[(val: string) => !!val || $t('formDialogInputLastNameValidate')]"
|
class="col-2"
|
||||||
/>
|
:dense="dense"
|
||||||
<q-input
|
:readonly="readonly"
|
||||||
lazy-rules="ondemand"
|
:options="prefixNameOptions"
|
||||||
:for="`${prefixId}-input-first-name-en`"
|
:hide-dropdown-icon="readonly"
|
||||||
:dense="dense"
|
:for="`${prefixId}-select-prefix-name`"
|
||||||
outlined
|
:label="$t('formDialogInputPrefixName')"
|
||||||
:readonly="readonly"
|
@filter="prefixNameFilter"
|
||||||
hide-bottom-space
|
>
|
||||||
class="col-md-3 col-6"
|
<template v-slot:no-option>
|
||||||
:label="$t('formDialogInputFirstNameEN')"
|
<q-item>
|
||||||
v-model="firstNameEN"
|
<q-item-section class="text-grey">
|
||||||
:rules="[
|
{{ $t('noResults') }}
|
||||||
(val: string) => !!val || $t('formDialogInputFirstNameENValidate'),
|
</q-item-section>
|
||||||
]"
|
</q-item>
|
||||||
/>
|
</template>
|
||||||
<q-input
|
</q-select>
|
||||||
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>
|
|
||||||
|
|
||||||
<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
|
<q-input
|
||||||
lazy-rules="ondemand"
|
lazy-rules="ondemand"
|
||||||
:for="`${prefixId}-input-birth-date`"
|
:for="`${prefixId}-input-first-name`"
|
||||||
hide-bottom-space
|
|
||||||
placeholder="DD/MM/YYYY"
|
|
||||||
:label="$t('formDialogInputBirthDate')"
|
|
||||||
:dense="dense"
|
:dense="dense"
|
||||||
outlined
|
outlined
|
||||||
:readonly="readonly"
|
:readonly="readonly"
|
||||||
|
hide-bottom-space
|
||||||
|
class="col"
|
||||||
|
:label="$t('formDialogInputFirstName')"
|
||||||
|
v-model="firstName"
|
||||||
:rules="[
|
:rules="[
|
||||||
(val: string) =>
|
(val: string) => !!val || $t('formDialogInputFirstNameValidate'),
|
||||||
!!val || $t('selectValidate') + $t('formDialogInputBirthDate'),
|
|
||||||
]"
|
]"
|
||||||
:mask="readonly ? '' : '##/##/####'"
|
/>
|
||||||
:model-value="
|
<q-input
|
||||||
birthDate && readonly
|
lazy-rules="ondemand"
|
||||||
? dateFormat(birthDate)
|
:for="`${prefixId}-input-last-name`"
|
||||||
: dateFormat(birthDate, false, false, true)
|
:dense="dense"
|
||||||
"
|
outlined
|
||||||
@update:model-value="
|
:readonly="readonly"
|
||||||
(v) => {
|
hide-bottom-space
|
||||||
if (v && v.toString().length === 10) {
|
class="col"
|
||||||
const today = new Date();
|
:label="$t('formDialogInputLastName')"
|
||||||
const date = parseAndFormatDate(v, locale);
|
v-model="lastName"
|
||||||
birthDate = date && date > today ? today : date;
|
: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;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
"
|
||||||
"
|
>
|
||||||
>
|
<template v-slot:prepend>
|
||||||
<!-- v-model="birthDate" -->
|
<q-icon
|
||||||
<template v-slot:prepend>
|
size="xs"
|
||||||
<q-icon
|
name="mdi-calendar-blank-outline"
|
||||||
size="xs"
|
class="cursor-pointer"
|
||||||
name="mdi-calendar-blank-outline"
|
color="positive"
|
||||||
class="cursor-pointer"
|
/>
|
||||||
color="positive"
|
</template>
|
||||||
/>
|
</q-input>
|
||||||
</template>
|
</template>
|
||||||
</q-input>
|
</VueDatePicker>
|
||||||
</template>
|
<q-input
|
||||||
</VueDatePicker>
|
lazy-rules="ondemand"
|
||||||
<q-input
|
:for="`${prefixId}-input-age`"
|
||||||
lazy-rules="ondemand"
|
:id="`${prefixId}-input-age`"
|
||||||
:for="`${prefixId}-input-age`"
|
:dense="dense"
|
||||||
:id="`${prefixId}-input-age`"
|
outlined
|
||||||
:dense="dense"
|
readonly
|
||||||
outlined
|
:label="$t('formDialogInputAge')"
|
||||||
readonly
|
class="col"
|
||||||
:label="$t('formDialogInputAge')"
|
:model-value="
|
||||||
class="col-md-3 col-6"
|
birthDate?.toString() === 'Invalid Date' ||
|
||||||
:model-value="
|
birthDate?.toString() === undefined
|
||||||
birthDate?.toString() === 'Invalid Date' ||
|
? ''
|
||||||
birthDate?.toString() === undefined
|
: calculateAge(birthDate)
|
||||||
? ''
|
"
|
||||||
: calculateAge(birthDate)
|
/>
|
||||||
"
|
|
||||||
/>
|
<q-select
|
||||||
<q-select
|
v-if="employee"
|
||||||
v-if="employee"
|
outlined
|
||||||
outlined
|
clearable
|
||||||
clearable
|
use-input
|
||||||
use-input
|
fill-input
|
||||||
fill-input
|
emit-value
|
||||||
emit-value
|
map-options
|
||||||
map-options
|
hide-selected
|
||||||
hide-selected
|
hide-bottom-space
|
||||||
hide-bottom-space
|
input-debounce="0"
|
||||||
input-debounce="0"
|
option-label="label"
|
||||||
option-label="label"
|
option-value="value"
|
||||||
option-value="value"
|
lazy-rules="ondemand"
|
||||||
lazy-rules="ondemand"
|
class="col-md-3 col-6"
|
||||||
class="col-md-3 col-6"
|
:dense="dense"
|
||||||
:dense="dense"
|
v-model="gender"
|
||||||
v-model="gender"
|
:readonly="readonly"
|
||||||
:readonly="readonly"
|
:options="genderOptions"
|
||||||
:options="genderOptions"
|
:hide-dropdown-icon="readonly"
|
||||||
:hide-dropdown-icon="readonly"
|
:for="`${prefixId}-select-gender`"
|
||||||
:for="`${prefixId}-select-gender`"
|
:label="$t('formDialogInputGender')"
|
||||||
:label="$t('formDialogInputGender')"
|
:rules="[
|
||||||
:rules="[
|
(val: string) =>
|
||||||
(val: string) =>
|
!!val || $t('selectValidate') + $t('formDialogInputGender'),
|
||||||
!!val || $t('selectValidate') + $t('formDialogInputGender'),
|
]"
|
||||||
]"
|
@filter="genderFilter"
|
||||||
@filter="genderFilter"
|
>
|
||||||
>
|
<template v-slot:no-option>
|
||||||
<template v-slot:no-option>
|
<q-item>
|
||||||
<q-item>
|
<q-item-section class="text-grey">
|
||||||
<q-item-section class="text-grey">
|
{{ $t('noResults') }}
|
||||||
{{ $t('noResults') }}
|
</q-item-section>
|
||||||
</q-item-section>
|
</q-item>
|
||||||
</q-item>
|
</template>
|
||||||
</template>
|
</q-select>
|
||||||
</q-select>
|
<q-select
|
||||||
<q-select
|
v-if="employee"
|
||||||
v-if="employee"
|
outlined
|
||||||
outlined
|
clearable
|
||||||
clearable
|
use-input
|
||||||
use-input
|
fill-input
|
||||||
fill-input
|
emit-value
|
||||||
emit-value
|
map-options
|
||||||
map-options
|
hide-selected
|
||||||
hide-selected
|
hide-bottom-space
|
||||||
hide-bottom-space
|
input-debounce="0"
|
||||||
input-debounce="0"
|
option-label="label"
|
||||||
option-label="label"
|
option-value="label"
|
||||||
option-value="label"
|
v-model="nationality"
|
||||||
v-model="nationality"
|
lazy-rules="ondemand"
|
||||||
lazy-rules="ondemand"
|
class="col-md-3 col-6"
|
||||||
class="col-md-3 col-6"
|
:dense="dense"
|
||||||
:dense="dense"
|
:readonly="readonly"
|
||||||
:readonly="readonly"
|
:options="nationalityOptions"
|
||||||
:options="nationalityOptions"
|
:hide-dropdown-icon="readonly"
|
||||||
:hide-dropdown-icon="readonly"
|
:for="`${prefixId}-select-nationality`"
|
||||||
:for="`${prefixId}-select-nationality`"
|
:label="$t('formDialogInputNationality')"
|
||||||
:label="$t('formDialogInputNationality')"
|
:rules="[
|
||||||
:rules="[
|
(val: string) =>
|
||||||
(val: string) =>
|
!!val || $t('selectValidate') + $t('formDialogInputNationality'),
|
||||||
!!val || $t('selectValidate') + $t('formDialogInputNationality'),
|
]"
|
||||||
]"
|
@filter="nationalityFilter"
|
||||||
@filter="nationalityFilter"
|
>
|
||||||
>
|
<template v-slot:no-option>
|
||||||
<template v-slot:no-option>
|
<q-item>
|
||||||
<q-item>
|
<q-item-section class="text-grey">
|
||||||
<q-item-section class="text-grey">
|
{{ $t('noResults') }}
|
||||||
{{ $t('noResults') }}
|
</q-item-section>
|
||||||
</q-item-section>
|
</q-item>
|
||||||
</q-item>
|
</template>
|
||||||
</template>
|
</q-select>
|
||||||
</q-select>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<q-separator
|
|
||||||
v-if="separator"
|
|
||||||
class="col-12 q-mb-md"
|
|
||||||
style="padding-block: 0.5px; margin-top: 32px"
|
|
||||||
/>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -145,9 +145,10 @@ onMounted(() => {
|
||||||
@click.stop="
|
@click.stop="
|
||||||
() => {
|
() => {
|
||||||
if (v.statusSave) {
|
if (v.statusSave) {
|
||||||
$emit('remove', index , v.id );
|
$emit('remove', index, v.id);
|
||||||
|
} else {
|
||||||
|
close(index);
|
||||||
}
|
}
|
||||||
close(index);
|
|
||||||
}
|
}
|
||||||
"
|
"
|
||||||
/>
|
/>
|
||||||
|
|
|
||||||
|
|
@ -32,7 +32,8 @@ import NoData from 'components/NoData.vue';
|
||||||
import ProfileUpload from 'components/ProfileUpload.vue';
|
import ProfileUpload from 'components/ProfileUpload.vue';
|
||||||
import PaginationComponent from 'src/components/PaginationComponent.vue';
|
import PaginationComponent from 'src/components/PaginationComponent.vue';
|
||||||
import useOptionStore from 'src/stores/options';
|
import useOptionStore from 'src/stores/options';
|
||||||
status;
|
import ProfileBanner from 'src/components/ProfileBanner.vue';
|
||||||
|
import SideMenu from 'src/components/SideMenu.vue';
|
||||||
|
|
||||||
const { locale, t } = useI18n();
|
const { locale, t } = useI18n();
|
||||||
const $q = useQuasar();
|
const $q = useQuasar();
|
||||||
|
|
@ -109,9 +110,29 @@ const fieldSelectedOption = ref<{ label: string; value: string }[]>([
|
||||||
},
|
},
|
||||||
]);
|
]);
|
||||||
|
|
||||||
|
const formMenuIcon = ref<{ icon: string; color: string; bgColor: string }[]>([
|
||||||
|
{
|
||||||
|
icon: 'mdi-account',
|
||||||
|
color: 'hsl(var(--info-bg))',
|
||||||
|
bgColor: 'var(--surface-1)',
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
icon: 'mdi-map-marker-radius',
|
||||||
|
color: 'hsl(var(--info-bg))',
|
||||||
|
bgColor: 'var(--surface-1)',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: 'mdi-briefcase',
|
||||||
|
color: 'hsl(var(--info-bg))',
|
||||||
|
bgColor: 'var(--surface-1)',
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
|
||||||
const fieldSelected = ref<
|
const fieldSelected = ref<
|
||||||
('name' | 'type' | 'telephoneNo' | 'birthDate' | 'email' | 'userRole')[]
|
('name' | 'type' | 'telephoneNo' | 'birthDate' | 'email' | 'userRole')[]
|
||||||
>(['name', 'type', 'telephoneNo', 'birthDate', 'email', 'userRole']);
|
>(['name', 'type', 'telephoneNo', 'birthDate', 'email', 'userRole']);
|
||||||
|
|
||||||
const fieldDisplay = ref();
|
const fieldDisplay = ref();
|
||||||
const hideStat = ref(false);
|
const hideStat = ref(false);
|
||||||
const userCode = ref<string>();
|
const userCode = ref<string>();
|
||||||
|
|
@ -175,20 +196,22 @@ const formData = ref<UserCreate>({
|
||||||
status: 'CREATED',
|
status: 'CREATED',
|
||||||
});
|
});
|
||||||
|
|
||||||
const profileUrl = ref<string | null>('');
|
const isImageEdit = ref<boolean>(false);
|
||||||
const profileFile = ref<File | undefined>(undefined);
|
const imageUrl = ref<string | null>('');
|
||||||
|
const profileFileImg = ref<File | null>(null);
|
||||||
|
const imageDialog = ref(false);
|
||||||
|
|
||||||
const inputFile = (() => {
|
const inputFileImg = (() => {
|
||||||
const element = document.createElement('input');
|
const element = document.createElement('input');
|
||||||
element.type = 'file';
|
element.type = 'file';
|
||||||
element.accept = 'image/*';
|
element.accept = 'image/*';
|
||||||
|
|
||||||
const reader = new FileReader();
|
const reader = new FileReader();
|
||||||
reader.addEventListener('load', () => {
|
reader.addEventListener('load', () => {
|
||||||
if (typeof reader.result === 'string') profileUrl.value = reader.result;
|
if (typeof reader.result === 'string') imageUrl.value = reader.result;
|
||||||
|
|
||||||
if (infoDrawerEdit.value && currentUser.value)
|
if (infoDrawerEdit.value && currentUser.value)
|
||||||
currentUser.value.profileImageUrl = profileUrl.value as string;
|
currentUser.value.profileImageUrl = imageUrl.value as string;
|
||||||
// profileUrl.value = currentUser.value?.profileImageUrl as string;
|
// profileUrl.value = currentUser.value?.profileImageUrl as string;
|
||||||
|
|
||||||
// if (infoDrawerEmployeeEdit.value && infoEmployeePersonCard.value)
|
// if (infoDrawerEmployeeEdit.value && infoEmployeePersonCard.value)
|
||||||
|
|
@ -196,9 +219,9 @@ const inputFile = (() => {
|
||||||
});
|
});
|
||||||
|
|
||||||
element.addEventListener('change', () => {
|
element.addEventListener('change', () => {
|
||||||
profileFile.value = element.files?.[0];
|
profileFileImg.value = element.files?.[0];
|
||||||
if (profileFile.value) {
|
if (profileFileImg.value) {
|
||||||
reader.readAsDataURL(profileFile.value);
|
reader.readAsDataURL(profileFileImg.value);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
@ -259,12 +282,12 @@ reader.addEventListener('load', () => {
|
||||||
if (infoDrawerEdit.value) infoPersonCard.value[0].img = urlProfile.value;
|
if (infoDrawerEdit.value) infoPersonCard.value[0].img = urlProfile.value;
|
||||||
});
|
});
|
||||||
|
|
||||||
watch(profileFile, () => {
|
watch(profileFileImg, () => {
|
||||||
if (profileFile.value) reader.readAsDataURL(profileFile.value);
|
if (profileFileImg.value) reader.readAsDataURL(profileFileImg.value);
|
||||||
});
|
});
|
||||||
|
|
||||||
inputFile.addEventListener('change', (e) => {
|
inputFileImg.addEventListener('change', (e) => {
|
||||||
profileFile.value = (e.currentTarget as HTMLInputElement).files?.[0];
|
profileFileImg.value = (e.currentTarget as HTMLInputElement).files?.[0];
|
||||||
});
|
});
|
||||||
|
|
||||||
const selectorList = computed(() => [
|
const selectorList = computed(() => [
|
||||||
|
|
@ -360,7 +383,7 @@ function onClose() {
|
||||||
userId.value = '';
|
userId.value = '';
|
||||||
userCode.value = '';
|
userCode.value = '';
|
||||||
urlProfile.value = undefined;
|
urlProfile.value = undefined;
|
||||||
profileFile.value = undefined;
|
profileFileImg.value = null;
|
||||||
infoDrawerEdit.value = false;
|
infoDrawerEdit.value = false;
|
||||||
agencyFile.value = [];
|
agencyFile.value = [];
|
||||||
modal.value = false;
|
modal.value = false;
|
||||||
|
|
@ -375,7 +398,7 @@ function onClose() {
|
||||||
|
|
||||||
async function onSubmit() {
|
async function onSubmit() {
|
||||||
if (profileSubmit.value) {
|
if (profileSubmit.value) {
|
||||||
formData.value.profileImage = profileFile.value as File;
|
formData.value.profileImage = profileFileImg.value as File;
|
||||||
} else {
|
} else {
|
||||||
formData.value.profileImage = null;
|
formData.value.profileImage = null;
|
||||||
}
|
}
|
||||||
|
|
@ -520,7 +543,7 @@ async function assignFormData(idEdit: string) {
|
||||||
if (foundUser) {
|
if (foundUser) {
|
||||||
currentUser.value = foundUser;
|
currentUser.value = foundUser;
|
||||||
infoPersonId.value = currentUser.value.id;
|
infoPersonId.value = currentUser.value.id;
|
||||||
profileUrl.value = currentUser.value.profileImageUrl;
|
imageUrl.value = currentUser.value.profileImageUrl;
|
||||||
formData.value = {
|
formData.value = {
|
||||||
branchId: foundUser.branch[0]?.id,
|
branchId: foundUser.branch[0]?.id,
|
||||||
provinceId: foundUser.provinceId,
|
provinceId: foundUser.provinceId,
|
||||||
|
|
@ -568,7 +591,7 @@ async function assignFormData(idEdit: string) {
|
||||||
userId.value = foundUser.id;
|
userId.value = foundUser.id;
|
||||||
|
|
||||||
if (foundUser.branch) {
|
if (foundUser.branch) {
|
||||||
if (foundUser.branch[0].isHeadOffice) {
|
if (foundUser.branch?.[0].isHeadOffice) {
|
||||||
hqId.value = foundUser.branch[0].id as string;
|
hqId.value = foundUser.branch[0].id as string;
|
||||||
} else {
|
} else {
|
||||||
hqId.value = foundUser.branch[0].headOfficeId as string;
|
hqId.value = foundUser.branch[0].headOfficeId as string;
|
||||||
|
|
@ -593,6 +616,12 @@ async function assignFormData(idEdit: string) {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function openImageDialog(isEdit?: boolean) {
|
||||||
|
if (isEdit) isImageEdit.value = true;
|
||||||
|
else isImageEdit.value = false;
|
||||||
|
imageDialog.value = true;
|
||||||
|
}
|
||||||
|
|
||||||
onMounted(async () => {
|
onMounted(async () => {
|
||||||
utilsStore.currentTitle.title = 'personnelManagement';
|
utilsStore.currentTitle.title = 'personnelManagement';
|
||||||
utilsStore.currentTitle.path = [{ text: 'personnelManagementCaption' }];
|
utilsStore.currentTitle.path = [{ text: 'personnelManagementCaption' }];
|
||||||
|
|
@ -1472,11 +1501,111 @@ watch(
|
||||||
v-model:subDistrictId="formData.subDistrictId"
|
v-model:subDistrictId="formData.subDistrictId"
|
||||||
v-model:zipCode="formData.zipCode"
|
v-model:zipCode="formData.zipCode"
|
||||||
>
|
>
|
||||||
|
<div class="q-mx-lg q-mt-lg">
|
||||||
|
<ProfileBanner
|
||||||
|
active
|
||||||
|
hideFade
|
||||||
|
:img="
|
||||||
|
imageUrl ||
|
||||||
|
{
|
||||||
|
male: '/no-img-man.png',
|
||||||
|
female: '/no-img-female.png',
|
||||||
|
}[formData.gender]
|
||||||
|
"
|
||||||
|
:cover="imageUrl || null"
|
||||||
|
:title="`${formData.firstName} ${formData.lastName}`"
|
||||||
|
:caption="`${formData.firstNameEN} ${formData.lastNameEN}`"
|
||||||
|
color="hsla(var(--pink-6-hsl)/1)"
|
||||||
|
bgColor="hsla(var(--pink-6-hsl)/0.15)"
|
||||||
|
@view="openImageDialog"
|
||||||
|
@edit="inputFileImg.click()"
|
||||||
|
:readonly="!infoDrawerEdit"
|
||||||
|
:menu="formMenuIcon"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<!-- ย้อนกลับ -->
|
||||||
|
|
||||||
<div
|
<div
|
||||||
|
class="col surface-1 q-ma-lg rounded bordered scroll row"
|
||||||
|
id="personnel-form"
|
||||||
|
>
|
||||||
|
<div class="col">
|
||||||
|
<div style="position: sticky; top: 0" class="q-pa-sm">
|
||||||
|
<SideMenu
|
||||||
|
:menu="[
|
||||||
|
{
|
||||||
|
name: $t('formDialogTitleInformation'),
|
||||||
|
anchor: 'form-information',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: $t('formDialogTitlePersonal'),
|
||||||
|
anchor: 'form-personal',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: $t('formDialogTitleAddressPersonnel'),
|
||||||
|
anchor: 'form-address',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: $t('formDialogTitleByType'),
|
||||||
|
anchor: 'form-work',
|
||||||
|
},
|
||||||
|
]"
|
||||||
|
background="transparent"
|
||||||
|
:active="{
|
||||||
|
background: 'hsla(var(--blue-6-hsl) / .2)',
|
||||||
|
foreground: 'var(--blue-6)',
|
||||||
|
}"
|
||||||
|
scroll-element="#personnel-form"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-10 q-pa-md q-gutter-y-xl">
|
||||||
|
<FormInformation
|
||||||
|
id="form-information"
|
||||||
|
v-model:hq-id="hqId"
|
||||||
|
v-model:br-id="brId"
|
||||||
|
v-model:user-type="formData.userType"
|
||||||
|
v-model:user-role="formData.userRole"
|
||||||
|
v-model:username="formData.username"
|
||||||
|
v-model:user-code="userCode"
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
separator
|
||||||
|
:title="$t('formDialogTitleInformation')"
|
||||||
|
:readonly="!infoDrawerEdit"
|
||||||
|
:usernameReadonly="isEdit"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<FormPerson
|
||||||
|
id="form-personal"
|
||||||
|
v-model:first-name="formData.firstName"
|
||||||
|
v-model:last-name="formData.lastName"
|
||||||
|
v-model:first-name-en="formData.firstNameEN"
|
||||||
|
v-model:last-name-en="formData.lastNameEN"
|
||||||
|
v-model:telephone-no="formData.telephoneNo"
|
||||||
|
v-model:email="formData.email"
|
||||||
|
v-model:gender="formData.gender"
|
||||||
|
v-model:birth-date="formData.birthDate"
|
||||||
|
:title="$t('formDialogTitlePersonal')"
|
||||||
|
prefix-id="drawer-info-personnel"
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
separator
|
||||||
|
:readonly="!infoDrawerEdit"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- <div
|
||||||
class="col surface-1 q-ma-lg rounded bordered scroll row"
|
class="col surface-1 q-ma-lg rounded bordered scroll row"
|
||||||
id="branch-info"
|
id="branch-info"
|
||||||
>
|
>
|
||||||
|
|
||||||
<div class="col-10 q-pa-md q-gutter-y-xl">
|
<div class="col-10 q-pa-md q-gutter-y-xl">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<ProfileUpload
|
<ProfileUpload
|
||||||
prefix-id="drawer-info-personnel"
|
prefix-id="drawer-info-personnel"
|
||||||
v-model:url-profile="profileUrl"
|
v-model:url-profile="profileUrl"
|
||||||
|
|
@ -1485,7 +1614,7 @@ watch(
|
||||||
@input-file="inputFile.click()"
|
@input-file="inputFile.click()"
|
||||||
@cancel-file="inputFile.value = ''"
|
@cancel-file="inputFile.value = ''"
|
||||||
/>
|
/>
|
||||||
<!-- <AppBox class="surface-1" style="padding: 0">
|
<AppBox class="surface-1" style="padding: 0">
|
||||||
<PersonCard
|
<PersonCard
|
||||||
:can-edit-profile="infoDrawerEdit"
|
:can-edit-profile="infoDrawerEdit"
|
||||||
:data="{
|
:data="{
|
||||||
|
|
@ -1503,7 +1632,7 @@ watch(
|
||||||
no-bg
|
no-bg
|
||||||
@edit-profile="inputFile.click()"
|
@edit-profile="inputFile.click()"
|
||||||
/>
|
/>
|
||||||
</AppBox> -->
|
</AppBox>
|
||||||
<FormInformation
|
<FormInformation
|
||||||
dense
|
dense
|
||||||
outlined
|
outlined
|
||||||
|
|
@ -1553,7 +1682,7 @@ watch(
|
||||||
v-model:userId="userId"
|
v-model:userId="userId"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div> -->
|
||||||
</InfoForm>
|
</InfoForm>
|
||||||
</DrawerInfo>
|
</DrawerInfo>
|
||||||
|
|
||||||
|
|
@ -1581,8 +1710,8 @@ watch(
|
||||||
v-model:url-profile="urlProfile"
|
v-model:url-profile="urlProfile"
|
||||||
v-model:status-toggle="statusToggle"
|
v-model:status-toggle="statusToggle"
|
||||||
v-model:profile-submit="profileSubmit"
|
v-model:profile-submit="profileSubmit"
|
||||||
@input-file="inputFile.click()"
|
@input-file="inputFileImg.click()"
|
||||||
@cancel-file="inputFile.value = ''"
|
@cancel-file="inputFileImg.value = ''"
|
||||||
/>
|
/>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue