refactor: edit uploadfile
This commit is contained in:
Net
parent
633fc38160
commit
7a02cb19d7
2 changed files with 508 additions and 642 deletions
|
|
@ -792,6 +792,7 @@ async function onSubmit(submitSelectedItem?: boolean) {
|
|||
},
|
||||
formBankBook.value,
|
||||
onCreateImageList.value,
|
||||
currentAttachmentList.value,
|
||||
);
|
||||
|
||||
if (res) {
|
||||
|
|
@ -1731,31 +1732,6 @@ watch(currentHq, () => {
|
|||
}-hsl)/${imageUrl ? '0' : '0.15'})`"
|
||||
:menu="formMenuIcon"
|
||||
v-model:current-tab="currentTab"
|
||||
:tabs-list="
|
||||
[
|
||||
{
|
||||
name: 'main',
|
||||
label: 'customerBranch.tab.main',
|
||||
},
|
||||
{
|
||||
name: 'attachment',
|
||||
label: 'customerBranch.tab.attachment',
|
||||
},
|
||||
{
|
||||
name: 'remark',
|
||||
label: 'customerBranch.tab.remark',
|
||||
},
|
||||
].filter((v) => {
|
||||
if (!currentId && v.name === 'attachment') {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (!currentId && v.name === 'remark') {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
})
|
||||
"
|
||||
@view="
|
||||
() => {
|
||||
imageDialog = true;
|
||||
|
|
@ -1824,52 +1800,44 @@ watch(currentHq, () => {
|
|||
v-if="$q.screen.gt.sm"
|
||||
>
|
||||
<SideMenu
|
||||
:menu="
|
||||
:menu="[
|
||||
{
|
||||
main: [
|
||||
{
|
||||
name: $t('form.field.basicInformation'),
|
||||
anchor: 'form-information',
|
||||
},
|
||||
{
|
||||
name: $t('branch.form.group.contact'),
|
||||
anchor: 'form-contact',
|
||||
},
|
||||
{
|
||||
name: $t('form.address'),
|
||||
anchor: 'form-address',
|
||||
},
|
||||
{
|
||||
name: $t('branch.form.group.location'),
|
||||
anchor: 'form-location',
|
||||
},
|
||||
{
|
||||
name: 'QR Code',
|
||||
anchor: 'form-qr',
|
||||
},
|
||||
{
|
||||
name: $t('branch.form.group.bankAccount'),
|
||||
anchor: 'form-bank',
|
||||
},
|
||||
{
|
||||
name: $t('branch.form.group.admin'),
|
||||
anchor: 'form-branch-admin-view',
|
||||
},
|
||||
],
|
||||
attachment: [
|
||||
{
|
||||
name: $t('customerBranch.tab.attachment'),
|
||||
anchor: 'form-attachment',
|
||||
},
|
||||
],
|
||||
remark: [
|
||||
{
|
||||
name: $t('customerBranch.tab.remark'),
|
||||
anchor: 'form-remark',
|
||||
},
|
||||
],
|
||||
}[currentTab] || []
|
||||
"
|
||||
name: $t('form.field.basicInformation'),
|
||||
anchor: 'form-information',
|
||||
},
|
||||
{
|
||||
name: $t('branch.form.group.contact'),
|
||||
anchor: 'form-contact',
|
||||
},
|
||||
{
|
||||
name: $t('form.address'),
|
||||
anchor: 'form-address',
|
||||
},
|
||||
{
|
||||
name: $t('branch.form.group.location'),
|
||||
anchor: 'form-location',
|
||||
},
|
||||
{
|
||||
name: 'QR Code',
|
||||
anchor: 'form-qr',
|
||||
},
|
||||
{
|
||||
name: $t('branch.form.group.bankAccount'),
|
||||
anchor: 'form-bank',
|
||||
},
|
||||
{
|
||||
name: $t('branch.form.group.admin'),
|
||||
anchor: 'form-branch-admin-view',
|
||||
},
|
||||
{
|
||||
name: $t('customerBranch.tab.attachment'),
|
||||
anchor: 'form-attachment',
|
||||
},
|
||||
{
|
||||
name: $t('customerBranch.tab.remark'),
|
||||
anchor: 'form-remark',
|
||||
},
|
||||
]"
|
||||
background="transparent"
|
||||
:active="{
|
||||
background: 'hsla(var(--blue-6-hsl) / .2)',
|
||||
|
|
@ -1885,163 +1853,144 @@ watch(currentHq, () => {
|
|||
id="branch-form"
|
||||
style="overflow-y: auto"
|
||||
>
|
||||
<template v-if="currentTab === 'main'">
|
||||
<FormBranchInformation
|
||||
id="form-information"
|
||||
v-model:branchCount="formLastSubBranch"
|
||||
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"
|
||||
v-model:permit-no="formData.permitNo"
|
||||
v-model:permit-issue-date="formData.permitIssueDate"
|
||||
v-model:permit-expire-date="formData.permitExpireDate"
|
||||
:separator="true"
|
||||
:dense="true"
|
||||
:outlined="true"
|
||||
:readonly="formType === 'view'"
|
||||
title="form.field.basicInformation"
|
||||
:view="isSubCreate || !!currentId"
|
||||
onCreate
|
||||
/>
|
||||
<FormBranchContact
|
||||
id="form-contact"
|
||||
v-model:type-branch="formTypeBranch"
|
||||
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"
|
||||
v-model:web-url="formData.webUrl"
|
||||
:separator="true"
|
||||
:readonly="formType === 'view'"
|
||||
title="branch.form.group.contact"
|
||||
:dense="true"
|
||||
:outlined="true"
|
||||
/>
|
||||
<FormBranchInformation
|
||||
id="form-information"
|
||||
v-model:branchCount="formLastSubBranch"
|
||||
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"
|
||||
v-model:permit-no="formData.permitNo"
|
||||
v-model:permit-issue-date="formData.permitIssueDate"
|
||||
v-model:permit-expire-date="formData.permitExpireDate"
|
||||
:separator="true"
|
||||
:dense="true"
|
||||
:outlined="true"
|
||||
:readonly="formType === 'view'"
|
||||
title="form.field.basicInformation"
|
||||
:view="isSubCreate || !!currentId"
|
||||
onCreate
|
||||
/>
|
||||
<FormBranchContact
|
||||
id="form-contact"
|
||||
v-model:type-branch="formTypeBranch"
|
||||
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"
|
||||
v-model:web-url="formData.webUrl"
|
||||
:separator="true"
|
||||
:readonly="formType === 'view'"
|
||||
title="branch.form.group.contact"
|
||||
:dense="true"
|
||||
:outlined="true"
|
||||
/>
|
||||
|
||||
<AddressForm
|
||||
id="form-address"
|
||||
dense
|
||||
outlined
|
||||
separator
|
||||
prefix-id="default"
|
||||
:title="'form.address'"
|
||||
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:moo="formData.moo"
|
||||
v-model:mooEN="formData.mooEN"
|
||||
v-model:soi="formData.soi"
|
||||
v-model:soiEN="formData.soiEN"
|
||||
v-model:street="formData.street"
|
||||
v-model:streetEN="formData.streetEN"
|
||||
:readonly="formType === 'view'"
|
||||
/>
|
||||
<FormLocation
|
||||
id="form-location"
|
||||
:readonly="formType === 'view'"
|
||||
:separator="true"
|
||||
v-model:latitude="formData.latitude"
|
||||
v-model:longitude="formData.longitude"
|
||||
outlined
|
||||
dense
|
||||
title="branch.form.group.location"
|
||||
/>
|
||||
<FormQr
|
||||
id="form-qr"
|
||||
title="QR Code"
|
||||
:separator="true"
|
||||
:qr="qrCodeimageUrl"
|
||||
:readonly="formType === 'view'"
|
||||
@view-qr="
|
||||
() => {
|
||||
triggerEditQrCodeLine();
|
||||
}
|
||||
"
|
||||
@edit-qr="() => refQrCodeUpload && refQrCodeUpload.browse()"
|
||||
/>
|
||||
<FormBank
|
||||
id="form-bank"
|
||||
:readonly="formType === 'view'"
|
||||
title="branch.form.group.bankAccount"
|
||||
dense
|
||||
v-model:bank-book-list="formBankBook"
|
||||
@view-qr="
|
||||
(i) => {
|
||||
currentIndexQrCodeBank = i;
|
||||
triggerEditQrCodeBank();
|
||||
}
|
||||
"
|
||||
@edit-qr="
|
||||
(i) => {
|
||||
currentIndexQrCodeBank = i;
|
||||
refQrCodeUpload && refQrCodeUpload.browse();
|
||||
}
|
||||
"
|
||||
/>
|
||||
<FormBranchAdmin
|
||||
id="form-branch-admin-view"
|
||||
:admin="currentBranchAdmin"
|
||||
/>
|
||||
</template>
|
||||
<AddressForm
|
||||
id="form-address"
|
||||
dense
|
||||
outlined
|
||||
separator
|
||||
prefix-id="default"
|
||||
:title="'form.address'"
|
||||
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:moo="formData.moo"
|
||||
v-model:mooEN="formData.mooEN"
|
||||
v-model:soi="formData.soi"
|
||||
v-model:soiEN="formData.soiEN"
|
||||
v-model:street="formData.street"
|
||||
v-model:streetEN="formData.streetEN"
|
||||
:readonly="formType === 'view'"
|
||||
/>
|
||||
<FormLocation
|
||||
id="form-location"
|
||||
:readonly="formType === 'view'"
|
||||
:separator="true"
|
||||
v-model:latitude="formData.latitude"
|
||||
v-model:longitude="formData.longitude"
|
||||
outlined
|
||||
dense
|
||||
title="branch.form.group.location"
|
||||
/>
|
||||
<FormQr
|
||||
id="form-qr"
|
||||
title="QR Code"
|
||||
:separator="true"
|
||||
:qr="qrCodeimageUrl"
|
||||
:readonly="formType === 'view'"
|
||||
@view-qr="
|
||||
() => {
|
||||
triggerEditQrCodeLine();
|
||||
}
|
||||
"
|
||||
@edit-qr="() => refQrCodeUpload && refQrCodeUpload.browse()"
|
||||
/>
|
||||
<FormBank
|
||||
id="form-bank"
|
||||
:readonly="formType === 'view'"
|
||||
title="branch.form.group.bankAccount"
|
||||
dense
|
||||
v-model:bank-book-list="formBankBook"
|
||||
@view-qr="
|
||||
(i) => {
|
||||
currentIndexQrCodeBank = i;
|
||||
triggerEditQrCodeBank();
|
||||
}
|
||||
"
|
||||
@edit-qr="
|
||||
(i) => {
|
||||
currentIndexQrCodeBank = i;
|
||||
refQrCodeUpload && refQrCodeUpload.browse();
|
||||
}
|
||||
"
|
||||
/>
|
||||
<FormBranchAdmin
|
||||
id="form-branch-admin-view"
|
||||
:admin="currentBranchAdmin"
|
||||
class="q-mb-xl"
|
||||
/>
|
||||
|
||||
<template v-if="currentTab === 'attachment'">
|
||||
<UploadFile
|
||||
branch
|
||||
:file="currentAttachmentList"
|
||||
:tree-file="
|
||||
Object.values(
|
||||
currentAttachmentList.reduce<
|
||||
Record<string, { label: string; file: { label: string }[] }>
|
||||
>((a, b) => {
|
||||
if (b.name && !a[b.name]) {
|
||||
a[b.name] = {
|
||||
label: b.name,
|
||||
file: [],
|
||||
};
|
||||
<UploadFile
|
||||
id="form-attachment"
|
||||
class="q-mb-xl"
|
||||
:auto-save="currentId !== ''"
|
||||
branch
|
||||
v-model="currentAttachmentList"
|
||||
@save="
|
||||
async (_group, file) => {
|
||||
if (file) {
|
||||
attachmentList.push(file);
|
||||
|
||||
await branchStore.putAttachment(currentId, attachmentList);
|
||||
}
|
||||
}
|
||||
"
|
||||
@deleteFile="
|
||||
async (filename) => {
|
||||
const res = await branchStore.deleteByIdAttachment(
|
||||
currentId,
|
||||
filename,
|
||||
);
|
||||
|
||||
if (res) {
|
||||
currentAttachmentList = currentAttachmentList.filter((v) => {
|
||||
if (v.name === filename) {
|
||||
return false;
|
||||
}
|
||||
return a;
|
||||
}, {}) || {},
|
||||
)
|
||||
"
|
||||
@save="
|
||||
async (_group, file) => {
|
||||
if (file) {
|
||||
attachmentList.push(file);
|
||||
|
||||
await branchStore.putAttachment(currentId, attachmentList);
|
||||
}
|
||||
return true;
|
||||
});
|
||||
}
|
||||
"
|
||||
@deleteFile="
|
||||
async (filename) => {
|
||||
const res = await branchStore.deleteByIdAttachment(
|
||||
currentId,
|
||||
filename,
|
||||
);
|
||||
|
||||
if (res) {
|
||||
currentAttachmentList = currentAttachmentList.filter(
|
||||
(v) => {
|
||||
if (v.name === filename) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
},
|
||||
);
|
||||
}
|
||||
}
|
||||
"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<template v-if="currentTab === 'remark'"></template>
|
||||
}
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -2083,20 +2032,6 @@ watch(currentHq, () => {
|
|||
:caption="formData.code"
|
||||
icon="mdi-office-building-outline"
|
||||
v-model:current-tab="currentTab"
|
||||
:tabs-list="[
|
||||
{
|
||||
name: 'main',
|
||||
label: 'customerBranch.tab.main',
|
||||
},
|
||||
{
|
||||
name: 'attachment',
|
||||
label: 'customerBranch.tab.attachment',
|
||||
},
|
||||
{
|
||||
name: 'remark',
|
||||
label: 'customerBranch.tab.remark',
|
||||
},
|
||||
]"
|
||||
:color="`hsla(var(${
|
||||
formTypeBranch === 'headOffice'
|
||||
? '--pink-6'
|
||||
|
|
@ -2134,7 +2069,7 @@ watch(currentHq, () => {
|
|||
formType = 'view';
|
||||
}
|
||||
|
||||
await fetchList({ pageSize: 99999 });
|
||||
await fetchList({ tree: true, pageSize: 99999 });
|
||||
}
|
||||
"
|
||||
:menu="formMenuIcon"
|
||||
|
|
@ -2147,7 +2082,6 @@ watch(currentHq, () => {
|
|||
class="row full-width full-height surface-1 rounded relative-position"
|
||||
>
|
||||
<div
|
||||
v-if="currentTab === 'main'"
|
||||
class="q-py-md q-px-lg"
|
||||
style="position: absolute; z-index: 99999; top: 0; right: 0"
|
||||
>
|
||||
|
|
@ -2188,52 +2122,44 @@ watch(currentHq, () => {
|
|||
class="col full-height rounded scroll row q-py-md q-pl-md q-pr-sm"
|
||||
>
|
||||
<SideMenu
|
||||
:menu="
|
||||
:menu="[
|
||||
{
|
||||
main: [
|
||||
{
|
||||
name: $t('form.field.basicInformation'),
|
||||
anchor: 'info-information',
|
||||
},
|
||||
{
|
||||
name: $t('branch.form.group.contact'),
|
||||
anchor: 'info-contact',
|
||||
},
|
||||
{
|
||||
name: $t('form.address'),
|
||||
anchor: 'info-address',
|
||||
},
|
||||
{
|
||||
name: $t('branch.form.group.location'),
|
||||
anchor: 'info-location',
|
||||
},
|
||||
{
|
||||
name: 'QR Code',
|
||||
anchor: 'info-qr',
|
||||
},
|
||||
{
|
||||
name: $t('branch.form.group.bankAccount'),
|
||||
anchor: 'info-bank',
|
||||
},
|
||||
{
|
||||
name: $t('branch.form.group.admin'),
|
||||
anchor: 'info-branch-admin-view',
|
||||
},
|
||||
],
|
||||
attachment: [
|
||||
{
|
||||
name: $t('customerBranch.tab.attachment'),
|
||||
anchor: 'info-attachment',
|
||||
},
|
||||
],
|
||||
remark: [
|
||||
{
|
||||
name: $t('customerBranch.tab.remark'),
|
||||
anchor: 'info-remark',
|
||||
},
|
||||
],
|
||||
}[currentTab] || []
|
||||
"
|
||||
name: $t('form.field.basicInformation'),
|
||||
anchor: 'info-information',
|
||||
},
|
||||
{
|
||||
name: $t('branch.form.group.contact'),
|
||||
anchor: 'info-contact',
|
||||
},
|
||||
{
|
||||
name: $t('form.address'),
|
||||
anchor: 'info-address',
|
||||
},
|
||||
{
|
||||
name: $t('branch.form.group.location'),
|
||||
anchor: 'info-location',
|
||||
},
|
||||
{
|
||||
name: 'QR Code',
|
||||
anchor: 'info-qr',
|
||||
},
|
||||
{
|
||||
name: $t('branch.form.group.bankAccount'),
|
||||
anchor: 'info-bank',
|
||||
},
|
||||
{
|
||||
name: $t('branch.form.group.admin'),
|
||||
anchor: 'info-branch-admin-view',
|
||||
},
|
||||
{
|
||||
name: $t('customerBranch.tab.attachment'),
|
||||
anchor: 'info-attachment',
|
||||
},
|
||||
{
|
||||
name: $t('customerBranch.tab.remark'),
|
||||
anchor: 'info-remark',
|
||||
},
|
||||
]"
|
||||
background="transparent"
|
||||
:active="{
|
||||
background: 'hsla(var(--blue-6-hsl) / .2)',
|
||||
|
|
@ -2248,175 +2174,165 @@ watch(currentHq, () => {
|
|||
id="branch-info"
|
||||
style="overflow-y: auto"
|
||||
>
|
||||
<template v-if="currentTab === 'main'">
|
||||
<FormBranchInformation
|
||||
id="info-information"
|
||||
v-model:virtual="formData.virtual"
|
||||
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"
|
||||
v-model:permit-no="formData.permitNo"
|
||||
v-model:permit-issue-date="formData.permitIssueDate"
|
||||
v-model:permit-expire-date="formData.permitExpireDate"
|
||||
:separator="true"
|
||||
:dense="true"
|
||||
:outlined="true"
|
||||
:readonly="formType === 'view'"
|
||||
view
|
||||
title="form.field.basicInformation"
|
||||
class="q-mb-xl"
|
||||
/>
|
||||
<FormBranchContact
|
||||
id="info-contact"
|
||||
title="branch.form.group.contact"
|
||||
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"
|
||||
v-model:web-url="formData.webUrl"
|
||||
:readonly="formType === 'view'"
|
||||
:view="formType === 'view'"
|
||||
:separator="true"
|
||||
:dense="true"
|
||||
:outlined="true"
|
||||
class="q-mb-xl"
|
||||
/>
|
||||
<AddressForm
|
||||
id="info-address"
|
||||
dense
|
||||
outlined
|
||||
separator
|
||||
prefix-id="default"
|
||||
:title="'form.address'"
|
||||
: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:moo="formData.moo"
|
||||
v-model:mooEN="formData.mooEN"
|
||||
v-model:soi="formData.soi"
|
||||
v-model:soiEN="formData.soiEN"
|
||||
v-model:street="formData.street"
|
||||
v-model:streetEN="formData.streetEN"
|
||||
v-model:zip-code="formData.zipCode"
|
||||
class="q-mb-xl"
|
||||
/>
|
||||
<FormLocation
|
||||
id="info-location"
|
||||
title="branch.form.group.location"
|
||||
v-model:latitude="formData.latitude"
|
||||
v-model:longitude="formData.longitude"
|
||||
:readonly="formType === 'view'"
|
||||
:separator="true"
|
||||
outlined
|
||||
dense
|
||||
class="q-mb-xl"
|
||||
/>
|
||||
<FormQr
|
||||
id="info-qr"
|
||||
:readonly="formType === 'view'"
|
||||
title="QR Code"
|
||||
:separator="true"
|
||||
:qr="qrCodeimageUrl"
|
||||
@view-qr="
|
||||
() => {
|
||||
triggerEditQrCodeLine();
|
||||
}
|
||||
"
|
||||
@edit-qr="() => refQrCodeUpload && refQrCodeUpload.browse()"
|
||||
class="q-mb-xl"
|
||||
/>
|
||||
<FormBank
|
||||
id="info-bank"
|
||||
:readonly="formType === 'view'"
|
||||
title="branch.form.group.bankAccount"
|
||||
dense
|
||||
v-model:bank-book-list="formBankBook"
|
||||
class="q-mb-xl"
|
||||
@view-qr="
|
||||
(i) => {
|
||||
currentIndexQrCodeBank = i;
|
||||
triggerEditQrCodeBank();
|
||||
}
|
||||
"
|
||||
@edit-qr="
|
||||
(i) => {
|
||||
currentIndexQrCodeBank = i;
|
||||
refQrCodeUpload.browse();
|
||||
}
|
||||
"
|
||||
/>
|
||||
<FormBranchAdmin
|
||||
id="info-branch-admin-view"
|
||||
:admin="currentBranchAdmin"
|
||||
/>
|
||||
</template>
|
||||
<FormBranchInformation
|
||||
id="info-information"
|
||||
v-model:virtual="formData.virtual"
|
||||
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"
|
||||
v-model:permit-no="formData.permitNo"
|
||||
v-model:permit-issue-date="formData.permitIssueDate"
|
||||
v-model:permit-expire-date="formData.permitExpireDate"
|
||||
:separator="true"
|
||||
:dense="true"
|
||||
:outlined="true"
|
||||
:readonly="formType === 'view'"
|
||||
view
|
||||
title="form.field.basicInformation"
|
||||
class="q-mb-xl"
|
||||
/>
|
||||
<FormBranchContact
|
||||
id="info-contact"
|
||||
title="branch.form.group.contact"
|
||||
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"
|
||||
v-model:web-url="formData.webUrl"
|
||||
:readonly="formType === 'view'"
|
||||
:view="formType === 'view'"
|
||||
:separator="true"
|
||||
:dense="true"
|
||||
:outlined="true"
|
||||
class="q-mb-xl"
|
||||
/>
|
||||
<AddressForm
|
||||
id="info-address"
|
||||
dense
|
||||
outlined
|
||||
separator
|
||||
prefix-id="default"
|
||||
:title="'form.address'"
|
||||
: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:moo="formData.moo"
|
||||
v-model:mooEN="formData.mooEN"
|
||||
v-model:soi="formData.soi"
|
||||
v-model:soiEN="formData.soiEN"
|
||||
v-model:street="formData.street"
|
||||
v-model:streetEN="formData.streetEN"
|
||||
v-model:zip-code="formData.zipCode"
|
||||
class="q-mb-xl"
|
||||
/>
|
||||
<FormLocation
|
||||
id="info-location"
|
||||
title="branch.form.group.location"
|
||||
v-model:latitude="formData.latitude"
|
||||
v-model:longitude="formData.longitude"
|
||||
:readonly="formType === 'view'"
|
||||
:separator="true"
|
||||
outlined
|
||||
dense
|
||||
class="q-mb-xl"
|
||||
/>
|
||||
<FormQr
|
||||
id="info-qr"
|
||||
:readonly="formType === 'view'"
|
||||
title="QR Code"
|
||||
:separator="true"
|
||||
:qr="qrCodeimageUrl"
|
||||
@view-qr="
|
||||
() => {
|
||||
triggerEditQrCodeLine();
|
||||
}
|
||||
"
|
||||
@edit-qr="() => refQrCodeUpload && refQrCodeUpload.browse()"
|
||||
class="q-mb-xl"
|
||||
/>
|
||||
<FormBank
|
||||
id="info-bank"
|
||||
:readonly="formType === 'view'"
|
||||
title="branch.form.group.bankAccount"
|
||||
dense
|
||||
v-model:bank-book-list="formBankBook"
|
||||
class="q-mb-xl"
|
||||
@view-qr="
|
||||
(i) => {
|
||||
currentIndexQrCodeBank = i;
|
||||
triggerEditQrCodeBank();
|
||||
}
|
||||
"
|
||||
@edit-qr="
|
||||
(i) => {
|
||||
currentIndexQrCodeBank = i;
|
||||
refQrCodeUpload.browse();
|
||||
}
|
||||
"
|
||||
/>
|
||||
<FormBranchAdmin
|
||||
id="info-branch-admin-view"
|
||||
:admin="currentBranchAdmin"
|
||||
class="q-mb-xl"
|
||||
/>
|
||||
|
||||
<template v-if="currentTab === 'attachment'">
|
||||
<UploadFile
|
||||
id="info-attachment"
|
||||
branch
|
||||
:file="currentAttachmentList"
|
||||
:tree-file="
|
||||
Object.values(
|
||||
currentAttachmentList.reduce<
|
||||
Record<
|
||||
string,
|
||||
{ label: string; file: { label: string }[] }
|
||||
>
|
||||
>((a, b) => {
|
||||
if (b.name && !a[b.name]) {
|
||||
a[b.name] = {
|
||||
label: b.name,
|
||||
file: [],
|
||||
};
|
||||
}
|
||||
return a;
|
||||
}, {}) || {},
|
||||
)
|
||||
"
|
||||
@save="
|
||||
async (_group, file) => {
|
||||
if (file) {
|
||||
attachmentList.push(file);
|
||||
|
||||
await branchStore.putAttachment(
|
||||
currentId,
|
||||
attachmentList,
|
||||
);
|
||||
<UploadFile
|
||||
auto-save
|
||||
class="q-mb-xl"
|
||||
id="info-attachment"
|
||||
branch
|
||||
:file="currentAttachmentList"
|
||||
:tree-file="
|
||||
Object.values(
|
||||
currentAttachmentList.reduce<
|
||||
Record<string, { label: string; file: { label: string }[] }>
|
||||
>((a, b) => {
|
||||
if (b.name && !a[b.name]) {
|
||||
a[b.name] = {
|
||||
label: b.name,
|
||||
file: [],
|
||||
};
|
||||
}
|
||||
return a;
|
||||
}, {}) || {},
|
||||
)
|
||||
"
|
||||
@save="
|
||||
async (_group, file) => {
|
||||
if (file) {
|
||||
attachmentList.push(file);
|
||||
await branchStore.putAttachment(currentId, attachmentList);
|
||||
}
|
||||
"
|
||||
@deleteFile="
|
||||
async (filename) => {
|
||||
const res = await branchStore.deleteByIdAttachment(
|
||||
currentId,
|
||||
filename,
|
||||
}
|
||||
"
|
||||
@deleteFile="
|
||||
async (filename) => {
|
||||
const res = await branchStore.deleteByIdAttachment(
|
||||
currentId,
|
||||
filename,
|
||||
);
|
||||
|
||||
if (res) {
|
||||
currentAttachmentList = currentAttachmentList.filter(
|
||||
(v) => {
|
||||
if (v.name === filename) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
},
|
||||
);
|
||||
|
||||
if (res) {
|
||||
currentAttachmentList = currentAttachmentList.filter(
|
||||
(v) => {
|
||||
if (v.name === filename) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
},
|
||||
);
|
||||
}
|
||||
}
|
||||
"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<template v-if="currentTab === 'remark'"></template>
|
||||
}
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue