feat: move action to inside form
This commit is contained in:
Methapon Metanipat
parent
968c1f72df
commit
bfe84d0c64
1 changed files with 136 additions and 101 deletions
|
|
@ -18,7 +18,7 @@ import {
|
|||
import { Status } from 'stores/types';
|
||||
|
||||
import useUtilsStore, { dialog, baseUrl } from 'stores/utils';
|
||||
import AddButton from 'components/AddButton.vue';
|
||||
import EmptyAddButton from 'components/AddButton.vue';
|
||||
import TooltipComponent from 'components/TooltipComponent.vue';
|
||||
import StatCard from 'components/StatCardComponent.vue';
|
||||
import BranchCard from 'components/01_branch-management/BranchCard.vue';
|
||||
|
|
@ -38,6 +38,12 @@ import FormBank from 'components/01_branch-management/FormBank.vue';
|
|||
import ToggleButton from 'src/components/button/ToggleButton.vue';
|
||||
import FormBranchAdmin from 'src/components/01_branch-management/FormBranchAdmin.vue';
|
||||
import { User } from 'src/stores/user/types';
|
||||
import {
|
||||
EditButton,
|
||||
DeleteButton,
|
||||
SaveButton,
|
||||
UndoButton,
|
||||
} from 'components/button';
|
||||
|
||||
const $q = useQuasar();
|
||||
const { t } = useI18n();
|
||||
|
|
@ -754,7 +760,7 @@ watch(currentHq, () => {
|
|||
</div>
|
||||
|
||||
<div class="col flex items-center justify-center">
|
||||
<AddButton
|
||||
<EmptyAddButton
|
||||
label="branchAdd"
|
||||
@trigger="() => triggerCreate('headOffice')"
|
||||
/>
|
||||
|
|
@ -1769,6 +1775,7 @@ watch(currentHq, () => {
|
|||
() => ((modalDrawer = false), flowStore.rotate(), (isImageEdit = false))
|
||||
"
|
||||
:statusBranch="formData.status"
|
||||
hide-action
|
||||
>
|
||||
<InfoForm>
|
||||
<div class="q-mx-lg q-mt-lg">
|
||||
|
|
@ -1811,12 +1818,47 @@ watch(currentHq, () => {
|
|||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="col surface-1 q-ma-lg rounded bordered scroll row"
|
||||
id="branch-info"
|
||||
>
|
||||
<div class="col">
|
||||
<div style="position: sticky; top: 0" class="q-pa-sm">
|
||||
<div class="col q-pa-lg">
|
||||
<div
|
||||
style="overflow-y: auto"
|
||||
class="row full-width full-height surface-1 rounded relative-position"
|
||||
>
|
||||
<div
|
||||
class="q-py-md q-px-lg"
|
||||
style="position: absolute; z-index: 99999; top: 0; right: 0"
|
||||
>
|
||||
<div class="surface-1 row rounded">
|
||||
<UndoButton
|
||||
v-if="formType === 'edit'"
|
||||
icon-only
|
||||
@click="undo()"
|
||||
type="button"
|
||||
/>
|
||||
<SaveButton
|
||||
v-if="formType === 'edit'"
|
||||
id="btn-info-basic-save"
|
||||
icon-only
|
||||
type="submit"
|
||||
/>
|
||||
<EditButton
|
||||
v-if="formType !== 'edit'"
|
||||
id="btn-info-basic-edit"
|
||||
icon-only
|
||||
@click="drawerEdit()"
|
||||
type="button"
|
||||
/>
|
||||
<DeleteButton
|
||||
v-if="formType !== 'edit'"
|
||||
id="btn-info-basic-delete"
|
||||
icon-only
|
||||
@click="triggerDelete(currentEdit.id)"
|
||||
type="button"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="col full-height rounded scroll row q-py-md q-pl-md q-pr-sm"
|
||||
>
|
||||
<SideMenu
|
||||
:menu="[
|
||||
{
|
||||
|
|
@ -1852,99 +1894,92 @@ watch(currentHq, () => {
|
|||
scroll-element="#branch-info"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-10 q-pa-md q-gutter-y-xl">
|
||||
<FormBranchInformation
|
||||
id="info-information"
|
||||
v-model:abbreviation="formData.code"
|
||||
v-model:code="formData.codeHeadOffice"
|
||||
v-model:code-sub-branch="currentEdit.code"
|
||||
v-model:taxNo="formData.taxNo"
|
||||
v-model:name="formData.name"
|
||||
v-model:nameEN="formData.nameEN"
|
||||
v-model:type-branch="formTypeBranch"
|
||||
:separator="true"
|
||||
:dense="true"
|
||||
:outlined="true"
|
||||
:readonly="formType === 'view'"
|
||||
view
|
||||
title="formDialogTitleInformation"
|
||||
/>
|
||||
<FormBranchContact
|
||||
id="info-contact"
|
||||
title="formDialogTitleContact"
|
||||
v-model:telephone-no="formData.telephoneNo"
|
||||
v-model:contact="formData.contact"
|
||||
v-model:email="formData.email"
|
||||
v-model:contact-name="formData.contactName"
|
||||
v-model:line-id="formData.lineId"
|
||||
:readonly="formType === 'view'"
|
||||
:view="formType === 'view'"
|
||||
:separator="true"
|
||||
:dense="true"
|
||||
:outlined="true"
|
||||
/>
|
||||
<AddressForm
|
||||
id="info-address"
|
||||
dense
|
||||
outlined
|
||||
separator
|
||||
prefix-id="default"
|
||||
:title="
|
||||
$t(
|
||||
`${!formData.headOfficeId ? 'formDialogTitleAddress' : 'branchLabelAddress'}`,
|
||||
)
|
||||
"
|
||||
:readonly="formType === 'view'"
|
||||
v-model:address="formData.address"
|
||||
v-model:addressEN="formData.addressEN"
|
||||
v-model:province-id="formData.provinceId"
|
||||
v-model:district-id="formData.districtId"
|
||||
v-model:sub-district-id="formData.subDistrictId"
|
||||
v-model:zip-code="formData.zipCode"
|
||||
/>
|
||||
<FormLocation
|
||||
id="info-location"
|
||||
title="formDialogTitleLocation"
|
||||
v-model:latitude="formData.latitude"
|
||||
v-model:longitude="formData.longitude"
|
||||
:readonly="formType === 'view'"
|
||||
:separator="true"
|
||||
/>
|
||||
<FormQr
|
||||
id="info-qr"
|
||||
:readonly="formType === 'view'"
|
||||
title="QR Code"
|
||||
:separator="true"
|
||||
:qr="qrCodeimageUrl"
|
||||
@upload="
|
||||
() => {
|
||||
inputFile.click();
|
||||
}
|
||||
"
|
||||
/>
|
||||
<FormBank
|
||||
id="info-bank"
|
||||
:readonly="formType === 'view'"
|
||||
title="bankBook"
|
||||
dense
|
||||
v-model:bank-book-list="formBankBook"
|
||||
/>
|
||||
<FormBranchAdmin
|
||||
id="info-branch-admin-view"
|
||||
:admin="currentBranchAdmin"
|
||||
/>
|
||||
<!-- <FormImage
|
||||
@upload="
|
||||
() => {
|
||||
inputFileImg.click();
|
||||
}
|
||||
"
|
||||
v-model:image="imageUrl"
|
||||
:title="$t('formDialogTitleImg')"
|
||||
:readonly="formType === 'view'"
|
||||
/> -->
|
||||
<div
|
||||
class="col-12 col-md-10 q-py-md q-pr-md q-pl-sm full-height q-gutter-y-xl"
|
||||
id="branch-info"
|
||||
style="overflow-y: auto"
|
||||
>
|
||||
<FormBranchInformation
|
||||
id="info-information"
|
||||
v-model:abbreviation="formData.code"
|
||||
v-model:code="formData.codeHeadOffice"
|
||||
v-model:code-sub-branch="currentEdit.code"
|
||||
v-model:taxNo="formData.taxNo"
|
||||
v-model:name="formData.name"
|
||||
v-model:nameEN="formData.nameEN"
|
||||
v-model:type-branch="formTypeBranch"
|
||||
:separator="true"
|
||||
:dense="true"
|
||||
:outlined="true"
|
||||
:readonly="formType === 'view'"
|
||||
view
|
||||
title="formDialogTitleInformation"
|
||||
/>
|
||||
<FormBranchContact
|
||||
id="info-contact"
|
||||
title="formDialogTitleContact"
|
||||
v-model:telephone-no="formData.telephoneNo"
|
||||
v-model:contact="formData.contact"
|
||||
v-model:email="formData.email"
|
||||
v-model:contact-name="formData.contactName"
|
||||
v-model:line-id="formData.lineId"
|
||||
:readonly="formType === 'view'"
|
||||
:view="formType === 'view'"
|
||||
:separator="true"
|
||||
:dense="true"
|
||||
:outlined="true"
|
||||
/>
|
||||
<AddressForm
|
||||
id="info-address"
|
||||
dense
|
||||
outlined
|
||||
separator
|
||||
prefix-id="default"
|
||||
:title="
|
||||
$t(
|
||||
`${!formData.headOfficeId ? 'formDialogTitleAddress' : 'branchLabelAddress'}`,
|
||||
)
|
||||
"
|
||||
:readonly="formType === 'view'"
|
||||
v-model:address="formData.address"
|
||||
v-model:addressEN="formData.addressEN"
|
||||
v-model:province-id="formData.provinceId"
|
||||
v-model:district-id="formData.districtId"
|
||||
v-model:sub-district-id="formData.subDistrictId"
|
||||
v-model:zip-code="formData.zipCode"
|
||||
/>
|
||||
<FormLocation
|
||||
id="info-location"
|
||||
title="formDialogTitleLocation"
|
||||
v-model:latitude="formData.latitude"
|
||||
v-model:longitude="formData.longitude"
|
||||
:readonly="formType === 'view'"
|
||||
:separator="true"
|
||||
/>
|
||||
<FormQr
|
||||
id="info-qr"
|
||||
:readonly="formType === 'view'"
|
||||
title="QR Code"
|
||||
:separator="true"
|
||||
:qr="qrCodeimageUrl"
|
||||
@upload="
|
||||
() => {
|
||||
inputFile.click();
|
||||
}
|
||||
"
|
||||
/>
|
||||
<FormBank
|
||||
id="info-bank"
|
||||
:readonly="formType === 'view'"
|
||||
title="bankBook"
|
||||
dense
|
||||
v-model:bank-book-list="formBankBook"
|
||||
/>
|
||||
<FormBranchAdmin
|
||||
id="info-branch-admin-view"
|
||||
:admin="currentBranchAdmin"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</InfoForm>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue