forked from verdnatura/salix-front
feat(claim): migrate photos section
This commit is contained in:
parent
3c08b8e062
commit
ea9828328e
|
|
@ -57,6 +57,7 @@ module.exports = {
|
|||
// add your custom rules here
|
||||
rules: {
|
||||
'prefer-promise-reject-errors': 'off',
|
||||
'no-unused-vars': 'warn',
|
||||
|
||||
// allow debugger during development only
|
||||
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
|
||||
|
|
|
|||
|
|
@ -4,13 +4,17 @@ import { useDialogPluginComponent } from 'quasar';
|
|||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
const $props = defineProps({
|
||||
question: {
|
||||
icon: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
question: {
|
||||
type: String,
|
||||
default: 'Confirm',
|
||||
},
|
||||
message: {
|
||||
type: String,
|
||||
default: '',
|
||||
default: 'Are you sure you want to continue?',
|
||||
},
|
||||
});
|
||||
|
||||
|
|
@ -20,13 +24,21 @@ const { dialogRef, onDialogOK } = useDialogPluginComponent();
|
|||
const { t } = useI18n();
|
||||
|
||||
const question = ref($props.question);
|
||||
const message = ref($props.question);
|
||||
const message = ref($props.message);
|
||||
const isLoading = ref(false);
|
||||
</script>
|
||||
<template>
|
||||
<q-dialog ref="dialogRef" persistent>
|
||||
<q-card class="q-pa-sm">
|
||||
<q-card-section class="row items-center q-pb-none">
|
||||
<q-card-section class="row items-center q-pb-none q-gutter-md">
|
||||
<q-avatar
|
||||
:icon="icon"
|
||||
color="primary"
|
||||
text-color="white"
|
||||
size="xl"
|
||||
rounded
|
||||
v-if="icon != ''"
|
||||
/>
|
||||
<span class="text-h6 text-grey">{{ message }}</span>
|
||||
<q-space />
|
||||
<q-btn icon="close" flat round dense v-close-popup />
|
||||
|
|
@ -36,7 +48,12 @@ const isLoading = ref(false);
|
|||
</q-card-section>
|
||||
<q-card-actions align="right">
|
||||
<q-btn :label="t('globals.cancel')" color="primary" flat v-close-popup />
|
||||
<q-btn :label="t('globals.confirm')" color="primary" :loading="isLoading" @click="onDialogOK" />
|
||||
<q-btn
|
||||
:label="t('globals.confirm')"
|
||||
color="primary"
|
||||
:loading="isLoading"
|
||||
@click="onDialogOK()"
|
||||
/>
|
||||
</q-card-actions>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
|
|
@ -0,0 +1,207 @@
|
|||
<script setup>
|
||||
import { ref, computed } from 'vue';
|
||||
import axios from 'axios';
|
||||
import { useQuasar } from 'quasar';
|
||||
import VnConfirm from 'src/components/ui/VnConfirm.vue';
|
||||
|
||||
import { useRouter } from 'vue-router';
|
||||
// import { useI18n } from 'vue-i18n';
|
||||
|
||||
import { useSession } from 'src/composables/useSession';
|
||||
import FetchData from 'components/FetchData.vue';
|
||||
// import FormModel from 'components/FormModel.vue';
|
||||
|
||||
const router = useRouter();
|
||||
// const { t } = useI18n();
|
||||
const session = useSession();
|
||||
const token = session.getToken();
|
||||
const quasar = useQuasar();
|
||||
|
||||
const entityId = computed(function () {
|
||||
return router.currentRoute.value.params.id;
|
||||
});
|
||||
|
||||
const multimedia = ref([]);
|
||||
const claimDmsFilter = ref({
|
||||
include: [
|
||||
{
|
||||
relation: 'dms',
|
||||
},
|
||||
],
|
||||
where: { claimFk: entityId },
|
||||
});
|
||||
|
||||
const multimediaDialog = ref();
|
||||
const multimediaMaximizedDialog = ref();
|
||||
const multimediaSlide = ref();
|
||||
|
||||
function getImagePath(media) {
|
||||
return `http://localhost:9000/api/Claims/${media.dmsFk}/downloadFile?access_token=${token}`;
|
||||
}
|
||||
|
||||
function openDialog(dmsId) {
|
||||
multimediaSlide.value = dmsId;
|
||||
multimediaDialog.value = true;
|
||||
multimediaMaximizedDialog.value = false;
|
||||
}
|
||||
|
||||
function viewDeleteDms(dmsId) {
|
||||
quasar
|
||||
.dialog({
|
||||
component: VnConfirm,
|
||||
componentProps: {
|
||||
question: 'Are you sure you want to continue?',
|
||||
message: 'This file will be deleted',
|
||||
icon: 'delete',
|
||||
},
|
||||
})
|
||||
.onOk(() => deleteDms(dmsId));
|
||||
}
|
||||
|
||||
async function deleteDms(index) {
|
||||
console.log(index);
|
||||
const dmsId = multimedia.value[index].dmsFk;
|
||||
await axios.post(`ClaimDms/${dmsId}/removeFile`);
|
||||
console.log(multimedia.value.splice(index, 1));
|
||||
multimedia.value = multimedia.value.splice(index, 1);
|
||||
console.log(index, multimedia.value);
|
||||
}
|
||||
|
||||
function setMultimedia(data) {
|
||||
multimedia.value = data.map((media) => {
|
||||
media.isVideo = media.dms.contentType == 'video/mp4';
|
||||
return media;
|
||||
});
|
||||
}
|
||||
//cover fill contain none scale-down
|
||||
</script>
|
||||
<template>
|
||||
<fetch-data
|
||||
url="ClaimDms"
|
||||
:filter="claimDmsFilter"
|
||||
@on-fetch="(data) => setMultimedia(data)"
|
||||
limit="20"
|
||||
auto-load
|
||||
/>
|
||||
<div class="container">
|
||||
<q-card class="row items-start q-mt-sm q-py-md q-pr-md">
|
||||
<div
|
||||
class="col-3 multimedia relative-position"
|
||||
v-for="(media, index) of multimedia"
|
||||
:key="index"
|
||||
>
|
||||
<q-btn
|
||||
icon="delete"
|
||||
color="primary"
|
||||
text-color="white"
|
||||
size="md"
|
||||
class="all-pointer-events absolute"
|
||||
style="top: 7%; left: 7%; z-index: 1"
|
||||
@click.stop="viewDeleteDms(index)"
|
||||
/>
|
||||
<q-img
|
||||
:src="getImagePath(media)"
|
||||
class="rounded-borders cursor-pointer"
|
||||
@click="openDialog(media.dmsFk)"
|
||||
v-if="!media.isVideo"
|
||||
>
|
||||
</q-img>
|
||||
<q-video
|
||||
:src="getImagePath(media)"
|
||||
class="rounded-borders cursor-pointer"
|
||||
muted="muted"
|
||||
:poster="getImagePath(media)"
|
||||
v-if="media.isVideo"
|
||||
>
|
||||
</q-video>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
|
||||
<!-- MULTIMEDIA DIALOG START-->
|
||||
<q-dialog
|
||||
v-model="multimediaDialog"
|
||||
:maximized="multimediaMaximizedDialog"
|
||||
transition-show="slide-up"
|
||||
transition-hide="slide-down"
|
||||
class="z-max"
|
||||
>
|
||||
<q-card class="bg-dark" style="min-width: 70%">
|
||||
<q-bar>
|
||||
<q-space />
|
||||
|
||||
<q-btn
|
||||
dense
|
||||
flat
|
||||
:icon="multimediaMaximizedDialog ? 'minimize' : 'crop_square'"
|
||||
color="primary"
|
||||
@click="
|
||||
multimediaMaximizedDialog = multimediaMaximizedDialog
|
||||
? false
|
||||
: true
|
||||
"
|
||||
>
|
||||
<q-tooltip
|
||||
v-if="multimediaMaximizedDialog"
|
||||
class="bg-white text-primary"
|
||||
>
|
||||
Change size
|
||||
</q-tooltip>
|
||||
</q-btn>
|
||||
<q-btn dense flat icon="close" color="primary" v-close-popup>
|
||||
<q-tooltip class="bg-white text-primary">Close</q-tooltip>
|
||||
</q-btn>
|
||||
</q-bar>
|
||||
|
||||
<q-card-section class="q-pt-none">
|
||||
<q-carousel swipeable animated v-model="multimediaSlide" arrows>
|
||||
<q-carousel-slide
|
||||
v-for="media of multimedia"
|
||||
:key="media.dmsFk"
|
||||
:name="media.dmsFk"
|
||||
>
|
||||
<q-img
|
||||
:src="getImagePath(media)"
|
||||
v-if="!media.isVideo"
|
||||
class="absolute-full"
|
||||
fit="scale-down"
|
||||
/>
|
||||
<q-video
|
||||
class="absolute-full"
|
||||
:src="getImagePath(media)"
|
||||
v-if="media.isVideo"
|
||||
/>
|
||||
</q-carousel-slide>
|
||||
</q-carousel>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
<!-- MULTIMEDIA DIALOG END-->
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.q-card {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.multimedia {
|
||||
height: 250px;
|
||||
padding: 7px;
|
||||
margin-bottom: 14px;
|
||||
.q-img {
|
||||
height: 250px;
|
||||
object-fit: cover;
|
||||
background-color: black;
|
||||
}
|
||||
.q-video {
|
||||
height: 250px;
|
||||
object-fit: cover;
|
||||
background-color: black;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -11,7 +11,7 @@ export default {
|
|||
redirect: { name: 'ClaimMain' },
|
||||
menus: {
|
||||
main: ['ClaimList', 'ClaimRmaList'],
|
||||
card: ['ClaimBasicData', 'ClaimRma'],
|
||||
card: ['ClaimBasicData', 'ClaimRma', 'ClaimPhotos'],
|
||||
},
|
||||
children: [
|
||||
{
|
||||
|
|
@ -76,6 +76,15 @@ export default {
|
|||
},
|
||||
component: () => import('src/pages/Claim/Card/ClaimRma.vue'),
|
||||
},
|
||||
{
|
||||
name: 'ClaimPhotos',
|
||||
path: 'photos',
|
||||
meta: {
|
||||
title: 'photos',
|
||||
icon: 'vn:image',
|
||||
},
|
||||
component: () => import('src/pages/Claim/Card/ClaimPhoto.vue'),
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
|
|
|
|||
Loading…
Reference in New Issue