chamomind/jws-frontend
chamomind/jws-frontend
7
0
Fork 0
Code Issues Projects Releases Packages 1 Wiki Activity Actions

refactor(02): edit btn save static

Browse source
This commit is contained in:
Net 2024-08-19 09:47:50 +07:00
parent 18dc15f5e0
commit 968c1f72df
1 changed files with 158 additions and 111 deletions
Download patch file Download diff file Expand all files Collapse all files

269
src/pages/02_personnel-management/MainPage.vue
View file

@ -1552,6 +1552,7 @@ watch(
v-if="currentUser"
:category="$t('personnelTitle')"
bg-on
hide-action
:isEdit="infoDrawerEdit"
:title="
$i18n.locale === 'en-US'
@ -1559,15 +1560,8 @@ watch(
: `${currentUser.firstName} ${currentUser.lastName}`
"
v-model:drawerOpen="infoDrawer"
:deleteData="() => onDelete(infoPersonId)"
:submit="() => onSubmit()"
:close="() => onClose()"
:undo="() => undo()"
:editData="
() => {
(infoDrawerEdit = true), (isImageEdit = true);
}
"
>
<InfoForm
:readonly="!infoDrawerEdit"
@ -1578,7 +1572,7 @@ watch(
v-model:subDistrictId="formData.subDistrictId"
v-model:zipCode="formData.zipCode"
>
<div class="q-mx-lg q-mt-lg">
<div class="q-px-lg q-pt-lg surface-2">
<ProfileBanner
:active="formData.status !== 'INACTIVE'"
useToggle
@ -1610,113 +1604,166 @@ watch(
<!-- ย้อนกลับ -->
<div
class="col surface-1 q-ma-lg rounded bordered scroll row"
id="personnel-info"
style="flex: 1; width: 100%; overflow-y: auto"
class="surface-2 q-pa-lg"
id="drawer-user-form"
>
<div class="col">
<div style="position: sticky; top: 0" class="q-pa-sm">
<SideMenu
:menu="[
{
name: $t('formDialogTitleInformation'),
anchor: 'info-information',
},
{
name: $t('formDialogTitlePersonal'),
anchor: 'info-personal',
},
{
name: $t('formDialogTitleAddressPersonnel'),
anchor: 'info-address',
},
{
name: $t('formDialogTitleByType'),
anchor: 'info-work',
},
]"
background="transparent"
:active="{
background: 'hsla(var(--blue-6-hsl) / .2)',
foreground: 'var(--blue-6)',
}"
scroll-element="#personnel-info"
<div class="col surface-1 full-height rounded bordered scroll row">
<div
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">
<SideMenu
:menu="[
{
name: $t('formDialogTitleInformation'),
anchor: 'info-information',
},
{
name: $t('formDialogTitlePersonal'),
anchor: 'info-personal',
},
{
name: $t('formDialogTitleAddressPersonnel'),
anchor: 'info-address',
},
{
name: $t('formDialogTitleByType'),
anchor: 'info-work',
},
]"
background="transparent"
:active="{
background: 'hsla(var(--blue-6-hsl) / .2)',
foreground: 'var(--blue-6)',
}"
scroll-element="#user-form-content"
/>
</div>
</div>
<div
class="col-12 col-md-10 q-py-md q-pr-md q-pl-sm"
id="user-form-content"
style="height: 100%; max-height: 100; overflow-y: auto"
>
<div
class="q-pt-sm row"
style="position: absolute; z-index: 999; right: 4%"
>
<UndoButton
v-if="infoDrawerEdit"
id="btn-info-basic-undo"
icon-only
@click="
() => {
undo();
}
"
type="button"
/>
<SaveButton
v-if="infoDrawerEdit"
id="btn-info-basic-save"
icon-only
type="submit"
/>
<EditButton
v-if="!infoDrawerEdit"
id="btn-info-basic-edit"
icon-only
@click="
() => {
infoDrawerEdit = true;
isImageEdit = true;
}
"
type="button"
/>
<DeleteButton
v-if="!infoDrawerEdit"
id="btn-info-basic-delete"
icon-only
@click="() => onDelete(infoPersonId)"
type="button"
/>
</div>
<FormInformation
id="info-information"
v-model:hq-id="hqId"
v-model:br-id="brId"
v-model:user-type="formData.userType"
v-model:user-role="formData.userRole"
v-model:username="formData.username"
v-model:user-code="userCode"
dense
outlined
separator
:title="'formDialogTitleInformation'"
:readonly="!infoDrawerEdit"
:usernameReadonly="isEdit"
/>
<FormPerson
id="info-personal"
v-model:first-name="formData.firstName"
v-model:last-name="formData.lastName"
v-model:mid-name="formData.middleName"
v-model:mid-name-en="formData.middleNameEN"
v-model:prefix-name="formData.namePrefix"
v-model:prefix-name-en="formData.namePrefix"
v-model:first-name-en="formData.firstNameEN"
v-model:last-name-en="formData.lastNameEN"
v-model:telephone-no="formData.telephoneNo"
v-model:email="formData.email"
v-model:gender="formData.gender"
v-model:birth-date="formData.birthDate"
:title="'formDialogTitlePersonal'"
prefix-id="drawer-info-personnel"
dense
outlined
separator
:readonly="!infoDrawerEdit"
/>
<AddressForm
id="info-address"
v-model:address="formData.address"
v-model:addressEN="formData.addressEN"
v-model:provinceId="formData.provinceId"
v-model:districtId="formData.districtId"
v-model:subDistrictId="formData.subDistrictId"
v-model:zipCode="formData.zipCode"
:readonly="!infoDrawerEdit"
prefix-id="drawer-info-personnel"
dense
/>
<FormByType
dense
outlined
separator
id="info-work"
:readonly="!infoDrawerEdit"
v-model:userType="formData.userType"
v-model:registrationNo="formData.registrationNo"
v-model:startDate="formData.startDate"
v-model:retireDate="formData.retireDate"
v-model:responsibleArea="formData.responsibleArea"
v-model:discountCondition="formData.discountCondition"
v-model:sourceNationality="formData.sourceNationality"
v-model:importNationality="formData.importNationality"
v-model:trainingPlace="formData.trainingPlace"
v-model:checkpoint="formData.checkpoint"
v-model:checkpointEN="formData.checkpointEN"
v-model:agencyFile="agencyFile"
v-model:agencyFileList="agencyFileList"
v-model:userId="userId"
/>
</div>
</div>
<div class="col-10 q-pa-md q-gutter-y-xl">
<FormInformation
id="info-information"
v-model:hq-id="hqId"
v-model:br-id="brId"
v-model:user-type="formData.userType"
v-model:user-role="formData.userRole"
v-model:username="formData.username"
v-model:user-code="userCode"
dense
outlined
separator
:title="'formDialogTitleInformation'"
:readonly="!infoDrawerEdit"
:usernameReadonly="isEdit"
/>
<FormPerson
id="info-personal"
v-model:first-name="formData.firstName"
v-model:last-name="formData.lastName"
v-model:mid-name="formData.middleName"
v-model:mid-name-en="formData.middleNameEN"
v-model:prefix-name="formData.namePrefix"
v-model:prefix-name-en="formData.namePrefix"
v-model:first-name-en="formData.firstNameEN"
v-model:last-name-en="formData.lastNameEN"
v-model:telephone-no="formData.telephoneNo"
v-model:email="formData.email"
v-model:gender="formData.gender"
v-model:birth-date="formData.birthDate"
:title="'formDialogTitlePersonal'"
prefix-id="drawer-info-personnel"
dense
outlined
separator
:readonly="!infoDrawerEdit"
/>
<AddressForm
id="info-address"
v-model:address="formData.address"
v-model:addressEN="formData.addressEN"
v-model:provinceId="formData.provinceId"
v-model:districtId="formData.districtId"
v-model:subDistrictId="formData.subDistrictId"
v-model:zipCode="formData.zipCode"
:readonly="!infoDrawerEdit"
prefix-id="drawer-info-personnel"
dense
/>
<FormByType
dense
outlined
separator
id="info-work"
:readonly="!infoDrawerEdit"
v-model:userType="formData.userType"
v-model:registrationNo="formData.registrationNo"
v-model:startDate="formData.startDate"
v-model:retireDate="formData.retireDate"
v-model:responsibleArea="formData.responsibleArea"
v-model:discountCondition="formData.discountCondition"
v-model:sourceNationality="formData.sourceNationality"
v-model:importNationality="formData.importNationality"
v-model:trainingPlace="formData.trainingPlace"
v-model:checkpoint="formData.checkpoint"
v-model:checkpointEN="formData.checkpointEN"
v-model:agencyFile="agencyFile"
v-model:agencyFileList="agencyFileList"
v-model:userId="userId"
/>
</div>
</div>
</InfoForm>
</DrawerInfo>