refactor: add div column

This commit is contained in:
Net 2024-08-19 17:56:36 +07:00
parent e40b432609
commit f8e39d21b2

View file

@ -2409,393 +2409,400 @@ const emptyCreateDialog = ref(false);
} }
" "
> >
<div class="q-px-lg q-pt-lg surface-2"> <div class="column full-height">
<ProfileBanner <div class="q-px-lg q-pt-lg surface-2">
@view="employeeFormState.imageDialog = true" <ProfileBanner
@edit="dialogEmployeeImageUpload && dialogEmployeeImageUpload.browse()" @view="employeeFormState.imageDialog = true"
@update:toggle-status=" @edit="
(v) => { dialogEmployeeImageUpload && dialogEmployeeImageUpload.browse()
if (currentFromDataEmployee.id !== undefined) "
triggerChangeStatus(currentFromDataEmployee.id, v); @update:toggle-status="
} (v) => {
" if (currentFromDataEmployee.id !== undefined)
active triggerChangeStatus(currentFromDataEmployee.id, v);
use-toggle }
color="white" "
icon="mdi-account-plus-outline" active
bg-color="linear-gradient(135deg, rgba(43,137,223,1) 0%, rgba(230,51,81,1) 100%)" use-toggle
v-model:current-tab="employeeFormState.currentTab" color="white"
v-model:toggle-status="currentFromDataEmployee.status" icon="mdi-account-plus-outline"
v-model:cover-url="employeeFormState.profileUrl" bg-color="linear-gradient(135deg, rgba(43,137,223,1) 0%, rgba(230,51,81,1) 100%)"
fallback-cover="/images/employee-banner.png" v-model:current-tab="employeeFormState.currentTab"
:img="employeeFormState.profileUrl" v-model:toggle-status="currentFromDataEmployee.status"
:tabs-list="[ v-model:cover-url="employeeFormState.profileUrl"
{ name: 'personalInfo', label: 'personalInfo' }, fallback-cover="/images/employee-banner.png"
{ name: 'healthCheck', label: 'healthCheck' }, :img="employeeFormState.profileUrl"
{ name: 'workHistory', label: 'workHistory' }, :tabs-list="[
{ name: 'other', label: 'other' }, { name: 'personalInfo', label: 'personalInfo' },
]" { name: 'healthCheck', label: 'healthCheck' },
:menu="formMenuIconEmployee" { name: 'workHistory', label: 'workHistory' },
:toggle-title="$t('formDialogTitleUserStatus')" { name: 'other', label: 'other' },
:hide-fade=" ]"
employeeFormState.profileUrl === '' || :menu="formMenuIconEmployee"
employeeFormState.profileUrl === undefined :toggle-title="$t('formDialogTitleUserStatus')"
" :hide-fade="
/> employeeFormState.profileUrl === '' ||
</div> employeeFormState.profileUrl === undefined
"
<div />
style="flex: 1; width: 100%; overflow-y: auto" </div>
class="surface-2 q-pa-lg" <div
id="drawer-employee-form" style="flex: 1; width: 100%; overflow-y: auto"
> class="surface-2 q-pa-lg column"
<div class="col surface-1 full-height rounded bordered scroll row"> id="drawer-employee-form"
<div >
class="col" <div class="col bg-red surface-1 rounded bordered row">
style="height: 100%; max-height: 100; overflow-y: auto" <div class="col full-height scroll" v-if="$q.screen.gt.sm">
v-if="$q.screen.gt.sm" <div class="q-py-md q-pl-md q-pr-sm">
> <SideMenu
<div class="q-py-md q-pl-md q-pr-sm"> :menu="
<SideMenu [
:menu=" {
[ name: $t('formDialogTitleInformation'),
{ anchor: 'drawer-form-information',
name: $t('formDialogTitleInformation'), tab: 'personalInfo',
anchor: 'drawer-form-information', },
tab: 'personalInfo', {
}, name: $t('formDialogTitlePersonal'),
{ anchor: 'drawer-form-personal',
name: $t('formDialogTitlePersonal'), tab: 'personalInfo',
anchor: 'drawer-form-personal', },
tab: 'personalInfo', {
}, name: $t('formDialogTitlePersonnelAddress'),
{ anchor: 'drawer-form-personal-address',
name: $t('formDialogTitlePersonnelAddress'), tab: 'personalInfo',
anchor: 'drawer-form-personal-address', },
tab: 'personalInfo', {
}, name: $t('formDialogTitlePassport'),
{ anchor: 'drawer-form-passport',
name: $t('formDialogTitlePassport'), tab: 'personalInfo',
anchor: 'drawer-form-passport', },
tab: 'personalInfo', {
}, name: $t('formDialogTitleVisa'),
{ anchor: 'drawer-form-visa',
name: $t('formDialogTitleVisa'), tab: 'personalInfo',
anchor: 'drawer-form-visa', },
tab: 'personalInfo', ...(currentFromDataEmployee.employeeCheckup?.map(
}, (v, i) => ({
...(currentFromDataEmployee.employeeCheckup?.map((v, i) => ({ name: $t('customer.form.instance', { index: i + 1 }),
name: $t('customer.form.instance', { index: i + 1 }), anchor: `drawer-employee-checkup-${i}`,
anchor: `drawer-employee-checkup-${i}`, tab: 'healthCheck',
tab: 'healthCheck', }),
})) || []), ) || []),
...(currentFromDataEmployee.employeeWork?.map((v, i) => ({
...(currentFromDataEmployee.employeeWork?.map((v, i) => ({ name: $t('customer.form.instance', { index: i + 1 }),
name: $t('customer.form.instance', { index: i + 1 }), anchor: `drawer-employee-work-history-${i}`,
anchor: `drawer-employee-work-history-${i}`, tab: 'workHistory',
tab: 'workHistory', })) || []),
})) || []), {
name: $t('formDialogTitleFamilyHistory'),
{ anchor: 'drawer-other',
name: $t('formDialogTitleFamilyHistory'), tab: 'other',
anchor: 'drawer-other', },
tab: 'other', ].filter((v) => v.tab === employeeFormState.currentTab)
},
].filter((v) => v.tab === employeeFormState.currentTab)
"
background="transparent"
:active="{
background: 'hsla(var(--blue-6-hsl) / .2)',
foreground: 'var(--blue-6)',
}"
scroll-element="#drawer-employee-form-content"
/>
</div>
</div>
<div
class="col-12 col-md-10 q-py-md q-pr-md q-pl-sm"
id="drawer-employee-form-content"
style="height: 290px; overflow-y: auto"
>
<template v-if="employeeFormState.currentTab === 'personalInfo'">
<div
class="surface-1 rounded q-pt-sm row"
style="position: absolute; z-index: 999; right: 4%"
>
<UndoButton
v-if="employeeFormState.isEmployeeEdit"
id="btn-info-basic-undo"
icon-only
@click="
() => {
employeeFormStore.resetFormDataEmployee();
employeeFormState.isEmployeeEdit = false;
employeeFormState.dialogType = 'info';
}
" "
type="button" background="transparent"
/> :active="{
<SaveButton background: 'hsla(var(--blue-6-hsl) / .2)',
v-if="employeeFormState.isEmployeeEdit" foreground: 'var(--blue-6)',
id="btn-info-basic-save" }"
icon-only scroll-element="#drawer-employee-form-content"
type="submit"
/>
<EditButton
v-if="!employeeFormState.isEmployeeEdit"
id="btn-info-basic-edit"
icon-only
@click="
() => {
employeeFormState.isEmployeeEdit = true;
employeeFormState.dialogType = 'edit';
}
"
type="button"
/>
<DeleteButton
v-if="!employeeFormState.isEmployeeEdit"
id="btn-info-basic-delete"
icon-only
@click="
() => deleteEmployeeById({ id: currentFromDataEmployee.id })
"
type="button"
/> />
</div> </div>
</div>
<BasicInformation <div
no-action class="col-12 col-md-10 q-py-md q-pr-md q-pl-sm"
id="drawer-form-information" id="drawer-employee-form-content"
prefix-id="drawer-info-employee" style="height: 100%; overflow-y: auto"
dense >
outlined <template v-if="employeeFormState.currentTab === 'personalInfo'">
:title="'formDialogTitleInformation'" <div
:readonly="!employeeFormState.isEmployeeEdit" class="surface-1 rounded q-pt-sm row"
:employee-owner-option="employeeStore.ownerOption" style="position: absolute; z-index: 999; right: 4%"
v-model:customer-branch="employeeFormState.formDataEmployeeOwner" >
v-model:employee-id="employeeFormState.currentEmployeeCode" <UndoButton
v-model:nrc-no="currentFromDataEmployee.nrcNo" v-if="employeeFormState.isEmployeeEdit"
v-model:code="currentFromDataEmployee.code" id="btn-info-basic-undo"
@filter-owner-branch="employeeFormStore.employeeFilterOwnerBranch" icon-only
class="q-mb-xl" @click="
/> () => {
<FormPerson employeeFormStore.resetFormDataEmployee();
id="drawer-form-personal" employeeFormState.isEmployeeEdit = false;
prefix-id="drawer-info-employee" employeeFormState.dialogType = 'info';
dense }
outlined "
employee type="button"
separator />
:title="'personalInfo'" <SaveButton
:readonly="!employeeFormState.isEmployeeEdit" v-if="employeeFormState.isEmployeeEdit"
v-model:firstName="currentFromDataEmployee.firstName" id="btn-info-basic-save"
v-model:lastName="currentFromDataEmployee.lastName" icon-only
v-model:firstNameEN="currentFromDataEmployee.firstNameEN" type="submit"
v-model:lastNameEN="currentFromDataEmployee.lastNameEN" />
v-model:gender="currentFromDataEmployee.gender" <EditButton
v-model:birthDate="currentFromDataEmployee.dateOfBirth" v-if="!employeeFormState.isEmployeeEdit"
v-model:nationality="currentFromDataEmployee.nationality" id="btn-info-basic-edit"
class="q-mb-xl" icon-only
/> @click="
<AddressForm () => {
id="drawer-form-personal-address" employeeFormState.isEmployeeEdit = true;
employee employeeFormState.dialogType = 'edit';
v-model:address="currentFromDataEmployee.address" }
v-model:addressEN="currentFromDataEmployee.addressEN" "
v-model:provinceId="currentFromDataEmployee.provinceId" type="button"
v-model:districtId="currentFromDataEmployee.districtId" />
v-model:subDistrictId="currentFromDataEmployee.subDistrictId" <DeleteButton
v-model:zipCode="currentFromDataEmployee.zipCode" v-if="!employeeFormState.isEmployeeEdit"
:readonly="!employeeFormState.isEmployeeEdit" id="btn-info-basic-delete"
prefix-id="drawer-info-personnel" icon-only
dense @click="
class="q-mb-xl" () => deleteEmployeeById({ id: currentFromDataEmployee.id })
/> "
<FormEmployeePassport type="button"
prefix-id="drawer-info-employee" />
id="drawer-form-passport" </div>
dense <BasicInformation
outlined no-action
separator id="drawer-form-information"
:title="'formDialogTitlePassport'" prefix-id="drawer-info-employee"
:readonly="!employeeFormState.isEmployeeEdit" dense
v-model:passport-type="currentFromDataEmployee.passportType" outlined
v-model:passport-number="currentFromDataEmployee.passportNumber" :title="'formDialogTitleInformation'"
v-model:passport-issue-date=" :readonly="!employeeFormState.isEmployeeEdit"
currentFromDataEmployee.passportIssueDate :employee-owner-option="employeeStore.ownerOption"
" v-model:customer-branch="
v-model:passport-expiry-date=" employeeFormState.formDataEmployeeOwner
currentFromDataEmployee.passportExpiryDate "
" v-model:employee-id="employeeFormState.currentEmployeeCode"
v-model:passport-issuing-place=" v-model:nrc-no="currentFromDataEmployee.nrcNo"
currentFromDataEmployee.passportIssuingPlace v-model:code="currentFromDataEmployee.code"
" @filter-owner-branch="
v-model:passport-issuing-country=" employeeFormStore.employeeFilterOwnerBranch
currentFromDataEmployee.passportIssuingCountry "
" class="q-mb-xl"
v-model:previous-passport-reference=" />
currentFromDataEmployee.previousPassportReference <FormPerson
" id="drawer-form-personal"
class="q-mb-xl" prefix-id="drawer-info-employee"
/> dense
<FormEmployeeVisa outlined
prefix-id="drawer-info-employee" employee
id="drawer-form-visa" separator
dense :title="'personalInfo'"
outlined :readonly="!employeeFormState.isEmployeeEdit"
:title="`formDialogTitleVisa`" v-model:firstName="currentFromDataEmployee.firstName"
:readonly="!employeeFormState.isEmployeeEdit" v-model:lastName="currentFromDataEmployee.lastName"
v-model:visa-type="currentFromDataEmployee.visaType" v-model:firstNameEN="currentFromDataEmployee.firstNameEN"
v-model:visa-number="currentFromDataEmployee.visaNumber" v-model:lastNameEN="currentFromDataEmployee.lastNameEN"
v-model:visa-issue-date="currentFromDataEmployee.visaIssueDate" v-model:gender="currentFromDataEmployee.gender"
v-model:visa-expiry-date="currentFromDataEmployee.visaExpiryDate" v-model:birthDate="currentFromDataEmployee.dateOfBirth"
v-model:visa-issuing-place=" v-model:nationality="currentFromDataEmployee.nationality"
currentFromDataEmployee.visaIssuingPlace class="q-mb-xl"
" />
v-model:visa-stay-until-date=" <AddressForm
currentFromDataEmployee.visaStayUntilDate id="drawer-form-personal-address"
" employee
v-model:tm6-number="currentFromDataEmployee.tm6Number" v-model:address="currentFromDataEmployee.address"
v-model:entry-date="currentFromDataEmployee.entryDate" v-model:addressEN="currentFromDataEmployee.addressEN"
class="q-mb-xl" v-model:provinceId="currentFromDataEmployee.provinceId"
/> v-model:districtId="currentFromDataEmployee.districtId"
</template> v-model:subDistrictId="currentFromDataEmployee.subDistrictId"
v-model:zipCode="currentFromDataEmployee.zipCode"
<template v-if="employeeFormState.currentTab === 'healthCheck'"> :readonly="!employeeFormState.isEmployeeEdit"
<FormEmployeeHealthCheck prefix-id="drawer-info-personnel"
v-if="employeeFormState.currentTab === 'healthCheck'" dense
id="drawer-form-checkup" class="q-mb-xl"
prefix-id="drawer-employee" />
dense <FormEmployeePassport
outlined prefix-id="drawer-info-employee"
v-model:current-index="employeeFormState.currentIndex" id="drawer-form-passport"
v-model:employee-checkup="currentFromDataEmployee.employeeCheckup" dense
v-model:checkup-type-option=" outlined
optionStore.globalOption.insurancePlace separator
" :title="'formDialogTitlePassport'"
v-model:medical-benefit-option=" :readonly="!employeeFormState.isEmployeeEdit"
optionStore.globalOption.typeInsurance v-model:passport-type="currentFromDataEmployee.passportType"
" v-model:passport-number="currentFromDataEmployee.passportNumber"
v-model:insuranceCompanyOption=" v-model:passport-issue-date="
optionStore.globalOption.insurancePlace currentFromDataEmployee.passportIssueDate
" "
@save=" v-model:passport-expiry-date="
(index) => { currentFromDataEmployee.passportExpiryDate
employeeFormState.currentIndex = index; "
notify('create', $t('success')); v-model:passport-issuing-place="
} currentFromDataEmployee.passportIssuingPlace
" "
@edit=" v-model:passport-issuing-country="
(index) => { currentFromDataEmployee.passportIssuingCountry
if ( "
currentFromDataEmployee.employeeCheckup?.[index].statusSave v-model:previous-passport-reference="
) { currentFromDataEmployee.previousPassportReference
"
class="q-mb-xl"
/>
<FormEmployeeVisa
prefix-id="drawer-info-employee"
id="drawer-form-visa"
dense
outlined
:title="`formDialogTitleVisa`"
:readonly="!employeeFormState.isEmployeeEdit"
v-model:visa-type="currentFromDataEmployee.visaType"
v-model:visa-number="currentFromDataEmployee.visaNumber"
v-model:visa-issue-date="currentFromDataEmployee.visaIssueDate"
v-model:visa-expiry-date="
currentFromDataEmployee.visaExpiryDate
"
v-model:visa-issuing-place="
currentFromDataEmployee.visaIssuingPlace
"
v-model:visa-stay-until-date="
currentFromDataEmployee.visaStayUntilDate
"
v-model:tm6-number="currentFromDataEmployee.tm6Number"
v-model:entry-date="currentFromDataEmployee.entryDate"
class="q-mb-xl"
/>
</template>
<template v-if="employeeFormState.currentTab === 'healthCheck'">
<FormEmployeeHealthCheck
v-if="employeeFormState.currentTab === 'healthCheck'"
id="drawer-form-checkup"
prefix-id="drawer-employee"
dense
outlined
v-model:current-index="employeeFormState.currentIndex"
v-model:employee-checkup="
currentFromDataEmployee.employeeCheckup
"
v-model:checkup-type-option="
optionStore.globalOption.insurancePlace
"
v-model:medical-benefit-option="
optionStore.globalOption.typeInsurance
"
v-model:insuranceCompanyOption="
optionStore.globalOption.insurancePlace
"
@save="
(index) => {
employeeFormState.currentIndex = index; employeeFormState.currentIndex = index;
currentFromDataEmployee.employeeCheckup[index].statusSave = notify('create', $t('success'));
false;
} }
} "
" @edit="
@undo=" (index) => {
(index) => { if (
if ( currentFromDataEmployee.employeeCheckup?.[index]
currentFromDataEmployee.employeeCheckup?.[index] .statusSave
.statusSave === false ) {
) { employeeFormState.currentIndex = index;
employeeFormState.currentIndex = -1; currentFromDataEmployee.employeeCheckup[
currentFromDataEmployee.employeeCheckup[index].statusSave = index
true; ].statusSave = false;
employeeFormStore.resetFormDataEmployee(); }
} }
} "
" @undo="
@delete=" (index) => {
(index) => { if (
employeeFormState.currentIndex = index; currentFromDataEmployee.employeeCheckup?.[index]
deleteEmployeeById({ type: 'healthCheck' }); .statusSave === false
} ) {
" employeeFormState.currentIndex = -1;
/> currentFromDataEmployee.employeeCheckup[
</template> index
].statusSave = true;
<template v-if="employeeFormState.currentTab === 'workHistory'"> employeeFormStore.resetFormDataEmployee();
<FormEmployeeWorkHistory }
v-if="employeeFormState.currentTab === 'workHistory'"
id="drawer-work-history"
prefix-id="drawer-employee"
dense
outlined
v-model:current-index="employeeFormState.currentIndex"
v-model:employee-work="currentFromDataEmployee.employeeWork"
v-model:position-name-option="optionStore.globalOption.position"
v-model:job-type-option="optionStore.globalOption.businessType"
v-model:workplace-option="optionStore.globalOption.area"
@delete="
(index) => {
employeeFormState.currentIndex = index;
deleteEmployeeById({ type: 'work' });
}
"
@save="
(index) => {
employeeFormState.currentIndex = index;
}
"
@undo="
(index) => {
if (
currentFromDataEmployee.employeeWork?.[index].statusSave ===
false
) {
employeeFormState.currentIndex = -1;
currentFromDataEmployee.employeeWork[index].statusSave =
true;
} }
} "
" @delete="
@edit=" (index) => {
(index) => {
if (
currentFromDataEmployee.employeeWork?.[index].statusSave
) {
employeeFormState.currentIndex = index; employeeFormState.currentIndex = index;
currentFromDataEmployee.employeeWork[index].statusSave = deleteEmployeeById({ type: 'healthCheck' });
false;
} }
} "
" />
/> </template>
</template> <template v-if="employeeFormState.currentTab === 'workHistory'">
<FormEmployeeWorkHistory
<template v-if="employeeFormState.currentTab === 'other'"> v-if="employeeFormState.currentTab === 'workHistory'"
<FormEmployeeOther id="drawer-work-history"
v-if="employeeFormState.currentTab === 'other'" prefix-id="drawer-employee"
id="drawer-other" dense
prefix-id="drawer-employee" outlined
dense v-model:current-index="employeeFormState.currentIndex"
outlined v-model:employee-work="currentFromDataEmployee.employeeWork"
v-model:employee-other="currentFromDataEmployee.employeeOtherInfo" v-model:position-name-option="optionStore.globalOption.position"
@undo=" v-model:job-type-option="optionStore.globalOption.businessType"
() => { v-model:workplace-option="optionStore.globalOption.area"
if ( @delete="
currentFromDataEmployee.employeeOtherInfo?.statusSave === (index) => {
false employeeFormState.currentIndex = index;
) { deleteEmployeeById({ type: 'work' });
currentFromDataEmployee.employeeOtherInfo.statusSave = true;
} }
} "
" @save="
@edit=" (index) => {
() => { employeeFormState.currentIndex = index;
if (currentFromDataEmployee.employeeOtherInfo?.statusSave) {
currentFromDataEmployee.employeeOtherInfo.statusSave = false;
} }
} "
" @undo="
/> (index) => {
</template> if (
currentFromDataEmployee.employeeWork?.[index]
.statusSave === false
) {
employeeFormState.currentIndex = -1;
currentFromDataEmployee.employeeWork[index].statusSave =
true;
}
}
"
@edit="
(index) => {
if (
currentFromDataEmployee.employeeWork?.[index].statusSave
) {
employeeFormState.currentIndex = index;
currentFromDataEmployee.employeeWork[index].statusSave =
false;
}
}
"
/>
</template>
<template v-if="employeeFormState.currentTab === 'other'">
<FormEmployeeOther
v-if="employeeFormState.currentTab === 'other'"
id="drawer-other"
prefix-id="drawer-employee"
dense
outlined
v-model:employee-other="
currentFromDataEmployee.employeeOtherInfo
"
@undo="
() => {
if (
currentFromDataEmployee.employeeOtherInfo?.statusSave ===
false
) {
currentFromDataEmployee.employeeOtherInfo.statusSave = true;
}
}
"
@edit="
() => {
if (currentFromDataEmployee.employeeOtherInfo?.statusSave) {
currentFromDataEmployee.employeeOtherInfo.statusSave = false;
}
}
"
/>
</template>
</div>
</div> </div>
</div> </div>
</div> </div>