Initial commit

app/components/transaction/TransactionFiles.vue

@@ -0,0 +1,115 @@
+<template>
+  <div>
+    <table class="table is-fullwidth is-striped">
+      <thead>
+        <tr>
+          <th>File</th>
+          <th style="text-align: center;">Tải xuống</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="txnfile in txnfiles" :key="txnfile.id">
+          <td>
+            <div class="is-flex is-align-items-center">
+              <span class="icon is-medium has-text-primary mr-2">
+                <SvgIcon
+                  v-bind="{
+                    name: 'attach-file.svg',
+                    type: 'primary',
+                    size: 20,
+                  }"
+                ></SvgIcon>
+              </span>
+              <div class="is-clickable" @click="open(txnfile)">
+                <p class="has-text-weight-semibold has-text-primary">
+                  {{ txnfile.file__name }}
+                </p>
+                <p class="is-size-7 has-text-grey">
+                  {{ $formatFileSize(txnfile.file__size) }}
+                </p>
+              </div>
+            </div>
+          </td>
+          <td>
+            <div class="buttons is-justify-content-center">
+              <a
+                class="button is-small is-info is-outlined"
+                @click="download(txnfile)"
+                title="Tải xuống"
+              >
+                <span class="icon is-small"
+                  ><SvgIcon
+                    v-bind="{
+                      name: 'download.svg',
+                      type: 'primary',
+                      size: 14,
+                    }"
+                  ></SvgIcon
+                ></span>
+              </a>
+            </div>
+          </td>
+        </tr>
+        <tr v-if="txnfiles.length === 0">
+          <td colspan="4" class="has-text-centered py-4">
+            <p class="has-text-grey">
+              Chưa có tài liệu nào được đính kèm.
+            </p>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+
+    <Modal @close="showmodal=undefined" v-bind="showmodal" v-if="showmodal"></Modal>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+const { $formatFileSize, $getdata, $getpath } = useNuxtApp();
+
+const props = defineProps({
+  txndetail: [String, Number]
+});
+
+const showmodal = ref(undefined);
+const txnfiles = ref([]);
+
+async function fetchTxnFiles() {
+  if (props.txndetail) {
+    const data = await $getdata('transactionfile', { txn_detail: props.txndetail });
+    txnfiles.value = Array.isArray(data) ? data : (data ? [data] : []);
+  }
+}
+
+function open(v) {
+  const fileName = v.file__name || '';
+  const filePath = v.file__file || v.file;
+
+  if (!filePath) return;
+
+  if(fileName.indexOf('.png')>=0 || fileName.indexOf('.jpg')>=0 || fileName.indexOf('.jpeg')>=0) {
+    showmodal.value = {
+      title: fileName, 
+      component: 'media/ChipImage', 
+      vbind: {extend: false, file: v, image: `${$getpath()}static/files/${filePath}`}
+    };
+    return;
+  }
+  window.open(`${$getpath()}static/files/${filePath}`);
+}
+
+function download(v) {
+  const filePath = v.file__file || v.file;
+  if (!filePath) return;
+  
+  window.open(`${$getpath()}static/files/${filePath}`, v.file__name || '_blank');
+}
+
+fetchTxnFiles();
+
+watch(() => props.txndetail, () => {
+  fetchTxnFiles();
+}, { immediate: true });
+
+</script>