refactor: add passport

This commit is contained in:
Thanaphon Frappet 2024-10-03 18:01:08 +07:00
parent e969db16e0
commit 8006314ce4

View file

@ -2300,6 +2300,11 @@ const emptyCreateDialog = ref(false);
employeeFormState.isEmployeeEdit = false;
employeeFormState.dialogType = 'info';
}
if (employeeFormState.currentTab === 'passport') {
await employeeFormStore.submitPassport();
}
if (employeeFormState.currentTab === 'healthCheck') {
await employeeFormStore.submitHealthCheck();
}
@ -2366,6 +2371,10 @@ const emptyCreateDialog = ref(false);
name: 'personalInfo',
label: 'customerEmployee.form.group.personalInfo',
},
{
name: 'passport',
label: 'customerEmployee.fileType.passport',
},
{
name: 'healthCheck',
label: 'customerEmployee.form.group.healthCheck',
@ -2446,6 +2455,36 @@ const emptyCreateDialog = ref(false);
anchor: 'drawer-info-file-upload',
tab: 'personalInfo',
},
{
name: $t('customerEmployee.form.group.personalInfo'),
anchor: 'drawer-form-personal',
tab: 'personalInfo',
},
{
name: $t('customerEmployee.form.group.passport'),
anchor: 'form-passport',
tab: 'passport',
useBtn:
currentFromDataEmployee.employeePassport?.filter(
(item) => {
if (item.id === undefined) {
return true;
}
return false;
},
).length === 0 &&
employeeFormState.currentIndexPassport === -1
? true
: false,
},
...(currentFromDataEmployee.employeePassport?.map((v, i) => ({
name: dateFormat(v.expireDate),
anchor: `drawer-employee-employeePassport-${i}`,
tab: 'passport',
sub: true,
})) || []),
...(currentFromDataEmployee.employeeCheckup?.map((v, i) => ({
name: $t('general.times', { number: i + 1 }),
anchor: `form-employee-checkup-${i}`,
@ -2471,7 +2510,20 @@ const emptyCreateDialog = ref(false);
foreground: 'var(--blue-6)',
}"
scroll-element="#employee-form-content"
/>
>
<template v-slot:btn-form-passport>
<q-btn
dense
flat
icon="mdi-plus"
size="sm"
rounded
padding="0px 0px"
style="color: var(--stone-9)"
@click.stop="employeeFormStore.addPassport()"
/>
</template>
</SideMenu>
</div>
</div>
@ -2806,6 +2858,128 @@ const emptyCreateDialog = ref(false);
</div>
</template>
<template v-if="employeeFormState.currentTab === 'passport'">
<div class="q-gutter-sm">
<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-passport"
style="background-color: var(--surface-3)"
/>
{{ $t('customerEmployee.form.group.passport') }}
</div>
<FormEmployeePassport
v-for="(
value, index
) in currentFromDataEmployee.employeePassport"
prefix-id="drawer-info-employee"
:key="index"
id="form-passport"
hide-title
dense
outlined
separator
:title="$t('customerEmployee.form.group.passport')"
:readonly="employeeFormState.currentIndexPassport !== index"
v-model:passport-type="value.type"
v-model:passport-number="value.number"
v-model:passport-issue-date="value.issueDate"
v-model:passport-expiry-date="value.expireDate"
v-model:passport-issuing-place="value.issuePlace"
v-model:passport-issuing-country="value.issueCountry"
>
<template v-slot:expiryDate>
{{ $t('general.expirationDate') }} :
{{ dateFormat(value.expireDate) }}
</template>
<template v-slot:button>
<div class="surface-1 row rounded" style="min-height: 35px">
<UndoButton
v-if="
employeeFormState.isEmployeeEdit &&
!(employeeFormState.currentIndexPassport === -1) &&
employeeFormState.currentIndexPassport === index
"
id="btn-info-basic-undo"
icon-only
@click="
() => {
employeeFormStore.resetFormDataEmployee();
employeeFormState.isEmployeeEdit = false;
employeeFormState.dialogType = 'info';
employeeFormState.currentIndexPassport = -1;
}
"
type="button"
/>
<SaveButton
v-if="
(employeeFormState.isEmployeeEdit ||
value.id === undefined) &&
!(employeeFormState.currentIndexPassport === -1) &&
employeeFormState.currentIndexPassport === index
"
id="btn-info-basic-save"
icon-only
@click="
() => {
employeeFormState.currentIndexPassport = index;
}
"
type="submit"
/>
<EditButton
v-if="
employeeFormState.currentIndexPassport === -1 ||
(!employeeFormState.isEmployeeEdit &&
value.id !== undefined &&
employeeFormState.currentIndexPassport === index)
"
id="btn-info-basic-edit"
icon-only
@click="
() => {
employeeFormState.currentIndexPassport = index;
employeeFormState.isEmployeeEdit = true;
employeeFormState.dialogType = 'edit';
}
"
type="button"
/>
<DeleteButton
v-if="
employeeFormState.currentIndexPassport === -1 ||
(!employeeFormState.isEmployeeEdit &&
value.id !== undefined &&
!(employeeFormState.currentIndexPassport === -1) &&
employeeFormState.currentIndexPassport === index)
"
id="btn-info-basic-delete"
icon-only
@click.stop="
() => {
employeeFormState.currentIndexPassport = index;
deleteEmployeeById({ type: 'passport' });
}
"
type="button"
:disabled="
!(employeeFormState.currentIndex === -1) &&
!(employeeFormState.currentIndex === index)
"
/>
</div>
</template>
</FormEmployeePassport>
</div>
</template>
<template v-if="employeeFormState.currentTab === 'healthCheck'">
<FormEmployeeHealthCheck
v-if="employeeFormState.currentTab === 'healthCheck'"