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