feat: refs #7500 added VnImg to show files

src/components/common/VnDmsList.vue

@@ -5,12 +5,14 @@ import { useRoute } from 'vue-router';
 import { useQuasar, QCheckbox, QBtn, QInput } from 'quasar';
 import axios from 'axios';
 
+import VnUserLink from '../ui/VnUserLink.vue';
+import { downloadFile } from 'src/composables/downloadFile';
+import VnImg from 'components/ui/VnImg.vue';
 import VnPaginate from 'components/ui/VnPaginate.vue';
 import VnDms from 'src/components/common/VnDms.vue';
 import VnConfirm from 'components/ui/VnConfirm.vue';
 import VnInputDate from 'components/common/VnInputDate.vue';
-import VnUserLink from '../ui/VnUserLink.vue';
-import { downloadFile } from 'src/composables/downloadFile';
+import { useSession } from 'src/composables/useSession';
 
 const route = useRoute();
 const quasar = useQuasar();
@@ -18,6 +20,7 @@ const { t } = useI18n();
 const rows = ref();
 const dmsRef = ref();
 const formDialog = ref({});
+const token = useSession().getTokenMultimedia();
 
 const $props = defineProps({
     model: {
@@ -89,6 +92,25 @@ const dmsFilter = {
 };
 
 const columns = computed(() => [
+    {
+        align: 'left',
+        field: 'file',
+        label: t('globals.file'),
+        name: 'file',
+        component: VnImg,
+        props: (prop) => ({
+            storage: 'dms',
+            collection: null,
+            size: null,
+            token: prop.token,
+            url:
+                'api/dms/' +
+                prop.row.file.split('.')[0] +
+                '/downloadFile?access_token=' +
+                token,
+            class: 'rounded',
+        }),
+    },
     {
         align: 'left',
         field: 'id',
@@ -141,13 +163,6 @@ const columns = computed(() => [
             'model-value': Boolean(prop.value),
         }),
     },
-    {
-        align: 'left',
-        field: 'file',
-        label: t('globals.file'),
-        name: 'file',
-        component: 'span',
-    },
     {
         align: 'left',
         field: 'worker',

src/components/ui/VnImg.vue

@@ -24,6 +24,11 @@ const $props = defineProps({
         type: Number,
         required: true,
     },
+    url: {
+        type: String,
+        required: false,
+        default: null,
+    },
 });
 const show = ref(false);
 const token = useSession().getTokenMultimedia();
@@ -31,9 +36,13 @@ const timeStamp = ref(`timestamp=${Date.now()}`);
 import noImage from '/no-user.png';
 import { useRole } from 'src/composables/useRole';
 const url = computed(() => {
+    if ($props.url) return $props.url;
     const isEmployee = useRole().isEmployee();
+    const _url = [$props.storage, $props.collection, $props.size, $props.id]
+        .filter((prop) => prop)
+        .join('/');
     return isEmployee
-        ? `/api/${$props.storage}/${$props.collection}/${$props.size}/${$props.id}/download?access_token=${token}&${timeStamp.value}`
+        ? `/api/${_url}/download?access_token=${token}&${timeStamp.value}`
         : noImage;
 });
 const reload = () => {