cssd-doc/cssd-back
1
0
Fork 0
mirror of https://git.meshkee.com/cssd/cssd-back.git synced 2026-10-10 19:01:05 +03:30
Code Issues Packages Projects Releases Wiki Activity

feat : lightbox

Browse Source
This commit is contained in:
zeinab.ashrafi
2025-04-27 10:38:26 +03:30
parent d84a9a18c0
commit 3ec315bc09
4 changed files with 83 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/js/show/config/urls.js
Vendored
-1
View File
@@ -17,7 +17,6 @@ const urls = {
return `/ShowCycle/${id}`;
},
Barcode: function(code, type) {
console.log(code, type,'aaa');
return `/BarCode/${code}/${type}`;
},
packageBarcode: function(code) {
resources/js/show/router/index.js
Vendored
-1
View File
@@ -30,7 +30,6 @@ function route (options) {
}
Vue.use(Router)
console.log(paths);
// Create a new router
const router = new Router({
mode: 'history',
resources/js/show/views/Item/ShowItem.vue
+34 -11
View File
@@ -6,7 +6,7 @@
<v-flex xs12>
<hr class="v-divider theme--light">
</v-flex>
<v-layout row wrap class="ml-4">
<v-layout row wrap class="ml-4 align-center">
<v-flex xs12 md6 sm6>
<div class>
<span class="title CSSD-font">Item ID :</span>
@@ -64,13 +64,12 @@
</div>
</v-flex>
</v-layout>
<v-layout align-left justify-left wrap class="my-3" v-if="data.files.length">
<v-layout align-left justify-left wrap class="my-3" v-if="data.files && data.files.length">
<h3 class="CSSD-font">Image</h3>
<v-flex xs12>
<hr class="v-divider theme--light"/>
</v-flex>
<v-layout row wrap class="">
<!-- <LightBox :media="data.images.map(img => ({thumb: img.path, src: img.path}))" style="width: 20%"></LightBox> -->
<v-flex xs6 md2 sm2 v-for="(file, key) in data.files" :key="key">
<template v-if="file.file_type == 'document'">
<a target="_blank" :href="'/'+file.thumbnail">
@@ -79,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>
@@ -117,23 +116,40 @@
</v-flex>
</v-layout>
</material-card>
<vue-image-lightbox
v-if="showLightbox"
:media="lightboxImages"
:index="lightboxIndex"
@close="showLightbox = false"
/>
</v-container>
</template>
<script>
import {urls} from "@show/config/urls";
import axios from "axios";
import toast from "@/services/global/toast.service";
import VueImageLightbox from "vue-image-lightbox";
import 'vue-image-lightbox/dist/vue-image-lightbox.min.css'
export default {
data: () => ({
data: {},
QRCodeimg: '',
barcodeimg: '',
MedicalCenter: ''
MedicalCenter: '',
showLightbox: false,
lightboxIndex: 0,
lightboxImages: [],
}),
components: {
VueImageLightbox,
},
computed: {
imagesOnly() {
return this.data.files && this.data.files.length? this.data.files.filter(file => file.file_type !== 'document') : [];
},
},
methods: {
async load(id) {
try {
@@ -149,7 +165,6 @@ export default {
console.error("Error loading data:", error);
}
},
async generateBarcode(item) {
let code = item.udi;
if (code) {
@@ -200,16 +215,24 @@ export default {
WinPrint.focus();
WinPrint.print();
WinPrint.close();
},
openLightbox(index) {
this.lightboxIndex = index;
this.showLightbox = false;
this.$nextTick(() => {
this.showLightbox = true;
});
}
},
created() {
if (this.$route.params.item) {
this.load(this.$route.params.item);
}
this.lightboxImages = this.imagesOnly && this.imagesOnly.length ? this.imagesOnly.map(file => ({
src: file.thumbnail,
thumb: file.thumbnail,
})) : [];
},
// mounted() {
// this.generateBarcode(this.data.id);
// }
};
</script>
resources/js/show/views/TestResult/ShowTestResult.vue
+49 -18
View File
@@ -114,24 +114,26 @@
</template>
</v-layout>
</v-layout>
<v-layout align-left justify-left wrap class="my-3">
<h3 class="ml-3 CSSD-font">Image</h3>
<v-flex xs12>
<hr class="v-divider theme--light"/>
</v-flex>
<v-layout row wrap class="ml-4">
<v-flex xs6 md2 sm2 v-for="(file, key) in data.files" :key="key">
<template v-if="file.file_type == 'document'">
<a target="_blank" :href="'/'+file.thumbnail">
<v-icon class="mr-2 caption">fas fa-check</v-icon>
{{ file.file_name }}
</a>
</template>
<template v-else>
<img :src="'/'+file.thumbnail" style="width: 100%"/>
</template>
<v-layout align-left justify-left wrap class="my-3">
<v-layout align-left justify-left wrap class="my-3" v-if="data.files && data.files.length">
<h3 class="CSSD-font">Image</h3>
<v-flex xs12>
<hr class="v-divider theme--light"/>
</v-flex>
<v-layout row wrap class="align-center">
<v-flex xs6 md2 sm2 v-for="(file, key) in data.files" :key="key">
<template v-if="file.file_type == 'document'">
<a target="_blank" :href="'/'+file.thumbnail">
<v-icon class="mr-2 caption">fas fa-check</v-icon>
{{ file.file_name }}</a>
</template>
<template v-else>
<img :src="file.thumbnail" style="width: 100%" @click="openLightbox(key)"/>
</template>
</v-flex>
</v-layout>
</v-layout>
<v-layout align-left justify-left wrap class="my-3">
<h3 class="ml-3 CSSD-font">Barcode And QRCode Image</h3>
@@ -140,7 +142,7 @@
</v-flex>
<v-layout row wrap class="ml-4 align-center mt-2">
<v-flex xs12 md6 sm6 v-if="barcodeimg">
<img :src="barcodeimg" class="barcode-container"><br/>
<img :src="barcodeimg" class="barcode-container" style="width: 100%;max-width: 300px;"><br/>
<span class="CSSD-font">Item ID : {{ data.id }}</span>
</v-flex>
<v-flex xs12 md6 sm6 v-if="QRCodeimg" class="WM-Align-C">
@@ -158,13 +160,20 @@
</v-flex>
</v-layout>
</material-card>
<vue-image-lightbox
v-if="showLightbox"
:media="lightboxImages"
:index="lightboxIndex"
@close="showLightbox = false"
/>
</v-container>
</template>
<script>
import {mapGetters, mapMutations} from "vuex";
import axios from "axios";
import {urls} from "@show/config/urls";
import VueImageLightbox from 'vue-image-lightbox'
import 'vue-image-lightbox/dist/vue-image-lightbox.min.css'
export default {
data: () => ({
@@ -174,7 +183,18 @@ export default {
User: '',
QRCodeimg: '',
barcodeimg: '',
showLightbox: false,
lightboxIndex: 0,
lightboxImages: [],
}),
components: {
VueImageLightbox,
},
computed: {
imagesOnly() {
return this.data.files && this.data.files.length? this.data.files.filter(file => file.file_type !== 'document') : [];
},
},
methods: {
async load(id) {
const result = await axios.get(urls.showTestResult(id));
@@ -228,12 +248,23 @@ export default {
WinPrint.focus();
WinPrint.print();
WinPrint.close();
},
openLightbox(index) {
this.lightboxIndex = index;
this.showLightbox = false;
this.$nextTick(() => {
this.showLightbox = true;
});
}
},
created() {
if (this.$route.params.id) {
this.load(this.$route.params.id);
}
this.lightboxImages = this.imagesOnly && this.imagesOnly.length ? this.imagesOnly.map(file => ({
src: file.thumbnail,
thumb: file.thumbnail,
})) : [];
},
};