refactor(02): edit btn save static
This commit is contained in:
Net
parent
18dc15f5e0
commit
968c1f72df
1 changed files with 158 additions and 111 deletions
|
|
@ -1552,6 +1552,7 @@ watch(
|
||||||
v-if="currentUser"
|
v-if="currentUser"
|
||||||
:category="$t('personnelTitle')"
|
:category="$t('personnelTitle')"
|
||||||
bg-on
|
bg-on
|
||||||
|
hide-action
|
||||||
:isEdit="infoDrawerEdit"
|
:isEdit="infoDrawerEdit"
|
||||||
:title="
|
:title="
|
||||||
$i18n.locale === 'en-US'
|
$i18n.locale === 'en-US'
|
||||||
|
|
@ -1559,15 +1560,8 @@ watch(
|
||||||
: `${currentUser.firstName} ${currentUser.lastName}`
|
: `${currentUser.firstName} ${currentUser.lastName}`
|
||||||
"
|
"
|
||||||
v-model:drawerOpen="infoDrawer"
|
v-model:drawerOpen="infoDrawer"
|
||||||
:deleteData="() => onDelete(infoPersonId)"
|
|
||||||
:submit="() => onSubmit()"
|
:submit="() => onSubmit()"
|
||||||
:close="() => onClose()"
|
:close="() => onClose()"
|
||||||
:undo="() => undo()"
|
|
||||||
:editData="
|
|
||||||
() => {
|
|
||||||
(infoDrawerEdit = true), (isImageEdit = true);
|
|
||||||
}
|
|
||||||
"
|
|
||||||
>
|
>
|
||||||
<InfoForm
|
<InfoForm
|
||||||
:readonly="!infoDrawerEdit"
|
:readonly="!infoDrawerEdit"
|
||||||
|
|
@ -1578,7 +1572,7 @@ watch(
|
||||||
v-model:subDistrictId="formData.subDistrictId"
|
v-model:subDistrictId="formData.subDistrictId"
|
||||||
v-model:zipCode="formData.zipCode"
|
v-model:zipCode="formData.zipCode"
|
||||||
>
|
>
|
||||||
<div class="q-mx-lg q-mt-lg">
|
<div class="q-px-lg q-pt-lg surface-2">
|
||||||
<ProfileBanner
|
<ProfileBanner
|
||||||
:active="formData.status !== 'INACTIVE'"
|
:active="formData.status !== 'INACTIVE'"
|
||||||
useToggle
|
useToggle
|
||||||
|
|
@ -1610,113 +1604,166 @@ watch(
|
||||||
<!-- ย้อนกลับ -->
|
<!-- ย้อนกลับ -->
|
||||||
|
|
||||||
<div
|
<div
|
||||||
class="col surface-1 q-ma-lg rounded bordered scroll row"
|
style="flex: 1; width: 100%; overflow-y: auto"
|
||||||
id="personnel-info"
|
class="surface-2 q-pa-lg"
|
||||||
|
id="drawer-user-form"
|
||||||
>
|
>
|
||||||
<div class="col">
|
<div class="col surface-1 full-height rounded bordered scroll row">
|
||||||
<div style="position: sticky; top: 0" class="q-pa-sm">
|
<div
|
||||||
<SideMenu
|
class="col"
|
||||||
:menu="[
|
style="height: 100%; max-height: 100; overflow-y: auto"
|
||||||
{
|
v-if="$q.screen.gt.sm"
|
||||||
name: $t('formDialogTitleInformation'),
|
>
|
||||||
anchor: 'info-information',
|
<div class="q-py-md q-pl-md q-pr-sm">
|
||||||
},
|
<SideMenu
|
||||||
{
|
:menu="[
|
||||||
name: $t('formDialogTitlePersonal'),
|
{
|
||||||
anchor: 'info-personal',
|
name: $t('formDialogTitleInformation'),
|
||||||
},
|
anchor: 'info-information',
|
||||||
{
|
},
|
||||||
name: $t('formDialogTitleAddressPersonnel'),
|
{
|
||||||
anchor: 'info-address',
|
name: $t('formDialogTitlePersonal'),
|
||||||
},
|
anchor: 'info-personal',
|
||||||
{
|
},
|
||||||
name: $t('formDialogTitleByType'),
|
{
|
||||||
anchor: 'info-work',
|
name: $t('formDialogTitleAddressPersonnel'),
|
||||||
},
|
anchor: 'info-address',
|
||||||
]"
|
},
|
||||||
background="transparent"
|
{
|
||||||
:active="{
|
name: $t('formDialogTitleByType'),
|
||||||
background: 'hsla(var(--blue-6-hsl) / .2)',
|
anchor: 'info-work',
|
||||||
foreground: 'var(--blue-6)',
|
},
|
||||||
}"
|
]"
|
||||||
scroll-element="#personnel-info"
|
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>
|
</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>
|
</div>
|
||||||
</InfoForm>
|
</InfoForm>
|
||||||
</DrawerInfo>
|
</DrawerInfo>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue