refactor: handle qr code

src/components/01_branch-management/FormBank.vue

@@ -173,9 +173,10 @@ watch(
 
       <div
         class="bordered q-mr-sm rounded"
-        :class="{ 'cursor-pointer': !readonly }"
+        :class="{ 'pointer-none': readonly }"
       >
         <ImageHover
+          :readonly="readonly"
           :img="book.bankUrl"
           @view="() => $emit('viewQr', i)"
           @edit="
@@ -347,4 +348,8 @@ watch(
     </div>
   </div>
 </template>
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.pointer-none {
+  pointer-events: none;
+}
+</style>

src/components/ImageHover.vue

@@ -44,7 +44,11 @@ defineEmits<{
         style="z-index: 1; cursor: pointer"
         @mouseover="showOverlay = true"
         @mouseleave="showOverlay = false"
-        @click.stop="$emit('view')"
+        @click.stop="
+          () => {
+            if (readonly === false) $emit('view');
+          }
+        "
       >
         <div
           v-if="img"
@@ -108,7 +112,11 @@ defineEmits<{
           >
             <div
               class="upload-overlay absolute-bottom flex items-center justify-center"
-              @click.stop="$emit('edit')"
+              @click.stop="
+                () => {
+                  if (readonly === false) $emit('edit');
+                }
+              "
             >
               {{
                 labelAction === undefined

src/components/QrCodeUploadDialog.vue

@@ -159,6 +159,7 @@ async function downloadImage(url: string) {
           v-close-popup
         />
         <SaveButton
+          :label="$t('general.confirm')"
           outlined
           @click="$emit('save', inputFile?.files?.[0] || null, imageUrl)"
         />