refactor: add passport
This commit is contained in:
Thanaphon Frappet
parent
e969db16e0
commit
8006314ce4
1 changed files with 175 additions and 1 deletions
|
|
@ -2300,6 +2300,11 @@ const emptyCreateDialog = ref(false);
|
||||||
employeeFormState.isEmployeeEdit = false;
|
employeeFormState.isEmployeeEdit = false;
|
||||||
employeeFormState.dialogType = 'info';
|
employeeFormState.dialogType = 'info';
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (employeeFormState.currentTab === 'passport') {
|
||||||
|
await employeeFormStore.submitPassport();
|
||||||
|
}
|
||||||
|
|
||||||
if (employeeFormState.currentTab === 'healthCheck') {
|
if (employeeFormState.currentTab === 'healthCheck') {
|
||||||
await employeeFormStore.submitHealthCheck();
|
await employeeFormStore.submitHealthCheck();
|
||||||
}
|
}
|
||||||
|
|
@ -2366,6 +2371,10 @@ const emptyCreateDialog = ref(false);
|
||||||
name: 'personalInfo',
|
name: 'personalInfo',
|
||||||
label: 'customerEmployee.form.group.personalInfo',
|
label: 'customerEmployee.form.group.personalInfo',
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
name: 'passport',
|
||||||
|
label: 'customerEmployee.fileType.passport',
|
||||||
|
},
|
||||||
{
|
{
|
||||||
name: 'healthCheck',
|
name: 'healthCheck',
|
||||||
label: 'customerEmployee.form.group.healthCheck',
|
label: 'customerEmployee.form.group.healthCheck',
|
||||||
|
|
@ -2446,6 +2455,36 @@ const emptyCreateDialog = ref(false);
|
||||||
anchor: 'drawer-info-file-upload',
|
anchor: 'drawer-info-file-upload',
|
||||||
tab: 'personalInfo',
|
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) => ({
|
...(currentFromDataEmployee.employeeCheckup?.map((v, i) => ({
|
||||||
name: $t('general.times', { number: i + 1 }),
|
name: $t('general.times', { number: i + 1 }),
|
||||||
anchor: `form-employee-checkup-${i}`,
|
anchor: `form-employee-checkup-${i}`,
|
||||||
|
|
@ -2471,7 +2510,20 @@ const emptyCreateDialog = ref(false);
|
||||||
foreground: 'var(--blue-6)',
|
foreground: 'var(--blue-6)',
|
||||||
}"
|
}"
|
||||||
scroll-element="#employee-form-content"
|
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>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -2806,6 +2858,128 @@ const emptyCreateDialog = ref(false);
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</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'">
|
<template v-if="employeeFormState.currentTab === 'healthCheck'">
|
||||||
<FormEmployeeHealthCheck
|
<FormEmployeeHealthCheck
|
||||||
v-if="employeeFormState.currentTab === 'healthCheck'"
|
v-if="employeeFormState.currentTab === 'healthCheck'"
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue