cssd-doc/cssd-front
1
0
Fork 0
mirror of https://git.meshkee.com/cssd/cssd-front.git synced 2026-10-11 21:33:18 +03:30
Code Issues Packages Projects Releases Wiki Activity

fix : light box

Browse Source
This commit is contained in:
zeinab.ashrafi
2025-04-26 14:17:51 +03:30
parent c30be109b1
commit 221a7f7f40
7 changed files with 86 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/modal/item/show.vue
+39 -13
View File
@@ -78,7 +78,7 @@
</template>
<template v-else>
<img :src="file.thumbnail" style="width: 100%"/>
<img :src="file.thumbnail" style="width: 100%" @click="openLightbox(key)"/>
</template>
</v-flex>
</v-layout>
@@ -113,19 +113,27 @@
<v-icon class="white--text mr-2 caption">fas fa-print</v-icon>
<span class="white--text CSSD-font">Print</span>
</v-btn>
<v-btn class="WM-CyanBlueGradient-BG"
@click="changeCurrentModal({modal: 'modal-user-list', properties: { data }})"
style="padding:10px 60px">
<!-- <v-icon class="white--text mr-2 caption">fas fa-print</v-icon> -->
<v-icon class="white--text mr-2 caption">fas fa-rocket</v-icon>
<span class="white--text CSSD-font">Transfer</span>
</v-btn>
<!-- <v-btn class="WM-CyanBlueGradient-BG"
@click="changeCurrentModal({modal: 'modal-user-list', properties: { data }})"
style="padding:10px 60px">
&lt;!&ndash; <v-icon class="white&#45;&#45;text mr-2 caption">fas fa-print</v-icon> &ndash;&gt;
<v-icon class="white&#45;&#45;text mr-2 caption">fas fa-rocket</v-icon>
<span class="white&#45;&#45;text CSSD-font">Transfer</span>
</v-btn>-->
</v-layout>
</material-card>
<vue-image-lightbox
v-if="showLightbox"
:media="lightboxImages"
:index="lightboxIndex"
@close="showLightbox = false"
/>
</v-container>
</template>
<script>
import VueImageLightbox from 'vue-image-lightbox'
import 'vue-image-lightbox/dist/vue-image-lightbox.min.css'
import {mapGetters, mapMutations} from "vuex";
import {ApiService} from "@/services";
import {urls} from "@/config/urls";
@@ -135,8 +143,14 @@ export default {
data: () => ({
data: {},
QRCodeimg: '',
barcodeimg: ''
barcodeimg: '',
showLightbox: false,
lightboxIndex: 0,
lightboxImages: [],
}),
components: {
VueImageLightbox,
},
methods: {
...mapMutations("modal", ["closeModal", "setResultModal", "changeCurrentModal"]),
async generateBarcode(item) {
@@ -183,16 +197,28 @@ export default {
WinPrint.focus();
WinPrint.print();
WinPrint.close();
},
openLightbox(index) {
this.lightboxIndex = index;
this.showLightbox = false;
this.$nextTick(() => {
this.showLightbox = true;
});
}
},
created() {
this.data = this.getModalProperties.result.data.data;
this.lightboxImages = this.imagesOnly.length ? this.imagesOnly.map(file => ({
src: file.thumbnail,
thumb: file.thumbnail,
})) : [];
this.generateBarcode(this.data);
},
computed: {
...mapGetters("modal", ["getModalProperties"])
...mapGetters("modal", ["getModalProperties"]),
imagesOnly() {
return this.data.files.filter(file => file.file_type !== 'document');
},
},
mounted() {
this.generateBarcode(this.data);
}
};
</script>
src/components/modal/testresult/Show.vue
+31 -5
View File
@@ -127,7 +127,7 @@
</template>
<template v-else>
<img :src="file.thumbnail" style="width: 100%"/>
<img :src="file.thumbnail" style="width: 100%" @click="openLightbox(key)"/>
</template>
</v-flex>
</v-layout>
@@ -180,6 +180,12 @@
</a>
</v-layout>
</material-card>
<vue-image-lightbox
v-if="showLightbox"
:media="lightboxImages"
:index="lightboxIndex"
@close="showLightbox = false"
/>
</v-container>
</template>
<script>
@@ -187,14 +193,20 @@ import {mapGetters, mapMutations} from "vuex";
import {ApiService} from "@/services";
import {urls} from "@/config/urls";
import toast from "@/services/global/toast.service";
// import LightBox from 'vue-image-lightbox';
// import 'vue-image-lightbox/dist/vue-image-lightbox.min.css'
import VueImageLightbox from 'vue-image-lightbox'
import 'vue-image-lightbox/dist/vue-image-lightbox.min.css'
export default {
data: () => ({
data: {},
QRCodeimg: '',
barcodeimg: ''
barcodeimg: '',
showLightbox: false,
lightboxIndex: 0,
lightboxImages: [],
}),
components: {
VueImageLightbox,
},
methods: {
...mapMutations("modal", ["closeModal", "setResultModal"]),
async verify(id, value) {
@@ -243,13 +255,27 @@ export default {
WinPrint.focus();
WinPrint.print();
WinPrint.close();
},
openLightbox(index) {
this.lightboxIndex = index;
this.showLightbox = false;
this.$nextTick(() => {
this.showLightbox = true;
});
}
},
created() {
this.data = this.getModalProperties.result.data.data;
this.lightboxImages = this.imagesOnly.length ? this.imagesOnly.map(file => ({
src: file.thumbnail,
thumb: file.thumbnail,
})) : [];
},
computed: {
...mapGetters("modal", ["getModalProperties"])
...mapGetters("modal", ["getModalProperties"]),
imagesOnly() {
return this.data.files.filter(file => file.file_type !== 'document');
},
},
mounted() {
this.generateBarcode(this.data);
src/views/Item/List.vue
+1 -1
View File
@@ -118,7 +118,7 @@
<v-btn class="mr-2" v-bind="attrs" v-on="on" color="light-gray"
v-if="$hasRole('Admin|Supervisor') || item.user_id == $store.state.user.id"
@click="transfer(item)">
<v-icon class="black--text mr-2 caption">fas fa-arrows-alt</v-icon>
<v-icon class="black--text mr-2 caption">fas fa-exchange-alt</v-icon>
<span class="CSSD-font">Transfer</span>
</v-btn>
</template>
src/views/MyItem/List.vue
+5 -5
View File
@@ -38,10 +38,10 @@
<span>Filter</span>
</v-tooltip>
<v-btn class="WM-Outline-Btn WM-Border mr-2 WM-Margin-BT-0 WM-Border-Black" style="padding: 10px 30px;">
<v-icon class="black--text mr-2 caption">fas fa-share-square</v-icon>
<span class="black--text">EXPORT</span>
</v-btn>
<!-- <v-btn class="WM-Outline-Btn WM-Border mr-2 WM-Margin-BT-0 WM-Border-Black" style="padding: 10px 30px;">
<v-icon class="black&#45;&#45;text mr-2 caption">fas fa-share-square</v-icon>
<span class="black&#45;&#45;text">EXPORT</span>
</v-btn>-->
<router-link :to="{ name: 'AddItem' }">
<v-btn class="WM-CyanBlueGradient-BG WM-Margin-BT-0" style="padding:10px 30px">
@@ -112,7 +112,7 @@
<template v-slot:activator="{ on, attrs }">
<v-btn class="mr-2" v-bind="attrs" v-on="on" color="light-gray"
@click="transfer(item)">
<v-icon class="black--text mr-2 caption">fas fa-arrows-alt</v-icon>
<v-icon class="black--text mr-2 caption">fas fa-exchange-alt</v-icon>
<span class="CSSD-font">Transfer</span>
</v-btn>
</template>
src/views/MyPackage/List.vue
+5 -5
View File
@@ -29,10 +29,10 @@
<span>Filter</span>
</v-tooltip>
<v-btn class="WM-Outline-Btn WM-Border mr-2 WM-Margin-BT-0 WM-Border-Black" style="padding: 10px 30px;">
<v-icon class="black--text mr-2 caption">fas fa-share-square</v-icon>
<span class="black--text">EXPORT</span>
</v-btn>
<!-- <v-btn class="WM-Outline-Btn WM-Border mr-2 WM-Margin-BT-0 WM-Border-Black" style="padding: 10px 30px;">
<v-icon class="black&#45;&#45;text mr-2 caption">fas fa-share-square</v-icon>
<span class="black&#45;&#45;text">EXPORT</span>
</v-btn>-->
<router-link :to="{ name: 'AddPackage' }">
<v-btn class="WM-CyanBlueGradient-BG WM-Margin-BT-0" style="padding:10px 30px">
@@ -105,7 +105,7 @@
<template v-slot:activator="{ on, attrs }">
<v-btn class="mr-2" v-bind="attrs" v-on="on" color="light-gray"
@click="transfer(item)">
<v-icon class="black--text mr-2 caption">fas fa-arrows-alt</v-icon>
<v-icon class="black--text mr-2 caption">fas fa-exchange-alt</v-icon>
<span class="CSSD-font">Transfer</span>
</v-btn>
</template>
src/views/Package/List.vue
+1 -1
View File
@@ -109,7 +109,7 @@
<v-btn class="mr-2" v-bind="attrs" v-on="on" color="light-gray"
v-if="$hasRole('Admin|Supervisor') ||( item.user_id == $store.state.user.id)"
@click="transfer(item)">
<v-icon class="black--text mr-2 caption">fas fa-arrows-alt</v-icon>
<v-icon class="black--text mr-2 caption">fas fa-exchange-alt</v-icon>
<span class="CSSD-font">Transfer</span>
</v-btn>
</template>
src/views/TestResult/AddEdit.vue
+4 -4
View File
@@ -148,7 +148,7 @@
<h3 class="WM-BorderLeftTitle">{{ item.name }}</h3>
</v-layout>
<v-layout row wrap>
<v-app>
<!-- <v-app>
<v-container>
<v-select
multiple
@@ -159,9 +159,9 @@
item-value="id"
/>
</v-container>
</v-app>
</v-app>-->
<!-- <v-container fluid class="WM-Padding-LR-0">
<v-container fluid class="WM-Padding-LR-0">
<v-flex xs12>
<v-select
multiple
@@ -174,7 +174,7 @@
item-value="id"
/>
</v-flex>
</v-container>-->
</v-container>
</v-layout>
</v-container>
<v-container row md-12 sm-12 xs-12 class="pa-0" v-if="item.type == 'Checkbox'">