feat(claim_photo): fix html add uploadFile
gitea/salix-front/pipeline/head This commit looks good
Details
gitea/salix-front/pipeline/head This commit looks good
Details
This commit is contained in:
parent
75f0d53566
commit
0b0e73d65b
|
|
@ -294,6 +294,10 @@ export default {
|
|||
picked: 'Picked',
|
||||
returnOfMaterial: 'Return of material authorization (RMA)',
|
||||
},
|
||||
photo: {
|
||||
fileDescription:
|
||||
'Reclamacion ID {{claimId}} del cliente {{clientName}} id {{clientId}}',
|
||||
},
|
||||
},
|
||||
invoiceOut: {
|
||||
pageTitles: {
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ export default {
|
|||
darkMode: 'Modo oscuro',
|
||||
logOut: 'Cerrar sesión',
|
||||
dataSaved: 'Datos guardados',
|
||||
dataDeleted: 'Data deleted',
|
||||
dataDeleted: 'Datos eliminados',
|
||||
add: 'Añadir',
|
||||
create: 'Crear',
|
||||
save: 'Guardar',
|
||||
|
|
@ -293,6 +293,10 @@ export default {
|
|||
picked: 'Recogida',
|
||||
returnOfMaterial: 'Autorización de retorno de materiales (RMA)',
|
||||
},
|
||||
photo: {
|
||||
fileDescription:
|
||||
'Claim id {{claimId}} from client {{clientName}} id {{clientId}}',
|
||||
},
|
||||
},
|
||||
invoiceOut: {
|
||||
pageTitles: {
|
||||
|
|
|
|||
|
|
@ -17,18 +17,21 @@ const session = useSession();
|
|||
const token = session.getToken();
|
||||
const quasar = useQuasar();
|
||||
|
||||
const entityId = computed(function () {
|
||||
const claimId = computed(function () {
|
||||
return router.currentRoute.value.params.id;
|
||||
});
|
||||
|
||||
const multimedia = ref([]);
|
||||
const claimDms = ref([]);
|
||||
const dmsType = ref({});
|
||||
const config = ref({});
|
||||
const dms = ref({});
|
||||
const claimDmsFilter = ref({
|
||||
include: [
|
||||
{
|
||||
relation: 'dms',
|
||||
},
|
||||
],
|
||||
where: { claimFk: entityId },
|
||||
where: { claimFk: claimId.value },
|
||||
});
|
||||
|
||||
const multimediaDialog = ref();
|
||||
|
|
@ -59,31 +62,72 @@ function viewDeleteDms(dmsId) {
|
|||
|
||||
async function deleteDms(index) {
|
||||
console.log(index);
|
||||
const dmsId = multimedia.value[index].dmsFk;
|
||||
const dmsId = claimDms.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);
|
||||
quasar.notify({
|
||||
message: t('globals.dataDeleted'),
|
||||
type: 'positive',
|
||||
icon: 'delete',
|
||||
});
|
||||
claimDms.value.splice(index, 1);
|
||||
}
|
||||
|
||||
function setMultimedia(data) {
|
||||
multimedia.value = data.map((media) => {
|
||||
function setClaimDms(data) {
|
||||
claimDms.value = data.map((media) => {
|
||||
media.isVideo = media.dms.contentType == 'video/mp4';
|
||||
return media;
|
||||
});
|
||||
}
|
||||
//cover fill contain none scale-down
|
||||
|
||||
function uploadFile() {
|
||||
const element = document.createElement('input');
|
||||
element.setAttribute('type', 'file');
|
||||
element.setAttribute('multiple', true);
|
||||
element.click();
|
||||
|
||||
element.addEventListener('change', () => setDefaultParams());
|
||||
}
|
||||
|
||||
function setDefaultParams() {
|
||||
console.log(config.value);
|
||||
console.log(dmsType.value);
|
||||
dms.value = {
|
||||
hasFile: false,
|
||||
hasFileAttached: false,
|
||||
reference: claimId.value,
|
||||
warehouseId: config.value.warehouseFk,
|
||||
companyId: config.value.companyFk,
|
||||
dmsTypeId: dmsType.value.id,
|
||||
description: t('claim.photo.fileDescription', {
|
||||
claimId: claimId.value,
|
||||
clientId: claimDms.value.clientFk,
|
||||
clientName: claimDms.value.clientName,
|
||||
}).toUpperCase(),
|
||||
};
|
||||
console.log(dms.value);
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<fetch-data
|
||||
url="ClaimDms"
|
||||
:filter="claimDmsFilter"
|
||||
@on-fetch="(data) => setMultimedia(data)"
|
||||
@on-fetch="(data) => setClaimDms(data)"
|
||||
limit="20"
|
||||
auto-load
|
||||
/>
|
||||
<fetch-data
|
||||
url="DmsTypes/findOne"
|
||||
:filter="{ where: { code: 'claim' } }"
|
||||
@on-fetch="(data) => (dmsType = data)"
|
||||
auto-load
|
||||
/>
|
||||
<fetch-data
|
||||
url="UserConfigs/getUserConfig"
|
||||
@on-fetch="(data) => (config = data)"
|
||||
auto-load
|
||||
/>
|
||||
<div class="multimediaParent bg-transparent">
|
||||
<div v-for="(media, index) of multimedia" :key="index" class="relative-position">
|
||||
<div v-for="(media, index) of claimDms" :key="index" class="relative-position">
|
||||
<q-btn
|
||||
icon="delete"
|
||||
color="primary"
|
||||
|
|
@ -94,6 +138,18 @@ function setMultimedia(data) {
|
|||
@click.stop="viewDeleteDms(index)"
|
||||
round
|
||||
/>
|
||||
<q-icon
|
||||
name="play_arrow"
|
||||
color="primary"
|
||||
size="xl"
|
||||
class="absolute-center"
|
||||
style="z-index: 1"
|
||||
v-if="media.isVideo"
|
||||
@click.stop="openDialog(media.dmsFk)"
|
||||
flat
|
||||
>
|
||||
<q-tooltip>Video</q-tooltip>
|
||||
</q-icon>
|
||||
<q-card class="multimedia relative-position">
|
||||
<q-img
|
||||
:src="getImagePath(media)"
|
||||
|
|
@ -102,70 +158,61 @@ function setMultimedia(data) {
|
|||
v-if="!media.isVideo"
|
||||
>
|
||||
</q-img>
|
||||
<q-video
|
||||
<video
|
||||
:src="getImagePath(media)"
|
||||
class="rounded-borders cursor-pointer"
|
||||
muted="muted"
|
||||
style="pointer-events: none"
|
||||
v-if="media.isVideo"
|
||||
>
|
||||
</q-video>
|
||||
@click="openDialog(media.dmsFk)"
|
||||
></video>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<q-page-sticky position="bottom-right" :offset="[18, 18]">
|
||||
<q-btn fab icon="add" color="primary" @click="uploadFile()" />
|
||||
</q-page-sticky>
|
||||
|
||||
<!-- 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'"
|
||||
<q-card style="height: 80%; min-width: 80%">
|
||||
<q-card-section class="row items-center q-pb-none q-gutter-md">
|
||||
<q-avatar
|
||||
:icon="icon"
|
||||
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>
|
||||
text-color="white"
|
||||
size="xl"
|
||||
v-if="icon"
|
||||
/>
|
||||
<span class="text-h6 text-grey">{{ message }}</span>
|
||||
<q-space />
|
||||
<q-btn icon="close" flat round dense v-close-popup />
|
||||
</q-card-section>
|
||||
|
||||
<q-card-section class="q-pt-none">
|
||||
<q-carousel swipeable animated v-model="multimediaSlide" arrows>
|
||||
<q-carousel-slide
|
||||
v-for="media of multimedia"
|
||||
v-for="media of claimDms"
|
||||
:key="media.dmsFk"
|
||||
:name="media.dmsFk"
|
||||
class="fit"
|
||||
>
|
||||
<q-img
|
||||
height="100%"
|
||||
fit="scale-down"
|
||||
:src="getImagePath(media)"
|
||||
v-if="!media.isVideo"
|
||||
class="absolute-full"
|
||||
fit="scale-down"
|
||||
/>
|
||||
<q-video
|
||||
class="absolute-full"
|
||||
class="q-ma-none"
|
||||
:src="getImagePath(media)"
|
||||
v-if="media.isVideo"
|
||||
muted
|
||||
/>
|
||||
</q-carousel-slide>
|
||||
</q-carousel>
|
||||
|
|
@ -176,15 +223,6 @@ function setMultimedia(data) {
|
|||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container2 {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
& div {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.multimediaParent {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
|
||||
|
|
@ -197,14 +235,17 @@ function setMultimedia(data) {
|
|||
.multimedia {
|
||||
transition: all 0.5s;
|
||||
opacity: 1;
|
||||
height: 250px;
|
||||
|
||||
.q-img {
|
||||
height: 250px;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
object-fit: cover;
|
||||
background-color: black;
|
||||
}
|
||||
.q-video {
|
||||
height: 250px;
|
||||
video {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
object-fit: cover;
|
||||
background-color: black;
|
||||
}
|
||||
|
|
@ -213,6 +254,11 @@ function setMultimedia(data) {
|
|||
.multimedia:hover {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.q-video {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<i18n>
|
||||
|
|
|
|||
Loading…
Reference in New Issue