89 lines
2.0 KiB
Vue
89 lines
2.0 KiB
Vue
<script setup>
|
|
import { ref } from 'vue';
|
|
import { useSession } from 'src/composables/useSession';
|
|
import noImage from '/no-user.png';
|
|
import { useRole } from 'src/composables/useRole';
|
|
|
|
const $props = defineProps({
|
|
storage: {
|
|
type: [String, Number],
|
|
default: 'Images',
|
|
},
|
|
collection: {
|
|
type: String,
|
|
default: 'catalog',
|
|
},
|
|
resolution: {
|
|
type: String,
|
|
default: '200x200',
|
|
},
|
|
zoomResolution: {
|
|
type: String,
|
|
default: null,
|
|
},
|
|
zoom: {
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
id: {
|
|
type: Number,
|
|
required: true,
|
|
},
|
|
});
|
|
const show = ref(false);
|
|
const token = useSession().getTokenMultimedia();
|
|
const timeStamp = ref(`timestamp=${Date.now()}`);
|
|
const isEmployee = useRole().isEmployee();
|
|
|
|
const getUrl = (zoom = false) => {
|
|
const curResolution = zoom
|
|
? $props.zoomResolution || $props.resolution
|
|
: $props.resolution;
|
|
if ($props.storage === 'dms')
|
|
return `/api/${$props.storage}/${$props.id}/downloadFile?access_token=${token}`;
|
|
return isEmployee
|
|
? `/api/${$props.storage}/${$props.collection}/${curResolution}/${$props.id}/download?access_token=${token}&${timeStamp.value}`
|
|
: noImage;
|
|
};
|
|
const reload = () => {
|
|
timeStamp.value = `timestamp=${Date.now()}`;
|
|
};
|
|
defineExpose({
|
|
reload,
|
|
});
|
|
</script>
|
|
<template>
|
|
<QImg
|
|
:draggable="true"
|
|
:class="{ zoomIn: zoom }"
|
|
:src="getUrl()"
|
|
v-bind="$attrs"
|
|
@click.stop="show = $props.zoom"
|
|
spinner-color="primary"
|
|
/>
|
|
<QDialog v-if="$props.zoom" v-model="show">
|
|
<QImg
|
|
:draggable="true"
|
|
:src="getUrl(true)"
|
|
v-bind="$attrs"
|
|
spinner-color="primary"
|
|
class="img_zoom"
|
|
:ratio="0"
|
|
/>
|
|
</QDialog>
|
|
</template>
|
|
<style lang="scss" scoped>
|
|
.q-img {
|
|
&.zoomIn {
|
|
cursor: zoom-in;
|
|
}
|
|
min-width: 50px;
|
|
}
|
|
.rounded {
|
|
border-radius: 50%;
|
|
}
|
|
.img_zoom {
|
|
border-radius: 0%;
|
|
}
|
|
</style>
|