From 987504f8d0817064a9f217c8b7e66154c19e456c Mon Sep 17 00:00:00 2001 From: Net Date: Mon, 16 Sep 2024 10:27:08 +0700 Subject: [PATCH] refactor: edit upload Attachment --- src/pages/01_branch-management/MainPage.vue | 901 ++++++++++++-------- 1 file changed, 542 insertions(+), 359 deletions(-) diff --git a/src/pages/01_branch-management/MainPage.vue b/src/pages/01_branch-management/MainPage.vue index 122fa8dd..7de1a581 100644 --- a/src/pages/01_branch-management/MainPage.vue +++ b/src/pages/01_branch-management/MainPage.vue @@ -149,6 +149,17 @@ const formBankBook = ref([ }, ]); +const attachmentList = ref([]); +const currentAttachmentList = ref< + { + name?: string; + group?: string; + url?: string; + file?: File; + }[] +>([]); +const currentAttachmentSelected = ref(''); + const statusQrCodeFile = ref(undefined); const statusQrCodeUrl = ref(''); const statusDeletsQrCode = ref(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, () => { { }-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', - }, - ]" + :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; @@ -1671,43 +1716,101 @@ watch(currentHq, () => { " /> -
-
-
+
+
+
+
+ + + + + + +
+
+
-
-
- - + + 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; + }, + ); + } + } + " + /> + + + +
@@ -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" >
@@ -2018,36 +2124,52 @@ watch(currentHq, () => { class="col full-height rounded scroll row q-py-md q-pl-md q-pr-sm" > - - - - - - - + + + + +