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);
|
||||
}
|
||||
"
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -32,7 +32,8 @@ import NoData from 'components/NoData.vue';
|
|||
import ProfileUpload from 'components/ProfileUpload.vue';
|
||||
import PaginationComponent from 'src/components/PaginationComponent.vue';
|
||||
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 $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<
|
||||
('name' | 'type' | 'telephoneNo' | 'birthDate' | 'email' | 'userRole')[]
|
||||
>(['name', 'type', 'telephoneNo', 'birthDate', 'email', 'userRole']);
|
||||
|
||||
const fieldDisplay = ref();
|
||||
const hideStat = ref(false);
|
||||
const userCode = ref<string>();
|
||||
|
|
@ -175,20 +196,22 @@ const formData = ref<UserCreate>({
|
|||
status: 'CREATED',
|
||||
});
|
||||
|
||||
const profileUrl = ref<string | null>('');
|
||||
const profileFile = ref<File | undefined>(undefined);
|
||||
const isImageEdit = ref<boolean>(false);
|
||||
const imageUrl = ref<string | null>('');
|
||||
const profileFileImg = ref<File | null>(null);
|
||||
const imageDialog = ref(false);
|
||||
|
||||
const inputFile = (() => {
|
||||
const inputFileImg = (() => {
|
||||
const element = document.createElement('input');
|
||||
element.type = 'file';
|
||||
element.accept = 'image/*';
|
||||
|
||||
const reader = new FileReader();
|
||||
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)
|
||||
currentUser.value.profileImageUrl = profileUrl.value as string;
|
||||
currentUser.value.profileImageUrl = imageUrl.value as string;
|
||||
// profileUrl.value = currentUser.value?.profileImageUrl as string;
|
||||
|
||||
// if (infoDrawerEmployeeEdit.value && infoEmployeePersonCard.value)
|
||||
|
|
@ -196,9 +219,9 @@ const inputFile = (() => {
|
|||
});
|
||||
|
||||
element.addEventListener('change', () => {
|
||||
profileFile.value = element.files?.[0];
|
||||
if (profileFile.value) {
|
||||
reader.readAsDataURL(profileFile.value);
|
||||
profileFileImg.value = element.files?.[0];
|
||||
if (profileFileImg.value) {
|
||||
reader.readAsDataURL(profileFileImg.value);
|
||||
}
|
||||
});
|
||||
|
||||
|
|
@ -259,12 +282,12 @@ reader.addEventListener('load', () => {
|
|||
if (infoDrawerEdit.value) infoPersonCard.value[0].img = urlProfile.value;
|
||||
});
|
||||
|
||||
watch(profileFile, () => {
|
||||
if (profileFile.value) reader.readAsDataURL(profileFile.value);
|
||||
watch(profileFileImg, () => {
|
||||
if (profileFileImg.value) reader.readAsDataURL(profileFileImg.value);
|
||||
});
|
||||
|
||||
inputFile.addEventListener('change', (e) => {
|
||||
profileFile.value = (e.currentTarget as HTMLInputElement).files?.[0];
|
||||
inputFileImg.addEventListener('change', (e) => {
|
||||
profileFileImg.value = (e.currentTarget as HTMLInputElement).files?.[0];
|
||||
});
|
||||
|
||||
const selectorList = computed(() => [
|
||||
|
|
@ -360,7 +383,7 @@ function onClose() {
|
|||
userId.value = '';
|
||||
userCode.value = '';
|
||||
urlProfile.value = undefined;
|
||||
profileFile.value = undefined;
|
||||
profileFileImg.value = null;
|
||||
infoDrawerEdit.value = false;
|
||||
agencyFile.value = [];
|
||||
modal.value = false;
|
||||
|
|
@ -375,7 +398,7 @@ function onClose() {
|
|||
|
||||
async function onSubmit() {
|
||||
if (profileSubmit.value) {
|
||||
formData.value.profileImage = profileFile.value as File;
|
||||
formData.value.profileImage = profileFileImg.value as File;
|
||||
} else {
|
||||
formData.value.profileImage = null;
|
||||
}
|
||||
|
|
@ -520,7 +543,7 @@ async function assignFormData(idEdit: string) {
|
|||
if (foundUser) {
|
||||
currentUser.value = foundUser;
|
||||
infoPersonId.value = currentUser.value.id;
|
||||
profileUrl.value = currentUser.value.profileImageUrl;
|
||||
imageUrl.value = currentUser.value.profileImageUrl;
|
||||
formData.value = {
|
||||
branchId: foundUser.branch[0]?.id,
|
||||
provinceId: foundUser.provinceId,
|
||||
|
|
@ -568,7 +591,7 @@ async function assignFormData(idEdit: string) {
|
|||
userId.value = foundUser.id;
|
||||
|
||||
if (foundUser.branch) {
|
||||
if (foundUser.branch[0].isHeadOffice) {
|
||||
if (foundUser.branch?.[0].isHeadOffice) {
|
||||
hqId.value = foundUser.branch[0].id as string;
|
||||
} else {
|
||||
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 () => {
|
||||
utilsStore.currentTitle.title = 'personnelManagement';
|
||||
utilsStore.currentTitle.path = [{ text: 'personnelManagementCaption' }];
|
||||
|
|
@ -1472,11 +1501,111 @@ watch(
|
|||
v-model:subDistrictId="formData.subDistrictId"
|
||||
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
|
||||
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"
|
||||
id="branch-info"
|
||||
>
|
||||
|
||||
<div class="col-10 q-pa-md q-gutter-y-xl">
|
||||
|
||||
|
||||
|
||||
<ProfileUpload
|
||||
prefix-id="drawer-info-personnel"
|
||||
v-model:url-profile="profileUrl"
|
||||
|
|
@ -1485,7 +1614,7 @@ watch(
|
|||
@input-file="inputFile.click()"
|
||||
@cancel-file="inputFile.value = ''"
|
||||
/>
|
||||
<!-- <AppBox class="surface-1" style="padding: 0">
|
||||
<AppBox class="surface-1" style="padding: 0">
|
||||
<PersonCard
|
||||
:can-edit-profile="infoDrawerEdit"
|
||||
:data="{
|
||||
|
|
@ -1503,7 +1632,7 @@ watch(
|
|||
no-bg
|
||||
@edit-profile="inputFile.click()"
|
||||
/>
|
||||
</AppBox> -->
|
||||
</AppBox>
|
||||
<FormInformation
|
||||
dense
|
||||
outlined
|
||||
|
|
@ -1553,7 +1682,7 @@ watch(
|
|||
v-model:userId="userId"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</InfoForm>
|
||||
</DrawerInfo>
|
||||
|
||||
|
|
@ -1581,8 +1710,8 @@ watch(
|
|||
v-model:url-profile="urlProfile"
|
||||
v-model:status-toggle="statusToggle"
|
||||
v-model:profile-submit="profileSubmit"
|
||||
@input-file="inputFile.click()"
|
||||
@cancel-file="inputFile.value = ''"
|
||||
@input-file="inputFileImg.click()"
|
||||
@cancel-file="inputFileImg.value = ''"
|
||||
/>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue