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,10 +2409,13 @@ const emptyCreateDialog = ref(false);
} }
" "
> >
<div class="column full-height">
<div class="q-px-lg q-pt-lg surface-2"> <div class="q-px-lg q-pt-lg surface-2">
<ProfileBanner <ProfileBanner
@view="employeeFormState.imageDialog = true" @view="employeeFormState.imageDialog = true"
@edit="dialogEmployeeImageUpload && dialogEmployeeImageUpload.browse()" @edit="
dialogEmployeeImageUpload && dialogEmployeeImageUpload.browse()
"
@update:toggle-status=" @update:toggle-status="
(v) => { (v) => {
if (currentFromDataEmployee.id !== undefined) if (currentFromDataEmployee.id !== undefined)
@ -2443,18 +2446,13 @@ const emptyCreateDialog = ref(false);
" "
/> />
</div> </div>
<div <div
style="flex: 1; width: 100%; overflow-y: auto" style="flex: 1; width: 100%; overflow-y: auto"
class="surface-2 q-pa-lg" class="surface-2 q-pa-lg column"
id="drawer-employee-form" id="drawer-employee-form"
> >
<div class="col surface-1 full-height rounded bordered scroll row"> <div class="col bg-red surface-1 rounded bordered row">
<div <div class="col full-height scroll" v-if="$q.screen.gt.sm">
class="col"
style="height: 100%; max-height: 100; overflow-y: auto"
v-if="$q.screen.gt.sm"
>
<div class="q-py-md q-pl-md q-pr-sm"> <div class="q-py-md q-pl-md q-pr-sm">
<SideMenu <SideMenu
:menu=" :menu="
@ -2484,18 +2482,18 @@ const emptyCreateDialog = ref(false);
anchor: 'drawer-form-visa', anchor: 'drawer-form-visa',
tab: 'personalInfo', 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'), name: $t('formDialogTitleFamilyHistory'),
anchor: 'drawer-other', anchor: 'drawer-other',
@ -2512,11 +2510,10 @@ const emptyCreateDialog = ref(false);
/> />
</div> </div>
</div> </div>
<div <div
class="col-12 col-md-10 q-py-md q-pr-md q-pl-sm" class="col-12 col-md-10 q-py-md q-pr-md q-pl-sm"
id="drawer-employee-form-content" id="drawer-employee-form-content"
style="height: 290px; overflow-y: auto" style="height: 100%; overflow-y: auto"
> >
<template v-if="employeeFormState.currentTab === 'personalInfo'"> <template v-if="employeeFormState.currentTab === 'personalInfo'">
<div <div
@ -2564,7 +2561,6 @@ const emptyCreateDialog = ref(false);
type="button" type="button"
/> />
</div> </div>
<BasicInformation <BasicInformation
no-action no-action
id="drawer-form-information" id="drawer-form-information"
@ -2574,11 +2570,15 @@ const emptyCreateDialog = ref(false);
:title="'formDialogTitleInformation'" :title="'formDialogTitleInformation'"
:readonly="!employeeFormState.isEmployeeEdit" :readonly="!employeeFormState.isEmployeeEdit"
:employee-owner-option="employeeStore.ownerOption" :employee-owner-option="employeeStore.ownerOption"
v-model:customer-branch="employeeFormState.formDataEmployeeOwner" v-model:customer-branch="
employeeFormState.formDataEmployeeOwner
"
v-model:employee-id="employeeFormState.currentEmployeeCode" v-model:employee-id="employeeFormState.currentEmployeeCode"
v-model:nrc-no="currentFromDataEmployee.nrcNo" v-model:nrc-no="currentFromDataEmployee.nrcNo"
v-model:code="currentFromDataEmployee.code" v-model:code="currentFromDataEmployee.code"
@filter-owner-branch="employeeFormStore.employeeFilterOwnerBranch" @filter-owner-branch="
employeeFormStore.employeeFilterOwnerBranch
"
class="q-mb-xl" class="q-mb-xl"
/> />
<FormPerson <FormPerson
@ -2650,7 +2650,9 @@ const emptyCreateDialog = ref(false);
v-model:visa-type="currentFromDataEmployee.visaType" v-model:visa-type="currentFromDataEmployee.visaType"
v-model:visa-number="currentFromDataEmployee.visaNumber" v-model:visa-number="currentFromDataEmployee.visaNumber"
v-model:visa-issue-date="currentFromDataEmployee.visaIssueDate" v-model:visa-issue-date="currentFromDataEmployee.visaIssueDate"
v-model:visa-expiry-date="currentFromDataEmployee.visaExpiryDate" v-model:visa-expiry-date="
currentFromDataEmployee.visaExpiryDate
"
v-model:visa-issuing-place=" v-model:visa-issuing-place="
currentFromDataEmployee.visaIssuingPlace currentFromDataEmployee.visaIssuingPlace
" "
@ -2662,7 +2664,6 @@ const emptyCreateDialog = ref(false);
class="q-mb-xl" class="q-mb-xl"
/> />
</template> </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'"
@ -2671,7 +2672,9 @@ const emptyCreateDialog = ref(false);
dense dense
outlined outlined
v-model:current-index="employeeFormState.currentIndex" v-model:current-index="employeeFormState.currentIndex"
v-model:employee-checkup="currentFromDataEmployee.employeeCheckup" v-model:employee-checkup="
currentFromDataEmployee.employeeCheckup
"
v-model:checkup-type-option=" v-model:checkup-type-option="
optionStore.globalOption.insurancePlace optionStore.globalOption.insurancePlace
" "
@ -2690,11 +2693,13 @@ const emptyCreateDialog = ref(false);
@edit=" @edit="
(index) => { (index) => {
if ( if (
currentFromDataEmployee.employeeCheckup?.[index].statusSave currentFromDataEmployee.employeeCheckup?.[index]
.statusSave
) { ) {
employeeFormState.currentIndex = index; employeeFormState.currentIndex = index;
currentFromDataEmployee.employeeCheckup[index].statusSave = currentFromDataEmployee.employeeCheckup[
false; index
].statusSave = false;
} }
} }
" "
@ -2705,8 +2710,9 @@ const emptyCreateDialog = ref(false);
.statusSave === false .statusSave === false
) { ) {
employeeFormState.currentIndex = -1; employeeFormState.currentIndex = -1;
currentFromDataEmployee.employeeCheckup[index].statusSave = currentFromDataEmployee.employeeCheckup[
true; index
].statusSave = true;
employeeFormStore.resetFormDataEmployee(); employeeFormStore.resetFormDataEmployee();
} }
} }
@ -2719,7 +2725,6 @@ const emptyCreateDialog = ref(false);
" "
/> />
</template> </template>
<template v-if="employeeFormState.currentTab === 'workHistory'"> <template v-if="employeeFormState.currentTab === 'workHistory'">
<FormEmployeeWorkHistory <FormEmployeeWorkHistory
v-if="employeeFormState.currentTab === 'workHistory'" v-if="employeeFormState.currentTab === 'workHistory'"
@ -2746,8 +2751,8 @@ const emptyCreateDialog = ref(false);
@undo=" @undo="
(index) => { (index) => {
if ( if (
currentFromDataEmployee.employeeWork?.[index].statusSave === currentFromDataEmployee.employeeWork?.[index]
false .statusSave === false
) { ) {
employeeFormState.currentIndex = -1; employeeFormState.currentIndex = -1;
currentFromDataEmployee.employeeWork[index].statusSave = currentFromDataEmployee.employeeWork[index].statusSave =
@ -2768,7 +2773,6 @@ const emptyCreateDialog = ref(false);
" "
/> />
</template> </template>
<template v-if="employeeFormState.currentTab === 'other'"> <template v-if="employeeFormState.currentTab === 'other'">
<FormEmployeeOther <FormEmployeeOther
v-if="employeeFormState.currentTab === 'other'" v-if="employeeFormState.currentTab === 'other'"
@ -2776,7 +2780,9 @@ const emptyCreateDialog = ref(false);
prefix-id="drawer-employee" prefix-id="drawer-employee"
dense dense
outlined outlined
v-model:employee-other="currentFromDataEmployee.employeeOtherInfo" v-model:employee-other="
currentFromDataEmployee.employeeOtherInfo
"
@undo=" @undo="
() => { () => {
if ( if (
@ -2799,6 +2805,7 @@ const emptyCreateDialog = ref(false);
</div> </div>
</div> </div>
</div> </div>
</div>
</DrawerInfo> </DrawerInfo>
</template> </template>