From 95b0cd9c93949346f120d4fbb498bed055add1ee Mon Sep 17 00:00:00 2001 From: Net Date: Wed, 11 Sep 2024 13:44:57 +0700 Subject: [PATCH] refactor: by value inputFileQrCode --- src/pages/01_branch-management/MainPage.vue | 152 +++++++++++++++----- 1 file changed, 116 insertions(+), 36 deletions(-) diff --git a/src/pages/01_branch-management/MainPage.vue b/src/pages/01_branch-management/MainPage.vue index 8bdb5028..8f17ae69 100644 --- a/src/pages/01_branch-management/MainPage.vue +++ b/src/pages/01_branch-management/MainPage.vue @@ -9,7 +9,6 @@ import type { QTableProps } from 'quasar'; import { resetScrollBar } from 'src/stores/utils'; import useBranchStore from 'stores/branch'; import useFlowStore from 'stores/flow'; -import { isRoleInclude } from 'src/stores/utils'; import { BranchWithChildren, BranchCreate, @@ -17,6 +16,7 @@ import { BankBook, } from 'stores/branch/types'; +import QrCodeUploadDialog from 'src/components/QrCodeUploadDialog.vue'; import ItemCard from 'src/components/ItemCard.vue'; import useUtilsStore, { dialog, baseUrl } from 'stores/utils'; import EmptyAddButton from 'components/AddButton.vue'; @@ -145,41 +145,32 @@ const formBankBook = ref([ accountName: '', accountType: '', currentlyUse: true, + bankUrl: '', }, ]); +const statusQrCodeFile = ref(undefined); +const statusQrCodeUrl = ref(''); +const statusDeletsQrCode = ref(false); + +const deletsStatusQrCodeImag = ref(false); +const deletsStatusQrCodeBankImag = ref([]); +const currentIndexQrCodeBank = ref(-1); +const refQrCodeUpload = ref(); const refImageUpload = ref(); const isImageEdit = ref(false); +const isQrCodeEdit = ref(false); const profileFile = ref(undefined); +const qrCodeFile = ref(undefined); const imageUrl = ref(''); const prevImageUrl = ref(''); const currentNode = ref(); const imageDialog = ref(false); +const qrCodeDialog = ref(false); -const qrFile = ref(undefined); -const qrCodeimageUrl = ref(''); +const qrCodeimageUrl = ref(''); const formLastSubBranch = ref(0); -const inputFile = (() => { - const element = document.createElement('input'); - element.type = 'file'; - element.accept = 'image/*'; - - const reader = new FileReader(); - reader.addEventListener('load', () => { - if (typeof reader.result === 'string') qrCodeimageUrl.value = reader.result; - }); - - element.addEventListener('change', () => { - qrFile.value = element.files?.[0]; - if (qrFile.value) { - reader.readAsDataURL(qrFile.value); - } - }); - - return element; -})(); - const branchStore = useBranchStore(); const flowStore = useFlowStore(); const { locale } = useI18n(); @@ -372,13 +363,19 @@ function openDialog() { async function fetchBranchById(id: string) { const res = await branchStore.fetchById(id, { includeContact: true }); - if (res) { - qrCodeimageUrl.value = `${apiBaseUrl}/branch/${res.id}/line-image`; + qrCodeimageUrl.value = `${apiBaseUrl}/branch/${res.id}/line-image?ts=${Date.now()}`; imageUrl.value = `${apiBaseUrl}/branch/${res.id}/branch-image`; prevImageUrl.value = res.imageUrl; formBankBook.value = res.bank; + formBankBook.value = formBankBook.value.map((v) => { + return { + ...v, + bankUrl: `${apiBaseUrl}/branch/${res.id}/bank-qr/${v.id}?ts=${Date.now()}`, + }; + }); + formData.value = { code: res.code, headOfficeId: res.headOfficeId, @@ -408,12 +405,12 @@ async function fetchBranchById(id: string) { function clearData() { formData.value = structuredClone(defaultFormData); imageUrl.value = ''; - qrCodeimageUrl.value = null; + qrCodeimageUrl.value = ''; currentEdit.value = { id: '', code: '', }; - qrFile.value = undefined; + qrCodeFile.value = undefined; formBankBook.value = [ { @@ -428,6 +425,7 @@ function clearData() { } async function undo() { + isQrCodeEdit.value = false; isImageEdit.value = false; formType.value = 'view'; imageUrl.value = prevImageUrl.value; @@ -481,6 +479,7 @@ function findLastSub(code: string) { } function drawerEdit() { + isQrCodeEdit.value = true; isImageEdit.value = true; formType.value = 'edit'; prevFormData.value = { @@ -579,6 +578,40 @@ function triggerDelete(id: string) { } } +function triggerEditQrCodeLine(opts?: { save?: boolean }) { + if (opts?.save === undefined) { + qrCodeDialog.value = true; + statusDeletsQrCode.value = false; + deletsStatusQrCodeImag.value = false; + statusQrCodeUrl.value = qrCodeimageUrl.value; + } else { + qrCodeimageUrl.value = statusQrCodeUrl.value; + qrCodeFile.value = statusQrCodeFile.value; + deletsStatusQrCodeImag.value = statusDeletsQrCode.value; + } +} + +function triggerEditQrCodeBank(opts?: { save?: boolean }) { + if (opts?.save === undefined) { + qrCodeDialog.value = true; + statusDeletsQrCode.value = false; + statusQrCodeUrl.value = + formBankBook.value[currentIndexQrCodeBank.value].bankUrl || ''; + statusDeletsQrCode.value = false; + } else { + formBankBook.value[currentIndexQrCodeBank.value].bankUrl = + statusQrCodeUrl.value; + + formBankBook.value[currentIndexQrCodeBank.value].bankQr = + statusQrCodeFile.value; + + if (statusDeletsQrCode.value) { + deletsStatusQrCodeBankImag.value.push(currentIndexQrCodeBank.value); + } + currentIndexQrCodeBank.value = -1; + } +} + async function triggerChangeStatus( id: string, status: string, @@ -617,9 +650,13 @@ async function onSubmit() { ...formData.value, status: undefined, }, - qrFile.value, + qrCodeFile.value, profileFile.value, formBankBook.value, + { + deleteQrCodeImage: deletsStatusQrCodeImag.value, + indexDeleteQrCodeBank: deletsStatusQrCodeBankImag.value, + }, ); await branchStore.fetchList({ pageSize: 99999 }); @@ -632,7 +669,7 @@ async function onSubmit() { await branchStore.create( { ...formData.value, - qrCodeImage: qrFile.value, + qrCodeImage: qrCodeFile.value, imageUrl: profileFile.value, }, formBankBook.value, @@ -735,6 +772,13 @@ watch( }, ); +watch( + () => qrCodeFile.value, + () => { + if (qrCodeFile !== null) isQrCodeEdit.value = true; + }, +); + watch(locale, () => { fieldSelectedBranch.value = { label: t(`${fieldSelectedBranch.value.label}`), @@ -1653,11 +1697,6 @@ watch(currentHq, () => { :separator="true" :qr="qrCodeimageUrl" :readonly="formType === 'view'" - @upload=" - () => { - inputFile.click(); - } - " /> { title="QR Code" :separator="true" :qr="qrCodeimageUrl" - @upload=" + @view-qr=" () => { - inputFile.click(); + triggerEditQrCodeLine(); } " + @edit-qr="() => refQrCodeUpload && refQrCodeUpload.browse()" class="q-mb-xl" /> { dense v-model:bank-book-list="formBankBook" class="q-mb-xl" + @view-qr=" + (i) => { + currentIndexQrCodeBank = i; + triggerEditQrCodeBank(); + } + " + @edit-qr=" + (i) => { + currentIndexQrCodeBank = i; + } + " /> { + + + +