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

refactor: edit upload Attachment

Browse source
This commit is contained in:
Net 2024-09-16 10:27:08 +07:00
parent 856adc91ca
commit 987504f8d0
1 changed files with 542 additions and 359 deletions
Download patch file Download diff file Expand all files Collapse all files

355
src/pages/01_branch-management/MainPage.vue
View file

@ -149,6 +149,17 @@ const formBankBook = ref<BankBook[]>([
},
]);
const attachmentList = ref<File[]>([]);
const currentAttachmentList = ref<
{
name?: string;
group?: string;
url?: string;
file?: File;
}[]
>([]);
const currentAttachmentSelected = ref<string>('');
const statusQrCodeFile = ref<File | undefined>(undefined);
const statusQrCodeUrl = ref<string>('');
const statusDeletsQrCode = ref<boolean>(false);
@ -403,6 +414,19 @@ async function fetchBranchById(id: string) {
};
});
const resAttachment = await branchStore.fetchListAttachment(res.id);
if (resAttachment) {
currentAttachmentList.value = await Promise.all(
resAttachment.map(async (v) => {
return {
name: v,
url: (await branchStore.fetchByIdAttachment(res.id, v)) || '',
};
}),
);
}
formData.value = {
code: res.code,
headOfficeId: res.headOfficeId,
@ -443,7 +467,8 @@ function clearData() {
code: '',
};
qrCodeFile.value = undefined;
currentAttachmentList.value = [];
currentTab.value = 'main';
formBankBook.value = [
{
bankName: '',
@ -496,6 +521,7 @@ function triggerCreate(
formLastSubBranch.value = findLastSub(code);
}
formType.value = 'create';
currentId.value = '';
openDialog();
}
@ -528,6 +554,7 @@ async function triggerEdit(
await fetchBranchById(id);
await fetchImageList(id, formData.value.selectedImage || '');
formTypeBranch.value = typeBranch;
if (openFormType === 'form') {
formType.value = 'edit';
openDialog();
@ -566,8 +593,6 @@ async function triggerEdit(
currentHq.value = currentEdit.value;
}
}
formTypeBranch.value = typeBranch;
const branchAdmin = await branchStore.getAdmin(id);
if (!branchAdmin) {
@ -589,7 +614,7 @@ function triggerDelete(id: string) {
message: t('dialog.message.confirmDelete'),
action: async () => {
await branchStore.deleteById(id);
await fetchList({ pageSize: 99999 });
await fetchList({ tree: true, pageSize: 99999 });
modalDrawer.value = false;
await calculateStats();
@ -618,7 +643,6 @@ function triggerEditQrCodeLine(opts?: { save?: boolean }) {
deletsStatusQrCodeImag.value = false;
statusQrCodeUrl.value = qrCodeimageUrl.value;
} else {
console.log('save', qrCodeFile.value);
qrCodeimageUrl.value = statusQrCodeUrl.value;
qrCodeFile.value = statusQrCodeFile.value;
deletsStatusQrCodeImag.value = statusDeletsQrCode.value;
@ -658,7 +682,6 @@ async function fetchList(opts: {
}
watch(inputSearch, () => {
console.log(inputSearch.value);
fetchList({ tree: true, query: inputSearch.value });
currentSubBranch.value = undefined;
});
@ -710,19 +733,17 @@ async function onSubmit(submitSelectedItem?: boolean) {
);
if (!res) return;
formData.value.codeHeadOffice = formData.value.code = res.code;
imageUrl.value = `${baseUrl}/branch/${res.id}/image/${res.selectedImage}`;
await fetchList({ tree: true, pageSize: 99999 });
if (!imageDialog.value) modalDrawer.value = submitSelectedItem || false;
modal.value = false;
}
if (formType.value === 'create') {
const createBranch = async () => {
await branchStore.create(
const res = await branchStore.create(
{
...formData.value,
qrCodeImage: qrCodeFile.value,
@ -731,8 +752,20 @@ async function onSubmit(submitSelectedItem?: boolean) {
onCreateImageList.value,
);
if (res) {
currentId.value = res.id;
formData.value.codeHeadOffice = res.code;
formData.value.code = res.code;
prevFormData.value = JSON.parse(JSON.stringify(formData.value));
currentEdit.value = {
id: res.id,
code: res.code,
};
formType.value = 'view';
}
await fetchList({ tree: true, pageSize: 99999 });
modal.value = false;
};
if (formTypeBranch.value === 'subBranch') {
@ -1582,6 +1615,7 @@ watch(currentHq, () => {
</div>
<DialogForm
hide-footer
ref="formDialogRef"
v-model:modal="modal"
:title="changeTitle(formType, formTypeBranch) + ' ' + currentEdit.code"
@ -1642,7 +1676,8 @@ watch(currentHq, () => {
}-hsl)/${imageUrl ? '0' : '0.15'})`"
:menu="formMenuIcon"
v-model:current-tab="currentTab"
:tabs-list="[
:tabs-list="
[
{
name: 'main',
label: 'customerBranch.tab.main',
@ -1655,7 +1690,17 @@ watch(currentHq, () => {
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;
@ -1671,14 +1716,58 @@ watch(currentHq, () => {
"
/>
</div>
<div class="col q-pa-lg">
<div
class="col surface-1 q-ma-lg rounded bordered scroll row"
id="branch-form"
style="overflow-y: auto"
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"
>
<div
v-if="formData.status !== 'INACTIVE'"
class="surface-1 row rounded"
>
<UndoButton
v-if="formType === 'edit' && !!currentId"
icon-only
@click="undo()"
type="button"
/>
<SaveButton
v-if="formType === 'edit' || formType === 'create'"
id="btn-info-basic-save"
icon-only
type="submit"
/>
<EditButton
v-if="formType !== 'edit' && !!currentId"
id="btn-info-basic-edit"
icon-only
@click="drawerEdit()"
type="button"
/>
<DeleteButton
v-if="formType !== 'edit' && !!currentId"
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"
v-if="$q.screen.gt.sm"
>
<div class="col" v-if="$q.screen.gt.sm">
<div style="position: sticky; top: 0" class="q-pa-sm">
<SideMenu
:menu="[
:menu="
{
main: [
{
name: $t('form.field.basicInformation'),
anchor: 'form-information',
@ -1707,7 +1796,21 @@ watch(currentHq, () => {
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] || []
"
background="transparent"
:active="{
background: 'hsla(var(--blue-6-hsl) / .2)',
@ -1716,9 +1819,13 @@ watch(currentHq, () => {
scroll-element="#branch-form"
/>
</div>
</div>
<div class="col-md-10 col-12 q-pa-md q-gutter-y-xl">
<div
class="col-12 col-md-10 q-py-md q-pr-md full-height"
:class="$q.screen.xs ? 'q-pl-md' : 'q-pl-sm'"
id="branch-form"
style="overflow-y: auto"
>
<template v-if="currentTab === 'main'">
<FormBranchInformation
id="form-information"
@ -1733,11 +1840,12 @@ watch(currentHq, () => {
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"
:view="isSubCreate || !!currentId"
onCreate
/>
<FormBranchContact
@ -1750,6 +1858,7 @@ watch(currentHq, () => {
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"
@ -1768,6 +1877,7 @@ watch(currentHq, () => {
v-model:district-id="formData.districtId"
v-model:sub-district-id="formData.subDistrictId"
v-model:zip-code="formData.zipCode"
:readonly="formType === 'view'"
/>
<FormLocation
id="form-location"
@ -1794,6 +1904,7 @@ watch(currentHq, () => {
/>
<FormBank
id="form-bank"
:readonly="formType === 'view'"
title="branch.form.group.bankAccount"
dense
v-model:bank-book-list="formBankBook"
@ -1817,80 +1928,59 @@ watch(currentHq, () => {
</template>
<template v-if="currentTab === 'attachment'">
<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:zip-code="formData.zipCode"
/>
<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();
<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: [],
};
}
return a;
}, {}) || {},
)
"
@save="
async (_group, file) => {
if (file) {
attachmentList.push(file);
await branchStore.putAttachment(currentId, attachmentList);
}
}
"
@edit-qr="() => refQrCodeUpload && refQrCodeUpload.browse()"
/>
<FormBank
id="form-bank"
title="branch.form.group.bankAccount"
dense
v-model:bank-book-list="formBankBook"
@view-qr="
(i) => {
currentIndexQrCodeBank = i;
triggerEditQrCodeBank();
@deleteFile="
async (filename) => {
const res = await branchStore.deleteByIdAttachment(
currentId,
filename,
);
if (res) {
currentAttachmentList = currentAttachmentList.filter(
(v) => {
if (v.name === filename) {
return false;
}
return true;
},
);
}
"
@edit-qr="
(i) => {
currentIndexQrCodeBank = i;
refQrCodeUpload && refQrCodeUpload.browse();
}
"
/>
<FormBranchAdmin
id="form-branch-admin-view"
:admin="currentBranchAdmin"
/>
<!-- <FormImage
:readonly="formType === 'view'"
v-model:image="imageUrl"
@upload="
() => {
inputFileImg.click();
}
"
:title="$t('formDialogTitleImg')"
/> -->
</template>
<template v-if="currentTab === 'remark'"></template>
</div>
</div>
</div>
</DialogForm>
<DrawerInfo
@ -1928,6 +2018,21 @@ watch(currentHq, () => {
:title="formData.name"
: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'
@ -1978,6 +2083,7 @@ 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"
>
@ -2018,7 +2124,9 @@ 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',
@ -2047,7 +2155,21 @@ watch(currentHq, () => {
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] || []
"
background="transparent"
:active="{
background: 'hsla(var(--blue-6-hsl) / .2)',
@ -2062,6 +2184,7 @@ watch(currentHq, () => {
id="branch-info"
style="overflow-y: auto"
>
<template v-if="currentTab === 'main'">
<FormBranchInformation
id="info-information"
v-model:virtual="formData.virtual"
@ -2164,6 +2287,66 @@ watch(currentHq, () => {
id="info-branch-admin-view"
:admin="currentBranchAdmin"
/>
</template>
<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,
);
}
}
"
@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>