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') }}
|
{{ $t('customerEmployee.form.group.passport') }}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<template
|
<div class="col self-center">
|
||||||
v-for="(
|
<div
|
||||||
value, index
|
class="full-width full-height flex flex-center col"
|
||||||
) in currentFromDataEmployee.employeePassport"
|
v-if="
|
||||||
:key="index"
|
currentFromDataEmployee.employeePassport?.length === 0
|
||||||
>
|
"
|
||||||
<div class="col" v-if="value !== undefined">
|
>
|
||||||
<FormEmployeePassport
|
<NoData />
|
||||||
prefix-id="drawer-info-employee"
|
</div>
|
||||||
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>
|
|
||||||
|
|
||||||
<template v-slot:button>
|
<template
|
||||||
<div
|
v-for="(
|
||||||
class="surface-1 row rounded"
|
value, index
|
||||||
style="min-height: 35px"
|
) in currentFromDataEmployee.employeePassport"
|
||||||
>
|
:key="index"
|
||||||
<UndoButton
|
>
|
||||||
v-if="
|
<div class="col" v-if="value !== undefined">
|
||||||
employeeFormState.isEmployeeEdit &&
|
<FormEmployeePassport
|
||||||
!(
|
prefix-id="drawer-info-employee"
|
||||||
employeeFormState.currentIndexPassport === -1
|
id="form-passport"
|
||||||
) &&
|
hide-title
|
||||||
employeeFormState.currentIndexPassport === index
|
dense
|
||||||
"
|
outlined
|
||||||
id="btn-info-basic-undo"
|
separator
|
||||||
icon-only
|
:title="$t('customerEmployee.form.group.passport')"
|
||||||
@click="
|
:readonly="
|
||||||
() => {
|
employeeFormState.currentIndexPassport !== index
|
||||||
employeeFormStore.resetFormDataEmployee();
|
"
|
||||||
employeeFormState.isEmployeeEdit = false;
|
:full-name="
|
||||||
employeeFormState.dialogType = 'info';
|
employeeFormState.currentIndexPassport !== index
|
||||||
employeeFormState.currentIndexPassport = -1;
|
"
|
||||||
}
|
v-model:birth-country="value.birthCountry"
|
||||||
"
|
v-model:previous-passportRef="value.previousPassportRef"
|
||||||
type="button"
|
v-model:issue-place="value.issuePlace"
|
||||||
/>
|
v-model:issue-country="value.issueCountry"
|
||||||
<SaveButton
|
v-model:issue-date="value.issueDate"
|
||||||
v-if="
|
v-model:type="value.type"
|
||||||
(employeeFormState.isEmployeeEdit ||
|
v-model:expire-date="value.expireDate"
|
||||||
value.id === undefined) &&
|
v-model:birth-date="value.birthDate"
|
||||||
!(
|
v-model:worker-status="value.workerStatus"
|
||||||
employeeFormState.currentIndexPassport === -1
|
v-model:nationality="value.nationality"
|
||||||
) &&
|
v-model:gender="value.gender"
|
||||||
employeeFormState.currentIndexPassport === index
|
v-model:last-name-en="value.lastNameEN"
|
||||||
"
|
v-model:last-name="value.lastName"
|
||||||
id="btn-info-basic-save"
|
v-model:middle-name-en="value.middleNameEN"
|
||||||
icon-only
|
v-model:middle-name="value.middleName"
|
||||||
@click="
|
v-model:first-name-en="value.firstNameEN"
|
||||||
() => {
|
v-model:first-name="value.firstName"
|
||||||
employeeFormState.currentIndexPassport = index;
|
v-model:name-prefix="value.namePrefix"
|
||||||
}
|
v-model:passport-number="value.number"
|
||||||
"
|
>
|
||||||
type="submit"
|
<template v-slot:expiryDate>
|
||||||
|
{{ $t('general.expirationDate') }} :
|
||||||
|
{{ dateFormat(value.expireDate) }}
|
||||||
|
<ExpirationDate
|
||||||
|
v-if="value.id !== undefined"
|
||||||
|
:expiration-date="value.expireDate"
|
||||||
/>
|
/>
|
||||||
|
</template>
|
||||||
|
|
||||||
<EditButton
|
<template v-slot:button>
|
||||||
v-if="
|
<div
|
||||||
employeeFormState.currentIndexPassport === -1 ||
|
class="surface-1 row rounded"
|
||||||
(!employeeFormState.isEmployeeEdit &&
|
style="min-height: 35px"
|
||||||
value.id !== undefined &&
|
>
|
||||||
employeeFormState.currentIndexPassport ===
|
<UndoButton
|
||||||
index)
|
v-if="
|
||||||
"
|
employeeFormState.isEmployeeEdit &&
|
||||||
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 === -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
|
employeeFormState.currentIndexPassport === index
|
||||||
)
|
"
|
||||||
"
|
id="btn-info-basic-undo"
|
||||||
/>
|
icon-only
|
||||||
</div>
|
@click="
|
||||||
</template>
|
() => {
|
||||||
</FormEmployeePassport>
|
employeeFormStore.resetFormDataEmployee();
|
||||||
</div>
|
employeeFormState.isEmployeeEdit = false;
|
||||||
</template>
|
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
|
<EditButton
|
||||||
class="full-width flex flex-center col"
|
v-if="
|
||||||
v-if="currentFromDataEmployee.employeePassport?.length === 0"
|
employeeFormState.currentIndexPassport === -1 ||
|
||||||
>
|
(!employeeFormState.isEmployeeEdit &&
|
||||||
<NoData />
|
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>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -5232,7 +5243,14 @@ const emptyCreateDialog = ref(false);
|
||||||
/>
|
/>
|
||||||
{{ $t('customerEmployee.form.group.visa') }}
|
{{ $t('customerEmployee.form.group.visa') }}
|
||||||
</div>
|
</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
|
<FormEmployeeVisa
|
||||||
v-for="(
|
v-for="(
|
||||||
value, index
|
value, index
|
||||||
|
|
@ -5353,12 +5371,6 @@ const emptyCreateDialog = ref(false);
|
||||||
</template>
|
</template>
|
||||||
</FormEmployeeVisa>
|
</FormEmployeeVisa>
|
||||||
</div>
|
</div>
|
||||||
<div
|
|
||||||
v-if="currentFromDataEmployee.employeeVisa?.length === 0"
|
|
||||||
class="full-width col flex flex-center"
|
|
||||||
>
|
|
||||||
<NoData />
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
@ -5379,7 +5391,13 @@ const emptyCreateDialog = ref(false);
|
||||||
{{ $t(`customerEmployee.formHealthCheck.title`) }}
|
{{ $t(`customerEmployee.formHealthCheck.title`) }}
|
||||||
</div>
|
</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
|
<FormEmployeeHealthCheck
|
||||||
v-if="employeeFormState.currentTab === 'healthCheck'"
|
v-if="employeeFormState.currentTab === 'healthCheck'"
|
||||||
id="drawer-form-checkup"
|
id="drawer-form-checkup"
|
||||||
|
|
@ -5446,12 +5464,6 @@ const emptyCreateDialog = ref(false);
|
||||||
"
|
"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div
|
|
||||||
class="full-width col flex flex-center"
|
|
||||||
v-if="currentFromDataEmployee.employeeCheckup?.length === 0"
|
|
||||||
>
|
|
||||||
<NoData />
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<template v-if="employeeFormState.currentTab === 'workHistory'">
|
<template v-if="employeeFormState.currentTab === 'workHistory'">
|
||||||
|
|
@ -5470,7 +5482,14 @@ const emptyCreateDialog = ref(false);
|
||||||
{{ $t(`customerEmployee.form.group.workHistory`) }}
|
{{ $t(`customerEmployee.form.group.workHistory`) }}
|
||||||
</div>
|
</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
|
<FormEmployeeWorkHistory
|
||||||
v-if="employeeFormState.currentTab === 'workHistory'"
|
v-if="employeeFormState.currentTab === 'workHistory'"
|
||||||
id="drawer-work-history"
|
id="drawer-work-history"
|
||||||
|
|
@ -5529,13 +5548,6 @@ const emptyCreateDialog = ref(false);
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div
|
|
||||||
class="full-width col flex flex-center"
|
|
||||||
v-if="currentFromDataEmployee.employeeWork?.length === 0"
|
|
||||||
>
|
|
||||||
<NoData />
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
<template v-if="employeeFormState.currentTab === 'other'">
|
<template v-if="employeeFormState.currentTab === 'other'">
|
||||||
<FormEmployeeOther
|
<FormEmployeeOther
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue