cssd-doc/cssd-front
1
0
Fork 0
mirror of https://git.meshkee.com/cssd/cssd-front.git synced 2026-10-14 01:03:22 +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
+37 -11
View File
@@ -78,7 +78,7 @@
</template> </template>
<template v-else> <template v-else>
<img :src="file.thumbnail" style="width: 100%"/> <img :src="file.thumbnail" style="width: 100%" @click="openLightbox(key)"/>
</template> </template>
</v-flex> </v-flex>
</v-layout> </v-layout>
@@ -113,19 +113,27 @@
<v-icon class="white--text mr-2 caption">fas fa-print</v-icon> <v-icon class="white--text mr-2 caption">fas fa-print</v-icon>
<span class="white--text CSSD-font">Print</span> <span class="white--text CSSD-font">Print</span>
</v-btn> </v-btn>
<v-btn class="WM-CyanBlueGradient-BG" <!-- <v-btn class="WM-CyanBlueGradient-BG"
@click="changeCurrentModal({modal: 'modal-user-list', properties: { data }})" @click="changeCurrentModal({modal: 'modal-user-list', properties: { data }})"
style="padding:10px 60px"> style="padding:10px 60px">
<!-- <v-icon class="white--text mr-2 caption">fas fa-print</v-icon> --> &lt;!&ndash; <v-icon class="white&#45;&#45;text mr-2 caption">fas fa-print</v-icon> &ndash;&gt;
<v-icon class="white--text mr-2 caption">fas fa-rocket</v-icon> <v-icon class="white&#45;&#45;text mr-2 caption">fas fa-rocket</v-icon>
<span class="white--text CSSD-font">Transfer</span> <span class="white&#45;&#45;text CSSD-font">Transfer</span>
</v-btn> </v-btn>-->
</v-layout> </v-layout>
</material-card> </material-card>
<vue-image-lightbox
v-if="showLightbox"
:media="lightboxImages"
:index="lightboxIndex"
@close="showLightbox = false"
/>
</v-container> </v-container>
</template> </template>
<script> <script>
import VueImageLightbox from 'vue-image-lightbox'
import 'vue-image-lightbox/dist/vue-image-lightbox.min.css'
import {mapGetters, mapMutations} from "vuex"; import {mapGetters, mapMutations} from "vuex";
import {ApiService} from "@/services"; import {ApiService} from "@/services";
import {urls} from "@/config/urls"; import {urls} from "@/config/urls";
@@ -135,8 +143,14 @@ export default {
data: () => ({ data: () => ({
data: {}, data: {},
QRCodeimg: '', QRCodeimg: '',
barcodeimg: '' barcodeimg: '',
showLightbox: false,
lightboxIndex: 0,
lightboxImages: [],
}), }),
components: {
VueImageLightbox,
},
methods: { methods: {
...mapMutations("modal", ["closeModal", "setResultModal", "changeCurrentModal"]), ...mapMutations("modal", ["closeModal", "setResultModal", "changeCurrentModal"]),
async generateBarcode(item) { async generateBarcode(item) {
@@ -183,16 +197,28 @@ export default {
WinPrint.focus(); WinPrint.focus();
WinPrint.print(); WinPrint.print();
WinPrint.close(); WinPrint.close();
},
openLightbox(index) {
this.lightboxIndex = index;
this.showLightbox = false;
this.$nextTick(() => {
this.showLightbox = true;
});
} }
}, },
created() { created() {
this.data = this.getModalProperties.result.data.data; 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: { computed: {
...mapGetters("modal", ["getModalProperties"]) ...mapGetters("modal", ["getModalProperties"]),
imagesOnly() {
return this.data.files.filter(file => file.file_type !== 'document');
},
}, },
mounted() {
this.generateBarcode(this.data);
}
}; };
</script> </script>
src/components/modal/testresult/Show.vue
+31 -5
View File
@@ -127,7 +127,7 @@
</template> </template>
<template v-else> <template v-else>
<img :src="file.thumbnail" style="width: 100%"/> <img :src="file.thumbnail" style="width: 100%" @click="openLightbox(key)"/>
</template> </template>
</v-flex> </v-flex>
</v-layout> </v-layout>
@@ -180,6 +180,12 @@
</a> </a>
</v-layout> </v-layout>
</material-card> </material-card>
<vue-image-lightbox
v-if="showLightbox"
:media="lightboxImages"
:index="lightboxIndex"
@close="showLightbox = false"
/>
</v-container> </v-container>
</template> </template>
<script> <script>
@@ -187,14 +193,20 @@ import {mapGetters, mapMutations} from "vuex";
import {ApiService} from "@/services"; import {ApiService} from "@/services";
import {urls} from "@/config/urls"; import {urls} from "@/config/urls";
import toast from "@/services/global/toast.service"; import toast from "@/services/global/toast.service";
// import LightBox from 'vue-image-lightbox'; import VueImageLightbox from 'vue-image-lightbox'
// import 'vue-image-lightbox/dist/vue-image-lightbox.min.css' import 'vue-image-lightbox/dist/vue-image-lightbox.min.css'
export default { export default {
data: () => ({ data: () => ({
data: {}, data: {},
QRCodeimg: '', QRCodeimg: '',
barcodeimg: '' barcodeimg: '',
showLightbox: false,
lightboxIndex: 0,
lightboxImages: [],
}), }),
components: {
VueImageLightbox,
},
methods: { methods: {
...mapMutations("modal", ["closeModal", "setResultModal"]), ...mapMutations("modal", ["closeModal", "setResultModal"]),
async verify(id, value) { async verify(id, value) {
@@ -243,13 +255,27 @@ export default {
WinPrint.focus(); WinPrint.focus();
WinPrint.print(); WinPrint.print();
WinPrint.close(); WinPrint.close();
},
openLightbox(index) {
this.lightboxIndex = index;
this.showLightbox = false;
this.$nextTick(() => {
this.showLightbox = true;
});
} }
}, },
created() { created() {
this.data = this.getModalProperties.result.data.data; this.data = this.getModalProperties.result.data.data;
this.lightboxImages = this.imagesOnly.length ? this.imagesOnly.map(file => ({
src: file.thumbnail,
thumb: file.thumbnail,
})) : [];
}, },
computed: { computed: {
...mapGetters("modal", ["getModalProperties"]) ...mapGetters("modal", ["getModalProperties"]),
imagesOnly() {
return this.data.files.filter(file => file.file_type !== 'document');
},
}, },
mounted() { mounted() {
this.generateBarcode(this.data); 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-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" v-if="$hasRole('Admin|Supervisor') || item.user_id == $store.state.user.id"
@click="transfer(item)"> @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> <span class="CSSD-font">Transfer</span>
</v-btn> </v-btn>
</template> </template>
src/views/MyItem/List.vue
+5 -5
View File
@@ -38,10 +38,10 @@
<span>Filter</span> <span>Filter</span>
</v-tooltip> </v-tooltip>
<v-btn class="WM-Outline-Btn WM-Border mr-2 WM-Margin-BT-0 WM-Border-Black" style="padding: 10px 30px;"> <!-- <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> <v-icon class="black&#45;&#45;text mr-2 caption">fas fa-share-square</v-icon>
<span class="black--text">EXPORT</span> <span class="black&#45;&#45;text">EXPORT</span>
</v-btn> </v-btn>-->
<router-link :to="{ name: 'AddItem' }"> <router-link :to="{ name: 'AddItem' }">
<v-btn class="WM-CyanBlueGradient-BG WM-Margin-BT-0" style="padding:10px 30px"> <v-btn class="WM-CyanBlueGradient-BG WM-Margin-BT-0" style="padding:10px 30px">
@@ -112,7 +112,7 @@
<template v-slot:activator="{ on, attrs }"> <template v-slot:activator="{ on, attrs }">
<v-btn class="mr-2" v-bind="attrs" v-on="on" color="light-gray" <v-btn class="mr-2" v-bind="attrs" v-on="on" color="light-gray"
@click="transfer(item)"> @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> <span class="CSSD-font">Transfer</span>
</v-btn> </v-btn>
</template> </template>
src/views/MyPackage/List.vue
+5 -5
View File
@@ -29,10 +29,10 @@
<span>Filter</span> <span>Filter</span>
</v-tooltip> </v-tooltip>
<v-btn class="WM-Outline-Btn WM-Border mr-2 WM-Margin-BT-0 WM-Border-Black" style="padding: 10px 30px;"> <!-- <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> <v-icon class="black&#45;&#45;text mr-2 caption">fas fa-share-square</v-icon>
<span class="black--text">EXPORT</span> <span class="black&#45;&#45;text">EXPORT</span>
</v-btn> </v-btn>-->
<router-link :to="{ name: 'AddPackage' }"> <router-link :to="{ name: 'AddPackage' }">
<v-btn class="WM-CyanBlueGradient-BG WM-Margin-BT-0" style="padding:10px 30px"> <v-btn class="WM-CyanBlueGradient-BG WM-Margin-BT-0" style="padding:10px 30px">
@@ -105,7 +105,7 @@
<template v-slot:activator="{ on, attrs }"> <template v-slot:activator="{ on, attrs }">
<v-btn class="mr-2" v-bind="attrs" v-on="on" color="light-gray" <v-btn class="mr-2" v-bind="attrs" v-on="on" color="light-gray"
@click="transfer(item)"> @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> <span class="CSSD-font">Transfer</span>
</v-btn> </v-btn>
</template> </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-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)" v-if="$hasRole('Admin|Supervisor') ||( item.user_id == $store.state.user.id)"
@click="transfer(item)"> @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> <span class="CSSD-font">Transfer</span>
</v-btn> </v-btn>
</template> </template>
src/views/TestResult/AddEdit.vue
+4 -4
View File
@@ -148,7 +148,7 @@
<h3 class="WM-BorderLeftTitle">{{ item.name }}</h3> <h3 class="WM-BorderLeftTitle">{{ item.name }}</h3>
</v-layout> </v-layout>
<v-layout row wrap> <v-layout row wrap>
<v-app> <!-- <v-app>
<v-container> <v-container>
<v-select <v-select
multiple multiple
@@ -159,9 +159,9 @@
item-value="id" item-value="id"
/> />
</v-container> </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-flex xs12>
<v-select <v-select
multiple multiple
@@ -174,7 +174,7 @@
item-value="id" item-value="id"
/> />
</v-flex> </v-flex>
</v-container>--> </v-container>
</v-layout> </v-layout>
</v-container> </v-container>
<v-container row md-12 sm-12 xs-12 class="pa-0" v-if="item.type == 'Checkbox'"> <v-container row md-12 sm-12 xs-12 class="pa-0" v-if="item.type == 'Checkbox'">