fix: layout no data
This commit is contained in:
Thanaphon Frappet
parent
bee2d63d18
commit
8f3f499a7a
1 changed files with 178 additions and 166 deletions
|
|
@ -5063,158 +5063,169 @@ const emptyCreateDialog = ref(false);
|
|||
{{ $t('customerEmployee.form.group.passport') }}
|
||||
</div>
|
||||
|
||||
<template
|
||||
v-for="(
|
||||
value, index
|
||||
) in currentFromDataEmployee.employeePassport"
|
||||
:key="index"
|
||||
>
|
||||
<div class="col" v-if="value !== undefined">
|
||||
<FormEmployeePassport
|
||||
prefix-id="drawer-info-employee"
|
||||
id="form-passport"
|
||||
hide-title
|
||||
dense
|
||||
outlined
|
||||
separator
|
||||
:title="$t('customerEmployee.form.group.passport')"
|
||||
:readonly="
|
||||
employeeFormState.currentIndexPassport !== index
|
||||
"
|
||||
:full-name="
|
||||
employeeFormState.currentIndexPassport !== index
|
||||
"
|
||||
v-model:birth-country="value.birthCountry"
|
||||
v-model:previous-passportRef="value.previousPassportRef"
|
||||
v-model:issue-place="value.issuePlace"
|
||||
v-model:issue-country="value.issueCountry"
|
||||
v-model:issue-date="value.issueDate"
|
||||
v-model:type="value.type"
|
||||
v-model:expire-date="value.expireDate"
|
||||
v-model:birth-date="value.birthDate"
|
||||
v-model:worker-status="value.workerStatus"
|
||||
v-model:nationality="value.nationality"
|
||||
v-model:gender="value.gender"
|
||||
v-model:last-name-en="value.lastNameEN"
|
||||
v-model:last-name="value.lastName"
|
||||
v-model:middle-name-en="value.middleNameEN"
|
||||
v-model:middle-name="value.middleName"
|
||||
v-model:first-name-en="value.firstNameEN"
|
||||
v-model:first-name="value.firstName"
|
||||
v-model:name-prefix="value.namePrefix"
|
||||
v-model:passport-number="value.number"
|
||||
>
|
||||
<template v-slot:expiryDate>
|
||||
{{ $t('general.expirationDate') }} :
|
||||
{{ dateFormat(value.expireDate) }}
|
||||
<ExpirationDate
|
||||
v-if="value.id !== undefined"
|
||||
:expiration-date="value.expireDate"
|
||||
/>
|
||||
</template>
|
||||
<div class="col self-center">
|
||||
<div
|
||||
class="full-width full-height flex flex-center col"
|
||||
v-if="
|
||||
currentFromDataEmployee.employeePassport?.length === 0
|
||||
"
|
||||
>
|
||||
<NoData />
|
||||
</div>
|
||||
|
||||
<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"
|
||||
<template
|
||||
v-for="(
|
||||
value, index
|
||||
) in currentFromDataEmployee.employeePassport"
|
||||
:key="index"
|
||||
>
|
||||
<div class="col" v-if="value !== undefined">
|
||||
<FormEmployeePassport
|
||||
prefix-id="drawer-info-employee"
|
||||
id="form-passport"
|
||||
hide-title
|
||||
dense
|
||||
outlined
|
||||
separator
|
||||
:title="$t('customerEmployee.form.group.passport')"
|
||||
:readonly="
|
||||
employeeFormState.currentIndexPassport !== index
|
||||
"
|
||||
:full-name="
|
||||
employeeFormState.currentIndexPassport !== index
|
||||
"
|
||||
v-model:birth-country="value.birthCountry"
|
||||
v-model:previous-passportRef="value.previousPassportRef"
|
||||
v-model:issue-place="value.issuePlace"
|
||||
v-model:issue-country="value.issueCountry"
|
||||
v-model:issue-date="value.issueDate"
|
||||
v-model:type="value.type"
|
||||
v-model:expire-date="value.expireDate"
|
||||
v-model:birth-date="value.birthDate"
|
||||
v-model:worker-status="value.workerStatus"
|
||||
v-model:nationality="value.nationality"
|
||||
v-model:gender="value.gender"
|
||||
v-model:last-name-en="value.lastNameEN"
|
||||
v-model:last-name="value.lastName"
|
||||
v-model:middle-name-en="value.middleNameEN"
|
||||
v-model:middle-name="value.middleName"
|
||||
v-model:first-name-en="value.firstNameEN"
|
||||
v-model:first-name="value.firstName"
|
||||
v-model:name-prefix="value.namePrefix"
|
||||
v-model:passport-number="value.number"
|
||||
>
|
||||
<template v-slot:expiryDate>
|
||||
{{ $t('general.expirationDate') }} :
|
||||
{{ dateFormat(value.expireDate) }}
|
||||
<ExpirationDate
|
||||
v-if="value.id !== undefined"
|
||||
:expiration-date="value.expireDate"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<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 &&
|
||||
<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-delete"
|
||||
icon-only
|
||||
@click.stop="
|
||||
() => {
|
||||
deleteEmployeeById({ type: 'passport', index });
|
||||
}
|
||||
"
|
||||
type="button"
|
||||
:disabled="
|
||||
!(
|
||||
employeeFormState.currentIndexPassport === -1
|
||||
) &&
|
||||
!(
|
||||
employeeFormState.currentIndexPassport === index
|
||||
)
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</FormEmployeePassport>
|
||||
</div>
|
||||
</template>
|
||||
"
|
||||
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"
|
||||
/>
|
||||
|
||||
<div
|
||||
class="full-width flex flex-center col"
|
||||
v-if="currentFromDataEmployee.employeePassport?.length === 0"
|
||||
>
|
||||
<NoData />
|
||||
<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="
|
||||
() => {
|
||||
deleteEmployeeById({
|
||||
type: 'passport',
|
||||
index,
|
||||
});
|
||||
}
|
||||
"
|
||||
type="button"
|
||||
:disabled="
|
||||
!(
|
||||
employeeFormState.currentIndexPassport === -1
|
||||
) &&
|
||||
!(
|
||||
employeeFormState.currentIndexPassport ===
|
||||
index
|
||||
)
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</FormEmployeePassport>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -5232,7 +5243,14 @@ const emptyCreateDialog = ref(false);
|
|||
/>
|
||||
{{ $t('customerEmployee.form.group.visa') }}
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="col self-center">
|
||||
<div
|
||||
v-if="currentFromDataEmployee.employeeVisa?.length === 0"
|
||||
class="full-width full-height col flex flex-center"
|
||||
>
|
||||
<NoData />
|
||||
</div>
|
||||
|
||||
<FormEmployeeVisa
|
||||
v-for="(
|
||||
value, index
|
||||
|
|
@ -5353,12 +5371,6 @@ const emptyCreateDialog = ref(false);
|
|||
</template>
|
||||
</FormEmployeeVisa>
|
||||
</div>
|
||||
<div
|
||||
v-if="currentFromDataEmployee.employeeVisa?.length === 0"
|
||||
class="full-width col flex flex-center"
|
||||
>
|
||||
<NoData />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -5379,7 +5391,13 @@ const emptyCreateDialog = ref(false);
|
|||
{{ $t(`customerEmployee.formHealthCheck.title`) }}
|
||||
</div>
|
||||
|
||||
<div class="col">
|
||||
<div class="col self-center">
|
||||
<div
|
||||
v-if="currentFromDataEmployee.employeeCheckup?.length === 0"
|
||||
class="full-width full-height col flex flex-center"
|
||||
>
|
||||
<NoData />
|
||||
</div>
|
||||
<FormEmployeeHealthCheck
|
||||
v-if="employeeFormState.currentTab === 'healthCheck'"
|
||||
id="drawer-form-checkup"
|
||||
|
|
@ -5446,12 +5464,6 @@ const emptyCreateDialog = ref(false);
|
|||
"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="full-width col flex flex-center"
|
||||
v-if="currentFromDataEmployee.employeeCheckup?.length === 0"
|
||||
>
|
||||
<NoData />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-if="employeeFormState.currentTab === 'workHistory'">
|
||||
|
|
@ -5470,7 +5482,14 @@ const emptyCreateDialog = ref(false);
|
|||
{{ $t(`customerEmployee.form.group.workHistory`) }}
|
||||
</div>
|
||||
|
||||
<div class="col">
|
||||
<div class="col self-center">
|
||||
<div
|
||||
class="full-width full-height col flex flex-center"
|
||||
v-if="currentFromDataEmployee.employeeWork?.length === 0"
|
||||
>
|
||||
<NoData />
|
||||
</div>
|
||||
|
||||
<FormEmployeeWorkHistory
|
||||
v-if="employeeFormState.currentTab === 'workHistory'"
|
||||
id="drawer-work-history"
|
||||
|
|
@ -5529,13 +5548,6 @@ const emptyCreateDialog = ref(false);
|
|||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="full-width col flex flex-center"
|
||||
v-if="currentFromDataEmployee.employeeWork?.length === 0"
|
||||
>
|
||||
<NoData />
|
||||
</div>
|
||||
</template>
|
||||
<template v-if="employeeFormState.currentTab === 'other'">
|
||||
<FormEmployeeOther
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue